mtxuilib 0.0.308 → 0.0.310

package/dist/esm/ui/novel/tailwind/generative/ai-completion-command.js

@@ -1,3 +1,4 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Check, TextQuote, TrashIcon } from "lucide-react";
 import { CommandGroup, CommandItem, CommandSeparator } from "../ui/command";
 import { useEditor } from "../../novel/src/components";
@@ -9,37 +10,51 @@ const AICompletionCommands = ({
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CommandGroup, null, /* @__PURE__ */ React.createElement(
-    CommandItem,
-    {
-      className: "gap-2 px-4",
-      value: "replace",
-      onSelect: () => {
-        const selection = editor.view.state.selection;
-        editor.chain().focus().insertContentAt(
-          {
-            from: selection.from,
-            to: selection.to
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(CommandGroup, { children: [
+      /* @__PURE__ */ jsxs(
+        CommandItem,
+        {
+          className: "gap-2 px-4",
+          value: "replace",
+          onSelect: () => {
+            const selection = editor.view.state.selection;
+            editor.chain().focus().insertContentAt(
+              {
+                from: selection.from,
+                to: selection.to
+              },
+              completion
+            ).run();
           },
-          completion
-        ).run();
-      }
-    },
-    /* @__PURE__ */ React.createElement(Check, { className: "text-muted-foreground h-4 w-4" }),
-    "Replace selection"
-  ), /* @__PURE__ */ React.createElement(
-    CommandItem,
-    {
-      className: "gap-2 px-4",
-      value: "insert",
-      onSelect: () => {
-        const selection = editor.view.state.selection;
-        editor.chain().focus().insertContentAt(selection.to + 1, completion).run();
-      }
-    },
-    /* @__PURE__ */ React.createElement(TextQuote, { className: "text-muted-foreground h-4 w-4" }),
-    "Insert below"
-  )), /* @__PURE__ */ React.createElement(CommandSeparator, null), /* @__PURE__ */ React.createElement(CommandGroup, null, /* @__PURE__ */ React.createElement(CommandItem, { onSelect: onDiscard, value: "thrash", className: "gap-2 px-4" }, /* @__PURE__ */ React.createElement(TrashIcon, { className: "text-muted-foreground h-4 w-4" }), "Discard")));
+          children: [
+            /* @__PURE__ */ jsx(Check, { className: "text-muted-foreground h-4 w-4" }),
+            "Replace selection"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        CommandItem,
+        {
+          className: "gap-2 px-4",
+          value: "insert",
+          onSelect: () => {
+            const selection = editor.view.state.selection;
+            editor.chain().focus().insertContentAt(selection.to + 1, completion).run();
+          },
+          children: [
+            /* @__PURE__ */ jsx(TextQuote, { className: "text-muted-foreground h-4 w-4" }),
+            "Insert below"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(CommandSeparator, {}),
+    /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsxs(CommandItem, { onSelect: onDiscard, value: "thrash", className: "gap-2 px-4", children: [
+      /* @__PURE__ */ jsx(TrashIcon, { className: "text-muted-foreground h-4 w-4" }),
+      "Discard"
+    ] }) })
+  ] });
 };
 var ai_completion_command_default = AICompletionCommands;
 export {

package/dist/esm/ui/novel/tailwind/generative/ai-selector-commands.js

@@ -1,3 +1,4 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
   ArrowDownWideNarrow,
   CheckCheck,
@@ -34,35 +35,43 @@ const AISelectorCommands = ({ onSelect }) => {
   const { editor } = useEditor();
   if (!editor)
     return null;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CommandGroup, { heading: "Edit or review selection" }, options.map((option) => /* @__PURE__ */ React.createElement(
-    CommandItem,
-    {
-      onSelect: (value) => {
-        const slice = editor.state.selection.content();
-        const text = editor.storage.markdown.serializer.serialize(
-          slice.content
-        );
-        onSelect(text, value);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CommandGroup, { heading: "Edit or review selection", children: options.map((option) => /* @__PURE__ */ jsxs(
+      CommandItem,
+      {
+        onSelect: (value) => {
+          const slice = editor.state.selection.content();
+          const text = editor.storage.markdown.serializer.serialize(
+            slice.content
+          );
+          onSelect(text, value);
+        },
+        className: "flex gap-2 px-4",
+        value: option.value,
+        children: [
+          /* @__PURE__ */ jsx(option.icon, { className: "h-4 w-4 text-purple-500" }),
+          option.label
+        ]
       },
-      className: "flex gap-2 px-4",
-      key: option.value,
-      value: option.value
-    },
-    /* @__PURE__ */ React.createElement(option.icon, { className: "h-4 w-4 text-purple-500" }),
-    option.label
-  ))), /* @__PURE__ */ React.createElement(CommandSeparator, null), /* @__PURE__ */ React.createElement(CommandGroup, { heading: "Use AI to do more" }, /* @__PURE__ */ React.createElement(
-    CommandItem,
-    {
-      onSelect: () => {
-        const text = getPrevText(editor, { chars: 5e3 });
-        onSelect(text, "continue");
-      },
-      value: "continue",
-      className: "gap-2 px-4"
-    },
-    /* @__PURE__ */ React.createElement(StepForward, { className: "h-4 w-4 text-purple-500" }),
-    "Continue writing"
-  )));
+      option.value
+    )) }),
+    /* @__PURE__ */ jsx(CommandSeparator, {}),
+    /* @__PURE__ */ jsx(CommandGroup, { heading: "Use AI to do more", children: /* @__PURE__ */ jsxs(
+      CommandItem,
+      {
+        onSelect: () => {
+          const text = getPrevText(editor, { chars: 5e3 });
+          onSelect(text, "continue");
+        },
+        value: "continue",
+        className: "gap-2 px-4",
+        children: [
+          /* @__PURE__ */ jsx(StepForward, { className: "h-4 w-4 text-purple-500" }),
+          "Continue writing"
+        ]
+      }
+    ) })
+  ] });
 };
 var ai_selector_commands_default = AISelectorCommands;
 export {

package/dist/esm/ui/novel/tailwind/generative/ai-selector.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCompletion } from "ai/react";
 import { ArrowUp } from "lucide-react";
 import { useState } from "react";
