@mirrormedia/lilith-draft-editor 1.0.0-beta4 → 1.0.1

package/lib/website/{mirrormedia/custom → readr}/block-renderer/background-image-block.js

@@ -9,11 +9,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _draftConverter = _interopRequireDefault(require("../../../../draft-js/editor/draft-converter"));
+var _draftConverter = _interopRequireDefault(require("../../../draft-js/draft-converter"));
 
-var _backgroundImage = require("../../../../draft-js/buttons/background-image");
+var _backgroundImage = require("../../../draft-js/buttons/background-image");
 
-var _lilithDraftRenderer = require("@mirrormedia/lilith-draft-renderer");
+var _readr = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/readr"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -23,7 +23,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const {
   BGImageBlock
-} = _lilithDraftRenderer.MirrorMedia.blockRenderer;
+} = _readr.default.blockRenderers;
 const BGImageRenderButton = _styledComponents.default.span`
   cursor: pointer;
   background-color: white;
@@ -40,7 +40,8 @@ function BGImageEditorBlock(props) {
   } = props;
   const {
     onEditStart,
-    onEditFinish
+    onEditFinish,
+    renderBasicEditor
   } = blockProps;
   const entityKey = block.getEntityAt(0);
   const entity = contentState.getEntity(entityKey);
@@ -69,6 +70,7 @@ function BGImageEditorBlock(props) {
   };
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_backgroundImage.BGImageInput, {
+    renderBasicEditor: renderBasicEditor,
     textBlockAlign: textBlockAlign,
     image: image,
     rawContentStateForBGImageEditor: rawContentState,

package/lib/website/{mirrormedia/custom → readr}/block-renderer/background-video-block.js

@@ -9,11 +9,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _draftConverter = _interopRequireDefault(require("../../../../draft-js/editor/draft-converter"));
+var _draftConverter = _interopRequireDefault(require("../../../draft-js/draft-converter"));
 
-var _backgroundVideo = require("../../../../draft-js/buttons/background-video");
+var _backgroundVideo = require("../../../draft-js/buttons/background-video");
 
-var _lilithDraftRenderer = require("@mirrormedia/lilith-draft-renderer");
+var _readr = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/readr"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -23,7 +23,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const {
   BGVideoBlock
-} = _lilithDraftRenderer.MirrorMedia.blockRenderer;
+} = _readr.default.blockRenderers;
 const BGVideoRenderButton = _styledComponents.default.span`
   cursor: pointer;
   background-color: white;
@@ -40,7 +40,8 @@ function BGVideoEditorBlock(props) {
   } = props;
   const {
     onEditStart,
-    onEditFinish
+    onEditFinish,
+    renderBasicEditor
   } = blockProps;
   const entityKey = block.getEntityAt(0);
   const entity = contentState.getEntity(entityKey);
@@ -69,6 +70,7 @@ function BGVideoEditorBlock(props) {
   };
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_backgroundVideo.BGVideoInput, {
+    renderBasicEditor: renderBasicEditor,
     textBlockAlign: textBlockAlign,
     video: video,
     rawContentStateForBGVideoEditor: rawContentState,

package/lib/website/{mirrormedia/custom → readr}/block-renderer/color-box-block.js

@@ -9,11 +9,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _draftConverter = _interopRequireDefault(require("../../../../draft-js/editor/draft-converter"));
+var _draftConverter = _interopRequireDefault(require("../../../draft-js/draft-converter"));
 
-var _colorBox = require("../../../../draft-js/buttons/color-box");
+var _colorBox = require("../../../draft-js/buttons/color-box");
 
-var _lilithDraftRenderer = require("@mirrormedia/lilith-draft-renderer");
+var _readr = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/readr"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -23,7 +23,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const {
   ColorBoxBlock
-} = _lilithDraftRenderer.MirrorMedia.blockRenderer;
+} = _readr.default.blockRenderers;
 const ColorBoxRenderButton = _styledComponents.default.div`
   cursor: pointer;
 `;
