notra-editor 0.4.0 → 0.5.0

package/dist/components/image-popover/image-popover.cjs

@@ -0,0 +1,161 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var image_popover_exports = {};
+__export(image_popover_exports, {
+  ImagePopover: () => ImagePopover
+});
+module.exports = __toCommonJS(image_popover_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_react = require("lucide-react");
+var import_react = require("react");
+var import_use_image_popover = require("./use-image-popover");
+var import_button = require("../ui/button");
+var import_input = require("../ui/input");
+var import_popover = require("../ui/popover");
+var import_separator = require("../ui/separator");
+const ImagePopover = (0, import_react.forwardRef)(
+  ({ editor, ...buttonProps }, ref) => {
+    const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+    const {
+      url,
+      setUrl,
+      alt,
+      setAlt,
+      isActive,
+      canSet,
+      setImage,
+      removeImage,
+      wasSelectionMove
+    } = (0, import_use_image_popover.useImagePopover)({ editor });
+    (0, import_react.useEffect)(() => {
+      if (isActive && wasSelectionMove) {
+        setIsOpen(true);
+      }
+    }, [isActive, wasSelectionMove]);
+    const handleSetImage = (0, import_react.useCallback)(() => {
+      setImage();
+      setIsOpen(false);
+    }, [setImage]);
+    const handleRemoveImage = (0, import_react.useCallback)(() => {
+      removeImage();
+      setIsOpen(false);
+    }, [removeImage]);
+    const handleKeyDown = (0, import_react.useCallback)(
+      (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          handleSetImage();
+        }
+      },
+      [handleSetImage]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_popover.Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_button.Button,
+        {
+          ref,
+          "aria-label": "Image",
+          "aria-pressed": isActive,
+          "data-active-state": isActive ? "on" : "off",
+          disabled: !canSet,
+          size: "icon",
+          tabIndex: -1,
+          type: "button",
+          variant: "ghost",
+          ...buttonProps,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_lucide_react.ImageIcon,
+            {
+              className: isActive ? "nt:text-[var(--tt-brand-color-500)]" : void 0
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_popover.PopoverContent,
+        {
+          align: "start",
+          className: "nt:flex nt:w-72 nt:flex-col nt:gap-1 nt:p-1",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_input.Input,
+              {
+                autoFocus: true,
+                className: "nt:h-7 nt:border-none nt:shadow-none nt:focus-visible:ring-0",
+                placeholder: "Paste image URL...",
+                type: "url",
+                value: url,
+                onChange: (e) => setUrl(e.target.value),
+                onKeyDown: handleKeyDown
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_input.Input,
+              {
+                className: "nt:h-7 nt:border-none nt:shadow-none nt:focus-visible:ring-0",
+                placeholder: "Alt text (optional)",
+                type: "text",
+                value: alt,
+                onChange: (e) => setAlt(e.target.value),
+                onKeyDown: handleKeyDown
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "nt:flex nt:items-center nt:justify-end nt:gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_button.Button,
+                {
+                  "aria-label": "Apply image",
+                  disabled: !url && !isActive,
+                  size: "icon-sm",
+                  tabIndex: -1,
+                  type: "button",
+                  variant: "ghost",
+                  onClick: handleSetImage,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.CornerDownLeft, {})
+                }
+              ),
+              isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_separator.Separator, { className: "nt:h-5", orientation: "vertical" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_button.Button,
+                  {
+                    "aria-label": "Remove image",
+                    size: "icon-sm",
+                    tabIndex: -1,
+                    type: "button",
+                    variant: "ghost",
+                    onClick: handleRemoveImage,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Trash2, {})
+                  }
+                )
+              ] })
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+);
+ImagePopover.displayName = "ImagePopover";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ImagePopover
+});
+//# sourceMappingURL=image-popover.cjs.map