@@ -32,49 +33,63 @@ function AISelector({ onOpenChange }) {
   const hasCompletion = completion.length > 0;
   if (!editor)
     return null;
-  return /* @__PURE__ */ React.createElement(Command, { className: "w-[350px]" }, hasCompletion && /* @__PURE__ */ React.createElement("div", { className: "flex max-h-[400px]" }, /* @__PURE__ */ React.createElement(ScrollArea, null, /* @__PURE__ */ React.createElement("div", { className: "prose prose-sm p-2 px-4" }, /* @__PURE__ */ React.createElement(Markdown, null, completion)))), isLoading && /* @__PURE__ */ React.createElement("div", { className: "text-muted-foreground flex h-12 w-full items-center px-4 text-sm font-medium text-purple-500" }, /* @__PURE__ */ React.createElement(Magic, { className: "mr-2 h-4 w-4 shrink-0  " }), "AI is thinking", /* @__PURE__ */ React.createElement("div", { className: "ml-2 mt-1" }, /* @__PURE__ */ React.createElement(CrazySpinner, null))), !isLoading && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(
-    CommandInput,
-    {
-      value: inputValue,
-      onValueChange: setInputValue,
-      autoFocus: true,
-      placeholder: hasCompletion ? "Tell AI what to do next" : "Ask AI to edit or generate...",
-      onFocus: () => addAIHighlight(editor)
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      size: "icon",
-      className: "absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full bg-purple-500 hover:bg-purple-900",
-      onClick: () => {
-        if (completion)
-          return complete(completion, {
-            body: { option: "zap", command: inputValue }
-          }).then(() => setInputValue(""));
-        const slice = editor.state.selection.content();
-        const text = editor.storage.markdown.serializer.serialize(
-          slice.content
-        );
-        complete(text, {
-          body: { option: "zap", command: inputValue }
-        }).then(() => setInputValue(""));
-      }
-    },
-    /* @__PURE__ */ React.createElement(ArrowUp, { className: "h-4 w-4" })
-  )), hasCompletion ? /* @__PURE__ */ React.createElement(
-    AICompletionCommands,
-    {
-      onDiscard: () => {
-        onOpenChange(false);
-      },
-      completion
-    }
-  ) : /* @__PURE__ */ React.createElement(
-    AISelectorCommands,
-    {
-      onSelect: (value, option) => complete(value, { body: { option } })
-    }
-  )));
+  return /* @__PURE__ */ jsxs(Command, { className: "w-[350px]", children: [
+    hasCompletion && /* @__PURE__ */ jsx("div", { className: "flex max-h-[400px]", children: /* @__PURE__ */ jsx(ScrollArea, { children: /* @__PURE__ */ jsx("div", { className: "prose prose-sm p-2 px-4", children: /* @__PURE__ */ jsx(Markdown, { children: completion }) }) }) }),
+    isLoading && /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex h-12 w-full items-center px-4 text-sm font-medium text-purple-500", children: [
+      /* @__PURE__ */ jsx(Magic, { className: "mr-2 h-4 w-4 shrink-0  " }),
+      "AI is thinking",
+      /* @__PURE__ */ jsx("div", { className: "ml-2 mt-1", children: /* @__PURE__ */ jsx(CrazySpinner, {}) })
+    ] }),
+    !isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          CommandInput,
+          {
+            value: inputValue,
+            onValueChange: setInputValue,
+            autoFocus: true,
+            placeholder: hasCompletion ? "Tell AI what to do next" : "Ask AI to edit or generate...",
+            onFocus: () => addAIHighlight(editor)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "icon",
+            className: "absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full bg-purple-500 hover:bg-purple-900",
+            onClick: () => {
+              if (completion)
+                return complete(completion, {
+                  body: { option: "zap", command: inputValue }
+                }).then(() => setInputValue(""));
+              const slice = editor.state.selection.content();
+              const text = editor.storage.markdown.serializer.serialize(
+                slice.content
+              );
+              complete(text, {
+                body: { option: "zap", command: inputValue }
+              }).then(() => setInputValue(""));
+            },
+            children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4" })
+          }
+        )
+      ] }),
+      hasCompletion ? /* @__PURE__ */ jsx(
+        AICompletionCommands,
+        {
+          onDiscard: () => {
+            onOpenChange(false);
+          },
+          completion
+        }
+      ) : /* @__PURE__ */ jsx(
+        AISelectorCommands,
+        {
+          onSelect: (value, option) => complete(value, { body: { option } })
+        }
+      )
+    ] })
+  ] });
 }
 export {
   AISelector

package/dist/esm/ui/novel/tailwind/generative/generative-menu-switch.js

@@ -1,3 +1,4 @@
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect } from "react";
 import { removeAIHighlight } from "../../novel/src/extensions";
 import { Button } from "../ui/button";
