@mirrormedia/lilith-draft-editor 2.2.1 → 3.0.0

package/README.md

@@ -27,9 +27,9 @@
 - selector: 依照各網站 keystone list 來調整 photo, video 和 post 的 gql query
 - draft-editor: 主要 export 出 RichTextEditor 的檔案，實際使用在 lilith-core 對應的 webiste 中，可直接決定 RichTextEditor 樣式(注 2)
 
-\*注 1: lilith-draft-editor 各個 buttons 對應的 block-renderers, entity-decorators 會 maintain 在 lilith-draft-renderer，由各網站 Next.js 專案開發人員實作，在本專案中會直接將 lilith-draft-renderer 中定義好的 block-renderers, entity-decorators 直接使用(除了少數需要再編輯的 block-renderer，參考 `src/website/${website}/block-renderer`中的 editor wrapper component)。
+\* 註 1: lilith-draft-editor 各個 buttons 對應的 block-renderers, entity-decorators 會 maintain 在 lilith-draft-renderer，由各網站 Next.js 專案開發人員實作，在本專案中會直接將 lilith-draft-renderer 中定義好的 block-renderers, entity-decorators 直接使用(除了少數需要再編輯的 block-renderer，參考 `src/website/${website}/block-renderer`中的 editor wrapper component)。
 
-\*注 2: 雖然各個網站都 maintain 了一個 draft-editor，可以自行決定 import 進來的 buttons，不過因為 lilith-core 中實作 disalbedButtons 的功能，所以目前一率將所有的 buttons 加入 RichTextEditor 中，由 lilith-(mirrormedia|readr|mesh|editools) 來控制所使用的 buttons。
+\* 註 2: 雖然各個網站都 maintain 了一個 draft-editor，可以自行決定 import 進來的 buttons，不過因為 lilith-core 中實作 disalbedButtons 的功能，所以目前一率將所有的 buttons 加入 RichTextEditor 中，由 lilith-(mirrormedia|readr|mesh|editools) 來控制所使用的 buttons。
 
 ## Build
 
@@ -42,10 +42,4 @@
 在 publish 前，請根據 conventional commits 的規範，將 package.json#version 升版。
 
 ## Notable Details
-
-### For those files under `views/` folder, we transpile them specifically.
-
-For those files under `views/` folder, we transpile them by babel according to different configuation.
-The specific babel configuration is `.views.babelrc.js`.
-In `.views.babelrc.js`, we tell babel not to transpile `import` and `export` es6 codes into commonJS codes.
-The Keystone server won't start server well if those files under `views/` are transpiled into commonJS codes.
+* 元件裡的 `import React from 'react'` 為必要的，避免 babel transpile 後，無法抓取的 react 依賴的問題。

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

@@ -223,8 +223,7 @@ function VideoSelector(props) {
 
 
       return [{
-        video: videoEntity,
-        desc: ''
+        video: videoEntity
       }];
     });
   };

package/lib/hooks.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useButtonDisabledChecker = useButtonDisabledChecker;
+
+var _react = require("react");
+
+var _usehooksTs = require("usehooks-ts");
+
+function useButtonDisabledChecker({
+  mobileBoundary,
+  disabledButtons,
+  hideOnMobileButtons
+}) {
+  const {
+    width
+  } = (0, _usehooksTs.useWindowSize)();
+  const checkIsDisabled = (0, _react.useCallback)(buttonName => {
+    let isDisabled = false;
+
+    if (Array.isArray(disabledButtons)) {
+      isDisabled ||= disabledButtons.includes(buttonName);
+    }
+
+    if (Array.isArray(hideOnMobileButtons) && width < mobileBoundary) {
+      isDisabled ||= hideOnMobileButtons.includes(buttonName);
+    }
+
+    return isDisabled;
+  }, [width]);
+  return checkIsDisabled;
+}

package/lib/website/mirrordaily/README.md

