@tnd028/strapi-plugin-tiptap-editor 0.0.1

package/dist/_chunks/Iframe-DCBWSb0v.mjs

@@ -0,0 +1,165 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Popover, Typography, Grid } from "@strapi/design-system";
+import { Youtube } from "lucide-react";
+import { forwardRef, useState, useCallback } from "react";
+import styled from "styled-components";
+import { u as useEditorContext, T as ToolbarButton } from "./TiptapEditorInput-BDE09h5-.mjs";
+const IframeIcon = styled(Youtube)`
+  width: 20px;
+  height: 20px;
+`;
+const PopoverContent = styled(Popover.Content)`
+  width: 100%;
+  min-width: 360px;
+  padding: 12px;
+`;
+const FormGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 6px;
+`;
+const Label = styled.label`
+  font-size: 13px;
+  font-weight: 500;
+  color: ${(props) => props.theme.colors.neutral700};
+`;
+const Input = styled.input`
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: 14px;
+  width: 100%;
+  &:focus {
+    outline: none;
+    border-color: ${(props) => props.theme.colors.primary500};
+  }
+`;
+const ButtonRow = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+  gap: 8px;
+`;
+const SmallButton = styled.button`
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 13px;
+  cursor: pointer;
+  border: none;
+  background-color: ${({ variant, theme }) => variant === "primary" ? theme.colors.primary600 : theme.colors.neutral100};
+  color: ${({ variant, theme }) => variant === "primary" ? theme.colors.neutral0 : theme.colors.neutral700};
+
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+const IframeToolbar = forwardRef(
+  ({ className, onClick, children, ...props }, ref) => {
+    const { editor } = useEditorContext();
+    const [open, setOpen] = useState(false);
+    const [src, setSrc] = useState("");
+    const [width, setWidth] = useState("560");
+    const [height, setHeight] = useState("315");
+    const [allowFullscreen, setAllowFullscreen] = useState(true);
+    const [error, setError] = useState("");
+    const onInsertIframe = useCallback(() => {
+      if (!src) {
+        setError("Please enter a URL");
+        return;
+      }
+      try {
+        new URL(src);
+      } catch (e) {
+        setError("Invalid URL format.");
+        return;
+      }
+      editor?.chain().focus().setIframe({
+        src,
+        width,
+        height,
+        allowfullscreen: allowFullscreen,
+        frameborder: 0
+      }).run();
+      setOpen(false);
+      setSrc("");
+      setError("");
+    }, [editor, src, width, height, allowFullscreen]);
+    return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          tooltip: "Insert Iframe",
+          "aria-label": "Insert Iframe",
+          isActive: editor?.isActive("iframe"),
+          ...props,
+          ref,
+          children: /* @__PURE__ */ jsx(IframeIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(PopoverContent, { align: "start", side: "bottom", children: [
+        /* @__PURE__ */ jsxs(FormGroup, { children: [
+          /* @__PURE__ */ jsx(Label, { children: "Iframe Source (URL)" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "url",
+              placeholder: "https://www.youtube.com/embed/xxxx",
+              value: src,
+              onChange: (e) => {
+                setSrc(e.target.value);
+                if (error) setError("");
+              },
+              style: { borderColor: error ? "#d02b20" : void 0 }
+            }
+          ),
+          error && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "danger600", children: error })
+        ] }),
+        /* @__PURE__ */ jsxs(Grid.Root, { gap: 6, children: [
+          /* @__PURE__ */ jsx(Grid.Item, { xs: 6, children: /* @__PURE__ */ jsxs(FormGroup, { children: [
+            /* @__PURE__ */ jsx(Label, { children: "Width (px)" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "number",
+                value: width,
+                onChange: (e) => setWidth(e.target.value)
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx(Grid.Item, { xs: 6, children: /* @__PURE__ */ jsxs(FormGroup, { children: [
+            /* @__PURE__ */ jsx(Label, { children: "Height (px)" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "number",
+                value: height,
+                onChange: (e) => setHeight(e.target.value)
+              }
+            )
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsx(FormGroup, { children: /* @__PURE__ */ jsxs("label", { style: { fontSize: "13px", display: "flex", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: allowFullscreen,
+              onChange: (e) => setAllowFullscreen(e.target.checked),
+              style: { marginRight: "6px" }
+            }
+          ),
+          "Allow Fullscreen"
+        ] }) }),
+        /* @__PURE__ */ jsxs(ButtonRow, { children: [
+          /* @__PURE__ */ jsx(SmallButton, { onClick: () => setOpen(false), children: "Cancel" }),
+          /* @__PURE__ */ jsx(SmallButton, { variant: "primary", onClick: onInsertIframe, children: "Insert" })
+        ] })
+      ] })
+    ] });
+  }
+);
+IframeToolbar.displayName = "IframeToolbar";
+export {
+  IframeToolbar
+};

package/dist/_chunks/Iframe-Dyn_2cMB.js

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const designSystem = require("@strapi/design-system");
+const lucideReact = require("lucide-react");
+const React = require("react");
+const styled = require("styled-components");
+const TiptapEditorInput = require("./TiptapEditorInput-vfLsCt1p.js");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const IframeIcon = styled__default.default(lucideReact.Youtube)`
+  width: 20px;
+  height: 20px;
+`;
+const PopoverContent = styled__default.default(designSystem.Popover.Content)`
+  width: 100%;
+  min-width: 360px;
+  padding: 12px;
+`;
+const FormGroup = styled__default.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 6px;
+`;
+const Label = styled__default.default.label`
+  font-size: 13px;
+  font-weight: 500;
+  color: ${(props) => props.theme.colors.neutral700};
+`;
+const Input = styled__default.default.input`
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: 14px;
+  width: 100%;
+  &:focus {
+    outline: none;
+    border-color: ${(props) => props.theme.colors.primary500};
+  }
+`;
+const ButtonRow = styled__default.default.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+  gap: 8px;
+`;
+const SmallButton = styled__default.default.button`
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 13px;
+  cursor: pointer;
+  border: none;
+  background-color: ${({ variant, theme }) => variant === "primary" ? theme.colors.primary600 : theme.colors.neutral100};
+  color: ${({ variant, theme }) => variant === "primary" ? theme.colors.neutral0 : theme.colors.neutral700};
+
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+const IframeToolbar = React.forwardRef(
+  ({ className, onClick, children, ...props }, ref) => {
+    const { editor } = TiptapEditorInput.useEditorContext();
+    const [open, setOpen] = React.useState(false);
+    const [src, setSrc] = React.useState("");
+    const [width, setWidth] = React.useState("560");
+    const [height, setHeight] = React.useState("315");
+    const [allowFullscreen, setAllowFullscreen] = React.useState(true);
+    const [error, setError] = React.useState("");
+    const onInsertIframe = React.useCallback(() => {
+      if (!src) {
+        setError("Please enter a URL");
+        return;
+      }
+      try {
+        new URL(src);
+      } catch (e) {
+        setError("Invalid URL format.");
+        return;
+      }
+      editor?.chain().focus().setIframe({
+        src,
+        width,
+        height,
+        allowfullscreen: allowFullscreen,
+        frameborder: 0
+      }).run();
+      setOpen(false);
+      setSrc("");
+      setError("");
+    }, [editor, src, width, height, allowFullscreen]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Popover.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        TiptapEditorInput.ToolbarButton,
+        {
+          tooltip: "Insert Iframe",
+          "aria-label": "Insert Iframe",
+          isActive: editor?.isActive("iframe"),
+          ...props,
+          ref,
+          children: /* @__PURE__ */ jsxRuntime.jsx(IframeIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(PopoverContent, { align: "start", side: "bottom", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Iframe Source (URL)" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              type: "url",
+              placeholder: "https://www.youtube.com/embed/xxxx",
+              value: src,
+              onChange: (e) => {
+                setSrc(e.target.value);
+                if (error) setError("");
+              },
+              style: { borderColor: error ? "#d02b20" : void 0 }
+            }
+          ),
+          error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "danger600", children: error })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 6, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { xs: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Width (px)" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Input,
+              {
+                type: "number",
+                value: width,
+                onChange: (e) => setWidth(e.target.value)
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { xs: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Height (px)" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Input,
+              {
+                type: "number",
+                value: height,
+                onChange: (e) => setHeight(e.target.value)
+              }
+            )
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(FormGroup, { children: /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { fontSize: "13px", display: "flex", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: allowFullscreen,
+              onChange: (e) => setAllowFullscreen(e.target.checked),
+              style: { marginRight: "6px" }
+            }
+          ),
+          "Allow Fullscreen"
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ButtonRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SmallButton, { onClick: () => setOpen(false), children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsx(SmallButton, { variant: "primary", onClick: onInsertIframe, children: "Insert" })
+        ] })
+      ] })
+    ] });
+  }
+);
+IframeToolbar.displayName = "IframeToolbar";
+exports.IframeToolbar = IframeToolbar;