@@ -18,7 +19,7 @@ const GenerativeMenuSwitch = ({
   }, [open]);
   if (!editor)
     return;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     EditorBubble,
     {
       tippyOptions: {
@@ -27,20 +28,27 @@ const GenerativeMenuSwitch = ({
           onOpenChange(false);
         }
       },
-      className: "border-muted bg-background flex w-fit max-w-[90vw] overflow-hidden rounded-md border shadow-xl"
-    },
-    open && /* @__PURE__ */ React.createElement(AISelector, { open, onOpenChange }),
-    !open && /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        className: "gap-1 rounded-none text-purple-500",
-        variant: "ghost",
-        onClick: () => onOpenChange(true),
-        size: "sm"
-      },
-      /* @__PURE__ */ React.createElement(Magic, { className: "h-5 w-5" }),
-      "Ask AI"
-    ), children)
+      className: "border-muted bg-background flex w-fit max-w-[90vw] overflow-hidden rounded-md border shadow-xl",
+      children: [
+        open && /* @__PURE__ */ jsx(AISelector, { open, onOpenChange }),
+        !open && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              className: "gap-1 rounded-none text-purple-500",
+              variant: "ghost",
+              onClick: () => onOpenChange(true),
+              size: "sm",
+              children: [
+                /* @__PURE__ */ jsx(Magic, { className: "h-5 w-5" }),
+                "Ask AI"
+              ]
+            }
+          ),
+          children
+        ] })
+      ]
+    }
   );
 };
 var generative_menu_switch_default = GenerativeMenuSwitch;

package/dist/esm/ui/novel/tailwind/selectors/color-selector.js

@@ -1,3 +1,4 @@
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown } from "lucide-react";
 import { Button } from "../ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
