@kids-reporter/draft-editor 0.4.12 → 0.4.13

package/lib/block-renderer-fn.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.atomicBlockRenderer = atomicBlockRenderer;
 var _blockquote = require("./block-renderers/blockquote");
 var _infoBox = require("./block-renderers/info-box");
+var _image = require("./block-renderers/image");
+var _slideshow = require("./block-renderers/slideshow");
 var _draftRenderer = require("@kids-reporter/draft-renderer");
 const {
   EmbeddedCodeInArticleBody,
-  ImageInArticleBody,
-  SlideshowInArticleBody,
   NewsReading
 } = _draftRenderer.blockRenderers;
 const AtomicBlock = props => {
@@ -24,15 +24,11 @@ const AtomicBlock = props => {
       }
     case 'IMAGE':
       {
-        return ImageInArticleBody({
-          data: entityData
-        });
+        return (0, _image.EditableImage)(props);
       }
     case 'SLIDESHOW':
       {
-        return SlideshowInArticleBody({
-          data: entityData
-        });
+        return (0, _slideshow.EditableSlideshow)(props);
       }
     case 'EMBEDDEDCODE':
       {

package/lib/block-renderers/blockquote.js

@@ -7,6 +7,7 @@ exports.EditableBlockquote = EditableBlockquote;
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _blockquote = require("../buttons/blockquote");
+var _styled = require("./styled");
 var _draftRenderer = require("@kids-reporter/draft-renderer");
 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); }
@@ -15,28 +16,12 @@ const {
   BlockquoteInArticleBody
 } = _draftRenderer.blockRenderers;
 const StyledBlockquote = (0, _styledComponents.default)(BlockquoteInArticleBody)``;
