@mirrormedia/lilith-draft-editor 1.1.0-alpha.19 → 1.1.0-alpha.20

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/selector/image-selector.js

@@ -240,6 +240,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 +263,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 +281,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/website/mirrormedia/block-renderer/image-block.js

@@ -0,0 +1,103 @@
+"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 StyledImageBlock = (0, _styledComponents.default)(ImageBlock)``;
+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(StyledImageBlock, 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/mirrormedia/block-renderer-fn.js

@@ -21,13 +21,14 @@ var _embeddedCodeBlock = require("./block-renderer/embedded-code-block");
 
 var _slideshowBlock = require("./block-renderer/slideshow-block");
 
+var _imageBlock = require("./block-renderer/image-block");
+
 var _mirrormedia = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/mirrormedia"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const {
   MediaBlock,
-  ImageBlock,
   DividerBlock,
   RelatedPostBlock,
   VideoBlock,
@@ -49,7 +50,7 @@ const AtomicBlock = props => {
 
     case 'image':
       {
-        return ImageBlock(entity);
+        return (0, _imageBlock.ImageEditorBlock)(props);
       }
 
     case 'slideshow':

package/lib/website/mirrormedia/selector/image-selector.js

@@ -250,6 +250,16 @@ function DelayInput(props) {
 }
 
 function ImageSelector(props) {
+  const {
+    enableMultiSelect = false,
+    enableCaption = false,
+    enableUrl = false,
+    enableAlignment = false,
+    enableDelay = false,
+    onChange,
+    initialSelected = [],
+    initialAlign
+  } = props;
   const [queryImages, {
     loading,
     error,
@@ -263,9 +273,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 = [{
@@ -281,14 +291,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/website/readr/block-renderer/image-block.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageEditorBlock = ImageEditorBlock;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _readr = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/readr"));
+
+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
+} = _readr.default.blockRenderers;
+const StyledImageBlock = (0, _styledComponents.default)(ImageBlock)``;
+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,
+    desc,
+    url,
+    alignment
+  } = entity.getData();
+  const imageWithMeta = {
+    image: {
+      id,
+      name,
+      imageFile,
+      resized
+    },
+    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(StyledImageBlock, 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/readr/block-renderer-fn.js

@@ -17,6 +17,8 @@ var _backgroundVideoBlock = require("./block-renderer/background-video-block");
 
 var _sideIndexBlock = require("./block-renderer/side-index-block");
 
+var _imageBlock = require("./block-renderer/image-block");
+
 var _readr = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/readr"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -24,7 +26,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const {
   EmbeddedCodeBlock,
   MediaBlock,
-  ImageBlock,
   SlideshowBlock,
   SlideshowBlockV2,
   DividerBlock,
@@ -47,7 +48,7 @@ const AtomicBlock = props => {
 
     case 'image':
       {
-        return ImageBlock(entity);
+        return (0, _imageBlock.ImageEditorBlock)(props);
       }
 
     case 'slideshow':

package/lib/website/readr/selector/image-selector.js

@@ -242,6 +242,16 @@ function DelayInput(props) {
 }
 
 function ImageSelector(props) {
+  const {
+    enableMultiSelect = false,
+    enableCaption = false,
+    enableUrl = false,
+    enableAlignment = false,
+    enableDelay = false,
+    onChange,
+    initialSelected = [],
+    initialAlign
+  } = props;
   const [queryImages, {
     loading,
     error,
@@ -255,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 = [{
@@ -273,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirrormedia/lilith-draft-editor",
-  "version": "1.1.0-alpha.19",
+  "version": "1.1.0-alpha.20",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -23,7 +23,7 @@
   "license": "MIT",
   "dependencies": {
     "draft-js": "^0.11.7",
-    "@mirrormedia/lilith-draft-renderer": "1.3.0-alpha.2"
+    "@mirrormedia/lilith-draft-renderer": "1.3.0-alpha.3"
   },
   "peerDependencies": {
     "react": "18.2.0",