@@ -88,63 +89,85 @@ const ColorSelector = (props) => {
   const activeHighlightItem = HIGHLIGHT_COLORS.find(
     ({ color }) => editor.isActive("highlight", { color })
   );
-  return /* @__PURE__ */ React.createElement(Popover, { modal: true, open: props.open, onOpenChange: props.onOpenChange }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(Button, { size: "sm", className: "gap-2 rounded-none", variant: "ghost" }, /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: "rounded-sm px-1",
-      style: {
-        color: activeColorItem == null ? void 0 : activeColorItem.color,
-        backgroundColor: activeHighlightItem == null ? void 0 : activeHighlightItem.color
-      }
-    },
-    "A"
-  ), /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-4 w-4" }))), /* @__PURE__ */ React.createElement(
-    PopoverContent,
-    {
-      sideOffset: 5,
-      className: "my-1 flex max-h-80 w-48 flex-col overflow-hidden overflow-y-auto rounded border p-1 shadow-xl ",
-      align: "start"
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "text-muted-foreground my-1 px-2 text-sm font-semibold" }, "Color"), TEXT_COLORS.map(({ name, color }, index) => /* @__PURE__ */ React.createElement(
-      EditorBubbleItem,
-      {
-        key: index,
-        onSelect: () => {
-          editor.commands.unsetColor();
-          name !== "Default" && editor.chain().focus().setColor(color || "").run();
-        },
-        className: "hover:bg-accent flex cursor-pointer items-center justify-between px-2 py-1 text-sm"
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
-        "div",
+  return /* @__PURE__ */ jsxs(Popover, { modal: true, open: props.open, onOpenChange: props.onOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { size: "sm", className: "gap-2 rounded-none", variant: "ghost", children: [
+      /* @__PURE__ */ jsx(
+        "span",
         {
-          className: "rounded-sm border px-2 py-px font-medium",
-          style: { color }
-        },
-        "A"
-      ), /* @__PURE__ */ React.createElement("span", null, name))
-    ))),
-    /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-muted-foreground my-1 px-2 text-sm font-semibold" }, "Background"), HIGHLIGHT_COLORS.map(({ name, color }, index) => /* @__PURE__ */ React.createElement(
-      EditorBubbleItem,
+          className: "rounded-sm px-1",
+          style: {
+            color: activeColorItem == null ? void 0 : activeColorItem.color,
+            backgroundColor: activeHighlightItem == null ? void 0 : activeHighlightItem.color
+          },
+          children: "A"
+        }
+      ),
+      /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+    ] }) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
       {
-        key: index,
-        onSelect: () => {
-          editor.commands.unsetHighlight();
-          name !== "Default" && editor.commands.setHighlight({ color });
-        },
-        className: "hover:bg-accent flex cursor-pointer items-center justify-between px-2 py-1 text-sm"
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: "rounded-sm border px-2 py-px font-medium",
-          style: { backgroundColor: color }
-        },
-        "A"
-      ), /* @__PURE__ */ React.createElement("span", null, name)),
-      editor.isActive("highlight", { color }) && /* @__PURE__ */ React.createElement(Check, { className: "h-4 w-4" })
-    )))
-  ));
+        sideOffset: 5,
+        className: "my-1 flex max-h-80 w-48 flex-col overflow-hidden overflow-y-auto rounded border p-1 shadow-xl ",
+        align: "start",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-muted-foreground my-1 px-2 text-sm font-semibold", children: "Color" }),
+            TEXT_COLORS.map(({ name, color }, index) => /* @__PURE__ */ jsx(
+              EditorBubbleItem,
+              {
+                onSelect: () => {
+                  editor.commands.unsetColor();
+                  name !== "Default" && editor.chain().focus().setColor(color || "").run();
+                },
+                className: "hover:bg-accent flex cursor-pointer items-center justify-between px-2 py-1 text-sm",
+                children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "rounded-sm border px-2 py-px font-medium",
+                      style: { color },
+                      children: "A"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { children: name })
+                ] })
+              },
+              index
+            ))
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-muted-foreground my-1 px-2 text-sm font-semibold", children: "Background" }),
+            HIGHLIGHT_COLORS.map(({ name, color }, index) => /* @__PURE__ */ jsxs(
+              EditorBubbleItem,
+              {
+                onSelect: () => {
+                  editor.commands.unsetHighlight();
+                  name !== "Default" && editor.commands.setHighlight({ color });
+                },
+                className: "hover:bg-accent flex cursor-pointer items-center justify-between px-2 py-1 text-sm",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "rounded-sm border px-2 py-px font-medium",
+                        style: { backgroundColor: color },
+                        children: "A"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { children: name })
+                  ] }),
+                  editor.isActive("highlight", { color }) && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
+                ]
+              },
+              index
+            ))
+          ] })
+        ]
+      }
+    )
+  ] });
 };
 export {
   ColorSelector

package/dist/esm/ui/novel/tailwind/selectors/link-selector.js

@@ -1,3 +1,4 @@
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Popover, PopoverTrigger } from "@radix-ui/react-popover";
 import { Check, Trash } from "lucide-react";
 import {
@@ -36,59 +37,66 @@ const LinkSelector = ({ open, onOpenChange }) => {
   });
   if (!editor)
     return null;
