@mirrormedia/lilith-draft-editor 2.3.0 → 3.0.1

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

@@ -0,0 +1,972 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.buttonNames = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _theme = _interopRequireWildcard(require("./theme"));
+
+var _draftJs = require("draft-js");
+
+var _blockRendererFn = require("./block-renderer-fn");
+
+var _entityDecorator = _interopRequireDefault(require("./entity-decorator"));
+
+var _annotation = require("../../draft-js/buttons/annotation");
+
+var _embeddedCode = require("../../draft-js/buttons/embedded-code");
+
+var _enlarge = require("../../draft-js/buttons/enlarge");
+
+var _image = require("../../draft-js/buttons/image");
+
+var _infoBox = require("../../draft-js/buttons/info-box");
+
+var _link = require("../../draft-js/buttons/link");
+
+var _slideshow = require("../../draft-js/buttons/slideshow");
+
+var _table = require("../../draft-js/buttons/table");
+
+var _divider = require("../../draft-js/buttons/divider");
+
+var _colorBox = require("../../draft-js/buttons/color-box");
+
+var _backgroundImage = require("../../draft-js/buttons/background-image");
+
+var _backgroundVideo = require("../../draft-js/buttons/background-video");
+
+var _relatedPost = require("../../draft-js/buttons/related-post");
+
+var _sideIndex = require("../../draft-js/buttons/side-index");
+
+var _textAlign = require("../../draft-js/buttons/text-align");
+
+var _fontColor = require("../../draft-js/buttons/font-color");
+
+var _backgroundColor = require("../../draft-js/buttons/background-color");
+
+var _video = require("../../draft-js/buttons/video");
+
+var _audio = require("../../draft-js/buttons/audio");
+
+var _youtube = require("../../draft-js/buttons/youtube");
+
+var _const = require("../../draft-js/const");
+
+var _imageSelector = require("./selector/image-selector");
+
+var _videoSelector = require("./selector/video-selector");
+
+var _postSelector = require("./selector/post-selector");
+
+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); }
+
+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 _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 MOBILE_BOUNDARY = _theme.mediaSize.md;
+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',
+  youtube: 'youtube'
+};
+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, buttonNames.youtube];
+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: ${({
+  readOnly
+}) => {
+  if (readOnly) {
+    return 'not-allowed';
+  }
+
+  return 'pointer';
+}};
+  color: ${({
+  readOnly,
+  isActive
+}) => {
+  if (readOnly) {
+    return '#c1c7d0';
+  }
+
+  if (isActive) {
+    return '#3b82f6';
+  }
+
+  return '#6b7280';
+}};
+  border: solid 1px
+    ${({
+  readOnly,
+  isActive
+}) => {
+  if (readOnly) {
+    return '#c1c7d0';
+  }
+
+  if (isActive) {
+    return '#3b82f6';
+  }
+
+  return '#6b7280';
+}};
+  box-shadow: ${({
+  readOnly,
+  isActive
+}) => {
+  if (readOnly) {
+    return 'unset';
+  }
+
+  if (isActive) {
+    return 'rgba(38, 132, 255, 20%)  0px 1px 4px ';
+  }
+
+  return 'unset';
+}};
+  transition: box-shadow 100ms linear;
+
+  display: ${({
+  isDisabled
+}) => {
+  if (isDisabled) {
+    return 'none';
+  }
+
+  return 'inline-flex';
+}};
+`;
+const longFormButtonStyle = (0, _styledComponents.css)`
+  ${buttonStyle}
+  color: ${({
+  readOnly,
+  isActive
+}) => {
+  if (readOnly) {
+    return '#c1c7d0';
+  }
+
+  if (isActive) {
+    return '#ED8B00';
+  }
+
+  return '#6b7280';
+}};
+  border: solid 1px
+    ${({
+  readOnly,
+  isActive
+}) => {
+  if (readOnly) {
+    return '#c1c7d0';
+  }
+
+  if (isActive) {
+    return '#ED8B00';
+  }
+
+  return '#FECC85';
+}};
+  box-shadow: ${({
+  readOnly,
+  isActive
+}) => {
+  if (readOnly) {
+    return 'unset';
+  }
+
+  if (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 = ``) {
+  const component = referenceComponent;
+  return isLongForm ? (0, _styledComponents.default)(component)`
+          ${longFormButtonStyle}
+          ${additionalCSS}
+        ` : (0, _styledComponents.default)(component)`
+          ${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 CustomYoutubeButton = createButtonWithoutProps(_youtube.YoutubeButton);
+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;
+  font-size: 18px;
+  line-height: 2;
+  letter-spacing: 0.5px;
+
+  .public-DraftStyleDefault-block {
+    ${_sharedStyle.defaultMarginBottom}
+  }
+
+  /* Draft built-in buttons' style */
+  .public-DraftStyleDefault-header-two {
+    font-size: 36px;
+    line-height: 1.5;
+  }
+  .public-DraftStyleDefault-header-three {
+    font-size: 30px;
+    line-height: 1.5;
+  }
+  .public-DraftStyleDefault-header-four {
+  }
+  .public-DraftStyleDefault-blockquote {
+  }
+  .public-DraftStyleDefault-ul {
+    ${_sharedStyle.defaultMarginBottom}
+  }
+  .public-DraftStyleDefault-unorderedListItem {
+  }
+  .public-DraftStyleDefault-ol {
+    ${_sharedStyle.defaultMarginBottom}
+  }
+  .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;
+  column-gap: 10px;
+`;
+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;
+  ${({
+  isEnlarged
+}) => 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} {
+    ${({
+  isEnlarged
+}) => isEnlarged ? (0, _styledComponents.css)`
+            width: 100%;
+            height: 100%;
+            padding: 0 1rem 0;
+            overflow: scroll;
+          ` : ''}
+  }
+  ${DraftEditorControls} {
+    ${({
+  isEnlarged
+}) => isEnlarged ? (0, _styledComponents.css)`
+            position: sticky;
+            top: 0;
+            z-index: 12;
+          ` : ''}
+  }
+  ${DraftEditorControlsWrapper} {
+    ${({
+  isEnlarged
+}) => isEnlarged ? (0, _styledComponents.css)`
+            overflow: auto;
+            padding-bottom: 0;
+          ` : ''}
+  }
+  ${TextEditorWrapper} {
+    ${({
+  isEnlarged
+}) => isEnlarged ? (0, _styledComponents.css)`
+            max-width: 100%;
+            min-height: 100vh;
+            padding-bottom: 0;
+          ` : ''}
+  }
+`;
+const ButtonGroup = _styledComponents.default.div``;
+const EnlargeButtonWrapper = _styledComponents.default.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 0;
+`;
+
+const RichTextEditor = ({
+  editorState,
+  onChange,
+  disabledButtons = [],
+  hideOnMobileButtons = []
+}) => {
+  const checkIsDisabled = (0, _hooks.useButtonDisabledChecker)({
+    mobileBoundary: MOBILE_BOUNDARY,
+    disabledButtons,
+    hideOnMobileButtons
+  });
+  const [isEnlarged, setIsEnlarged] = (0, _react.useState)(false);
+  const [readOnly, setReadOnly] = (0, _react.useState)(false);
+  const editorRef = (0, _react.useRef)(null); // Custom overrides for "code" style.
+
+  const customStyleMap = {
+    CODE: {
+      backgroundColor: 'rgba(0, 0, 0, 0.05)',
+      fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
+      fontSize: 16,
+      padding: 2
+    }
+  };
+
+  const handleKeyCommand = (command, editorState) => {
+    const newState = _draftJs.RichUtils.handleKeyCommand(editorState, command);
+
+    if (newState) {
+      onChange(newState);
+      return 'handled';
+    }
+
+    return 'not-handled';
+  };
+
+  const handleReturn = event => {
+    if (_draftJs.KeyBindingUtil.isSoftNewlineEvent(event)) {
+      onChange(_draftJs.RichUtils.insertSoftNewline(editorState));
+      return 'handled';
+    }
+
+    return 'not-handled';
+  };
+
+  const mapKeyToEditorCommand = e => {
+    if (e.keyCode === 9
+    /* TAB */
+    ) {
+      const newEditorState = _draftJs.RichUtils.onTab(e, editorState, 4
+      /* maxDepth */
+      );
+
+      if (newEditorState !== editorState) {
+        onChange(newEditorState);
+      }
+
+      return null;
+    }
+
+    return (0, _draftJs.getDefaultKeyBinding)(e);
+  };
+
+  const toggleBlockType = blockType => {
+    onChange(_draftJs.RichUtils.toggleBlockType(editorState, blockType));
+  };
+
+  const toggleInlineStyle = inlineStyle => {
+    onChange(_draftJs.RichUtils.toggleInlineStyle(editorState, inlineStyle));
+  };
+
+  const 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;
+  };
+
+  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];
+      }
+
+      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;
+    }, {});
+  };
+
+  const customStyleFn = style => {
+    return getCustomStyle(style);
+  };
+
+  const toggleEnlarge = () => {
+    setIsEnlarged(!isEnlarged);
+  };
+
+  const blockStyleFn = block => {
+    var _entity$getData;
+
+    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 !== null && entity !== void 0 && (_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;
+  };
+
+  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 = () => {
+        // 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 = ({
+        entityKey,
+        entityData
+      }) => {
+        if (entityKey && entityData) {
+          const oldContentState = editorState.getCurrentContent();
+          const newContentState = oldContentState.replaceEntityData(entityKey, entityData);
+          onChange(_draftJs.EditorState.set(editorState, {
+            currentContent: newContentState
+          }));
+        } // Custom block interaction is finished.
+        // Therefore, we set readOnly={false} to
+        // make editor editable.
+
+
+        setReadOnly(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.
+
+
+      const extendedAtomicBlockObj = Object.assign({}, atomicBlockObj, {
+        props: {
+          onEditStart,
+          onEditFinish,
+          getMainEditorReadOnly: () => readOnly,
+          renderBasicEditor: renderBasicEditor
+        }
+      });
+      return extendedAtomicBlockObj;
+    } else {
+      return atomicBlockObj;
+    }
+  };
+
+  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(CustomLinkButton, {
+    isDisabled: checkIsDisabled(buttonNames.link),
+    isActive: entityType === 'LINK',
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange
+  }), /*#__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(CustomDividerButton, {
+    isDisabled: checkIsDisabled(buttonNames.divider),
+    editorState: editorState,
+    onChange: onChange
+  }), /*#__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(CustomImageButton, {
+    isDisabled: checkIsDisabled(buttonNames.image),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange,
+    ImageSelector: _imageSelector.ImageSelector
+  }), /*#__PURE__*/_react.default.createElement(CustomVideoButton, {
+    isDisabled: checkIsDisabled(buttonNames.video),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange,
+    VideoSelector: _videoSelector.VideoSelector
+  }), /*#__PURE__*/_react.default.createElement(CustomYoutubeButton, {
+    isDisabled: checkIsDisabled(buttonNames.youtube),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange
+  }), /*#__PURE__*/_react.default.createElement(CustomAudioButton, {
+    isDisabled: checkIsDisabled(buttonNames.audio),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange,
+    AudioSelector: _audioSelector.AudioSelector
+  }), /*#__PURE__*/_react.default.createElement(CustomSlideshowButton, {
+    isDisabled: checkIsDisabled(buttonNames.slideshow),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange,
+    ImageSelector: _imageSelector.ImageSelector
+  }), /*#__PURE__*/_react.default.createElement(CustomInfoBoxButton, {
+    isDisabled: checkIsDisabled(buttonNames.infoBox),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange,
+    renderBasicEditor: renderBasicEditor // decorators={decorators}
+
+  }), /*#__PURE__*/_react.default.createElement(CustomEmbeddedCodeButton, {
+    isDisabled: checkIsDisabled(buttonNames.embed),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange
+  }), /*#__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(CustomAlignLeftButton, {
+    isDisabled: checkIsDisabled(buttonNames.textAlign),
+    isActive: (0, _textAlign.getSelectionBlockData)(editorState, 'textAlign') === 'left',
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange
+  }), /*#__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(CustomColorBoxButton, {
+    isDisabled: checkIsDisabled(buttonNames.colorBox),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange,
+    renderBasicEditor: renderBasicEditor // decorators={decorators}
+
+  }), /*#__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(CustomBGImageButton, {
+    isDisabled: checkIsDisabled(buttonNames.backgroundImage),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange,
+    ImageSelector: _imageSelector.ImageSelector,
+    renderBasicEditor: renderBasicEditor,
+    decorators: _entityDecorator.default
+  }), /*#__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(CustomRelatedPostButton, {
+    isDisabled: checkIsDisabled(buttonNames.relatedPost),
+    readOnly: readOnly,
+    editorState: editorState,
+    onChange: onChange,
+    PostSelector: _postSelector.PostSelector
+  }), /*#__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 StyleButton = props => {
+  const onToggle = e => {
+    e.preventDefault();
+    props.onToggle(props.style);
+  };
+
+  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: buttonNames.h2,
+  icon: ''
+}, {
+  label: 'H3',
+  style: buttonNames.h3,
+  icon: ''
+}, {
+  label: 'H4',
+  style: buttonNames.h4,
+  icon: ''
+}, {
+  label: 'Blockquote',
+  style: buttonNames.blockquote,
+  icon: 'fas fa-quote-right'
+}, {
+  label: 'UL',
+  style: buttonNames.ul,
+  icon: 'fas fa-list-ul'
+}, {
+  label: 'OL',
+  style: buttonNames.ol,
+  icon: 'fas fa-list-ol'
+}, {
+  label: 'Code Block',
+  style: buttonNames.codeBlock,
+  icon: 'fas fa-code'
+}];
+
+const BlockStyleControls = ({
+  editorState,
+  disabledButtons,
+  hideOnMobileButtons,
+  onToggle,
+  readOnly
+}) => {
+  const checkIsDisabled = (0, _hooks.useButtonDisabledChecker)({
+    mobileBoundary: MOBILE_BOUNDARY,
+    disabledButtons,
+    hideOnMobileButtons
+  });
+  const selection = editorState.getSelection();
+  const blockType = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
+  return /*#__PURE__*/_react.default.createElement(ButtonGroup, null, blockStyles.map(type => /*#__PURE__*/_react.default.createElement(StyleButton, {
+    isDisabled: checkIsDisabled(type.style),
+    key: type.label,
+    isActive: type.style === blockType,
+    label: type.label,
+    onToggle: onToggle,
+    style: type.style,
+    icon: type.icon,
+    readOnly: readOnly
+  })));
+};
+
+const inlineStyles = [{
+  label: 'Bold',
+  style: buttonNames.bold,
+  icon: 'fas fa-bold'
+}, {
+  label: 'Italic',
+  style: buttonNames.italic,
+  icon: 'fas fa-italic'
+}, {
+  label: 'Underline',
+  style: buttonNames.underline,
+  icon: 'fas fa-underline'
+}, {
+  label: 'Monospace',
+  style: buttonNames.code,
+  icon: 'fas fa-terminal'
+}];
+
+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(ButtonGroup, null, inlineStyles.map(type => /*#__PURE__*/_react.default.createElement(StyleButton, {
+    isDisabled: checkIsDisabled(type.style.toLowerCase()),
+    key: type.label,
+    isActive: currentStyle.has(type.style),
+    label: type.label,
+    onToggle: onToggle,
+    style: type.style,
+    icon: type.icon,
+    readOnly: readOnly
+  })));
+};
+
+const DraftEditor = {
+  RichTextEditor,
+  decorators: _entityDecorator.default
+};
+var _default = DraftEditor;
+exports.default = _default;