@kids-reporter/draft-editor 1.0.17 → 1.0.19

package/lib/buttons/embedded-code.js

@@ -5,15 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EmbeddedCodeButton = EmbeddedCodeButton;
 exports.EmbeddedCodeInput = EmbeddedCodeInput;
-var _react = _interopRequireWildcard(require("react"));
+var _fields = require("@keystone-ui/fields");
+var _modals = require("@keystone-ui/modals");
 var _draftJs = require("draft-js");
+var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _modals = require("@keystone-ui/modals");
-var _fields = require("@keystone-ui/fields");
 var _alignSelector = require("./selector/align-selector");
-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); }
 var AlignOption = /*#__PURE__*/function (AlignOption) {
   AlignOption["Paragraph"] = "paragraph-width";
   AlignOption["Image"] = "image-width";
@@ -42,67 +42,69 @@ function EmbeddedCodeInput({
     onConfirm(inputValueState);
   };
   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;
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
-    isOpen: isOpen
-  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
-    title: "\u9472\u5D4C\u7A0B\u5F0F\u78BC\uFF08Embedded Code\uFF09"
-    //isOpen={toShowInput}
-    ,
-    actions: {
-      cancel: {
-        label: 'Cancel',
-        action: onCancel
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_modals.DrawerController, {
+    isOpen: isOpen,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_modals.Drawer, {
+      title: "\u9472\u5D4C\u7A0B\u5F0F\u78BC\uFF08Embedded Code\uFF09"
+      //isOpen={toShowInput}
+      ,
+      actions: {
+        cancel: {
+          label: 'Cancel',
+          action: onCancel
+        },
+        confirm: {
+          label: 'Confirm',
+          action: confirmInput
+        }
       },
-      confirm: {
-        label: 'Confirm',
-        action: confirmInput
-      }
-    }
-  }, /*#__PURE__*/_react.default.createElement(Container, {
-    ref: contentWrapperRef
-  }, /*#__PURE__*/_react.default.createElement(_fields.TextArea, {
-    onChange: e => setInputValue({
-      caption: inputValueState.caption,
-      align: inputValueState.align,
-      embeddedCode: e.target.value
-    }),
-    placeholder: "Embedded Code",
-    type: "text",
-    value: inputValueState.embeddedCode,
-    style: {
-      marginBottom: '30px'
-    }
-  }), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
-    onChange: e => setInputValue({
-      caption: e.target.value,
-      align: inputValueState.align,
-      embeddedCode: inputValueState.embeddedCode
-    }),
-    type: "text",
-    placeholder: "Caption",
-    value: inputValueState.caption,
-    style: {
-      marginBottom: '10px',
-      marginTop: '30px'
-    }
-  }), /*#__PURE__*/_react.default.createElement(_alignSelector.AlignSelector, {
-    align: inputValueState.align,
-    options: options,
-    onChange: align => {
-      setInputValue({
-        caption: inputValueState.caption,
-        align: align,
-        embeddedCode: inputValueState.embeddedCode
-      });
-    },
-    onOpen: onAlignSelectOpen
-  }))));
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+        ref: contentWrapperRef,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_fields.TextArea, {
+          onChange: e => setInputValue({
+            caption: inputValueState.caption,
+            align: inputValueState.align,
+            embeddedCode: e.target.value
+          }),
+          placeholder: "Embedded Code",
+          type: "text",
+          value: inputValueState.embeddedCode,
+          style: {
+            marginBottom: '30px'
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_fields.TextInput, {
+          onChange: e => setInputValue({
+            caption: e.target.value,
+            align: inputValueState.align,
+            embeddedCode: inputValueState.embeddedCode
+          }),
+          type: "text",
+          placeholder: "Caption",
+          value: inputValueState.caption,
+          style: {
+            marginBottom: '10px',
+            marginTop: '30px'
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_alignSelector.AlignSelector, {
+          align: inputValueState.align,
+          options: options,
+          onChange: align => {
+            setInputValue({
+              caption: inputValueState.caption,
+              align: align,
+              embeddedCode: inputValueState.embeddedCode
+            });
+          },
+          onOpen: onAlignSelectOpen
+        })]
+      })
+    })
+  });
 }
 function EmbeddedCodeButton(props) {
   const {
@@ -130,20 +132,25 @@ function EmbeddedCodeButton(props) {
   const onInputCancel = () => {
     setIsInputOpen(false);
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isInputOpen && /*#__PURE__*/_react.default.createElement(EmbeddedCodeInput, {
-    isOpen: isInputOpen,
-    onConfirm: onInputChange,
-    onCancel: onInputCancel,
-    inputValue: {
-      caption: '',
-      embeddedCode: ''
-    }
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    onClick: () => {
-      promptForInput();
-    },
-    className: className
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "far"
-  }), /*#__PURE__*/_react.default.createElement("span", null, "Embed")));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+    children: [isInputOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(EmbeddedCodeInput, {
+      isOpen: isInputOpen,
+      onConfirm: onInputChange,
+      onCancel: onInputCancel,
+      inputValue: {
+        caption: '',
+        embeddedCode: ''
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      onClick: () => {
+        promptForInput();
+      },
+      className: className,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: "far"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: "Embed"
+      })]
+    })]
+  });
 }

