@kids-reporter/draft-editor 1.0.17 → 1.0.19

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

@@ -5,17 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ImageAlignment = exports.ImageAlignOptions = void 0;
 exports.ImageSelector = ImageSelector;
-var _react = _interopRequireWildcard(require("react"));
+var _apollo = require("@keystone-6/core/admin-ui/apollo");
+var _modals = require("@keystone-ui/modals");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
+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 _alignSelector = require("./align-selector");
-var _searchBox = require("./search-box");
 var _pagination = require("./pagination");
-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; }
+var _searchBox = require("./search-box");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 let ImageAlignment = exports.ImageAlignment = /*#__PURE__*/function (ImageAlignment) {
   ImageAlignment["DEFAULT"] = "default";
   ImageAlignment["PARAGRAPH"] = "paragraph-width";
@@ -87,15 +87,16 @@ function ImageGrids(props) {
     images,
     onSelect
   } = props;
-  return /*#__PURE__*/_react.default.createElement(GridsBlock, null, images.map(image => {
-    var _image$imageFile;
-    return /*#__PURE__*/_react.default.createElement(GridBlock, {
-      key: image.id,
-      onClick: () => onSelect(image)
-    }, /*#__PURE__*/_react.default.createElement(Img, {
-      src: image === null || image === void 0 || (_image$imageFile = image.imageFile) === null || _image$imageFile === void 0 ? void 0 : _image$imageFile.url
-    }));
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridsBlock, {
+    children: images.map(image => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridBlock, {
+        onClick: () => onSelect(image),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Img, {
+          src: image?.imageFile?.url
+        })
+      }, image.id);
+    })
+  });
 }
 function ImageMetaGrids(props) {
   const {
@@ -104,35 +105,39 @@ function ImageMetaGrids(props) {
     enableCaption,
     enableDelete
   } = props;
-  return /*#__PURE__*/_react.default.createElement(GridsBlock, null, imageMetas.map((imageMeta, idx) => {
-    var _imageMeta$imageFile;
-    const {
-      desc,
-      url
-    } = imageMeta;
-    return /*#__PURE__*/_react.default.createElement(GridBlock, {
-      key: idx
-    }, enableDelete && /*#__PURE__*/_react.default.createElement("i", {
-      onClick: () => {
-        onChange(imageMeta, 'delete');
-      },
-      className: "fas fa-check-circle"
-    }), /*#__PURE__*/_react.default.createElement(Img, {
-      src: imageMeta === null || imageMeta === void 0 || (_imageMeta$imageFile = imageMeta.imageFile) === null || _imageMeta$imageFile === void 0 ? void 0 : _imageMeta$imageFile.url
-    }), enableCaption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
-      htmlFor: "caption"
-    }, "Image Caption:"), /*#__PURE__*/_react.default.createElement("textarea", {
-      id: "caption",
-      placeholder: imageMeta === null || imageMeta === void 0 ? void 0 : imageMeta.name,
-      defaultValue: desc,
-      onChange: _.debounce(e => {
-        onChange(Object.assign({}, imageMeta, {
-          desc: e.target.value,
-          url
-        }), 'modify');
-      })
-    })));
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridsBlock, {
+    children: imageMetas.map((imageMeta, idx) => {
+      const {
+        desc,
+        url
+      } = imageMeta;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridBlock, {
+        children: [enableDelete && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          onClick: () => {
+            onChange(imageMeta, 'delete');
+          },
+          className: "fas fa-check-circle"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Img, {
+          src: imageMeta?.imageFile?.url
+        }), enableCaption && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+            htmlFor: "caption",
+            children: "Image Caption:"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
+            id: "caption",
+            placeholder: imageMeta?.name,
+            defaultValue: desc,
+            onChange: _.debounce(e => {
+              onChange(Object.assign({}, imageMeta, {
+                desc: e.target.value,
+                url
+              }), 'modify');
+            })
+          })]
+        })]
+      }, idx);
+    })
+  });
 }
 const imagesQuery = (0, _apollo.gql)`
   query Photos($searchText: String!, $take: Int, $skip: Int) {
@@ -197,10 +202,9 @@ function ImageSelector(props) {
     setAlign(align);
   };
   const onAlignSelectOpen = () => {
-    var _contentWrapperRef$cu;
-    const scrollWrapper = (_contentWrapperRef$cu = contentWrapperRef.current) === null || _contentWrapperRef$cu === void 0 ? void 0 : _contentWrapperRef$cu.parentElement;
+    const scrollWrapper = contentWrapperRef.current?.parentElement;
     if (scrollWrapper) {
-      scrollWrapper.scrollTop = scrollWrapper === null || scrollWrapper === void 0 ? void 0 : scrollWrapper.scrollHeight;
+      scrollWrapper.scrollTop = scrollWrapper?.scrollHeight;
     }
   };
   const changeSelectedImage = (imageEntityWithMeta, actionType) => {
@@ -245,51 +249,77 @@ function ImageSelector(props) {
       });
     }
   }, [currentPage, searchText]);
-  let searchResult = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(ImageGrids, {
-    images: images,
-    onSelect: selectImage
-  }), /*#__PURE__*/_react.default.createElement(_pagination.Pagination, {
-    currentPage: currentPage,
-    total: imagesCount,
-    pageSize: pageSize,
-    onChange: pageIndex => {
-      setCurrentPage(pageIndex);
-    }
-  }));
+  let searchResult = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ImageGrids, {
+      images: images,
+      onSelect: selectImage
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_pagination.Pagination, {
+      currentPage: currentPage,
+      total: imagesCount,
+      pageSize: pageSize,
+      onChange: pageIndex => {
+        setCurrentPage(pageIndex);
+      }
+    })]
+  });
   if (loading) {
-    searchResult = /*#__PURE__*/_react.default.createElement("p", null, "searching...");
+    searchResult = /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: "searching..."
+    });
   }
   if (error) {
-    var _imagesQuery$loc;
-    searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `images` 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, (_imagesQuery$loc = imagesQuery.loc) === null || _imagesQuery$loc === void 0 ? void 0 : _imagesQuery$loc.source.body)));
+    searchResult = /*#__PURE__*/(0, _jsxRuntime.jsxs)(ErrorWrapper, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+        children: "Errors occurs in the `images` query"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+          children: "Message:"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: error.message
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+          children: "Stack:"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: error.stack
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+          children: "Query:"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
+          children: imagesQuery.loc?.source.body
+        })]
+      })]
+    });
   }
-  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
-    isOpen: true
-  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
-    title: "Select image",
-    actions: {
-      cancel: {
-        label: 'Cancel',
-        action: onCancel
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_modals.DrawerController, {
+    isOpen: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_modals.Drawer, {
+      title: "Select image",
+      actions: {
+        cancel: {
+          label: 'Cancel',
+          action: onCancel
+        },
+        confirm: {
+          label: 'Confirm',
+          action: onSave
+        }
       },
-      confirm: {
-        label: 'Confirm',
-        action: onSave
-      }
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: contentWrapperRef
-  }, /*#__PURE__*/_react.default.createElement(SearchBox, {
-    onChange: onSearchBoxChange
-  }), /*#__PURE__*/_react.default.createElement(MainBlock, null, searchResult, selected.length > 0 && /*#__PURE__*/_react.default.createElement(SeparationLine, null), /*#__PURE__*/_react.default.createElement(ImageMetaGrids, {
-    imageMetas: selected,
-    onChange: changeSelectedImage,
-    enableCaption: enableCaption,
-    enableDelete: enableMultiSelect
-  })), enableAlignment && /*#__PURE__*/_react.default.createElement(_alignSelector.AlignSelector, {
-    align: align,
-    options: ImageAlignOptions,
-    onChange: onAlignSelectChange,
-    onOpen: onAlignSelectOpen
-  }))));
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        ref: contentWrapperRef,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SearchBox, {
+          onChange: onSearchBoxChange
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(MainBlock, {
+          children: [searchResult, selected.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(SeparationLine, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageMetaGrids, {
+            imageMetas: selected,
+            onChange: changeSelectedImage,
+            enableCaption: enableCaption,
+            enableDelete: enableMultiSelect
+          })]
+        }), enableAlignment && /*#__PURE__*/(0, _jsxRuntime.jsx)(_alignSelector.AlignSelector, {
+          align: align,
+          options: ImageAlignOptions,
+          onChange: onAlignSelectChange,
+          onOpen: onAlignSelectOpen
+        })]
+      })
+    })
+  });
 }

package/lib/buttons/selector/pagination.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.Pagination = Pagination;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const PaginationWrapper = _styledComponents.default.div`
   display: flex;
   justify-content: end;
