@kids-reporter/draft-editor 1.0.17 → 1.0.19

package/lib/buttons/info-box.js

@@ -5,17 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InfoBoxButton = void 0;
 exports.InfoBoxInput = InfoBoxInput;
-var _react = _interopRequireWildcard(require("react"));
-var _btNames = _interopRequireDefault(require("./bt-names"));
-var _draftJs = require("draft-js");
 var _modals = require("@keystone-ui/modals");
-var _richTextEditor = require("../rich-text-editor");
-var _select = require("./form/select");
+var _draftJs = require("draft-js");
+var _react = require("react");
 var _annotation = require("../entity-decorators/annotation");
 var _link = require("../entity-decorators/link");
-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 _richTextEditor = require("../rich-text-editor");
+var _btNames = _interopRequireDefault(require("./bt-names"));
+var _checkbox = require("./form/checkbox");
+var _select = require("./form/select");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const disabledButtons = [_btNames.default.h2, _btNames.default.h3, _btNames.default.code, _btNames.default.codeBlock, _btNames.default.blockquote, _btNames.default.infoBox, _btNames.default.slideshow, _btNames.default.newsReading, _btNames.default.tocAnchor, _btNames.default.anchor];
 var InfoBoxTypeEnum = /*#__PURE__*/function (InfoBoxTypeEnum) {
   InfoBoxTypeEnum["newsChargeStation"] = "news-charge-station";
@@ -25,8 +25,8 @@ var InfoBoxTypeEnum = /*#__PURE__*/function (InfoBoxTypeEnum) {
 }(InfoBoxTypeEnum || {});
 var InfoBoxLabelEnum = /*#__PURE__*/function (InfoBoxLabelEnum) {
   InfoBoxLabelEnum["newsChargeStation"] = "\u65B0\u805E\u5145\u96FB\u5668";
-  InfoBoxLabelEnum["headerBorder"] = "\u7121\u7DDA\u6846\u7248";
-  InfoBoxLabelEnum["boxBorder"] = "\u6709\u7DDA\u6846\u7248";
+  InfoBoxLabelEnum["headerBorder"] = "\u85CD\u5E95\u7248\uFF08\u6709\u6A19\u984C\u8A2D\u8A08\uFF09";
+  InfoBoxLabelEnum["boxBorder"] = "\u7070\u5E95\u7248";
   return InfoBoxLabelEnum;
 }(InfoBoxLabelEnum || {});
 function InfoBoxInput(props) {
@@ -39,59 +39,72 @@ function InfoBoxInput(props) {
   const contentState = (0, _draftJs.convertFromRaw)(inputValue.rawContentState);
   const [inputValueState, setInputValueState] = (0, _react.useState)({
     type: inputValue.type,
-    editorState: _draftJs.EditorState.createWithContent(contentState)
+    editorState: _draftJs.EditorState.createWithContent(contentState),
+    showBaodaozai: inputValue.showBaodaozai
   });
-  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
-    isOpen: isOpen
-  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
-    title: `Info Box`,
-    actions: {
-      cancel: {
-        label: 'Cancel',
-        action: () => {
-          onCancel();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_modals.DrawerController, {
+    isOpen: isOpen,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_modals.Drawer, {
+      title: `Info Box`,
+      actions: {
+        cancel: {
+          label: 'Cancel',
+          action: () => {
+            onCancel();
+          }
+        },
+        confirm: {
+          label: 'Confirm',
+          action: () => {
+            onConfirm({
+              type: inputValueState.type,
+              rawContentState: (0, _draftJs.convertToRaw)(inputValueState.editorState.getCurrentContent()),
+              showBaodaozai: inputValueState.showBaodaozai
+            });
+          }
         }
       },
-      confirm: {
-        label: 'Confirm',
-        action: () => {
-          onConfirm({
-            type: inputValueState.type,
-            rawContentState: (0, _draftJs.convertToRaw)(inputValueState.editorState.getCurrentContent())
-          });
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_select.Select, {
+        title: "\u7248\u578B",
+        value: inputValueState.type,
+        options: [{
+          label: InfoBoxLabelEnum.newsChargeStation,
+          value: InfoBoxTypeEnum.newsChargeStation
+        }, {
+          label: InfoBoxLabelEnum.headerBorder,
+          value: InfoBoxTypeEnum.headerBorder
+        }, {
+          label: InfoBoxLabelEnum.boxBorder,
+          value: InfoBoxTypeEnum.boxBorder
+        }],
+        onChange: infoBoxType => {
+          setInputValueState(prev => ({
+            ...prev,
+            type: infoBoxType
+          }));
         }
-      }
-    }
-  }, /*#__PURE__*/_react.default.createElement(_select.Select, {
-    title: "\u7248\u578B",
-    value: inputValueState.type,
-    options: [{
-      label: InfoBoxLabelEnum.newsChargeStation,
-      value: InfoBoxTypeEnum.newsChargeStation
-    }, {
-      label: InfoBoxLabelEnum.headerBorder,
-      value: InfoBoxTypeEnum.headerBorder
-    }, {
-      label: InfoBoxLabelEnum.boxBorder,
-      value: InfoBoxTypeEnum.boxBorder
-    }],
-    onChange: infoBoxType => {
-      setInputValueState({
-        type: infoBoxType,
-        editorState: inputValueState.editorState
-      });
-    }
-  }), /*#__PURE__*/_react.default.createElement(_richTextEditor.RichTextEditor, {
-    decorators: [_annotation.editableAnnotationDecorator, _link.editableLinkDecorator],
-    disabledButtons: disabledButtons,
-    editorState: inputValueState.editorState,
-    onChange: editorState => {
-      setInputValueState({
-        type: inputValueState.type,
-        editorState
-      });
-    }
-  })));
+      }), inputValueState.type !== InfoBoxTypeEnum.newsChargeStation && /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.Checkbox, {
+        label: "\u662F\u5426\u986F\u793A\u5831\u5C0E\u4ED4\u5716\u7247",
+        checked: inputValueState.showBaodaozai ?? false,
+        onChange: checked => {
+          setInputValueState(prev => ({
+            ...prev,
+            showBaodaozai: checked
+          }));
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_richTextEditor.RichTextEditor, {
+        decorators: [_annotation.editableAnnotationDecorator, _link.editableLinkDecorator],
+        disabledButtons: disabledButtons,
+        editorState: inputValueState.editorState,
+        onChange: editorState => {
+          setInputValueState(prev => ({
+            ...prev,
+            editorState
+          }));
+        }
+      })]
+    })
+  });
 }
 const InfoBoxButton = props => {
   const [toShowInput, setToShowInput] = (0, _react.useState)(false);
@@ -102,14 +115,16 @@ const InfoBoxButton = props => {
   } = props;
   const onChange = ({
     type,
-    rawContentState
+    rawContentState,
+    showBaodaozai
   }) => {
     const contentState = editorState.getCurrentContent();
 
     // create an InfoBox entity
     const contentStateWithEntity = contentState.createEntity('INFOBOX', 'IMMUTABLE', {
       type,
-      rawContentState
+      rawContentState,
+      showBaodaozai
     });
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
     const newEditorState = _draftJs.EditorState.set(editorState, {
@@ -121,26 +136,32 @@ const InfoBoxButton = props => {
     onEditorStateChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
     setToShowInput(false);
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowInput && /*#__PURE__*/_react.default.createElement(InfoBoxInput, {
-    onConfirm: onChange,
-    onCancel: () => {
-      setToShowInput(false);
-    },
-    isOpen: toShowInput,
-    inputValue: {
-      type: InfoBoxTypeEnum.newsChargeStation,
-      rawContentState: {
-        blocks: [],
-        entityMap: {}
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [toShowInput && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoBoxInput, {
+      onConfirm: onChange,
+      onCancel: () => {
+        setToShowInput(false);
+      },
+      isOpen: toShowInput,
+      inputValue: {
+        type: InfoBoxTypeEnum.newsChargeStation,
+        rawContentState: {
+          blocks: [],
+          entityMap: {}
+        },
+        showBaodaozai: true
       }
-    }
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: className,
-    onClick: () => {
-      setToShowInput(true);
-    }
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "far"
-  }), /*#__PURE__*/_react.default.createElement("span", null, "InfoBox")));
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: className,
+      onClick: () => {
+        setToShowInput(true);
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: "far"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: "InfoBox"
+      })]
+    })]
+  });
 };
 exports.InfoBoxButton = InfoBoxButton;