package/dist/components/image-popover/image-popover.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/image-popover/image-popover.tsx"],"sourcesContent":["'use client';\n\nimport { CornerDownLeft, ImageIcon, Trash2 } from 'lucide-react';\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\n\nimport { useImagePopover } from './use-image-popover';\nimport { Button } from '../ui/button';\nimport { Input } from '../ui/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';\nimport { Separator } from '../ui/separator';\n\nimport type { Editor } from '@tiptap/core';\n\nexport interface ImagePopoverProps extends Omit<\n\tReact.ButtonHTMLAttributes<HTMLButtonElement>,\n\t'type'\n> {\n\teditor: Editor | null;\n}\n\nexport const ImagePopover = forwardRef<HTMLButtonElement, ImagePopoverProps>(\n\t({ editor, ...buttonProps }, ref) => {\n\t\tconst [isOpen, setIsOpen] = useState(false);\n\n\t\tconst {\n\t\t\turl,\n\t\t\tsetUrl,\n\t\t\talt,\n\t\t\tsetAlt,\n\t\t\tisActive,\n\t\t\tcanSet,\n\t\t\tsetImage,\n\t\t\tremoveImage,\n\t\t\twasSelectionMove\n\t\t} = useImagePopover({ editor });\n\n\t\t// Auto-open popover when cursor moves onto an existing image (selection-only transaction)\n\t\tuseEffect(() => {\n\t\t\tif (isActive && wasSelectionMove) {\n\t\t\t\tsetIsOpen(true);\n\t\t\t}\n\t\t}, [isActive, wasSelectionMove]);\n\n\t\tconst handleSetImage = useCallback(() => {\n\t\t\tsetImage();\n\t\t\tsetIsOpen(false);\n\t\t}, [setImage]);\n\n\t\tconst handleRemoveImage = useCallback(() => {\n\t\t\tremoveImage();\n\t\t\tsetIsOpen(false);\n\t\t}, [removeImage]);\n\n\t\tconst handleKeyDown = useCallback(\n\t\t\t(event: React.KeyboardEvent<HTMLInputElement>) => {\n\t\t\t\tif (event.key === 'Enter') {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\thandleSetImage();\n\t\t\t\t}\n\t\t\t},\n\t\t\t[handleSetImage]\n\t\t);\n\n\t\treturn (\n\t\t\t<Popover open={isOpen} onOpenChange={setIsOpen}>\n\t\t\t\t<PopoverTrigger asChild>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\taria-label=\"Image\"\n\t\t\t\t\t\taria-pressed={isActive}\n\t\t\t\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\t\t\t\tdisabled={!canSet}\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t{...buttonProps}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ImageIcon\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\tisActive ? 'nt:text-[var(--tt-brand-color-500)]' : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Button>\n\t\t\t\t</PopoverTrigger>\n\t\t\t\t<PopoverContent\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\tclassName=\"nt:flex nt:w-72 nt:flex-col nt:gap-1 nt:p-1\"\n\t\t\t\t>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\tclassName=\"nt:h-7 nt:border-none nt:shadow-none nt:focus-visible:ring-0\"\n\t\t\t\t\t\tplaceholder=\"Paste image URL...\"\n\t\t\t\t\t\ttype=\"url\"\n\t\t\t\t\t\tvalue={url}\n\t\t\t\t\t\tonChange={(e) => setUrl(e.target.value)}\n\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t/>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tclassName=\"nt:h-7 nt:border-none nt:shadow-none nt:focus-visible:ring-0\"\n\t\t\t\t\t\tplaceholder=\"Alt text (optional)\"\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tvalue={alt}\n\t\t\t\t\t\tonChange={(e) => setAlt(e.target.value)}\n\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"nt:flex nt:items-center nt:justify-end nt:gap-1\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\taria-label=\"Apply image\"\n\t\t\t\t\t\t\tdisabled={!url && !isActive}\n\t\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tonClick={handleSetImage}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<CornerDownLeft />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t{isActive && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<Separator className=\"nt:h-5\" orientation=\"vertical\" />\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\taria-label=\"Remove image\"\n\t\t\t\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\tonClick={handleRemoveImage}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Trash2 />\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</PopoverContent>\n\t\t\t</Popover>\n\t\t);\n\t}\n);\n\nImagePopover.displayName = 'ImagePopover';\n"],"mappings":"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","names":[]}

package/dist/components/image-popover/image-popover.d.cts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import { Editor } from '@tiptap/core';
+
+interface ImagePopoverProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    editor: Editor | null;
+}
+declare const ImagePopover: react.ForwardRefExoticComponent<ImagePopoverProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { ImagePopover, type ImagePopoverProps };

package/dist/components/image-popover/image-popover.d.ts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import { Editor } from '@tiptap/core';
+
+interface ImagePopoverProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    editor: Editor | null;
+}
+declare const ImagePopover: react.ForwardRefExoticComponent<ImagePopoverProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { ImagePopover, type ImagePopoverProps };

package/dist/components/image-popover/image-popover.mjs

@@ -0,0 +1,137 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CornerDownLeft, ImageIcon, Trash2 } from "lucide-react";
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import { useImagePopover } from "./use-image-popover";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { Separator } from "../ui/separator";
+const ImagePopover = forwardRef(
+  ({ editor, ...buttonProps }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const {
+      url,
+      setUrl,
+      alt,
+      setAlt,
+      isActive,
+      canSet,
+      setImage,
+      removeImage,
+      wasSelectionMove
+    } = useImagePopover({ editor });
+    useEffect(() => {
+      if (isActive && wasSelectionMove) {
+        setIsOpen(true);
+      }
+    }, [isActive, wasSelectionMove]);
+    const handleSetImage = useCallback(() => {
+      setImage();
+      setIsOpen(false);
+    }, [setImage]);
+    const handleRemoveImage = useCallback(() => {
+      removeImage();
+      setIsOpen(false);
+    }, [removeImage]);
+    const handleKeyDown = useCallback(
+      (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          handleSetImage();
+        }
+      },
+      [handleSetImage]
+    );
+    return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          ref,
+          "aria-label": "Image",
+          "aria-pressed": isActive,
+          "data-active-state": isActive ? "on" : "off",
+          disabled: !canSet,
+          size: "icon",
+          tabIndex: -1,
+          type: "button",
+          variant: "ghost",
+          ...buttonProps,
+          children: /* @__PURE__ */ jsx(
+            ImageIcon,
+            {
+              className: isActive ? "nt:text-[var(--tt-brand-color-500)]" : void 0
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        PopoverContent,
+        {
+          align: "start",
+          className: "nt:flex nt:w-72 nt:flex-col nt:gap-1 nt:p-1",
+          children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                autoFocus: true,
+                className: "nt:h-7 nt:border-none nt:shadow-none nt:focus-visible:ring-0",
+                placeholder: "Paste image URL...",
+                type: "url",
+                value: url,
+                onChange: (e) => setUrl(e.target.value),
+                onKeyDown: handleKeyDown
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                className: "nt:h-7 nt:border-none nt:shadow-none nt:focus-visible:ring-0",
+                placeholder: "Alt text (optional)",
+                type: "text",
+                value: alt,
+                onChange: (e) => setAlt(e.target.value),
+                onKeyDown: handleKeyDown
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "nt:flex nt:items-center nt:justify-end nt:gap-1", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  "aria-label": "Apply image",
+                  disabled: !url && !isActive,
+                  size: "icon-sm",
+                  tabIndex: -1,
+                  type: "button",
+                  variant: "ghost",
+                  onClick: handleSetImage,
+                  children: /* @__PURE__ */ jsx(CornerDownLeft, {})
+                }
+              ),
+              isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Separator, { className: "nt:h-5", orientation: "vertical" }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    "aria-label": "Remove image",
+                    size: "icon-sm",
+                    tabIndex: -1,
+                    type: "button",
+                    variant: "ghost",
+                    onClick: handleRemoveImage,
+                    children: /* @__PURE__ */ jsx(Trash2, {})
+                  }
+                )
+              ] })
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+);
+ImagePopover.displayName = "ImagePopover";
+export {
+  ImagePopover
+};
+//# sourceMappingURL=image-popover.mjs.map

