@mirrormedia/lilith-draft-editor/lib/website/readr/draft-editor.js

## Installation

"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("../../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 _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");

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: ${({
  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 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;
  ${({
  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`
  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 'handled';
    }

    return 'not-handled';
  };
  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 null;
    }

    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 !== 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;
  }

  blockRendererFn = block => {
    const atomicBlockObj = (0, _blockRendererFn.atomicBlockRenderer)(block);

    if (atomicBlockObj) {
      const onEditStart = () => {
        this.setState({
          // If custom block renderer requires mouse interaction,
          // [Draft.js document](https://draftjs.org/docs/advanced-topics-block-components#recommendations-and-other-notes)
          // suggests that we should temporarily set Editor
          // to readOnly={true} during the interaction.
          // In readOnly={true} condition, the user does not
          // trigger any selection changes within the editor
          // while interacting with custom block.
          // If we don't set readOnly={true},
          // it will cause some subtle bugs in InfoBox button.
          readOnly: true
        });
      };

      const onEditFinish = ({
        entityKey,
        entityData
      }) => {
        if (entityKey && entityData) {
          const oldContentState = this.props.editorState.getCurrentContent();
          const newContentState = oldContentState.replaceEntityData(entityKey, entityData);
          this.onChange(_draftJs.EditorState.set(this.props.editorState, {
            currentContent: newContentState
          }));
        } // Custom block interaction is finished.
        // Therefore, we set readOnly={false} to
        // make editor editable.


        this.setState({
          readOnly: false
        });
      }; // `onEditStart` and `onEditFinish` will be passed
      // into custom block component.
      // We can get them via `props.blockProps.onEditStart`
      // and `props.blockProps.onEditFinish` in the custom block components.


      const extendedAtomicBlockObj = Object.assign({}, atomicBlockObj, {
        props: {
          onEditStart,
          onEditFinish,
          getMainEditorReadOnly: () => this.state.readOnly,
          renderBasicEditor: propsOfBasicEditor => {
            return /*#__PURE__*/_react.default.createElement(RichTextEditor, _extends({}, propsOfBasicEditor, {
              disabledButtons: disabledButtonsOnBasicEditor
            }));
          }
        }
      });
      return extendedAtomicBlockObj;
    } else {
      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: 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, null, /*#__PURE__*/_react.default.createElement(CustomLinkButton, {
      isDisabled: disabledButtons.includes(buttonNames.link),
      isActive: entityType === 'LINK',
      readOnly: readOnly,
      editorState: editorState,
      onChange: this.onChange
    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomFontColorButton, {
      isDisabled: disabledButtons.includes(buttonNames.fontColor),
      isActive: Object.prototype.hasOwnProperty.call(customStyle, 'color'),
      readOnly: readOnly,
      editorState: editorState,
      onChange: this.onChange
    })), /*#__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',
      readOnly: readOnly,
      editorState: editorState,
      onChange: this.onChange,
      renderBasicEditor: renderBasicEditor,
      decorators: _entityDecorator.default
    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomImageButton, {
      isDisabled: disabledButtons.includes(buttonNames.image),
      readOnly: readOnly,
      editorState: editorState,
      onChange: this.onChange,
      ImageSelector: _imageSelector.ImageSelector
    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomVideoButton, {
      isDisabled: disabledButtons.includes(buttonNames.video),
      readOnly: readOnly,
      editorState: editorState,
      onChange: this.onChange,
      VideoSelector: _videoSelector.VideoSelector
    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomAudioButton, {
      isDisabled: disabledButtons.includes(buttonNames.audio),
      readOnly: readOnly,
      editorState: editorState,
      onChange: this.onChange,
      AudioSelector: _audioSelector.AudioSelector
    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomSlideshowButton, {
      isDisabled: disabledButtons.includes(buttonNames.slideshow),
      readOnly: readOnly,
      editorState: editorState,
      onChange: this.onChange,
      ImageSelector: _imageSelector.ImageSelector
    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomInfoBoxButton, {
      isDisabled: disabledButtons.includes(buttonNames.infoBox),
      readOnly: readOnly,
      editorState: editorState,
      onChange: this.onChange,
      renderBasicEditor: renderBasicEditor // decorators={decorators}

    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomEmbeddedCodeButton, {
      isDisabled: disabledButtons.includes(buttonNames.embed),
      readOnly: readOnly,
      editorState: editorState,
      onChange: this.onChange
    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomTableButton, {
      isDisabled: disabledButtons.includes(buttonNames.table),
      readOnly: readOnly,
      editorState: editorState,
      onChange: this.onChange
    }))), /*#__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',
      readOnly: readOnly,
      editorState: editorState,
      onChange: this.onChange
    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomAlignCenterButton, {
      isDisabled: disabledButtons.includes(buttonNames.textAlign),
      isActive: (0, _textAlign.getSelectionBlockData)(editorState, 'textAlign') === 'center',
      readOnly: readOnly,
      editorState: editorState,
      onChange: this.onChange
    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomColorBoxButton, {
      isDisabled: disabledButtons.includes(buttonNames.colorBox),
      readOnly: readOnly,
      editorState: editorState,
      onChange: this.onChange,
      renderBasicEditor: renderBasicEditor // decorators={decorators}

    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomBackgroundColorButton, {
      isDisabled: disabledButtons.includes(buttonNames.backgroundColor),
      isActive: Object.prototype.hasOwnProperty.call(customStyle, 'backgroundColor'),
      readOnly: readOnly,
      editorState: editorState,
      onChange: this.onChange
    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomBGImageButton, {
      isDisabled: disabledButtons.includes(buttonNames.backgroundImage),
      readOnly: readOnly,
      editorState: editorState,
      onChange: this.onChange,
      ImageSelector: _imageSelector.ImageSelector,
      renderBasicEditor: renderBasicEditor,
      decorators: _entityDecorator.default
    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomBGVideoButton, {
      isDisabled: disabledButtons.includes(buttonNames.backgroundVideo),
      readOnly: readOnly,
      editorState: editorState,
      onChange: this.onChange,
      VideoSelector: _videoSelector.VideoSelector,
      renderBasicEditor: renderBasicEditor,
      decorators: _entityDecorator.default
    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomRelatedPostButton, {
      isDisabled: disabledButtons.includes(buttonNames.relatedPost),
      readOnly: readOnly,
      editorState: editorState,
      onChange: this.onChange,
      PostSelector: _postSelector.PostSelector
    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomSideIndexButton, {
      isDisabled: disabledButtons.includes(buttonNames.sideIndex),
      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 => {
    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,
    onToggle,
    readOnly
  } = 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: onToggle,
    style: type.style,
    icon: type.icon,
    readOnly: 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;