@mirrormedia/lilith-draft-editor 1.0.0-beta → 1.0.0-beta4

package/lib/draft-js/buttons/side-index.js

@@ -0,0 +1,200 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideIndexButton = SideIndexButton;
+exports.SideIndexInput = SideIndexInput;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _draftJs = require("draft-js");
+
+var _modals = require("@keystone-ui/modals");
+
+var _button = require("@keystone-ui/button");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _imageSelector = require("./selector/image-selector");
+
+var _fields = require("@keystone-ui/fields");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Label = _styledComponents.default.label`
+  display: block;
+  font-weight: 600;
+  margin: 10px 0;
+`;
+const ImageInputText = _styledComponents.default.span`
+  display: inline-block;
+  margin-right: 10px;
+`;
+
+function SideIndexInput(props) {
+  var _inputValue$sideIndex;
+
+  const {
+    isOpen,
+    onChange,
+    onCancel,
+    h2Text,
+    sideIndexText,
+    sideIndexUrl,
+    sideIndexImage
+  } = props;
+  const initialInputValue = {
+    h2Text: h2Text || '',
+    sideIndexText: sideIndexText || '',
+    sideIndexUrl: sideIndexUrl || '',
+    sideIndexImage: sideIndexImage || undefined
+  };
+  const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
+  const [toShowImageSelector, setToShowImageSelector] = (0, _react.useState)(false);
+
+  const onImageSelectorChange = selectedImagesWithMeta => {
+    var _selectedImagesWithMe;
+
+    const image = selectedImagesWithMeta === null || selectedImagesWithMeta === void 0 ? void 0 : (_selectedImagesWithMe = selectedImagesWithMeta[0]) === null || _selectedImagesWithMe === void 0 ? void 0 : _selectedImagesWithMe.image;
+
+    if (!image) {
+      setToShowImageSelector(false);
+      return;
+    }
+
+    setInputValue(oldInputValue => ({ ...oldInputValue,
+      sideIndexImage: image
+    }));
+    setToShowImageSelector(false);
+  };
+
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      setInputValue(initialInputValue);
+    }
+  }, [isOpen]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowImageSelector && /*#__PURE__*/_react.default.createElement(_imageSelector.ImageSelector, {
+    onChange: onImageSelectorChange
+  }), /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
+    isOpen: isOpen
+  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
+    title: `Insert Side Index`,
+    actions: {
+      cancel: {
+        label: 'Cancel',
+        action: () => {
+          onCancel();
+        }
+      },
+      confirm: {
+        label: 'Confirm',
+        action: () => {
+          onChange({ ...inputValue
+          });
+        }
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(Label, null, "\u6587\u5167\u6A19\u984C (\u82E5\u586B\u5165\u5916\u90E8\u9023\u7D50\u5247\u4E0D\u6703\u7522\u751F\u6587\u7AE0\u5167h2)"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
+    onChange: e => setInputValue(oldInputValue => ({ ...oldInputValue,
+      h2Text: e.target.value
+    })),
+    type: "text",
+    placeholder: "h2 text",
+    value: inputValue.h2Text
+  }), /*#__PURE__*/_react.default.createElement(Label, null, "\u5074\u6B04\u6A19\u984C (Optional, \u82E5\u672A\u8A2D\u5B9A\u6703\u76F4\u63A5\u7528\u6587\u5167\u6A19\u984C)"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
+    onChange: e => setInputValue(oldInputValue => ({ ...oldInputValue,
+      sideIndexText: e.target.value
+    })),
+    type: "text",
+    placeholder: "sideindex text",
+    value: inputValue.sideIndexText
+  }), /*#__PURE__*/_react.default.createElement(Label, null, "\u5074\u6B04 Url (Optional, \u5916\u90E8\u9023\u7D50\u624D\u9700\u4F7F\u7528)"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
+    onChange: e => setInputValue(oldInputValue => ({ ...oldInputValue,
+      sideIndexUrl: e.target.value
+    })),
+    type: "url",
+    placeholder: "sideindex url (optional)",
+    value: inputValue.sideIndexUrl
+  }), /*#__PURE__*/_react.default.createElement(Label, null, "\u5074\u6B04\u5716\u7247 (Optional)"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(ImageInputText, null, (_inputValue$sideIndex = inputValue.sideIndexImage) !== null && _inputValue$sideIndex !== void 0 && _inputValue$sideIndex.name ? inputValue.sideIndexImage.name : '尚未選取圖片'), /*#__PURE__*/_react.default.createElement(_button.Button, {
+    type: "button",
+    onClick: () => setToShowImageSelector(true),
+    tone: "passive"
+  }, "\u6DFB\u52A0\u5716\u7247")))));
+}
+
+function SideIndexButton(props) {
+  const [toShowInput, setToShowInput] = (0, _react.useState)(false);
+  const {
+    className,
+    editorState,
+    onChange: onEditorStateChange
+  } = props;
+
+  const onChange = ({
+    h2Text,
+    sideIndexText,
+    sideIndexUrl,
+    sideIndexImage
+  }) => {
+    const contentState = editorState.getCurrentContent(); // create an SideIndex entity
+
+    const contentStateWithEntity = contentState.createEntity('SIDEINDEX', 'IMMUTABLE', {
+      h2Text,
+      sideIndexText,
+      sideIndexUrl,
+      sideIndexImage
+    });
+    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, ' '));
+    setToShowInput(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SideIndexInput, {
+    onChange: onChange,
+    onCancel: () => {
+      setToShowInput(false);
+    },
+    isOpen: toShowInput
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: className,
+    onClick: () => {
+      setToShowInput(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M13.4626 0.211456H4.15859C3.93427 0.211456 3.71913 0.300569 3.56051 0.45919C3.40189 0.617811 3.31278 0.832947 3.31278 1.05727C3.31278 1.2816 3.40189 1.49673 3.56051 1.65535C3.71913 1.81397 3.93427 1.90309 4.15859 1.90309H13.4626C13.6866 1.90401 13.9012 1.99342 14.0596 2.15184C14.218 2.31027 14.3074 2.52486 14.3084 2.7489V13.4626C14.3074 13.6866 14.218 13.9012 14.0596 14.0596C13.9012 14.218 13.6866 14.3074 13.4626 14.3084H2.7489C2.52486 14.3074 2.31027 14.218 2.15184 14.0596C1.99342 13.9012 1.90401 13.6866 1.90309 13.4626V11.3093C1.90309 11.0849 1.81397 10.8698 1.65535 10.7112C1.49673 10.5526 1.2816 10.4634 1.05727 10.4634C0.832947 10.4634 0.617811 10.5526 0.45919 10.7112C0.300569 10.8698 0.211456 11.0849 0.211456 11.3093V13.4626C0.212389 14.1352 0.480025 14.7801 0.955687 15.2558C1.43135 15.7314 2.07622 15.9991 2.7489 16H13.4626C14.1352 15.9991 14.7801 15.7314 15.2558 15.2558C15.7314 14.7801 15.9991 14.1352 16 13.4626V2.7489C15.9991 2.07622 15.7314 1.43135 15.2558 0.955687C14.7801 0.480025 14.1352 0.212389 13.4626 0.211456Z",
+    fill: "#6b7280"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M1.05727 2.11454C1.64118 2.11454 2.11454 1.64118 2.11454 1.05727C2.11454 0.473355 1.64118 0 1.05727 0C0.473355 0 0 0.473355 0 1.05727C0 1.64118 0.473355 2.11454 1.05727 2.11454Z",
+    fill: "#6b7280"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M4.15859 5.48017H12.0529C12.2772 5.48017 12.4923 5.39106 12.6509 5.23244C12.8096 5.07382 12.8987 4.85868 12.8987 4.63436C12.8987 4.41003 12.8096 4.1949 12.6509 4.03628C12.4923 3.87766 12.2772 3.78854 12.0529 3.78854H4.15859C3.93427 3.78854 3.71913 3.87766 3.56051 4.03628C3.40189 4.1949 3.31277 4.41003 3.31277 4.63436C3.31277 4.85868 3.40189 5.07382 3.56051 5.23244C3.71913 5.39106 3.93427 5.48017 4.15859 5.48017Z",
+    fill: "#6b7280"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M1.05727 5.69162C1.64118 5.69162 2.11454 5.21827 2.11454 4.63436C2.11454 4.05044 1.64118 3.57709 1.05727 3.57709C0.473355 3.57709 0 4.05044 0 4.63436C0 5.21827 0.473355 5.69162 1.05727 5.69162Z",
+    fill: "#6b7280"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M4.15859 9.05726H12.0529C12.2772 9.05726 12.4923 8.96815 12.6509 8.80953C12.8096 8.65091 12.8987 8.43577 12.8987 8.21145C12.8987 7.98712 12.8096 7.77199 12.6509 7.61336C12.4923 7.45474 12.2772 7.36563 12.0529 7.36563H4.15859C3.93427 7.36563 3.71913 7.45474 3.56051 7.61336C3.40189 7.77199 3.31277 7.98712 3.31277 8.21145C3.31277 8.43577 3.40189 8.65091 3.56051 8.80953C3.71913 8.96815 3.93427 9.05726 4.15859 9.05726Z",
+    fill: "#6b7280"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M1.05727 9.26873C1.64118 9.26873 2.11454 8.79537 2.11454 8.21146C2.11454 7.62755 1.64118 7.15419 1.05727 7.15419C0.473355 7.15419 0 7.62755 0 8.21146C0 8.79537 0.473355 9.26873 1.05727 9.26873Z",
+    fill: "#6b7280"
+  })), /*#__PURE__*/_react.default.createElement("span", null, "SideIndex")));
+}