package/dist/_chunks/ImagePlaceholder-C14kojd5.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lucideReact = require("lucide-react");
+const TiptapEditorInput = require("./TiptapEditorInput-vfLsCt1p.js");
+const styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const ImageIcon = styled__default.default(lucideReact.LucideImage)`
+  width: 16px;
+  height: 16px;
+`;
+const ImagePlaceholderToolbar = React.forwardRef(({ className, onClick, children, ...props }, ref) => {
+  const { editor } = TiptapEditorInput.useEditorContext();
+  const [mediaLibOpen, setMediaLibOpen] = React.useState(false);
+  const handleMediaSelect = React.useCallback((file) => {
+    if (!file) return;
+    let srcset = void 0;
+    if (file.formats) {
+      const sets = Object.keys(file.formats).sort((a, b) => file.formats[a].width - file.formats[b].width).map((k) => {
+        const f = file.formats[k];
+        const url = f.url.startsWith("http") ? f.url : `${window.strapi?.backendURL}${f.url}`;
+        return `${url} ${f.width}w`;
+      });
+      srcset = sets.join(", ");
+    }
+    editor.chain().focus().setImage({
+      src: file.url,
+      alt: file.alt,
+      caption: file.caption,
+      title: file.name,
+      pixelWidth: file.width,
+      pixelHeight: file.height,
+      originalWidth: file.width,
+      originalHeight: file.height,
+      media_id: file.id,
+      width: "auto",
+      aspectRatio: file.width && file.height ? `${file.width}/${file.height}` : null,
+      srcset
+    }).run();
+    setMediaLibOpen(false);
+  }, [editor]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TiptapEditorInput.ToolbarButton,
+      {
+        tooltip: "Image",
+        "aria-label": "Insert image",
+        isActive: editor?.isActive("image"),
+        onClick: (e) => {
+          setMediaLibOpen(true);
+          onClick?.(e);
+        },
+        ref,
+        ...props,
+        children: children || /* @__PURE__ */ jsxRuntime.jsx(ImageIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TiptapEditorInput.MediaLibraryModal,
+      {
+        isOpen: mediaLibOpen,
+        onClose: () => setMediaLibOpen(false),
+        onSelect: handleMediaSelect
+      }
+    )
+  ] });
+});
+ImagePlaceholderToolbar.displayName = "ImagePlaceholderToolbar";
+exports.ImagePlaceholderToolbar = ImagePlaceholderToolbar;

