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

package/README.md

@@ -0,0 +1,51 @@
+# [@mirrormedia/lilith-core](https://www.npmjs.com/package/@mirrormedia/lilith-draft-editor) · ![npm version](https://img.shields.io/npm/v/@mirrormedia/lilith-draft-editor.svg?style=flat)
+
+### Installation
+
+`yarn install`
+
+### Development
+
+`@mirrormedia/lilith-draft-editor` export `@mirrormedia/lilith-core` 所需要的 `RichTextEditor`，而 `@mirrormedia/lilith-core` 則是被 `@mirrormedia/lilith-(mirrormedia|readr|mesh|editools)` 所使用，因此在開發上會以各網站的角度去切入，在本套件中修改 editor 相關的程式碼，並在 lilith-(mirrormedia|readr|mesh|editools) 中測試開發狀況。
+
+舉 lilith-mirrormedia 為例，要修改 mirrormedia 相關的 RichTextEditor 需要在 `packages/lilith-draft-editor` 中進行改動，改動完之後跑 `yarn build` 產生 transpiled 後的程式碼，若 `packages/lilith-draft-editor` 有修改 package.json 中的套件版本時，則需要同時修改 `packages/core` 中 import `@mirrormedia/lilith-draft-editor` 的版本; 同理，若是因此 `packages/core` 有修改版本號的話也需要跑 `yarn build`， `packages/mirrormedia` 也同樣需要修改 import `@mirrormedia/lilith-core` 的版本。
+
+因為 lilith-mirrormedia, lilith-core, lilith-draft-editor 都在 monorepo 中，yarn workspaces 會為 lilith-core, lilith-draft-editor pkg 建立 soft link，將 `node_modules/@mirrormedia/lilith-core` 指到 `packages/core` 而 `node_modules/@mirrormedia/lilith-draft-editor` 指到 `packages/draft-editor`，所以 `yarn build` 產生的新的程式碼，可以不需要透過 npm publish 和 yarn install 的方式，立即讓 lilith-mirrormedia, lilith-core 使用。
+
+等到確定程式碼修改完畢後，我們再將最新的程式碼上傳(`npm publish`)到 npm registry 去，讓 lilith-editools 的 CI/CD 可以下載到最新的版本。
+
+### File Structure
+
+在 `src` 資料夾下有兩大類的檔案
+
+1. 共用的 draft.js 程式碼： 主要是 draft.js button UI, draft-converter 和其他 helper function
+2. 各網站客製化的改動：
+
+依照各網站需求修改`src/website/${website}/`中的檔案
+
+- block-renderer : 在既有(注 1)的 block-renderer 上附加可編輯的 wrapper，僅有部分 block renderers 適用
+- selector: 依照各網站 keystone list 來調整 photo, video 和 post 的 gql query
+- draft-editor: 主要 export 出 RichTextEditor 的檔案，實際使用在 lilith-core 對應的 webiste 中，可直接決定 RichTextEditor 樣式(注 2)
+
+\*注 1: lilith-draft-editor 各個 buttons 對應的 block-renderers, entity-decorators 會 maintain 在 lilith-draft-renderer，由各網站 Next.js 專案開發人員實作，在本專案中會直接將 lilith-draft-renderer 中定義好的 block-renderers, entity-decorators 直接使用(除了少數需要再編輯的 block-renderer，參考 `src/website/${website}/block-renderer`中的 editor wrapper component)。
+
+\*注 2: 雖然各個網站都 maintain 了一個 draft-editor，可以自行決定 import 進來的 buttons，不過因為 lilith-core 中實作 disalbedButtons 的功能，所以目前一率將所有的 buttons 加入 RichTextEditor 中，由 lilith-(mirrormedia|readr|mesh|editools) 來控制所使用的 buttons。
+
+### Build
+
+`yarn build`
+
+### Publish
+
+`npm run publish`
+
+在 publish 前，請根據 conventional commits 的規範，將 package.json#version 升版。
+
+### Notable Details
+
+#### For those files under `views/` folder, we transpile them specifically.
+
+For those files under `views/` folder, we transpile them by babel according to different configuation.
+The specific babel configuration is `.views.babelrc.js`.
+In `.views.babelrc.js`, we tell babel not to transpile `import` and `export` es6 codes into commonJS codes.
+The Keystone server won't start server well if those files under `views/` are transpiled into commonJS codes.

package/lib/draft-js/buttons/annotation.js

