@mirrormedia/lilith-draft-editor 3.0.7 → 3.0.8-beta.1

package/lib/draft-js/draft-converter/index.js

@@ -43,6 +43,8 @@ const inlineTagMap = {
   CODE: ['<code>', '</code>'],
   default: ['<span>', '</span>'],
   ITALIC: ['<em>', '</em>'],
+  SUP: ['<sup>', '</sup>'],
+  SUB: ['<sub>', '</sub>'],
   UNDERLINE: ['<u>', '</u>']
 };
 const defaultEntityTagMap = {

package/lib/website/mirrormedia/draft-editor.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _theme = _interopRequireDefault(require("./theme"));
+var _theme = _interopRequireWildcard(require("./theme"));
 
 var _draftJs = require("draft-js");
 
@@ -69,6 +69,8 @@ var _audioSelector = require("./selector/audio-selector");
 
 var _sharedStyle = require("./shared-style");
 
+var _hooks = require("../../hooks");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -349,6 +351,7 @@ const DraftEditorControlsWrapper = _styledComponents.default.div`
   flex-direction: row;
   flex-wrap: wrap;
   padding-right: 45px;
+  column-gap: 5px;
 `;
 const TextEditorWrapper = _styledComponents.default.div`
   /* Rich-editor default setting (.RichEditor-editor)*/
@@ -436,7 +439,6 @@ const DraftEditorContainer = _styledComponents.default.div`
 `;
 const ButtonGroup = _styledComponents.default.div`
   margin: 0 10px 0 0;
-
   ${({
   isDisabled
 }) => isDisabled ? (0, _styledComponents.css)`
@@ -449,60 +451,70 @@ const EnlargeButtonWrapper = _styledComponents.default.div`
   right: 0;
   margin: 0;
 `;
+const MOBILE_BOUNDARY = _theme.mediaSize.md;
 
-class RichTextEditor extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isEnlarged: false,
-      readOnly: false
-    }; // Custom overrides for "code" style.
-
-    this.customStyleMap = {
-      CODE: {
-        backgroundColor: 'rgba(0, 0, 0, 0.05)',
-        fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
-        fontSize: 16,
-        padding: 2
-      }
-    };
-  }
+const RichTextEditor = ({
+  editorState: propEditorState,
+  onChange,
+  disabledButtons = [],
+  hideOnMobileButtons = []
+}) => {
+  const [isEnlarged, setIsEnlarged] = _react.default.useState(false);
+
+  const [readOnly, setReadOnly] = _react.default.useState(false);
 
-  onChange = editorState => {
-    this.props.onChange(editorState);
+  const editorRef = _react.default.useRef(null);
+
+  const checkIsDisabled = (0, _hooks.useButtonDisabledChecker)({
+    mobileBoundary: MOBILE_BOUNDARY,
+    disabledButtons,
+    hideOnMobileButtons
+  }); // Custom overrides for "code" style.
+
+  const customStyleMap = {
+    CODE: {
+      backgroundColor: 'rgba(0, 0, 0, 0.05)',
+      fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
+      fontSize: 16,
+      padding: 2
+    }
   };
-  handleKeyCommand = (command, editorState) => {
+  let editorState = propEditorState;
+
+  if (!(editorState instanceof _draftJs.EditorState)) {
+    editorState = _draftJs.EditorState.createEmpty(_entityDecorator.default);
+  }
+
+  const handleKeyCommand = (command, editorState) => {
     const newState = _draftJs.RichUtils.handleKeyCommand(editorState, command);
 
     if (newState) {
-      this.onChange(newState);
+      onChange(newState);
       return 'handled';
     }
 
     return 'not-handled';
   };
-  handleReturn = event => {
+
+  const handleReturn = event => {
     if (_draftJs.KeyBindingUtil.isSoftNewlineEvent(event)) {
-      const {
-        onChange,
-        editorState
-      } = this.props;
       onChange(_draftJs.RichUtils.insertSoftNewline(editorState));
       return 'handled';
     }
 
     return 'not-handled';
   };
-  mapKeyToEditorCommand = e => {
+
+  const mapKeyToEditorCommand = e => {
     if (e.keyCode === 9
     /* TAB */
     ) {
-      const newEditorState = _draftJs.RichUtils.onTab(e, this.props.editorState, 4
+      const newEditorState = _draftJs.RichUtils.onTab(e, editorState, 4
       /* maxDepth */
       );
 
-      if (newEditorState !== this.props.editorState) {
-        this.onChange(newEditorState);
+      if (newEditorState !== editorState) {
+        onChange(newEditorState);
       }
 
       return null;
@@ -510,13 +522,16 @@ class RichTextEditor extends _react.default.Component {
 
     return (0, _draftJs.getDefaultKeyBinding)(e);
   };
-  toggleBlockType = blockType => {
-    this.onChange(_draftJs.RichUtils.toggleBlockType(this.props.editorState, blockType));
+
+  const toggleBlockType = blockType => {
+    onChange(_draftJs.RichUtils.toggleBlockType(editorState, blockType));
   };
-  toggleInlineStyle = inlineStyle => {
-    this.onChange(_draftJs.RichUtils.toggleInlineStyle(this.props.editorState, inlineStyle));
+
+  const toggleInlineStyle = inlineStyle => {
+    onChange(_draftJs.RichUtils.toggleInlineStyle(editorState, inlineStyle));
   };
-  getEntityType = editorState => {
+
+  const getEntityType = editorState => {
     const contentState = editorState.getCurrentContent();
     const selection = editorState.getSelection();
     const startOffset = selection.getStartOffset();
@@ -543,8 +558,9 @@ class RichTextEditor extends _react.default.Component {
 
     return entityType;
   };
-  getCustomStyle = style => {
-    return style.reduce((styles, styleName) => {
+
+  const getCustomStyle = style => {
+    return style.reduce((styles = {}, styleName) => {
       if (styleName !== null && styleName !== void 0 && styleName.startsWith(_const.CUSTOM_STYLE_PREFIX_FONT_COLOR)) {
         styles['color'] = styleName.split(_const.CUSTOM_STYLE_PREFIX_FONT_COLOR)[1];
       }
@@ -556,21 +572,18 @@ class RichTextEditor extends _react.default.Component {
       return styles;
     }, {});
   };
-  toggleEnlarge = () => {
-    this.setState({
-      isEnlarged: !this.state.isEnlarged
-    });
+
+  const customStyleFn = style => {
+    return getCustomStyle(style);
   };
-  customStyleFn = style => {
-    return this.getCustomStyle(style);
+
+  const toggleEnlarge = () => {
+    setIsEnlarged(!isEnlarged);
   };
 
-  blockStyleFn(block) {
+  const blockStyleFn = block => {
     var _entity$getData;
 
-    const {
-      editorState
-    } = this.props;
     const entityKey = block.getEntityAt(0);
     const entity = entityKey ? editorState.getCurrentContent().getEntity(entityKey) : null;
     let result = '';
@@ -607,25 +620,30 @@ class RichTextEditor extends _react.default.Component {
     }
 
     return result;
-  }
+  };
 
-  blockRendererFn = block => {
+  const renderBasicEditor = propsOfBasicEditor => {
+    return /*#__PURE__*/_react.default.createElement(RichTextEditor, _extends({}, propsOfBasicEditor, {
+      disabledButtons: disabledButtonsOnBasicEditor,
+      hideOnMobileButtons: hideOnMobileButtons
+    }));
+  };
+
+  const 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
-        });
+        // 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.
+        setReadOnly(true);
       };
 
       const onEditFinish = ({
@@ -633,9 +651,9 @@ class RichTextEditor extends _react.default.Component {
         entityData
       }) => {
         if (entityKey && entityData) {
-          const oldContentState = this.props.editorState.getCurrentContent();
+          const oldContentState = editorState.getCurrentContent();
           const newContentState = oldContentState.replaceEntityData(entityKey, entityData);
-          this.onChange(_draftJs.EditorState.set(this.props.editorState, {
+          onChange(_draftJs.EditorState.set(editorState, {
             currentContent: newContentState
           }));
         } // Custom block interaction is finished.
@@ -643,9 +661,7 @@ class RichTextEditor extends _react.default.Component {
         // make editor editable.
 
 
-        this.setState({
-          readOnly: false
-        });
+        setReadOnly(false);
       }; // `onEditStart` and `onEditFinish` will be passed
       // into custom block component.
       // We can get them via `props.blockProps.onEditStart`
@@ -656,12 +672,8 @@ class RichTextEditor extends _react.default.Component {
         props: {
           onEditStart,
           onEditFinish,
-          getMainEditorReadOnly: () => this.state.readOnly,
-          renderBasicEditor: propsOfBasicEditor => {
-            return /*#__PURE__*/_react.default.createElement(RichTextEditor, _extends({}, propsOfBasicEditor, {
-              disabledButtons: disabledButtonsOnBasicEditor
-            }));
-          }
+          getMainEditorReadOnly: () => readOnly,
+          renderBasicEditor: renderBasicEditor
         }
       });
       return extendedAtomicBlockObj;
@@ -670,290 +682,288 @@ class RichTextEditor extends _react.default.Component {
     }
   };
 
-  render() {
-    const {
-      disabledButtons = []
-    } = this.props;
-    let {
-      editorState
-    } = this.props;
-
-    if (!(editorState instanceof _draftJs.EditorState)) {
-      editorState = _draftJs.EditorState.createEmpty(_entityDecorator.default);
+  const entityType = getEntityType(editorState);
+  const customStyle = getCustomStyle(editorState.getCurrentInlineStyle());
+  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
+    theme: _theme.default
+  }, /*#__PURE__*/_react.default.createElement(DraftEditorContainer, {
+    isEnlarged: Boolean(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://cdnjs.cloudflare.com/ajax/libs/draft-js/0.11.7/Draft.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, {
+    readOnly: readOnly,
+    disabledButtons: disabledButtons,
+    hideOnMobileButtons: hideOnMobileButtons,
+    editorState: editorState,
+    onToggle: toggleBlockType
+  }), /*#__PURE__*/_react.default.createElement(InlineStyleControls, {
+    readOnly: readOnly,
+    disabledButtons: disabledButtons,
+    hideOnMobileButtons: hideOnMobileButtons,
+    editorState: editorState,
+    onToggle: toggleInlineStyle
+  }), /*#__PURE__*/_react.default.createElement(EnlargeButtonWrapper, null, /*#__PURE__*/_react.default.createElement(CustomEnlargeButton, {
+    onToggle: toggleEnlarge,
+    isEnlarged: isEnlarged
+  }))), /*#__PURE__*/_react.default.createElement(DraftEditorControlsWrapper, null, /*#__PURE__*/_react.default.createElement(ButtonGroup, {
+    isDisabled: disabledButtons.includes(buttonNames.link)
+  }, /*#__PURE__*/_react.default.createElement(CustomLinkButton, {
+    isDisabled: checkIsDisabled(buttonNames.link),
+    isActive: entityType === 'LINK',
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange
+  })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
+    isDisabled: disabledButtons.includes(buttonNames.fontColor)
+  }, /*#__PURE__*/_react.default.createElement(CustomFontColorButton, {
+    isDisabled: checkIsDisabled(buttonNames.fontColor),
+    isActive: Object.prototype.hasOwnProperty.call(customStyle, 'color'),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange
+  })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
+    isDisabled: disabledButtons.includes(buttonNames.divider)
+  }, /*#__PURE__*/_react.default.createElement(CustomDividerButton, {
+    isDisabled: checkIsDisabled(buttonNames.divider),
+    editorState: editorState,
+    onChange: onChange
+  })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
+    isDisabled: disabledButtons.includes(buttonNames.annotation)
+  }, /*#__PURE__*/_react.default.createElement(CustomAnnotationButton, {
+    isDisabled: checkIsDisabled(buttonNames.annotation),
+    isActive: entityType === 'ANNOTATION',
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange,
+    renderBasicEditor: renderBasicEditor,
+    decorators: _entityDecorator.default
+  })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
+    isDisabled: disabledButtons.includes(buttonNames.image)
+  }, /*#__PURE__*/_react.default.createElement(CustomImageButton, {
+    isDisabled: checkIsDisabled(buttonNames.image),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange,
+    ImageSelector: _imageSelector.ImageSelector
+  })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
+    isDisabled: disabledButtons.includes(buttonNames.video)
+  }, /*#__PURE__*/_react.default.createElement(CustomVideoButton, {
+    isDisabled: checkIsDisabled(buttonNames.video),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange,
+    VideoSelector: _videoSelector.VideoSelector
+  })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
+    isDisabled: disabledButtons.includes(buttonNames.youtube)
+  }, /*#__PURE__*/_react.default.createElement(CustomYoutubeButton, {
+    isDisabled: checkIsDisabled(buttonNames.youtube),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange
+  })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
+    isDisabled: disabledButtons.includes(buttonNames.audio)
+  }, /*#__PURE__*/_react.default.createElement(CustomAudioButton, {
+    isDisabled: checkIsDisabled(buttonNames.audio),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange,
+    AudioSelector: _audioSelector.AudioSelector
+  })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
+    isDisabled: disabledButtons.includes(buttonNames.slideshow)
+  }, /*#__PURE__*/_react.default.createElement(CustomSlideshowButton, {
+    isDisabled: checkIsDisabled(buttonNames.slideshow),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange,
+    ImageSelector: _imageSelector.ImageSelector
+  })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
+    isDisabled: disabledButtons.includes(buttonNames.infoBox)
+  }, /*#__PURE__*/_react.default.createElement(CustomInfoBoxButton, {
+    isDisabled: checkIsDisabled(buttonNames.infoBox),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange,
+    renderBasicEditor: renderBasicEditor // decorators={decorators}
+
+  })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
+    isDisabled: disabledButtons.includes(buttonNames.embed)
+  }, /*#__PURE__*/_react.default.createElement(CustomEmbeddedCodeButton, {
+    isDisabled: checkIsDisabled(buttonNames.embed),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange
+  })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
+    isDisabled: disabledButtons.includes(buttonNames.table)
+  }, /*#__PURE__*/_react.default.createElement(CustomTableButton, {
+    isDisabled: checkIsDisabled(buttonNames.table),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange
+  }))), /*#__PURE__*/_react.default.createElement(DraftEditorControlsWrapper, null, /*#__PURE__*/_react.default.createElement(ButtonGroup, {
+    isDisabled: disabledButtons.includes(buttonNames.textAlign)
+  }, /*#__PURE__*/_react.default.createElement(CustomAlignLeftButton, {
+    isDisabled: checkIsDisabled(buttonNames.textAlign),
+    isActive: (0, _textAlign.getSelectionBlockData)(editorState, 'textAlign') === 'left',
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange
+  })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
+    isDisabled: disabledButtons.includes(buttonNames.textAlign)
+  }, /*#__PURE__*/_react.default.createElement(CustomAlignCenterButton, {
+    isDisabled: checkIsDisabled(buttonNames.textAlign),
+    isActive: (0, _textAlign.getSelectionBlockData)(editorState, 'textAlign') === 'center',
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange
+  })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
+    isDisabled: disabledButtons.includes(buttonNames.colorBox)
+  }, /*#__PURE__*/_react.default.createElement(CustomColorBoxButton, {
+    isDisabled: checkIsDisabled(buttonNames.colorBox),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange,
+    renderBasicEditor: renderBasicEditor // decorators={decorators}
+
+  })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
+    isDisabled: disabledButtons.includes(buttonNames.backgroundColor)
+  }, /*#__PURE__*/_react.default.createElement(CustomBackgroundColorButton, {
+    isDisabled: checkIsDisabled(buttonNames.backgroundColor),
+    isActive: Object.prototype.hasOwnProperty.call(customStyle, 'backgroundColor'),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange
+  })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
+    isDisabled: disabledButtons.includes(buttonNames.backgroundImage)
+  }, /*#__PURE__*/_react.default.createElement(CustomBGImageButton, {
+    isDisabled: checkIsDisabled(buttonNames.backgroundImage),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange,
+    ImageSelector: _imageSelector.ImageSelector,
+    renderBasicEditor: renderBasicEditor,
+    decorators: _entityDecorator.default
+  })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
+    isDisabled: disabledButtons.includes(buttonNames.backgroundVideo)
+  }, /*#__PURE__*/_react.default.createElement(CustomBGVideoButton, {
+    isDisabled: checkIsDisabled(buttonNames.backgroundVideo),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange,
+    VideoSelector: _videoSelector.VideoSelector,
+    renderBasicEditor: renderBasicEditor,
+    decorators: _entityDecorator.default
+  })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
+    isDisabled: disabledButtons.includes(buttonNames.relatedPost)
+  }, /*#__PURE__*/_react.default.createElement(CustomRelatedPostButton, {
+    isDisabled: checkIsDisabled(buttonNames.relatedPost),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange,
+    PostSelector: _postSelector.PostSelector
+  })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
+    isDisabled: disabledButtons.includes(buttonNames.sideIndex)
+  }, /*#__PURE__*/_react.default.createElement(CustomSideIndexButton, {
+    isDisabled: checkIsDisabled(buttonNames.sideIndex),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange
+  })))), /*#__PURE__*/_react.default.createElement(TextEditorWrapper, {
+    onClick: () => {
+      var _editorRef$current;
+
+      (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.focus();
     }
+  }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
+    blockStyleFn: blockStyleFn,
+    blockRendererFn: blockRendererFn,
+    customStyleMap: customStyleMap,
+    customStyleFn: customStyleFn,
+    editorState: editorState,
+    handleKeyCommand: handleKeyCommand,
+    handleReturn: handleReturn,
+    keyBindingFn: mapKeyToEditorCommand,
+    onChange: onChange,
+    placeholder: "Tell a story...",
+    ref: editorRef,
+    spellCheck: true,
+    readOnly: readOnly
+  })))));
+};
 
-    const {
-      isEnlarged,
-      readOnly
-    } = this.state;
-    const entityType = this.getEntityType(editorState);
-    const customStyle = this.getCustomStyle(editorState.getCurrentInlineStyle());
-
-    const renderBasicEditor = propsOfBasicEditor => {
-      return /*#__PURE__*/_react.default.createElement(RichTextEditor, _extends({}, propsOfBasicEditor, {
-        disabledButtons: disabledButtonsOnBasicEditor
-      }));
-    };
-
-    return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-      theme: _theme.default
-    }, /*#__PURE__*/_react.default.createElement(DraftEditorContainer, {
-      isEnlarged: Boolean(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://cdnjs.cloudflare.com/ajax/libs/draft-js/0.11.7/Draft.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(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(BlockStyleControls, {
-      readOnly: readOnly,
-      disabledButtons: disabledButtons,
-      editorState: editorState,
-      onToggle: this.toggleBlockType
-    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(InlineStyleControls, {
-      readOnly: readOnly,
-      disabledButtons: disabledButtons,
-      editorState: editorState,
-      onToggle: this.toggleInlineStyle
-    })), /*#__PURE__*/_react.default.createElement(EnlargeButtonWrapper, null, /*#__PURE__*/_react.default.createElement(CustomEnlargeButton, {
-      onToggle: this.toggleEnlarge,
-      isEnlarged: isEnlarged
-    }))), /*#__PURE__*/_react.default.createElement(DraftEditorControlsWrapper, null, /*#__PURE__*/_react.default.createElement(ButtonGroup, {
-      isDisabled: disabledButtons.includes(buttonNames.link)
-    }, /*#__PURE__*/_react.default.createElement(CustomLinkButton, {
-      isActive: entityType === 'LINK',
-      readOnly: readOnly,
-      editorState: editorState,
-      onChange: this.onChange
-    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
-      isDisabled: disabledButtons.includes(buttonNames.fontColor)
-    }, /*#__PURE__*/_react.default.createElement(CustomFontColorButton, {
-      isActive: Object.prototype.hasOwnProperty.call(customStyle, 'color'),
-      readOnly: readOnly,
-      editorState: editorState,
-      onChange: this.onChange
-    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
-      isDisabled: disabledButtons.includes(buttonNames.divider)
-    }, /*#__PURE__*/_react.default.createElement(CustomDividerButton, {
-      editorState: editorState,
-      onChange: this.onChange
-    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
-      isDisabled: disabledButtons.includes(buttonNames.annotation)
-    }, /*#__PURE__*/_react.default.createElement(CustomAnnotationButton, {
-      isActive: entityType === 'ANNOTATION',
-      readOnly: readOnly,
-      editorState: editorState,
-      onChange: this.onChange,
-      renderBasicEditor: renderBasicEditor,
-      decorators: _entityDecorator.default
-    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
-      isDisabled: disabledButtons.includes(buttonNames.image)
-    }, /*#__PURE__*/_react.default.createElement(CustomImageButton, {
-      readOnly: readOnly,
-      editorState: editorState,
-      onChange: this.onChange,
-      ImageSelector: _imageSelector.ImageSelector
-    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
-      isDisabled: disabledButtons.includes(buttonNames.video)
-    }, /*#__PURE__*/_react.default.createElement(CustomVideoButton, {
-      readOnly: readOnly,
-      editorState: editorState,
-      onChange: this.onChange,
-      VideoSelector: _videoSelector.VideoSelector
-    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
-      isDisabled: disabledButtons.includes(buttonNames.youtube)
-    }, /*#__PURE__*/_react.default.createElement(CustomYoutubeButton, {
-      readOnly: readOnly,
-      editorState: editorState,
-      onChange: this.onChange
-    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
-      isDisabled: disabledButtons.includes(buttonNames.audio)
-    }, /*#__PURE__*/_react.default.createElement(CustomAudioButton, {
-      readOnly: readOnly,
-      editorState: editorState,
-      onChange: this.onChange,
-      AudioSelector: _audioSelector.AudioSelector
-    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
-      isDisabled: disabledButtons.includes(buttonNames.slideshow)
-    }, /*#__PURE__*/_react.default.createElement(CustomSlideshowButton, {
-      readOnly: readOnly,
-      editorState: editorState,
-      onChange: this.onChange,
-      ImageSelector: _imageSelector.ImageSelector
-    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
-      isDisabled: disabledButtons.includes(buttonNames.infoBox)
-    }, /*#__PURE__*/_react.default.createElement(CustomInfoBoxButton, {
-      readOnly: readOnly,
-      editorState: editorState,
-      onChange: this.onChange,
-      renderBasicEditor: renderBasicEditor // decorators={decorators}
-
-    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
-      isDisabled: disabledButtons.includes(buttonNames.embed)
-    }, /*#__PURE__*/_react.default.createElement(CustomEmbeddedCodeButton, {
-      readOnly: readOnly,
-      editorState: editorState,
-      onChange: this.onChange
-    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
-      isDisabled: disabledButtons.includes(buttonNames.table)
-    }, /*#__PURE__*/_react.default.createElement(CustomTableButton, {
-      readOnly: readOnly,
-      editorState: editorState,
-      onChange: this.onChange
-    }))), /*#__PURE__*/_react.default.createElement(DraftEditorControlsWrapper, null, /*#__PURE__*/_react.default.createElement(ButtonGroup, {
-      isDisabled: disabledButtons.includes(buttonNames.textAlign)
-    }, /*#__PURE__*/_react.default.createElement(CustomAlignLeftButton, {
-      isActive: (0, _textAlign.getSelectionBlockData)(editorState, 'textAlign') === 'left',
-      readOnly: readOnly,
-      editorState: editorState,
-      onChange: this.onChange
-    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
-      isDisabled: disabledButtons.includes(buttonNames.textAlign)
-    }, /*#__PURE__*/_react.default.createElement(CustomAlignCenterButton, {
-      isActive: (0, _textAlign.getSelectionBlockData)(editorState, 'textAlign') === 'center',
-      readOnly: readOnly,
-      editorState: editorState,
-      onChange: this.onChange
-    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
-      isDisabled: disabledButtons.includes(buttonNames.colorBox)
-    }, /*#__PURE__*/_react.default.createElement(CustomColorBoxButton, {
-      readOnly: readOnly,
-      editorState: editorState,
-      onChange: this.onChange,
-      renderBasicEditor: renderBasicEditor // decorators={decorators}
-
-    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
-      isDisabled: disabledButtons.includes(buttonNames.backgroundColor)
-    }, /*#__PURE__*/_react.default.createElement(CustomBackgroundColorButton, {
-      isActive: Object.prototype.hasOwnProperty.call(customStyle, 'backgroundColor'),
-      readOnly: readOnly,
-      editorState: editorState,
-      onChange: this.onChange
-    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
-      isDisabled: disabledButtons.includes(buttonNames.backgroundImage)
-    }, /*#__PURE__*/_react.default.createElement(CustomBGImageButton, {
-      readOnly: readOnly,
-      editorState: editorState,
-      onChange: this.onChange,
-      ImageSelector: _imageSelector.ImageSelector,
-      renderBasicEditor: renderBasicEditor,
-      decorators: _entityDecorator.default
-    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
-      isDisabled: disabledButtons.includes(buttonNames.backgroundVideo)
-    }, /*#__PURE__*/_react.default.createElement(CustomBGVideoButton, {
-      readOnly: readOnly,
-      editorState: editorState,
-      onChange: this.onChange,
-      VideoSelector: _videoSelector.VideoSelector,
-      renderBasicEditor: renderBasicEditor,
-      decorators: _entityDecorator.default
-    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
-      isDisabled: disabledButtons.includes(buttonNames.relatedPost)
-    }, /*#__PURE__*/_react.default.createElement(CustomRelatedPostButton, {
-      readOnly: readOnly,
-      editorState: editorState,
-      onChange: this.onChange,
-      PostSelector: _postSelector.PostSelector
-    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, {
-      isDisabled: disabledButtons.includes(buttonNames.sideIndex)
-    }, /*#__PURE__*/_react.default.createElement(CustomSideIndexButton, {
-      readOnly: readOnly,
-      editorState: editorState,
-      onChange: this.onChange
-    })))), /*#__PURE__*/_react.default.createElement(TextEditorWrapper, {
-      onClick: () => {
-        var _this$refs$editor;
-
-        // eslint-disable-next-line prettier/prettier
-        (_this$refs$editor = this.refs.editor) === null || _this$refs$editor === void 0 ? void 0 : _this$refs$editor.focus();
-      }
-    }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
-      blockStyleFn: this.blockStyleFn.bind(this),
-      blockRendererFn: this.blockRendererFn,
-      customStyleMap: this.customStyleMap,
-      customStyleFn: this.customStyleFn,
-      editorState: editorState,
-      handleKeyCommand: this.handleKeyCommand,
-      handleReturn: this.handleReturn,
-      keyBindingFn: this.mapKeyToEditorCommand,
-      onChange: this.onChange,
-      placeholder: "Tell a story...",
-      ref: "editor",
-      spellCheck: true,
-      readOnly: readOnly
-    })))));
-  }
-
-}
-
-class StyleButton extends _react.default.Component {
-  onToggle = e => {
+const StyleButton = props => {
+  const onToggle = e => {
     e.preventDefault();
-    this.props.onToggle(this.props.style);
+    props.onToggle(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 : ''));
-  }
-
-}
+  return /*#__PURE__*/_react.default.createElement(CustomButton, {
+    isDisabled: props.isDisabled,
+    isActive: props.isActive,
+    onMouseDown: onToggle,
+    readOnly: props.readOnly
+  }, props.icon && /*#__PURE__*/_react.default.createElement("i", {
+    className: props.icon
+  }), /*#__PURE__*/_react.default.createElement("span", null, !props.icon ? props.label : ''));
+};
 
 const blockStyles = [{
   label: 'H2',
-  style: 'header-two',
+  style: buttonNames.h2,
   icon: ''
 }, {
   label: 'H3',
-  style: 'header-three',
+  style: buttonNames.h3,
   icon: ''
 }, {
   label: 'H4',
-  style: 'header-four',
+  style: buttonNames.h4,
   icon: ''
 }, {
   label: 'Blockquote',
-  style: 'blockquote',
+  style: buttonNames.blockquote,
   icon: 'fas fa-quote-right'
 }, {
   label: 'UL',
-  style: 'unordered-list-item',
+  style: buttonNames.ul,
   icon: 'fas fa-list-ul'
 }, {
   label: 'OL',
-  style: 'ordered-list-item',
+  style: buttonNames.ol,
   icon: 'fas fa-list-ol'
 }, {
   label: 'Code Block',
-  style: 'code-block',
+  style: buttonNames.codeBlock,
   icon: 'fas fa-code'
 }];
 
-const BlockStyleControls = props => {
-  const {
-    editorState,
+const BlockStyleControls = ({
+  editorState,
+  disabledButtons,
+  hideOnMobileButtons,
+  onToggle,
+  readOnly
+}) => {
+  const checkIsDisabled = (0, _hooks.useButtonDisabledChecker)({
+    mobileBoundary: MOBILE_BOUNDARY,
     disabledButtons,
-    onToggle,
-    readOnly
-  } = props;
+    hideOnMobileButtons
+  });
   const selection = editorState.getSelection();
   const blockType = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, blockStyles.map(type => /*#__PURE__*/_react.default.createElement(StyleButton, {
-    isDisabled: disabledButtons.includes(type.style),
+    isDisabled: checkIsDisabled(type.style),
     key: type.label,
-    active: type.style === blockType,
+    isActive: type.style === blockType,
     label: type.label,
     onToggle: onToggle,
     style: type.style,
@@ -980,17 +990,28 @@ const inlineStyles = [{
   icon: 'fas fa-terminal'
 }];
 
-const InlineStyleControls = props => {
-  const currentStyle = props.editorState.getCurrentInlineStyle();
+const InlineStyleControls = ({
+  editorState,
+  disabledButtons,
+  hideOnMobileButtons,
+  onToggle,
+  readOnly
+}) => {
+  const checkIsDisabled = (0, _hooks.useButtonDisabledChecker)({
+    mobileBoundary: MOBILE_BOUNDARY,
+    disabledButtons,
+    hideOnMobileButtons
+  });
+  const currentStyle = editorState.getCurrentInlineStyle();
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, inlineStyles.map(type => /*#__PURE__*/_react.default.createElement(StyleButton, {
-    isDisabled: props.disabledButtons.includes(type.style.toLowerCase()),
+    isDisabled: checkIsDisabled(type.style.toLowerCase()),
     key: type.label,
-    active: currentStyle.has(type.style),
+    isActive: currentStyle.has(type.style),
     label: type.label,
-    onToggle: props.onToggle,
+    onToggle: onToggle,
     style: type.style,
     icon: type.icon,
-    readOnly: props.readOnly
+    readOnly: readOnly
   })));
 };
 

package/lib/website/readr/draft-editor.js

@@ -77,6 +77,8 @@ const buttonNames = {
   // inline styles
   bold: 'bold',
   italic: 'italic',
+  sup: 'sup',
+  sub: 'sub',
   underline: 'underline',
   code: 'code',
   // block styles
@@ -439,6 +441,12 @@ class RichTextEditor extends _react.default.Component {
         fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
         fontSize: 16,
         padding: 2
+      },
+      SUP: {
+        verticalAlign: 'super'
+      },
+      SUB: {
+        verticalAlign: 'sub'
       }
     };
   }
@@ -920,6 +928,14 @@ const inlineStyles = [{
   label: 'Italic',
   style: 'ITALIC',
   icon: 'fas fa-italic'
+}, {
+  label: 'Superscript',
+  style: 'SUP',
+  icon: 'fas fa-superscript'
+}, {
+  label: 'Subscript',
+  style: 'SUB',
+  icon: 'fas fa-subscript'
 }, {
   label: 'Underline',
   style: 'UNDERLINE',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirrormedia/lilith-draft-editor",
-  "version": "3.0.7",
+  "version": "3.0.8-beta.1",
   "description": "",
   "main": "lib/index.js",
   "scripts": {