package/dist/_chunks/ImagePlaceholder-DtrSuhf_.mjs

@@ -0,0 +1,69 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useCallback } from "react";
+import { LucideImage } from "lucide-react";
+import { u as useEditorContext, T as ToolbarButton, M as MediaLibraryModal } from "./TiptapEditorInput-BDE09h5-.mjs";
+import styled from "styled-components";
+const ImageIcon = styled(LucideImage)`
+  width: 16px;
+  height: 16px;
+`;
+const ImagePlaceholderToolbar = forwardRef(({ className, onClick, children, ...props }, ref) => {
+  const { editor } = useEditorContext();
+  const [mediaLibOpen, setMediaLibOpen] = useState(false);
+  const handleMediaSelect = useCallback((file) => {
+    if (!file) return;
+    let srcset = void 0;
+    if (file.formats) {
+      const sets = Object.keys(file.formats).sort((a, b) => file.formats[a].width - file.formats[b].width).map((k) => {
+        const f = file.formats[k];
+        const url = f.url.startsWith("http") ? f.url : `${window.strapi?.backendURL}${f.url}`;
+        return `${url} ${f.width}w`;
+      });
+      srcset = sets.join(", ");
+    }
+    editor.chain().focus().setImage({
+      src: file.url,
+      alt: file.alt,
+      caption: file.caption,
+      title: file.name,
+      pixelWidth: file.width,
+      pixelHeight: file.height,
+      originalWidth: file.width,
+      originalHeight: file.height,
+      media_id: file.id,
+      width: "auto",
+      aspectRatio: file.width && file.height ? `${file.width}/${file.height}` : null,
+      srcset
+    }).run();
+    setMediaLibOpen(false);
+  }, [editor]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        tooltip: "Image",
+        "aria-label": "Insert image",
+        isActive: editor?.isActive("image"),
+        onClick: (e) => {
+          setMediaLibOpen(true);
+          onClick?.(e);
+        },
+        ref,
+        ...props,
+        children: children || /* @__PURE__ */ jsx(ImageIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MediaLibraryModal,
+      {
+        isOpen: mediaLibOpen,
+        onClose: () => setMediaLibOpen(false),
+        onSelect: handleMediaSelect
+      }
+    )
+  ] });
+});
+ImagePlaceholderToolbar.displayName = "ImagePlaceholderToolbar";
+export {
+  ImagePlaceholderToolbar
+};

