@kids-reporter/draft-editor 0.1.0

package/lib/buttons/selector/video-selector.js

@@ -0,0 +1,281 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VideoSelector = VideoSelector;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _modals = require("@keystone-ui/modals");
+
+var _apollo = require("@keystone-6/core/admin-ui/apollo");
+
+var _searchBox = require("./search-box");
+
+var _pagination = require("./pagination");
+
+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 VideoSearchBox = (0, _styledComponents.default)(_searchBox.SearchBox)`
+  margin-top: 10px;
+`;
+const VideoSelectionWrapper = _styledComponents.default.div`
+  overflow: auto;
+  margin-top: 10px;
+`;
+const VideoGridsWrapper = _styledComponents.default.div`
+  display: flex;
+  flex-wrap: wrap;
+  overflow: auto;
+`;
+const VideoGridWrapper = _styledComponents.default.div`
+  flex: 0 0 33.3333%;
+  cursor: pointer;
+  padding: 0 10px 10px;
+`;
+const VideoMetaGridsWrapper = _styledComponents.default.div`
+  display: flex;
+  flex-wrap: wrap;
+  overflow: auto;
+`;
+const VideoMetaGridWrapper = _styledComponents.default.div`
+  flex: 0 0 33.3333%;
+  cursor: pointer;
+  padding: 0 10px 10px;
+`;
+const Video = _styledComponents.default.video`
+  display: block;
+  width: 100%;
+  aspect-ratio: 2;
+  object-fit: cover;
+`;
+const SeparationLine = _styledComponents.default.div`
+  border: #e1e5e9 1px solid;
+  margin-top: 10px;
+  margin-bottom: 10px;
+`;
+const VideoSelected = _styledComponents.default.div`
+  height: 1.4rem;
+`;
+const ErrorWrapper = _styledComponents.default.div`
+  & * {
+    margin: 0;
+  }
+`;
+
+function VideosGrids(props) {
+  const {
+    videos,
+    selected,
+    onSelect
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(VideoGridsWrapper, null, videos.map(video => {
+    return /*#__PURE__*/_react.default.createElement(VideoGrid, {
+      key: video.id,
+      isSelected: selected === null || selected === void 0 ? void 0 : selected.includes(video),
+      onSelect: () => onSelect(video),
+      video: video
+    });
+  }));
+}
+
+function VideoGrid(props) {
+  var _video$videoFile;
+
+  const {
+    video,
+    onSelect,
+    isSelected
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(VideoGridWrapper, {
+    key: video === null || video === void 0 ? void 0 : video.id,
+    onClick: () => onSelect(video)
+  }, /*#__PURE__*/_react.default.createElement(VideoSelected, null, isSelected ? /*#__PURE__*/_react.default.createElement("i", {
+    className: "fas fa-check-circle"
+  }) : null), /*#__PURE__*/_react.default.createElement(Video, {
+    muted: true,
+    loop: true
+  }, /*#__PURE__*/_react.default.createElement("source", {
+    src: video === null || video === void 0 ? void 0 : video.videoSrc
+  }), /*#__PURE__*/_react.default.createElement("source", {
+    src: video === null || video === void 0 ? void 0 : (_video$videoFile = video.videoFile) === null || _video$videoFile === void 0 ? void 0 : _video$videoFile.url
+  })));
+}
+
+function VideoMetaGrids(props) {
+  const {
+    videoMetas
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(VideoMetaGridsWrapper, null, videoMetas.map(videoMeta => {
+    var _videoMeta$video;
+
+    return /*#__PURE__*/_react.default.createElement(VideoMetaGrid, {
+      key: videoMeta === null || videoMeta === void 0 ? void 0 : (_videoMeta$video = videoMeta.video) === null || _videoMeta$video === void 0 ? void 0 : _videoMeta$video.id,
+      videoMeta: videoMeta
+    });
+  }));
+}
+
+function VideoMetaGrid(props) {
+  var _video$videoFile2;
+
+  const {
+    videoMeta
+  } = props;
+  const {
+    video
+  } = videoMeta;
+  return /*#__PURE__*/_react.default.createElement(VideoMetaGridWrapper, null, /*#__PURE__*/_react.default.createElement(Video, {
+    muted: true,
+    autoPlay: true,
+    loop: true
+  }, /*#__PURE__*/_react.default.createElement("source", {
+    src: video === null || video === void 0 ? void 0 : video.videoSrc
+  }), /*#__PURE__*/_react.default.createElement("source", {
+    src: video === null || video === void 0 ? void 0 : (_video$videoFile2 = video.videoFile) === null || _video$videoFile2 === void 0 ? void 0 : _video$videoFile2.url
+  })));
+}
+
+const videosQuery = (0, _apollo.gql)`
+  query Videos($searchText: String!, $take: Int, $skip: Int) {
+    videosCount(where: { name: { contains: $searchText } })
+    videos(
+      where: { name: { contains: $searchText } }
+      take: $take
+      skip: $skip
+    ) {
+      id
+      name
+      description
+      file {
+        url
+      }
+      coverPhoto {
+        id
+        name
+        imageFile {
+          url
+        }
+        resized {
+          original
+        }
+      }
+    }
+  }
+`;
+
+function VideoSelector(props) {
+  const [queryVideos, {
+    loading,
+    error,
+    data: {
+      videos = [],
+      videosCount = 0
+    } = {}
+  }] = (0, _apollo.useLazyQuery)(videosQuery, {
+    fetchPolicy: 'no-cache'
+  });
+  const [currentPage, setCurrentPage] = (0, _react.useState)(0); // page starts with 1, 0 is used to detect initialization
+
+  const [searchText, setSearchText] = (0, _react.useState)('');
+  const [selected, setSelected] = (0, _react.useState)([]);
+  const pageSize = 6;
+  const {
+    onChange
+  } = props;
+
+  const onSave = () => {
+    onChange(selected);
+  };
+
+  const onCancel = () => {
+    onChange([]);
+  };
+
+  const onSearchBoxChange = async searchInput => {
+    setSearchText(searchInput);
+    setCurrentPage(1);
+  };
+
+  const onVideosGridSelect = videoEntity => {
+    setSelected(selected => {
+      const filterdSelected = selected.filter(ele => {
+        var _ele$video;
+
+        return ((_ele$video = ele.video) === null || _ele$video === void 0 ? void 0 : _ele$video.id) !== videoEntity.id;
+      }); // deselect the video
+
+      if (filterdSelected.length !== selected.length) {
+        return filterdSelected;
+      } // single select
+
+
+      return [{
+        video: videoEntity
+      }];
+    });
+  };
+
+  const selectedVideos = selected.map(ele => {
+    return ele.video;
+  });
+  (0, _react.useEffect)(() => {
+    if (currentPage !== 0) {
+      queryVideos({
+        variables: {
+          searchText: searchText,
+          skip: (currentPage - 1) * pageSize,
+          take: pageSize
+        }
+      });
+    }
+  }, [currentPage, searchText]);
+
+  let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(VideosGrids, {
+    videos: videos,
+    selected: selectedVideos,
+    onSelect: onVideosGridSelect
+  }), /*#__PURE__*/_react.default.createElement(_pagination.Pagination, {
+    currentPage: currentPage,
+    total: videosCount,
+    pageSize: pageSize,
+    onChange: pageIndex => {
+      setCurrentPage(pageIndex);
+    }
+  }));
+
+  if (loading) {
+    searchResult = /*#__PURE__*/_react.default.createElement("p", null, "searching...");
+  }
+
+  if (error) {
+    searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `videos` query"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Message:"), /*#__PURE__*/_react.default.createElement("div", null, error.message), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Stack:"), /*#__PURE__*/_react.default.createElement("div", null, error.stack), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Query:"), /*#__PURE__*/_react.default.createElement("pre", null, videosQuery.loc.source.body)));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
+    isOpen: true
+  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
+    title: "Select video",
+    actions: {
+      cancel: {
+        label: 'Cancel',
+        action: onCancel
+      },
+      confirm: {
+        label: 'Confirm',
+        action: onSave
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(VideoSearchBox, {
+    onChange: onSearchBoxChange
+  }), /*#__PURE__*/_react.default.createElement(VideoSelectionWrapper, null, /*#__PURE__*/_react.default.createElement("div", null, searchResult), !!selected.length && /*#__PURE__*/_react.default.createElement(SeparationLine, null), /*#__PURE__*/_react.default.createElement(VideoMetaGrids, {
+    videoMetas: selected
+  })))));
+}

package/lib/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/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/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"));
+}