@kids-reporter/draft-editor 0.1.0 → 0.2.0

package/lib/draft-editor.js

@@ -3,19 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.buttonNames = void 0;
+exports.buttonNames = exports.RichTextEditor = void 0;
+Object.defineProperty(exports, "decorators", {
+  enumerable: true,
+  get: function () {
+    return _draftRenderer.decorators;
+  }
+});
+exports.default = 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 _draftRenderer = require("@kids-reporter/draft-renderer");
 
 var _annotation = require("./buttons/annotation");
 
@@ -31,40 +34,8 @@ 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; }
@@ -89,44 +60,27 @@ const buttonNames = {
   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'
+  slideshow: 'slideshow'
 };
 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 disabledButtonsOnBasicEditor = [buttonNames.h2, buttonNames.h3, buttonNames.code, buttonNames.codeBlock, buttonNames.blockquote, buttonNames.annotation, buttonNames.embed, buttonNames.image, buttonNames.infoBox, buttonNames.slideshow];
 const buttonStyle = (0, _styledComponents.css)`
+  cursor: pointer;
   border-radius: 6px;
   text-align: center;
   font-size: 1rem;
   padding: 0 12px;
-  margin: 0px 0px 10px 0px;
+  margin: ${props => props.isDisabled ? '0' : '0 0 10px 0'};
   background-color: #fff;
   border: solid 1px rgb(193, 199, 208);
   align-items: center;
   height: 40px;
 
-  cursor: ${props => {
-  if (props.readOnly) {
-    return 'not-allowed';
-  }
-
-  return 'pointer';
-}};
+  cursor: ${props => props.readOnly ? 'not-allowed' : 'pointer'};
   color: ${props => {
   if (props.readOnly) {
     return '#c1c7d0';
@@ -171,85 +125,31 @@ const buttonStyle = (0, _styledComponents.css)`
   return 'inline-flex';
 }};
 `;
-const longFormButtonStyle = (0, _styledComponents.css)`
+const CustomButton = _styledComponents.default.div`
+  ${buttonStyle}
+`;
+const CustomAnnotationButton = (0, _styledComponents.default)(_annotation.AnnotationButton)`
   ${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)`
+const CustomLinkButton = (0, _styledComponents.default)(_link.LinkButton)`
   ${buttonStyle}
 `;
-const CustomBackgroundColorButton = (0, _styledComponents.default)(_backgroundColor.BackgroundColorButton)`
-  ${longFormButtonStyle}
+const CustomEnlargeButton = (0, _styledComponents.default)(_enlarge.EnlargeButton)`
+  ${buttonStyle}
+  color: #999;
 `;
-const CustomButton = _styledComponents.default.div`
+const CustomImageButton = (0, _styledComponents.default)(_image.ImageButton)`
   ${buttonStyle}
 `;
-const CustomAnnotationButton = (0, _styledComponents.default)(_annotation.AnnotationButton)`
+const CustomSlideshowButton = (0, _styledComponents.default)(_slideshow.SlideshowButton)`
   ${buttonStyle}
 `;
-const CustomLinkButton = (0, _styledComponents.default)(_link.LinkButton)`
+const CustomEmbeddedCodeButton = (0, _styledComponents.default)(_embeddedCode.EmbeddedCodeButton)`
+  ${buttonStyle}
+`;
+const CustomInfoBoxButton = (0, _styledComponents.default)(_infoBox.InfoBoxButton)`
   ${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;
@@ -267,33 +167,6 @@ const DraftEditorWrapper = _styledComponents.default.div`
   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;
@@ -314,32 +187,9 @@ const TextEditorWrapper = _styledComponents.default.div`
   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`