package/lib/buttons/enlarge.js

@@ -5,17 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EnlargeButton = EnlargeButton;
 var _react = _interopRequireDefault(require("react"));
-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 }; }
 function EnlargeButton(props) {
   const {
     onToggle,
     isEnlarged,
     className
   } = props;
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: className,
-    onClick: onToggle
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: isEnlarged ? 'fas fa-compress' : 'fas fa-expand'
-  }));
+    onClick: onToggle,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+      className: isEnlarged ? 'fas fa-compress' : 'fas fa-expand'
+    })
+  });
 }

package/lib/buttons/font-color.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FontColorButton = FontColorButton;
 exports.customStylePrefix = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _fields = require("@keystone-ui/fields");
 var _modals = require("@keystone-ui/modals");
 var _draftJs = require("draft-js");
-var _fields = require("@keystone-ui/fields");
+var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-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 customStylePrefix = exports.customStylePrefix = 'FONT_COLOR_';
 const ColorHexInput = (0, _styledComponents.default)(_fields.TextInput)`
   margin-right: 10px;
@@ -66,7 +66,7 @@ function FontColorButton(props) {
     setToShowColorInput(false);
     setColorValue('');
   };
-  const colorInput = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
+  const colorInput = /*#__PURE__*/(0, _jsxRuntime.jsx)(_modals.AlertDialog, {
     title: "Hex Color Code (#ffffff)",
     isOpen: toShowColorInput,
     actions: {
@@ -78,17 +78,21 @@ function FontColorButton(props) {
         label: 'Confirm',
         action: confirmColor
       }
-    }
-  }, /*#__PURE__*/_react.default.createElement(ColorHexInput, {
-    onChange: e => setColorValue(e.target.value),
-    type: "text",
-    value: colorValue,
-    onKeyDown: onColorInputKeyDown
-  }));
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, colorInput, /*#__PURE__*/_react.default.createElement("div", {
-    className: props.className,
-    onMouseDown: isActive ? removeColor : promptForColor
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "fas fa-palette"
-  })));
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorHexInput, {
+      onChange: e => setColorValue(e.target.value),
+      type: "text",
+      value: colorValue,
+      onKeyDown: onColorInputKeyDown
+    })
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+    children: [colorInput, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: props.className,
+      onMouseDown: isActive ? removeColor : promptForColor,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: "fas fa-palette"
+      })
+    })]
+  });
 }

package/lib/buttons/form/checkbox.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Checkbox = Checkbox;
+var _react = _interopRequireDefault(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 CheckboxBlock = _styledComponents.default.div`
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+`;
+const Label = _styledComponents.default.label`
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+  cursor: pointer;
+`;
+const CheckboxInput = _styledComponents.default.input`
+  margin-right: 8px;
+  cursor: pointer;
+`;
+function Checkbox({
+  label,
+  checked,
+  onChange
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckboxBlock, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CheckboxInput, {
+        type: "checkbox",
+        checked: checked,
+        onChange: e => {
+          onChange(e.target.checked);
+        }
+      }), label]
+    })
+  });
+}

package/lib/buttons/form/select.js

@@ -4,10 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Select = Select;
+var _fields = require("@keystone-ui/fields");
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _fields = require("@keystone-ui/fields");
-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 SelectBlock = _styledComponents.default.div`
   margin: 10px 0;
 `;
@@ -22,13 +23,16 @@ function Select({
   options,
   onChange
 }) {
-  return /*#__PURE__*/_react.default.createElement(SelectBlock, null, /*#__PURE__*/_react.default.createElement(Label, {
-    htmlFor: title
-  }, title), /*#__PURE__*/_react.default.createElement(_fields.Select, {
-    value: options.find(option => option.value === value) || null,
-    options: options,
-    onChange: option => {
-      onChange(option.value);
-    }
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SelectBlock, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+      htmlFor: title,
+      children: title
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_fields.Select, {
+      value: options.find(option => option.value === value) || null,
+      options: options,
+      onChange: option => {
+        onChange(option.value);
+      }
+    })]
+  });
 }

package/lib/buttons/image-link.js

@@ -4,12 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ImageLinkButton = void 0;
-var _react = _interopRequireWildcard(require("react"));
 var _draftJs = require("draft-js");
+var _react = require("react");
 var _imageLink = require("../block-renderers/image-link");
 var _imageSelector = require("../buttons/selector/image-selector");
-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 ImageLinkButton = props => {
   const {
     editorState,
@@ -41,25 +40,30 @@ const ImageLinkButton = props => {
     onEditorStateChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
     setIsEditorOpen(false);
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isEditorOpen && /*#__PURE__*/_react.default.createElement(_imageLink.ImageLinkEditor, {
-    isOpen: isEditorOpen,
-    inputValue: {
-      url: '',
-      alignment: _imageSelector.ImageAlignment.DEFAULT,
-      rawContentState: {
-        blocks: [],
-        entityMap: {}
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [isEditorOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_imageLink.ImageLinkEditor, {
+      isOpen: isEditorOpen,
+      inputValue: {
+        url: '',
+        alignment: _imageSelector.ImageAlignment.DEFAULT,
+        rawContentState: {
+          blocks: [],
+          entityMap: {}
+        }
+      },
+      onConfirm: onChange,
+      onCancel: () => {
+        setIsEditorOpen(false);
       }
-    },
-    onConfirm: onChange,
-    onCancel: () => {
-      setIsEditorOpen(false);
-    }
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: className,
-    onClick: promptForImageLinkEditor
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "far fa-image"
-  }), /*#__PURE__*/_react.default.createElement("span", null, " ImageLink")));
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: className,
+      onClick: promptForImageLinkEditor,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: "far fa-image"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: " ImageLink"
+      })]
+    })]
+  });
 };
 exports.ImageLinkButton = ImageLinkButton;

package/lib/buttons/image.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ImageButton = ImageButton;
-var _react = _interopRequireWildcard(require("react"));
 var _draftJs = require("draft-js");
+var _react = _interopRequireWildcard(require("react"));
 var _imageSelector = require("./selector/image-selector");
-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 ImageButton(props) {
   const {
     editorState,
@@ -21,7 +21,7 @@ function ImageButton(props) {
     setToShowImageSelector(true);
   };
   const onImageSelectorChange = (selectedImages, alignment) => {
-    const selected = selectedImages === null || selectedImages === void 0 ? void 0 : selectedImages[0];
+    const selected = selectedImages?.[0];
     if (!selected) {
       setToShowImageSelector(false);
       return;
@@ -40,14 +40,19 @@ function ImageButton(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,
-    enableAlignment: true
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: className,
-    onClick: promptForImageSelector
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "far fa-image"
-  }), /*#__PURE__*/_react.default.createElement("span", null, " Image")));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+    children: [toShowImageSelector && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageSelector, {
+      onChange: onImageSelectorChange,
+      enableCaption: true,
+      enableAlignment: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: className,
+      onClick: promptForImageSelector,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: "far fa-image"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: " Image"
+      })]
+    })]
+  });
 }

package/lib/buttons/index.js

@@ -5,23 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.withStyle = exports.InlineStyleControls = exports.CustomTOCAnchorButton = exports.CustomSlideshowButton = exports.CustomNewsReadingButton = exports.CustomLinkButton = exports.CustomInfoBoxButton = exports.CustomImageLinkButton = exports.CustomImageButton = exports.CustomFontColorButton = exports.CustomEnlargeButton = exports.CustomEmbeddedCodeButton = exports.CustomDividerButton = exports.CustomBlockquoteButton = exports.CustomBackgroundColorButton = exports.CustomAnnotationButton = exports.CustomAnchorButton = exports.BlockStyleControls = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _controlButtons = require("./control-buttons");
+var _anchor = require("./anchor");
+var _annotation = require("./annotation");
 var _bgColor = require("./bg-color");
 var _blockquote = require("./blockquote");
+var _controlButtons = require("./control-buttons");
 var _divider = require("./divider");
 var _embeddedCode = require("./embedded-code");
 var _enlarge = require("./enlarge");
 var _fontColor = require("./font-color");
 var _image = require("./image");
 var _imageLink = require("./image-link");
-var _tocAnchor = require("./toc-anchor");
-var _anchor = require("./anchor");
+var _infoBox = require("./info-box");
 var _link = require("./link");
-var _annotation = require("./annotation");
-var _slideshow = require("./slideshow");
 var _newsReading = require("./news-reading");
-var _infoBox = require("./info-box");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _slideshow = require("./slideshow");
+var _tocAnchor = require("./toc-anchor");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const withStyle = Button => {
   return (0, _styledComponents.default)(Button)`
     ${_controlButtons.buttonStyle}