-const EditButton = _styledComponents.default.div`
-  cursor: pointer;
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-`;
-const EditableBlock = _styledComponents.default.div`
-  position: relative;
-
+const EditableBlock = (0, _styledComponents.default)(_styled.EditableBlock)`
   &:hover {
     ${StyledBlockquote} {
       background-color: #f0f0f0;
       opacity: 0.3;
     }
-
-    ${EditButton} {
-      opacity: 1;
-      display: block;
-    }
-  }
 `;
 function EditableBlockquote(props) {
   const [isInputOpen, setIsInputOpen] = (0, _react.useState)(false);
@@ -70,7 +55,7 @@ function EditableBlockquote(props) {
     inputValue: data
   }), /*#__PURE__*/_react.default.createElement(EditableBlock, null, /*#__PURE__*/_react.default.createElement(StyledBlockquote, {
     data: data
-  }), /*#__PURE__*/_react.default.createElement(EditButton, {
+  }), /*#__PURE__*/_react.default.createElement(_styled.EditButton, {
     onClick: () => {
       // call `onEditStart` prop as we are trying to update the blockquote entity
       onEditStart();

package/lib/block-renderers/image.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditableImage = EditableImage;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _imageSelector = require("../buttons/selector/image-selector");
+var _styled = require("./styled");
+var _draftRenderer = require("@kids-reporter/draft-renderer");
+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 {
+  ImageInArticleBody
+} = _draftRenderer.blockRenderers;
+const StyledImage = (0, _styledComponents.default)(ImageInArticleBody)``;
+const EditableBlock = (0, _styledComponents.default)(_styled.EditableBlock)`
+  &:hover {
+    ${StyledImage} {
+      background-color: #f0f0f0;
+      opacity: 0.3;
+    }
+`;
+function EditableImage(props) {
+  const [isSelectorOpen, setIsSelectorOpen] = (0, _react.useState)(false);
+  const {
+    block,
+    blockProps,
+    contentState
+  } = props;
+  const {
+    onEditStart,
+    onEditFinish
+  } = blockProps;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const data = entity.getData() || {};
+  const {
+    alignment: _alignment,
+    ...imageWithMeta
+  } = data; // eslint-disable-line
+
+  const onChange = (selectedImages, alignment) => {
+    // close `ImageSelector`
+    setIsSelectorOpen(false);
+    if ((selectedImages === null || selectedImages === void 0 ? void 0 : selectedImages.length) === 0) {
+      onEditFinish();
+      return;
+    }
+    const selectedImage = selectedImages === null || selectedImages === void 0 ? void 0 : selectedImages[0];
+    onEditFinish({
+      entityKey,
+      entityData: Object.assign({
+        alignment: alignment
+      }, selectedImage)
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isSelectorOpen && /*#__PURE__*/_react.default.createElement(_imageSelector.ImageSelector, {
+    onChange: onChange,
+    enableCaption: true,
+    enableUrl: false,
+    enableAlignment: true,
+    alignment: data.alignment,
+    selected: [imageWithMeta]
+  }), /*#__PURE__*/_react.default.createElement(EditableBlock, null, /*#__PURE__*/_react.default.createElement(StyledImage, {
+    data: data
+  }), /*#__PURE__*/_react.default.createElement(_styled.EditButton, {
+    onClick: () => {
+      // call `onEditStart` prop as we are trying to update the blockquote entity
+      onEditStart();
+      // open `BlockquoteInput`
+      setIsSelectorOpen(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa-solid fa-pen"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Modify"))));
+}

package/lib/block-renderers/info-box.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.EditableInfoBox = EditableInfoBox;
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = require("./styled");
 var _infoBox = require("../buttons/info-box");
 var _draftRenderer = require("@kids-reporter/draft-renderer");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -15,28 +16,12 @@ const {
   InfoBoxInArticleBody
 } = _draftRenderer.blockRenderers;
 const StyledInfoBox = (0, _styledComponents.default)(InfoBoxInArticleBody)``;
-const EditButton = _styledComponents.default.div`
-  cursor: pointer;
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-`;
-const EditableBlock = _styledComponents.default.div`
-  position: relative;
-
+const EditableBlock = (0, _styledComponents.default)(_styled.EditableBlock)`
   &:hover {
     ${StyledInfoBox} {
       background-color: #f0f0f0;
       opacity: 0.3;
     }
-
-    ${EditButton} {
-      opacity: 1;
-      display: block;
-    }
-  }
 `;
 function EditableInfoBox(props) {
   const [isInputOpen, setIsInputOpen] = (0, _react.useState)(false);
@@ -74,7 +59,7 @@ function EditableInfoBox(props) {
     decorator: decorator
   }), /*#__PURE__*/_react.default.createElement(EditableBlock, null, /*#__PURE__*/_react.default.createElement(StyledInfoBox, {
     data: data
-  }), /*#__PURE__*/_react.default.createElement(EditButton, {
+  }), /*#__PURE__*/_react.default.createElement(_styled.EditButton, {
     onClick: () => {
       // call `onEditStart` prop as we are trying to update the blockquote entity
       onEditStart();

package/lib/block-renderers/slideshow.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditableSlideshow = EditableSlideshow;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _imageSelector = require("../buttons/selector/image-selector");
+var _styled = require("./styled");
+var _draftRenderer = require("@kids-reporter/draft-renderer");
+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 {
+  SlideshowInArticleBody
+} = _draftRenderer.blockRenderers;
+const StyledSlideshow = (0, _styledComponents.default)(SlideshowInArticleBody)``;
+const EditableBlock = (0, _styledComponents.default)(_styled.EditableBlock)`
+  &:hover {
+    ${StyledSlideshow} {
+      background-color: #f0f0f0;
+      opacity: 0.3;
+    }
+`;
+function EditableSlideshow(props) {
+  const [isSelectorOpen, setIsSelectorOpen] = (0, _react.useState)(false);
+  const {
+    block,
+    blockProps,
+    contentState
+  } = props;
+  const {
+    onEditStart,
+    onEditFinish
+  } = blockProps;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const data = entity.getData() || {};
+  const onChange = (selectedImages, alignment) => {
+    // close `ImageSelector`
+    setIsSelectorOpen(false);
+    if ((selectedImages === null || selectedImages === void 0 ? void 0 : selectedImages.length) === 0) {
+      onEditFinish();
+      return;
+    }
+    onEditFinish({
+      entityKey,
+      entityData: {
+        alignment: alignment,
+        images: selectedImages
+      }
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isSelectorOpen && /*#__PURE__*/_react.default.createElement(_imageSelector.ImageSelector, {
+    onChange: onChange,
+    enableCaption: true,
+    enableUrl: false,
+    enableAlignment: false,
+    enableMultiSelect: true,
+    alignment: data.alignment,
+    selected: data.images
+  }), /*#__PURE__*/_react.default.createElement(EditableBlock, null, /*#__PURE__*/_react.default.createElement(StyledSlideshow, {
+    data: data
+  }), /*#__PURE__*/_react.default.createElement(_styled.EditButton, {
+    onClick: () => {
+      // call `onEditStart` prop as we are trying to update the blockquote entity
+      onEditStart();
+      // open `BlockquoteInput`
+      setIsSelectorOpen(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa-solid fa-pen"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Modify"))));
+}

package/lib/block-renderers/styled.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditableBlock = exports.EditButton = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const EditButton = _styledComponents.default.div`
+  cursor: pointer;
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+exports.EditButton = EditButton;
+const EditableBlock = _styledComponents.default.div`
+  position: relative;
+
+  &:hover {
+    ${EditButton} {
+      opacity: 1;
+      display: block;
+    }
+  }
+`;
+exports.EditableBlock = EditableBlock;

package/lib/buttons/annotation.js

@@ -11,7 +11,7 @@ var _modals = require("@keystone-ui/modals");
 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 disabledButtons = [_btNames.default.h2, _btNames.default.h3, _btNames.default.code, _btNames.default.codeBlock, _btNames.default.blockquote, _btNames.default.annotation, _btNames.default.embed, _btNames.default.image, _btNames.default.infoBox, _btNames.default.slideshow];
+const disabledButtons = [_btNames.default.h2, _btNames.default.h3, _btNames.default.code, _btNames.default.codeBlock, _btNames.default.blockquote, _btNames.default.annotation, _btNames.default.embed, _btNames.default.image, _btNames.default.infoBox, _btNames.default.slideshow, _btNames.default.newsReading];
 function createAnnotationButton({
   InnerEditor,
   decorator

package/lib/buttons/image.js

@@ -20,18 +20,16 @@ function ImageButton(props) {
   const promptForImageSelector = () => {
     setToShowImageSelector(true);
   };
-  const onImageSelectorChange = (selectedImagesWithMeta, align) => {
-    const selected = selectedImagesWithMeta === null || selectedImagesWithMeta === void 0 ? void 0 : selectedImagesWithMeta[0];
+  const onImageSelectorChange = (selectedImages, alignment) => {
+    const selected = selectedImages === null || selectedImages === void 0 ? void 0 : selectedImages[0];
     if (!selected) {
       setToShowImageSelector(false);
       return;
     }
     const contentState = editorState.getCurrentContent();
-    const contentStateWithEntity = contentState.createEntity('IMAGE', 'IMMUTABLE', {
-      ...(selected === null || selected === void 0 ? void 0 : selected.image),
-      desc: selected === null || selected === void 0 ? void 0 : selected.desc,
-      alignment: align
-    });
+    const contentStateWithEntity = contentState.createEntity('IMAGE', 'IMMUTABLE', Object.assign({
+      alignment
+    }, selected));
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
     const newEditorState = _draftJs.EditorState.set(editorState, {
       currentContent: contentStateWithEntity

package/lib/buttons/info-box.js

@@ -13,7 +13,7 @@ var _select = require("./form/select");
 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 disabledButtons = [_btNames.default.h2, _btNames.default.h3, _btNames.default.code, _btNames.default.codeBlock, _btNames.default.blockquote, _btNames.default.annotation, _btNames.default.embed, _btNames.default.infoBox, _btNames.default.slideshow];
+const disabledButtons = [_btNames.default.h2, _btNames.default.h3, _btNames.default.code, _btNames.default.codeBlock, _btNames.default.blockquote, _btNames.default.annotation, _btNames.default.embed, _btNames.default.infoBox, _btNames.default.slideshow, _btNames.default.newsReading];
 var InfoBoxTypeEnum = /*#__PURE__*/function (InfoBoxTypeEnum) {
   InfoBoxTypeEnum["newsChargeStation"] = "news-charge-station";
   InfoBoxTypeEnum["headerBorder"] = "header-border";