-  return /* @__PURE__ */ React.createElement(Popover, { modal: true, open, onOpenChange }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      size: "sm",
-      variant: "ghost",
-      className: "gap-2 rounded-none border-none"
-    },
-    /* @__PURE__ */ React.createElement("p", { className: "text-base" }, "\u2197"),
-    /* @__PURE__ */ React.createElement(
-      "p",
-      {
-        className: cn("underline decoration-stone-400 underline-offset-4", {
-          "text-blue-500": editor.isActive("link")
-        })
-      },
-      "Link"
-    )
-  )), /* @__PURE__ */ React.createElement(PopoverContent, { align: "start", className: "w-60 p-0", sideOffset: 10 }, /* @__PURE__ */ React.createElement(
-    "form",
-    {
-      onSubmit: (e) => {
-        const target = e.currentTarget;
-        e.preventDefault();
-        const input = target[0];
-        const url = getUrlFromString(input.value);
-        url && editor.chain().focus().setLink({ href: url }).run();
-      },
-      className: "flex  p-1 "
-    },
-    /* @__PURE__ */ React.createElement(
-      "input",
+  return /* @__PURE__ */ jsxs(Popover, { modal: true, open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
       {
-        ref: inputRef,
-        type: "text",
-        placeholder: "Paste a link",
-        className: "bg-background flex-1 p-1 text-sm outline-none",
-        defaultValue: editor.getAttributes("link").href || ""
+        size: "sm",
+        variant: "ghost",
+        className: "gap-2 rounded-none border-none",
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "text-base", children: "\u2197" }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn("underline decoration-stone-400 underline-offset-4", {
+                "text-blue-500": editor.isActive("link")
+              }),
+              children: "Link"
+            }
+          )
+        ]
       }
-    ),
-    editor.getAttributes("link").href ? /* @__PURE__ */ React.createElement(
-      Button,
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "w-60 p-0", sideOffset: 10, children: /* @__PURE__ */ jsxs(
+      "form",
       {
-        size: "icon",
-        variant: "outline",
-        type: "button",
-        className: "flex h-8 items-center rounded-sm p-1 text-red-600 transition-all hover:bg-red-100 dark:hover:bg-red-800",
-        onClick: () => {
-          editor.chain().focus().unsetLink().run();
-        }
-      },
-      /* @__PURE__ */ React.createElement(Trash, { className: "h-4 w-4" })
-    ) : /* @__PURE__ */ React.createElement(Button, { size: "icon", className: "h-8" }, /* @__PURE__ */ React.createElement(Check, { className: "h-4 w-4" }))
-  )));
+        onSubmit: (e) => {
+          const target = e.currentTarget;
+          e.preventDefault();
+          const input = target[0];
+          const url = getUrlFromString(input.value);
+          url && editor.chain().focus().setLink({ href: url }).run();
+        },
+        className: "flex  p-1 ",
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              placeholder: "Paste a link",
+              className: "bg-background flex-1 p-1 text-sm outline-none",
+              defaultValue: editor.getAttributes("link").href || ""
+            }
+          ),
+          editor.getAttributes("link").href ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "icon",
+              variant: "outline",
+              type: "button",
+              className: "flex h-8 items-center rounded-sm p-1 text-red-600 transition-all hover:bg-red-100 dark:hover:bg-red-800",
+              onClick: () => {
+                editor.chain().focus().unsetLink().run();
+              },
+              children: /* @__PURE__ */ jsx(Trash, { className: "h-4 w-4" })
+            }
+          ) : /* @__PURE__ */ jsx(Button, { size: "icon", className: "h-8", children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) })
+        ]
+      }
+    ) })
+  ] });
 };
 export {
   LinkSelector,