package/dist/components/image-popover/image-popover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/image-popover/image-popover.tsx"],"sourcesContent":["'use client';\n\nimport { CornerDownLeft, ImageIcon, Trash2 } from 'lucide-react';\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\n\nimport { useImagePopover } from './use-image-popover';\nimport { Button } from '../ui/button';\nimport { Input } from '../ui/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';\nimport { Separator } from '../ui/separator';\n\nimport type { Editor } from '@tiptap/core';\n\nexport interface ImagePopoverProps extends Omit<\n\tReact.ButtonHTMLAttributes<HTMLButtonElement>,\n\t'type'\n> {\n\teditor: Editor | null;\n}\n\nexport const ImagePopover = forwardRef<HTMLButtonElement, ImagePopoverProps>(\n\t({ editor, ...buttonProps }, ref) => {\n\t\tconst [isOpen, setIsOpen] = useState(false);\n\n\t\tconst {\n\t\t\turl,\n\t\t\tsetUrl,\n\t\t\talt,\n\t\t\tsetAlt,\n\t\t\tisActive,\n\t\t\tcanSet,\n\t\t\tsetImage,\n\t\t\tremoveImage,\n\t\t\twasSelectionMove\n\t\t} = useImagePopover({ editor });\n\n\t\t// Auto-open popover when cursor moves onto an existing image (selection-only transaction)\n\t\tuseEffect(() => {\n\t\t\tif (isActive && wasSelectionMove) {\n\t\t\t\tsetIsOpen(true);\n\t\t\t}\n\t\t}, [isActive, wasSelectionMove]);\n\n\t\tconst handleSetImage = useCallback(() => {\n\t\t\tsetImage();\n\t\t\tsetIsOpen(false);\n\t\t}, [setImage]);\n\n\t\tconst handleRemoveImage = useCallback(() => {\n\t\t\tremoveImage();\n\t\t\tsetIsOpen(false);\n\t\t}, [removeImage]);\n\n\t\tconst handleKeyDown = useCallback(\n\t\t\t(event: React.KeyboardEvent<HTMLInputElement>) => {\n\t\t\t\tif (event.key === 'Enter') {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\thandleSetImage();\n\t\t\t\t}\n\t\t\t},\n\t\t\t[handleSetImage]\n\t\t);\n\n\t\treturn (\n\t\t\t<Popover open={isOpen} onOpenChange={setIsOpen}>\n\t\t\t\t<PopoverTrigger asChild>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\taria-label=\"Image\"\n\t\t\t\t\t\taria-pressed={isActive}\n\t\t\t\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\t\t\t\tdisabled={!canSet}\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t{...buttonProps}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ImageIcon\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\tisActive ? 'nt:text-[var(--tt-brand-color-500)]' : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Button>\n\t\t\t\t</PopoverTrigger>\n\t\t\t\t<PopoverContent\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\tclassName=\"nt:flex nt:w-72 nt:flex-col nt:gap-1 nt:p-1\"\n\t\t\t\t>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\tclassName=\"nt:h-7 nt:border-none nt:shadow-none nt:focus-visible:ring-0\"\n\t\t\t\t\t\tplaceholder=\"Paste image URL...\"\n\t\t\t\t\t\ttype=\"url\"\n\t\t\t\t\t\tvalue={url}\n\t\t\t\t\t\tonChange={(e) => setUrl(e.target.value)}\n\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t/>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tclassName=\"nt:h-7 nt:border-none nt:shadow-none nt:focus-visible:ring-0\"\n\t\t\t\t\t\tplaceholder=\"Alt text (optional)\"\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tvalue={alt}\n\t\t\t\t\t\tonChange={(e) => setAlt(e.target.value)}\n\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"nt:flex nt:items-center nt:justify-end nt:gap-1\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\taria-label=\"Apply image\"\n\t\t\t\t\t\t\tdisabled={!url && !isActive}\n\t\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tonClick={handleSetImage}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<CornerDownLeft />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t{isActive && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<Separator className=\"nt:h-5\" orientation=\"vertical\" />\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\taria-label=\"Remove image\"\n\t\t\t\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\tonClick={handleRemoveImage}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Trash2 />\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</PopoverContent>\n\t\t\t</Popover>\n\t\t);\n\t}\n);\n\nImagePopover.displayName = 'ImagePopover';\n"],"mappings":"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","names":[]}

package/dist/components/image-popover/use-image-popover.cjs

@@ -0,0 +1,88 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_image_popover_exports = {};
+__export(use_image_popover_exports, {
+  useImagePopover: () => useImagePopover
+});
+module.exports = __toCommonJS(use_image_popover_exports);
+var import_react = require("react");
+function useImagePopover({ editor }) {
+  const [url, setUrl] = (0, import_react.useState)("");
+  const [alt, setAlt] = (0, import_react.useState)("");
+  const [isActive, setIsActive] = (0, import_react.useState)(false);
+  const [canSet, setCanSet] = (0, import_react.useState)(false);
+  const [wasSelectionMove, setWasSelectionMove] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (!editor) return;
+    const handleUpdate = ({
+      transaction
+    } = {}) => {
+      const active = editor.isActive("image");
+      setIsActive(active);
+      setCanSet(editor.isEditable);
+      if (transaction) {
+        setWasSelectionMove(!transaction.docChanged);
+      }
+      if (active) {
+        const attrs = editor.getAttributes("image");
+        setUrl(attrs.src ?? "");
+        setAlt(attrs.alt ?? "");
+      }
+    };
+    handleUpdate();
+    editor.on("selectionUpdate", handleUpdate);
+    editor.on("transaction", handleUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleUpdate);
+      editor.off("transaction", handleUpdate);
+    };
+  }, [editor]);
+  const removeImage = (0, import_react.useCallback)(() => {
+    if (!editor) return;
+    editor.chain().focus().deleteSelection().run();
+    setUrl("");
+    setAlt("");
+  }, [editor]);
+  const setImage = (0, import_react.useCallback)(() => {
+    if (!editor) return;
+    if (!url) {
+      if (isActive) {
+        removeImage();
+      }
+      return;
+    }
+    editor.chain().focus().setImage({ src: url, alt: alt || void 0 }).run();
+  }, [editor, url, alt, isActive, removeImage]);
+  return {
+    url,
+    setUrl,
+    alt,
+    setAlt,
+    isActive,
+    canSet,
+    setImage,
+    removeImage,
+    wasSelectionMove
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useImagePopover
+});
+//# sourceMappingURL=use-image-popover.cjs.map