@@ -7,15 +7,11 @@ exports.AnnotationButton = AnnotationButton;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _basicEditor = require("../editor/basic-editor");
-
 var _draftJs = require("draft-js");
 
 var _modals = require("@keystone-ui/modals");
 
-var _entityDecorator = _interopRequireDefault(require("../editor/entity-decorator"));
-
-var _draftConverter = _interopRequireDefault(require("../editor/draft-converter"));
+var _draftConverter = _interopRequireDefault(require("../draft-converter"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -32,11 +28,13 @@ function AnnotationButton(props) {
   const {
     isActive,
     editorState,
-    onChange
+    onChange,
+    renderBasicEditor,
+    decorators
   } = props;
   const [toShowInput, setToShowInput] = (0, _react.useState)(false);
   const [inputValue, setInputValue] = (0, _react.useState)({
-    editorStateOfBasicEditor: _draftJs.EditorState.createEmpty(_entityDecorator.default)
+    editorStateOfBasicEditor: _draftJs.EditorState.createEmpty(decorators)
   });
 
   const promptForAnnotation = e => {
@@ -68,7 +66,7 @@ function AnnotationButton(props) {
     onChange(toggleEntity(newEditorState, newEditorState.getSelection(), entityKey));
     setToShowInput(false);
     setInputValue({
-      editorStateOfBasicEditor: _draftJs.EditorState.createEmpty(_entityDecorator.default)
+      editorStateOfBasicEditor: _draftJs.EditorState.createEmpty(decorators)
     });
   };
 
@@ -81,10 +79,19 @@ function AnnotationButton(props) {
 
     setToShowInput(false);
     setInputValue({
-      editorStateOfBasicEditor: _draftJs.EditorState.createEmpty(_entityDecorator.default)
+      editorStateOfBasicEditor: _draftJs.EditorState.createEmpty(decorators)
     });
   };
 
+  const basicEditorJsx = renderBasicEditor({
+    editorState: inputValue.editorStateOfBasicEditor,
+    onChange: editorStateOfBasicEditor => {
+      setInputValue({
+        editorStateOfBasicEditor
+      });
+    }
+  });
+
   const urlInput = /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
     isOpen: toShowInput
   }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
@@ -99,14 +106,7 @@ function AnnotationButton(props) {
         action: confirmAnnotation
       }
     }
-  }, /*#__PURE__*/_react.default.createElement(_basicEditor.BasicEditor, {
-    editorState: inputValue.editorStateOfBasicEditor,
-    onChange: editorStateOfBasicEditor => {
-      setInputValue({
-        editorStateOfBasicEditor
-      });
-    }
-  })));
+  }, basicEditorJsx));
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, urlInput, /*#__PURE__*/_react.default.createElement("div", {
     className: props.className,

package/lib/draft-js/buttons/background-color.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BackgroundColorButton = BackgroundColorButton;
-exports.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -16,7 +15,9 @@ var _fields = require("@keystone-ui/fields");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _modifier = require("../editor/modifier");
+var _modifier = require("../modifier");
+
+var _const = require("../const");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -29,8 +30,6 @@ const ColorHexInput = (0, _styledComponents.default)(_fields.TextInput)`
   margin-right: 10px;
   padding: 10px;
 `;
-const CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR = 'BACKGROUND_COLOR_';
-exports.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR = CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR;
 
 function BackgroundColorButton(props) {
   const {
@@ -54,10 +53,10 @@ function BackgroundColorButton(props) {
     const selection = editorState.getSelection();
     const contentState = editorState.getCurrentContent();
 
-    let newContentState = _modifier.Modifier.removeInlineStyleByPrefix(contentState, selection, CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR);
+    let newContentState = _modifier.Modifier.removeInlineStyleByPrefix(contentState, selection, _const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR);
 
     if (colorValue) {
-      newContentState = _modifier.Modifier.applyInlineStyle(newContentState, selection, CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR + colorValue);
+      newContentState = _modifier.Modifier.applyInlineStyle(newContentState, selection, _const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR + colorValue);
     }
 
     onChange(_draftJs.EditorState.push(editorState, newContentState, 'change-inline-style'));
@@ -78,7 +77,7 @@ function BackgroundColorButton(props) {
     if (!selection.isCollapsed()) {
       const contentState = editorState.getCurrentContent();
 
-      const newContentState = _modifier.Modifier.removeInlineStyleByPrefix(contentState, selection, CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR);
+      const newContentState = _modifier.Modifier.removeInlineStyleByPrefix(contentState, selection, _const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR);
 
       onChange(_draftJs.EditorState.push(editorState, newContentState, 'change-inline-style'));
     }

package/lib/draft-js/buttons/background-image.js

@@ -8,17 +8,13 @@ exports.BGImageInput = BGImageInput;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _entityDecorator = _interopRequireDefault(require("../editor/entity-decorator"));
-
 var _draftJs = require("draft-js");
 
-var _basicEditor = require("../editor/basic-editor");
-
 var _modals = require("@keystone-ui/modals");
 
 var _button = require("@keystone-ui/button");
 
-var _draftConverter = _interopRequireDefault(require("../editor/draft-converter"));
+var _draftConverter = _interopRequireDefault(require("../draft-converter"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -52,7 +48,9 @@ function BGImageInput(props) {
     textBlockAlign,
     image,
     rawContentStateForBGImageEditor,
-    ImageSelector = _imageSelector.ImageSelector
+    ImageSelector = _imageSelector.ImageSelector,
+    renderBasicEditor,
+    decorators
   } = props;
   const rawContentState = rawContentStateForBGImageEditor || {
     blocks: [],
@@ -79,7 +77,7 @@ function BGImageInput(props) {
     textBlockAlign: textBlockAlign || 'fixed',
     image: image || undefined,
     // create an `editorState` from raw content state object
-    editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(rawContentState), _entityDecorator.default)
+    editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(rawContentState), decorators)
   };
   const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
   const [toShowImageSelector, setToShowImageSelector] = (0, _react.useState)(false);
@@ -89,7 +87,7 @@ function BGImageInput(props) {
       editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)({
         blocks: [],
         entityMap: {}
-      }), _entityDecorator.default)
+      }), decorators)
     }));
   };
 
