@kids-reporter/draft-editor 1.0.16 → 1.0.18

package/lib/buttons/enlarge.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EnlargeButton = EnlargeButton;
 var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function EnlargeButton(props) {
   const {
@@ -12,10 +13,11 @@ function EnlargeButton(props) {
     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,11 +5,12 @@ 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"));
+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; }
@@ -66,7 +67,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 +79,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/select.js

@@ -4,9 +4,10 @@ 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");
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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,9 +4,10 @@ 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");
+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 ImageButton(props) {
@@ -21,7 +22,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 +41,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,22 +5,22 @@ 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");
+var _slideshow = require("./slideshow");
+var _tocAnchor = require("./toc-anchor");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const withStyle = Button => {
   return (0, _styledComponents.default)(Button)`

package/lib/buttons/info-box.js

@@ -5,17 +5,16 @@ 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");
+var _richTextEditor = require("../rich-text-editor");
+var _btNames = _interopRequireDefault(require("./bt-names"));
+var _select = require("./form/select");
+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 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";
@@ -41,57 +40,59 @@ function InfoBoxInput(props) {
     type: inputValue.type,
     editorState: _draftJs.EditorState.createWithContent(contentState)
   });
-  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())
+            });
+          }
         }
       },
-      confirm: {
-        label: 'Confirm',
-        action: () => {
-          onConfirm({
+      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({
+            type: infoBoxType,
+            editorState: inputValueState.editorState
+          });
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_richTextEditor.RichTextEditor, {
+        decorators: [_annotation.editableAnnotationDecorator, _link.editableLinkDecorator],
+        disabledButtons: disabledButtons,
+        editorState: inputValueState.editorState,
+        onChange: editorState => {
+          setInputValueState({
             type: inputValueState.type,
-            rawContentState: (0, _draftJs.convertToRaw)(inputValueState.editorState.getCurrentContent())
+            editorState
           });
         }
-      }
-    }
-  }, /*#__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
-      });
-    }
-  })));
+      })]
+    })
+  });
 }
 const InfoBoxButton = props => {
   const [toShowInput, setToShowInput] = (0, _react.useState)(false);
@@ -121,26 +122,31 @@ 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: {}
+        }
       }
-    }
-  }), /*#__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;