@kids-reporter/draft-editor 0.1.0

package/lib/draft-editor.js

@@ -0,0 +1,918 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.buttonNames = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _theme = _interopRequireDefault(require("./theme"));
+
+var _draftJs = require("draft-js");
+
+var _blockRendererFn = require("./block-renderer-fn");
+
+var _entityDecorator = _interopRequireDefault(require("./entity-decorator"));
+
+var _annotation = require("./buttons/annotation");
+
+var _embeddedCode = require("./buttons/embedded-code");
+
+var _enlarge = require("./buttons/enlarge");
+
+var _image = require("./buttons/image");
+
+var _infoBox = require("./buttons/info-box");
+
+var _link = require("./buttons/link");
+
+var _slideshow = require("./buttons/slideshow");
+
+var _table = require("./buttons/table");
+
+var _divider = require("./buttons/divider");
+
+var _colorBox = require("./buttons/color-box");
+
+var _backgroundImage = require("./buttons/background-image");
+
+var _backgroundVideo = require("./buttons/background-video");
+
+var _relatedPost = require("./buttons/related-post");
+
+var _sideIndex = require("./buttons/side-index");
+
+var _textAlign = require("./buttons/text-align");
+
+var _fontColor = require("./buttons/font-color");
+
+var _backgroundColor = require("./buttons/background-color");
+
+var _video = require("./buttons/video");
+
+var _audio = require("./buttons/audio");
+
+var _const = require("./const");
+
+var _imageSelector = require("./buttons/selector/image-selector");
+
+var _videoSelector = require("./buttons/selector/video-selector");
+
+var _postSelector = require("./buttons/selector/post-selector");
+
+var _audioSelector = require("./buttons/selector/audio-selector");
+
+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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 buttonNames = {
+  // inline styles
+  bold: 'bold',
+  italic: 'italic',
+  underline: 'underline',
+  code: 'code',
+  // block styles
+  h2: 'header-two',
+  h3: 'header-three',
+  h4: 'header-four',
+  blockquote: 'blockquote',
+  ul: 'unordered-list-item',
+  ol: 'ordered-list-item',
+  codeBlock: 'code-block',
+  // custom styles
+  annotation: 'annotation',
+  divider: 'divider',
+  embed: 'embed',
+  fontColor: 'font-color',
+  image: 'image',
+  infoBox: 'info-box',
+  link: 'link',
+  slideshow: 'slideshow',
+  table: 'table',
+  textAlign: 'text-align',
+  colorBox: 'color-box',
+  backgroundColor: 'background-color',
+  backgroundImage: 'background-image',
+  backgroundVideo: 'background-video',
+  relatedPost: 'related-post',
+  sideIndex: 'side-index',
+  video: 'video',
+  audio: 'audio'
+};
+exports.buttonNames = buttonNames;
+const disabledButtonsOnBasicEditor = [buttonNames.annotation, buttonNames.divider, buttonNames.embed, buttonNames.image, buttonNames.infoBox, buttonNames.slideshow, buttonNames.table, buttonNames.textAlign, buttonNames.colorBox, buttonNames.backgroundColor, buttonNames.backgroundImage, buttonNames.backgroundVideo, buttonNames.relatedPost, buttonNames.sideIndex, buttonNames.video, buttonNames.audio];
+const buttonStyle = (0, _styledComponents.css)`
+  border-radius: 6px;
+  text-align: center;
+  font-size: 1rem;
+  padding: 0 12px;
+  margin: 0px 0px 10px 0px;
+  background-color: #fff;
+  border: solid 1px rgb(193, 199, 208);
+  align-items: center;
+  height: 40px;
+
+  cursor: ${props => {
+  if (props.readOnly) {
+    return 'not-allowed';
+  }
+
+  return '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';
+}};
+`;
+const longFormButtonStyle = (0, _styledComponents.css)`
+  ${buttonStyle}
+  color: ${props => {
+  if (props.readOnly) {
+    return '#c1c7d0';
+  }
+
+  if (props.isActive) {
+    return '#ED8B00';
+  }
+
+  return '#6b7280';
+}};
+  border: solid 1px
+    ${props => {
+  if (props.readOnly) {
+    return '#c1c7d0';
+  }
+
+  if (props.isActive) {
+    return '#ED8B00';
+  }
+
+  return '#FECC85';
+}};
+  box-shadow: ${props => {
+  if (props.readOnly) {
+    return 'unset';
+  }
+
+  if (props.isActive) {
+    return 'rgba(237, 139, 0, 0.5) 0px 1px 4px';
+  }
+
+  return 'unset';
+}};
+`;
+const CustomFontColorButton = (0, _styledComponents.default)(_fontColor.FontColorButton)`
+  ${buttonStyle}
+`;
+const CustomBackgroundColorButton = (0, _styledComponents.default)(_backgroundColor.BackgroundColorButton)`
+  ${longFormButtonStyle}
+`;
+const CustomButton = _styledComponents.default.div`
+  ${buttonStyle}
+`;
+const CustomAnnotationButton = (0, _styledComponents.default)(_annotation.AnnotationButton)`
+  ${buttonStyle}
+`;
+const CustomLinkButton = (0, _styledComponents.default)(_link.LinkButton)`
+  ${buttonStyle}
+`;
+
+function createButtonWithoutProps(referenceComponent, isLongForm = false, additionalCSS = ``) {
+  return isLongForm ? (0, _styledComponents.default)(referenceComponent)`
+        ${longFormButtonStyle}
+        ${additionalCSS}
+      ` : (0, _styledComponents.default)(referenceComponent)`
+        ${buttonStyle}
+        ${additionalCSS}
+      `;
+}
+
+const CustomEnlargeButton = createButtonWithoutProps(_enlarge.EnlargeButton, false, `color: #999`);
+const CustomImageButton = createButtonWithoutProps(_image.ImageButton);
+const CustomSlideshowButton = createButtonWithoutProps(_slideshow.SlideshowButton);
+const CustomEmbeddedCodeButton = createButtonWithoutProps(_embeddedCode.EmbeddedCodeButton);
+const CustomTableButton = createButtonWithoutProps(_table.TableButton);
+const CustomInfoBoxButton = createButtonWithoutProps(_infoBox.InfoBoxButton);
+const CustomDividerButton = createButtonWithoutProps(_divider.DividerButton);
+const CustomColorBoxButton = createButtonWithoutProps(_colorBox.ColorBoxButton, true);
+const CustomBGImageButton = createButtonWithoutProps(_backgroundImage.BGImageButton, true);
+const CustomBGVideoButton = createButtonWithoutProps(_backgroundVideo.BGVideoButton, true);
+const CustomRelatedPostButton = createButtonWithoutProps(_relatedPost.RelatedPostButton, true);
+const CustomSideIndexButton = createButtonWithoutProps(_sideIndex.SideIndexButton, true);
+const CustomAlignCenterButton = createButtonWithoutProps(_textAlign.AlignCenterButton, true);
+const CustomAlignLeftButton = createButtonWithoutProps(_textAlign.AlignLeftButton, true);
+const CustomVideoButton = createButtonWithoutProps(_video.VideoButton);
+const CustomAudioButton = createButtonWithoutProps(_audio.AudioButton);
+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;
+
+  /* Draft built-in buttons' style */
+  .public-DraftStyleDefault-header-two {
+  }
+  .public-DraftStyleDefault-header-three {
+  }
+  .public-DraftStyleDefault-header-four {
+  }
+  .public-DraftStyleDefault-blockquote {
+  }
+  .public-DraftStyleDefault-ul {
+  }
+  .public-DraftStyleDefault-unorderedListItem {
+  }
+  .public-DraftStyleDefault-ol {
+  }
+  .public-DraftStyleDefault-orderedListItem {
+  }
+  /* code-block */
+  .public-DraftStyleDefault-pre {
+  }
+  .alignCenter * {
+    text-align: center;
+  }
+  .alignLeft * {
+    text-align: left;
+  }
+`;
+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;
+  /* Custom setting */
+  h2 {
+    font-size: 22px;
+  }
+  h3 {
+    font-size: 17.5px;
+  }
+  font-weight: normal;
+  max-width: 800px;
+
+  // atimoic block float setting
+  display: flow-root;
+  figure {
+    clear: both;
+    margin: 0;
+  }
+  figure.left {
+    float: left;
+    width: 33%;
+  }
+  figure.right {
+    float: right;
+    width: 33%;
+  }
+`;
+const DraftEditorContainer = _styledComponents.default.div`
+  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 ButtonGroup = _styledComponents.default.div`
+  margin: 0 10px 0 0;
+`;
+const EnlargeButtonWrapper = _styledComponents.default.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 0;
+`;
+
+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
+      }
+    };
+  }
+
+  onChange = editorState => {
+    this.props.onChange(editorState);
+  };
+  handleKeyCommand = (command, editorState) => {
+    const newState = _draftJs.RichUtils.handleKeyCommand(editorState, command);
+
+    if (newState) {
+      this.onChange(newState);
+      return true;
+    }
+
+    return false;
+  };
+  handleReturn = event => {
+    if (_draftJs.KeyBindingUtil.isSoftNewlineEvent(event)) {
+      const {
+        onChange,
+        editorState
+      } = this.props;
+      onChange(_draftJs.RichUtils.insertSoftNewline(editorState));
+      return 'handled';
+    }
+
+    return 'not-handled';
+  };
+  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);
+      }
+
+      return;
+    }
+
+    return (0, _draftJs.getDefaultKeyBinding)(e);
+  };
+  toggleBlockType = blockType => {
+    this.onChange(_draftJs.RichUtils.toggleBlockType(this.props.editorState, blockType));
+  };
+  toggleInlineStyle = inlineStyle => {
+    this.onChange(_draftJs.RichUtils.toggleInlineStyle(this.props.editorState, inlineStyle));
+  };
+  getEntityType = editorState => {
+    const contentState = editorState.getCurrentContent();
+    const selection = editorState.getSelection();
+    const startOffset = selection.getStartOffset();
+    const startBlock = editorState.getCurrentContent().getBlockForKey(selection.getStartKey());
+    const endOffset = selection.getEndOffset();
+    let entityInstance;
+    let entityKey;
+
+    if (!selection.isCollapsed()) {
+      entityKey = startBlock.getEntityAt(startOffset);
+    } else {
+      entityKey = startBlock.getEntityAt(endOffset);
+    }
+
+    if (entityKey !== null) {
+      entityInstance = contentState.getEntity(entityKey);
+    }
+
+    let entityType = '';
+
+    if (entityInstance) {
+      entityType = entityInstance.getType();
+    }
+
+    return entityType;
+  };
+  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];
+      }
+
+      if (styleName !== null && styleName !== void 0 && styleName.startsWith(_const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR)) {
+        styles['backgroundColor'] = styleName.split(_const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR)[1];
+      }
+
+      return styles;
+    }, {});
+  };
+  toggleEnlarge = () => {
+    this.setState({
+      isEnlarged: !this.state.isEnlarged
+    });
+  };
+  customStyleFn = style => {
+    return this.getCustomStyle(style);
+  };
+
+  blockStyleFn(block) {
+    var _entity$getData;
+
+    const {
+      editorState
+    } = this.props;
+    const entityKey = block.getEntityAt(0);
+    const entity = entityKey ? editorState.getCurrentContent().getEntity(entityKey) : null;
+    let result = '';
+    const blockData = block.getData();
+
+    if (blockData) {
+      const textAlign = blockData === null || blockData === void 0 ? void 0 : blockData.get('textAlign');
+
+      if (textAlign === 'center') {
+        result += 'alignCenter ';
+      } else if (textAlign === 'left') {
+        result += 'alignLeft ';
+      }
+    }
+
+    switch (block.getType()) {
+      case 'header-two':
+      case 'header-three':
+      case 'header-four':
+      case 'blockquote':
+        result += 'public-DraftStyleDefault-' + block.getType();
+        break;
+
+      case 'atomic':
+        if ((_entity$getData = entity.getData()) !== null && _entity$getData !== void 0 && _entity$getData.alignment) {
+          // support all atomic block to set alignment
+          result += ' ' + entity.getData().alignment;
+        }
+
+        break;
+
+      default:
+        break;
+    }
+
+    return result;
+  }
+
+  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) {
+          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,
+        getMainEditorReadOnly: () => this.state.readOnly,
+        renderBasicEditor: propsOfBasicEditor => {
+          return /*#__PURE__*/_react.default.createElement(RichTextEditor, _extends({}, propsOfBasicEditor, {
+            disabledButtons: disabledButtonsOnBasicEditor
+          }));
+        }
+      };
+    }
+
+    return atomicBlockObj;
+  };
+
+  render() {
+    const {
+      disabledButtons = []
+    } = this.props;
+    let {
+      editorState
+    } = this.props;
+
+    if (!(editorState instanceof _draftJs.EditorState)) {
+      editorState = _draftJs.EditorState.createEmpty(_entityDecorator.default);
+    }
+
+    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: 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/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, {
+      disabledButtons: disabledButtons,
+      editorState: editorState,
+      onToggle: this.toggleBlockType,
+      readOnly: this.state.readOnly
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(InlineStyleControls, {
+      disabledButtons: disabledButtons,
+      editorState: editorState,
+      onToggle: this.toggleInlineStyle,
+      readOnly: this.state.readOnly
+    })), /*#__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, null, /*#__PURE__*/_react.default.createElement(CustomLinkButton, {
+      isDisabled: disabledButtons.includes(buttonNames.link),
+      isActive: entityType === 'LINK',
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomFontColorButton, {
+      isDisabled: disabledButtons.includes(buttonNames.fontColor),
+      isActive: Object.prototype.hasOwnProperty.call(customStyle, 'color'),
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomDividerButton, {
+      isDisabled: disabledButtons.includes(buttonNames.divider),
+      editorState: editorState,
+      onChange: this.onChange
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomAnnotationButton, {
+      isDisabled: disabledButtons.includes(buttonNames.annotation),
+      isActive: entityType === 'ANNOTATION',
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly,
+      renderBasicEditor: renderBasicEditor,
+      decorators: _entityDecorator.default
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomImageButton, {
+      isDisabled: disabledButtons.includes(buttonNames.image),
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly,
+      ImageSelector: _imageSelector.ImageSelector
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomVideoButton, {
+      isDisabled: disabledButtons.includes(buttonNames.video),
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly,
+      VideoSelector: _videoSelector.VideoSelector
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomAudioButton, {
+      isDisabled: disabledButtons.includes(buttonNames.audio),
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly,
+      AudioSelector: _audioSelector.AudioSelector
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomSlideshowButton, {
+      isDisabled: disabledButtons.includes(buttonNames.slideshow),
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly,
+      ImageSelector: _imageSelector.ImageSelector
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomInfoBoxButton, {
+      isDisabled: disabledButtons.includes(buttonNames.infoBox),
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly,
+      renderBasicEditor: renderBasicEditor,
+      decorators: _entityDecorator.default
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomEmbeddedCodeButton, {
+      isDisabled: disabledButtons.includes(buttonNames.embed),
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomTableButton, {
+      isDisabled: disabledButtons.includes(buttonNames.table),
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly
+    }))), /*#__PURE__*/_react.default.createElement(DraftEditorControlsWrapper, null, /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomAlignLeftButton, {
+      isDisabled: disabledButtons.includes(buttonNames.textAlign),
+      isActive: (0, _textAlign.getSelectionBlockData)(editorState, 'textAlign') === 'left',
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomAlignCenterButton, {
+      isDisabled: disabledButtons.includes(buttonNames.textAlign),
+      isActive: (0, _textAlign.getSelectionBlockData)(editorState, 'textAlign') === 'center',
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomColorBoxButton, {
+      isDisabled: disabledButtons.includes(buttonNames.colorBox),
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly,
+      renderBasicEditor: renderBasicEditor,
+      decorators: _entityDecorator.default
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomBackgroundColorButton, {
+      isDisabled: disabledButtons.includes(buttonNames.backgroundColor),
+      isActive: Object.prototype.hasOwnProperty.call(customStyle, 'backgroundColor'),
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomBGImageButton, {
+      isDisabled: disabledButtons.includes(buttonNames.backgroundImage),
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly,
+      ImageSelector: _imageSelector.ImageSelector,
+      renderBasicEditor: renderBasicEditor,
+      decorators: _entityDecorator.default
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomBGVideoButton, {
+      isDisabled: disabledButtons.includes(buttonNames.backgroundVideo),
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly,
+      VideoSelector: _videoSelector.VideoSelector,
+      renderBasicEditor: renderBasicEditor,
+      decorators: _entityDecorator.default
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomRelatedPostButton, {
+      isDisabled: disabledButtons.includes(buttonNames.relatedPost),
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly,
+      PostSelector: _postSelector.PostSelector
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomSideIndexButton, {
+      isDisabled: disabledButtons.includes(buttonNames.sideIndex),
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly
+    })))), /*#__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 => {
+    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: 'Blockquote',
+  style: 'blockquote',
+  icon: 'fas fa-quote-right'
+}, {
+  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 DraftEditor = {
+  RichTextEditor,
+  decorators: _entityDecorator.default
+};
+var _default = DraftEditor;
+exports.default = _default;