package/dist/components/image-popover/use-image-popover.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/image-popover/use-image-popover.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\nimport type { Editor } from '@tiptap/core';\nimport type {} from '@tiptap/extension-image';\nimport type { Transaction } from '@tiptap/pm/state';\n\nexport interface UseImagePopoverConfig {\n\teditor: Editor | null;\n}\n\nexport function useImagePopover({ editor }: UseImagePopoverConfig) {\n\tconst [url, setUrl] = useState('');\n\tconst [alt, setAlt] = useState('');\n\tconst [isActive, setIsActive] = useState(false);\n\tconst [canSet, setCanSet] = useState(false);\n\tconst [wasSelectionMove, setWasSelectionMove] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tconst handleUpdate = ({\n\t\t\ttransaction\n\t\t}: { transaction?: Transaction } = {}) => {\n\t\t\tconst active = editor.isActive('image');\n\n\t\t\tsetIsActive(active);\n\t\t\tsetCanSet(editor.isEditable);\n\n\t\t\tif (transaction) {\n\t\t\t\tsetWasSelectionMove(!transaction.docChanged);\n\t\t\t}\n\n\t\t\tif (active) {\n\t\t\t\tconst attrs = editor.getAttributes('image');\n\n\t\t\t\tsetUrl(attrs.src ?? '');\n\t\t\t\tsetAlt(attrs.alt ?? '');\n\t\t\t}\n\t\t};\n\n\t\thandleUpdate();\n\n\t\teditor.on('selectionUpdate', handleUpdate);\n\t\teditor.on('transaction', handleUpdate);\n\n\t\treturn () => {\n\t\t\teditor.off('selectionUpdate', handleUpdate);\n\t\t\teditor.off('transaction', handleUpdate);\n\t\t};\n\t}, [editor]);\n\n\tconst removeImage = useCallback(() => {\n\t\tif (!editor) return;\n\n\t\teditor.chain().focus().deleteSelection().run();\n\t\tsetUrl('');\n\t\tsetAlt('');\n\t}, [editor]);\n\n\tconst setImage = useCallback(() => {\n\t\tif (!editor) return;\n\n\t\tif (!url) {\n\t\t\tif (isActive) {\n\t\t\t\tremoveImage();\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\teditor\n\t\t\t.chain()\n\t\t\t.focus()\n\t\t\t.setImage({ src: url, alt: alt || undefined })\n\t\t\t.run();\n\t}, [editor, url, alt, isActive, removeImage]);\n\n\treturn {\n\t\turl,\n\t\tsetUrl,\n\t\talt,\n\t\tsetAlt,\n\t\tisActive,\n\t\tcanSet,\n\t\tsetImage,\n\t\tremoveImage,\n\t\twasSelectionMove\n\t};\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiD;AAU1C,SAAS,gBAAgB,EAAE,OAAO,GAA0B;AAClE,QAAM,CAAC,KAAK,MAAM,QAAI,uBAAS,EAAE;AACjC,QAAM,CAAC,KAAK,MAAM,QAAI,uBAAS,EAAE;AACjC,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAS,KAAK;AAE9D,8BAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AAEb,UAAM,eAAe,CAAC;AAAA,MACrB;AAAA,IACD,IAAmC,CAAC,MAAM;AACzC,YAAM,SAAS,OAAO,SAAS,OAAO;AAEtC,kBAAY,MAAM;AAClB,gBAAU,OAAO,UAAU;AAE3B,UAAI,aAAa;AAChB,4BAAoB,CAAC,YAAY,UAAU;AAAA,MAC5C;AAEA,UAAI,QAAQ;AACX,cAAM,QAAQ,OAAO,cAAc,OAAO;AAE1C,eAAO,MAAM,OAAO,EAAE;AACtB,eAAO,MAAM,OAAO,EAAE;AAAA,MACvB;AAAA,IACD;AAEA,iBAAa;AAEb,WAAO,GAAG,mBAAmB,YAAY;AACzC,WAAO,GAAG,eAAe,YAAY;AAErC,WAAO,MAAM;AACZ,aAAO,IAAI,mBAAmB,YAAY;AAC1C,aAAO,IAAI,eAAe,YAAY;AAAA,IACvC;AAAA,EACD,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,kBAAc,0BAAY,MAAM;AACrC,QAAI,CAAC,OAAQ;AAEb,WAAO,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,IAAI;AAC7C,WAAO,EAAE;AACT,WAAO,EAAE;AAAA,EACV,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,eAAW,0BAAY,MAAM;AAClC,QAAI,CAAC,OAAQ;AAEb,QAAI,CAAC,KAAK;AACT,UAAI,UAAU;AACb,oBAAY;AAAA,MACb;AAEA;AAAA,IACD;AAEA,WACE,MAAM,EACN,MAAM,EACN,SAAS,EAAE,KAAK,KAAK,KAAK,OAAO,OAAU,CAAC,EAC5C,IAAI;AAAA,EACP,GAAG,CAAC,QAAQ,KAAK,KAAK,UAAU,WAAW,CAAC;AAE5C,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;","names":[]}

package/dist/components/image-popover/use-image-popover.d.cts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { Editor } from '@tiptap/core';
+
+interface UseImagePopoverConfig {
+    editor: Editor | null;
+}
+declare function useImagePopover({ editor }: UseImagePopoverConfig): {
+    url: string;
+    setUrl: react.Dispatch<react.SetStateAction<string>>;
+    alt: string;
+    setAlt: react.Dispatch<react.SetStateAction<string>>;
+    isActive: boolean;
+    canSet: boolean;
+    setImage: () => void;
+    removeImage: () => void;
+    wasSelectionMove: boolean;
+};
+
+export { type UseImagePopoverConfig, useImagePopover };

package/dist/components/image-popover/use-image-popover.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { Editor } from '@tiptap/core';
+
+interface UseImagePopoverConfig {
+    editor: Editor | null;
+}
+declare function useImagePopover({ editor }: UseImagePopoverConfig): {
+    url: string;
+    setUrl: react.Dispatch<react.SetStateAction<string>>;
+    alt: string;
+    setAlt: react.Dispatch<react.SetStateAction<string>>;
+    isActive: boolean;
+    canSet: boolean;
+    setImage: () => void;
+    removeImage: () => void;
+    wasSelectionMove: boolean;
+};
+
+export { type UseImagePopoverConfig, useImagePopover };

package/dist/components/image-popover/use-image-popover.mjs

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useState } from "react";
+function useImagePopover({ editor }) {
+  const [url, setUrl] = useState("");
+  const [alt, setAlt] = useState("");
+  const [isActive, setIsActive] = useState(false);
+  const [canSet, setCanSet] = useState(false);
+  const [wasSelectionMove, setWasSelectionMove] = useState(false);
+  useEffect(() => {
+    if (!editor) return;
+    const handleUpdate = ({
+      transaction
+    } = {}) => {
+      const active = editor.isActive("image");
+      setIsActive(active);
+      setCanSet(editor.isEditable);
+      if (transaction) {
+        setWasSelectionMove(!transaction.docChanged);
+      }
+      if (active) {
+        const attrs = editor.getAttributes("image");
+        setUrl(attrs.src ?? "");
+        setAlt(attrs.alt ?? "");
+      }
+    };
+    handleUpdate();
+    editor.on("selectionUpdate", handleUpdate);
+    editor.on("transaction", handleUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleUpdate);
+      editor.off("transaction", handleUpdate);
+    };
+  }, [editor]);
+  const removeImage = useCallback(() => {
+    if (!editor) return;
+    editor.chain().focus().deleteSelection().run();
+    setUrl("");
+    setAlt("");
+  }, [editor]);
+  const setImage = useCallback(() => {
+    if (!editor) return;
+    if (!url) {
+      if (isActive) {
+        removeImage();
+      }
+      return;
+    }
+    editor.chain().focus().setImage({ src: url, alt: alt || void 0 }).run();
+  }, [editor, url, alt, isActive, removeImage]);
+  return {
+    url,
+    setUrl,
+    alt,
+    setAlt,
+    isActive,
+    canSet,
+    setImage,
+    removeImage,
+    wasSelectionMove
+  };
+}
+export {
+  useImagePopover
+};
+//# sourceMappingURL=use-image-popover.mjs.map

