@frontlit/text-editor 0.1.0-alpha.1

package/dist/index.js

@@ -0,0 +1,1474 @@
+"use client";
+import React5, { createContext, useState, useRef, useMemo, useEffect, useCallback, useContext } from 'react';
+import { Node, generateText } from '@tiptap/core';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Placeholder from '@tiptap/extension-placeholder';
+import Link from '@tiptap/extension-link';
+import { TableRow, TableHeader, TableCell, Table } from '@tiptap/extension-table';
+import Image from '@tiptap/extension-image';
+import Dropcursor from '@tiptap/extension-dropcursor';
+import Gapcursor from '@tiptap/extension-gapcursor';
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
+import Heading from '@tiptap/extension-heading';
+import Highlight from '@tiptap/extension-highlight';
+import { lowlight } from 'lowlight';
+import javascript from 'highlight.js/lib/languages/javascript';
+import typescript from 'highlight.js/lib/languages/typescript';
+import json from 'highlight.js/lib/languages/json';
+import css from 'highlight.js/lib/languages/css';
+import xml from 'highlight.js/lib/languages/xml';
+import { Undo2, Redo2, ChevronDown, Bold, Italic, Underline, Code, Link as Link$1, List, ListOrdered, Quote, Plus, Minus, Table as Table$1, Image as Image$1, Trash2, Strikethrough, X, Check, Copy } from 'lucide-react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { renderToReactElement } from '@tiptap/static-renderer';
+
+// src/editor.tsx
+
+// src/empty-doc.ts
+var emptyDoc = {
+  type: "doc",
+  content: []
+};
+var empty_doc_default = emptyDoc;
+
+// src/create-id.ts
+function createId(textContent) {
+  return textContent.replace(/\s/g, "-").toLowerCase();
+}
+var CodeMirrorNode = Node.create({
+  name: "codeMirror",
+  content: "block+",
+  code: true,
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "pre"
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["pre", HTMLAttributes, 0];
+  }
+});
+
+// src/extensions.ts
+lowlight.registerLanguage("javascript", javascript);
+lowlight.registerLanguage("typescript", typescript);
+lowlight.registerLanguage("json", json);
+lowlight.registerLanguage("css", css);
+lowlight.registerLanguage("html", xml);
+var createExtensions = ({
+  placeholder
+} = {}) => [
+  StarterKit.configure({
+    codeBlock: false,
+    // Configured/replaced explicitly below (custom options or a
+    // `.extend()`) — disabled here to avoid tiptap's duplicate-extension
+    // warning and constructing throwaway instances of each.
+    link: false,
+    dropcursor: false,
+    gapcursor: false,
+    heading: false
+  }),
+  Placeholder.configure({
+    placeholder: placeholder || "Write something\u2026"
+  }),
+  Link.configure({
+    openOnClick: false,
+    autolink: true,
+    linkOnPaste: true
+  }),
+  Table.configure({
+    resizable: true
+  }),
+  TableRow,
+  TableHeader,
+  TableCell,
+  Image.configure({
+    // We embed uploaded images as data URLs (no backend/media library in
+    // this package), so base64 sources must be allowed.
+    allowBase64: true,
+    HTMLAttributes: {
+      class: "max-w-full h-auto rounded-md"
+    },
+    resize: {
+      enabled: true,
+      directions: ["top", "bottom", "left", "right"],
+      alwaysPreserveAspectRatio: true
+    }
+  }),
+  Dropcursor.configure({
+    color: "hsl(var(--foreground))",
+    width: 2
+  }),
+  Gapcursor,
+  CodeBlockLowlight.configure({
+    lowlight
+  }),
+  Heading.extend({
+    renderHTML({ node, HTMLAttributes }) {
+      const level = this.options.levels.includes(node.attrs.level) ? node.attrs.level : this.options.levels[0];
+      const id = typeof node.textContent === "string" ? createId(node.textContent) : void 0;
+      return [
+        `h${level}`,
+        {
+          ...HTMLAttributes,
+          id
+        },
+        0
+      ];
+    }
+  }),
+  Highlight,
+  CodeMirrorNode
+];
+var LinkEditorPopover = ({
+  editor,
+  onClose,
+  variant = "panel",
+  containerRef
+}) => {
+  const [linkValue, setLinkValue] = useState("");
+  const inputRef = useRef(null);
+  const localContainerRef = useRef(null);
+  const assignContainerRef = (node) => {
+    localContainerRef.current = node;
+    if (containerRef) {
+      containerRef.current = node;
+    }
+  };
+  useEffect(() => {
+    const current = editor.getAttributes("link").href;
+    setLinkValue(current ?? "");
+  }, [editor]);
+  useEffect(() => {
+    const timer = window.setTimeout(() => {
+      inputRef.current?.focus();
+    }, 20);
+    return () => window.clearTimeout(timer);
+  }, []);
+  const applyLink = () => {
+    const value = linkValue.trim();
+    if (!value) {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    } else {
+      editor.chain().focus().extendMarkRange("link").setLink({ href: value }).run();
+    }
+    onClose();
+  };
+  const removeLink = () => {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    onClose();
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      applyLink();
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      onClose();
+    }
+  };
+  if (variant === "inline") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: assignContainerRef,
+        className: "flex items-center gap-2 rounded-md border border-border bg-background p-2 shadow",
+        onMouseDown: (event) => event.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "url",
+              placeholder: "https://example.com",
+              value: linkValue,
+              onChange: (event) => setLinkValue(event.target.value),
+              onKeyDown: handleKeyDown,
+              className: "w-48 rounded border border-border bg-background px-2 py-1 text-sm text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Cancel link editing",
+              className: "inline-flex h-8 w-8 items-center justify-center rounded border border-border text-foreground transition-colors hover:bg-muted",
+              onClick: onClose,
+              children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Remove link",
+              className: "inline-flex h-8 w-8 items-center justify-center rounded border border-border text-foreground transition-colors hover:bg-muted",
+              onClick: removeLink,
+              children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Apply link",
+              className: "inline-flex h-8 w-8 items-center justify-center rounded bg-primary text-primary-foreground transition-colors hover:bg-primary/90",
+              onClick: applyLink,
+              children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: assignContainerRef,
+      className: "absolute left-2 top-full z-20 mt-2 w-full max-w-sm rounded-md border border-border bg-background p-3 shadow-lg",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground", children: "Link URL" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "url",
+            placeholder: "https://example.com",
+            value: linkValue,
+            onChange: (event) => setLinkValue(event.target.value),
+            onKeyDown: handleKeyDown,
+            className: "w-full rounded border border-border bg-background px-2 py-1 text-sm text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "inline-flex items-center gap-1 rounded border border-border px-2 py-1 text-sm text-foreground transition-colors hover:bg-muted",
+              onClick: onClose,
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+                "Cancel"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "inline-flex items-center gap-1 rounded border border-border px-2 py-1 text-sm text-foreground transition-colors hover:bg-muted",
+              onClick: removeLink,
+              children: [
+                /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" }),
+                "Remove"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "inline-flex items-center gap-1 rounded bg-primary px-2 py-1 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90",
+              onClick: applyLink,
+              children: [
+                /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }),
+                "Apply"
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+var link_editor_popover_default = LinkEditorPopover;
+var iconButtonBase = "inline-flex h-8 w-8 items-center justify-center rounded border border-transparent text-foreground transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50";
+function IconButton({
+  icon: Icon,
+  label,
+  active,
+  disabled,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      title: label,
+      className: `${iconButtonBase} ${active ? "bg-primary text-primary-foreground hover:bg-primary/90" : "bg-transparent hover:bg-muted"}`,
+      disabled,
+      onClick,
+      children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" })
+    }
+  );
+}
+var headingOptions = [
+  { label: "Paragraph", value: "paragraph" },
+  { label: "Heading 1", value: "h1", level: 1 },
+  { label: "Heading 2", value: "h2", level: 2 },
+  { label: "Heading 3", value: "h3", level: 3 }
+];
+function Divider() {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mx-1 h-6 w-px shrink-0 bg-border" });
+}
+var Toolbar = ({
+  editor,
+  onRequestImageUpload,
+  isUploadingImage
+}) => {
+  const [activePopover, setActivePopover] = useState(null);
+  const [wordCount, setWordCount] = useState(0);
+  const popoverRef = useRef(null);
+  useEffect(() => {
+    if (!activePopover) return void 0;
+    const handleClick = (event) => {
+      if (popoverRef.current && !popoverRef.current.contains(event.target)) {
+        setActivePopover(null);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") setActivePopover(null);
+    };
+    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [activePopover]);
+  useEffect(() => {
+    if (!editor) return void 0;
+    const updateStats = () => {
+      const text = editor.getText().trim();
+      setWordCount(text ? text.split(/\s+/).length : 0);
+    };
+    updateStats();
+    editor.on("update", updateStats);
+    return () => {
+      editor.off("update", updateStats);
+    };
+  }, [editor]);
+  if (!editor) return null;
+  const activeHeading = headingOptions.find(
+    (option) => option.level ? editor.isActive("heading", { level: option.level }) : editor.isActive("paragraph")
+  ) ?? headingOptions[0];
+  const readTime = wordCount === 0 ? 0 : Math.max(1, Math.ceil(wordCount / 200));
+  const selectHeading = (level) => {
+    const chain = editor.chain().focus();
+    if (level) chain.setHeading({ level }).run();
+    else chain.setParagraph().run();
+    setActivePopover(null);
+  };
+  const insertTable = () => {
+    editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+    setActivePopover(null);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "overflow-visible border-b border-border bg-card", children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-11 flex-wrap items-center gap-1 px-4 py-1", children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          icon: Undo2,
+          label: "Undo",
+          disabled: !editor.can().undo(),
+          onClick: () => editor.chain().focus().undo().run()
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          icon: Redo2,
+          label: "Redo",
+          disabled: !editor.can().redo(),
+          onClick: () => editor.chain().focus().redo().run()
+        }
+      ),
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: activePopover === "heading" ? popoverRef : void 0,
+          className: "relative",
+          children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "flex h-8 min-w-28 items-center justify-between gap-3 rounded border border-input bg-card px-3 text-sm font-medium hover:bg-muted",
+                "aria-haspopup": "menu",
+                "aria-expanded": activePopover === "heading",
+                onClick: () => setActivePopover(
+                  (current) => current === "heading" ? null : "heading"
+                ),
+                children: [
+                  activeHeading.label,
+                  /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-muted-foreground" })
+                ]
+              }
+            ),
+            activePopover === "heading" && /* @__PURE__ */ jsx("div", { className: "te-popover absolute left-0 top-full z-30 mt-1 w-40 rounded-md p-1 shadow-lg", children: headingOptions.map((option) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: "flex w-full rounded px-2.5 py-2 text-left text-sm hover:bg-muted",
+                onClick: () => selectHeading(option.level),
+                children: option.label
+              },
+              option.value
+            )) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          icon: Bold,
+          label: "Bold",
+          active: editor.isActive("bold"),
+          onClick: () => editor.chain().focus().toggleBold().run()
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          icon: Italic,
+          label: "Italic",
+          active: editor.isActive("italic"),
+          onClick: () => editor.chain().focus().toggleItalic().run()
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          icon: Underline,
+          label: "Underline",
+          active: editor.isActive("underline"),
+          onClick: () => editor.chain().focus().toggleMark("underline").run()
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          icon: Code,
+          label: "Inline code",
+          active: editor.isActive("code"),
+          onClick: () => editor.chain().focus().toggleCode().run()
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          icon: Link$1,
+          label: "Insert link",
+          active: editor.isActive("link"),
+          onClick: () => setActivePopover(
+            (current) => current === "link" ? null : "link"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          icon: List,
+          label: "Bullet list",
+          active: editor.isActive("bulletList"),
+          onClick: () => editor.chain().focus().toggleBulletList().run()
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          icon: ListOrdered,
+          label: "Numbered list",
+          active: editor.isActive("orderedList"),
+          onClick: () => editor.chain().focus().toggleOrderedList().run()
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          icon: Quote,
+          label: "Blockquote",
+          active: editor.isActive("blockquote"),
+          onClick: () => editor.chain().focus().toggleBlockquote().run()
+        }
+      ),
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: activePopover === "insert" ? popoverRef : void 0,
+          className: "relative",
+          children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "flex h-8 items-center gap-1.5 rounded border border-primary px-2.5 text-sm font-semibold text-primary hover:bg-[var(--primary-soft)]",
+                "aria-haspopup": "menu",
+                "aria-expanded": activePopover === "insert",
+                onClick: () => setActivePopover(
+                  (current) => current === "insert" ? null : "insert"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+                  "Insert"
+                ]
+              }
+            ),
+            activePopover === "insert" && /* @__PURE__ */ jsxs("div", { className: "te-popover absolute right-0 top-full z-30 mt-1 w-52 rounded-md p-1 shadow-lg", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "flex w-full items-center gap-2 rounded px-2.5 py-2 text-sm hover:bg-muted",
+                  onClick: () => {
+                    editor.chain().focus().setHorizontalRule().run();
+                    setActivePopover(null);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Minus, { className: "size-4" }),
+                    "Horizontal rule"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "flex w-full items-center gap-2 rounded px-2.5 py-2 text-sm hover:bg-muted",
+                  onClick: () => {
+                    editor.chain().focus().toggleCodeBlock().run();
+                    setActivePopover(null);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Code, { className: "size-4" }),
+                    "Code block"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "flex w-full items-center gap-2 rounded px-2.5 py-2 text-sm hover:bg-muted disabled:opacity-50",
+                  onClick: insertTable,
+                  disabled: !editor.can().chain().focus().insertTable({
+                    rows: 3,
+                    cols: 3,
+                    withHeaderRow: true
+                  }).run(),
+                  children: [
+                    /* @__PURE__ */ jsx(Table$1, { className: "size-4" }),
+                    "Table"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "flex w-full items-center gap-2 rounded px-2.5 py-2 text-sm hover:bg-muted disabled:opacity-50",
+                  disabled: isUploadingImage,
+                  onClick: () => {
+                    onRequestImageUpload();
+                    setActivePopover(null);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Image$1, { className: "size-4" }),
+                    isUploadingImage ? "Uploading image\u2026" : "Image"
+                  ]
+                }
+              ),
+              editor.isActive("table") && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { className: "my-1 h-px bg-border" }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex w-full rounded px-2.5 py-2 text-sm hover:bg-muted",
+                    onClick: () => {
+                      editor.chain().focus().addRowAfter().run();
+                      setActivePopover(null);
+                    },
+                    children: "Add table row"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex w-full rounded px-2.5 py-2 text-sm hover:bg-muted",
+                    onClick: () => {
+                      editor.chain().focus().addColumnAfter().run();
+                      setActivePopover(null);
+                    },
+                    children: "Add table column"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex w-full items-center gap-2 rounded px-2.5 py-2 text-sm text-destructive hover:bg-destructive/10",
+                    onClick: () => {
+                      editor.chain().focus().deleteTable().run();
+                      setActivePopover(null);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Trash2, { className: "size-4" }),
+                      "Remove table"
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "ml-auto hidden pl-8 text-xs tabular-nums text-muted-foreground xl:inline", children: [
+        wordCount.toLocaleString(),
+        " ",
+        wordCount === 1 ? "word" : "words",
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mx-2", children: "\xB7" }),
+        readTime,
+        " min"
+      ] })
+    ] }) }),
+    activePopover === "link" && /* @__PURE__ */ jsx(
+      link_editor_popover_default,
+      {
+        editor,
+        onClose: () => setActivePopover(null),
+        containerRef: popoverRef
+      }
+    )
+  ] });
+};
+var toolbar_default = Toolbar;
+var buttonBase = "inline-flex h-8 w-8 items-center justify-center rounded text-foreground transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary";
+var TipTapBubbleMenu = ({
+  editor,
+  className,
+  children,
+  pluginKey = "inlineBubbleMenu",
+  updateDelay,
+  resizeDelay,
+  shouldShow,
+  appendTo,
+  getReferencedVirtualElement,
+  options
+}) => {
+  const menuRef = useRef(null);
+  useEffect(() => {
+    const element = menuRef.current;
+    if (!editor || editor.isDestroyed || !element) {
+      return;
+    }
+    const plugin = BubbleMenuPlugin({
+      editor,
+      element,
+      pluginKey,
+      updateDelay,
+      resizeDelay,
+      shouldShow: shouldShow ?? null,
+      appendTo,
+      getReferencedVirtualElement,
+      options
+    });
+    editor.registerPlugin(plugin);
+    return () => {
+      editor.unregisterPlugin(pluginKey);
+    };
+  }, [
+    editor,
+    pluginKey,
+    updateDelay,
+    resizeDelay,
+    shouldShow,
+    appendTo,
+    getReferencedVirtualElement,
+    options
+  ]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: menuRef,
+      className,
+      style: { visibility: "hidden" },
+      children
+    }
+  );
+};
+function InlineButton({
+  icon: Icon,
+  label,
+  active,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      title: label,
+      className: `${buttonBase} ${active ? "bg-primary text-primary-foreground hover:bg-primary/90" : "bg-transparent hover:bg-muted"}`,
+      onClick,
+      children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" })
+    }
+  );
+}
+var InlineBubbleMenu = ({
+  editor
+}) => {
+  const [isLinkEditing, setIsLinkEditing] = useState(false);
+  const openLinkEditor = useCallback(() => {
+    setIsLinkEditing((prev) => !prev);
+  }, []);
+  useEffect(() => {
+    const handleSelectionUpdate = () => {
+      setIsLinkEditing(false);
+    };
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor]);
+  if (!editor) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    TipTapBubbleMenu,
+    {
+      editor,
+      className: "bubble-menu flex flex-col gap-1 rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-xl",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(
+            InlineButton,
+            {
+              icon: Bold,
+              label: "Bold",
+              active: editor.isActive("bold"),
+              onClick: () => editor.chain().focus().toggleBold().run()
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InlineButton,
+            {
+              icon: Italic,
+              label: "Italic",
+              active: editor.isActive("italic"),
+              onClick: () => editor.chain().focus().toggleItalic().run()
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InlineButton,
+            {
+              icon: Underline,
+              label: "Underline",
+              active: editor.isActive("underline"),
+              onClick: () => editor.chain().focus().toggleMark("underline").run()
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InlineButton,
+            {
+              icon: Strikethrough,
+              label: "Strikethrough",
+              active: editor.isActive("strike"),
+              onClick: () => editor.chain().focus().toggleStrike().run()
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InlineButton,
+            {
+              icon: Code,
+              label: "Inline code",
+              active: editor.isActive("code"),
+              onClick: () => editor.chain().focus().toggleCode().run()
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InlineButton,
+            {
+              icon: Link$1,
+              label: "Insert link",
+              active: editor.isActive("link"),
+              onClick: openLinkEditor
+            }
+          )
+        ] }),
+        isLinkEditing && /* @__PURE__ */ jsx(
+          link_editor_popover_default,
+          {
+            editor,
+            onClose: () => setIsLinkEditing(false),
+            variant: "inline"
+          }
+        )
+      ]
+    }
+  );
+};
+var bubble_menu_default = InlineBubbleMenu;
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var ImagePickerContext = createContext(null);
+function ImagePickerContextProvider({
+  pickImage,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ImagePickerContext.Provider, { value: pickImage, children });
+}
+function useImagePicker() {
+  return useContext(ImagePickerContext);
+}
+var Editor = Object.assign(
+  ({
+    initialContent,
+    onChange,
+    placeholder,
+    children,
+    showToolbar = true,
+    editable = true,
+    refresh,
+    url,
+    autoFocus,
+    imageSizeLimit,
+    onError,
+    className,
+    editorClassName,
+    contentClassName,
+    beforeContent
+  }) => {
+    const [isUploading, setIsUploading] = useState(false);
+    const fileInputRef = useRef(null);
+    const pickImage = useImagePicker();
+    const hasInteractedRef = useRef(false);
+    const lastSerializedContentRef = useRef(
+      JSON.stringify(initialContent ?? empty_doc_default)
+    );
+    const refreshRef = useRef(refresh);
+    const extensions = useMemo(
+      () => createExtensions({ placeholder }),
+      [placeholder]
+    );
+    const changeTimeoutRef = useRef(
+      null
+    );
+    const editor = useEditor(
+      {
+        immediatelyRender: false,
+        extensions,
+        content: initialContent ?? empty_doc_default,
+        autofocus: autoFocus ? "end" : false,
+        editable,
+        editorProps: {
+          attributes: {
+            class: `tiptap-content ${editorClassName ?? ""}`,
+            "data-placeholder": placeholder ?? ""
+          }
+        },
+        onUpdate: ({ editor: instance }) => {
+          if (!hasInteractedRef.current) {
+            return;
+          }
+          if (changeTimeoutRef.current) {
+            clearTimeout(changeTimeoutRef.current);
+          }
+          changeTimeoutRef.current = setTimeout(() => {
+            onChange(instance.getJSON());
+            changeTimeoutRef.current = null;
+          }, 1e3);
+        },
+        onSelectionUpdate: ({ editor: instance }) => {
+          hasInteractedRef.current = true;
+        }
+      },
+      [extensions]
+    );
+    useEffect(() => {
+      return () => {
+        if (changeTimeoutRef.current) {
+          clearTimeout(changeTimeoutRef.current);
+        }
+      };
+    }, []);
+    useEffect(() => {
+      if (!editor) {
+        return;
+      }
+      editor.setEditable(editable);
+    }, [editor, editable]);
+    useEffect(() => {
+      if (!editor) {
+        return;
+      }
+      const nextContent = initialContent ?? empty_doc_default;
+      const nextSerialized = JSON.stringify(nextContent);
+      const refreshChanged = refreshRef.current !== refresh;
+      if (refreshChanged) {
+        refreshRef.current = refresh;
+        hasInteractedRef.current = false;
+        lastSerializedContentRef.current = nextSerialized;
+        editor.commands.setContent(nextContent, {
+          emitUpdate: false
+        });
+        return;
+      }
+      if (!hasInteractedRef.current) {
+        if (lastSerializedContentRef.current !== nextSerialized) {
+          lastSerializedContentRef.current = nextSerialized;
+          editor.commands.setContent(nextContent, {
+            emitUpdate: false
+          });
+        }
+        return;
+      }
+      lastSerializedContentRef.current = nextSerialized;
+    }, [editor, initialContent, refresh]);
+    const handleImageUpload = useCallback(
+      async (file) => {
+        const sizeLimit = imageSizeLimit ?? 2097152;
+        if (file.size > sizeLimit) {
+          onError?.("File is larger than the allowed size");
+          return;
+        }
+        try {
+          setIsUploading(true);
+          const dataUrl = await new Promise(
+            (resolve, reject) => {
+              const reader = new FileReader();
+              reader.onload = () => resolve(reader.result);
+              reader.onerror = reject;
+              reader.readAsDataURL(file);
+            }
+          );
+          editor?.chain().focus().setImage({
+            src: dataUrl,
+            alt: file.name,
+            title: file.name
+          }).run();
+        } catch (error) {
+          console.error("Image upload failed", error);
+        } finally {
+          setIsUploading(false);
+        }
+      },
+      [editor]
+    );
+    const handleSelectFile = useCallback(
+      (event) => {
+        const files = event.target.files;
+        if (!files || files.length === 0) {
+          return;
+        }
+        const file = files[0];
+        void handleImageUpload(file);
+        event.target.value = "";
+      },
+      [handleImageUpload]
+    );
+    const insertPickedImage = useCallback(
+      (image) => {
+        editor?.chain().focus().setImage({
+          src: image.src,
+          alt: image.alt,
+          title: image.alt
+        }).run();
+      },
+      [editor]
+    );
+    const openFileDialog = useCallback(() => {
+      if (pickImage) {
+        void pickImage().then((image) => {
+          if (image) insertPickedImage(image);
+        });
+        return;
+      }
+      fileInputRef.current?.click();
+    }, [insertPickedImage, pickImage]);
+    if (typeof window === "undefined") {
+      return /* @__PURE__ */ jsx(Fragment, {});
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "tiptap-editor flex flex-col gap-4 border",
+          className
+        ),
+        children: [
+          editable && showToolbar && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "sticky top-0 bg-background",
+              style: {
+                zIndex: 1
+              },
+              children: /* @__PURE__ */ jsx(
+                toolbar_default,
+                {
+                  editor,
+                  onRequestImageUpload: openFileDialog,
+                  isUploadingImage: isUploading
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex w-full justify-center", children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex w-full max-w-3xl flex-col",
+                contentClassName
+              ),
+              children: [
+                beforeContent,
+                /* @__PURE__ */ jsx(
+                  EditorContent,
+                  {
+                    editor,
+                    className: `${editorClassName ?? ""} ${editorClassName?.includes("min-h-") ? "" : "min-h-[200px]"}`
+                  }
+                ),
+                pickImage ? null : /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: fileInputRef,
+                    type: "file",
+                    accept: "image/*",
+                    className: "hidden",
+                    onChange: handleSelectFile
+                  }
+                ),
+                children,
+                editor && /* @__PURE__ */ jsx(bubble_menu_default, { editor })
+              ]
+            }
+          ) })
+        ]
+      }
+    );
+  },
+  {
+    getPlainText: (doc) => generateText(doc || empty_doc_default, createExtensions()),
+    emptyDoc: empty_doc_default
+  }
+);
+var editor_default = Editor;
+
+// src/extract-headings.ts
+function extractHeadings(json2) {
+  const headings = [];
+  const collectHeadings = (node) => {
+    if (!node) {
+      return;
+    }
+    if (node.type === "heading") {
+      const level = typeof node.attrs?.level === "number" ? node.attrs.level : 1;
+      const collectText = (current) => {
+        if (!current) {
+          return "";
+        }
+        if (typeof current.text === "string") {
+          return current.text;
+        }
+        if (!current.content) {
+          return "";
+        }
+        return current.content.map(collectText).join("");
+      };
+      const textContent = collectText(node);
+      headings.push({
+        level,
+        text: textContent,
+        id: createId(textContent)
+      });
+    }
+    if (Array.isArray(node.content)) {
+      node.content.forEach((child) => {
+        collectHeadings(child);
+      });
+    }
+  };
+  collectHeadings(json2 || void 0);
+  return headings;
+}
+
+// src/extract-text-from-node.ts
+function extractTextFromNode(node) {
+  if (!node) {
+    return "";
+  }
+  if (typeof node.textContent === "string") {
+    return node.textContent;
+  }
+  if (node.content && node.content.content && Array.isArray(node.content.content)) {
+    return node.content.content.map((child) => {
+      if (child.text) {
+        return child.text;
+      }
+      return extractTextFromNode(child);
+    }).join("");
+  }
+  if (Array.isArray(node.content)) {
+    return node.content.map((child) => {
+      if (child.text) {
+        return child.text;
+      }
+      return extractTextFromNode(child);
+    }).join("");
+  }
+  return "";
+}
+function textFromChildren(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
+  }
+  if (Array.isArray(node)) return node.map(textFromChildren).join("");
+  if (React5.isValidElement(node)) {
+    return textFromChildren(node.props.children);
+  }
+  return "";
+}
+async function writeClipboard(text) {
+  if (navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+  const area = document.createElement("textarea");
+  area.value = text;
+  area.setAttribute("readonly", "");
+  area.style.position = "fixed";
+  area.style.left = "-9999px";
+  document.body.appendChild(area);
+  area.select();
+  document.execCommand("copy");
+  area.remove();
+}
+function RenderedCodeBlock({
+  node,
+  children,
+  language
+}) {
+  const [copied, setCopied] = useState(false);
+  const source = extractTextFromNode(node) || textFromChildren(children);
+  useEffect(() => {
+    if (!copied) return;
+    const timer = window.setTimeout(() => setCopied(false), 1500);
+    return () => window.clearTimeout(timer);
+  }, [copied]);
+  async function handleCopy() {
+    if (!source) return;
+    try {
+      await writeClipboard(source);
+      setCopied(true);
+    } catch {
+      setCopied(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "te-code-block", children: [
+    /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { className: language ? `language-${language}` : void 0, children }) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "te-code-copy",
+        "aria-label": copied ? "Copied" : "Copy code",
+        title: copied ? "Copied" : "Copy",
+        onClick: () => {
+          void handleCopy();
+        },
+        children: copied ? /* @__PURE__ */ jsx(Check, { className: "te-code-copy__icon", "aria-hidden": true }) : /* @__PURE__ */ jsx(Copy, { className: "te-code-copy__icon", "aria-hidden": true })
+      }
+    )
+  ] });
+}
+var typographyClasses = (typography) => [
+  typography?.fontFamily,
+  typography?.fontSize,
+  typography?.fontWeight,
+  typography?.lineHeight,
+  typography?.letterSpacing,
+  typography?.textTransform,
+  typography?.textDecoration,
+  typography?.textOverflow
+];
+function removeEmptyTextNodes(node) {
+  if (!node || typeof node !== "object") {
+    return node;
+  }
+  if (node.type === "text" && node.text === "") {
+    return void 0;
+  }
+  if (!Array.isArray(node.content)) {
+    return node;
+  }
+  const content = node.content.map(removeEmptyTextNodes).filter((child) => child !== void 0);
+  return {
+    ...node,
+    content
+  };
+}
+function TextRenderer({ json: json2, className, theme }) {
+  const extensions = createExtensions();
+  const content = removeEmptyTextNodes(
+    json2 ?? empty_doc_default
+  );
+  const rendered = renderToReactElement({
+    extensions,
+    content,
+    options: {
+      nodeMapping: {
+        paragraph: ({ children }) => {
+          const classes = cn(
+            "text-base",
+            ...typographyClasses(theme?.typography?.text1)
+          );
+          return /* @__PURE__ */ jsx("p", { className: classes, children });
+        },
+        hardBreak: () => /* @__PURE__ */ jsx("br", {}),
+        heading: ({ node, children }) => {
+          const level = node?.attrs?.level ?? 1;
+          const textContent = extractTextFromNode(node);
+          const id = createId(textContent);
+          if (!theme) {
+            const Tag = `h${level}`;
+            return /* @__PURE__ */ jsx(Tag, { id, children });
+          }
+          if (level === 1) {
+            const classes2 = cn(
+              "scroll-m-20 text-4xl font-bold tracking-tight",
+              ...typographyClasses(theme?.typography?.header1)
+            );
+            return /* @__PURE__ */ jsx("h1", { id, className: classes2, children });
+          }
+          if (level === 2) {
+            const classes2 = cn(
+              "scroll-m-20 text-3xl font-bold tracking-tight",
+              ...typographyClasses(theme?.typography?.header2)
+            );
+            return /* @__PURE__ */ jsx("h2", { id, className: classes2, children });
+          }
+          const classes = cn(
+            "scroll-m-20 text-2xl font-semibold tracking-normal",
+            ...typographyClasses(theme?.typography?.header3)
+          );
+          return /* @__PURE__ */ jsx("h3", { id, className: classes, children });
+        },
+        codeBlock: ({ node, children }) => /* @__PURE__ */ jsx(
+          RenderedCodeBlock,
+          {
+            node,
+            language: node?.attrs?.language,
+            children
+          }
+        ),
+        codeMirror: ({ node, children }) => /* @__PURE__ */ jsx(RenderedCodeBlock, { node, children })
+      },
+      markMapping: {
+        link: ({ mark, children }) => {
+          const href = mark?.attrs?.href;
+          const linkStyle = theme?.interactives?.link;
+          const classes = cn(
+            "font-medium cursor-pointer",
+            ...typographyClasses(theme?.typography?.link),
+            linkStyle?.padding?.x,
+            linkStyle?.padding?.y,
+            linkStyle?.border?.width,
+            linkStyle?.border?.radius,
+            linkStyle?.border?.style,
+            linkStyle?.custom
+          );
+          return /* @__PURE__ */ jsx(
+            "a",
+            {
+              href,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: classes,
+              style: {
+                textShadow: linkStyle?.textShadow || void 0
+              },
+              children
+            }
+          );
+        },
+        highlight: ({ children }) => /* @__PURE__ */ jsx("mark", { className: "bg-accent text-accent-foreground", children })
+      }
+    }
+  });
+  const combinedClassName = ["tiptap-renderer", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: "text-editor flex flex-col gap-4", children: /* @__PURE__ */ jsx("div", { className: combinedClassName, children: rendered }) });
+}
+
+// src/normalize-text-editor-content.ts
+function createParagraphNode(text) {
+  const lines = text.split("\n");
+  const content = [];
+  lines.forEach((line, index) => {
+    if (line) {
+      content.push({
+        type: "text",
+        text: line
+      });
+    }
+    if (index < lines.length - 1) {
+      content.push({
+        type: "hardBreak"
+      });
+    }
+  });
+  return {
+    type: "paragraph",
+    ...content.length ? { content } : {}
+  };
+}
+function normalizeTextEditorContent(json2) {
+  if (json2 && typeof json2 === "object" && "type" in json2 && json2.type === "doc") {
+    return json2;
+  }
+  const text = typeof json2 === "string" ? json2.replace(/\r\n?/g, "\n") : "";
+  return {
+    type: "doc",
+    content: text ? text.split(/\n{2,}/).map((paragraph) => createParagraphNode(paragraph)) : []
+  };
+}
+
+// src/extract-text-from-text-editor-content.ts
+function extractTextFromTextEditorContent(content) {
+  if (typeof content === "string") {
+    return content;
+  }
+  if (!content || typeof content !== "object") {
+    return "";
+  }
+  const record = content;
+  const ownText = typeof record.text === "string" ? record.text : "";
+  const children = Array.isArray(record.content) ? record.content.map(extractTextFromTextEditorContent).join("") : "";
+  return `${ownText}${children}`;
+}
+
+// src/truncate-text-editor-content.ts
+function appendEllipsisToLastTextNode(nodes) {
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    const node = nodes[i];
+    if (!node) {
+      continue;
+    }
+    if (node.type === "text" && typeof node.text === "string") {
+      if (!node.text.endsWith("...")) {
+        nodes[i] = {
+          ...node,
+          text: `${node.text.trimEnd()}...`
+        };
+      }
+      return nodes;
+    }
+    if (Array.isArray(node.content) && node.content.length) {
+      nodes[i] = {
+        ...node,
+        content: appendEllipsisToLastTextNode([...node.content])
+      };
+      return nodes;
+    }
+  }
+  return nodes;
+}
+function truncateNodes(nodes, remaining) {
+  const truncatedNodes = [];
+  let truncated = false;
+  for (let index = 0; index < nodes.length; index++) {
+    const node = nodes[index];
+    if (!node) {
+      continue;
+    }
+    if (remaining <= 0) {
+      truncated = true;
+      break;
+    }
+    if (node.type === "text" && typeof node.text === "string") {
+      if (node.text.length <= remaining) {
+        truncatedNodes.push(node);
+        remaining -= node.text.length;
+      } else {
+        truncatedNodes.push({
+          ...node,
+          text: node.text.slice(0, remaining).trimEnd()
+        });
+        remaining = 0;
+        truncated = true;
+        break;
+      }
+      continue;
+    }
+    if (node.type === "hardBreak") {
+      truncatedNodes.push(node);
+      remaining -= 1;
+      continue;
+    }
+    if (Array.isArray(node.content)) {
+      const result = truncateNodes(node.content, remaining);
+      remaining = result.remaining;
+      if (result.nodes.length > 0) {
+        truncatedNodes.push({
+          ...node,
+          content: result.nodes
+        });
+      }
+      if (result.truncated) {
+        truncated = true;
+        break;
+      }
+      continue;
+    }
+    truncatedNodes.push(node);
+  }
+  if (truncated) {
+    return {
+      nodes: appendEllipsisToLastTextNode(truncatedNodes),
+      remaining,
+      truncated
+    };
+  }
+  return {
+    nodes: truncatedNodes,
+    remaining,
+    truncated
+  };
+}
+function truncateTextEditorContent(json2, characterLimit) {
+  if (!characterLimit || characterLimit <= 0) {
+    return json2;
+  }
+  const content = Array.isArray(json2?.content) ? json2.content : [];
+  const result = truncateNodes(content, characterLimit);
+  return {
+    ...json2,
+    content: result.nodes
+  };
+}
+
+export { editor_default as Editor, ImagePickerContextProvider, TextRenderer, createExtensions, createId, empty_doc_default as emptyDoc, extractHeadings, extractTextFromNode, extractTextFromTextEditorContent, normalizeTextEditorContent, truncateTextEditorContent, useImagePicker };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map