package/lib/buttons/link.js

@@ -4,12 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LinkButton = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _draftJs = require("draft-js");
 var _draftRenderer = require("@kids-reporter/draft-renderer");
+var _draftJs = require("draft-js");
+var _react = require("react");
 var _link = require("../entity-decorators/link");
-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");
 const LinkButton = props => {
   const {
     isActive,
@@ -46,16 +45,19 @@ const LinkButton = props => {
     setToShowUrlInput(false);
     props.onEditFinish();
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowUrlInput && /*#__PURE__*/_react.default.createElement(_link.LinkEditor, {
-    isOpen: toShowUrlInput,
-    urlValue: '',
-    onConfirm: confirmLink,
-    onCancel: removeLink
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: props.className,
-    onMouseDown: isActive ? removeLink : promptForLink
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "fas fa-link"
-  })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [toShowUrlInput && /*#__PURE__*/(0, _jsxRuntime.jsx)(_link.LinkEditor, {
+      isOpen: toShowUrlInput,
+      urlValue: '',
+      onConfirm: confirmLink,
+      onCancel: removeLink
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: props.className,
+      onMouseDown: isActive ? removeLink : promptForLink,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: "fas fa-link"
+      })
+    })]
+  });
 };
 exports.LinkButton = LinkButton;

package/lib/buttons/news-reading.js

@@ -5,19 +5,18 @@ 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 }; }
-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 _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 }; }
 // @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 +39,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 +57,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 +75,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 +85,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 +134,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 +152,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,12 +4,12 @@ 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");
-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 _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 Label = _styledComponents.default.label`
   display: block;
   margin: 10px 0;
@@ -44,19 +44,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
+    })]
+  });
 }