@kids-reporter/draft-editor 1.0.2 → 1.0.4

package/lib/draft-editor.js

@@ -3,212 +3,36 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RichTextEditor = void 0;
-Object.defineProperty(exports, "decorator", {
-  enumerable: true,
-  get: function () {
-    return _draftRenderer.decorator;
-  }
-});
-exports.default = void 0;
+exports.default = exports.decorator = exports.RichTextEditor = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _btNames = _interopRequireDefault(require("./buttons/bt-names"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _draftJs = require("draft-js");
-var _bgColor = require("./buttons/bg-color");
-var _blockquote = require("./buttons/blockquote");
-var _divider = require("./buttons/divider");
-var _embeddedCode = require("./buttons/embedded-code");
-var _enlarge = require("./buttons/enlarge");
-var _fontColor = require("./buttons/font-color");
-var _image = require("./buttons/image");
-var _link = require("./buttons/link");
-var _slideshow = require("./buttons/slideshow");
-var _imageSelector = require("./buttons/selector/image-selector");
-var _newsReading = require("./buttons/news-reading");
-var _blockRendererFn = require("./block-renderer-fn");
 var _draftRenderer = require("@kids-reporter/draft-renderer");
+var _btNames = _interopRequireDefault(require("./buttons/bt-names"));
+var _blockRendererFn = require("./block-renderer-fn");
+var _styled = require("./styled");
+var _buttons = require("./buttons");
+var _imageSelector = require("./buttons/selector/image-selector");
 var _annotation = require("./buttons/annotation");
 var _infoBox = require("./buttons/info-box");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _bgColor = require("./buttons/bg-color");
+var _fontColor = require("./buttons/font-color");
+var _anchor = require("./entity-decorators/anchor");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const buttonStyle = (0, _styledComponents.css)`
-  cursor: pointer;
-  border-radius: 6px;
-  text-align: center;
-  font-size: 1rem;
-  padding: 0 12px;
-  margin: ${props => props.isDisabled ? '0' : '0 0 10px 0'};
-  background-color: #fff;
-  border: solid 1px rgb(193, 199, 208);
-  align-items: center;
-  height: 40px;
-
-  cursor: ${props => props.readOnly ? 'not-allowed' : 'pointer'};
-  color: ${props => {
-  if (props.readOnly) {
-    return '#c1c7d0';
-  }
-  if (props.isActive) {
-    return '#3b82f6';
-  }
-  return '#6b7280';
-}};
-  border: solid 1px
-    ${props => {
-  if (props.readOnly) {
-    return '#c1c7d0';
-  }
-  if (props.isActive) {
-    return '#3b82f6';
-  }
-  return '#6b7280';
-}};
-  box-shadow: ${props => {
-  if (props.readOnly) {
-    return 'unset';
-  }
-  if (props.isActive) {
-    return 'rgba(38, 132, 255, 20%)  0px 1px 4px ';
-  }
-  return 'unset';
-}};
-  transition: box-shadow 100ms linear;
-
-  display: ${props => {
-  if (props.isDisabled) {
-    return 'none';
-  }
-  return 'inline-flex';
-}};
-`;
-
-// TODO: refactor custom button
-// Refactoring goal is to avoid `styled()` on every button,
-// which is tedious and duplicate.
-const CustomButton = _styledComponents.default.div`
-  ${buttonStyle}
-`;
-const CustomBlockquoteButton = (0, _styledComponents.default)(_blockquote.BlockquoteButton)`
-  ${buttonStyle}
-`;
-const CustomLinkButton = (0, _styledComponents.default)(_link.LinkButton)`
-  ${buttonStyle}
-`;
-const CustomEnlargeButton = (0, _styledComponents.default)(_enlarge.EnlargeButton)`
-  ${buttonStyle}
-  color: #999;
-`;
-const CustomImageButton = (0, _styledComponents.default)(_image.ImageButton)`
-  ${buttonStyle}
-`;
-const CustomSlideshowButton = (0, _styledComponents.default)(_slideshow.SlideshowButton)`
-  ${buttonStyle}
-`;
-const CustomEmbeddedCodeButton = (0, _styledComponents.default)(_embeddedCode.EmbeddedCodeButton)`
-  ${buttonStyle}
-`;
-const CustomNewsReadingButton = (0, _styledComponents.default)(_newsReading.NewsReadingButton)`
-  ${buttonStyle}
-`;
-const CustomBackgroundColorButton = (0, _styledComponents.default)(_bgColor.BackgroundColorButton)`
-  ${buttonStyle}
-`;
-const CustomFontColorButton = (0, _styledComponents.default)(_fontColor.FontColorButton)`
-  ${buttonStyle}
-`;
-const CustomDividerButton = (0, _styledComponents.default)(_divider.DividerButton)`
-  ${buttonStyle}
-`;
-const DraftEditorWrapper = _styledComponents.default.div`
-  /* Rich-editor default setting (.RichEditor-root)*/
-  background: #fff;
-  border: 1px solid #ddd;
-  font-family: 'Georgia', serif;
-  font-size: 14px;
-  padding: 15px;
-
-  /* Custom setting */
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  width: 100%;
-  height: 100%;
-  background: rgb(255, 255, 255);
-  border-radius: 6px;
-  padding: 0 1rem 1rem;
-`;
-const DraftEditorControls = _styledComponents.default.div`
-  padding-top: 1rem;
-  width: 100%;
-  background: rgb(255, 255, 255);
-`;
-const DraftEditorControlsWrapper = _styledComponents.default.div`
-  width: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  padding-right: 45px;
-`;
-const TextEditorWrapper = _styledComponents.default.div`
-  /* Rich-editor default setting (.RichEditor-editor)*/
-  border-top: 1px solid #ddd;
-  cursor: text;
-  font-size: 16px;
-  margin-top: 10px;
-`;
-const DraftEditorContainer = _styledComponents.default.div`
-  overflow-x: hidden;
-  position: relative;
-  margin-top: 4px;
-  ${props => props.isEnlarged ? (0, _styledComponents.css)`
-          position: fixed;
-          width: 100%;
-          height: 100%;
-          top: 0;
-          left: 0;
-          z-index: 30;
-          padding-left: 3em;
-          padding-right: 3em;
-          background: rgba(0, 0, 0, 0.5);
-        ` : ''}
-  ${DraftEditorWrapper} {
-    ${props => props.isEnlarged ? (0, _styledComponents.css)`
-            width: 100%;
-            height: 100%;
-            padding: 0 1rem 0;
-            overflow: scroll;
-          ` : ''}
-  }
-  ${DraftEditorControls} {
-    ${props => props.isEnlarged ? (0, _styledComponents.css)`
-            position: sticky;
-            top: 0;
-            z-index: 12;
-          ` : ''}
-  }
-  ${DraftEditorControlsWrapper} {
-    ${props => props.isEnlarged ? (0, _styledComponents.css)`
-            overflow: auto;
-            padding-bottom: 0;
-          ` : ''}
-  }
-  ${TextEditorWrapper} {
-    ${props => props.isEnlarged ? (0, _styledComponents.css)`
-            max-width: 100%;
-            min-height: 100vh;
-            padding-bottom: 0;
-          ` : ''}
-  }
-`;
-const EnlargeButtonWrapper = _styledComponents.default.div`
-  position: absolute;
-  top: 0;
-  right: 0;
-  margin: 0;
-`;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const styleSource = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("link", {
+  href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css",
+  rel: "stylesheet",
+  type: "text/css"
+}), /*#__PURE__*/_react.default.createElement("link", {
+  href: "https://storage.googleapis.com/static-readr-tw-dev/cdn/draft-js/rich-editor.css",
+  rel: "stylesheet",
+  type: "text/css"
+}), /*#__PURE__*/_react.default.createElement("link", {
+  href: "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css",
+  rel: "stylesheet",
+  type: "text/css"
+}));
+const decorator = exports.decorator = new _draftJs.CompositeDecorator([_draftRenderer.annotationDecorator, _draftRenderer.linkDecorator]);
 class RichTextEditor extends _react.default.Component {
   editorRef = null;
   constructor(props) {
@@ -217,6 +41,12 @@ class RichTextEditor extends _react.default.Component {
       isEnlarged: false,
       readOnly: false
     };
+    this.editorDecorator = new _draftJs.CompositeDecorator([_draftRenderer.annotationDecorator, _draftRenderer.linkDecorator, {
+      ..._anchor.editableAnchorDecorator,
+      props: {
+        ...this.customEditProps
+      }
+    }]);
   }
   onChange = editorState => {
     this.props.onChange(editorState);
@@ -243,7 +73,6 @@ class RichTextEditor extends _react.default.Component {
   mapKeyToEditorCommand = e => {
     if (e.keyCode === 9 /* TAB */) {
       const newEditorState = _draftJs.RichUtils.onTab(e, this.props.editorState, 4 /* maxDepth */);
-
       if (newEditorState !== this.props.editorState) {
         this.onChange(newEditorState);
       }
@@ -284,52 +113,54 @@ class RichTextEditor extends _react.default.Component {
       isEnlarged: !this.state.isEnlarged
     });
   };
+  commonEditProps = {
+    onEditStart: () => {
+      this.setState({
+        // If custom block renderer requires mouse interaction,
+        // [Draft.js document](https://draftjs.org/docs/advanced-topics-block-components#recommendations-and-other-notes)
+        // suggests that we should temporarily set Editor
+        // to readOnly={true} during the interaction.
+        // In readOnly={true} condition, the user does not
+        // trigger any selection changes within the editor
+        // while interacting with custom block.
+        // If we don't set readOnly={true},
+        // it will cause some subtle bugs in InfoBox button.
+        readOnly: true
+      });
+    },
+    onEditFinish: () => {
+      this.setState({
+        readOnly: false
+      });
+    }
+  };
+  customEditProps = {
+    onEditStart: this.commonEditProps.onEditStart,
+    onEditFinish: ({
+      entityKey,
+      entityData
+    } = {}) => {
+      if (entityKey && entityData) {
+        const oldContentState = this.props.editorState.getCurrentContent();
+        const newContentState = oldContentState.replaceEntityData(entityKey, entityData);
+        this.onChange(_draftJs.EditorState.set(this.props.editorState, {
+          currentContent: newContentState
+        }));
+      }
+      this.commonEditProps.onEditFinish();
+    }
+  };
   blockRendererFn = block => {
     const atomicBlockObj = (0, _blockRendererFn.atomicBlockRenderer)(block);
     if (atomicBlockObj) {
-      const onEditStart = () => {
-        this.setState({
-          // If custom block renderer requires mouse interaction,
-          // [Draft.js document](https://draftjs.org/docs/advanced-topics-block-components#recommendations-and-other-notes)
-          // suggests that we should temporarily set Editor
-          // to readOnly={true} during the interaction.
-          // In readOnly={true} condition, the user does not
-          // trigger any selection changes within the editor
-          // while interacting with custom block.
-          // If we don't set readOnly={true},
-          // it will cause some subtle bugs in InfoBox button.
-          readOnly: true
-        });
-      };
-      const onEditFinish = ({
-        entityKey,
-        entityData
-      } = {}) => {
-        if (entityKey && entityData) {
-          const oldContentState = this.props.editorState.getCurrentContent();
-          const newContentState = oldContentState.replaceEntityData(entityKey, entityData);
-          this.onChange(_draftJs.EditorState.set(this.props.editorState, {
-            currentContent: newContentState
-          }));
-        }
-
-        // Custom block interaction is finished.
-        // Therefore, we set readOnly={false} to
-        // make editor editable.
-        this.setState({
-          readOnly: false
-        });
-      };
-
       // `onEditStart` and `onEditFinish` will be passed
       // into custom block component.
       // We can get them via `props.blockProps.onEditStart`
       // and `props.blockProps.onEditFinish` in the custom block components.
       atomicBlockObj['props'] = {
-        onEditStart,
-        onEditFinish,
+        ...this.customEditProps,
         RichTextEditorComponent: RichTextEditor,
-        decorator: _draftRenderer.decorator,
+        decorator,
         getMainEditorReadOnly: () => this.state.readOnly
       };
     }
@@ -343,149 +174,74 @@ class RichTextEditor extends _react.default.Component {
       editorState
     } = this.props;
     if (!(editorState instanceof _draftJs.EditorState)) {
-      editorState = _draftJs.EditorState.createEmpty(_draftRenderer.decorator);
+      editorState = _draftJs.EditorState.createEmpty(this.editorDecorator);
+    } else {
+      editorState = _draftJs.EditorState.set(editorState, {
+        decorator: this.editorDecorator
+      });
     }
     const {
       isEnlarged,
       readOnly
     } = this.state;
     const entityType = this.getEntityType(editorState);
-    return /*#__PURE__*/_react.default.createElement(DraftEditorContainer, {
+    const commonProps = {
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly
+    };
+    return /*#__PURE__*/_react.default.createElement(_styled.DraftEditorContainer, {
       isEnlarged: isEnlarged
-    }, /*#__PURE__*/_react.default.createElement(DraftEditorWrapper, null, /*#__PURE__*/_react.default.createElement("link", {
-      href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css",
-      rel: "stylesheet",
-      type: "text/css"
-    }), /*#__PURE__*/_react.default.createElement("link", {
-      href: "https://storage.googleapis.com/static-readr-tw-dev/cdn/draft-js/rich-editor.css",
-      rel: "stylesheet",
-      type: "text/css"
-    }), /*#__PURE__*/_react.default.createElement("link", {
-      href: "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css",
-      rel: "stylesheet",
-      type: "text/css"
-    }), /*#__PURE__*/_react.default.createElement(DraftEditorControls, null, /*#__PURE__*/_react.default.createElement(DraftEditorControlsWrapper, null, /*#__PURE__*/_react.default.createElement(BlockStyleControls, {
+    }, /*#__PURE__*/_react.default.createElement(_styled.DraftEditorWrapper, null, styleSource, /*#__PURE__*/_react.default.createElement(_styled.DraftEditorControls, null, /*#__PURE__*/_react.default.createElement(_styled.DraftEditorControlsWrapper, null, /*#__PURE__*/_react.default.createElement(_buttons.BlockStyleControls, {
       disabledButtons: disabledButtons,
       editorState: editorState,
       onToggle: this.toggleBlockType,
       readOnly: this.state.readOnly
-    }), /*#__PURE__*/_react.default.createElement(InlineStyleControls, {
+    }), /*#__PURE__*/_react.default.createElement(_buttons.InlineStyleControls, {
       disabledButtons: disabledButtons,
       editorState: editorState,
       onToggle: this.toggleInlineStyle,
       readOnly: this.state.readOnly
-    }), /*#__PURE__*/_react.default.createElement(EnlargeButtonWrapper, null, /*#__PURE__*/_react.default.createElement(CustomEnlargeButton, {
+    }), /*#__PURE__*/_react.default.createElement(_styled.EnlargeButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_buttons.CustomEnlargeButton, {
       onToggle: this.toggleEnlarge,
       isEnlarged: isEnlarged
-    })), /*#__PURE__*/_react.default.createElement(CustomLinkButton, {
+    })), /*#__PURE__*/_react.default.createElement(_buttons.CustomAnchorButton, _extends({
+      isDisabled: disabledButtons.includes(_btNames.default.anchor),
+      isActive: entityType === _draftRenderer.ANCHOR_ENTITY_TYPE
+    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomLinkButton, _extends({
       isDisabled: disabledButtons.includes(_btNames.default.link),
-      isActive: entityType === 'LINK',
-      editorState: editorState,
-      onChange: this.onChange,
-      readOnly: this.state.readOnly,
-      onEditStart: () => {
-        this.setState({
-          readOnly: true
-        });
-      },
-      onEditFinish: () => {
-        this.setState({
-          readOnly: false
-        });
-      }
-    }), /*#__PURE__*/_react.default.createElement(CustomBackgroundColorButton, {
+      isActive: entityType === 'LINK'
+    }, commonProps, this.commonEditProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomBackgroundColorButton, _extends({
       isDisabled: disabledButtons.includes(_btNames.default.backgroundColor),
-      isActive: editorState.getCurrentInlineStyle().find(styleName => typeof styleName === 'string' && styleName.startsWith(_bgColor.customStylePrefix)) !== undefined,
-      editorState: editorState,
-      onChange: this.onChange,
-      readOnly: this.state.readOnly,
-      onEditStart: () => {
-        this.setState({
-          readOnly: true
-        });
-      },
-      onEditFinish: () => {
-        this.setState({
-          readOnly: false
-        });
-      }
-    }), /*#__PURE__*/_react.default.createElement(CustomFontColorButton, {
+      isActive: editorState.getCurrentInlineStyle().find(styleName => typeof styleName === 'string' && styleName.startsWith(_bgColor.customStylePrefix)) !== undefined
+    }, commonProps, this.commonEditProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomFontColorButton, _extends({
       isDisabled: disabledButtons.includes(_btNames.default.fontColor),
-      isActive: editorState.getCurrentInlineStyle().find(styleName => typeof styleName === 'string' && styleName.startsWith(_fontColor.customStylePrefix)) !== undefined,
-      editorState: editorState,
-      onChange: this.onChange,
-      readOnly: this.state.readOnly,
-      onEditStart: () => {
-        this.setState({
-          readOnly: true
-        });
-      },
-      onEditFinish: () => {
-        this.setState({
-          readOnly: false
-        });
-      }
-    }), /*#__PURE__*/_react.default.createElement(CustomBlockquoteButton, {
-      isDisabled: disabledButtons.includes(_btNames.default.blockquote),
-      editorState: editorState,
-      onChange: this.onChange,
-      readOnly: this.state.readOnly
-    }), /*#__PURE__*/_react.default.createElement(CustomAnnotationButton, {
+      isActive: editorState.getCurrentInlineStyle().find(styleName => typeof styleName === 'string' && styleName.startsWith(_fontColor.customStylePrefix)) !== undefined
+    }, commonProps, this.commonEditProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomBlockquoteButton, _extends({
+      isDisabled: disabledButtons.includes(_btNames.default.blockquote)
+    }, commonProps)), /*#__PURE__*/_react.default.createElement(CustomAnnotationButton, _extends({
       isDisabled: disabledButtons.includes(_btNames.default.annotation),
-      isActive: entityType === 'ANNOTATION',
-      editorState: editorState,
-      onChange: editorState => {
-        this.onChange(editorState);
-      },
-      readOnly: this.state.readOnly,
-      onEditStart: () => {
-        this.setState({
-          readOnly: true
-        });
-      },
-      onEditFinish: () => {
-        this.setState({
-          readOnly: false
-        });
-      }
-    }), /*#__PURE__*/_react.default.createElement(CustomImageButton, {
+      isActive: entityType === 'ANNOTATION'
+    }, commonProps, this.commonEditProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomImageButton, _extends({
       isDisabled: disabledButtons.includes(_btNames.default.image),
-      editorState: editorState,
-      onChange: this.onChange,
-      readOnly: this.state.readOnly,
       ImageSelector: _imageSelector.ImageSelector
-    }), /*#__PURE__*/_react.default.createElement(CustomSlideshowButton, {
+    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomSlideshowButton, _extends({
       isDisabled: disabledButtons.includes(_btNames.default.slideshow),
-      editorState: editorState,
-      onChange: this.onChange,
-      readOnly: this.state.readOnly,
       ImageSelector: _imageSelector.ImageSelector
-    }), /*#__PURE__*/_react.default.createElement(CustomInfoBoxButton, {
-      isDisabled: disabledButtons.includes(_btNames.default.infoBox),
-      editorState: editorState,
-      onChange: this.onChange,
-      readOnly: this.state.readOnly
-    }), /*#__PURE__*/_react.default.createElement(CustomEmbeddedCodeButton, {
-      isDisabled: disabledButtons.includes(_btNames.default.embed),
-      editorState: editorState,
-      onChange: this.onChange,
-      readOnly: this.state.readOnly
-    }), /*#__PURE__*/_react.default.createElement(CustomNewsReadingButton, {
-      isDisabled: disabledButtons.includes(_btNames.default.newsReading),
-      editorState: editorState,
-      onChange: this.onChange,
-      readOnly: this.state.readOnly
-    }), /*#__PURE__*/_react.default.createElement(CustomDividerButton, {
-      isDisabled: disabledButtons.includes(_btNames.default.divider),
-      editorState: editorState,
-      onChange: this.onChange,
-      readOnly: this.state.readOnly
-    }))), /*#__PURE__*/_react.default.createElement(TextEditorWrapper, {
+    }, commonProps)), /*#__PURE__*/_react.default.createElement(CustomInfoBoxButton, _extends({
+      isDisabled: disabledButtons.includes(_btNames.default.infoBox)
+    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomEmbeddedCodeButton, _extends({
+      isDisabled: disabledButtons.includes(_btNames.default.embed)
+    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomNewsReadingButton, _extends({
+      isDisabled: disabledButtons.includes(_btNames.default.newsReading)
+    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomDividerButton, _extends({
+      isDisabled: disabledButtons.includes(_btNames.default.divider)
+    }, commonProps)))), /*#__PURE__*/_react.default.createElement(_styled.TextEditorWrapper, {
       onClick: () => {
         if (this.editorRef) {
           var _this$editorRef;
           // eslint-disable-next-line prettier/prettier
-          (_this$editorRef = this.editorRef) === null || _this$editorRef === void 0 ? void 0 : _this$editorRef.focus();
+          (_this$editorRef = this.editorRef) === null || _this$editorRef === void 0 || _this$editorRef.focus();
         }
       }
     }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
@@ -505,115 +261,17 @@ class RichTextEditor extends _react.default.Component {
   }
 }
 exports.RichTextEditor = RichTextEditor;
-class StyleButton extends _react.default.Component {
-  onToggle = e => {
-    e.preventDefault();
-    this.props.onToggle(this.props.style);
-  };
-  render() {
-    return /*#__PURE__*/_react.default.createElement(CustomButton, {
-      isDisabled: this.props.isDisabled,
-      isActive: this.props.active,
-      onMouseDown: this.onToggle,
-      readOnly: this.props.readOnly
-    }, this.props.icon && /*#__PURE__*/_react.default.createElement("i", {
-      className: this.props.icon
-    }), /*#__PURE__*/_react.default.createElement("span", null, !this.props.icon ? this.props.label : ''));
-  }
-}
-const blockStyles = [{
-  label: 'H2',
-  style: 'header-two',
-  icon: ''
-}, {
-  label: 'H3',
-  style: 'header-three',
-  icon: ''
-}, {
-  label: 'H4',
-  style: 'header-four',
-  icon: ''
-}, {
-  label: 'H5',
-  style: 'header-five',
-  icon: ''
-}, {
-  label: 'UL',
-  style: 'unordered-list-item',
-  icon: 'fas fa-list-ul'
-}, {
-  label: 'OL',
-  style: 'ordered-list-item',
-  icon: 'fas fa-list-ol'
-}, {
-  label: 'Code Block',
-  style: 'code-block',
-  icon: 'fas fa-code'
-}];
-const BlockStyleControls = props => {
-  const {
-    editorState,
-    disabledButtons
-  } = props;
-  const selection = editorState.getSelection();
-  const blockType = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, blockStyles.map(type => /*#__PURE__*/_react.default.createElement(StyleButton, {
-    isDisabled: disabledButtons.includes(type.style),
-    key: type.label,
-    active: type.style === blockType,
-    label: type.label,
-    onToggle: props.onToggle,
-    style: type.style,
-    icon: type.icon,
-    readOnly: props.readOnly
-  })));
-};
-const inlineStyles = [{
-  label: 'Bold',
-  style: 'BOLD',
-  icon: 'fas fa-bold'
-}, {
-  label: 'Italic',
-  style: 'ITALIC',
-  icon: 'fas fa-italic'
-}, {
-  label: 'Underline',
-  style: 'UNDERLINE',
-  icon: 'fas fa-underline'
-}, {
-  label: 'Monospace',
-  style: 'CODE',
-  icon: 'fas fa-terminal'
-}];
-const InlineStyleControls = props => {
-  const currentStyle = props.editorState.getCurrentInlineStyle();
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, inlineStyles.map(type => /*#__PURE__*/_react.default.createElement(StyleButton, {
-    isDisabled: props.disabledButtons.includes(type.style.toLowerCase()),
-    key: type.label,
-    active: currentStyle.has(type.style),
-    label: type.label,
-    onToggle: props.onToggle,
-    style: type.style,
-    icon: type.icon,
-    readOnly: props.readOnly
-  })));
-};
 const AnnotationButton = (0, _annotation.createAnnotationButton)({
   InnerEditor: RichTextEditor,
-  decorator: _draftRenderer.decorator
+  decorator
 });
-const CustomAnnotationButton = (0, _styledComponents.default)(AnnotationButton)`
-  ${buttonStyle}
-`;
 const InfoBoxButton = (0, _infoBox.createInfoBoxButton)({
   InnerEditor: RichTextEditor,
-  decorator: _draftRenderer.decorator
+  decorator
 });
-const CustomInfoBoxButton = (0, _styledComponents.default)(InfoBoxButton)`
-  ${buttonStyle}
-`;
-var _default = {
+const CustomAnnotationButton = (0, _buttons.withStyle)(AnnotationButton);
+const CustomInfoBoxButton = (0, _buttons.withStyle)(InfoBoxButton);
+var _default = exports.default = {
   RichTextEditor,
-  decorator: _draftRenderer.decorator
-};
-exports.default = _default;
+  decorator
+};