Some i18n support (button labels) (#295)

* Added React and ReactDOM to devDependencies * Replaced deprecated react-addons-test-utils with react-test-renderer/shallow * Added custom label support for link, image, & history buttons
sstur · Jul 27, 2019 · d9e6cc2 · d9e6cc2
1 parent f18543f
commit d9e6cc2
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 16 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,5 +1,3 @@
 language: node_js
 node_js:
   - "6"
-before_install:
-  - yarn add react@^15 react-dom@^15
diff --git a/package.json b/package.json
@@ -54,7 +54,9 @@
     "flow-bin": "^0.32.0",
     "mocha": "^3.1.2",
     "raw-loader": "^0.5.1",
-    "react-addons-test-utils": "^15.0.2",
+    "react": "16.x.x",
+    "react-dom": "16.x.x",
+    "react-test-renderer": "^16.4.0",
     "rimraf": "^2.5.4",
     "style-loader": "^0.18.2",
     "webpack": "^3.4.0",

diff --git a/src/__tests__/RichTextEditor-test.js b/src/__tests__/RichTextEditor-test.js
@@ -1,13 +1,13 @@
 /* @flow */
 const {describe, it} = global;
 import React from 'react';
-import {createRenderer} from 'react-addons-test-utils';
+import ShallowRenderer from 'react-test-renderer/shallow';
 import expect from 'expect';
 import RichTextEditor, {createEmptyValue} from '../RichTextEditor';
 
 describe('RichTextEditor', () => {
   it('should render', () => {
-    let renderer = createRenderer();
+    let renderer = new ShallowRenderer();
     let value = createEmptyValue();
     renderer.render(<RichTextEditor value={value} />);
     let output = renderer.getRenderOutput();

diff --git a/src/lib/EditorToolbar.js b/src/lib/EditorToolbar.js
@@ -198,11 +198,16 @@ export default class EditorToolbar extends Component {
     let isCursorOnLink = (entity != null && entity.type === ENTITY_TYPE.LINK);
     let shouldShowLinkButton = hasSelection || isCursorOnLink;
     let defaultValue = (entity && isCursorOnLink) ? entity.getData().url : '';
+    const config = toolbarConfig.LINK_BUTTONS || {};
+    const linkConfig = config.link || {};
+    const removeLinkConfig = config.removeLink || {};
+    const linkLabel = linkConfig.label || 'Link';
+    const removeLinkLabel = removeLinkConfig.label || 'Remove Link';
 
     return (
       <ButtonGroup key={name}>
         <PopoverIconButton
-          label="Link"
+          label={linkLabel}
           iconName="link"
           isDisabled={!shouldShowLinkButton}
           showPopover={this.state.showLinkInput}
@@ -212,7 +217,7 @@ export default class EditorToolbar extends Component {
         />
         <IconButton
           {...toolbarConfig.extraProps}
-          label="Remove Link"
+          label={removeLinkLabel}
           iconName="remove-link"
           isDisabled={!isCursorOnLink}
           onClick={this._removeLink}
@@ -222,11 +227,13 @@ export default class EditorToolbar extends Component {
     );
   }
 
-  _renderImageButton(name: string) {
+  _renderImageButton(name: string, toolbarConfig: ToolbarConfig) {
+    const config = (toolbarConfig.IMAGE_BUTTON || {});
+    const label = config.label || 'Image';
     return (
       <ButtonGroup key={name}>
         <PopoverIconButton
-          label="Image"
+          label={label}
           iconName="image"
           showPopover={this.state.showImageInput}
           onTogglePopover={this._toggleShowImageInput}
@@ -240,19 +247,24 @@ export default class EditorToolbar extends Component {
     let {editorState} = this.props;
     let canUndo = editorState.getUndoStack().size !== 0;
     let canRedo = editorState.getRedoStack().size !== 0;
+    const config = toolbarConfig.HISTORY_BUTTONS || {};
+    const undoConfig = config.undo || {};
+    const redoConfig = config.redo || {};
+    const undoLabel = undoConfig.label || 'Undo';
+    const redoLabel = redoConfig.label || 'Redo';
     return (
       <ButtonGroup key={name}>
         <IconButton
           {...toolbarConfig.extraProps}
-          label="Undo"
+          label={undoLabel}
           iconName="undo"
           isDisabled={!canUndo}
           onClick={this._undo}
           focusOnClick={false}
         />
         <IconButton
           {...toolbarConfig.extraProps}
-          label="Redo"
+          label={redoLabel}
           iconName="redo"
           isDisabled={!canRedo}
           onClick={this._redo}

diff --git a/yarn.lock b/yarn.lock
@@ -2100,6 +2100,18 @@ faye-websocket@~0.11.0:
   dependencies:
     websocket-driver ">=0.5.1"
 
+fbjs@^0.8.16:
+  version "0.8.16"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.9"
+
 fbjs@^0.8.7:
   version "0.8.15"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.15.tgz#4f0695fdfcc16c37c0b07facec8cb4c4091685b9"
@@ -3146,7 +3158,7 @@ longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 
-loose-envify@^1.0.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   dependencies:
@@ -3470,7 +3482,7 @@ oauth-sign@~0.8.1:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
 
-object-assign@^4.0.1, object-assign@^4.1.0:
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
@@ -4032,6 +4044,14 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
+prop-types@^15.6.0:
+  version "15.6.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 proxy-addr@~1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.5.tgz#71c0ee3b102de3f202f3b64f608d173fcba1a918"
@@ -4130,9 +4150,36 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-addons-test-utils@^15.0.2:
-  version "15.6.0"
-  resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.6.0.tgz#062d36117fe8d18f3ba5e06eb33383b0b85ea5b9"
+[email protected]:
+  version "16.4.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.0.tgz#099f067dd5827ce36a29eaf9a6cdc7cbf6216b1e"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
+react-is@^16.4.0:
+  version "16.4.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.0.tgz#cc9fdc855ac34d2e7d9d2eb7059bbc240d35ffcf"
+
+react-test-renderer@^16.4.0:
+  version "16.4.0"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.4.0.tgz#0dbe0e24263e94e1830c7afb1f403707fad313a3"
+  dependencies:
+    fbjs "^0.8.16"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+    react-is "^16.4.0"
+
+[email protected]:
+  version "16.4.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.4.0.tgz#402c2db83335336fba1962c08b98c6272617d585"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
 
 read-pkg-up@^1.0.1:
   version "1.0.1"