@kids-reporter/draft-editor 0.4.27 → 0.4.29

package/lib/block-renderer-fn.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.atomicBlockRenderer = atomicBlockRenderer;
 var _blockquote = require("./block-renderers/blockquote");
-var _infoBox = require("./block-renderers/info-box");
+var _embeddedCode = require("./block-renderers/embedded-code");
 var _image = require("./block-renderers/image");
+var _infoBox = require("./block-renderers/info-box");
 var _slideshow = require("./block-renderers/slideshow");
 var _draftRenderer = require("@kids-reporter/draft-renderer");
 const {
   Divider,
-  EmbeddedCodeInArticleBody,
   NewsReading
 } = _draftRenderer.blockRenderers;
 const AtomicBlock = props => {
@@ -37,9 +37,7 @@ const AtomicBlock = props => {
       }
     case 'EMBEDDEDCODE':
       {
-        return EmbeddedCodeInArticleBody({
-          data: entityData
-        });
+        return (0, _embeddedCode.EditableEmbeddedCode)(props);
       }
     case 'INFOBOX':
       {

package/lib/block-renderers/embedded-code.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditableEmbeddedCode = EditableEmbeddedCode;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _embeddedCode = require("../buttons/embedded-code");
+var _styled = require("./styled");
+var _fields = require("@keystone-ui/fields");
+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; }
+function EmbeddedCode({
+  className,
+  embeddedCode
+}) {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: className
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Embedded Code:"), /*#__PURE__*/_react.default.createElement(_fields.TextArea, {
+    disabled: true,
+    type: "text",
+    value: embeddedCode
+  }));
+}
+const StyledEmbeddedCode = (0, _styledComponents.default)(EmbeddedCode)`
+  max-width: 700px;
+  margin: 0 auto 30px auto;
+  background-color: #fafbfc;
+`;
+const EditableBlock = (0, _styledComponents.default)(_styled.EditableBlock)`
+  &:hover {
+    ${StyledEmbeddedCode} {
+      background-color: #f0f0f0;
+      opacity: 0.3;
+    }
+`;
+function EditableEmbeddedCode(props) {
+  const [isInputOpen, setIsInputOpen] = (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 onInputChange = inputValue => {
+    // close `EmbeddedCodeInput`
+    setIsInputOpen(false);
+    onEditFinish({
+      entityKey,
+      entityData: inputValue
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_embeddedCode.EmbeddedCodeInput, {
+    isOpen: isInputOpen,
+    onCancel: () => {
+      setIsInputOpen(false);
+      onEditFinish();
+    },
+    onConfirm: onInputChange,
+    inputValue: data
+  }), /*#__PURE__*/_react.default.createElement(EditableBlock, null, /*#__PURE__*/_react.default.createElement(StyledEmbeddedCode, {
+    embeddedCode: data === null || data === void 0 ? void 0 : data.embeddedCode
+  }), /*#__PURE__*/_react.default.createElement(_styled.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/embedded-code.js

@@ -4,49 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EmbeddedCodeButton = EmbeddedCodeButton;
+exports.EmbeddedCodeInput = EmbeddedCodeInput;
 var _react = _interopRequireWildcard(require("react"));
 var _draftJs = require("draft-js");
 var _modals = require("@keystone-ui/modals");
 var _fields = require("@keystone-ui/fields");
 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; }
-function EmbeddedCodeButton(props) {
-  const {
-    editorState,
-    onChange,
-    className
-  } = props;
-  const [toShowInput, setToShowInput] = (0, _react.useState)(false);
-  const [inputValue, setInputValue] = (0, _react.useState)({
-    caption: '',
-    embeddedCode: ''
-  });
-  const promptForInput = () => {
-    setToShowInput(true);
-    setInputValue({
-      caption: '',
-      embeddedCode: ''
-    });
-  };
+function EmbeddedCodeInput({
+  isOpen,
+  onConfirm,
+  onCancel,
+  inputValue
+}) {
+  const [inputValueState, setInputValue] = (0, _react.useState)(inputValue);
   const confirmInput = () => {
-    const contentState = editorState.getCurrentContent();
-    const contentStateWithEntity = contentState.createEntity('EMBEDDEDCODE', 'IMMUTABLE', inputValue);
-    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
-    const newEditorState = _draftJs.EditorState.set(editorState, {
-      currentContent: contentStateWithEntity
-    });
-
-    // The third parameter here is a space string, not an empty string
-    // If you set an empty string, you will get an error: Unknown DraftEntity key: null
-    onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
-    setToShowInput(false);
-    setInputValue({
-      caption: '',
-      embeddedCode: ''
-    });
+    onConfirm(inputValueState);
   };
-  const input = /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
-    isOpen: toShowInput
+  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
+    isOpen: isOpen
   }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
     title: "\u9472\u5D4C\u7A0B\u5F0F\u78BC\uFF08Embedded Code\uFF09"
     //isOpen={toShowInput}
@@ -54,9 +30,7 @@ function EmbeddedCodeButton(props) {
     actions: {
       cancel: {
         label: 'Cancel',
-        action: () => {
-          setToShowInput(false);
-        }
+        action: onCancel
       },
       confirm: {
         label: 'Confirm',
@@ -65,29 +39,64 @@ function EmbeddedCodeButton(props) {
     }
   }, /*#__PURE__*/_react.default.createElement(_fields.TextArea, {
     onChange: e => setInputValue({
-      caption: inputValue.caption,
+      caption: inputValueState.caption,
       embeddedCode: e.target.value
     }),
     placeholder: "Embedded Code",
     type: "text",
-    value: inputValue.embeddedCode,
+    value: inputValueState.embeddedCode,
     style: {
       marginBottom: '30px'
     }
   }), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
     onChange: e => setInputValue({
       caption: e.target.value,
-      embeddedCode: inputValue.embeddedCode
+      embeddedCode: inputValueState.embeddedCode
     }),
     type: "text",
     placeholder: "Caption",
-    value: inputValue.caption,
+    value: inputValueState.caption,
     style: {
       marginBottom: '10px',
       marginTop: '30px'
     }
   })));
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, input, /*#__PURE__*/_react.default.createElement("div", {
+}
+function EmbeddedCodeButton(props) {
+  const {
+    editorState,
+    onChange,
+    className
+  } = props;
+  const [isInputOpen, setIsInputOpen] = (0, _react.useState)(false);
+  const promptForInput = () => {
+    setIsInputOpen(true);
+  };
+  const onInputChange = inputValue => {
+    const contentState = editorState.getCurrentContent();
+    const contentStateWithEntity = contentState.createEntity('EMBEDDEDCODE', 'IMMUTABLE', inputValue);
+    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+    const newEditorState = _draftJs.EditorState.set(editorState, {
+      currentContent: contentStateWithEntity
+    });
+
+    // The third parameter here is a space string, not an empty string
+    // If you set an empty string, you will get an error: Unknown DraftEntity key: null
+    onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
+    setIsInputOpen(false);
+  };
+  const onInputCancel = () => {
+    setIsInputOpen(false);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isInputOpen && /*#__PURE__*/_react.default.createElement(EmbeddedCodeInput, {
+    isOpen: isInputOpen,
+    onConfirm: onInputChange,
+    onCancel: onInputCancel,
+    inputValue: {
+      caption: '',
+      embeddedCode: ''
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
     onClick: () => {
       promptForInput();
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-editor",
-  "version": "0.4.27",
+  "version": "0.4.29",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -23,7 +23,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@kids-reporter/draft-renderer": "^0.4.27",
+    "@kids-reporter/draft-renderer": "^0.4.29",
     "@twreporter/errors": "^1.1.2",
     "draft-js": "^0.11.7"
   },

package/lib/block-renderers/embed-code.js

@@ -1 +0,0 @@
-"use strict";