@kids-reporter/draft-editor 1.0.4 → 1.0.5

package/lib/buttons/anchor.js

@@ -25,9 +25,8 @@ const AnchorButton = props => {
       const start = selection.getStartOffset();
       const end = selection.getEndOffset();
       const selectedText = block.getText().slice(start, end);
-      const contentStateWithEntity = contentState.createEntity(_draftRenderer.ANCHOR_ENTITY_TYPE, 'IMMUTABLE', {
-        anchorKey: `createdAt-${Date.now()}`,
-        anchorLabel: selectedText
+      const contentStateWithEntity = contentState.createEntity(_draftRenderer.ENTITY.Anchor, 'MUTABLE', {
+        anchorID: selectedText
       });
       const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
       const newEditorState = _draftJs.EditorState.set(editorState, {
@@ -45,7 +44,7 @@ const AnchorButton = props => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: props.className,
     onMouseDown: isActive ? removeAnchor : promptForAnchor,
-    title: "\u7D22\u5F15"
-  }, /*#__PURE__*/_react.default.createElement("span", null, "\u7D22"));
+    title: "\u9328\u9EDE"
+  }, /*#__PURE__*/_react.default.createElement("span", null, "\u9328"));
 };
 exports.AnchorButton = AnchorButton;

package/lib/buttons/annotation.js

@@ -8,10 +8,11 @@ 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 }; }
 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.anchor];