package/lib/draft-js/buttons/slideshow.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SlideshowButton = SlideshowButton;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _imageSelector = require("./selector/image-selector");
+
+var _draftJs = require("draft-js");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function SlideshowButton(props) {
+  const {
+    editorState,
+    onChange,
+    className,
+    ImageSelector = _imageSelector.ImageSelector
+  } = props;
+  const [toShowImageSelector, setToShowImageSelector] = (0, _react.useState)(false);
+
+  const promptForImageSelector = () => {
+    setToShowImageSelector(true);
+  };
+
+  const onImageSelectorChange = (selected, align, delay) => {
+    if (selected.length === 0) {
+      setToShowImageSelector(false);
+      return;
+    }
+
+    const contentState = editorState.getCurrentContent(); // since 202206, only slideshow-v2 will be created
+
+    const contentStateWithEntity = contentState.createEntity('slideshow-v2', 'IMMUTABLE', {
+      alignment: align,
+      delay,
+      images: selected.map(ele => {
+        return { ...(ele === null || ele === void 0 ? void 0 : ele.image),
+          desc: ele === null || ele === void 0 ? void 0 : ele.desc
+        };
+      })
+    });
+    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+
+    const newEditorState = _draftJs.EditorState.set(editorState, {
+      currentContent: contentStateWithEntity
+    }); // The third parameter here is a space string, not an empty string
+    // If you set an empty string, you will get an error: Unknown DraftEntity key: null
+
+
+    onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
+    setToShowImageSelector(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowImageSelector && /*#__PURE__*/_react.default.createElement(ImageSelector, {
+    onChange: onImageSelectorChange,
+    enableCaption: true,
+    enableDelay: true,
+    enableMultiSelect: true
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: className,
+    onClick: promptForImageSelector
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "far fa-images"
+  }), /*#__PURE__*/_react.default.createElement("span", null, " Slideshow")));
+}