@@ -37,7 +37,8 @@ function ColorBoxEditorBlock(props) {
   } = props;
   const {
     onEditStart,
-    onEditFinish
+    onEditFinish,
+    renderBasicEditor
   } = blockProps;
   const entityKey = block.getEntityAt(0);
   const entity = contentState.getEntity(entityKey);
@@ -63,6 +64,7 @@ function ColorBoxEditorBlock(props) {
   };
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_colorBox.ColorBoxInput, {
+    renderBasicEditor: renderBasicEditor,
     color: color,
     rawContentStateForColorBoxEditor: rawContentState,
     onChange: onChange,

package/lib/website/readr/{custom/block-renderer → block-renderer}/info-box-block.js

@@ -9,11 +9,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _draftConverter = _interopRequireDefault(require("../../../../draft-js/editor/draft-converter"));
+var _draftConverter = _interopRequireDefault(require("../../../draft-js/draft-converter"));
 
-var _infoBox = require("../../../../draft-js/buttons/info-box");
+var _infoBox = require("../../../draft-js/buttons/info-box");
 
-var _lilithDraftRenderer = require("@mirrormedia/lilith-draft-renderer");
+var _readr = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/readr"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -23,7 +23,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const {
   InfoBoxBlock
-} = _lilithDraftRenderer.MirrorMedia.blockRenderer;
+} = _readr.default.blockRenderers;
 const InfoBoxRenderButton = _styledComponents.default.div`
   cursor: pointer;
 `;
@@ -37,7 +37,8 @@ function InfoBoxEditorBlock(props) {
   } = props;
   const {
     onEditStart,
-    onEditFinish
+    onEditFinish,
+    renderBasicEditor
   } = blockProps;
   const entityKey = block.getEntityAt(0);
   const entity = contentState.getEntity(entityKey);
