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

package/lib/draft-js/buttons/embedded-code.js

@@ -4,12 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EmbeddedCodeButton = EmbeddedCodeButton;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _draftJs = require("draft-js");
+
 var _modals = require("@keystone-ui/modals");
+
 var _fields = require("@keystone-ui/fields");
+
 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 EmbeddedCodeButton(props) {
   const {
     editorState,
@@ -21,6 +28,7 @@ function EmbeddedCodeButton(props) {
     caption: '',
     embeddedCode: ''
   });
+
   const promptForInput = () => {
     setToShowInput(true);
     setInputValue({
@@ -28,16 +36,18 @@ function EmbeddedCodeButton(props) {
       embeddedCode: ''
     });
   };
+
   const confirmInput = () => {
     const contentState = editorState.getCurrentContent();
     const contentStateWithEntity = contentState.createEntity('EMBEDDEDCODE', 'IMMUTABLE', inputValue);
     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, ' '));
     setToShowInput(false);
     setInputValue({
@@ -45,11 +55,11 @@ function EmbeddedCodeButton(props) {
       embeddedCode: ''
     });
   };
+
   const input = /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
     isOpen: toShowInput
   }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
-    title: `Insert Embedded Code`
-    //isOpen={toShowInput}
+    title: `Insert Embedded Code` //isOpen={toShowInput}
     ,
     actions: {
       cancel: {
@@ -87,6 +97,7 @@ function EmbeddedCodeButton(props) {
       marginBottom: '30px'
     }
   })));
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, input, /*#__PURE__*/_react.default.createElement("div", {
     onClick: () => {
       promptForInput();

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

@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EnlargeButton = EnlargeButton;
+
 var _react = _interopRequireDefault(require("react"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function EnlargeButton(props) {
   const {
     onToggle,

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

@@ -4,21 +4,33 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FontColorButton = FontColorButton;
+
 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 FontColorButton(props) {
   const {
     isActive,
@@ -27,40 +39,53 @@ function FontColorButton(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_FONT_COLOR);
+
     if (colorValue) {
       newContentState = _modifier.Modifier.applyInlineStyle(newContentState, selection, _const.CUSTOM_STYLE_PREFIX_FONT_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_FONT_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 FontColorButton(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/image.js

@@ -4,11 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ImageButton = ImageButton;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _draftJs = require("draft-js");
+
 var _imageSelector = require("./selector/image-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 ImageButton(props) {
   const {
     editorState,
@@ -17,32 +23,37 @@ function ImageButton(props) {
     ImageSelector = _imageSelector.ImageSelector
   } = props;
   const [toShowImageSelector, setToShowImageSelector] = (0, _react.useState)(false);
+
   const promptForImageSelector = () => {
     setToShowImageSelector(true);
   };
+
   const onImageSelectorChange = (selectedImagesWithMeta, align) => {
     const selected = selectedImagesWithMeta === null || selectedImagesWithMeta === void 0 ? void 0 : selectedImagesWithMeta[0];
+
     if (!selected) {
       setToShowImageSelector(false);
       return;
     }
+
     const contentState = editorState.getCurrentContent();
-    const contentStateWithEntity = contentState.createEntity('image', 'IMMUTABLE', {
-      ...(selected === null || selected === void 0 ? void 0 : selected.image),
-      desc: selected === null || selected === void 0 ? void 0 : selected.desc,
-      url: selected === null || selected === void 0 ? void 0 : selected.url,
+    const contentStateWithEntity = contentState.createEntity('image', 'IMMUTABLE', { ...selected.image,
+      desc: selected.desc,
+      url: selected.url,
       alignment: align
     });
     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, ' '));
     setToShowImageSelector(false);
   };
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowImageSelector && /*#__PURE__*/_react.default.createElement(ImageSelector, {
     onChange: onImageSelectorChange,
     enableCaption: true,

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

@@ -5,19 +5,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InfoBoxButton = InfoBoxButton;
 exports.InfoBoxInput = InfoBoxInput;
+
 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 TitleInput = (0, _styledComponents.default)(_fields.TextInput)`
   margin-top: 30px;
   margin-bottom: 10px;
 `;
+
 function InfoBoxInput(props) {
   const {
     isOpen,
@@ -38,9 +49,11 @@ function InfoBoxInput(props) {
     editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(rawContentState), decorators)
   };
   const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
+
   const clearInputValue = () => {
     setInputValue(initialInputValue);
   };
+
   const basicEditorJsx = renderBasicEditor({
     editorState: inputValue.editorStateOfBasicEditor,
     onChange: editorStateOfBasicEditor => {
@@ -84,6 +97,7 @@ function InfoBoxInput(props) {
     value: inputValue.title
   }), basicEditorJsx));
 }
+
 function InfoBoxButton(props) {
   const [toShowInput, setToShowInput] = (0, _react.useState)(false);
   const {
@@ -92,28 +106,30 @@ function InfoBoxButton(props) {
     onChange: onEditorStateChange,
     renderBasicEditor
   } = props;
+
   const onChange = ({
     title,
     rawContentState
   }) => {
-    const contentState = editorState.getCurrentContent();
+    const contentState = editorState.getCurrentContent(); // create an InfoBox entity
 
-    // create an InfoBox entity
     const contentStateWithEntity = contentState.createEntity('INFOBOX', 'IMMUTABLE', {
       title,
       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(InfoBoxInput, {
     renderBasicEditor: renderBasicEditor,
     onChange: onChange,

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

@@ -4,64 +4,104 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LinkButton = LinkButton;
+
 var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _modals = require("@keystone-ui/modals");
+
 var _draftJs = require("draft-js");
+
 var _fields = require("@keystone-ui/fields");
+
+var _util = require("../util");
+
+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 styles = {
-  urlInput: {
-    fontFamily: "'Georgia', serif",
-    marginRight: 10,
-    padding: 10
-  }
-};
+
+const StyledTextInput = (0, _styledComponents.default)(_fields.TextInput)`
+  fontfamily: Georgia, serif;
+  marginright: 10;
+  padding: 10;
+`;
+
 function LinkButton(props) {
   const {
-    isActive,
     editorState,
     onChange
   } = props;
+  const entityData = (0, _util.getSelectionEntityData)(editorState);
+  const url = (entityData === null || entityData === void 0 ? void 0 : entityData.url) || '';
+  (0, _react.useEffect)(() => {
+    setLinkUrl(url);
+  }, [url]);
   const [toShowUrlInput, setToShowUrlInput] = (0, _react.useState)(false);
-  const [urlValue, setUrlValue] = (0, _react.useState)('');
+  const [linkUrl, setLinkUrl] = (0, _react.useState)(url || '');
+
   const promptForLink = e => {
     e.preventDefault();
     const selection = editorState.getSelection();
+
     if (!selection.isCollapsed()) {
       setToShowUrlInput(true);
     }
   };
+
   const confirmLink = () => {
     const contentState = editorState.getCurrentContent();
     const contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', {
-      url: urlValue
+      url: linkUrl
     });
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+
     const newEditorState = _draftJs.EditorState.set(editorState, {
       currentContent: contentStateWithEntity
     });
-    onChange(_draftJs.RichUtils.toggleLink(newEditorState, newEditorState.getSelection(), entityKey));
+
+    const selection = newEditorState.getSelection(); // RichUtils.toggleLink will reset selection back to first block and cause
+    // the editor scroll to top. Use `forceSelection` to hold the selection.
+
+    onChange(_draftJs.EditorState.forceSelection(_draftJs.RichUtils.toggleLink(newEditorState, selection, entityKey), selection));
     setToShowUrlInput(false);
-    setUrlValue('');
   };
+
   const onLinkInputKeyDown = e => {
     if (e.which === 13) {
       e.preventDefault();
       confirmLink();
     }
   };
+
   const removeLink = () => {
     const selection = editorState.getSelection();
+
     if (!selection.isCollapsed()) {
-      onChange(_draftJs.RichUtils.toggleLink(editorState, selection, null));
+      // RichUtils.toggleLink will reset selection back to first block and cause
+      // the editor scroll to top. Use `forceSelection` to hold the selection.
+      onChange(_draftJs.EditorState.forceSelection(_draftJs.RichUtils.toggleLink(editorState, selection, null), selection));
     }
+
     setToShowUrlInput(false);
-    setUrlValue('');
   };
-  const urlInput = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
-    title: "Insert LINK",
-    isOpen: toShowUrlInput,
+
+  const alertProps = linkUrl ? {
+    title: 'Update Link',
+    actions: {
+      cancel: {
+        label: 'Remove',
+        action: removeLink
+      },
+      confirm: {
+        label: 'Update',
+        action: confirmLink
+      }
+    }
+  } : {
+    title: 'Insert Link',
     actions: {
       cancel: {
         label: 'Cancel',
@@ -72,16 +112,22 @@ function LinkButton(props) {
         action: confirmLink
       }
     }
-  }, /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
-    onChange: e => setUrlValue(e.target.value),
-    style: styles.urlInput,
+  };
+
+  const urlInput = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
+    title: alertProps.title,
+    isOpen: toShowUrlInput,
+    actions: alertProps.actions
+  }, /*#__PURE__*/_react.default.createElement(StyledTextInput, {
+    onChange: e => setLinkUrl(e.target.value),
+    value: linkUrl,
     type: "text",
-    value: urlValue,
     onKeyDown: onLinkInputKeyDown
   }));
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, urlInput, /*#__PURE__*/_react.default.createElement("div", {
     className: props.className,
-    onMouseDown: isActive ? removeLink : promptForLink
+    onMouseDown: promptForLink
   }, /*#__PURE__*/_react.default.createElement("i", {
     className: "fas fa-link"
   })));

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

@@ -4,12 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MediaButton = MediaButton;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _modals = require("@keystone-ui/modals");
+
 var _draftJs = require("draft-js");
+
 var _fields = require("@keystone-ui/fields");
+
 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 styles = {
   buttons: {
     marginBottom: 10,
@@ -29,6 +36,7 @@ const styles = {
     cursor: 'pointer'
   }
 };
+
 function MediaButton(props) {
   const {
     editorState,
@@ -38,27 +46,31 @@ function MediaButton(props) {
   const [toShowUrlInput, setToShowUrlInput] = (0, _react.useState)(false);
   const [urlValue, setUrlValue] = (0, _react.useState)('');
   const [urlType, setUrlType] = (0, _react.useState)('');
+
   const promptForMedia = mediaType => {
     setToShowUrlInput(true);
     setUrlValue('');
     setUrlType(mediaType);
   };
+
   const confirmMedia = () => {
     const contentState = editorState.getCurrentContent();
     const contentStateWithEntity = contentState.createEntity(urlType, 'IMMUTABLE', {
       src: urlValue
     });
     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, ' '));
     setToShowUrlInput(false);
     setUrlType('');
   };
+
   const urlInput = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
     title: `Insert ${urlType.toUpperCase()} LINK`,
     isOpen: toShowUrlInput,
@@ -81,6 +93,7 @@ function MediaButton(props) {
     type: "text",
     value: urlValue
   }));
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, urlInput, /*#__PURE__*/_react.default.createElement("div", {
     style: styles.buttons
   }, /*#__PURE__*/_react.default.createElement("div", {

package/lib/draft-js/buttons/related-post.js

@@ -4,11 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RelatedPostButton = RelatedPostButton;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _draftJs = require("draft-js");
+
 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); }
+
 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 RelatedPostButton(props) {
   const {
     editorState,
@@ -17,28 +23,33 @@ function RelatedPostButton(props) {
     PostSelector = _postSelector.PostSelector
   } = props;
   const [toShowPostSelector, setToShowPostSelector] = (0, _react.useState)(false);
+
   const promptForPostSelector = () => {
     setToShowPostSelector(true);
   };
+
   const onPostSelectorChange = selected => {
     if (!selected.length) {
       setToShowPostSelector(false);
       return;
     }
+
     const contentState = editorState.getCurrentContent();
     const contentStateWithEntity = contentState.createEntity('RELATEDPOST', 'IMMUTABLE', {
       posts: selected.map(ele => ele.post)
     });
     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, ' '));
     setToShowPostSelector(false);
   };
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowPostSelector && /*#__PURE__*/_react.default.createElement(PostSelector, {
     onChange: onPostSelectorChange,
     enableMultiSelect: true,

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

@@ -4,12 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AlignSelector = AlignSelector;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _fields = require("@keystone-ui/fields");
+
 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;
   margin: 10px 0;
@@ -22,6 +29,7 @@ const AlignSelect = (0, _styledComponents.default)(_fields.Select)`
   return `margin-bottom: ${menuHeight}px;`;
 }}
 `;
+
 function AlignSelector(props) {
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const [menuHeight, setMenuHeight] = (0, _react.useState)(0);
@@ -33,6 +41,7 @@ function AlignSelector(props) {
   } = props;
   (0, _react.useEffect)(() => {
     const selectMenu = document.querySelector('.css-nabggt-menu');
+
     if (selectMenu) {
       const styles = window.getComputedStyle(selectMenu);
       const margin = parseFloat(styles['marginTop']) + parseFloat(styles['marginBottom']);
@@ -40,6 +49,7 @@ function AlignSelector(props) {
     } else {
       setMenuHeight(0);
     }
+
     if (isOpen && onOpen) {
       onOpen();
     }
@@ -47,8 +57,7 @@ function AlignSelector(props) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
     htmlFor: "alignment"
   }, "\u5C0D\u9F4A"), /*#__PURE__*/_react.default.createElement(AlignSelect, {
-    id: "alignment"
-    // default align === undefined
+    id: "alignment" // default align === undefined
     ,
     value: options.find(option => option.value === align),
     options: options,