@@ -0,0 +1,3 @@
+# Draft Editor (Mirrordaily)
+
+Mirrordaily 的邏輯 fork 自 Mirrormedia，以滿足相關客製化需求

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

@@ -0,0 +1,93 @@
+"use strict";
+
+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;
+const BGImageRenderButton = _styledComponents.default.span`
+  cursor: pointer;
+  background-color: white;
+  padding: 6px;
+  border-radius: 6px;
+`;
+
+function BGImageEditorBlock(props) {
+  const [toShowInput, setToShowInput] = (0, _react.useState)(false);
+  const {
+    block,
+    blockProps,
+    contentState
+  } = props;
+  const {
+    onEditStart,
+    onEditFinish,
+    renderBasicEditor
+  } = blockProps;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const {
+    textBlockAlign,
+    image,
+    rawContentState
+  } = entity.getData();
+
+  const onChange = ({
+    textBlockAlign: newTextBlockAlign,
+    image: newImage,
+    rawContentState: newRawContentState
+  }) => {
+    // close `BGImageInput`
+    setToShowInput(false);
+    onEditFinish({
+      entityKey,
+      entityData: {
+        textBlockAlign: newTextBlockAlign,
+        image: newImage,
+        body: _draftConverter.default.convertToHtml(newRawContentState),
+        rawContentState: newRawContentState
+      }
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_backgroundImage.BGImageInput, {
+    renderBasicEditor: renderBasicEditor,
+    textBlockAlign: textBlockAlign,
+    image: image,
+    rawContentStateForBGImageEditor: rawContentState,
+    onChange: onChange,
+    onCancel: () => {
+      onEditFinish({});
+      setToShowInput(false);
+    },
+    isOpen: toShowInput
+  }), /*#__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`
+
+      setToShowInput(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa-solid fa-pen"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Modify")))));
+}

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

@@ -0,0 +1,93 @@
+"use strict";
+
+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;
+const BGVideoRenderButton = _styledComponents.default.span`
+  cursor: pointer;
+  background-color: white;
+  padding: 6px;
+  border-radius: 6px;
+`;
+
+function BGVideoEditorBlock(props) {
+  const [toShowInput, setToShowInput] = (0, _react.useState)(false);
+  const {
+    block,
+    blockProps,
+    contentState
+  } = props;
+  const {
+    onEditStart,
+    onEditFinish,
+    renderBasicEditor
+  } = blockProps;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const {
+    textBlockAlign,
+    video,
+    rawContentState
+  } = entity.getData();
+
+  const onChange = ({
+    textBlockAlign: newTextBlockAlign,
+    video: newVideo,
+    rawContentState: newRawContentState
+  }) => {
+    // close `BGVideoInput`
+    setToShowInput(false);
+    onEditFinish({
+      entityKey,
+      entityData: {
+        textBlockAlign: newTextBlockAlign,
+        video: newVideo,
+        body: _draftConverter.default.convertToHtml(newRawContentState),
+        rawContentState: newRawContentState
+      }
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_backgroundVideo.BGVideoInput, {
+    renderBasicEditor: renderBasicEditor,
+    textBlockAlign: textBlockAlign,
+    video: video,
+    rawContentStateForBGVideoEditor: rawContentState,
+    onChange: onChange,
+    onCancel: () => {
+      onEditFinish({});
+      setToShowInput(false);
+    },
+    isOpen: toShowInput
+  }), /*#__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`
+
+      setToShowInput(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa-solid fa-pen"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Modify")))));
+}

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

@@ -0,0 +1,86 @@
+"use strict";
+
+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 {
+    block,
+    blockProps,
+    contentState
+  } = props;
+  const {
+    onEditStart,
+    onEditFinish,
+    renderBasicEditor
+  } = blockProps;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const {
+    color,
+    rawContentState
+  } = entity.getData();
+
+  const onChange = ({
+    color: newColor,
+    rawContentState: newRawContentState
+  }) => {
+    // close `ColorBoxInput`
+    setToShowInput(false);
+    onEditFinish({
+      entityKey,
+      entityData: {
+        color: newColor,
+        body: _draftConverter.default.convertToHtml(newRawContentState),
+        rawContentState: newRawContentState
+      }
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_colorBox.ColorBoxInput, {
+    renderBasicEditor: renderBasicEditor,
+    color: color,
+    rawContentStateForColorBoxEditor: rawContentState,
+    onChange: onChange,
+    onCancel: () => {
+      onEditFinish({});
+      setToShowInput(false);
+    },
+    isOpen: toShowInput
+  }), /*#__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`
+
+      setToShowInput(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa-solid fa-pen"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Modify"))));
+}

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

@@ -0,0 +1,88 @@
+"use strict";
+
+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;
+  /* 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;
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+`;
+exports.Block = Block;
+const Caption = _styledComponents.default.div`
+  line-height: 1.43;
+  letter-spacing: 0.4px;
+  font-size: 14px;
+  color: #808080;
+  padding: 15px 15px 0 15px;
+`;
+exports.Caption = Caption;
+
+const EmbeddedCodeEditorBlock = entity => {
+  const {
+    caption,
+    embeddedCode
+  } = entity.getData();
+  const embedded = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!embedded.current) return;
+    const node = embedded.current;
+    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.
+    //
+    // The approach we have here is to parse html string into elements,
+    // 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');
+    const nonScripts = ele.querySelectorAll('div#draft-embed > :not(script)');
+    nonScripts.forEach(ele => {
+      fragment.appendChild(ele);
+    });
+    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);
+    });
+    node.appendChild(fragment);
+  }, [embeddedCode]);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("input", {
+    hidden: true,
+    disabled: true
+  }), /*#__PURE__*/_react.default.createElement(Block, {
+    ref: embedded
+  }), caption ? /*#__PURE__*/_react.default.createElement(Caption, null, caption) : null);
+};
+
+exports.EmbeddedCodeEditorBlock = EmbeddedCodeEditorBlock;

package/lib/website/mirrordaily/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")));
+}