package/lib/draft-js/buttons/table.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableButton = TableButton;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _draftJs = require("draft-js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function TableButton(props) {
+  const {
+    editorState,
+    onChange,
+    className
+  } = props;
+
+  const onClick = () => {
+    const rawDarftContentState = {
+      blocks: [],
+      entityMap: {}
+    };
+    const contentState = editorState.getCurrentContent();
+    const contentStateWithEntity = contentState.createEntity('TABLE', 'IMMUTABLE', {
+      // `tableStyles` is to used to store custom React CSS inline styles.
+      // Therefore, please make sure the style name needs to be camelCase.
+      tableStyles: {
+        // We can customize the inline styles of each row.
+        rows: [// thead has different background color.
+        {
+          backgroundColor: '#f2f2f2'
+        }, {}, {}],
+        // TODO: add column styles and cell styles if needed
+        columns: [],
+        cells: []
+      },
+      // We use two dimensions array to store the data.
+      // The items of the array represent the rows,
+      // and each item is also an array, which represents the columns.
+      // Take the following array as example.
+      // It is a
+      // row: 3
+      // column: 2
+      // sheet data stored in a 2 dimensions arrary.
+      tableData: [[rawDarftContentState, rawDarftContentState], [rawDarftContentState, rawDarftContentState], [rawDarftContentState, rawDarftContentState]]
+    });
+    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+
+    const newEditorState = _draftJs.EditorState.set(editorState, {
+      currentContent: contentStateWithEntity
+    }); // The third parameter here is a space string, not an empty string
+    // If you set an empty string, you will get an error: Unknown DraftEntity key: null
+
+
+    onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    onClick: onClick,
+    className: className
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa fa-table"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Table"));
+}