@@ -63,6 +64,7 @@ function InfoBoxEditorBlock(props) {
   };
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_infoBox.InfoBoxInput, {
+    renderBasicEditor: renderBasicEditor,
     title: title,
     rawContentStateForInfoBoxEditor: rawContentState,
     onChange: onChange,

package/lib/website/readr/{custom/block-renderer → block-renderer}/side-index-block.js

@@ -9,9 +9,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _sideIndex = require("../../../../draft-js/buttons/side-index");
+var _sideIndex = require("../../../draft-js/buttons/side-index");
 
-var _lilithDraftRenderer = require("@mirrormedia/lilith-draft-renderer");
+var _readr = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/readr"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -21,7 +21,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const {
   SideIndexBlock
-} = _lilithDraftRenderer.MirrorMedia.blockRenderer;
+} = _readr.default.blockRenderers;
 const SideIndexBlockButton = _styledComponents.default.div`
   cursor: pointer;
   margin-left: 20px;

package/lib/website/readr/{draft-editor/block-renderer-fn.js → block-renderer-fn.js}

@@ -5,19 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.atomicBlockRenderer = atomicBlockRenderer;
 
-var _infoBoxBlock = require("../custom/block-renderer/info-box-block");
+var _infoBoxBlock = require("./block-renderer/info-box-block");
 
-var _tableBlock = require("../custom/block-renderer/table-block");
+var _tableBlock = require("./block-renderer/table-block");
 
-var _colorBoxBlock = require("../custom/block-renderer/color-box-block");
+var _colorBoxBlock = require("./block-renderer/color-box-block");
 
-var _backgroundImageBlock = require("../custom/block-renderer/background-image-block");
+var _backgroundImageBlock = require("./block-renderer/background-image-block");
 
-var _backgroundVideoBlock = require("../custom/block-renderer/background-video-block");
+var _backgroundVideoBlock = require("./block-renderer/background-video-block");
 
-var _sideIndexBlock = require("../custom/block-renderer/side-index-block");
+var _sideIndexBlock = require("./block-renderer/side-index-block");
 
-var _lilithDraftRenderer = require("@mirrormedia/lilith-draft-renderer");
+var _readr = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/readr"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const {
   EmbeddedCodeBlock,
@@ -27,7 +29,7 @@ const {
   SlideshowBlockV2,
   DividerBlock,
   RelatedPostBlock
-} = _lilithDraftRenderer.Readr.blockRenderer;
+} = _readr.default.blockRenderers;
 
 const AtomicBlock = props => {
   const entity = props.contentState.getEntity(props.block.getEntityAt(0));

package/lib/website/readr/{draft-editor/index.js → draft-editor.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.buttonNames = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -15,45 +15,47 @@ var _blockRendererFn = require("./block-renderer-fn");
 
 var _entityDecorator = _interopRequireDefault(require("./entity-decorator"));
 
-var _annotation = require("../../../draft-js/buttons/annotation");
+var _annotation = require("../../draft-js/buttons/annotation");
 
-var _embeddedCode = require("../../../draft-js/buttons/embedded-code");
+var _embeddedCode = require("../../draft-js/buttons/embedded-code");
 
-var _enlarge = require("../../../draft-js/buttons/enlarge");
+var _enlarge = require("../../draft-js/buttons/enlarge");
 
-var _image = require("../../../draft-js/buttons/image");
+var _image = require("../../draft-js/buttons/image");
 
-var _infoBox = require("../../../draft-js/buttons/info-box");
+var _infoBox = require("../../draft-js/buttons/info-box");
 
-var _link = require("../../../draft-js/buttons/link");
+var _link = require("../../draft-js/buttons/link");
 
-var _slideshow = require("../../../draft-js/buttons/slideshow");
+var _slideshow = require("../../draft-js/buttons/slideshow");
 
-var _table = require("../../../draft-js/buttons/table");
+var _table = require("../../draft-js/buttons/table");
 
-var _divider = require("../../../draft-js/buttons/divider");
+var _divider = require("../../draft-js/buttons/divider");
 
-var _colorBox = require("../../../draft-js/buttons/color-box");
+var _colorBox = require("../../draft-js/buttons/color-box");
 
-var _backgroundImage = require("../../../draft-js/buttons/background-image");
+var _backgroundImage = require("../../draft-js/buttons/background-image");
 
-var _backgroundVideo = require("../../../draft-js/buttons/background-video");
+var _backgroundVideo = require("../../draft-js/buttons/background-video");
 
-var _relatedPost = require("../../../draft-js/buttons/related-post");
+var _relatedPost = require("../../draft-js/buttons/related-post");
 
-var _sideIndex = require("../../../draft-js/buttons/side-index");
+var _sideIndex = require("../../draft-js/buttons/side-index");
 
-var _textAlign = require("../../../draft-js/buttons/text-align");
+var _textAlign = require("../../draft-js/buttons/text-align");
 
-var _fontColor = require("../../../draft-js/buttons/font-color");
+var _fontColor = require("../../draft-js/buttons/font-color");
 
-var _backgroundColor = require("../../../draft-js/buttons/background-color");
+var _backgroundColor = require("../../draft-js/buttons/background-color");
 
-var _imageSelector = require("../custom/selector/image-selector");
+var _const = require("../../draft-js/const");
 
-var _videoSelector = require("../custom/selector/video-selector");
+var _imageSelector = require("./selector/image-selector");
 
-var _postSelector = require("../custom/selector/post-selector");
+var _videoSelector = require("./selector/video-selector");
+
+var _postSelector = require("./selector/post-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); }
 
@@ -61,6 +63,42 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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'
+};
+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];
 const buttonStyle = (0, _styledComponents.css)`
   border-radius: 6px;
   text-align: center;
@@ -69,7 +107,6 @@ const buttonStyle = (0, _styledComponents.css)`
   margin: 0px 0px 10px 0px;
   background-color: #fff;
   border: solid 1px rgb(193, 199, 208);
-  display: inline-flex;
   align-items: center;
   height: 40px;
 
@@ -115,6 +152,14 @@ const buttonStyle = (0, _styledComponents.css)`
   return 'unset';
 }};
   transition: box-shadow 100ms linear;
+
+  display: ${props => {
+  if (props.isDisabled) {
+    return 'none';
+  }
+
+  return 'inline-flex';
+}};
 `;
 const longFormButtonStyle = (0, _styledComponents.css)`
   ${buttonStyle}
