@kids-reporter/draft-editor 1.0.16 → 1.0.18

package/lib/buttons/news-reading.js

@@ -5,19 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NewsReadingButton = NewsReadingButton;
 exports.NewsReadingInput = NewsReadingInput;
-var _react = _interopRequireWildcard(require("react"));
-var _axios = _interopRequireDefault(require("axios"));
+var _fields = require("@keystone-ui/fields");
+var _modals = require("@keystone-ui/modals");
 var _errors = _interopRequireDefault(require("@twreporter/errors"));
+var _axios = _interopRequireDefault(require("axios"));
 var _draftJs = require("draft-js");
-var _modals = require("@keystone-ui/modals");
-var _fields = require("@keystone-ui/fields");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _react = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
 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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // @ts-ignore pkg does not have definition
 
 async function fetchNewsReadingGroup(itemId) {
-  var _res$data, _res$data2;
   const query = `
 query GetNewsReadingGroup($itemId: ID!){
   newsReadingGroup(where: {id: $itemId}) {
@@ -40,13 +40,13 @@ query GetNewsReadingGroup($itemId: ID!){
     const annotatedErr = _errors.default.helpers.annotateAxiosError(err);
     throw annotatedErr;
   }
-  if ((_res$data = res.data) !== null && _res$data !== void 0 && _res$data.errors) {
+  if (res.data?.errors) {
     const annotatingError = _errors.default.helpers.wrap(new Error('Errors occured while executing `GetNewsReadingGroup` query'), 'GraphQLError', '`errors` returned in the GQL query response', {
       errors: res.data.errors
     });
     throw annotatingError;
   }
-  return (_res$data2 = res.data) === null || _res$data2 === void 0 || (_res$data2 = _res$data2.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.newsReadingGroup;
+  return res.data?.data?.newsReadingGroup;
 }
 function NewsReadingInput({
   isOpen,
@@ -58,9 +58,8 @@ function NewsReadingInput({
   const [warning, setWarning] = (0, _react.useState)('');
   const confirmInput = async () => {
     try {
-      var _newsReadingGroup$ite;
       const newsReadingGroup = await fetchNewsReadingGroup(inputValueState);
-      if (newsReadingGroup === null || (newsReadingGroup === null || newsReadingGroup === void 0 || (_newsReadingGroup$ite = newsReadingGroup.items) === null || _newsReadingGroup$ite === void 0 ? void 0 : _newsReadingGroup$ite.length) === 0) {
+      if (newsReadingGroup === null || newsReadingGroup?.items?.length === 0) {
         throw new Error(`input ${inputValueState} has no data.`);
       }
       onConfirm({
@@ -77,7 +76,7 @@ function NewsReadingInput({
   };
   let warningJsx = null;
   if (warning) {
-    warningJsx = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
+    warningJsx = /*#__PURE__*/(0, _jsxRuntime.jsx)(_modals.AlertDialog, {
       isOpen: warning !== '',
       title: `Something went wrong`,
       actions: {
@@ -87,37 +86,43 @@ function NewsReadingInput({
           },
           label: 'Done'
         }
-      }
-    }, /*#__PURE__*/_react.default.createElement(_fields.TextArea, {
-      readOnly: true
-    }, warning));
-  }
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, warningJsx, /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
-    isOpen: isOpen
-  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
-    title: "\u8B80\u5831\u4E3B\u984C",
-    actions: {
-      cancel: {
-        label: 'Cancel',
-        action: onCancel
       },
-      confirm: {
-        label: 'Confirm',
-        action: confirmInput
-      }
-    }
-  }, /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
-    onChange: e => {
-      setInputValueState(e.target.value);
-    },
-    placeholder: "News-readings-groups Item ID",
-    type: "text",
-    value: inputValueState,
-    style: {
-      marginBottom: '10px',
-      marginTop: '30px'
-    }
-  }))));
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fields.TextArea, {
+        readOnly: true,
+        children: warning
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [warningJsx, /*#__PURE__*/(0, _jsxRuntime.jsx)(_modals.DrawerController, {
+      isOpen: isOpen,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_modals.Drawer, {
+        title: "\u8B80\u5831\u4E3B\u984C",
+        actions: {
+          cancel: {
+            label: 'Cancel',
+            action: onCancel
+          },
+          confirm: {
+            label: 'Confirm',
+            action: confirmInput
+          }
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fields.TextInput, {
+          onChange: e => {
+            setInputValueState(e.target.value);
+          },
+          placeholder: "News-readings-groups Item ID",
+          type: "text",
+          value: inputValueState,
+          style: {
+            marginBottom: '10px',
+            marginTop: '30px'
+          }
+        })
+      })
+    })]
+  });
 }
 function NewsReadingButton(props) {
   const {
@@ -130,11 +135,10 @@ function NewsReadingButton(props) {
     setIsInputOpen(true);
   };
   const onInputChange = inputValue => {
-    var _inputValue$newsReadi;
     const contentState = editorState.getCurrentContent();
     const contentStateWithEntity = contentState.createEntity('NEWS_READING', 'IMMUTABLE', {
       newsReadingGroupId: inputValue.newsReadingGroupId,
-      readings: (inputValue === null || inputValue === void 0 || (_inputValue$newsReadi = inputValue.newsReadingGroup) === null || _inputValue$newsReadi === void 0 ? void 0 : _inputValue$newsReadi.items) || []
+      readings: inputValue?.newsReadingGroup?.items || []
     });
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
     const newEditorState = _draftJs.EditorState.set(editorState, {
@@ -149,17 +153,22 @@ function NewsReadingButton(props) {
   const onInputCancel = () => {
     setIsInputOpen(false);
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isInputOpen && /*#__PURE__*/_react.default.createElement(NewsReadingInput, {
-    isOpen: isInputOpen,
-    onConfirm: onInputChange,
-    onCancel: onInputCancel,
-    inputValue: ""
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    onClick: () => {
-      promptForInput();
-    },
-    className: className
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "far"
-  }), /*#__PURE__*/_react.default.createElement("span", null, "\u8B80\u5831")));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+    children: [isInputOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(NewsReadingInput, {
+      isOpen: isInputOpen,
+      onConfirm: onInputChange,
+      onCancel: onInputCancel,
+      inputValue: ""
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      onClick: () => {
+        promptForInput();
+      },
+      className: className,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: "far"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: "\u8B80\u5831"
+      })]
+    })]
+  });
 }

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

@@ -4,9 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AlignSelector = AlignSelector;
+var _fields = require("@keystone-ui/fields");
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _fields = require("@keystone-ui/fields");
+var _jsxRuntime = require("react/jsx-runtime");
 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; }
@@ -44,19 +45,22 @@ function AlignSelector(props) {
       onOpen();
     }
   }, [isOpen]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
-    htmlFor: "alignment"
-  }, "\u5C0D\u9F4A"), /*#__PURE__*/_react.default.createElement(AlignSelect, {
-    id: "alignment"
-    // default align === undefined
-    ,
-    value: options.find(option => option.value === align) || null,
-    options: options,
-    onChange: option => {
-      onChange(option.value);
-    },
-    onMenuOpen: () => setIsOpen(true),
-    onMenuClose: () => setIsOpen(false),
-    menuHeight: menuHeight
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+      htmlFor: "alignment",
+      children: "\u5C0D\u9F4A"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AlignSelect, {
+      id: "alignment"
+      // default align === undefined
+      ,
+      value: options.find(option => option.value === align) || null,
+      options: options,
+      onChange: option => {
+        onChange(option.value);
+      },
+      onMenuOpen: () => setIsOpen(true),
+      onMenuClose: () => setIsOpen(false),
+      menuHeight: menuHeight
+    })]
+  });
 }

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

@@ -5,17 +5,18 @@ 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 }; }
+var _searchBox = require("./search-box");
+var _jsxRuntime = require("react/jsx-runtime");
 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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 let ImageAlignment = exports.ImageAlignment = /*#__PURE__*/function (ImageAlignment) {
   ImageAlignment["DEFAULT"] = "default";
   ImageAlignment["PARAGRAPH"] = "paragraph-width";
@@ -87,15 +88,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 +106,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 +203,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 +250,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,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Pagination = Pagination;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const PaginationWrapper = _styledComponents.default.div`
   display: flex;
@@ -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");
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _jsxRuntime = require("react/jsx-runtime");
 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; }
 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"
+    })]
+  });
 }