@@ -109,6 +107,14 @@ function BGImageInput(props) {
     setToShowImageSelector(false);
   };
 
+  const basicEditorJsx = renderBasicEditor({
+    editorState: inputValue.editorStateOfBasicEditor,
+    onChange: editorStateOfBasicEditor => {
+      setInputValue(oldInputValue => ({ ...oldInputValue,
+        editorStateOfBasicEditor
+      }));
+    }
+  });
   (0, _react.useEffect)(() => {
     if (isOpen) {
       setInputValue(initialInputValue);
@@ -153,14 +159,7 @@ function BGImageInput(props) {
         textBlockAlign
       }));
     }
-  }), /*#__PURE__*/_react.default.createElement(Label, null, "\u5167\u6587"), /*#__PURE__*/_react.default.createElement(_basicEditor.BasicEditor, {
-    editorState: inputValue.editorStateOfBasicEditor,
-    onChange: editorStateOfBasicEditor => {
-      setInputValue(oldInputValue => ({ ...oldInputValue,
-        editorStateOfBasicEditor
-      }));
-    }
-  }))));
+  }), /*#__PURE__*/_react.default.createElement(Label, null, "\u5167\u6587"), basicEditorJsx)));
 }
 
 function BGImageButton(props) {
@@ -169,7 +168,8 @@ function BGImageButton(props) {
     className,
     editorState,
     onChange: onEditorStateChange,
-    ImageSelector
+    ImageSelector,
+    renderBasicEditor
   } = props;
 
   const onChange = ({
@@ -198,6 +198,7 @@ function BGImageButton(props) {
   };
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BGImageInput, {
+    renderBasicEditor: renderBasicEditor,
     onChange: onChange,
     onCancel: () => {
       setToShowInput(false);

package/lib/draft-js/buttons/background-video.js

@@ -8,17 +8,13 @@ exports.BGVideoInput = BGVideoInput;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _entityDecorator = _interopRequireDefault(require("../editor/entity-decorator"));
-
 var _draftJs = require("draft-js");
 
-var _basicEditor = require("../editor/basic-editor");
-
 var _modals = require("@keystone-ui/modals");
 
 var _button = require("@keystone-ui/button");
 
-var _draftConverter = _interopRequireDefault(require("../editor/draft-converter"));
+var _draftConverter = _interopRequireDefault(require("../draft-converter"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -52,7 +48,9 @@ function BGVideoInput(props) {
     textBlockAlign,
     video,
     rawContentStateForBGVideoEditor,
-    VideoSelector = _videoSelector.VideoSelector
+    VideoSelector = _videoSelector.VideoSelector,
+    renderBasicEditor,
+    decorators
   } = props;
   const rawContentState = rawContentStateForBGVideoEditor || {
     blocks: [],
@@ -79,7 +77,7 @@ function BGVideoInput(props) {
     textBlockAlign: textBlockAlign || 'fixed',
     video: video || undefined,
     // create an `editorState` from raw content state object
-    editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(rawContentState), _entityDecorator.default)
+    editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(rawContentState), decorators)
   };
   const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
   const [toShowVideoSelector, setToShowVideoSelector] = (0, _react.useState)(false);
@@ -89,7 +87,7 @@ function BGVideoInput(props) {
       editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)({
         blocks: [],
         entityMap: {}
-      }), _entityDecorator.default)
+      }), decorators)
     }));
   };
 