package/dist/components/image-popover/use-image-popover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/image-popover/use-image-popover.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\nimport type { Editor } from '@tiptap/core';\nimport type {} from '@tiptap/extension-image';\nimport type { Transaction } from '@tiptap/pm/state';\n\nexport interface UseImagePopoverConfig {\n\teditor: Editor | null;\n}\n\nexport function useImagePopover({ editor }: UseImagePopoverConfig) {\n\tconst [url, setUrl] = useState('');\n\tconst [alt, setAlt] = useState('');\n\tconst [isActive, setIsActive] = useState(false);\n\tconst [canSet, setCanSet] = useState(false);\n\tconst [wasSelectionMove, setWasSelectionMove] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tconst handleUpdate = ({\n\t\t\ttransaction\n\t\t}: { transaction?: Transaction } = {}) => {\n\t\t\tconst active = editor.isActive('image');\n\n\t\t\tsetIsActive(active);\n\t\t\tsetCanSet(editor.isEditable);\n\n\t\t\tif (transaction) {\n\t\t\t\tsetWasSelectionMove(!transaction.docChanged);\n\t\t\t}\n\n\t\t\tif (active) {\n\t\t\t\tconst attrs = editor.getAttributes('image');\n\n\t\t\t\tsetUrl(attrs.src ?? '');\n\t\t\t\tsetAlt(attrs.alt ?? '');\n\t\t\t}\n\t\t};\n\n\t\thandleUpdate();\n\n\t\teditor.on('selectionUpdate', handleUpdate);\n\t\teditor.on('transaction', handleUpdate);\n\n\t\treturn () => {\n\t\t\teditor.off('selectionUpdate', handleUpdate);\n\t\t\teditor.off('transaction', handleUpdate);\n\t\t};\n\t}, [editor]);\n\n\tconst removeImage = useCallback(() => {\n\t\tif (!editor) return;\n\n\t\teditor.chain().focus().deleteSelection().run();\n\t\tsetUrl('');\n\t\tsetAlt('');\n\t}, [editor]);\n\n\tconst setImage = useCallback(() => {\n\t\tif (!editor) return;\n\n\t\tif (!url) {\n\t\t\tif (isActive) {\n\t\t\t\tremoveImage();\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\teditor\n\t\t\t.chain()\n\t\t\t.focus()\n\t\t\t.setImage({ src: url, alt: alt || undefined })\n\t\t\t.run();\n\t}, [editor, url, alt, isActive, removeImage]);\n\n\treturn {\n\t\turl,\n\t\tsetUrl,\n\t\talt,\n\t\tsetAlt,\n\t\tisActive,\n\t\tcanSet,\n\t\tsetImage,\n\t\tremoveImage,\n\t\twasSelectionMove\n\t};\n}\n"],"mappings":"AAAA,SAAS,aAAa,WAAW,gBAAgB;AAU1C,SAAS,gBAAgB,EAAE,OAAO,GAA0B;AAClE,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,EAAE;AACjC,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,EAAE;AACjC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAE9D,YAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AAEb,UAAM,eAAe,CAAC;AAAA,MACrB;AAAA,IACD,IAAmC,CAAC,MAAM;AACzC,YAAM,SAAS,OAAO,SAAS,OAAO;AAEtC,kBAAY,MAAM;AAClB,gBAAU,OAAO,UAAU;AAE3B,UAAI,aAAa;AAChB,4BAAoB,CAAC,YAAY,UAAU;AAAA,MAC5C;AAEA,UAAI,QAAQ;AACX,cAAM,QAAQ,OAAO,cAAc,OAAO;AAE1C,eAAO,MAAM,OAAO,EAAE;AACtB,eAAO,MAAM,OAAO,EAAE;AAAA,MACvB;AAAA,IACD;AAEA,iBAAa;AAEb,WAAO,GAAG,mBAAmB,YAAY;AACzC,WAAO,GAAG,eAAe,YAAY;AAErC,WAAO,MAAM;AACZ,aAAO,IAAI,mBAAmB,YAAY;AAC1C,aAAO,IAAI,eAAe,YAAY;AAAA,IACvC;AAAA,EACD,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,cAAc,YAAY,MAAM;AACrC,QAAI,CAAC,OAAQ;AAEb,WAAO,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,IAAI;AAC7C,WAAO,EAAE;AACT,WAAO,EAAE;AAAA,EACV,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,WAAW,YAAY,MAAM;AAClC,QAAI,CAAC,OAAQ;AAEb,QAAI,CAAC,KAAK;AACT,UAAI,UAAU;AACb,oBAAY;AAAA,MACb;AAEA;AAAA,IACD;AAEA,WACE,MAAM,EACN,MAAM,EACN,SAAS,EAAE,KAAK,KAAK,KAAK,OAAO,OAAU,CAAC,EAC5C,IAAI;AAAA,EACP,GAAG,CAAC,QAAQ,KAAK,KAAK,UAAU,WAAW,CAAC;AAE5C,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;","names":[]}

package/dist/components/link-popover/link-popover.cjs

@@ -33,12 +33,21 @@ var import_separator = require("../ui/separator");
 const LinkPopover = (0, import_react.forwardRef)(
   ({ editor, ...buttonProps }, ref) => {
     const [isOpen, setIsOpen] = (0, import_react.useState)(false);
-    const { url, setUrl, isActive, canSet, setLink, removeLink, openLink } = (0, import_use_link_popover.useLinkPopover)({ editor });
+    const {
+      url,
+      setUrl,
+      isActive,
+      canSet,
+      setLink,
+      removeLink,
+      openLink,
+      wasSelectionMove
+    } = (0, import_use_link_popover.useLinkPopover)({ editor });
     (0, import_react.useEffect)(() => {
-      if (isActive) {
+      if (isActive && wasSelectionMove) {
         setIsOpen(true);
       }
-    }, [isActive]);
+    }, [isActive, wasSelectionMove]);
     const handleSetLink = (0, import_react.useCallback)(() => {
       setLink();
       setIsOpen(false);

package/dist/components/link-popover/link-popover.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/link-popover/link-popover.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tCornerDownLeft,\n\tExternalLink,\n\tLink as LinkIcon,\n\tTrash2\n} from 'lucide-react';\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\n\nimport { useLinkPopover } from './use-link-popover';\nimport { Button } from '../ui/button';\nimport { Input } from '../ui/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';\nimport { Separator } from '../ui/separator';\n\nimport type { Editor } from '@tiptap/core';\n\nexport interface LinkPopoverProps extends Omit<\n\tReact.ButtonHTMLAttributes<HTMLButtonElement>,\n\t'type'\n> {\n\teditor: Editor | null;\n}\n\nexport const LinkPopover = forwardRef<HTMLButtonElement, LinkPopoverProps>(\n\t({ editor, ...buttonProps }, ref) => {\n\t\tconst [isOpen, setIsOpen] = useState(false);\n\n\t\tconst { url, setUrl, isActive, canSet, setLink, removeLink, openLink } =\n\t\t\tuseLinkPopover({ editor });\n\n\t\t// Auto-open popover when a link becomes active\n\t\tuseEffect(() => {\n\t\t\tif (isActive) {\n\t\t\t\tsetIsOpen(true);\n\t\t\t}\n\t\t}, [isActive]);\n\n\t\tconst handleSetLink = useCallback(() => {\n\t\t\tsetLink();\n\t\t\tsetIsOpen(false);\n\t\t}, [setLink]);\n\n\t\tconst handleRemoveLink = useCallback(() => {\n\t\t\tremoveLink();\n\t\t\tsetIsOpen(false);\n\t\t}, [removeLink]);\n\n\t\tconst handleKeyDown = useCallback(\n\t\t\t(event: React.KeyboardEvent<HTMLInputElement>) => {\n\t\t\t\tif (event.key === 'Enter') {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\thandleSetLink();\n\t\t\t\t}\n\t\t\t},\n\t\t\t[handleSetLink]\n\t\t);\n\n\t\treturn (\n\t\t\t<Popover open={isOpen} onOpenChange={setIsOpen}>\n\t\t\t\t<PopoverTrigger asChild>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\taria-label=\"Link\"\n\t\t\t\t\t\taria-pressed={isActive}\n\t\t\t\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\t\t\t\tdisabled={!canSet}\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t{...buttonProps}\n\t\t\t\t\t>\n\t\t\t\t\t\t<LinkIcon\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\tisActive ? 'nt:text-[var(--tt-brand-color-500)]' : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Button>\n\t\t\t\t</PopoverTrigger>\n\t\t\t\t<PopoverContent\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\tclassName=\"nt:flex nt:w-auto nt:items-center nt:gap-1 nt:p-1\"\n\t\t\t\t>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\tclassName=\"nt:h-7 nt:min-w-48 nt:border-none nt:shadow-none nt:focus-visible:ring-0\"\n\t\t\t\t\t\tplaceholder=\"Paste a link...\"\n\t\t\t\t\t\ttype=\"url\"\n\t\t\t\t\t\tvalue={url}\n\t\t\t\t\t\tonChange={(e) => setUrl(e.target.value)}\n\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\taria-label=\"Apply link\"\n\t\t\t\t\t\tdisabled={!url && !isActive}\n\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tonClick={handleSetLink}\n\t\t\t\t\t>\n\t\t\t\t\t\t<CornerDownLeft />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Separator className=\"nt:h-5\" orientation=\"vertical\" />\n\t\t\t\t\t<Button\n\t\t\t\t\t\taria-label=\"Open link in new window\"\n\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tonClick={openLink}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ExternalLink />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\taria-label=\"Remove link\"\n\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tonClick={handleRemoveLink}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Trash2 />\n\t\t\t\t\t</Button>\n\t\t\t\t</PopoverContent>\n\t\t\t</Popover>\n\t\t);\n\t}\n);\n\nLinkPopover.displayName = 'LinkPopover';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0EM;AAxEN,0BAKO;AACP,mBAA6D;AAE7D,8BAA+B;AAC/B,oBAAuB;AACvB,mBAAsB;AACtB,qBAAwD;AACxD,uBAA0B;AAWnB,MAAM,kBAAc;AAAA,EAC1B,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,QAAQ;AACpC,UAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAE1C,UAAM,EAAE,KAAK,QAAQ,UAAU,QAAQ,SAAS,YAAY,SAAS,QACpE,wCAAe,EAAE,OAAO,CAAC;AAG1B,gCAAU,MAAM;AACf,UAAI,UAAU;AACb,kBAAU,IAAI;AAAA,MACf;AAAA,IACD,GAAG,CAAC,QAAQ,CAAC;AAEb,UAAM,oBAAgB,0BAAY,MAAM;AACvC,cAAQ;AACR,gBAAU,KAAK;AAAA,IAChB,GAAG,CAAC,OAAO,CAAC;AAEZ,UAAM,uBAAmB,0BAAY,MAAM;AAC1C,iBAAW;AACX,gBAAU,KAAK;AAAA,IAChB,GAAG,CAAC,UAAU,CAAC;AAEf,UAAM,oBAAgB;AAAA,MACrB,CAAC,UAAiD;AACjD,YAAI,MAAM,QAAQ,SAAS;AAC1B,gBAAM,eAAe;AACrB,wBAAc;AAAA,QACf;AAAA,MACD;AAAA,MACA,CAAC,aAAa;AAAA,IACf;AAEA,WACC,6CAAC,0BAAQ,MAAM,QAAQ,cAAc,WACpC;AAAA,kDAAC,iCAAe,SAAO,MACtB;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,cAAW;AAAA,UACX,gBAAc;AAAA,UACd,qBAAmB,WAAW,OAAO;AAAA,UACrC,UAAU,CAAC;AAAA,UACX,MAAK;AAAA,UACL,UAAU;AAAA,UACV,MAAK;AAAA,UACL,SAAQ;AAAA,UACP,GAAG;AAAA,UAEJ;AAAA,YAAC,oBAAAA;AAAA,YAAA;AAAA,cACA,WACC,WAAW,wCAAwC;AAAA;AAAA,UAErD;AAAA;AAAA,MACD,GACD;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,OAAM;AAAA,UACN,WAAU;AAAA,UAEV;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,WAAS;AAAA,gBACT,WAAU;AAAA,gBACV,aAAY;AAAA,gBACZ,MAAK;AAAA,gBACL,OAAO;AAAA,gBACP,UAAU,CAAC,MAAM,OAAO,EAAE,OAAO,KAAK;AAAA,gBACtC,WAAW;AAAA;AAAA,YACZ;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACA,cAAW;AAAA,gBACX,UAAU,CAAC,OAAO,CAAC;AAAA,gBACnB,MAAK;AAAA,gBACL,UAAU;AAAA,gBACV,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,SAAS;AAAA,gBAET,sDAAC,sCAAe;AAAA;AAAA,YACjB;AAAA,YACA,4CAAC,8BAAU,WAAU,UAAS,aAAY,YAAW;AAAA,YACrD;AAAA,cAAC;AAAA;AAAA,gBACA,cAAW;AAAA,gBACX,MAAK;AAAA,gBACL,UAAU;AAAA,gBACV,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,SAAS;AAAA,gBAET,sDAAC,oCAAa;AAAA;AAAA,YACf;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACA,cAAW;AAAA,gBACX,MAAK;AAAA,gBACL,UAAU;AAAA,gBACV,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,SAAS;AAAA,gBAET,sDAAC,8BAAO;AAAA;AAAA,YACT;AAAA;AAAA;AAAA,MACD;AAAA,OACD;AAAA,EAEF;AACD;AAEA,YAAY,cAAc;","names":["LinkIcon"]}
+{"version":3,"sources":["../../../src/components/link-popover/link-popover.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tCornerDownLeft,\n\tExternalLink,\n\tLink as LinkIcon,\n\tTrash2\n} from 'lucide-react';\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\n\nimport { useLinkPopover } from './use-link-popover';\nimport { Button } from '../ui/button';\nimport { Input } from '../ui/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';\nimport { Separator } from '../ui/separator';\n\nimport type { Editor } from '@tiptap/core';\n\nexport interface LinkPopoverProps extends Omit<\n\tReact.ButtonHTMLAttributes<HTMLButtonElement>,\n\t'type'\n> {\n\teditor: Editor | null;\n}\n\nexport const LinkPopover = forwardRef<HTMLButtonElement, LinkPopoverProps>(\n\t({ editor, ...buttonProps }, ref) => {\n\t\tconst [isOpen, setIsOpen] = useState(false);\n\n\t\tconst {\n\t\t\turl,\n\t\t\tsetUrl,\n\t\t\tisActive,\n\t\t\tcanSet,\n\t\t\tsetLink,\n\t\t\tremoveLink,\n\t\t\topenLink,\n\t\t\twasSelectionMove\n\t\t} = useLinkPopover({ editor });\n\n\t\t// Auto-open popover when cursor moves onto an existing link (selection-only transaction)\n\t\tuseEffect(() => {\n\t\t\tif (isActive && wasSelectionMove) {\n\t\t\t\tsetIsOpen(true);\n\t\t\t}\n\t\t}, [isActive, wasSelectionMove]);\n\n\t\tconst handleSetLink = useCallback(() => {\n\t\t\tsetLink();\n\t\t\tsetIsOpen(false);\n\t\t}, [setLink]);\n\n\t\tconst handleRemoveLink = useCallback(() => {\n\t\t\tremoveLink();\n\t\t\tsetIsOpen(false);\n\t\t}, [removeLink]);\n\n\t\tconst handleKeyDown = useCallback(\n\t\t\t(event: React.KeyboardEvent<HTMLInputElement>) => {\n\t\t\t\tif (event.key === 'Enter') {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\thandleSetLink();\n\t\t\t\t}\n\t\t\t},\n\t\t\t[handleSetLink]\n\t\t);\n\n\t\treturn (\n\t\t\t<Popover open={isOpen} onOpenChange={setIsOpen}>\n\t\t\t\t<PopoverTrigger asChild>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\taria-label=\"Link\"\n\t\t\t\t\t\taria-pressed={isActive}\n\t\t\t\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\t\t\t\tdisabled={!canSet}\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t{...buttonProps}\n\t\t\t\t\t>\n\t\t\t\t\t\t<LinkIcon\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\tisActive ? 'nt:text-[var(--tt-brand-color-500)]' : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Button>\n\t\t\t\t</PopoverTrigger>\n\t\t\t\t<PopoverContent\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\tclassName=\"nt:flex nt:w-auto nt:items-center nt:gap-1 nt:p-1\"\n\t\t\t\t>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\tclassName=\"nt:h-7 nt:min-w-48 nt:border-none nt:shadow-none nt:focus-visible:ring-0\"\n\t\t\t\t\t\tplaceholder=\"Paste a link...\"\n\t\t\t\t\t\ttype=\"url\"\n\t\t\t\t\t\tvalue={url}\n\t\t\t\t\t\tonChange={(e) => setUrl(e.target.value)}\n\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\taria-label=\"Apply link\"\n\t\t\t\t\t\tdisabled={!url && !isActive}\n\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tonClick={handleSetLink}\n\t\t\t\t\t>\n\t\t\t\t\t\t<CornerDownLeft />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Separator className=\"nt:h-5\" orientation=\"vertical\" />\n\t\t\t\t\t<Button\n\t\t\t\t\t\taria-label=\"Open link in new window\"\n\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tonClick={openLink}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ExternalLink />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\taria-label=\"Remove link\"\n\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tonClick={handleRemoveLink}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Trash2 />\n\t\t\t\t\t</Button>\n\t\t\t\t</PopoverContent>\n\t\t\t</Popover>\n\t\t);\n\t}\n);\n\nLinkPopover.displayName = 'LinkPopover';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkFM;AAhFN,0BAKO;AACP,mBAA6D;AAE7D,8BAA+B;AAC/B,oBAAuB;AACvB,mBAAsB;AACtB,qBAAwD;AACxD,uBAA0B;AAWnB,MAAM,kBAAc;AAAA,EAC1B,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,QAAQ;AACpC,UAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAE1C,UAAM;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD,QAAI,wCAAe,EAAE,OAAO,CAAC;AAG7B,gCAAU,MAAM;AACf,UAAI,YAAY,kBAAkB;AACjC,kBAAU,IAAI;AAAA,MACf;AAAA,IACD,GAAG,CAAC,UAAU,gBAAgB,CAAC;AAE/B,UAAM,oBAAgB,0BAAY,MAAM;AACvC,cAAQ;AACR,gBAAU,KAAK;AAAA,IAChB,GAAG,CAAC,OAAO,CAAC;AAEZ,UAAM,uBAAmB,0BAAY,MAAM;AAC1C,iBAAW;AACX,gBAAU,KAAK;AAAA,IAChB,GAAG,CAAC,UAAU,CAAC;AAEf,UAAM,oBAAgB;AAAA,MACrB,CAAC,UAAiD;AACjD,YAAI,MAAM,QAAQ,SAAS;AAC1B,gBAAM,eAAe;AACrB,wBAAc;AAAA,QACf;AAAA,MACD;AAAA,MACA,CAAC,aAAa;AAAA,IACf;AAEA,WACC,6CAAC,0BAAQ,MAAM,QAAQ,cAAc,WACpC;AAAA,kDAAC,iCAAe,SAAO,MACtB;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,cAAW;AAAA,UACX,gBAAc;AAAA,UACd,qBAAmB,WAAW,OAAO;AAAA,UACrC,UAAU,CAAC;AAAA,UACX,MAAK;AAAA,UACL,UAAU;AAAA,UACV,MAAK;AAAA,UACL,SAAQ;AAAA,UACP,GAAG;AAAA,UAEJ;AAAA,YAAC,oBAAAA;AAAA,YAAA;AAAA,cACA,WACC,WAAW,wCAAwC;AAAA;AAAA,UAErD;AAAA;AAAA,MACD,GACD;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,OAAM;AAAA,UACN,WAAU;AAAA,UAEV;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,WAAS;AAAA,gBACT,WAAU;AAAA,gBACV,aAAY;AAAA,gBACZ,MAAK;AAAA,gBACL,OAAO;AAAA,gBACP,UAAU,CAAC,MAAM,OAAO,EAAE,OAAO,KAAK;AAAA,gBACtC,WAAW;AAAA;AAAA,YACZ;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACA,cAAW;AAAA,gBACX,UAAU,CAAC,OAAO,CAAC;AAAA,gBACnB,MAAK;AAAA,gBACL,UAAU;AAAA,gBACV,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,SAAS;AAAA,gBAET,sDAAC,sCAAe;AAAA;AAAA,YACjB;AAAA,YACA,4CAAC,8BAAU,WAAU,UAAS,aAAY,YAAW;AAAA,YACrD;AAAA,cAAC;AAAA;AAAA,gBACA,cAAW;AAAA,gBACX,MAAK;AAAA,gBACL,UAAU;AAAA,gBACV,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,SAAS;AAAA,gBAET,sDAAC,oCAAa;AAAA;AAAA,YACf;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACA,cAAW;AAAA,gBACX,MAAK;AAAA,gBACL,UAAU;AAAA,gBACV,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,SAAS;AAAA,gBAET,sDAAC,8BAAO;AAAA;AAAA,YACT;AAAA;AAAA;AAAA,MACD;AAAA,OACD;AAAA,EAEF;AACD;AAEA,YAAY,cAAc;","names":["LinkIcon"]}

package/dist/components/link-popover/link-popover.mjs

@@ -15,12 +15,21 @@ import { Separator } from "../ui/separator";
 const LinkPopover = forwardRef(
   ({ editor, ...buttonProps }, ref) => {
     const [isOpen, setIsOpen] = useState(false);
-    const { url, setUrl, isActive, canSet, setLink, removeLink, openLink } = useLinkPopover({ editor });
+    const {
+      url,
+      setUrl,
+      isActive,
+      canSet,
+      setLink,
+      removeLink,
+      openLink,
+      wasSelectionMove
+    } = useLinkPopover({ editor });
     useEffect(() => {
-      if (isActive) {
+      if (isActive && wasSelectionMove) {
         setIsOpen(true);
       }
-    }, [isActive]);
+    }, [isActive, wasSelectionMove]);
     const handleSetLink = useCallback(() => {
       setLink();
       setIsOpen(false);