@@ -430,12 +475,12 @@ class RichTextEditor extends _react.default.Component {
   };
   getCustomStyle = style => {
     return style.reduce((styles, styleName) => {
-      if (styleName !== null && styleName !== void 0 && styleName.startsWith(_fontColor.CUSTOM_STYLE_PREFIX_FONT_COLOR)) {
-        styles['color'] = styleName.split(_fontColor.CUSTOM_STYLE_PREFIX_FONT_COLOR)[1];
+      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(_backgroundColor.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR)) {
-        styles['backgroundColor'] = styleName.split(_backgroundColor.CUSTOM_STYLE_PREFIX_BACKGROUND_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;
@@ -540,7 +585,12 @@ class RichTextEditor extends _react.default.Component {
       atomicBlockObj['props'] = {
         onEditStart,
         onEditFinish,
-        getMainEditorReadOnly: () => this.state.readOnly
+        getMainEditorReadOnly: () => this.state.readOnly,
+        renderBasicEditor: propsOfBasicEditor => {
+          return /*#__PURE__*/_react.default.createElement(RichTextEditor, _extends({}, propsOfBasicEditor, {
+            disabledButtons: disabledButtonsOnBasicEditor
+          }));
+        }
       };
     }
 
@@ -548,6 +598,9 @@ class RichTextEditor extends _react.default.Component {
   };
 
   render() {
+    const {
+      disabledButtons = []
+    } = this.props;
     let {
       editorState
     } = this.props;
@@ -562,6 +615,13 @@ class RichTextEditor extends _react.default.Component {
     } = 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(DraftEditorContainer, {
       isEnlarged: isEnlarged
     }, /*#__PURE__*/_react.default.createElement(DraftEditorWrapper, null, /*#__PURE__*/_react.default.createElement("link", {
@@ -581,10 +641,12 @@ class RichTextEditor extends _react.default.Component {
       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
@@ -592,80 +654,107 @@ class RichTextEditor extends _react.default.Component {
       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
+      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(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
+      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
+      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
+      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
+      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
@@ -703,6 +792,7 @@ class StyleButton extends _react.default.Component {
 
   render() {
     return /*#__PURE__*/_react.default.createElement(CustomButton, {
+      isDisabled: this.props.isDisabled,
       isActive: this.props.active,
       onMouseDown: this.onToggle,
       readOnly: this.props.readOnly
@@ -745,11 +835,13 @@ const blockStyles = [{
 
 const BlockStyleControls = props => {
   const {
-    editorState
+    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,
@@ -781,6 +873,7 @@ const inlineStyles = [{
 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,

package/lib/website/readr/{draft-editor/entity-decorator.js → entity-decorator.js}

@@ -7,12 +7,14 @@ exports.default = void 0;
 
 var _draftJs = require("draft-js");
 
-var _lilithDraftRenderer = require("@mirrormedia/lilith-draft-renderer");
+var _readr = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/readr"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const {
   annotationDecorator,
   linkDecorator
-} = _lilithDraftRenderer.MirrorMedia.entityDecorator;
+} = _readr.default.entityDecorators;
 const decorators = new _draftJs.CompositeDecorator([annotationDecorator, linkDecorator]);
 var _default = decorators;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirrormedia/lilith-draft-editor",
-  "version": "1.0.0-beta4",
+  "version": "1.0.1",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -12,7 +12,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/readr-media/react.git",
+    "url": "https://github.com/mirror-media/Lilith.git",
     "directory": "packages/draft-editor"
   },
   "keywords": [
@@ -23,11 +23,11 @@
   "license": "MIT",
   "dependencies": {
     "draft-js": "^0.11.7",
-    "@mirrormedia/lilith-draft-renderer": "1.0.0-beta4"
+    "@mirrormedia/lilith-draft-renderer": "1.0.0"
   },
   "peerDependencies": {
     "react": "18.1.0",
-    "react-dom": "^18.1.0",
+    "react-dom": "18.1.0",
     "styled-components": "5.3.5",
     "@keystone-6/core": "1.1.1",
     "@keystone-ui/button": "^6.0.0",