@@ -109,6 +107,14 @@ function BGVideoInput(props) {
     setToShowVideoSelector(false);
   };
 
+  const basicEditorJsx = renderBasicEditor({
+    editorState: inputValue.editorStateOfBasicEditor,
+    onChange: editorStateOfBasicEditor => {
+      setInputValue(oldInputValue => ({ ...oldInputValue,
+        editorStateOfBasicEditor
+      }));
+    }
+  });
   (0, _react.useEffect)(() => {
     if (isOpen) {
       setInputValue(initialInputValue);
@@ -153,14 +159,7 @@ function BGVideoInput(props) {
         textBlockAlign
       }));
     }
-  }), /*#__PURE__*/_react.default.createElement(Label, null, "\u5167\u6587"), /*#__PURE__*/_react.default.createElement(_basicEditor.BasicEditor, {
-    editorState: inputValue.editorStateOfBasicEditor,
-    onChange: editorStateOfBasicEditor => {
-      setInputValue(oldInputValue => ({ ...oldInputValue,
-        editorStateOfBasicEditor
-      }));
-    }
-  }))));
+  }), /*#__PURE__*/_react.default.createElement(Label, null, "\u5167\u6587"), basicEditorJsx)));
 }
 
 function BGVideoButton(props) {
@@ -169,7 +168,8 @@ function BGVideoButton(props) {
     className,
     editorState,
     onChange: onEditorStateChange,
-    VideoSelector
+    VideoSelector,
+    renderBasicEditor
   } = props;
 
   const onChange = ({
@@ -198,6 +198,7 @@ function BGVideoButton(props) {
   };
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BGVideoInput, {
+    renderBasicEditor: renderBasicEditor,
     onChange: onChange,
     onCancel: () => {
       setToShowInput(false);

package/lib/draft-js/buttons/color-box.js

@@ -8,17 +8,13 @@ exports.ColorBoxInput = ColorBoxInput;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _entityDecorator = _interopRequireDefault(require("../editor/entity-decorator"));
-
 var _draftJs = require("draft-js");
 
-var _basicEditor = require("../editor/basic-editor");
-
 var _modals = require("@keystone-ui/modals");
 
 var _fields = require("@keystone-ui/fields");
 
-var _draftConverter = _interopRequireDefault(require("../editor/draft-converter"));
+var _draftConverter = _interopRequireDefault(require("../draft-converter"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -43,7 +39,9 @@ function ColorBoxInput(props) {
     onChange,
     onCancel,
     color,
-    rawContentStateForColorBoxEditor
+    rawContentStateForColorBoxEditor,
+    renderBasicEditor,
+    decorators
   } = props;
   const rawContentState = rawContentStateForColorBoxEditor || {
     blocks: [],
@@ -52,7 +50,7 @@ function ColorBoxInput(props) {
   const initialInputValue = {
     color: color || '',
     // create an `editorState` from raw content state object
-    editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(rawContentState), _entityDecorator.default)
+    editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(rawContentState), decorators)
   };
   const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
 
@@ -62,7 +60,7 @@ function ColorBoxInput(props) {
       editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)({
         blocks: [],
         entityMap: {}
-      }), _entityDecorator.default)
+      }), decorators)
     });
   };
 
@@ -71,6 +69,15 @@ function ColorBoxInput(props) {
       setInputValue(initialInputValue);
     }
   }, [isOpen]);
+  const basicEditorJsx = renderBasicEditor({
+    editorState: inputValue.editorStateOfBasicEditor,
+    onChange: editorStateOfBasicEditor => {
+      setInputValue({
+        color: inputValue.color,
+        editorStateOfBasicEditor
+      });
+    }
+  });
   return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
     isOpen: isOpen
   }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
