@mirrormedia/lilith-draft-editor 1.1.0-alpha.9 → 1.2.0

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

@@ -38,8 +38,9 @@ function AudioButton(props) {
       return;
     }
 
-    const contentState = editorState.getCurrentContent();
-    const contentStateWithEntity = contentState.createEntity('AUDIO', 'IMMUTABLE', {
+    const contentState = editorState.getCurrentContent(); // since 202310, only AUDIO-V2 will be created
+
+    const contentStateWithEntity = contentState.createEntity('AUDIO-V2', 'IMMUTABLE', {
       audio
     });
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();

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

@@ -37,9 +37,9 @@ function ImageButton(props) {
     }
 
     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();

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

@@ -7,32 +7,40 @@ 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();
@@ -46,7 +54,7 @@ function LinkButton(props) {
   const confirmLink = () => {
     const contentState = editorState.getCurrentContent();
     const contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', {
-      url: urlValue
+      url: linkUrl
     });
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
 
@@ -54,9 +62,11 @@ function LinkButton(props) {
       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 => {
@@ -70,16 +80,28 @@ function LinkButton(props) {
     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',
@@ -90,17 +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/selector/audio-selector.js

@@ -103,6 +103,8 @@ function AudioGrid(props) {
     controls: true
   }, /*#__PURE__*/_react.default.createElement("source", {
     src: audio === null || audio === void 0 ? void 0 : audio.urlOriginal
+  }), /*#__PURE__*/_react.default.createElement("source", {
+    src: audio === null || audio === void 0 ? void 0 : audio.audioSrc
   }), /*#__PURE__*/_react.default.createElement("source", {
     src: audio === null || audio === void 0 ? void 0 : (_audio$file = audio.file) === null || _audio$file === void 0 ? void 0 : _audio$file.url
   })), /*#__PURE__*/_react.default.createElement(AudioName, null, audio === null || audio === void 0 ? void 0 : audio.name));
@@ -135,6 +137,8 @@ function AudioMetaGrid(props) {
     controls: true
   }, /*#__PURE__*/_react.default.createElement("source", {
     src: audio === null || audio === void 0 ? void 0 : audio.urlOriginal
+  }), /*#__PURE__*/_react.default.createElement("source", {
+    src: audio === null || audio === void 0 ? void 0 : audio.audioSrc
   }), /*#__PURE__*/_react.default.createElement("source", {
     src: audio === null || audio === void 0 ? void 0 : (_audio$file2 = audio.file) === null || _audio$file2 === void 0 ? void 0 : _audio$file2.url
   })), /*#__PURE__*/_react.default.createElement(AudioName, null, audio === null || audio === void 0 ? void 0 : audio.name));
@@ -151,6 +155,7 @@ const AudiosQuery = (0, _apollo.gql)`
       id
       name
       urlOriginal
+      audioSrc
       file {
         url
       }

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

@@ -226,6 +226,8 @@ const imagesQuery = (0, _apollo.gql)`
       name
       imageFile {
         url
+        width
+        height
       }
       resized {
         original
@@ -240,6 +242,16 @@ const imagesQuery = (0, _apollo.gql)`
 `;
 
 function ImageSelector(props) {
+  const {
+    enableMultiSelect = false,
+    enableCaption = false,
+    enableUrl = false,
+    enableAlignment = false,
+    enableDelay = false,
+    onChange,
+    initialSelected = [],
+    initialAlign
+  } = props;
   const [queryImages, {
     loading,
     error,
@@ -253,9 +265,9 @@ function ImageSelector(props) {
   const [currentPage, setCurrentPage] = (0, _react.useState)(0); // page starts with 1, 0 is used to detect initialization
 
   const [searchText, setSearchText] = (0, _react.useState)('');
-  const [selected, setSelected] = (0, _react.useState)([]);
+  const [selected, setSelected] = (0, _react.useState)(initialSelected);
   const [delay, setDelay] = (0, _react.useState)('5');
-  const [align, setAlign] = (0, _react.useState)(undefined);
+  const [align, setAlign] = (0, _react.useState)(initialAlign);
   const contentWrapperRef = (0, _react.useRef)();
   const pageSize = 6;
   const options = [{
@@ -271,14 +283,6 @@ function ImageSelector(props) {
     label: 'right',
     isDisabled: false
   }];
-  const {
-    enableMultiSelect = false,
-    enableCaption = false,
-    enableUrl = false,
-    enableAlignment = false,
-    enableDelay = false,
-    onChange
-  } = props;
 
   const onSave = () => {
     let adjustedDelay = +delay;

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

@@ -38,8 +38,9 @@ function VideoButton(props) {
       return;
     }
 
-    const contentState = editorState.getCurrentContent();
-    const contentStateWithEntity = contentState.createEntity('VIDEO', 'IMMUTABLE', {
+    const contentState = editorState.getCurrentContent(); // since 202310, only VIDEO-V2 will be created
+
+    const contentStateWithEntity = contentState.createEntity('VIDEO-V2', 'IMMUTABLE', {
       video
     });
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();

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

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.YoutubeButton = YoutubeButton;
+exports.YoutubeInput = YoutubeInput;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _draftJs = require("draft-js");
+
+var _modals = require("@keystone-ui/modals");
+
+var _fields = require("@keystone-ui/fields");
+
+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;
+  margin: 10px 0;
+`;
+
+function YoutubeInput(props) {
+  const {
+    isOpen,
+    onChange,
+    onCancel
+  } = props;
+  const initialInputValue = {
+    description: '',
+    youtubeId: ''
+  };
+  const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
+
+  const clearInputValue = () => {
+    setInputValue(initialInputValue);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
+    isOpen: isOpen
+  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
+    title: `Insert Youtube video`,
+    actions: {
+      cancel: {
+        label: 'Cancel',
+        action: () => {
+          clearInputValue();
+          onCancel();
+        }
+      },
+      confirm: {
+        label: 'Confirm',
+        action: () => {
+          onChange({
+            description: inputValue.description,
+            youtubeId: inputValue.youtubeId
+          });
+          clearInputValue();
+        }
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(Label, {
+    htmlFor: "description"
+  }, "Youtube Description"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
+    onChange: e => setInputValue({
+      description: e.target.value,
+      youtubeId: inputValue.youtubeId
+    }),
+    type: "text",
+    placeholder: "description",
+    id: "description",
+    value: inputValue.description
+  }), /*#__PURE__*/_react.default.createElement(Label, {
+    htmlFor: "youtubeId"
+  }, "Youtube Videi Id"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
+    onChange: e => setInputValue({
+      description: inputValue.description,
+      youtubeId: e.target.value
+    }),
+    type: "text",
+    placeholder: "youtubeId",
+    id: "youtubeId",
+    value: inputValue.youtubeId
+  })));
+}
+
+function YoutubeButton(props) {
+  const [toShowInput, setToShowInput] = (0, _react.useState)(false);
+  const {
+    className,
+    editorState,
+    onChange: onEditorStateChange
+  } = props;
+
+  const onChange = ({
+    description,
+    youtubeId
+  }) => {
+    const contentState = editorState.getCurrentContent(); // create an InfoBox entity
+
+    const contentStateWithEntity = contentState.createEntity('YOUTUBE', 'IMMUTABLE', {
+      description,
+      youtubeId
+    });
+    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+
+    const newEditorState = _draftJs.EditorState.set(editorState, {
+      currentContent: contentStateWithEntity
+    }); //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(YoutubeInput, {
+    onChange: onChange,
+    onCancel: () => {
+      setToShowInput(false);
+    },
+    isOpen: toShowInput
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: className,
+    onClick: () => {
+      setToShowInput(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    height: "16px",
+    width: "14px",
+    version: "1.1",
+    id: "Layer_1",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 461.001 461.001"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fill: "#6b7280",
+    d: "M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728 c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137 C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607 c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z"
+  })), /*#__PURE__*/_react.default.createElement("span", null, "Youtube")));
+}

package/lib/draft-js/draft-converter/atomic-block-processor.js

@@ -11,8 +11,6 @@ var _apiDataInstance = _interopRequireDefault(require("./api-data-instance"));
 
 var _entities = _interopRequireDefault(require("./entities"));
 
-var _server = _interopRequireDefault(require("react-dom/server"));
-
 var _draftJs = require("draft-js");
 
 var _draftConvert = require("draft-convert");
@@ -78,44 +76,25 @@ const processor = {
 
       case _entities.default.TABLE.type:
         {
-          var _content, _content2;
+          var _content;
 
           // About TABLE atomic block entity data structure,
           // see `../views/editor/table.tsx` for more information.
           content = entity === null || entity === void 0 ? void 0 : entity.data;
-          /** @type DraftEditor.TableEntity.TableStyles */
-
-          const tableStyles = (_content = content) === null || _content === void 0 ? void 0 : _content.tableStyles;
           /** @type DraftEditor.TableEntity.TableData */
-
-          const tableData = (_content2 = content) === null || _content2 === void 0 ? void 0 : _content2.tableData;
-          const rowsJsx = tableData === null || tableData === void 0 ? void 0 : tableData.map((row, rIndex) => {
-            var _tableStyles$rows;
-
-            const colsJsx = row === null || row === void 0 ? void 0 : row.map((col, cIndex) => {
-              var _tableStyles$columns, _tableStyles$cells, _tableStyles$cells$rI;
-
-              const colStyle = tableStyles === null || tableStyles === void 0 ? void 0 : (_tableStyles$columns = tableStyles.columns) === null || _tableStyles$columns === void 0 ? void 0 : _tableStyles$columns[cIndex];
-              const cellStyle = tableStyles === null || tableStyles === void 0 ? void 0 : (_tableStyles$cells = tableStyles.cells) === null || _tableStyles$cells === void 0 ? void 0 : (_tableStyles$cells$rI = _tableStyles$cells[rIndex]) === null || _tableStyles$cells$rI === void 0 ? void 0 : _tableStyles$cells$rI[cIndex];
-              return /*#__PURE__*/React.createElement("td", {
-                key: `col_${cIndex}`,
-                style: Object.assign({}, colStyle, cellStyle),
-                dangerouslySetInnerHTML: {
-                  __html: (0, _draftConvert.convertToHTML)((0, _draftJs.convertFromRaw)(col))
-                }
-              });
+          // since apiData is now only for app,
+          // keep the rows data structure for app to style the table
+
+          const tableData = (_content = content) === null || _content === void 0 ? void 0 : _content.tableData;
+          const rows = tableData === null || tableData === void 0 ? void 0 : tableData.map(row => {
+            const cols = row === null || row === void 0 ? void 0 : row.map(col => {
+              return {
+                html: (0, _draftConvert.convertToHTML)((0, _draftJs.convertFromRaw)(col))
+              };
             });
-            return /*#__PURE__*/React.createElement("tr", {
-              key: `row_${rIndex}`,
-              style: tableStyles === null || tableStyles === void 0 ? void 0 : (_tableStyles$rows = tableStyles.rows) === null || _tableStyles$rows === void 0 ? void 0 : _tableStyles$rows[rIndex]
-            }, colsJsx);
-          }); // Use `React.renderToStsaticMarkup` to generate plain HTML string
-
-          const html = _server.default.renderToStaticMarkup( /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, rowsJsx)));
-
-          content = [{
-            html
-          }];
+            return cols;
+          });
+          content = rows;
           break;
         }
 
@@ -133,11 +112,13 @@ const processor = {
         break;
 
       case _entities.default.AUDIO.type:
+      case _entities.default['AUDIO-V2'].type:
       case _entities.default.IMAGE.type:
       case _entities.default.IMAGEDIFF.type:
       case _entities.default.SLIDESHOW.type:
       case _entities.default['SLIDESHOW-V2'].type:
       case _entities.default.VIDEO.type:
+      case _entities.default['VIDEO-V2'].type:
       case _entities.default.YOUTUBE.type:
       case _entities.default.BACKGROUNDIMAGE.type:
       case _entities.default.BACKGROUNDVIDEO.type:

package/lib/draft-js/draft-converter/entities.js

@@ -30,9 +30,15 @@ const ENTITY = {
   AUDIO: {
     type: 'AUDIO'
   },
+  ['AUDIO-V2']: {
+    type: 'AUDIO-V2'
+  },
   VIDEO: {
     type: 'VIDEO'
   },
+  ['VIDEO-V2']: {
+    type: 'VIDEO-V2'
+  },
   IMAGE: {
     type: 'IMAGE'
   },

package/lib/draft-js/util.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSelectionEntityData = void 0;
+
+const getSelectionEntityData = editorState => {
+  const selection = editorState.getSelection();
+  const startOffset = selection.getStartOffset();
+  const startBlock = editorState.getCurrentContent().getBlockForKey(selection.getStartKey());
+  let data;
+  let entityInstance;
+  let entityKey;
+
+  if (!selection.isCollapsed()) {
+    entityKey = startBlock.getEntityAt(startOffset);
+  } else {
+    entityKey = startBlock.getEntityAt(0);
+  }
+
+  const contentState = editorState.getCurrentContent();
+
+  if (entityKey !== null) {
+    entityInstance = contentState.getEntity(entityKey);
+    data = entityInstance.getData();
+  }
+
+  return data;
+};
+
+exports.getSelectionEntityData = getSelectionEntityData;

package/lib/website/mirrormedia/block-renderer/embedded-code-block.js

@@ -17,6 +17,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const Block = _styledComponents.default.div`
   position: relative;
+  /* fix CLS issue while re-rendering trigger by composition input */
+  height: 25vh;
+  overflow-y: scroll;
   /* styles for image link */
   img.img-responsive {
     margin: 0 auto;

package/lib/website/mirrormedia/block-renderer/image-block.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageEditorBlock = ImageEditorBlock;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _mirrormedia = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/mirrormedia"));
+
+var _imageSelector = require("../selector/image-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 {
+  ImageBlock
+} = _mirrormedia.default.blockRenderers;
+const ImageBlockWrapper = _styledComponents.default.div`
+  img {
+    min-width: 300px;
+    max-width: 600px;
+  }
+`;
+const ImageEditButton = _styledComponents.default.span`
+  cursor: pointer;
+  background-color: white;
+  padding: 6px;
+  border-radius: 6px;
+`;
+
+function ImageEditorBlock(props) {
+  const [toShowImageSelector, setToShowImageSelector] = (0, _react.useState)(false);
+  const {
+    block,
+    blockProps,
+    contentState
+  } = props;
+  const {
+    onEditStart,
+    onEditFinish
+  } = blockProps;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const {
+    id,
+    name,
+    imageFile,
+    resized,
+    resizedWebp,
+    desc,
+    url,
+    alignment
+  } = entity.getData();
+  const imageWithMeta = {
+    image: {
+      id,
+      name,
+      imageFile,
+      resized,
+      resizedWebp
+    },
+    desc,
+    url
+  };
+
+  const onImageSelectorChange = (params, align) => {
+    if (params.length === 0) {
+      onEditFinish({});
+    } else {
+      const imageEntity = params[0];
+      onEditFinish({
+        entityKey,
+        entityData: { ...imageEntity.image,
+          desc: imageEntity.desc,
+          url: imageEntity.url,
+          alignment: align
+        }
+      });
+    }
+
+    setToShowImageSelector(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowImageSelector && /*#__PURE__*/_react.default.createElement(_imageSelector.ImageSelector, {
+    onChange: onImageSelectorChange,
+    enableCaption: true,
+    enableUrl: true,
+    enableAlignment: true,
+    initialAlign: alignment,
+    initialSelected: [imageWithMeta]
+  }), /*#__PURE__*/_react.default.createElement(ImageBlockWrapper, null, /*#__PURE__*/_react.default.createElement(ImageBlock, props)), /*#__PURE__*/_react.default.createElement(ImageEditButton, {
+    onClick: () => {
+      // call `onEditStart` prop as we are trying to update the BGImage entity
+      onEditStart(); // open `BGImageInput`
+
+      setToShowImageSelector(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa-solid fa-pen"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Modify")));
+}