gridsmith-ui 0.4.0 → 0.6.0

package/dist/editor.js

@@ -0,0 +1,632 @@
+import { useBreakpoint } from './chunk-DPF6776I.js';
+import { Icon } from './chunk-XUBVMRIE.js';
+import { cn } from './chunk-IUBWNDUK.js';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Link from '@tiptap/extension-link';
+import Image from '@tiptap/extension-image';
+import { Table } from '@tiptap/extension-table';
+import { TableRow } from '@tiptap/extension-table-row';
+import { TableCell } from '@tiptap/extension-table-cell';
+import { TableHeader } from '@tiptap/extension-table-header';
+import Placeholder from '@tiptap/extension-placeholder';
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
+import Underline from '@tiptap/extension-underline';
+import { TextStyle, FontSize } from '@tiptap/extension-text-style';
+import Color from '@tiptap/extension-color';
+import Highlight from '@tiptap/extension-highlight';
+import TextAlign from '@tiptap/extension-text-align';
+import TaskList from '@tiptap/extension-task-list';
+import TaskItem from '@tiptap/extension-task-item';
+import Subscript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import FontFamily from '@tiptap/extension-font-family';
+import { createLowlight, all } from 'lowlight';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var lowlight = createLowlight(all);
+var DEFAULT_TOOLBAR = [
+  "blockType",
+  "fontFamily",
+  "textSize",
+  "formatting",
+  "colors",
+  "alignment",
+  "lists",
+  "blocks",
+  "insert",
+  "extras",
+  "history"
+];
+var MINIMAL_TOOLBAR = [
+  "formatting",
+  "lists",
+  "insert",
+  "history"
+];
+function RichTextEditor({
+  content = "",
+  placeholder = "Start writing...",
+  onChange,
+  editable = true,
+  toolbar = "full",
+  className,
+  ref,
+  label = "Rich text editor"
+}) {
+  const resolvedToolbar = toolbar === "full" ? DEFAULT_TOOLBAR : toolbar === "minimal" ? MINIMAL_TOOLBAR : toolbar;
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({ codeBlock: false }),
+      Link.configure({ openOnClick: false, HTMLAttributes: { class: "rte-link" } }),
+      Image.configure({ inline: false, allowBase64: true }),
+      CodeBlockLowlight.configure({ lowlight }),
+      Table.configure({ resizable: false }),
+      TableRow,
+      TableCell,
+      TableHeader,
+      Placeholder.configure({ placeholder }),
+      Underline,
+      TextStyle,
+      FontSize,
+      Color,
+      Highlight.configure({ multicolor: true }),
+      TextAlign.configure({ types: ["heading", "paragraph"] }),
+      TaskList,
+      TaskItem.configure({ nested: true }),
+      Subscript,
+      Superscript,
+      FontFamily
+    ],
+    content,
+    editable,
+    // Setting attributes replaces tiptap's defaults, so restore role="textbox" alongside the name.
+    editorProps: { attributes: { role: "textbox", "aria-label": label, "aria-multiline": "true" } },
+    onUpdate: ({ editor: e }) => onChange?.(e.getHTML())
+  });
+  if (!editor) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-col rounded-[var(--ds-radius-md)] overflow-hidden",
+        "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+        "bg-[var(--ds-bg-surface)]",
+        className
+      ),
+      children: [
+        editable && /* @__PURE__ */ jsx(Toolbar, { editor, groups: resolvedToolbar }),
+        /* @__PURE__ */ jsx(
+          EditorContent,
+          {
+            editor,
+            className: cn(
+              "rte-content",
+              "flex-1 overflow-y-auto px-ds-4 py-ds-3",
+              "text-sm text-[var(--ds-text-primary)]",
+              "focus-within:outline-none"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var TEXT_COLORS = [
+  { label: "Default", value: "" },
+  { label: "Red", value: "#ef4444" },
+  { label: "Orange", value: "#f97316" },
+  { label: "Yellow", value: "#eab308" },
+  { label: "Green", value: "#22c55e" },
+  { label: "Blue", value: "#3b82f6" },
+  { label: "Purple", value: "#a855f7" },
+  { label: "Pink", value: "#ec4899" }
+];
+var HIGHLIGHT_COLORS = [
+  { label: "None", value: "" },
+  { label: "Yellow", value: "#fef08a" },
+  { label: "Green", value: "#bbf7d0" },
+  { label: "Blue", value: "#bfdbfe" },
+  { label: "Pink", value: "#fbcfe8" },
+  { label: "Orange", value: "#fed7aa" },
+  { label: "Purple", value: "#e9d5ff" }
+];
+var FONT_FAMILIES = [
+  { label: "Default", value: "" },
+  { label: "Sans", value: "var(--ds-font-sans)" },
+  { label: "Mono", value: "var(--ds-font-mono)" },
+  { label: "Display", value: "var(--ds-font-display)" },
+  { label: "Serif", value: "Georgia, serif" }
+];
+var TEXT_SIZES = [
+  { label: "Small", value: "0.85em" },
+  { label: "Normal", value: "" },
+  { label: "Large", value: "1.2em" },
+  { label: "Huge", value: "1.5em" }
+];
+function Toolbar({ editor, groups }) {
+  const [, forceUpdate] = useState(0);
+  const isMobile = useBreakpoint("sm");
+  useEffect(() => {
+    const handler = () => forceUpdate((n) => n + 1);
+    editor.on("selectionUpdate", handler);
+    editor.on("transaction", handler);
+    return () => {
+      editor.off("selectionUpdate", handler);
+      editor.off("transaction", handler);
+    };
+  }, [editor]);
+  const inTable = editor.isActive("table");
+  const has = (g) => groups.includes(g);
+  const groupElements = [];
+  if (has("blockType")) groupElements.push(/* @__PURE__ */ jsx(BlockTypeSelect, { editor }, "blockType"));
+  if (has("fontFamily")) groupElements.push(/* @__PURE__ */ jsx(FontFamilySelect, { editor }, "fontFamily"));
+  if (has("textSize")) groupElements.push(/* @__PURE__ */ jsx(TextSizeControls, { editor }, "textSize"));
+  if (has("formatting")) {
+    groupElements.push(
+      /* @__PURE__ */ jsxs(ToolGroup, { children: [
+        /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("bold"), onClick: () => editor.chain().focus().toggleBold().run(), title: "Bold (Ctrl+B)", children: /* @__PURE__ */ jsx(Icon, { name: "bold", size: 16 }) }),
+        /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("italic"), onClick: () => editor.chain().focus().toggleItalic().run(), title: "Italic (Ctrl+I)", children: /* @__PURE__ */ jsx(Icon, { name: "italic", size: 16 }) }),
+        /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("underline"), onClick: () => editor.chain().focus().toggleUnderline().run(), title: "Underline (Ctrl+U)", children: /* @__PURE__ */ jsx(Icon, { name: "underline", size: 16 }) }),
+        /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("strike"), onClick: () => editor.chain().focus().toggleStrike().run(), title: "Strikethrough", children: /* @__PURE__ */ jsx(Icon, { name: "strikethrough", size: 16 }) })
+      ] }, "formatting")
+    );
+  }
+  if (has("colors")) {
+    groupElements.push(
+      /* @__PURE__ */ jsxs(ToolGroup, { children: [
+        /* @__PURE__ */ jsx(
+          ColorPicker,
+          {
+            colors: TEXT_COLORS,
+            activeColor: editor.getAttributes("textStyle").color ?? "",
+            onSelect: (c) => c ? editor.chain().focus().setColor(c).run() : editor.chain().focus().unsetColor().run(),
+            title: "Text color",
+            icon: /* @__PURE__ */ jsx(Icon, { name: "type", size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ColorPicker,
+          {
+            colors: HIGHLIGHT_COLORS,
+            activeColor: editor.getAttributes("highlight").color ?? "",
+            onSelect: (c) => c ? editor.chain().focus().toggleHighlight({ color: c }).run() : editor.chain().focus().unsetHighlight().run(),
+            title: "Highlight",
+            icon: /* @__PURE__ */ jsx(Icon, { name: "highlight", size: 16 })
+          }
+        )
+      ] }, "colors")
+    );
+  }
+  if (has("alignment")) {
+    groupElements.push(
+      /* @__PURE__ */ jsxs(ToolGroup, { children: [
+        /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive({ textAlign: "left" }), onClick: () => editor.chain().focus().setTextAlign("left").run(), title: "Align left", children: /* @__PURE__ */ jsx(Icon, { name: "align-left", size: 16 }) }),
+        /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive({ textAlign: "center" }), onClick: () => editor.chain().focus().setTextAlign("center").run(), title: "Align center", children: /* @__PURE__ */ jsx(Icon, { name: "align-center", size: 16 }) }),
+        /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive({ textAlign: "right" }), onClick: () => editor.chain().focus().setTextAlign("right").run(), title: "Align right", children: /* @__PURE__ */ jsx(Icon, { name: "align-right", size: 16 }) })
+      ] }, "alignment")
+    );
+  }
+  if (has("lists")) {
+    groupElements.push(
+      /* @__PURE__ */ jsxs(ToolGroup, { children: [
+        /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("bulletList"), onClick: () => editor.chain().focus().toggleBulletList().run(), title: "Bullet list", children: /* @__PURE__ */ jsx(Icon, { name: "list", size: 16 }) }),
+        /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("orderedList"), onClick: () => editor.chain().focus().toggleOrderedList().run(), title: "Ordered list", children: /* @__PURE__ */ jsx(Icon, { name: "list-ordered", size: 16 }) }),
+        /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("taskList"), onClick: () => editor.chain().focus().toggleTaskList().run(), title: "Task list", children: /* @__PURE__ */ jsx(Icon, { name: "list-checks", size: 16 }) })
+      ] }, "lists")
+    );
+  }
+  if (has("blocks")) {
+    groupElements.push(
+      /* @__PURE__ */ jsxs(ToolGroup, { children: [
+        /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("blockquote"), onClick: () => editor.chain().focus().toggleBlockquote().run(), title: "Blockquote", children: /* @__PURE__ */ jsx(Icon, { name: "quote", size: 16 }) }),
+        /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("codeBlock"), onClick: () => editor.chain().focus().toggleCodeBlock().run(), title: "Code block", children: /* @__PURE__ */ jsx(Icon, { name: "code", size: 16 }) })
+      ] }, "blocks")
+    );
+  }
+  if (has("insert")) {
+    groupElements.push(
+      /* @__PURE__ */ jsxs(ToolGroup, { children: [
+        /* @__PURE__ */ jsx(LinkPopover, { editor }),
+        /* @__PURE__ */ jsx(ImagePopover, { editor }),
+        /* @__PURE__ */ jsx(ToolBtn, { onClick: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(), disabled: inTable, title: "Insert table", children: /* @__PURE__ */ jsx(Icon, { name: "table", size: 16 }) }),
+        /* @__PURE__ */ jsx(ToolBtn, { onClick: () => editor.chain().focus().setHorizontalRule().run(), title: "Horizontal rule", children: /* @__PURE__ */ jsx(Icon, { name: "minus", size: 16 }) })
+      ] }, "insert")
+    );
+  }
+  if (has("extras")) {
+    groupElements.push(
+      /* @__PURE__ */ jsxs(ToolGroup, { children: [
+        /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("code"), onClick: () => editor.chain().focus().toggleCode().run(), title: "Inline code", children: /* @__PURE__ */ jsx(Icon, { name: "code", size: 16 }) }),
+        /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("superscript"), onClick: () => editor.chain().focus().toggleSuperscript().run(), title: "Superscript", children: /* @__PURE__ */ jsx(Icon, { name: "superscript", size: 16 }) }),
+        /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("subscript"), onClick: () => editor.chain().focus().toggleSubscript().run(), title: "Subscript", children: /* @__PURE__ */ jsx(Icon, { name: "subscript", size: 16 }) })
+      ] }, "extras")
+    );
+  }
+  if (has("history")) {
+    groupElements.push(
+      /* @__PURE__ */ jsxs(ToolGroup, { children: [
+        /* @__PURE__ */ jsx(ToolBtn, { onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), title: "Undo (Ctrl+Z)", children: /* @__PURE__ */ jsx(Icon, { name: "undo", size: 16 }) }),
+        /* @__PURE__ */ jsx(ToolBtn, { onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), title: "Redo (Ctrl+Shift+Z)", children: /* @__PURE__ */ jsx(Icon, { name: "redo", size: 16 }) })
+      ] }, "history")
+    );
+  }
+  const withDividers = groupElements.reduce((acc, el, i) => {
+    if (i > 0) acc.push(/* @__PURE__ */ jsx(Divider, {}, `d-${i}`));
+    acc.push(el);
+    return acc;
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-bg-muted)]", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-ds-0.5 px-ds-2 py-ds-1",
+          isMobile ? "overflow-x-auto flex-nowrap scrollbar-none" : "flex-wrap"
+        ),
+        children: withDividers
+      }
+    ),
+    inTable && /* @__PURE__ */ jsxs("div", { className: cn(
+      "flex items-center gap-ds-0.5 px-ds-2 py-ds-1 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+      isMobile && "overflow-x-auto flex-nowrap scrollbar-none"
+    ), children: [
+      /* @__PURE__ */ jsx("span", { className: "text-2xs text-[var(--ds-text-muted)] uppercase tracking-wider mr-ds-1 shrink-0", children: "Table" }),
+      /* @__PURE__ */ jsx(TableOpBtn, { onClick: () => editor.chain().focus().addRowAfter().run(), label: "+ Row" }),
+      /* @__PURE__ */ jsx(TableOpBtn, { onClick: () => editor.chain().focus().addColumnAfter().run(), label: "+ Col" }),
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsx(TableOpBtn, { onClick: () => editor.chain().focus().deleteRow().run(), label: "\u2212 Row" }),
+      /* @__PURE__ */ jsx(TableOpBtn, { onClick: () => editor.chain().focus().deleteColumn().run(), label: "\u2212 Col" }),
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsx(TableOpBtn, { onClick: () => editor.chain().focus().mergeCells().run(), label: "Merge" }),
+      /* @__PURE__ */ jsx(TableOpBtn, { onClick: () => editor.chain().focus().splitCell().run(), label: "Split" }),
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsx(ToolBtn, { onClick: () => editor.chain().focus().deleteTable().run(), title: "Delete table", children: /* @__PURE__ */ jsx(Icon, { name: "trash", size: 14 }) })
+    ] })
+  ] });
+}
+function BlockTypeSelect({ editor }) {
+  const value = editor.isActive("heading", { level: 1 }) ? "h1" : editor.isActive("heading", { level: 2 }) ? "h2" : editor.isActive("heading", { level: 3 }) ? "h3" : "p";
+  return /* @__PURE__ */ jsxs(
+    "select",
+    {
+      value,
+      onChange: (e) => {
+        const v = e.target.value;
+        if (v === "p") editor.chain().focus().setParagraph().run();
+        else if (v === "h1") editor.chain().focus().toggleHeading({ level: 1 }).run();
+        else if (v === "h2") editor.chain().focus().toggleHeading({ level: 2 }).run();
+        else if (v === "h3") editor.chain().focus().toggleHeading({ level: 3 }).run();
+      },
+      title: "Block type",
+      "aria-label": "Block type",
+      className: cn(
+        "h-7 px-ds-1.5 text-xs rounded-[var(--ds-radius-sm)] cursor-pointer",
+        "bg-transparent text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-surface)]",
+        "border-none outline-none",
+        "focus-visible:shadow-[var(--ds-shadow-focus)]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("option", { value: "p", children: "Paragraph" }),
+        /* @__PURE__ */ jsx("option", { value: "h1", children: "Heading 1" }),
+        /* @__PURE__ */ jsx("option", { value: "h2", children: "Heading 2" }),
+        /* @__PURE__ */ jsx("option", { value: "h3", children: "Heading 3" })
+      ]
+    }
+  );
+}
+function TextSizeControls({ editor }) {
+  const current = editor.getAttributes("textStyle").fontSize ?? "";
+  const idx = TEXT_SIZES.findIndex((s) => s.value === current);
+  const currentIdx = idx === -1 ? 1 : idx;
+  const decrease = () => {
+    const next = Math.max(0, currentIdx - 1);
+    const v = TEXT_SIZES[next].value;
+    v ? editor.chain().focus().setFontSize(v).run() : editor.chain().focus().unsetFontSize().run();
+  };
+  const increase = () => {
+    const next = Math.min(TEXT_SIZES.length - 1, currentIdx + 1);
+    const v = TEXT_SIZES[next].value;
+    v ? editor.chain().focus().setFontSize(v).run() : editor.chain().focus().unsetFontSize().run();
+  };
+  return /* @__PURE__ */ jsxs(ToolGroup, { children: [
+    /* @__PURE__ */ jsx(ToolBtn, { onClick: decrease, disabled: currentIdx <= 0, title: `Decrease text size (${TEXT_SIZES[Math.max(0, currentIdx - 1)]?.label})`, children: /* @__PURE__ */ jsx("span", { className: "text-2xs font-bold leading-none select-none", children: "A" }) }),
+    /* @__PURE__ */ jsx(ToolBtn, { onClick: increase, disabled: currentIdx >= TEXT_SIZES.length - 1, title: `Increase text size (${TEXT_SIZES[Math.min(TEXT_SIZES.length - 1, currentIdx + 1)]?.label})`, children: /* @__PURE__ */ jsx("span", { className: "text-base font-bold leading-none select-none", children: "A" }) })
+  ] });
+}
+function ColorPicker({
+  colors,
+  activeColor,
+  onSelect,
+  title,
+  icon
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  const close = useCallback(() => setOpen(false), []);
+  useEffect(() => {
+    if (!open) return;
+    const onClick = (e) => {
+      if (!ref.current?.contains(e.target)) close();
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") close();
+    };
+    document.addEventListener("mousedown", onClick);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open, close]);
+  return /* @__PURE__ */ jsxs("div", { ref, className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(!open),
+        title,
+        className: cn(
+          "flex flex-col items-center justify-center w-7 h-7 rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer",
+          "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+          open ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-surface)] hover:text-[var(--ds-text-primary)]"
+        ),
+        children: [
+          icon,
+          activeColor && /* @__PURE__ */ jsx("span", { className: "w-3.5 h-0.5 rounded-[var(--ds-radius-full)] -mt-ds-0.5", style: { backgroundColor: activeColor } })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx("div", { className: "absolute top-full left-0 mt-ds-1 z-[var(--ds-z-popover)] p-ds-1.5 rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)] bg-[var(--ds-bg-surface-elevated)] shadow-[var(--ds-shadow-dropdown)] flex gap-ds-1 flex-wrap w-[140px]", children: colors.map((c) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        title: c.label,
+        onClick: () => {
+          onSelect(c.value);
+          close();
+        },
+        className: cn(
+          "w-6 h-6 rounded-[var(--ds-radius-sm)] border-[2px] transition-all cursor-pointer",
+          "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+          activeColor === c.value ? "border-[var(--ds-accent-primary)] scale-110" : "border-transparent hover:scale-110"
+        ),
+        style: { backgroundColor: c.value || "var(--ds-text-primary)" },
+        children: !c.value && /* @__PURE__ */ jsx("span", { className: "block w-full h-full rounded-[calc(var(--ds-radius-sm)-2px)] bg-[var(--ds-bg-surface)] relative after:absolute after:inset-0 after:rounded-[inherit] after:bg-gradient-to-br after:from-transparent after:to-[var(--ds-text-muted)] after:opacity-30" })
+      },
+      c.label
+    )) })
+  ] });
+}
+function LinkPopover({ editor }) {
+  const [open, setOpen] = useState(false);
+  const [url, setUrl] = useState("");
+  const ref = useRef(null);
+  const inputRef = useRef(null);
+  const close = useCallback(() => {
+    setOpen(false);
+    setUrl("");
+  }, []);
+  const toggle = useCallback(() => {
+    if (editor.isActive("link")) {
+      editor.chain().focus().unsetLink().run();
+      return;
+    }
+    const existing = editor.getAttributes("link").href ?? "";
+    setUrl(existing);
+    setOpen((o) => !o);
+  }, [editor]);
+  useEffect(() => {
+    if (!open) return;
+    const onClick = (e) => {
+      if (!ref.current?.contains(e.target)) close();
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") close();
+    };
+    document.addEventListener("mousedown", onClick);
+    document.addEventListener("keydown", onKey);
+    requestAnimationFrame(() => inputRef.current?.focus());
+    return () => {
+      document.removeEventListener("mousedown", onClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open, close]);
+  const apply = () => {
+    if (url) editor.chain().focus().setLink({ href: url }).run();
+    close();
+  };
+  return /* @__PURE__ */ jsxs("div", { ref, className: "relative", children: [
+    /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("link"), onClick: toggle, title: "Link", children: /* @__PURE__ */ jsx(Icon, { name: "link", size: 16 }) }),
+    open && /* @__PURE__ */ jsxs("div", { className: "absolute top-full left-0 mt-ds-1 z-[var(--ds-z-popover)] p-ds-1.5 rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-bg-surface-elevated)] shadow-[var(--ds-shadow-dropdown)] flex items-center gap-ds-1 w-[240px]", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "url",
+          value: url,
+          onChange: (e) => setUrl(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") apply();
+          },
+          placeholder: "https://...",
+          className: cn(
+            "flex-1 h-6 px-ds-2 text-xs rounded-[var(--ds-radius-sm)]",
+            "bg-transparent text-[var(--ds-text-primary)] placeholder:text-[var(--ds-text-muted)]",
+            "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--ds-input-focus-ring)]"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: apply,
+          className: cn(
+            "shrink-0 h-6 px-ds-2 text-xs font-medium rounded-[var(--ds-radius-sm)] cursor-pointer",
+            "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]",
+            "hover:opacity-90 transition-opacity",
+            "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
+          ),
+          children: "Apply"
+        }
+      )
+    ] })
+  ] });
+}
+function ImagePopover({ editor }) {
+  const [open, setOpen] = useState(false);
+  const [url, setUrl] = useState("");
+  const [alt, setAlt] = useState("");
+  const ref = useRef(null);
+  const inputRef = useRef(null);
+  const close = useCallback(() => {
+    setOpen(false);
+    setUrl("");
+    setAlt("");
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const onClick = (e) => {
+      if (!ref.current?.contains(e.target)) close();
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") close();
+    };
+    document.addEventListener("mousedown", onClick);
+    document.addEventListener("keydown", onKey);
+    requestAnimationFrame(() => inputRef.current?.focus());
+    return () => {
+      document.removeEventListener("mousedown", onClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open, close]);
+  const insert = () => {
+    if (url) editor.chain().focus().setImage({ src: url, alt: alt || void 0 }).run();
+    close();
+  };
+  return /* @__PURE__ */ jsxs("div", { ref, className: "relative", children: [
+    /* @__PURE__ */ jsx(ToolBtn, { onClick: () => setOpen((o) => !o), title: "Image", children: /* @__PURE__ */ jsx(Icon, { name: "image", size: 16 }) }),
+    open && /* @__PURE__ */ jsxs("div", { className: "absolute top-full left-0 mt-ds-1 z-[var(--ds-z-popover)] p-ds-1.5 rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-bg-surface-elevated)] shadow-[var(--ds-shadow-dropdown)] flex flex-col gap-ds-1 w-[240px]", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "url",
+          value: url,
+          onChange: (e) => setUrl(e.target.value),
+          placeholder: "Image URL",
+          className: cn(
+            "h-6 px-ds-2 text-xs rounded-[var(--ds-radius-sm)]",
+            "bg-transparent text-[var(--ds-text-primary)] placeholder:text-[var(--ds-text-muted)]",
+            "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--ds-input-focus-ring)]"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-1", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: alt,
+            onChange: (e) => setAlt(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") insert();
+            },
+            placeholder: "Alt text (optional)",
+            className: cn(
+              "flex-1 h-6 px-ds-2 text-xs rounded-[var(--ds-radius-sm)]",
+              "bg-transparent text-[var(--ds-text-primary)] placeholder:text-[var(--ds-text-muted)]",
+              "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--ds-input-focus-ring)]"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: insert,
+            className: cn(
+              "shrink-0 h-6 px-ds-2 text-xs font-medium rounded-[var(--ds-radius-sm)] cursor-pointer",
+              "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]",
+              "hover:opacity-90 transition-opacity",
+              "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
+            ),
+            children: "Insert"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function FontFamilySelect({ editor }) {
+  const current = editor.getAttributes("textStyle").fontFamily ?? "";
+  return /* @__PURE__ */ jsx(
+    "select",
+    {
+      value: current,
+      onChange: (e) => {
+        const v = e.target.value;
+        v ? editor.chain().focus().setFontFamily(v).run() : editor.chain().focus().unsetFontFamily().run();
+      },
+      title: "Font family",
+      "aria-label": "Font family",
+      className: cn(
+        "h-7 px-ds-1.5 text-xs rounded-[var(--ds-radius-sm)] cursor-pointer",
+        "bg-transparent text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-surface)]",
+        "border-none outline-none",
+        "focus-visible:shadow-[var(--ds-shadow-focus)]"
+      ),
+      children: FONT_FAMILIES.map((f) => /* @__PURE__ */ jsx("option", { value: f.value, children: f.label }, f.label))
+    }
+  );
+}
+function ToolGroup({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-0.5", children });
+}
+function Divider() {
+  return /* @__PURE__ */ jsx("div", { className: "w-px h-5 mx-ds-1 bg-[var(--ds-border-subtle)]" });
+}
+function TableOpBtn({ onClick, label }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      title: label,
+      className: cn(
+        "h-6 px-ds-1.5 text-2xs font-medium rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer whitespace-nowrap",
+        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+        "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-surface)] hover:text-[var(--ds-text-primary)]"
+      ),
+      children: label
+    }
+  );
+}
+function ToolBtn({ active, disabled, onClick, title, children }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      title,
+      className: cn(
+        "flex items-center justify-center w-7 h-7 rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer",
+        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+        active ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-surface)] hover:text-[var(--ds-text-primary)]",
+        disabled && "opacity-disabled pointer-events-none"
+      ),
+      children
+    }
+  );
+}
+
+export { RichTextEditor };
+//# sourceMappingURL=editor.js.map
+//# sourceMappingURL=editor.js.map