@@ -103,15 +110,7 @@ function ColorBoxInput(props) {
     type: "text",
     placeholder: "Color",
     value: inputValue.color
-  }), /*#__PURE__*/_react.default.createElement(Label, null, "\u5167\u6587"), /*#__PURE__*/_react.default.createElement(_basicEditor.BasicEditor, {
-    editorState: inputValue.editorStateOfBasicEditor,
-    onChange: editorStateOfBasicEditor => {
-      setInputValue({
-        color: inputValue.color,
-        editorStateOfBasicEditor
-      });
-    }
-  })));
+  }), /*#__PURE__*/_react.default.createElement(Label, null, "\u5167\u6587"), basicEditorJsx));
 }
 
 function ColorBoxButton(props) {
@@ -119,7 +118,8 @@ function ColorBoxButton(props) {
   const {
     className,
     editorState,
-    onChange: onEditorStateChange
+    onChange: onEditorStateChange,
+    renderBasicEditor
   } = props;
 
   const onChange = ({
@@ -146,6 +146,7 @@ function ColorBoxButton(props) {
   };
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ColorBoxInput, {
+    renderBasicEditor: renderBasicEditor,
     onChange: onChange,
     onCancel: () => {
       setToShowInput(false);

package/lib/draft-js/buttons/font-color.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CUSTOM_STYLE_PREFIX_FONT_COLOR = void 0;
 exports.FontColorButton = FontColorButton;
 
 var _react = _interopRequireWildcard(require("react"));
@@ -16,7 +15,9 @@ var _fields = require("@keystone-ui/fields");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _modifier = require("../editor/modifier");
+var _modifier = require("../modifier");
+
+var _const = require("../const");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -29,8 +30,6 @@ const ColorHexInput = (0, _styledComponents.default)(_fields.TextInput)`
   margin-right: 10px;
   padding: 10px;
 `;
-const CUSTOM_STYLE_PREFIX_FONT_COLOR = 'FONT_COLOR_';
-exports.CUSTOM_STYLE_PREFIX_FONT_COLOR = CUSTOM_STYLE_PREFIX_FONT_COLOR;
 
 function FontColorButton(props) {
   const {
@@ -54,10 +53,10 @@ function FontColorButton(props) {
     const selection = editorState.getSelection();
     const contentState = editorState.getCurrentContent();
 
-    let newContentState = _modifier.Modifier.removeInlineStyleByPrefix(contentState, selection, CUSTOM_STYLE_PREFIX_FONT_COLOR);
+    let newContentState = _modifier.Modifier.removeInlineStyleByPrefix(contentState, selection, _const.CUSTOM_STYLE_PREFIX_FONT_COLOR);
 
     if (colorValue) {
-      newContentState = _modifier.Modifier.applyInlineStyle(newContentState, selection, CUSTOM_STYLE_PREFIX_FONT_COLOR + colorValue);
+      newContentState = _modifier.Modifier.applyInlineStyle(newContentState, selection, _const.CUSTOM_STYLE_PREFIX_FONT_COLOR + colorValue);
     }
 
     onChange(_draftJs.EditorState.push(editorState, newContentState, 'change-inline-style'));
@@ -78,7 +77,7 @@ function FontColorButton(props) {
     if (!selection.isCollapsed()) {
       const contentState = editorState.getCurrentContent();
 
-      const newContentState = _modifier.Modifier.removeInlineStyleByPrefix(contentState, selection, CUSTOM_STYLE_PREFIX_FONT_COLOR);
+      const newContentState = _modifier.Modifier.removeInlineStyleByPrefix(contentState, selection, _const.CUSTOM_STYLE_PREFIX_FONT_COLOR);
 
       onChange(_draftJs.EditorState.push(editorState, newContentState, 'change-inline-style'));
     }

package/lib/draft-js/buttons/info-box.js

@@ -8,17 +8,13 @@ exports.InfoBoxInput = InfoBoxInput;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _entityDecorator = _interopRequireDefault(require("../editor/entity-decorator"));
-
 var _draftJs = require("draft-js");
 
-var _basicEditor = require("../editor/basic-editor");
-
 var _modals = require("@keystone-ui/modals");
 
 var _fields = require("@keystone-ui/fields");
 
-var _draftConverter = _interopRequireDefault(require("../editor/draft-converter"));
+var _draftConverter = _interopRequireDefault(require("../draft-converter"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -39,7 +35,9 @@ function InfoBoxInput(props) {
     onChange,
     onCancel,
     title,
-    rawContentStateForInfoBoxEditor
+    rawContentStateForInfoBoxEditor,
+    renderBasicEditor,
+    decorators
   } = props;
   const rawContentState = rawContentStateForInfoBoxEditor || {
     blocks: [],
@@ -48,7 +46,7 @@ function InfoBoxInput(props) {
   const initialInputValue = {
     title: title || '',
     // create an `editorState` from raw content state object
-    editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(rawContentState), _entityDecorator.default)
+    editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(rawContentState), decorators)
   };
   const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
 
@@ -56,6 +54,15 @@ function InfoBoxInput(props) {
     setInputValue(initialInputValue);
   };
 
+  const basicEditorJsx = renderBasicEditor({
+    editorState: inputValue.editorStateOfBasicEditor,
+    onChange: editorStateOfBasicEditor => {
+      setInputValue({
+        title: inputValue.title,
+        editorStateOfBasicEditor
+      });
+    }
+  });
   return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
     isOpen: isOpen
   }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
@@ -88,15 +95,7 @@ function InfoBoxInput(props) {
     type: "text",
     placeholder: "Title",
     value: inputValue.title
-  }), /*#__PURE__*/_react.default.createElement(_basicEditor.BasicEditor, {
-    editorState: inputValue.editorStateOfBasicEditor,
-    onChange: editorStateOfBasicEditor => {
-      setInputValue({
-        title: inputValue.title,
-        editorStateOfBasicEditor
-      });
-    }
-  })));
+  }), basicEditorJsx));
 }
 
 function InfoBoxButton(props) {
@@ -104,7 +103,8 @@ function InfoBoxButton(props) {
   const {
     className,
     editorState,
-    onChange: onEditorStateChange
+    onChange: onEditorStateChange,
+    renderBasicEditor
   } = props;
 
   const onChange = ({
@@ -131,6 +131,7 @@ function InfoBoxButton(props) {
   };
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(InfoBoxInput, {
+    renderBasicEditor: renderBasicEditor,
     onChange: onChange,
     onCancel: () => {
       setToShowInput(false);

package/lib/draft-js/buttons/text-align.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _draftJs = require("draft-js");
 
-var _modifier = require("../editor/modifier");
+var _modifier = require("../modifier");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/lib/draft-js/const.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _const = require("@mirrormedia/lilith-draft-renderer/lib/draft-js/const");
+
+Object.keys(_const).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _const[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _const[key];
+    }
+  });
+});

package/lib/draft-js/{editor/draft-converter → draft-converter}/inline-styles-processor.js

@@ -7,26 +7,24 @@ exports.convertToHtml = convertToHtml;
 
 var _lodash = _interopRequireDefault(require("lodash"));
 
-var _fontColor = require("../../buttons/font-color");
-
-var _backgroundColor = require("../../buttons/background-color");
+var _const = require("../const");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // Modified from https://github.com/dburrows/draft-js-basic-html-editor/blob/master/src/utils/processInlineStylesAndEntities.js
 function tagForCustomInlineStyle(style) {
-  const customInlineStylePrefixs = [_fontColor.CUSTOM_STYLE_PREFIX_FONT_COLOR, _backgroundColor.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR];
+  const customInlineStylePrefixs = [_const.CUSTOM_STYLE_PREFIX_FONT_COLOR, _const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR];
   const stylePrefix = customInlineStylePrefixs.find(prefix => style.startsWith(prefix));
   let tag, value;
 
   switch (stylePrefix) {
-    case _fontColor.CUSTOM_STYLE_PREFIX_FONT_COLOR:
-      value = style.split(_fontColor.CUSTOM_STYLE_PREFIX_FONT_COLOR)[1];
+    case _const.CUSTOM_STYLE_PREFIX_FONT_COLOR:
+      value = style.split(_const.CUSTOM_STYLE_PREFIX_FONT_COLOR)[1];
       tag = [`<span style="color: ${value}">`, '</span>'];
       break;
 
-    case _backgroundColor.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR:
-      value = style.split(_backgroundColor.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR)[1];
+    case _const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR:
+      value = style.split(_const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR)[1];
       tag = [`<span style="background-color: ${value}">`, '</span>'];
       break;