package/dist/_chunks/Italic-BfpKX0KX.mjs

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ItalicIcon } from "lucide-react";
+import { u as useEditorContext, T as ToolbarButton } from "./TiptapEditorInput-BDE09h5-.mjs";
+import styled from "styled-components";
+const ItalicIconStyled = styled(ItalicIcon)`
+  width: 16px;
+  height: 16px;
+`;
+const ItalicToolbar = forwardRef(
+  ({ className, onClick, children, ...props }, ref) => {
+    const { editor } = useEditorContext();
+    return /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        tooltip: "Italic",
+        "aria-label": "Set italic",
+        isActive: editor?.isActive("italic"),
+        onClick: (e) => {
+          editor?.chain().focus().toggleItalic().run();
+          onClick?.(e);
+        },
+        disabled: !editor?.can().chain().focus().toggleItalic().run(),
+        ref,
+        ...props,
+        children: children || /* @__PURE__ */ jsx(ItalicIconStyled, {})
+      }
+    );
+  }
+);
+ItalicToolbar.displayName = "ItalicToolbar";
+export {
+  ItalicToolbar
+};

package/dist/_chunks/Italic-DdhVL78v.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lucideReact = require("lucide-react");
+const TiptapEditorInput = require("./TiptapEditorInput-vfLsCt1p.js");
+const styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const ItalicIconStyled = styled__default.default(lucideReact.ItalicIcon)`
+  width: 16px;
+  height: 16px;
+`;
+const ItalicToolbar = React.forwardRef(
+  ({ className, onClick, children, ...props }, ref) => {
+    const { editor } = TiptapEditorInput.useEditorContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TiptapEditorInput.ToolbarButton,
+      {
+        tooltip: "Italic",
+        "aria-label": "Set italic",
+        isActive: editor?.isActive("italic"),
+        onClick: (e) => {
+          editor?.chain().focus().toggleItalic().run();
+          onClick?.(e);
+        },
+        disabled: !editor?.can().chain().focus().toggleItalic().run(),
+        ref,
+        ...props,
+        children: children || /* @__PURE__ */ jsxRuntime.jsx(ItalicIconStyled, {})
+      }
+    );
+  }
+);
+ItalicToolbar.displayName = "ItalicToolbar";
+exports.ItalicToolbar = ItalicToolbar;