package/lib/website/mirrordaily/block-renderer/info-box-block.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InfoBoxEditorBlock = InfoBoxEditorBlock;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _draftConverter = _interopRequireDefault(require("../../../draft-js/draft-converter"));
+
+var _infoBox = require("../../../draft-js/buttons/info-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 {
+  InfoBoxBlock
+} = _mirrormedia.default.blockRenderers;
+const InfoBoxRenderButton = _styledComponents.default.div`
+  cursor: pointer;
+`;
+
+function InfoBoxEditorBlock(props) {
+  const [toShowInput, setToShowInput] = (0, _react.useState)(false);
+  const {
+    block,
+    blockProps,
+    contentState
+  } = props;
+  const {
+    onEditStart,
+    onEditFinish,
+    renderBasicEditor
+  } = blockProps;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const {
+    title,
+    rawContentState
+  } = entity.getData();
+
+  const onChange = ({
+    title: newTitle,
+    rawContentState: newRawContentState
+  }) => {
+    // close `InfoBoxInput`
+    setToShowInput(false);
+    onEditFinish({
+      entityKey,
+      entityData: {
+        title: newTitle,
+        body: _draftConverter.default.convertToHtml(newRawContentState),
+        rawContentState: newRawContentState
+      }
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_infoBox.InfoBoxInput, {
+    renderBasicEditor: renderBasicEditor,
+    title: title,
+    rawContentStateForInfoBoxEditor: rawContentState,
+    onChange: onChange,
+    onCancel: () => {
+      onEditFinish({});
+      setToShowInput(false);
+    },
+    isOpen: toShowInput
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(InfoBoxBlock, props), /*#__PURE__*/_react.default.createElement(InfoBoxRenderButton, {
+    onClick: () => {
+      // call `onEditStart` prop as we are trying to update the InfoBox entity
+      onEditStart(); // open `InfoBoxInput`
+
+      setToShowInput(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa-solid fa-pen"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Modify"))));
+}