@kids-reporter/draft-editor 1.0.5 → 1.0.6

package/lib/buttons/anchor.js

@@ -4,10 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AnchorButton = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _draftJs = require("draft-js");
 var _draftRenderer = require("@kids-reporter/draft-renderer");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _anchor = require("../entity-decorators/anchor");
+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 AnchorButton = props => {
   const toggleEntity = _draftJs.RichUtils.toggleLink;
   const {
@@ -15,36 +17,45 @@ const AnchorButton = props => {
     editorState,
     onChange
   } = props;
+  const [isEditorOpen, setIsEditorOpen] = (0, _react.useState)(false);
   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.Anchor, 'MUTABLE', {
-        anchorID: selectedText
-      });
-      const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
-      const newEditorState = _draftJs.EditorState.set(editorState, {
-        currentContent: contentStateWithEntity
-      });
-      onChange(toggleEntity(newEditorState, newEditorState.getSelection(), entityKey));
+      props.onEditStart();
+      setIsEditorOpen(true);
     }
   };
+  const confirmAnchor = anchorID => {
+    const contentState = editorState.getCurrentContent();
+    const contentStateWithEntity = contentState.createEntity(_draftRenderer.ENTITY.Anchor, 'MUTABLE', {
+      anchorID: anchorID
+    });
+    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+    const newEditorState = _draftJs.EditorState.set(editorState, {
+      currentContent: contentStateWithEntity
+    });
+    onChange(toggleEntity(newEditorState, newEditorState.getSelection(), entityKey));
+    setIsEditorOpen(false);
+    props.onEditFinish();
+  };
   const removeAnchor = () => {
     const selection = editorState.getSelection();
     if (!selection.isCollapsed()) {
       onChange(toggleEntity(editorState, selection, null));
     }
+    setIsEditorOpen(false);
+    props.onEditFinish();
   };
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isEditorOpen && /*#__PURE__*/_react.default.createElement(_anchor.AnchorIDEditor, {
+    isOpen: isEditorOpen,
+    anchorIDValue: '',
+    onConfirm: confirmAnchor,
+    onCancel: removeAnchor
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: props.className,
     onMouseDown: isActive ? removeAnchor : promptForAnchor,
     title: "\u9328\u9EDE"
-  }, /*#__PURE__*/_react.default.createElement("span", null, "\u9328"));
+  }, /*#__PURE__*/_react.default.createElement("span", null, "\u9328")));
 };
 exports.AnchorButton = AnchorButton;

package/lib/draft-editor.js

@@ -210,7 +210,7 @@ class RichTextEditor extends _react.default.Component {
     }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomAnchorButton, _extends({
       isDisabled: disabledButtons.includes(_btNames.default.anchor),
       isActive: entityType === _draftRenderer.ENTITY.Anchor
-    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomLinkButton, _extends({
+    }, commonProps, this.commonEditProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomLinkButton, _extends({
       isDisabled: disabledButtons.includes(_btNames.default.link),
       isActive: entityType === _draftRenderer.ENTITY.Link
     }, commonProps, this.commonEditProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomBackgroundColorButton, _extends({

package/lib/entity-decorators/anchor.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.editableAnchorDecorator = void 0;
+exports.editableAnchorDecorator = exports.AnchorIDEditor = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _modals = require("@keystone-ui/modals");
@@ -35,14 +35,22 @@ const Warning = _styledComponents.default.p`
 const StyledTextInput = (0, _styledComponents.default)(_fields.TextInput)`
   margin: 10px;
 `;
-const AnchorLabelEditor = props => {
+const AnchorIDEditor = props => {
   const {
     isOpen,
-    anchorLabelValue,
+    anchorIDValue,
     onConfirm,
     onCancel
   } = props;
-  const [anchorLabel, setTOCLabel] = (0, _react.useState)(anchorLabelValue);
+  const [anchorID, setAnchorID] = (0, _react.useState)(anchorIDValue);
+  const [msg, setMsg] = (0, _react.useState)('');
+
+  // Restrict id format
+  // ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+  const isValidID = id => {
+    const idRex = /^[A-Za-z][\w-]*$/;
+    return idRex.test(id);
+  };
   return /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
     title: "\u7DE8\u8F2F\u9328\u9EDE\u6587\u5B57(ID)",
     isOpen: isOpen,
@@ -53,16 +61,23 @@ const AnchorLabelEditor = props => {
       },
       confirm: {
         label: 'Confirm',
-        action: () => onConfirm(anchorLabel)
+        action: () => {
+          if (isValidID(anchorID)) {
+            onConfirm(anchorID);
+          } else {
+            setMsg('ID格式錯誤！');
+          }
+        }
       }
     }
-  }, /*#__PURE__*/_react.default.createElement(Warning, null, "\u6CE8\u610F\uFF01\u540C\u7BC7\u6587\u7AE0ID\u4E0D\u53EF\u91CD\u8907\uFF01"), /*#__PURE__*/_react.default.createElement(StyledTextInput, {
+  }, /*#__PURE__*/_react.default.createElement(Warning, null, "\u6CE8\u610F\uFF01\u540C\u7BC7\u6587\u7AE0ID\u4E0D\u53EF\u91CD\u8907\uFF01ID\u9700\u4F7F\u7528\u534A\u578B\u82F1\u6587\u5B57\u6BCD(\u5927/\u5C0F\u5BEB)\u958B\u982D\uFF0C\u63A5\u7E8C \u82F1\u6587\u5B57\u6BCD/\u6578\u5B57/-/_"), /*#__PURE__*/_react.default.createElement("p", null, "\u7BC4\u4F8B: part1, Section-234, table_5"), /*#__PURE__*/_react.default.createElement(StyledTextInput, {
     placeholder: "\u9328\u9EDE\u6587\u5B57(ID)",
     type: "text",
-    value: anchorLabel,
-    onChange: e => setTOCLabel(e.target.value)
-  }));
+    value: anchorID,
+    onChange: e => setAnchorID(e.target.value)
+  }), msg && /*#__PURE__*/_react.default.createElement(Warning, null, msg));
 };
+exports.AnchorIDEditor = AnchorIDEditor;
 const EditableAnchor = props => {
   var _contentState$getEnti;
   const {
@@ -87,9 +102,9 @@ const EditableAnchor = props => {
       }
     });
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isModalOpen && /*#__PURE__*/_react.default.createElement(AnchorLabelEditor, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isModalOpen && /*#__PURE__*/_react.default.createElement(AnchorIDEditor, {
     isOpen: isModalOpen,
-    anchorLabelValue: anchorID,
+    anchorIDValue: anchorID,
     onConfirm: onAnchorIDChange,
     onCancel: () => {
       setIsModalOpen(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-editor",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "",
   "main": "lib/index.js",
   "scripts": {