package/lib/draft-js/buttons/text-align.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AlignCenterButton = AlignCenterButton;
+exports.AlignLeftButton = AlignLeftButton;
+exports.getSelectionBlockData = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _draftJs = require("draft-js");
+
+var _modifier = require("../editor/modifier");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const toggleSelectionTextAlign = (editorState, textAlign) => {
+  return setSelectionBlockData(editorState, {
+    textAlign: getSelectionBlockData(editorState, 'textAlign') !== textAlign ? textAlign : undefined
+  });
+};
+
+const setSelectionBlockData = (editorState, blockData) => {
+  return _modifier.Modifier.setBlockData(editorState.getCurrentContent(), editorState.getSelection(), blockData);
+};
+
+const getSelectionBlockData = (editorState, name) => {
+  const block = editorState.getCurrentContent().getBlockForKey(editorState.getSelection().getAnchorKey());
+  const blockData = block.getData();
+  return blockData.get(name);
+};
+
+exports.getSelectionBlockData = getSelectionBlockData;
+
+function AlignCenterButton(props) {
+  const {
+    isActive,
+    editorState,
+    onChange
+  } = props;
+
+  const toggleTextAlign = () => {
+    const newContentState = toggleSelectionTextAlign(editorState, 'center');
+    onChange(_draftJs.EditorState.push(editorState, newContentState, 'change-block-style'));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: props.className,
+    onMouseDown: toggleTextAlign
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M11.4286 2.28571H4.57143C3.93929 2.28571 3.42857 1.77393 3.42857 1.14286C3.42857 0.511786 3.93929 0 4.57143 0H11.4286C12.0607 0 12.5714 0.511786 12.5714 1.14286C12.5714 1.77393 12.0607 2.28571 11.4286 2.28571ZM14.8571 6.85714H1.14286C0.511786 6.85714 0 6.34643 0 5.71429C0 5.08214 0.511786 4.57143 1.14286 4.57143H14.8571C15.4893 4.57143 16 5.08214 16 5.71429C16 6.34643 15.4893 6.85714 14.8571 6.85714ZM0 14.8571C0 14.225 0.511786 13.7143 1.14286 13.7143H14.8571C15.4893 13.7143 16 14.225 16 14.8571C16 15.4893 15.4893 16 14.8571 16H1.14286C0.511786 16 0 15.4893 0 14.8571ZM11.4286 11.4286H4.57143C3.93929 11.4286 3.42857 10.9179 3.42857 10.2857C3.42857 9.65357 3.93929 9.14286 4.57143 9.14286H11.4286C12.0607 9.14286 12.5714 9.65357 12.5714 10.2857C12.5714 10.9179 12.0607 11.4286 11.4286 11.4286Z",
+    fill: isActive ? '#ED8B00' : '#6b7280'
+  }))));
+}
+
+function AlignLeftButton(props) {
+  const {
+    isActive,
+    editorState,
+    onChange
+  } = props;
+
+  const toggleTextAlign = () => {
+    const newContentState = toggleSelectionTextAlign(editorState, 'left');
+    onChange(_draftJs.EditorState.push(editorState, newContentState, 'change-block-style'));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: props.className,
+    onMouseDown: toggleTextAlign
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M9.14286 2.28571H1.14286C0.511786 2.28571 0 1.77393 0 1.14286C0 0.511786 0.511786 0 1.14286 0H9.14286C9.775 0 10.2857 0.511786 10.2857 1.14286C10.2857 1.77393 9.775 2.28571 9.14286 2.28571ZM9.14286 11.4286H1.14286C0.511786 11.4286 0 10.9179 0 10.2857C0 9.65357 0.511786 9.14286 1.14286 9.14286H9.14286C9.775 9.14286 10.2857 9.65357 10.2857 10.2857C10.2857 10.9179 9.775 11.4286 9.14286 11.4286ZM0 5.71429C0 5.08214 0.511786 4.57143 1.14286 4.57143H14.8571C15.4893 4.57143 16 5.08214 16 5.71429C16 6.34643 15.4893 6.85714 14.8571 6.85714H1.14286C0.511786 6.85714 0 6.34643 0 5.71429ZM14.8571 16H1.14286C0.511786 16 0 15.4893 0 14.8571C0 14.225 0.511786 13.7143 1.14286 13.7143H14.8571C15.4893 13.7143 16 14.225 16 14.8571C16 15.4893 15.4893 16 14.8571 16Z",
+    fill: isActive ? '#ED8B00' : '#6b7280'
+  }))));
+}