@mirrormedia/lilith-draft-editor 1.1.0-alpha.3 → 1.1.0-alpha.5

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

@@ -4,16 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AnnotationButton = AnnotationButton;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _draftJs = require("draft-js");
+
 var _modals = require("@keystone-ui/modals");
+
 var _draftConverter = _interopRequireDefault(require("../draft-converter"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function escapeHTML(s) {
   return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/'/g, '&#39;');
 }
+
 function AnnotationButton(props) {
   const toggleEntity = _draftJs.RichUtils.toggleLink;
   const {
@@ -27,42 +36,53 @@ function AnnotationButton(props) {
   const [inputValue, setInputValue] = (0, _react.useState)({
     editorStateOfBasicEditor: _draftJs.EditorState.createEmpty(decorators)
   });
+
   const promptForAnnotation = e => {
     e.preventDefault();
     const selection = editorState.getSelection();
+
     if (!selection.isCollapsed()) {
       setToShowInput(true);
     }
   };
+
   const confirmAnnotation = () => {
     const contentState = editorState.getCurrentContent();
     const rawContentState = (0, _draftJs.convertToRaw)(inputValue.editorStateOfBasicEditor.getCurrentContent());
+
     const bodyHTML = _draftConverter.default.convertToHtml(rawContentState);
+
     const contentStateWithEntity = contentState.createEntity('ANNOTATION', 'MUTABLE', {
       rawContentState,
       bodyHTML,
       bodyEscapedHTML: escapeHTML(bodyHTML)
     });
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+
     const newEditorState = _draftJs.EditorState.set(editorState, {
       currentContent: contentStateWithEntity
     });
+
     onChange(toggleEntity(newEditorState, newEditorState.getSelection(), entityKey));
     setToShowInput(false);
     setInputValue({
       editorStateOfBasicEditor: _draftJs.EditorState.createEmpty(decorators)
     });
   };
+
   const removeAnnotation = () => {
     const selection = editorState.getSelection();
+
     if (!selection.isCollapsed()) {
       onChange(toggleEntity(editorState, selection, null));
     }
+
     setToShowInput(false);
     setInputValue({
       editorStateOfBasicEditor: _draftJs.EditorState.createEmpty(decorators)
     });
   };
+
   const basicEditorJsx = renderBasicEditor({
     editorState: inputValue.editorStateOfBasicEditor,
     onChange: editorStateOfBasicEditor => {
@@ -71,6 +91,7 @@ function AnnotationButton(props) {
       });
     }
   });
+
   const urlInput = /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
     isOpen: toShowInput
   }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
@@ -86,6 +107,7 @@ function AnnotationButton(props) {
       }
     }
   }, basicEditorJsx));
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, urlInput, /*#__PURE__*/_react.default.createElement("div", {
     className: props.className,
     onMouseDown: isActive ? removeAnnotation : promptForAnnotation

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

@@ -4,11 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AudioButton = AudioButton;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _draftJs = require("draft-js");
+
 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 AudioButton(props) {
   const {
     editorState,
@@ -17,30 +23,37 @@ function AudioButton(props) {
     AudioSelector = _audioSelector.AudioSelector
   } = props;
   const [toShowAudioSelector, setToShowAudioSelector] = (0, _react.useState)(false);
+
   const promptForAudioSelector = () => {
     setToShowAudioSelector(true);
   };
+
   const onAudioSelectorChange = selectedAudiosWithMeta => {
     var _selectedAudiosWithMe;
+
     const audio = selectedAudiosWithMeta === null || selectedAudiosWithMeta === void 0 ? void 0 : (_selectedAudiosWithMe = selectedAudiosWithMeta[0]) === null || _selectedAudiosWithMe === void 0 ? void 0 : _selectedAudiosWithMe.audio;
+
     if (!audio) {
       setToShowAudioSelector(false);
       return;
     }
+
     const contentState = editorState.getCurrentContent();
     const contentStateWithEntity = contentState.createEntity('AUDIO', 'IMMUTABLE', {
       audio
     });
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+
     const newEditorState = _draftJs.EditorState.set(editorState, {
       currentContent: contentStateWithEntity
-    });
-
-    // The third parameter here is a space string, not an empty string
+    }); // The third parameter here is a space string, not an empty string
     // If you set an empty string, you will get an error: Unknown DraftEntity key: null
+
+
     onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
     setToShowAudioSelector(false);
   };
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowAudioSelector && /*#__PURE__*/_react.default.createElement(AudioSelector, {
     onChange: onAudioSelectorChange
   }), /*#__PURE__*/_react.default.createElement("div", {

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

@@ -4,21 +4,33 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BackgroundColorButton = BackgroundColorButton;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _modals = require("@keystone-ui/modals");
+
 var _draftJs = require("draft-js");
+
 var _fields = require("@keystone-ui/fields");
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _modifier = require("../modifier");
+
 var _const = require("../const");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 const ColorHexInput = (0, _styledComponents.default)(_fields.TextInput)`
   font-family: Georgia, serif;
   margin-right: 10px;
   padding: 10px;
 `;
+
 function BackgroundColorButton(props) {
   const {
     isActive,
@@ -27,40 +39,53 @@ function BackgroundColorButton(props) {
   } = props;
   const [toShowColorInput, setToShowColorInput] = (0, _react.useState)(false);
   const [colorValue, setColorValue] = (0, _react.useState)('');
+
   const promptForColor = e => {
     e.preventDefault();
     const selection = editorState.getSelection();
+
     if (!selection.isCollapsed()) {
       setToShowColorInput(true);
     }
   };
+
   const confirmColor = () => {
     const selection = editorState.getSelection();
     const contentState = editorState.getCurrentContent();
+
     let newContentState = _modifier.Modifier.removeInlineStyleByPrefix(contentState, selection, _const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR);
+
     if (colorValue) {
       newContentState = _modifier.Modifier.applyInlineStyle(newContentState, selection, _const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR + colorValue);
     }
+
     onChange(_draftJs.EditorState.push(editorState, newContentState, 'change-inline-style'));
     setToShowColorInput(false);
     setColorValue('');
   };
+
   const onColorInputKeyDown = e => {
     if (e.which === 13) {
       e.preventDefault();
       confirmColor();
     }
   };
+
   const removeColor = () => {
     const selection = editorState.getSelection();
+
     if (!selection.isCollapsed()) {
       const contentState = editorState.getCurrentContent();
+
       const newContentState = _modifier.Modifier.removeInlineStyleByPrefix(contentState, selection, _const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR);
+
       onChange(_draftJs.EditorState.push(editorState, newContentState, 'change-inline-style'));
     }
+
     setToShowColorInput(false);
     setColorValue('');
   };
+
   const colorInput = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
     title: "Hex Color Code (#ffffff)",
     isOpen: toShowColorInput,
@@ -80,6 +105,7 @@ function BackgroundColorButton(props) {
     value: colorValue,
     onKeyDown: onColorInputKeyDown
   }));
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, colorInput, /*#__PURE__*/_react.default.createElement("div", {
     className: props.className,
     onMouseDown: isActive ? removeColor : promptForColor

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

@@ -5,17 +5,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BGImageButton = BGImageButton;
 exports.BGImageInput = BGImageInput;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _draftJs = require("draft-js");
+
 var _modals = require("@keystone-ui/modals");
+
 var _button = require("@keystone-ui/button");
+
 var _draftConverter = _interopRequireDefault(require("../draft-converter"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _imageSelector = require("./selector/image-selector");
+
 var _alignSelector = require("./selector/align-selector");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 const Label = _styledComponents.default.label`
   display: block;
   font-weight: 600;
@@ -25,8 +37,10 @@ const ImageInputText = _styledComponents.default.span`
   display: inline-block;
   margin-right: 10px;
 `;
+
 function BGImageInput(props) {
   var _inputValue$image;
+
   const {
     isOpen,
     onChange,
@@ -67,33 +81,36 @@ function BGImageInput(props) {
   };
   const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
   const [toShowImageSelector, setToShowImageSelector] = (0, _react.useState)(false);
+
   const clearInputValue = () => {
-    setInputValue(oldInputValue => ({
-      ...oldInputValue,
+    setInputValue(oldInputValue => ({ ...oldInputValue,
       editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)({
         blocks: [],
         entityMap: {}
       }), decorators)
     }));
   };
+
   const onImageSelectorChange = selectedImagesWithMeta => {
     var _selectedImagesWithMe;
+
     const image = selectedImagesWithMeta === null || selectedImagesWithMeta === void 0 ? void 0 : (_selectedImagesWithMe = selectedImagesWithMeta[0]) === null || _selectedImagesWithMe === void 0 ? void 0 : _selectedImagesWithMe.image;
+
     if (!image) {
       setToShowImageSelector(false);
       return;
     }
-    setInputValue(oldInputValue => ({
-      ...oldInputValue,
+
+    setInputValue(oldInputValue => ({ ...oldInputValue,
       image: image
     }));
     setToShowImageSelector(false);
   };
+
   const basicEditorJsx = renderBasicEditor({
     editorState: inputValue.editorStateOfBasicEditor,
     onChange: editorStateOfBasicEditor => {
-      setInputValue(oldInputValue => ({
-        ...oldInputValue,
+      setInputValue(oldInputValue => ({ ...oldInputValue,
         editorStateOfBasicEditor
       }));
     }
@@ -138,13 +155,13 @@ function BGImageInput(props) {
     align: inputValue.textBlockAlign,
     options: options,
     onChange: textBlockAlign => {
-      setInputValue(oldInputValue => ({
-        ...oldInputValue,
+      setInputValue(oldInputValue => ({ ...oldInputValue,
         textBlockAlign
       }));
     }
   }), /*#__PURE__*/_react.default.createElement(Label, null, "\u5167\u6587"), basicEditorJsx)));
 }
+
 function BGImageButton(props) {
   const [toShowInput, setToShowInput] = (0, _react.useState)(false);
   const {
@@ -154,14 +171,14 @@ function BGImageButton(props) {
     ImageSelector,
     renderBasicEditor
   } = props;
+
   const onChange = ({
     textBlockAlign,
     image,
     rawContentState
   }) => {
-    const contentState = editorState.getCurrentContent();
+    const contentState = editorState.getCurrentContent(); // create an BGImage entity
 
-    // create an BGImage entity
     const contentStateWithEntity = contentState.createEntity('BACKGROUNDIMAGE', 'IMMUTABLE', {
       textBlockAlign,
       image,
@@ -169,15 +186,17 @@ function BGImageButton(props) {
       body: _draftConverter.default.convertToHtml(rawContentState)
     });
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+
     const newEditorState = _draftJs.EditorState.set(editorState, {
       currentContent: contentStateWithEntity
-    });
-
-    //The third parameter here is a space string, not an empty string
+    }); //The third parameter here is a space string, not an empty string
     //If you set an empty string, you will get an error: Unknown DraftEntity key: null
+
+
     onEditorStateChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
     setToShowInput(false);
   };
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BGImageInput, {
     renderBasicEditor: renderBasicEditor,
     onChange: onChange,

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

@@ -5,17 +5,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BGVideoButton = BGVideoButton;
 exports.BGVideoInput = BGVideoInput;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _draftJs = require("draft-js");
+
 var _modals = require("@keystone-ui/modals");
+
 var _button = require("@keystone-ui/button");
+
 var _draftConverter = _interopRequireDefault(require("../draft-converter"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _videoSelector = require("./selector/video-selector");
+
 var _alignSelector = require("./selector/align-selector");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 const Label = _styledComponents.default.label`
   display: block;
   font-weight: 600;
@@ -25,8 +37,10 @@ const VideoInputText = _styledComponents.default.span`
   display: inline-block;
   margin-right: 10px;
 `;
+
 function BGVideoInput(props) {
   var _inputValue$video;
+
   const {
     isOpen,
     onChange,
@@ -67,33 +81,36 @@ function BGVideoInput(props) {
   };
   const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
   const [toShowVideoSelector, setToShowVideoSelector] = (0, _react.useState)(false);
+
   const clearInputValue = () => {
-    setInputValue(oldInputValue => ({
-      ...oldInputValue,
+    setInputValue(oldInputValue => ({ ...oldInputValue,
       editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)({
         blocks: [],
         entityMap: {}
       }), decorators)
     }));
   };
+
   const onVideoSelectorChange = selectedVideosWithMeta => {
     var _selectedVideosWithMe;
+
     const video = selectedVideosWithMeta === null || selectedVideosWithMeta === void 0 ? void 0 : (_selectedVideosWithMe = selectedVideosWithMeta[0]) === null || _selectedVideosWithMe === void 0 ? void 0 : _selectedVideosWithMe.video;
+
     if (!video) {
       setToShowVideoSelector(false);
       return;
     }
-    setInputValue(oldInputValue => ({
-      ...oldInputValue,
+
+    setInputValue(oldInputValue => ({ ...oldInputValue,
       video: video
     }));
     setToShowVideoSelector(false);
   };
+
   const basicEditorJsx = renderBasicEditor({
     editorState: inputValue.editorStateOfBasicEditor,
     onChange: editorStateOfBasicEditor => {
-      setInputValue(oldInputValue => ({
-        ...oldInputValue,
+      setInputValue(oldInputValue => ({ ...oldInputValue,
         editorStateOfBasicEditor
       }));
     }
@@ -138,13 +155,13 @@ function BGVideoInput(props) {
     align: inputValue.textBlockAlign,
     options: options,
     onChange: textBlockAlign => {
-      setInputValue(oldInputValue => ({
-        ...oldInputValue,
+      setInputValue(oldInputValue => ({ ...oldInputValue,
         textBlockAlign
       }));
     }
   }), /*#__PURE__*/_react.default.createElement(Label, null, "\u5167\u6587"), basicEditorJsx)));
 }
+
 function BGVideoButton(props) {
   const [toShowInput, setToShowInput] = (0, _react.useState)(false);
   const {
@@ -154,14 +171,14 @@ function BGVideoButton(props) {
     VideoSelector,
     renderBasicEditor
   } = props;
+
   const onChange = ({
     textBlockAlign,
     video,
     rawContentState
   }) => {
-    const contentState = editorState.getCurrentContent();
+    const contentState = editorState.getCurrentContent(); // create an BGVideo entity
 
-    // create an BGVideo entity
     const contentStateWithEntity = contentState.createEntity('BACKGROUNDVIDEO', 'IMMUTABLE', {
       textBlockAlign,
       video,
@@ -169,15 +186,17 @@ function BGVideoButton(props) {
       body: _draftConverter.default.convertToHtml(rawContentState)
     });
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+
     const newEditorState = _draftJs.EditorState.set(editorState, {
       currentContent: contentStateWithEntity
-    });
-
-    //The third parameter here is a space string, not an empty string
+    }); //The third parameter here is a space string, not an empty string
     //If you set an empty string, you will get an error: Unknown DraftEntity key: null
+
+
     onEditorStateChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
     setToShowInput(false);
   };
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BGVideoInput, {
     renderBasicEditor: renderBasicEditor,
     onChange: onChange,

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

@@ -5,15 +5,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ColorBoxButton = ColorBoxButton;
 exports.ColorBoxInput = ColorBoxInput;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _draftJs = require("draft-js");
+
 var _modals = require("@keystone-ui/modals");
+
 var _fields = require("@keystone-ui/fields");
+
 var _draftConverter = _interopRequireDefault(require("../draft-converter"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 const Label = _styledComponents.default.label`
   display: block;
   font-weight: 600;
@@ -22,6 +32,7 @@ const Label = _styledComponents.default.label`
 const ColorHexInput = (0, _styledComponents.default)(_fields.TextInput)`
   margin-bottom: 10px;
 `;
+
 function ColorBoxInput(props) {
   const {
     isOpen,
@@ -42,6 +53,7 @@ function ColorBoxInput(props) {
     editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(rawContentState), decorators)
   };
   const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
+
   const clearInputValue = () => {
     setInputValue({
       color: '',
@@ -51,6 +63,7 @@ function ColorBoxInput(props) {
       }), decorators)
     });
   };
+
   (0, _react.useEffect)(() => {
     if (isOpen) {
       setInputValue(initialInputValue);
@@ -99,6 +112,7 @@ function ColorBoxInput(props) {
     value: inputValue.color
   }), /*#__PURE__*/_react.default.createElement(Label, null, "\u5167\u6587"), basicEditorJsx));
 }
+
 function ColorBoxButton(props) {
   const [toShowInput, setToShowInput] = (0, _react.useState)(false);
   const {
@@ -107,28 +121,30 @@ function ColorBoxButton(props) {
     onChange: onEditorStateChange,
     renderBasicEditor
   } = props;
+
   const onChange = ({
     color,
     rawContentState
   }) => {
-    const contentState = editorState.getCurrentContent();
+    const contentState = editorState.getCurrentContent(); // create an ColorBox entity
 
-    // create an ColorBox entity
     const contentStateWithEntity = contentState.createEntity('COLORBOX', 'IMMUTABLE', {
       color,
       rawContentState,
       body: _draftConverter.default.convertToHtml(rawContentState)
     });
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+
     const newEditorState = _draftJs.EditorState.set(editorState, {
       currentContent: contentStateWithEntity
-    });
-
-    //The third parameter here is a space string, not an empty string
+    }); //The third parameter here is a space string, not an empty string
     //If you set an empty string, you will get an error: Unknown DraftEntity key: null
+
+
     onEditorStateChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
     setToShowInput(false);
   };
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ColorBoxInput, {
     renderBasicEditor: renderBasicEditor,
     onChange: onChange,

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

@@ -4,33 +4,42 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DividerButton = DividerButton;
+
 var _react = _interopRequireDefault(require("react"));
+
 var _draftJs = require("draft-js");
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const IconWrapper = _styledComponents.default.span`
   display: inline-block;
   position: relative;
   top: 2px;
 `;
+
 function DividerButton(props) {
   const {
     editorState,
     onChange,
     className
   } = props;
+
   const onClick = () => {
     const contentState = editorState.getCurrentContent();
     const contentStateWithEntity = contentState.createEntity('DIVIDER', 'IMMUTABLE', {});
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+
     const newEditorState = _draftJs.EditorState.set(editorState, {
       currentContent: contentStateWithEntity
-    });
-
-    // The third parameter here is a space string, not an empty string
+    }); // The third parameter here is a space string, not an empty string
     // If you set an empty string, you will get an error: Unknown DraftEntity key: null
+
+
     onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
   };
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     onClick: onClick,
     className: className