package/dist/_chunks/Link-BuYDqSqo.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lucideReact = require("lucide-react");
+const TiptapEditorInput = require("./TiptapEditorInput-vfLsCt1p.js");
+const designSystem = require("@strapi/design-system");
+const styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const LinkIcon = styled__default.default(lucideReact.Link2)`
+  width: 20px;
+  height: 20px;
+`;
+const PopoverContent = styled__default.default(designSystem.Popover.Content)`
+  width: 100%;
+  min-width: 320px;
+  padding: 12px;
+`;
+const LinkToolbar = React.forwardRef(
+  ({ className, onClick, children, ...props }, ref) => {
+    const { editor } = TiptapEditorInput.useEditorContext();
+    const [open, setOpen] = React.useState(false);
+    const { from, to } = editor.state.selection;
+    const text = editor.state.doc.textBetween(from, to, " ");
+    const onSetLink = React.useCallback(
+      (url, text2, openInNewTab) => {
+        editor.chain().focus().extendMarkRange("link").insertContent({
+          type: "text",
+          text: text2 || url,
+          marks: [
+            {
+              type: "link",
+              attrs: {
+                href: url,
+                target: openInNewTab ? "_blank" : ""
+              }
+            }
+          ]
+        }).setLink({ href: url }).run();
+        editor.commands.enter();
+      },
+      [editor]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Popover.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        TiptapEditorInput.ToolbarButton,
+        {
+          isActive: editor.isActive("link"),
+          tooltip: "Link",
+          "aria-label": "Insert link",
+          disabled: editor.isActive("codeBlock"),
+          ...props,
+          children: /* @__PURE__ */ jsxRuntime.jsx(LinkIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { align: "start", side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx(TiptapEditorInput.LinkEditBlock, { onSave: onSetLink, defaultText: text }) })
+    ] });
+  }
+);
+exports.LinkToolbar = LinkToolbar;

package/dist/_chunks/Link-DUV5Ybep.mjs

@@ -0,0 +1,59 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useCallback } from "react";
+import { Link2 } from "lucide-react";
+import { u as useEditorContext, T as ToolbarButton, L as LinkEditBlock } from "./TiptapEditorInput-BDE09h5-.mjs";
+import { Popover } from "@strapi/design-system";
+import styled from "styled-components";
+const LinkIcon = styled(Link2)`
+  width: 20px;
+  height: 20px;
+`;
+const PopoverContent = styled(Popover.Content)`
+  width: 100%;
+  min-width: 320px;
+  padding: 12px;
+`;
+const LinkToolbar = forwardRef(
+  ({ className, onClick, children, ...props }, ref) => {
+    const { editor } = useEditorContext();
+    const [open, setOpen] = useState(false);
+    const { from, to } = editor.state.selection;
+    const text = editor.state.doc.textBetween(from, to, " ");
+    const onSetLink = useCallback(
+      (url, text2, openInNewTab) => {
+        editor.chain().focus().extendMarkRange("link").insertContent({
+          type: "text",
+          text: text2 || url,
+          marks: [
+            {
+              type: "link",
+              attrs: {
+                href: url,
+                target: openInNewTab ? "_blank" : ""
+              }
+            }
+          ]
+        }).setLink({ href: url }).run();
+        editor.commands.enter();
+      },
+      [editor]
+    );
+    return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          isActive: editor.isActive("link"),
+          tooltip: "Link",
+          "aria-label": "Insert link",
+          disabled: editor.isActive("codeBlock"),
+          ...props,
+          children: /* @__PURE__ */ jsx(LinkIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverContent, { align: "start", side: "bottom", children: /* @__PURE__ */ jsx(LinkEditBlock, { onSave: onSetLink, defaultText: text }) })
+    ] });
+  }
+);
+export {
+  LinkToolbar
+};