@kids-reporter/draft-editor 1.0.6 → 1.0.8

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

@@ -32,9 +32,7 @@ function EditableInfoBox(props) {
   } = props;
   const {
     onEditStart,
-    onEditFinish,
-    RichTextEditorComponent: Editor,
-    decorator
+    onEditFinish
   } = blockProps;
   const entityKey = block.getEntityAt(0);
   const entity = contentState.getEntity(entityKey);
@@ -54,9 +52,7 @@ function EditableInfoBox(props) {
       onEditFinish();
     },
     onConfirm: onInputChange,
-    inputValue: data,
-    Editor: Editor,
-    decorator: decorator
+    inputValue: data
   }), /*#__PURE__*/_react.default.createElement(EditableBlock, {
     component: /*#__PURE__*/_react.default.createElement(StyledInfoBox, {
       data: data

package/lib/buttons/annotation.js

@@ -3,95 +3,61 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createAnnotationButton = createAnnotationButton;
+exports.AnnotationButton = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _btNames = _interopRequireDefault(require("./bt-names"));
 var _draftJs = require("draft-js");
-var _modals = require("@keystone-ui/modals");
 var _draftRenderer = require("@kids-reporter/draft-renderer");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _annotation = require("../entity-decorators/annotation");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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, _btNames.default.tocAnchor, _btNames.default.anchor];
-function createAnnotationButton({
-  InnerEditor,
-  decorator
-}) {
-  return function AnnotationButton(props) {
-    const toggleEntity = _draftJs.RichUtils.toggleLink;
-    const {
-      isActive,
-      editorState: editorStateOfOuterEditor,
-      onChange
-    } = props;
-    const [toShowInput, setToShowInput] = (0, _react.useState)(false);
-    const [inputValue, setInputValue] = (0, _react.useState)({
-      editorStateOfInnerEditor: _draftJs.EditorState.createEmpty(decorator)
+const AnnotationButton = props => {
+  const toggleEntity = _draftJs.RichUtils.toggleLink;
+  const {
+    isActive,
+    editorState: editorStateOfOuterEditor,
+    onChange
+  } = props;
+  const [toShowInput, setToShowInput] = (0, _react.useState)(false);
+  const promptForAnnotation = e => {
+    e.preventDefault();
+    const selection = editorStateOfOuterEditor.getSelection();
+    if (!selection.isCollapsed()) {
+      props.onEditStart();
+      setToShowInput(true);
+    }
+  };
+  const confirmAnnotation = editorState => {
+    const contentState = editorStateOfOuterEditor.getCurrentContent();
+    const rawContentState = (0, _draftJs.convertToRaw)(editorState.getCurrentContent());
+    const contentStateWithEntity = contentState.createEntity(_draftRenderer.ENTITY.Annotation, 'MUTABLE', {
+      rawContentState
+    });
+    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+    const newEditorState = _draftJs.EditorState.set(editorStateOfOuterEditor, {
+      currentContent: contentStateWithEntity
     });
-    const promptForAnnotation = e => {
-      e.preventDefault();
-      const selection = editorStateOfOuterEditor.getSelection();
-      if (!selection.isCollapsed()) {
-        props.onEditStart();
-        setToShowInput(true);
-      }
-    };
-    const confirmAnnotation = () => {
-      const contentState = editorStateOfOuterEditor.getCurrentContent();
-      const rawContentState = (0, _draftJs.convertToRaw)(inputValue.editorStateOfInnerEditor.getCurrentContent());
-      const contentStateWithEntity = contentState.createEntity(_draftRenderer.ENTITY.Annotation, 'MUTABLE', {
-        rawContentState
-      });
-      const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
-      const newEditorState = _draftJs.EditorState.set(editorStateOfOuterEditor, {
-        currentContent: contentStateWithEntity
-      });
-      onChange(toggleEntity(newEditorState, newEditorState.getSelection(), entityKey));
-      setToShowInput(false);
-      setInputValue({
-        editorStateOfInnerEditor: _draftJs.EditorState.createEmpty(decorator)
-      });
-      props.onEditFinish();
-    };
-    const removeAnnotation = () => {
-      const selection = editorStateOfOuterEditor.getSelection();
-      if (!selection.isCollapsed()) {
-        onChange(toggleEntity(editorStateOfOuterEditor, selection, null));
-      }
-      setToShowInput(false);
-      setInputValue({
-        editorStateOfInnerEditor: _draftJs.EditorState.createEmpty(decorator)
-      });
-      props.onEditFinish();
-    };
-    const input = /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
-      isOpen: toShowInput
-    }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
-      title: "\u8A3B\u89E3",
-      actions: {
-        cancel: {
-          label: 'Cancel',
-          action: removeAnnotation
-        },
-        confirm: {
-          label: 'Confirm',
-          action: confirmAnnotation
-        }
-      }
-    }, /*#__PURE__*/_react.default.createElement(InnerEditor, {
-      disabledButtons: disabledButtons,
-      editorState: inputValue.editorStateOfInnerEditor,
-      onChange: editorState => {
-        setInputValue({
-          editorStateOfInnerEditor: editorState
-        });
-      }
-    })));
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, input, /*#__PURE__*/_react.default.createElement("div", {
-      className: props.className,
-      onMouseDown: isActive ? removeAnnotation : promptForAnnotation
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "far"
-    }), /*#__PURE__*/_react.default.createElement("span", null, "Annotation")));
+    onChange(toggleEntity(newEditorState, newEditorState.getSelection(), entityKey));
+    setToShowInput(false);
+    props.onEditFinish();
+  };
+  const removeAnnotation = () => {
+    const selection = editorStateOfOuterEditor.getSelection();
+    if (!selection.isCollapsed()) {
+      onChange(toggleEntity(editorStateOfOuterEditor, selection, null));
+    }
+    setToShowInput(false);
+    props.onEditFinish();
   };
-}
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowInput && /*#__PURE__*/_react.default.createElement(_annotation.AnnotationEditor, {
+    isOpen: toShowInput,
+    editorStateValue: _draftJs.EditorState.createEmpty(),
+    onConfirm: confirmAnnotation,
+    onCancel: removeAnnotation
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: props.className,
+    onMouseDown: isActive ? removeAnnotation : promptForAnnotation
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "far"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Annotation")));
+};
+exports.AnnotationButton = AnnotationButton;

package/lib/buttons/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withStyle = exports.InlineStyleControls = exports.CustomTOCAnchorButton = exports.CustomSlideshowButton = exports.CustomNewsReadingButton = exports.CustomLinkButton = exports.CustomImageButton = exports.CustomFontColorButton = exports.CustomEnlargeButton = exports.CustomEmbeddedCodeButton = exports.CustomDividerButton = exports.CustomBlockquoteButton = exports.CustomBackgroundColorButton = exports.CustomAnchorButton = exports.BlockStyleControls = void 0;
+exports.withStyle = exports.InlineStyleControls = exports.CustomTOCAnchorButton = exports.CustomSlideshowButton = exports.CustomNewsReadingButton = exports.CustomLinkButton = exports.CustomInfoBoxButton = exports.CustomImageButton = exports.CustomFontColorButton = exports.CustomEnlargeButton = exports.CustomEmbeddedCodeButton = exports.CustomDividerButton = exports.CustomBlockquoteButton = exports.CustomBackgroundColorButton = exports.CustomAnnotationButton = exports.CustomAnchorButton = exports.BlockStyleControls = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _controlButtons = require("./control-buttons");
 var _bgColor = require("./bg-color");
@@ -16,8 +16,10 @@ var _image = require("./image");
 var _tocAnchor = require("./toc-anchor");
 var _anchor = require("./anchor");
 var _link = require("./link");
+var _annotation = require("./annotation");
 var _slideshow = require("./slideshow");
 var _newsReading = require("./news-reading");
+var _infoBox = require("./info-box");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const withStyle = Button => {
   return (0, _styledComponents.default)(Button)`
@@ -31,6 +33,7 @@ const CustomBlockquoteButton = exports.CustomBlockquoteButton = withStyle(_block
 const CustomTOCAnchorButton = exports.CustomTOCAnchorButton = withStyle(_tocAnchor.TOCAnchorButton);
 const CustomAnchorButton = exports.CustomAnchorButton = withStyle(_anchor.AnchorButton);
 const CustomLinkButton = exports.CustomLinkButton = withStyle(_link.LinkButton);
+const CustomAnnotationButton = exports.CustomAnnotationButton = withStyle(_annotation.AnnotationButton);
 const CustomEnlargeButton = exports.CustomEnlargeButton = (0, _styledComponents.default)(withStyle(_enlarge.EnlargeButton))`
   color: #999;
 `;
@@ -40,4 +43,5 @@ const CustomEmbeddedCodeButton = exports.CustomEmbeddedCodeButton = withStyle(_e
 const CustomNewsReadingButton = exports.CustomNewsReadingButton = withStyle(_newsReading.NewsReadingButton);
 const CustomBackgroundColorButton = exports.CustomBackgroundColorButton = withStyle(_bgColor.BackgroundColorButton);
 const CustomFontColorButton = exports.CustomFontColorButton = withStyle(_fontColor.FontColorButton);
-const CustomDividerButton = exports.CustomDividerButton = withStyle(_divider.DividerButton);
+const CustomDividerButton = exports.CustomDividerButton = withStyle(_divider.DividerButton);
+const CustomInfoBoxButton = exports.CustomInfoBoxButton = withStyle(_infoBox.InfoBoxButton);

package/lib/buttons/info-box.js

@@ -3,13 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.InfoBoxButton = void 0;
 exports.InfoBoxInput = InfoBoxInput;
-exports.createInfoBoxButton = createInfoBoxButton;
 var _react = _interopRequireWildcard(require("react"));
 var _btNames = _interopRequireDefault(require("./bt-names"));
 var _draftJs = require("draft-js");
 var _modals = require("@keystone-ui/modals");
+var _richTextEditor = require("../rich-text-editor");
 var _select = require("./form/select");
+var _annotation = require("../entity-decorators/annotation");
+var _link = require("../entity-decorators/link");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -31,14 +34,12 @@ function InfoBoxInput(props) {
     isOpen,
     onConfirm,
     onCancel,
-    Editor,
-    decorator,
     inputValue
   } = props;
   const contentState = (0, _draftJs.convertFromRaw)(inputValue.rawContentState);
   const [inputValueState, setInputValueState] = (0, _react.useState)({
     type: inputValue.type,
-    editorState: _draftJs.EditorState.createWithContent(contentState, decorator)
+    editorState: _draftJs.EditorState.createWithContent(contentState)
   });
   return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
     isOpen: isOpen
@@ -80,7 +81,8 @@ function InfoBoxInput(props) {
         editorState: inputValueState.editorState
       });
     }
-  }), /*#__PURE__*/_react.default.createElement(Editor, {
+  }), /*#__PURE__*/_react.default.createElement(_richTextEditor.RichTextEditor, {
+    decorators: [_annotation.editableAnnotationDecorator, _link.editableLinkDecorator],
     disabledButtons: disabledButtons,
     editorState: inputValueState.editorState,
     onChange: editorState => {
@@ -91,60 +93,54 @@ function InfoBoxInput(props) {
     }
   })));
 }
-function createInfoBoxButton({
-  InnerEditor,
-  decorator
-}) {
-  return function InfoBoxButton(props) {
-    const [toShowInput, setToShowInput] = (0, _react.useState)(false);
-    const {
-      className,
-      editorState,
-      onChange: onEditorStateChange
-    } = props;
-    const onChange = ({
+const InfoBoxButton = props => {
+  const [toShowInput, setToShowInput] = (0, _react.useState)(false);
+  const {
+    className,
+    editorState,
+    onChange: onEditorStateChange
+  } = props;
+  const onChange = ({
+    type,
+    rawContentState
+  }) => {
+    const contentState = editorState.getCurrentContent();
+
+    // create an InfoBox entity
+    const contentStateWithEntity = contentState.createEntity('INFOBOX', 'IMMUTABLE', {
       type,
       rawContentState
-    }) => {
-      const contentState = editorState.getCurrentContent();
+    });
+    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+    const newEditorState = _draftJs.EditorState.set(editorState, {
+      currentContent: contentStateWithEntity
+    });
 
-      // create an InfoBox entity
-      const contentStateWithEntity = contentState.createEntity('INFOBOX', 'IMMUTABLE', {
-        type,
-        rawContentState
-      });
-      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
-      onEditorStateChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
+    //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
+    onEditorStateChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
+    setToShowInput(false);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowInput && /*#__PURE__*/_react.default.createElement(InfoBoxInput, {
+    onConfirm: onChange,
+    onCancel: () => {
       setToShowInput(false);
-    };
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowInput && /*#__PURE__*/_react.default.createElement(InfoBoxInput, {
-      Editor: InnerEditor,
-      decorator: decorator,
-      onConfirm: onChange,
-      onCancel: () => {
-        setToShowInput(false);
-      },
-      isOpen: toShowInput,
-      inputValue: {
-        type: InfoBoxTypeEnum.newsChargeStation,
-        rawContentState: {
-          blocks: [],
-          entityMap: {}
-        }
-      }
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: className,
-      onClick: () => {
-        setToShowInput(true);
+    },
+    isOpen: toShowInput,
+    inputValue: {
+      type: InfoBoxTypeEnum.newsChargeStation,
+      rawContentState: {
+        blocks: [],
+        entityMap: {}
       }
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "far"
-    }), /*#__PURE__*/_react.default.createElement("span", null, "InfoBox")));
-  };
-}
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: className,
+    onClick: () => {
+      setToShowInput(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "far"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "InfoBox")));
+};
+exports.InfoBoxButton = InfoBoxButton;

package/lib/buttons/link.js

@@ -5,19 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.LinkButton = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _modals = require("@keystone-ui/modals");
 var _draftJs = require("draft-js");
-var _fields = require("@keystone-ui/fields");
 var _draftRenderer = require("@kids-reporter/draft-renderer");
+var _link = require("../entity-decorators/link");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const styles = {
-  urlInput: {
-    fontFamily: "'Georgia', serif",
-    marginRight: 10,
-    padding: 10
-  }
-};
 const LinkButton = props => {
   const {
     isActive,
@@ -25,7 +17,6 @@ const LinkButton = props => {
     onChange
   } = props;
   const [toShowUrlInput, setToShowUrlInput] = (0, _react.useState)(false);
-  const [urlValue, setUrlValue] = (0, _react.useState)('');
   const promptForLink = e => {
     e.preventDefault();
     const selection = editorState.getSelection();
@@ -34,7 +25,7 @@ const LinkButton = props => {
       setToShowUrlInput(true);
     }
   };
-  const confirmLink = () => {
+  const confirmLink = urlValue => {
     const contentState = editorState.getCurrentContent();
     const contentStateWithEntity = contentState.createEntity(_draftRenderer.ENTITY.Link, 'MUTABLE', {
       url: urlValue
@@ -45,45 +36,22 @@ const LinkButton = props => {
     });
     onChange(_draftJs.RichUtils.toggleLink(newEditorState, newEditorState.getSelection(), entityKey));
     setToShowUrlInput(false);
-    setUrlValue('');
     props.onEditFinish();
   };
-  const onLinkInputKeyDown = e => {
-    if (e.which === 13) {
-      e.preventDefault();
-      confirmLink();
-    }
-  };
   const removeLink = () => {
     const selection = editorState.getSelection();
     if (!selection.isCollapsed()) {
       onChange(_draftJs.RichUtils.toggleLink(editorState, selection, null));
     }
     setToShowUrlInput(false);
-    setUrlValue('');
     props.onEditFinish();
   };
-  const urlInput = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
-    title: "\u7DE8\u8F2F\u5916\u90E8\u9023\u7D50\u6216\u5167\u90E8\u9328\u9EDE(ID)",
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowUrlInput && /*#__PURE__*/_react.default.createElement(_link.LinkEditor, {
     isOpen: toShowUrlInput,
-    actions: {
-      cancel: {
-        label: 'Cancel',
-        action: removeLink
-      },
-      confirm: {
-        label: 'Confirm',
-        action: confirmLink
-      }
-    }
-  }, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("br", null), "\u5916\u90E8\u9023\u7D50\u7BC4\u4F8B:", /*#__PURE__*/_react.default.createElement("br", null), "https://kids.twreporter.org/article/article1#part1", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "\u5167\u90E8\u9328\u9EDE\u7BC4\u4F8B:", /*#__PURE__*/_react.default.createElement("br", null), "#part1"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
-    onChange: e => setUrlValue(e.target.value),
-    style: styles.urlInput,
-    type: "text",
-    value: urlValue,
-    onKeyDown: onLinkInputKeyDown
-  }));
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, urlInput, /*#__PURE__*/_react.default.createElement("div", {
+    urlValue: '',
+    onConfirm: confirmLink,
+    onCancel: removeLink
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: props.className,
     onMouseDown: isActive ? removeLink : promptForLink
   }, /*#__PURE__*/_react.default.createElement("i", {

package/lib/entity-decorators/annotation.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.editableAnnotationDecorator = exports.AnnotationEditor = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _draftJs = require("draft-js");
+var _modals = require("@keystone-ui/modals");
+var _draftRenderer = require("@kids-reporter/draft-renderer");
+var _btNames = _interopRequireDefault(require("../buttons/bt-names"));
+var _richTextEditor = require("../rich-text-editor");
+var _wrapper = require("./wrapper");
+var _link = require("./link");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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, _btNames.default.tocAnchor, _btNames.default.anchor];
+const AnnotationEditor = props => {
+  const {
+    isOpen,
+    editorStateValue,
+    onConfirm,
+    onCancel
+  } = props;
+  const [editorState, setEditorState] = (0, _react.useState)({
+    value: editorStateValue
+  });
+  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
+    isOpen: isOpen
+  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
+    title: "\u8A3B\u89E3",
+    actions: {
+      cancel: {
+        label: 'Cancel',
+        action: () => onCancel()
+      },
+      confirm: {
+        label: 'Confirm',
+        action: () => onConfirm(editorState.value)
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_richTextEditor.RichTextEditor, {
+    decorators: [_link.editableLinkDecorator],
+    disabledButtons: disabledButtons,
+    editorState: editorState.value,
+    onChange: editorState => {
+      setEditorState({
+        value: editorState
+      });
+    }
+  })));
+};
+exports.AnnotationEditor = AnnotationEditor;
+const EditableAnnotation = props => {
+  var _contentState$getEnti;
+  const {
+    children,
+    contentState,
+    entityKey
+  } = props;
+  const [isModalOpen, setIsModalOpen] = (0, _react.useState)(false);
+  const [editorState, setEditorState] = (0, _react.useState)({
+    value: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(contentState === null || contentState === void 0 || (_contentState$getEnti = contentState.getEntity(entityKey).getData()) === null || _contentState$getEnti === void 0 ? void 0 : _contentState$getEnti.rawContentState))
+  });
+  (0, _react.useEffect)(() => {
+    var _contentState$getEnti2;
+    setEditorState({
+      value: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(contentState === null || contentState === void 0 || (_contentState$getEnti2 = contentState.getEntity(entityKey).getData()) === null || _contentState$getEnti2 === void 0 ? void 0 : _contentState$getEnti2.rawContentState))
+    });
+  }, [contentState, entityKey]);
+  const onEditorStateChange = editorState => {
+    setIsModalOpen(false);
+    setEditorState({
+      value: editorState
+    });
+    props.onEditFinish({
+      entityKey,
+      entityData: {
+        rawContentState: editorState ? (0, _draftJs.convertToRaw)(editorState.getCurrentContent()) : undefined
+      }
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isModalOpen && /*#__PURE__*/_react.default.createElement(AnnotationEditor, {
+    isOpen: isModalOpen,
+    editorStateValue: editorState.value,
+    onConfirm: onEditorStateChange,
+    onCancel: () => {
+      setIsModalOpen(false);
+      props.onEditFinish();
+    }
+  }), /*#__PURE__*/_react.default.createElement(_wrapper.EditableWrapper, {
+    component: /*#__PURE__*/_react.default.createElement(_draftRenderer.annotationDecorator.component, {
+      children,
+      contentState,
+      entityKey
+    }),
+    onClick: e => {
+      e.preventDefault();
+      setIsModalOpen(true);
+      props.onEditStart();
+    }
+  }));
+};
+const editableAnnotationDecorator = exports.editableAnnotationDecorator = {
+  strategy: _draftRenderer.annotationDecorator.strategy,
+  component: EditableAnnotation
+};

package/lib/entity-decorators/link.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.editableLinkDecorator = exports.LinkEditor = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _modals = require("@keystone-ui/modals");
+var _fields = require("@keystone-ui/fields");
+var _draftRenderer = require("@kids-reporter/draft-renderer");
+var _wrapper = require("./wrapper");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const LinkEditor = props => {
+  const {
+    isOpen,
+    urlValue,
+    onConfirm,
+    onCancel
+  } = props;
+  const [url, setURL] = (0, _react.useState)(urlValue);
+  return /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
+    title: "\u7DE8\u8F2F\u5916\u90E8\u9023\u7D50\u6216\u5167\u90E8\u9328\u9EDE(ID)",
+    isOpen: isOpen,
+    actions: {
+      cancel: {
+        label: 'Cancel',
+        action: () => onCancel()
+      },
+      confirm: {
+        label: 'Confirm',
+        action: () => onConfirm(url)
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("br", null), "\u5916\u90E8\u9023\u7D50\u7BC4\u4F8B:", /*#__PURE__*/_react.default.createElement("br", null), "https://kids.twreporter.org/article/article1#part1", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "\u5167\u90E8\u9328\u9EDE\u7BC4\u4F8B:", /*#__PURE__*/_react.default.createElement("br", null), "#part1"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
+    placeholder: "\u9023\u7D50",
+    type: "text",
+    value: url,
+    onChange: e => setURL(e.target.value)
+  }));
+};
+exports.LinkEditor = LinkEditor;
+const EditableLink = props => {
+  var _contentState$getEnti;
+  const {
+    children,
+    contentState,
+    entityKey
+  } = props;
+  const [isModalOpen, setIsModalOpen] = (0, _react.useState)(false);
+  const [url, setURL] = (0, _react.useState)(contentState === null || contentState === void 0 || (_contentState$getEnti = contentState.getEntity(entityKey)) === null || _contentState$getEnti === void 0 || (_contentState$getEnti = _contentState$getEnti.getData()) === null || _contentState$getEnti === void 0 ? void 0 : _contentState$getEnti.url);
+  (0, _react.useEffect)(() => {
+    var _contentState$getEnti2;
+    setURL(contentState === null || contentState === void 0 || (_contentState$getEnti2 = contentState.getEntity(entityKey).getData()) === null || _contentState$getEnti2 === void 0 ? void 0 : _contentState$getEnti2.url);
+  });
+  const onURLChange = url => {
+    setIsModalOpen(false);
+    setURL(url);
+    props.onEditFinish({
+      entityKey,
+      entityData: {
+        url: url
+      }
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isModalOpen && /*#__PURE__*/_react.default.createElement(LinkEditor, {
+    isOpen: isModalOpen,
+    urlValue: url,
+    onConfirm: onURLChange,
+    onCancel: () => {
+      setIsModalOpen(false);
+      props.onEditFinish();
+    }
+  }), /*#__PURE__*/_react.default.createElement(_wrapper.EditableWrapper, {
+    component: /*#__PURE__*/_react.default.createElement(_draftRenderer.linkDecorator.component, {
+      children,
+      contentState,
+      entityKey
+    }),
+    onClick: e => {
+      e.preventDefault();
+      setIsModalOpen(true);
+      props.onEditStart();
+    }
+  }));
+};
+const editableLinkDecorator = exports.editableLinkDecorator = {
+  strategy: _draftRenderer.linkDecorator.strategy,
+  component: EditableLink
+};

package/lib/entity-decorators/wrapper.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditableWrapper = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Wrapper = _styledComponents.default.span`
+  display: inline;
+  color: #8e8e8e;
+`;
+const EditButton = _styledComponents.default.div`
+  display: inline;
+  cursor: pointer;
+  padding-left: 2px;
+  padding-right: 2px;
+`;
+const EditableWrapper = props => {
+  return /*#__PURE__*/_react.default.createElement(Wrapper, null, props.component, /*#__PURE__*/_react.default.createElement(EditButton, {
+    onClick: props.onClick
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fas fa-pen"
+  })));
+};
+exports.EditableWrapper = EditableWrapper;

package/lib/index.js

@@ -3,30 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "RichTextEditor", {
-  enumerable: true,
-  get: function () {
-    return _draftEditor.RichTextEditor;
-  }
-});
+exports.RichTextEditor = void 0;
 Object.defineProperty(exports, "buttonNames", {
   enumerable: true,
   get: function () {
     return _btNames.default;
   }
 });
-Object.defineProperty(exports, "decorator", {
-  enumerable: true,
-  get: function () {
-    return _draftEditor.decorator;
-  }
-});
 exports.default = void 0;
-var _draftEditor = require("./draft-editor");
+var _react = _interopRequireDefault(require("react"));
+var _richTextEditor = require("./rich-text-editor");
 var _btNames = _interopRequireDefault(require("./buttons/bt-names"));
+var _annotation = require("./entity-decorators/annotation");
+var _link = require("./entity-decorators/link");
+var _tocAnchor = require("./entity-decorators/toc-anchor");
+var _anchor = require("./entity-decorators/anchor");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const RichTextEditor = props => {
+  return /*#__PURE__*/_react.default.createElement(_richTextEditor.RichTextEditor, _extends({
+    decorators: [_annotation.editableAnnotationDecorator, _link.editableLinkDecorator, _tocAnchor.editableTOCAnchorDecorator, _anchor.editableAnchorDecorator]
+  }, props));
+};
+exports.RichTextEditor = RichTextEditor;
 var _default = exports.default = {
-  RichTextEditor: _draftEditor.RichTextEditor,
-  buttonNames: _btNames.default,
-  decorator: _draftEditor.decorator
+  RichTextEditor,
+  buttonNames: _btNames.default
 };

package/lib/{draft-editor.js → rich-text-editor.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.decorator = exports.RichTextEditor = void 0;
+exports.default = exports.RichTextEditor = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _draftJs = require("draft-js");
 var _draftRenderer = require("@kids-reporter/draft-renderer");
@@ -12,12 +12,8 @@ var _blockRendererFn = require("./block-renderer-fn");
 var _styled = require("./styled");
 var _buttons = require("./buttons");
 var _imageSelector = require("./buttons/selector/image-selector");
-var _annotation = require("./buttons/annotation");
-var _infoBox = require("./buttons/info-box");
 var _bgColor = require("./buttons/bg-color");
 var _fontColor = require("./buttons/font-color");
-var _tocAnchor = require("./entity-decorators/toc-anchor");
-var _anchor = require("./entity-decorators/anchor");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const styleSource = ['https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css', 'https://storage.googleapis.com/static-readr-tw-dev/cdn/draft-js/rich-editor.css', 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'].map((src, index) => /*#__PURE__*/_react.default.createElement("link", {
@@ -26,28 +22,35 @@ const styleSource = ['https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/
   rel: "stylesheet",
   type: "text/css"
 }));
-const decorator = exports.decorator = new _draftJs.CompositeDecorator([_draftRenderer.annotationDecorator, _draftRenderer.linkDecorator]);
 class RichTextEditor extends _react.default.Component {
   editorRef = null;
   constructor(props) {
+    var _props$decorators;
     super(props);
+    // Assign edit props to decorators
+    const editableDecorators = new _draftJs.CompositeDecorator((_props$decorators = props.decorators) === null || _props$decorators === void 0 ? void 0 : _props$decorators.map(editableDecorator => {
+      return {
+        ...editableDecorator,
+        props: {
+          ...this.customEditProps
+        }
+      };
+    }));
+    const {
+      editorState
+    } = props;
     this.state = {
       isEnlarged: false,
-      readOnly: false
+      readOnly: false,
+      editorState: !(editorState instanceof _draftJs.EditorState) ? _draftJs.EditorState.createEmpty(editableDecorators) : _draftJs.EditorState.set(editorState, {
+        decorator: editableDecorators
+      })
     };
-    this.editorDecorator = new _draftJs.CompositeDecorator([_draftRenderer.annotationDecorator, _draftRenderer.linkDecorator, {
-      ..._tocAnchor.editableTOCAnchorDecorator,
-      props: {
-        ...this.customEditProps
-      }
-    }, {
-      ..._anchor.editableAnchorDecorator,
-      props: {
-        ...this.customEditProps
-      }
-    }]);
   }
   onChange = editorState => {
+    this.setState({
+      editorState: editorState
+    });
     this.props.onChange(editorState);
   };
   handleKeyCommand = (command, editorState) => {
@@ -60,19 +63,15 @@ class RichTextEditor extends _react.default.Component {
   };
   handleReturn = event => {
     if (_draftJs.KeyBindingUtil.isSoftNewlineEvent(event)) {
-      const {
-        onChange,
-        editorState
-      } = this.props;
-      onChange(_draftJs.RichUtils.insertSoftNewline(editorState));
+      this.onChange(_draftJs.RichUtils.insertSoftNewline(this.state.editorState));
       return 'handled';
     }
     return 'not-handled';
   };
   mapKeyToEditorCommand = e => {
     if (e.keyCode === 9 /* TAB */) {
-      const newEditorState = _draftJs.RichUtils.onTab(e, this.props.editorState, 4 /* maxDepth */);
-      if (newEditorState !== this.props.editorState) {
+      const newEditorState = _draftJs.RichUtils.onTab(e, this.state.editorState, 4 /* maxDepth */);
+      if (newEditorState !== this.state.editorState) {
         this.onChange(newEditorState);
       }
       return null;
@@ -80,10 +79,10 @@ class RichTextEditor extends _react.default.Component {
     return (0, _draftJs.getDefaultKeyBinding)(e);
   };
   toggleBlockType = blockType => {
-    this.onChange(_draftJs.RichUtils.toggleBlockType(this.props.editorState, blockType));
+    this.onChange(_draftJs.RichUtils.toggleBlockType(this.state.editorState, blockType));
   };
   toggleInlineStyle = inlineStyle => {
-    this.onChange(_draftJs.RichUtils.toggleInlineStyle(this.props.editorState, inlineStyle));
+    this.onChange(_draftJs.RichUtils.toggleInlineStyle(this.state.editorState, inlineStyle));
   };
   getEntityType = editorState => {
     const contentState = editorState.getCurrentContent();
@@ -140,9 +139,9 @@ class RichTextEditor extends _react.default.Component {
       entityData
     } = {}) => {
       if (entityKey && entityData) {
-        const oldContentState = this.props.editorState.getCurrentContent();
+        const oldContentState = this.state.editorState.getCurrentContent();
         const newContentState = oldContentState.replaceEntityData(entityKey, entityData);
-        this.onChange(_draftJs.EditorState.set(this.props.editorState, {
+        this.onChange(_draftJs.EditorState.set(this.state.editorState, {
           currentContent: newContentState
         }));
       }
@@ -158,8 +157,6 @@ class RichTextEditor extends _react.default.Component {
       // and `props.blockProps.onEditFinish` in the custom block components.
       atomicBlockObj['props'] = {
         ...this.customEditProps,
-        RichTextEditorComponent: RichTextEditor,
-        decorator,
         getMainEditorReadOnly: () => this.state.readOnly
       };
     }
@@ -169,25 +166,16 @@ class RichTextEditor extends _react.default.Component {
     const {
       disabledButtons = []
     } = this.props;
-    let {
-      editorState
-    } = this.props;
-    if (!(editorState instanceof _draftJs.EditorState)) {
-      editorState = _draftJs.EditorState.createEmpty(this.editorDecorator);
-    } else {
-      editorState = _draftJs.EditorState.set(editorState, {
-        decorator: this.editorDecorator
-      });
-    }
     const {
       isEnlarged,
-      readOnly
+      readOnly,
+      editorState
     } = this.state;
     const entityType = this.getEntityType(editorState);
     const commonProps = {
       editorState: editorState,
       onChange: this.onChange,
-      readOnly: this.state.readOnly
+      readOnly: readOnly
     };
     return /*#__PURE__*/_react.default.createElement(_styled.DraftEditorContainer, {
       isEnlarged: isEnlarged
@@ -195,12 +183,12 @@ class RichTextEditor extends _react.default.Component {
       disabledButtons: disabledButtons,
       editorState: editorState,
       onToggle: this.toggleBlockType,
-      readOnly: this.state.readOnly
+      readOnly: readOnly
     }), /*#__PURE__*/_react.default.createElement(_buttons.InlineStyleControls, {
       disabledButtons: disabledButtons,
       editorState: editorState,
       onToggle: this.toggleInlineStyle,
-      readOnly: this.state.readOnly
+      readOnly: readOnly
     }), /*#__PURE__*/_react.default.createElement(_styled.EnlargeButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_buttons.CustomEnlargeButton, {
       onToggle: this.toggleEnlarge,
       isEnlarged: isEnlarged
@@ -221,7 +209,7 @@ class RichTextEditor extends _react.default.Component {
       isActive: editorState.getCurrentInlineStyle().find(styleName => typeof styleName === 'string' && styleName.startsWith(_fontColor.customStylePrefix)) !== undefined
     }, commonProps, this.commonEditProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomBlockquoteButton, _extends({
       isDisabled: disabledButtons.includes(_btNames.default.blockquote)
-    }, commonProps)), /*#__PURE__*/_react.default.createElement(CustomAnnotationButton, _extends({
+    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomAnnotationButton, _extends({
       isDisabled: disabledButtons.includes(_btNames.default.annotation),
       isActive: entityType === _draftRenderer.ENTITY.Annotation
     }, commonProps, this.commonEditProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomImageButton, _extends({
@@ -230,7 +218,7 @@ class RichTextEditor extends _react.default.Component {
     }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomSlideshowButton, _extends({
       isDisabled: disabledButtons.includes(_btNames.default.slideshow),
       ImageSelector: _imageSelector.ImageSelector
-    }, commonProps)), /*#__PURE__*/_react.default.createElement(CustomInfoBoxButton, _extends({
+    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomInfoBoxButton, _extends({
       isDisabled: disabledButtons.includes(_btNames.default.infoBox)
     }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomEmbeddedCodeButton, _extends({
       isDisabled: disabledButtons.includes(_btNames.default.embed)
@@ -263,17 +251,6 @@ class RichTextEditor extends _react.default.Component {
   }
 }
 exports.RichTextEditor = RichTextEditor;
-const AnnotationButton = (0, _annotation.createAnnotationButton)({
-  InnerEditor: RichTextEditor,
-  decorator
-});
-const InfoBoxButton = (0, _infoBox.createInfoBoxButton)({
-  InnerEditor: RichTextEditor,
-  decorator
-});
-const CustomAnnotationButton = (0, _buttons.withStyle)(AnnotationButton);
-const CustomInfoBoxButton = (0, _buttons.withStyle)(InfoBoxButton);
 var _default = exports.default = {
-  RichTextEditor,
-  decorator
+  RichTextEditor
 };

package/package.json

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

package/lib/draft-editor.type.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});