+  overflow-x: hidden;
   position: relative;
   margin-top: 4px;
   ${props => props.isEnlarged ? (0, _styledComponents.css)`
@@ -382,9 +232,6 @@ const DraftEditorContainer = _styledComponents.default.div`
           ` : ''}
   }
 `;
-const ButtonGroup = _styledComponents.default.div`
-  margin: 0 10px 0 0;
-`;
 const EnlargeButtonWrapper = _styledComponents.default.div`
   position: absolute;
   top: 0;
@@ -393,20 +240,13 @@ const EnlargeButtonWrapper = _styledComponents.default.div`
 `;
 
 class RichTextEditor extends _react.default.Component {
+  editorRef = null;
+
   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
-      }
     };
   }
 
@@ -418,10 +258,10 @@ class RichTextEditor extends _react.default.Component {
 
     if (newState) {
       this.onChange(newState);
-      return true;
+      return 'handled';
     }
 
-    return false;
+    return 'not-handled';
   };
   handleReturn = event => {
     if (_draftJs.KeyBindingUtil.isSoftNewlineEvent(event)) {
@@ -447,7 +287,7 @@ class RichTextEditor extends _react.default.Component {
         this.onChange(newEditorState);
       }
 
-      return;
+      return null;
     }
 
     return (0, _draftJs.getDefaultKeyBinding)(e);
@@ -485,74 +325,13 @@ class RichTextEditor extends _react.default.Component {
 
     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);
+    const atomicBlockObj = (0, _draftRenderer.atomicBlockRenderer)(block);
 
     if (atomicBlockObj) {
       const onEditStart = () => {
@@ -618,7 +397,7 @@ class RichTextEditor extends _react.default.Component {
     } = this.props;
 
     if (!(editorState instanceof _draftJs.EditorState)) {
-      editorState = _draftJs.EditorState.createEmpty(_entityDecorator.default);
+      editorState = _draftJs.EditorState.createEmpty(_draftRenderer.decorators);
     }
 
     const {
@@ -626,7 +405,6 @@ class RichTextEditor extends _react.default.Component {
       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, {
@@ -634,9 +412,7 @@ class RichTextEditor extends _react.default.Component {
       }));
     };
 
-    return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-      theme: _theme.default
-    }, /*#__PURE__*/_react.default.createElement(DraftEditorContainer, {
+    return /*#__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",
@@ -654,162 +430,85 @@ class RichTextEditor extends _react.default.Component {
       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, {
+    }), /*#__PURE__*/_react.default.createElement(DraftEditorControls, null, /*#__PURE__*/_react.default.createElement(DraftEditorControlsWrapper, 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, {
+    }), /*#__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, {
+    }), /*#__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, {
+    })), /*#__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, {
+    }), /*#__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, {
+      decorators: _draftRenderer.decorators
+    }), /*#__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, {
+    }), /*#__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, {
+    }), /*#__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, {
+      decorators: _draftRenderer.decorators
+    }), /*#__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, {
+    }))), /*#__PURE__*/_react.default.createElement(TextEditorWrapper, {
       onClick: () => {
-        var _this$refs$editor;
+        if (this.editorRef) {
+          var _this$editorRef;
 
-        // eslint-disable-next-line prettier/prettier
-        (_this$refs$editor = this.refs.editor) === null || _this$refs$editor === void 0 ? void 0 : _this$refs$editor.focus();
+          // eslint-disable-next-line prettier/prettier
+          (_this$editorRef = this.editorRef) === null || _this$editorRef === void 0 ? void 0 : _this$editorRef.focus();
+        }
       }
     }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
-      blockStyleFn: this.blockStyleFn.bind(this),
+      blockRenderMap: _draftRenderer.blockRenderMap,
       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",
+      ref: this.editorRef,
       spellCheck: true,
       readOnly: readOnly
-    })))));
+    }))));
   }
 
 }
 
+exports.RichTextEditor = RichTextEditor;
+
 class StyleButton extends _react.default.Component {
   onToggle = e => {
     e.preventDefault();
@@ -910,9 +609,8 @@ const InlineStyleControls = props => {
   })));
 };
 
-const DraftEditor = {
+var _default = {
   RichTextEditor,
-  decorators: _entityDecorator.default
+  decorators: _draftRenderer.decorators
 };
-var _default = DraftEditor;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-editor",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -23,17 +23,22 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "draft-js": "^0.11.7",
-    "@kids-reporter/draft-renderer": "0.1.0"
+    "@kids-reporter/draft-renderer": "0.2.0",
+    "draft-js": "^0.11.7"
   },
   "peerDependencies": {
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "styled-components": "5.3.5",
     "@keystone-6/core": "5.2.0",
     "@keystone-ui/button": "^7.0.2",
     "@keystone-ui/fields": "^7.2.0",
-    "@keystone-ui/modals": "^6.0.3"
+    "@keystone-ui/modals": "^6.0.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "styled-components": "5.3.5"
+  },
+  "devDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "styled-components": "5.3.5"
   },
   "files": [
     "lib"