@kids-reporter/draft-editor 0.4.4 → 0.4.6

package/lib/block-renderer-fn.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.atomicBlockRenderer = atomicBlockRenderer;
 var _blockquote = require("./block-renderers/blockquote");
+var _infoBox = require("./block-renderers/info-box");
 var _draftRenderer = require("@kids-reporter/draft-renderer");
 const {
   EmbeddedCodeInArticleBody,
   ImageInArticleBody,
-  InfoBoxInArticleBody,
   SlideshowInArticleBody
 } = _draftRenderer.blockRenderers;
 const AtomicBlock = props => {
@@ -41,9 +41,7 @@ const AtomicBlock = props => {
       }
     case 'INFOBOX':
       {
-        return InfoBoxInArticleBody({
-          data: entityData
-        });
+        return (0, _infoBox.EditableInfoBox)(props);
       }
   }
   return null;

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

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditableInfoBox = EditableInfoBox;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _infoBox = require("../buttons/info-box");
+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 {
+  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;
+
+  &:hover {
+    ${StyledInfoBox} {
+      background-color: #f0f0f0;
+      opacity: 0.3;
+    }
+
+    ${EditButton} {
+      opacity: 1;
+      display: block;
+    }
+  }
+`;
+function EditableInfoBox(props) {
+  const [isInputOpen, setIsInputOpen] = (0, _react.useState)(false);
+  const {
+    block,
+    blockProps,
+    contentState
+  } = props;
+  const {
+    onEditStart,
+    onEditFinish,
+    RichTextEditorComponent: Editor,
+    decorator
+  } = blockProps;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const data = entity.getData();
+  const onInputChange = inputValue => {
+    // close `BlockquoteInput`
+    setIsInputOpen(false);
+    onEditFinish({
+      entityKey,
+      entityData: inputValue
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_infoBox.InfoBoxInput, {
+    isOpen: isInputOpen,
+    onCancel: () => {
+      setIsInputOpen(false);
+      onEditFinish();
+    },
+    onConfirm: onInputChange,
+    inputValue: data,
+    Editor: Editor,
+    decorator: decorator
+  }), /*#__PURE__*/_react.default.createElement(EditableBlock, null, /*#__PURE__*/_react.default.createElement(StyledInfoBox, {
+    data: data
+  }), /*#__PURE__*/_react.default.createElement(EditButton, {
+    onClick: () => {
+      // call `onEditStart` prop as we are trying to update the blockquote entity
+      onEditStart();
+      // open `BlockquoteInput`
+      setIsInputOpen(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa-solid fa-pen"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Modify"))));
+}

package/lib/buttons/info-box.js

@@ -29,7 +29,7 @@ var InfoBoxLabelEnum = /*#__PURE__*/function (InfoBoxLabelEnum) {
 function InfoBoxInput(props) {
   const {
     isOpen,
-    onChange,
+    onConfirm,
     onCancel,
     Editor,
     decorator,
@@ -54,7 +54,7 @@ function InfoBoxInput(props) {
       confirm: {
         label: 'Confirm',
         action: () => {
-          onChange({
+          onConfirm({
             type: inputValueState.type,
             rawContentState: (0, _draftJs.convertToRaw)(inputValueState.editorState.getCurrentContent())
           });
@@ -126,7 +126,7 @@ function createInfoBoxButton({
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowInput && /*#__PURE__*/_react.default.createElement(InfoBoxInput, {
       Editor: InnerEditor,
       decorator: decorator,
-      onChange: onChange,
+      onConfirm: onChange,
       onCancel: () => {
         setToShowInput(false);
       },

package/lib/draft-editor.js

@@ -308,6 +308,8 @@ class RichTextEditor extends _react.default.Component {
       atomicBlockObj['props'] = {
         onEditStart,
         onEditFinish,
+        RichTextEditorComponent: RichTextEditor,
+        decorator: _draftRenderer.decorator,
         getMainEditorReadOnly: () => this.state.readOnly
       };
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-editor",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -23,7 +23,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@kids-reporter/draft-renderer": "^0.4.2",
+    "@kids-reporter/draft-renderer": "^0.4.3",
     "draft-js": "^0.11.7"
   },
   "peerDependencies": {