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

package/lib/draft-js/draft-converter/inline-styles-processor.js

@@ -4,56 +4,72 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.convertToHtml = convertToHtml;
+
 var _lodash = _interopRequireDefault(require("lodash"));
+
 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
 
+// Modified from https://github.com/dburrows/draft-js-basic-html-editor/blob/master/src/utils/processInlineStylesAndEntities.js
 function tagForCustomInlineStyle(style) {
   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 _const.CUSTOM_STYLE_PREFIX_FONT_COLOR:
       value = style.split(_const.CUSTOM_STYLE_PREFIX_FONT_COLOR)[1];
       tag = [`<span style="color: ${value}">`, '</span>'];
       break;
+
     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;
+
     default:
       break;
   }
+
   return tag;
 }
+
 function _fullfilIntersection(block) {
   // SORT BEFORE PROCESSING
   let sortedISRanges = _lodash.default.sortBy(block.inlineStyleRanges, 'offset');
+
   let sortedEntityRanges = _lodash.default.sortBy(block.entityRanges, 'offset');
+
   let splitedISInline = [];
+
   for (let i = 0; i < sortedEntityRanges.length; i++) {
     let entityRange = sortedEntityRanges[i];
+
     for (let j = 0; j < sortedISRanges.length; j++) {
       let entityOffset = _lodash.default.get(entityRange, 'offset', 0);
+
       let entityLength = _lodash.default.get(entityRange, 'length', 0);
+
       let inlineLength = _lodash.default.get(sortedISRanges, [j, 'length'], 0);
+
       let inlineOffset = _lodash.default.get(sortedISRanges, [j, 'offset'], 0);
+
       let inlineStyle = _lodash.default.get(sortedISRanges, [j, 'style'], '');
+
       let nextEntityOffset = _lodash.default.get(sortedEntityRanges, [i + 1, 'offset'], 0);
-      let nextEntityLength = _lodash.default.get(sortedEntityRanges, [i + 1, 'length'], 0);
 
-      // handle intersections of inline style and entity
+      let nextEntityLength = _lodash.default.get(sortedEntityRanges, [i + 1, 'length'], 0); // handle intersections of inline style and entity
       // <a></a> is entity
       // <abbr></abbr> is next entity
       // <strong></strong>  is inline style
-      if (nextEntityOffset >= inlineOffset && nextEntityOffset < inlineOffset + inlineLength && nextEntityOffset + nextEntityLength > inlineOffset + inlineLength &&
-      // <a><strong></a></strong>
+
+
+      if (nextEntityOffset >= inlineOffset && nextEntityOffset < inlineOffset + inlineLength && nextEntityOffset + nextEntityLength > inlineOffset + inlineLength && // <a><strong></a></strong>
       entityOffset < inlineOffset && entityOffset + entityLength > inlineOffset && entityOffset + entityLength <= inlineOffset + inlineLength) {
         // <strong><abbr></strong></abbr>
         // situation: <a><strong></a><abbr></strong></abbr>
         // should be: <a><strong></strong></a><strong></strong><abbr><strong></strong></abbr>
-
         // skip next entity checking
         i = i + 1;
         splitedISInline.push({
@@ -105,92 +121,109 @@ function _fullfilIntersection(block) {
       }
     }
   }
+
   _lodash.default.forEachRight(splitedISInline, ele => {
     sortedISRanges.splice(ele.index, 1, ...ele.replace);
   });
+
   return sortedISRanges;
 }
+
 function _inlineTag(inlineTagMap, inlineStyleRanges, tagInsertMap = {}) {
   // SORT BEFORE PROCESSING
-  let sortedRanges = _lodash.default.sortBy(inlineStyleRanges, 'offset');
+  let sortedRanges = _lodash.default.sortBy(inlineStyleRanges, 'offset'); // map all the tag insertions we're going to do
+
 
-  // map all the tag insertions we're going to do
   sortedRanges.forEach(function (range) {
-    let tag = inlineTagMap[range.style];
+    let tag = inlineTagMap[range.style]; // handle dynamic inline style
 
-    // handle dynamic inline style
     if (!tag) {
       tag = tagForCustomInlineStyle(range.style);
     }
+
     if (!tagInsertMap[range.offset]) {
       tagInsertMap[range.offset] = [];
-    }
+    } // add starting tag to the end of the array to form the tag nesting
+
 
-    // add starting tag to the end of the array to form the tag nesting
     tagInsertMap[range.offset].push(tag[0]);
+
     if (tag[1]) {
       if (!tagInsertMap[range.offset + range.length]) {
         tagInsertMap[range.offset + range.length] = [];
-      }
-      // add closing tags to start of array, otherwise tag nesting will be invalid
+      } // add closing tags to start of array, otherwise tag nesting will be invalid
+
+
       tagInsertMap[range.offset + range.length].unshift(tag[1]);
     }
   });
   return tagInsertMap;
 }
+
 function _entityTag(entityTagMap, entityMap, entityRanges, tagInsertMap = {}) {
   _lodash.default.forEach(entityRanges, range => {
     let entity = entityMap[range.key];
     let type = entity.type && entity.type.toUpperCase();
     let tag = entityTagMap[type];
     let data = entity.data;
+
     let compiledTag0 = _lodash.default.template(tag[0], {
       variable: 'data'
     })(data);
+
     let compiledTag1 = _lodash.default.template(tag[1], {
       variable: 'data'
     })(data);
+
     if (!tagInsertMap[range.offset]) {
       tagInsertMap[range.offset] = [];
-    }
+    } // add starting tag
+
 
-    // add starting tag
     tagInsertMap[range.offset].push(compiledTag0);
+
     if (tag[1]) {
       if (!tagInsertMap[range.offset + range.length]) {
         tagInsertMap[range.offset + range.length] = [];
-      }
-      // add closing tags to start of array, otherwise tag nesting will be invalid
+      } // add closing tags to start of array, otherwise tag nesting will be invalid
+
+
       tagInsertMap[range.offset + range.length].unshift(compiledTag1);
     }
   });
+
   return tagInsertMap;
 }
