@kids-reporter/draft-editor 1.0.1 → 1.0.3

package/lib/entity-decorators/anchor.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.editableAnchorDecorator = 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(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const 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 EditableAnchor = 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 editableAnchorDecorator = {
+  strategy: _draftRenderer.findAnchorEntities,
+  component: EditableAnchor
+};
+exports.editableAnchorDecorator = editableAnchorDecorator;

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

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.editableInnerAnchorDecorator = 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(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const 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\u9328\u9EDE\u6587\u5B57(ID): \u6CE8\u610F\uFF01\u540C\u7BC7\u6587\u7AE0ID\u4E0D\u53EF\u91CD\u8907\uFF01",
+    isOpen: isOpen,
+    actions: {
+      cancel: {
+        label: 'Cancel',
+        action: () => onCancel()
+      },
+      confirm: {
+        label: 'Confirm',
+        action: () => onConfirm(anchorLabel)
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(StyledTextInput, {
+    placeholder: "\u9328\u9EDE\u6587\u5B57(ID)",
+    type: "text",
+    value: anchorLabel,
+    onChange: e => setTOCLabel(e.target.value)
+  }));
+};
+const EditableAnchor = props => {
+  var _contentState$getEnti;
+  const {
+    children,
+    contentState,
+    entityKey
+  } = props;
+  const tocContent = props.decoratedText;
+  const [isModalOpen, setIsModalOpen] = (0, _react.useState)(false);
+  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;
+    setAnchorID((_contentState$getEnti2 = contentState.getEntity(entityKey).getData()) === null || _contentState$getEnti2 === void 0 ? void 0 : _contentState$getEnti2.anchorID);
+  });
+  const onAnchorIDChange = anchorID => {
+    setIsModalOpen(false);
+    setAnchorID(anchorID);
+    props.onEditFinish({
+      entityKey,
+      entityData: {
+        anchorID: anchorID
+      }
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isModalOpen && /*#__PURE__*/_react.default.createElement(AnchorLabelEditor, {
+    isOpen: isModalOpen,
+    anchorLabelValue: anchorID,
+    onConfirm: onAnchorIDChange,
+    onCancel: () => {
+      setIsModalOpen(false);
+      props.onEditFinish();
+    }
+  }), /*#__PURE__*/_react.default.createElement(AnchorWrapper, null, /*#__PURE__*/_react.default.createElement(AnchorEditButton, {
+    anchorLabel: anchorID !== tocContent ? anchorID : 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 editableInnerAnchorDecorator = {
+  strategy: _draftRenderer.findAnchorEntities,
+  component: EditableAnchor
+};
+exports.editableInnerAnchorDecorator = editableInnerAnchorDecorator;

package/lib/styled.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextEditorWrapper = exports.EnlargeButtonWrapper = exports.DraftEditorWrapper = exports.DraftEditorControlsWrapper = exports.DraftEditorControls = exports.DraftEditorContainer = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const DraftEditorWrapper = _styledComponents.default.div`
+  /* Rich-editor default setting (.RichEditor-root)*/
+  background: #fff;
+  border: 1px solid #ddd;
+  font-family: 'Georgia', serif;
+  font-size: 14px;
+  padding: 15px;
+
+  /* Custom setting */
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  width: 100%;
+  height: 100%;
+  background: rgb(255, 255, 255);
+  border-radius: 6px;
+  padding: 0 1rem 1rem;
+`;
+exports.DraftEditorWrapper = DraftEditorWrapper;
+const DraftEditorControls = _styledComponents.default.div`
+  padding-top: 1rem;
+  width: 100%;
+  background: rgb(255, 255, 255);
+`;
+exports.DraftEditorControls = DraftEditorControls;
+const DraftEditorControlsWrapper = _styledComponents.default.div`
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding-right: 45px;
+  gap: 2px;
+`;
+exports.DraftEditorControlsWrapper = DraftEditorControlsWrapper;
+const TextEditorWrapper = _styledComponents.default.div`
+  /* Rich-editor default setting (.RichEditor-editor)*/
+  border-top: 1px solid #ddd;
+  cursor: text;
+  font-size: 16px;
+  margin-top: 10px;
+`;
+exports.TextEditorWrapper = TextEditorWrapper;
+const DraftEditorContainer = _styledComponents.default.div`
+  overflow-x: hidden;
+  position: relative;
+  margin-top: 4px;
+  ${props => props.isEnlarged ? (0, _styledComponents.css)`
+          position: fixed;
+          width: 100%;
+          height: 100%;
+          top: 0;
+          left: 0;
+          z-index: 30;
+          padding-left: 3em;
+          padding-right: 3em;
+          background: rgba(0, 0, 0, 0.5);
+        ` : ''}
+  ${DraftEditorWrapper} {
+    ${props => props.isEnlarged ? (0, _styledComponents.css)`
+            width: 100%;
+            height: 100%;
+            padding: 0 1rem 0;
+            overflow: scroll;
+          ` : ''}
+  }
+  ${DraftEditorControls} {
+    ${props => props.isEnlarged ? (0, _styledComponents.css)`
+            position: sticky;
+            top: 0;
+            z-index: 12;
+          ` : ''}
+  }
+  ${DraftEditorControlsWrapper} {
+    ${props => props.isEnlarged ? (0, _styledComponents.css)`
+            overflow: auto;
+            padding-bottom: 0;
+          ` : ''}
+  }
+  ${TextEditorWrapper} {
+    ${props => props.isEnlarged ? (0, _styledComponents.css)`
+            max-width: 100%;
+            min-height: 100vh;
+            padding-bottom: 0;
+          ` : ''}
+  }
+`;
+exports.DraftEditorContainer = DraftEditorContainer;
+const EnlargeButtonWrapper = _styledComponents.default.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 0;
+`;
+exports.EnlargeButtonWrapper = EnlargeButtonWrapper;

package/package.json

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

package/lib/buttons/form/array-field.js

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ArrayField = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _button = require("@keystone-ui/button");
-var _fields = require("@keystone-ui/fields");
-var _PlusCircleIcon = require("@keystone-ui/icons/icons/PlusCircleIcon");
-var _core = require("@keystone-ui/core");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const ArrayField = function ({
-  label
-}) {
-  return /*#__PURE__*/_react.default.createElement(_core.Stack, {
-    gap: "medium"
-  }, label && /*#__PURE__*/_react.default.createElement(_fields.FieldLabel, null, label), /*#__PURE__*/_react.default.createElement(_fields.TextInput, null), /*#__PURE__*/_react.default.createElement(_fields.TextInput, null), /*#__PURE__*/_react.default.createElement(_button.Button, {
-    onClick: () => {
-      //props.onChange([...props.elements.map(x => ({ key: x.key })), { key: undefined }]);
-    },
-    tone: "active"
-  }, /*#__PURE__*/_react.default.createElement(_core.Stack, {
-    gap: "small",
-    across: true
-  }, /*#__PURE__*/_react.default.createElement(_PlusCircleIcon.PlusCircleIcon, {
-    size: "smallish"
-  }), " ", /*#__PURE__*/_react.default.createElement("span", null, "Add"))));
-};
-exports.ArrayField = ArrayField;