+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
@@ -38,7 +39,7 @@ function createAnnotationButton({
     const confirmAnnotation = () => {
       const contentState = editorStateOfOuterEditor.getCurrentContent();
       const rawContentState = (0, _draftJs.convertToRaw)(inputValue.editorStateOfInnerEditor.getCurrentContent());
-      const contentStateWithEntity = contentState.createEntity('ANNOTATION', 'MUTABLE', {
+      const contentStateWithEntity = contentState.createEntity(_draftRenderer.ENTITY.Annotation, 'MUTABLE', {
         rawContentState
       });
       const entityKey = contentStateWithEntity.getLastCreatedEntityKey();

package/lib/buttons/bt-names.js

@@ -31,5 +31,6 @@ var _default = exports.default = {
   slideshow: 'slideshow',
   newsReading: 'news-reading',
   divider: 'divider',
+  tocAnchor: 'toc-anchor',
   anchor: 'anchor'
 };

package/lib/buttons/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withStyle = exports.InlineStyleControls = 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.CustomImageButton = exports.CustomFontColorButton = exports.CustomEnlargeButton = exports.CustomEmbeddedCodeButton = exports.CustomDividerButton = exports.CustomBlockquoteButton = exports.CustomBackgroundColorButton = exports.CustomAnchorButton = exports.BlockStyleControls = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _controlButtons = require("./control-buttons");
 var _bgColor = require("./bg-color");
@@ -13,6 +13,7 @@ var _embeddedCode = require("./embedded-code");
 var _enlarge = require("./enlarge");
 var _fontColor = require("./font-color");
 var _image = require("./image");
+var _tocAnchor = require("./toc-anchor");
 var _anchor = require("./anchor");
 var _link = require("./link");
 var _slideshow = require("./slideshow");
@@ -27,6 +28,7 @@ exports.withStyle = withStyle;
 const BlockStyleControls = exports.BlockStyleControls = _controlButtons.BlockStyleControls;
 const InlineStyleControls = exports.InlineStyleControls = _controlButtons.InlineStyleControls;
 const CustomBlockquoteButton = exports.CustomBlockquoteButton = withStyle(_blockquote.BlockquoteButton);
+const CustomTOCAnchorButton = exports.CustomTOCAnchorButton = withStyle(_tocAnchor.TOCAnchorButton);
 const CustomAnchorButton = exports.CustomAnchorButton = withStyle(_anchor.AnchorButton);
 const CustomLinkButton = exports.CustomLinkButton = withStyle(_link.LinkButton);
 const CustomEnlargeButton = exports.CustomEnlargeButton = (0, _styledComponents.default)(withStyle(_enlarge.EnlargeButton))`

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

package/lib/buttons/link.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LinkButton = LinkButton;
+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");
 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 = {
@@ -17,7 +18,7 @@ const styles = {
     padding: 10
   }
 };
-function LinkButton(props) {
+const LinkButton = props => {
   const {
     isActive,
     editorState,
@@ -35,7 +36,7 @@ function LinkButton(props) {
   };
   const confirmLink = () => {
     const contentState = editorState.getCurrentContent();
-    const contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', {
+    const contentStateWithEntity = contentState.createEntity(_draftRenderer.ENTITY.Link, 'MUTABLE', {
       url: urlValue
     });
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
@@ -63,7 +64,7 @@ function LinkButton(props) {
     props.onEditFinish();
   };
   const urlInput = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
-    title: "Insert LINK",
+    title: "\u7DE8\u8F2F\u5916\u90E8\u9023\u7D50\u6216\u5167\u90E8\u9328\u9EDE(ID)",
     isOpen: toShowUrlInput,
     actions: {
       cancel: {
@@ -75,7 +76,7 @@ function LinkButton(props) {
         action: confirmLink
       }
     }
-  }, /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
+  }, /*#__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",
@@ -88,4 +89,5 @@ function LinkButton(props) {
   }, /*#__PURE__*/_react.default.createElement("i", {
     className: "fas fa-link"
   })));
-}
+};
+exports.LinkButton = LinkButton;

package/lib/buttons/toc-anchor.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TOCAnchorButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _draftJs = require("draft-js");
+var _draftRenderer = require("@kids-reporter/draft-renderer");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const TOCAnchorButton = props => {
+  const toggleEntity = _draftJs.RichUtils.toggleLink;
+  const {
+    isActive,
+    editorState,
+    onChange
+  } = props;
+  const promptForAnchor = e => {
+    e.preventDefault();
+    const selection = editorState.getSelection();
+    if (!selection.isCollapsed()) {
+      const contentState = editorState.getCurrentContent();
+      const startKey = selection.getStartKey();
+      const block = contentState.getBlockForKey(startKey);
+      const start = selection.getStartOffset();
+      const end = selection.getEndOffset();
+      const selectedText = block.getText().slice(start, end);
+      const contentStateWithEntity = contentState.createEntity(_draftRenderer.ENTITY.TOCAnchor, 'IMMUTABLE', {
+        anchorKey: `createdAt-${Date.now()}`,
+        anchorLabel: selectedText
+      });
+      const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+      const newEditorState = _draftJs.EditorState.set(editorState, {
+        currentContent: contentStateWithEntity
+      });
+      onChange(toggleEntity(newEditorState, newEditorState.getSelection(), entityKey));
+    }
+  };
+  const removeAnchor = () => {
+    const selection = editorState.getSelection();
+    if (!selection.isCollapsed()) {
+      onChange(toggleEntity(editorState, selection, null));
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: props.className,
+    onMouseDown: isActive ? removeAnchor : promptForAnchor,
+    title: "\u7D22\u5F15"
+  }, /*#__PURE__*/_react.default.createElement("span", null, "\u7D22"));
+};
+exports.TOCAnchorButton = TOCAnchorButton;

package/lib/draft-editor.js

@@ -16,19 +16,13 @@ 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 = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("link", {
-  href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css",
-  rel: "stylesheet",
-  type: "text/css"
-}), /*#__PURE__*/_react.default.createElement("link", {
-  href: "https://storage.googleapis.com/static-readr-tw-dev/cdn/draft-js/rich-editor.css",
-  rel: "stylesheet",
-  type: "text/css"
-}), /*#__PURE__*/_react.default.createElement("link", {
-  href: "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css",
+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", {
+  key: `style-src-${index}`,
+  href: src,
   rel: "stylesheet",
   type: "text/css"
 }));
@@ -42,6 +36,11 @@ class RichTextEditor extends _react.default.Component {
       readOnly: false
     };
     this.editorDecorator = new _draftJs.CompositeDecorator([_draftRenderer.annotationDecorator, _draftRenderer.linkDecorator, {
+      ..._tocAnchor.editableTOCAnchorDecorator,
+      props: {
+        ...this.customEditProps
+      }
+    }, {
       ..._anchor.editableAnchorDecorator,
       props: {
         ...this.customEditProps
@@ -205,12 +204,15 @@ class RichTextEditor extends _react.default.Component {
     }), /*#__PURE__*/_react.default.createElement(_styled.EnlargeButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_buttons.CustomEnlargeButton, {
       onToggle: this.toggleEnlarge,
       isEnlarged: isEnlarged
-    })), /*#__PURE__*/_react.default.createElement(_buttons.CustomAnchorButton, _extends({
+    })), /*#__PURE__*/_react.default.createElement(_buttons.CustomTOCAnchorButton, _extends({
+      isDisabled: disabledButtons.includes(_btNames.default.tocAnchor),
+      isActive: entityType === _draftRenderer.ENTITY.TOCAnchor
+    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomAnchorButton, _extends({
       isDisabled: disabledButtons.includes(_btNames.default.anchor),
-      isActive: entityType === _draftRenderer.ANCHOR_ENTITY_TYPE
+      isActive: entityType === _draftRenderer.ENTITY.Anchor
     }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomLinkButton, _extends({
       isDisabled: disabledButtons.includes(_btNames.default.link),
-      isActive: entityType === 'LINK'
+      isActive: entityType === _draftRenderer.ENTITY.Link
     }, commonProps, this.commonEditProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomBackgroundColorButton, _extends({
       isDisabled: disabledButtons.includes(_btNames.default.backgroundColor),
       isActive: editorState.getCurrentInlineStyle().find(styleName => typeof styleName === 'string' && styleName.startsWith(_bgColor.customStylePrefix)) !== undefined
@@ -221,7 +223,7 @@ class RichTextEditor extends _react.default.Component {
       isDisabled: disabledButtons.includes(_btNames.default.blockquote)
     }, commonProps)), /*#__PURE__*/_react.default.createElement(CustomAnnotationButton, _extends({
       isDisabled: disabledButtons.includes(_btNames.default.annotation),
-      isActive: entityType === 'ANNOTATION'
+      isActive: entityType === _draftRenderer.ENTITY.Annotation
     }, commonProps, this.commonEditProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomImageButton, _extends({
       isDisabled: disabledButtons.includes(_btNames.default.image),
       ImageSelector: _imageSelector.ImageSelector

package/lib/entity-decorators/anchor.js

@@ -26,9 +26,12 @@ const AnchorEditButton = _styledComponents.default.div`
   display: inline;
   cursor: pointer;
   &::before {
-    content: '索引:${props => props.anchorLabel !== undefined ? `(${props.anchorLabel}) ` : ''}';
+    content: '錨點:${props => props.anchorLabel !== undefined ? `(${props.anchorLabel}) ` : ''}';
   }
 `;
+const Warning = _styledComponents.default.p`
+  color: red;
+`;
 const StyledTextInput = (0, _styledComponents.default)(_fields.TextInput)`
   margin: 10px;
 `;
@@ -41,7 +44,7 @@ const AnchorLabelEditor = props => {
   } = props;
   const [anchorLabel, setTOCLabel] = (0, _react.useState)(anchorLabelValue);
   return /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
-    title: "\u7DE8\u8F2F\u7D22\u5F15\u986F\u793A\u6587\u5B57",
+    title: "\u7DE8\u8F2F\u9328\u9EDE\u6587\u5B57(ID)",
     isOpen: isOpen,
     actions: {
       cancel: {
@@ -53,8 +56,8 @@ const AnchorLabelEditor = props => {
         action: () => onConfirm(anchorLabel)
       }
     }
-  }, /*#__PURE__*/_react.default.createElement(StyledTextInput, {
-    placeholder: "\u7D22\u5F15\u5728\u76EE\u9304\u5167\u986F\u793A\u6587\u5B57",
+  }, /*#__PURE__*/_react.default.createElement(Warning, null, "\u6CE8\u610F\uFF01\u540C\u7BC7\u6587\u7AE0ID\u4E0D\u53EF\u91CD\u8907\uFF01"), /*#__PURE__*/_react.default.createElement(StyledTextInput, {
+    placeholder: "\u9328\u9EDE\u6587\u5B57(ID)",
     type: "text",
     value: anchorLabel,
     onChange: e => setTOCLabel(e.target.value)
@@ -69,33 +72,31 @@ const EditableAnchor = props => {
   } = props;
   const tocContent = props.decoratedText;
   const [isModalOpen, setIsModalOpen] = (0, _react.useState)(false);
-  const [anchorLabel, setTOCLabel] = (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.anchorLabel);
+  const [anchorID, setAnchorID] = (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.anchorID);
   (0, _react.useEffect)(() => {
     var _contentState$getEnti2;
-    setTOCLabel((_contentState$getEnti2 = contentState.getEntity(entityKey).getData()) === null || _contentState$getEnti2 === void 0 ? void 0 : _contentState$getEnti2.anchorLabel);
+    setAnchorID((_contentState$getEnti2 = contentState.getEntity(entityKey).getData()) === null || _contentState$getEnti2 === void 0 ? void 0 : _contentState$getEnti2.anchorID);
   });
-  const onTOCLabelChange = labelValue => {
-    var _contentState$getEnti3;
+  const onAnchorIDChange = anchorID => {
     setIsModalOpen(false);
-    setTOCLabel(labelValue);
+    setAnchorID(anchorID);
     props.onEditFinish({
       entityKey,
       entityData: {
-        anchorKey: contentState === null || contentState === void 0 || (_contentState$getEnti3 = contentState.getEntity(entityKey)) === null || _contentState$getEnti3 === void 0 || (_contentState$getEnti3 = _contentState$getEnti3.getData()) === null || _contentState$getEnti3 === void 0 ? void 0 : _contentState$getEnti3.anchorKey,
-        anchorLabel: labelValue
+        anchorID: anchorID
       }
     });
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isModalOpen && /*#__PURE__*/_react.default.createElement(AnchorLabelEditor, {
     isOpen: isModalOpen,
-    anchorLabelValue: anchorLabel,
-    onConfirm: onTOCLabelChange,
+    anchorLabelValue: anchorID,
+    onConfirm: onAnchorIDChange,
     onCancel: () => {
       setIsModalOpen(false);
       props.onEditFinish();
     }
   }), /*#__PURE__*/_react.default.createElement(AnchorWrapper, null, /*#__PURE__*/_react.default.createElement(AnchorEditButton, {
-    anchorLabel: anchorLabel !== tocContent ? anchorLabel : undefined,
+    anchorLabel: anchorID !== tocContent ? anchorID : undefined,
     onClick: e => {
       e.preventDefault();
       setIsModalOpen(true);
@@ -106,6 +107,6 @@ const EditableAnchor = props => {
   })), /*#__PURE__*/_react.default.createElement("span", null, children)));
 };
 const editableAnchorDecorator = exports.editableAnchorDecorator = {
-  strategy: _draftRenderer.findAnchorEntities,
+  strategy: (0, _draftRenderer.findEntitiesByType)(_draftRenderer.ENTITY.Anchor),
   component: EditableAnchor
 };

package/lib/entity-decorators/toc-anchor.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.editableTOCAnchorDecorator = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _modals = require("@keystone-ui/modals");
+var _fields = require("@keystone-ui/fields");
+var _draftRenderer = require("@kids-reporter/draft-renderer");
+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 AnchorWrapper = _styledComponents.default.span`
+  display: inline;
+  color: #8e8e8e;
+  &::before {
+    content: '[';
+  }
+  &::after {
+    content: ']';
+  }
+`;
+const AnchorEditButton = _styledComponents.default.div`
+  display: inline;
+  cursor: pointer;
+  &::before {
+    content: '索引:${props => props.anchorLabel !== undefined ? `(${props.anchorLabel}) ` : ''}';
+  }
+`;
+const StyledTextInput = (0, _styledComponents.default)(_fields.TextInput)`
+  margin: 10px;
+`;
+const AnchorLabelEditor = props => {
+  const {
+    isOpen,
+    anchorLabelValue,
+    onConfirm,
+    onCancel
+  } = props;
+  const [anchorLabel, setTOCLabel] = (0, _react.useState)(anchorLabelValue);
+  return /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
+    title: "\u7DE8\u8F2F\u7D22\u5F15\u986F\u793A\u6587\u5B57",
+    isOpen: isOpen,
+    actions: {
+      cancel: {
+        label: 'Cancel',
+        action: () => onCancel()
+      },
+      confirm: {
+        label: 'Confirm',
+        action: () => onConfirm(anchorLabel)
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(StyledTextInput, {
+    placeholder: "\u7D22\u5F15\u5728\u76EE\u9304\u5167\u986F\u793A\u6587\u5B57",
+    type: "text",
+    value: anchorLabel,
+    onChange: e => setTOCLabel(e.target.value)
+  }));
+};
+const EditableTOCAnchor = props => {
+  var _contentState$getEnti;
+  const {
+    children,
+    contentState,
+    entityKey
+  } = props;
+  const tocContent = props.decoratedText;
+  const [isModalOpen, setIsModalOpen] = (0, _react.useState)(false);
+  const [anchorLabel, setTOCLabel] = (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.anchorLabel);
+  (0, _react.useEffect)(() => {
+    var _contentState$getEnti2;
+    setTOCLabel((_contentState$getEnti2 = contentState.getEntity(entityKey).getData()) === null || _contentState$getEnti2 === void 0 ? void 0 : _contentState$getEnti2.anchorLabel);
+  });
+  const onTOCLabelChange = labelValue => {
+    var _contentState$getEnti3;
+    setIsModalOpen(false);
+    setTOCLabel(labelValue);
+    props.onEditFinish({
+      entityKey,
+      entityData: {
+        anchorKey: contentState === null || contentState === void 0 || (_contentState$getEnti3 = contentState.getEntity(entityKey)) === null || _contentState$getEnti3 === void 0 || (_contentState$getEnti3 = _contentState$getEnti3.getData()) === null || _contentState$getEnti3 === void 0 ? void 0 : _contentState$getEnti3.anchorKey,
+        anchorLabel: labelValue
+      }
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isModalOpen && /*#__PURE__*/_react.default.createElement(AnchorLabelEditor, {
+    isOpen: isModalOpen,
+    anchorLabelValue: anchorLabel,
+    onConfirm: onTOCLabelChange,
+    onCancel: () => {
+      setIsModalOpen(false);
+      props.onEditFinish();
+    }
+  }), /*#__PURE__*/_react.default.createElement(AnchorWrapper, null, /*#__PURE__*/_react.default.createElement(AnchorEditButton, {
+    anchorLabel: anchorLabel !== tocContent ? anchorLabel : undefined,
+    onClick: e => {
+      e.preventDefault();
+      setIsModalOpen(true);
+      props.onEditStart();
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fas fa-pen"
+  })), /*#__PURE__*/_react.default.createElement("span", null, children)));
+};
+const editableTOCAnchorDecorator = exports.editableTOCAnchorDecorator = {
+  strategy: (0, _draftRenderer.findEntitiesByType)(_draftRenderer.ENTITY.TOCAnchor),
+  component: EditableTOCAnchor
+};

package/package.json

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