@@ -27,6 +28,7 @@ const ArrowButtonWrapper = _styledComponents.default.a`
         cursor: unset;
       `;
   }
+  return '';
 }}
 `;
 function Pagination({
@@ -42,37 +44,47 @@ function Pagination({
 
   // Don't render the pagiantion component if the pageSize is greater than the total number of items in the list.
   if (total <= pageSize) return null;
-  return /*#__PURE__*/_react.default.createElement(PaginationWrapper, null, /*#__PURE__*/_react.default.createElement("div", null, currentPage, " of ", limit, " pages"), /*#__PURE__*/_react.default.createElement(Arrows, null, /*#__PURE__*/_react.default.createElement(ArrowButtonWrapper, {
-    onClick: () => {
-      onChange(prevPage);
-    },
-    disable: prevPage < minPage
-  }, /*#__PURE__*/_react.default.createElement("svg", {
-    "aria-hidden": "true",
-    focusable: "false",
-    height: "24px",
-    width: "24px",
-    role: "img",
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: "css-bztyua"
-  }, /*#__PURE__*/_react.default.createElement("polyline", {
-    points: "15 18 9 12 15 6"
-  }), ' ')), /*#__PURE__*/_react.default.createElement(ArrowButtonWrapper, {
-    onClick: () => {
-      onChange(nextPage);
-    },
-    disable: nextPage > limit
-  }, /*#__PURE__*/_react.default.createElement("svg", {
-    "aria-hidden": "true",
-    focusable: "false",
-    height: "24px",
-    width: "24px",
-    role: "img",
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: "css-bztyua"
-  }, /*#__PURE__*/_react.default.createElement("polyline", {
-    points: "9 18 15 12 9 6"
-  })))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PaginationWrapper, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [currentPage, " of ", limit, " pages"]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Arrows, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ArrowButtonWrapper, {
+        onClick: () => {
+          onChange(prevPage);
+        },
+        disable: prevPage < minPage,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+          "aria-hidden": "true",
+          focusable: "false",
+          height: "24px",
+          width: "24px",
+          role: "img",
+          viewBox: "0 0 24 24",
+          xmlns: "http://www.w3.org/2000/svg",
+          className: "css-bztyua",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("polyline", {
+            points: "15 18 9 12 15 6"
+          }), ' ']
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ArrowButtonWrapper, {
+        onClick: () => {
+          onChange(nextPage);
+        },
+        disable: nextPage > limit,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+          "aria-hidden": "true",
+          focusable: "false",
+          height: "24px",
+          width: "24px",
+          role: "img",
+          viewBox: "0 0 24 24",
+          xmlns: "http://www.w3.org/2000/svg",
+          className: "css-bztyua",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("polyline", {
+            points: "9 18 15 12 9 6"
+          })
+        })
+      })]
+    })]
+  });
 }

package/lib/buttons/selector/search-box.js

@@ -4,13 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SearchBox = SearchBox;
-var _react = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _button = require("@keystone-ui/button");
 var _fields = require("@keystone-ui/fields");
-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; }
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const SearchBoxWrapper = _styledComponents.default.div`
   display: flex;
 `;
@@ -20,18 +19,20 @@ function SearchBox(props) {
     className
   } = props;
   const [searchInput, setSearchInput] = (0, _react.useState)('');
-  return /*#__PURE__*/_react.default.createElement(SearchBoxWrapper, {
-    className: className
-  }, /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
-    type: "text",
-    placeholder: "\u8ACB\u8F38\u5165\u95DC\u9375\u5B57\u641C\u5C0B",
-    value: searchInput,
-    onChange: e => {
-      setSearchInput(e.target.value);
-    }
-  }), /*#__PURE__*/_react.default.createElement(_button.Button, {
-    onClick: () => {
-      onChange(searchInput);
-    }
-  }, "Search"));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SearchBoxWrapper, {
+    className: className,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_fields.TextInput, {
+      type: "text",
+      placeholder: "\u8ACB\u8F38\u5165\u95DC\u9375\u5B57\u641C\u5C0B",
+      value: searchInput,
+      onChange: e => {
+        setSearchInput(e.target.value);
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+      onClick: () => {
+        onChange(searchInput);
+      },
+      children: "Search"
+    })]
+  });
 }

package/lib/buttons/slideshow.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SlideshowButton = SlideshowButton;
+var _draftJs = require("draft-js");
 var _react = _interopRequireWildcard(require("react"));
 var _imageSelector = require("./selector/image-selector");
-var _draftJs = require("draft-js");
-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; }
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function SlideshowButton(props) {
   const {
     editorState,
@@ -41,15 +41,20 @@ function SlideshowButton(props) {
     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,
-    enableMultiSelect: true,
-    enableAlignment: false
-  }), /*#__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")));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+    children: [toShowImageSelector && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageSelector, {
+      onChange: onImageSelectorChange,
+      enableCaption: true,
+      enableMultiSelect: true,
+      enableAlignment: false
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: className,
+      onClick: promptForImageSelector,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: "far fa-images"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: " Slideshow"
+      })]
+    })]
+  });
 }

package/lib/buttons/toc-anchor.js

@@ -4,10 +4,11 @@ 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 }; }
+var _draftJs = require("draft-js");
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const TOCAnchorButton = props => {
   const toggleEntity = _draftJs.RichUtils.toggleLink;
   const {
@@ -42,10 +43,13 @@ const TOCAnchorButton = props => {
       onChange(toggleEntity(editorState, selection, null));
     }
   };
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: props.className,
     onMouseDown: isActive ? removeAnchor : promptForAnchor,
-    title: "\u7D22\u5F15"
-  }, /*#__PURE__*/_react.default.createElement("span", null, "\u7D22"));
+    title: "\u7D22\u5F15",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: "\u7D22"
+    })
+  });
 };
 exports.TOCAnchorButton = TOCAnchorButton;

package/lib/entity-decorators/anchor.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.editableAnchorDecorator = exports.AnchorIDEditor = 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 _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; }
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const AnchorWrapper = _styledComponents.default.span`
   display: inline;
   color: #8e8e8e;