+
 function convertToHtml(inlineTagMap, entityTagMap, entityMap, block) {
   //  exit if there is no inlineStyleRanges/entityRanges or length === 0 as well
   if (!block.inlineStyleRanges && !block.entityRanges || block.inlineStyleRanges.length === 0 && block.entityRanges.length === 0) {
     return block.text;
   }
+
   let html = block.text;
+
   let inlineStyleRanges = _fullfilIntersection(block);
+
   let tagInsertMap = {};
   tagInsertMap = _entityTag(entityTagMap, entityMap, block.entityRanges, tagInsertMap);
-  tagInsertMap = _inlineTag(inlineTagMap, inlineStyleRanges, tagInsertMap);
+  tagInsertMap = _inlineTag(inlineTagMap, inlineStyleRanges, tagInsertMap); // sort on position, as we'll need to keep track of offset
 
-  // sort on position, as we'll need to keep track of offset
   let orderedKeys = Object.keys(tagInsertMap).sort(function (a, b) {
     a = Number(a);
     b = Number(b);
+
     if (a > b) {
       return 1;
     }
+
     if (a < b) {
       return -1;
     }
+
     return 0;
-  });
+  }); // insert tags into string, keep track of offset caused by our text insertions
 
-  // insert tags into string, keep track of offset caused by our text insertions
   let offset = 0;
   orderedKeys.forEach(function (pos) {
     let index = Number(pos);

package/lib/draft-js/modifier.js

@@ -4,12 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Modifier = void 0;
+
 var _draftJs = require("draft-js");
+
 var _immutable = require("immutable");
-const Modifier = {
-  ..._draftJs.Modifier
-};
 
+const Modifier = { ..._draftJs.Modifier
+};
 /* 
     This method is specified for custom inline style such as 'FONT_COLOR_#ffffff'.
     For this kind of inline style there may be more than one style name 'FONT_COLOR_#ffffff', 'FONT_COLOR_#000000'.
@@ -21,18 +22,20 @@ const Modifier = {
 
     Reference: https://github.com/facebook/draft-js/blob/main/src/model/transaction/ContentStateInlineStyle.js#L39-L88
   */
+
 exports.Modifier = Modifier;
+
 Modifier.removeInlineStyleByPrefix = (contentState, selectionState, inlineStylePrefix) => {
   const blockMap = contentState.getBlockMap();
   const startKey = selectionState.getStartKey();
   const startOffset = selectionState.getStartOffset();
   const endKey = selectionState.getEndKey();
-  const endOffset = selectionState.getEndOffset();
+  const endOffset = selectionState.getEndOffset(); // loop through all selected blocks and every block chars to remove specific inline style
 
-  // loop through all selected blocks and every block chars to remove specific inline style
   const newBlocks = blockMap.skipUntil((_, k) => k === startKey).takeUntil((_, k) => k === endKey).concat((0, _immutable.Map)([[endKey, blockMap.get(endKey)]])).map((block, blockKey) => {
     let sliceStart;
     let sliceEnd;
+
     if (startKey === endKey) {
       sliceStart = startOffset;
       sliceEnd = endOffset;
@@ -40,16 +43,21 @@ Modifier.removeInlineStyleByPrefix = (contentState, selectionState, inlineStyleP
       sliceStart = blockKey === startKey ? startOffset : 0;
       sliceEnd = blockKey === endKey ? endOffset : block.getLength();
     }
+
     let chars = block.getCharacterList();
     let current;
+
     while (sliceStart < sliceEnd) {
       current = chars.get(sliceStart);
       const inlineStyle = current.getStyle().find(styleName => styleName.startsWith(inlineStylePrefix));
+
       if (inlineStyle) {
         chars = chars.set(sliceStart, _draftJs.CharacterMetadata.removeStyle(current, inlineStyle));
       }
+
       sliceStart++;
     }
+
     return block.set('characterList', chars);
   });
   return contentState.merge({

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/index.js

@@ -21,7 +21,11 @@ Object.defineProperty(exports, "draftConverter", {
     return _draftConverter.default;
   }
 });
+
 var _draftConverter = _interopRequireDefault(require("./draft-js/draft-converter"));
+
 var _mirrormedia = _interopRequireDefault(require("./website/mirrormedia"));
+
 var _readr = _interopRequireDefault(require("./website/readr"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -4,14 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BGImageEditorBlock = BGImageEditorBlock;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _draftConverter = _interopRequireDefault(require("../../../draft-js/draft-converter"));
+
 var _backgroundImage = require("../../../draft-js/buttons/background-image");
+
 var _mirrormedia = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/mirrormedia"));
+
 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 {
   BGImageBlock
 } = _mirrormedia.default.blockRenderers;
@@ -21,6 +30,7 @@ const BGImageRenderButton = _styledComponents.default.span`
   padding: 6px;
   border-radius: 6px;
 `;
+
 function BGImageEditorBlock(props) {
   const [toShowInput, setToShowInput] = (0, _react.useState)(false);
   const {
@@ -40,6 +50,7 @@ function BGImageEditorBlock(props) {
     image,
     rawContentState
   } = entity.getData();
+
   const onChange = ({
     textBlockAlign: newTextBlockAlign,
     image: newImage,
@@ -57,6 +68,7 @@ function BGImageEditorBlock(props) {
       }
     });
   };
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_backgroundImage.BGImageInput, {
     renderBasicEditor: renderBasicEditor,
     textBlockAlign: textBlockAlign,
@@ -71,8 +83,8 @@ function BGImageEditorBlock(props) {
   }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(BGImageBlock, props), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(BGImageRenderButton, {
     onClick: () => {
       // call `onEditStart` prop as we are trying to update the BGImage entity
-      onEditStart();
-      // open `BGImageInput`
+      onEditStart(); // open `BGImageInput`
+
       setToShowInput(true);
     }
   }, /*#__PURE__*/_react.default.createElement("i", {

package/lib/website/mirrormedia/block-renderer/background-video-block.js

@@ -4,14 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BGVideoEditorBlock = BGVideoEditorBlock;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _draftConverter = _interopRequireDefault(require("../../../draft-js/draft-converter"));
+
 var _backgroundVideo = require("../../../draft-js/buttons/background-video");
+
 var _mirrormedia = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/mirrormedia"));
+
 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 {
   BGVideoBlock
 } = _mirrormedia.default.blockRenderers;
@@ -21,6 +30,7 @@ const BGVideoRenderButton = _styledComponents.default.span`
   padding: 6px;
   border-radius: 6px;
 `;
+
 function BGVideoEditorBlock(props) {
   const [toShowInput, setToShowInput] = (0, _react.useState)(false);
   const {
@@ -40,6 +50,7 @@ function BGVideoEditorBlock(props) {
     video,
     rawContentState
   } = entity.getData();
+
   const onChange = ({
     textBlockAlign: newTextBlockAlign,
     video: newVideo,
@@ -57,6 +68,7 @@ function BGVideoEditorBlock(props) {
       }
     });
   };
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_backgroundVideo.BGVideoInput, {
     renderBasicEditor: renderBasicEditor,
     textBlockAlign: textBlockAlign,
@@ -71,8 +83,8 @@ function BGVideoEditorBlock(props) {
   }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(BGVideoBlock, props), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(BGVideoRenderButton, {
     onClick: () => {
       // call `onEditStart` prop as we are trying to update the BGVideo entity
-      onEditStart();
-      // open `BGVideoInput`
+      onEditStart(); // open `BGVideoInput`
+
       setToShowInput(true);
     }
   }, /*#__PURE__*/_react.default.createElement("i", {

package/lib/website/mirrormedia/block-renderer/color-box-block.js

@@ -4,20 +4,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ColorBoxEditorBlock = ColorBoxEditorBlock;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _draftConverter = _interopRequireDefault(require("../../../draft-js/draft-converter"));
+
 var _colorBox = require("../../../draft-js/buttons/color-box");
+
 var _mirrormedia = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/mirrormedia"));
+
 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 {
   ColorBoxBlock
 } = _mirrormedia.default.blockRenderers;
 const ColorBoxRenderButton = _styledComponents.default.div`
   cursor: pointer;
 `;
+
 function ColorBoxEditorBlock(props) {
   const [toShowInput, setToShowInput] = (0, _react.useState)(false);
   const {
@@ -36,6 +46,7 @@ function ColorBoxEditorBlock(props) {
     color,
     rawContentState
   } = entity.getData();
+
   const onChange = ({
     color: newColor,
     rawContentState: newRawContentState
@@ -51,6 +62,7 @@ function ColorBoxEditorBlock(props) {
       }
     });
   };
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_colorBox.ColorBoxInput, {
     renderBasicEditor: renderBasicEditor,
     color: color,
@@ -64,8 +76,8 @@ function ColorBoxEditorBlock(props) {
   }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(ColorBoxBlock, props), /*#__PURE__*/_react.default.createElement(ColorBoxRenderButton, {
     onClick: () => {
       // call `onEditStart` prop as we are trying to update the ColorBox entity
-      onEditStart();
-      // open `ColorBoxInput`
+      onEditStart(); // open `ColorBoxInput`
+
       setToShowInput(true);
     }
   }, /*#__PURE__*/_react.default.createElement("i", {

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

@@ -4,11 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EmbeddedCodeEditorBlock = exports.Caption = exports.Block = void 0;
+
 var _react = _interopRequireWildcard(require("react"));
+
 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 Block = _styledComponents.default.div`
   position: relative;
   /* styles for image link */
@@ -28,6 +34,7 @@ const Caption = _styledComponents.default.div`
   padding: 15px 15px 0 15px;
 `;
 exports.Caption = Caption;
+
 const EmbeddedCodeEditorBlock = entity => {
   const {
     caption,
@@ -37,9 +44,7 @@ const EmbeddedCodeEditorBlock = entity => {
   (0, _react.useEffect)(() => {
     if (!embedded.current) return;
     const node = embedded.current;
-    const fragment = document.createDocumentFragment();
-
-    // `embeddedCode` is a string, which may includes
+    const fragment = document.createDocumentFragment(); // `embeddedCode` is a string, which may includes
     // multiple '<script>' tags and other html tags.
     // For executing '<script>' tags on the browser,
     // we need to extract '<script>' tags from `embeddedCode` string first.
@@ -48,6 +53,7 @@ const EmbeddedCodeEditorBlock = entity => {
     // and we could use DOM element built-in functions,
     // such as `querySelectorAll` method, to query '<script>' elements,
     // and other non '<script>' elements.
+
     const parser = new DOMParser();
     const ele = parser.parseFromString(`<div id="draft-embed">${embeddedCode}</div>`, 'text/html');
     const scripts = ele.querySelectorAll('script');
@@ -58,9 +64,11 @@ const EmbeddedCodeEditorBlock = entity => {
     scripts.forEach(s => {
       const scriptEle = document.createElement('script');
       const attrs = s.attributes;
+
       for (let i = 0; i < attrs.length; i++) {
         scriptEle.setAttribute(attrs[i].name, attrs[i].value);
       }
+
       scriptEle.text = s.text || '';
       fragment.appendChild(scriptEle);
     });
@@ -73,4 +81,5 @@ const EmbeddedCodeEditorBlock = entity => {
     ref: embedded
   }), caption ? /*#__PURE__*/_react.default.createElement(Caption, null, caption) : null);
 };
+
 exports.EmbeddedCodeEditorBlock = EmbeddedCodeEditorBlock;

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")));
+}