@@ -51,7 +51,7 @@ const AnchorIDEditor = props => {
     const idRex = /^[A-Za-z][\w-]*$/;
     return idRex.test(id);
   };
-  return /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_modals.AlertDialog, {
     title: "\u7DE8\u8F2F\u9328\u9EDE\u6587\u5B57(ID)",
     isOpen: isOpen,
     actions: {
@@ -69,17 +69,23 @@ const AnchorIDEditor = props => {
           }
         }
       }
-    }
-  }, /*#__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: anchorID,
-    onChange: e => setAnchorID(e.target.value)
-  }), msg && /*#__PURE__*/_react.default.createElement(Warning, null, msg));
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Warning, {
+      children: "\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__*/(0, _jsxRuntime.jsx)("p", {
+      children: "\u7BC4\u4F8B: part1, Section-234, table_5"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTextInput, {
+      placeholder: "\u9328\u9EDE\u6587\u5B57(ID)",
+      type: "text",
+      value: anchorID,
+      onChange: e => setAnchorID(e.target.value)
+    }), msg && /*#__PURE__*/(0, _jsxRuntime.jsx)(Warning, {
+      children: msg
+    })]
+  });
 };
 exports.AnchorIDEditor = AnchorIDEditor;
 const EditableAnchor = props => {
-  var _contentState$getEnti;
   const {
     children,
     contentState,
@@ -87,10 +93,9 @@ const EditableAnchor = props => {
   } = 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);
+  const [anchorID, setAnchorID] = (0, _react.useState)(contentState?.getEntity(entityKey)?.getData()?.anchorID);
   (0, _react.useEffect)(() => {
-    var _contentState$getEnti2;
-    setAnchorID((_contentState$getEnti2 = contentState.getEntity(entityKey).getData()) === null || _contentState$getEnti2 === void 0 ? void 0 : _contentState$getEnti2.anchorID);
+    setAnchorID(contentState.getEntity(entityKey).getData()?.anchorID);
   });
   const onAnchorIDChange = anchorID => {
     setIsModalOpen(false);
@@ -102,24 +107,31 @@ const EditableAnchor = props => {
       }
     });
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isModalOpen && /*#__PURE__*/_react.default.createElement(AnchorIDEditor, {
-    isOpen: isModalOpen,
-    anchorIDValue: 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)));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+    children: [isModalOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(AnchorIDEditor, {
+      isOpen: isModalOpen,
+      anchorIDValue: anchorID,
+      onConfirm: onAnchorIDChange,
+      onCancel: () => {
+        setIsModalOpen(false);
+        props.onEditFinish();
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(AnchorWrapper, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AnchorEditButton, {
+        anchorLabel: anchorID !== tocContent ? anchorID : undefined,
+        onClick: e => {
+          e.preventDefault();
+          setIsModalOpen(true);
+          props.onEditStart();
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          className: "fas fa-pen"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: children
+      })]
+    })]
+  });
 };
 const editableAnchorDecorator = exports.editableAnchorDecorator = {
   strategy: (0, _draftRenderer.findEntitiesByType)(_draftRenderer.ENTITY.Anchor),