@comitor/ui 3.3.4 → 3.5.0

package/dist/editor/bubble-toolbar.d.ts

@@ -0,0 +1,34 @@
+import { Editor } from '@tiptap/core';
+import * as React from 'react';
+import { MarkdownEditorLabels } from './markdown-editor-constants.js';
+
+/**
+ * Thanh định dạng NỔI — hiện khi bôi chọn chữ, như Linear: không có thanh công cụ cố định chiếm chỗ
+ * trên đầu tài liệu, định dạng ở ngay chỗ đang chọn.
+ *
+ * Ba trạng thái trong cùng một bong bóng:
+ *   · đang chọn chữ  → nút định dạng (dấu nội dòng + đổi khối);
+ *   · con trỏ đứng TRONG một liên kết (không chọn gì) → địa chỉ + Mở / Sửa / Gỡ;
+ *   · đang sửa liên kết (nút Liên kết, hoặc ⌘K) → ô nhập địa chỉ.
+ *
+ * Vị trí do `BubbleMenu` của Tiptap tính (Floating UI). Nó gắn vào CHA của vùng soạn chứ không vào
+ * `document.body`, nên ở trong `Dialog` vẫn nằm trong lớp của hộp thoại.
+ */
+
+/**
+ * Chuẩn hoá địa chỉ người dùng gõ vào ô liên kết. Trả `null` khi KHÔNG nhận.
+ *
+ * Nhận: `http(s):`, `mailto:`, `tel:`, đường dẫn trong app (`/tasks/CV-12`, `#muc`), và hai dạng gõ
+ * tắt — tên miền trần (`comitor.ai/docs` → `https://…`), email trần (→ `mailto:`). Từ chối MỌI lược
+ * đồ khác: `javascript:`, `data:`, `vbscript:` là ba cách biến một liên kết thành mã chạy được.
+ */
+declare function normalizeLinkHref(input: string): string | null;
+interface BubbleToolbarProps {
+    editor: Editor;
+    labels: MarkdownEditorLabels;
+    /** Tăng mỗi lần ⌘/Ctrl+K — mở ô liên kết. Số đếm thay vì cờ để hai lần ⌘K liền nhau vẫn là hai lần. */
+    linkRequest: number;
+}
+declare function BubbleToolbar({ editor, labels, linkRequest }: BubbleToolbarProps): React.JSX.Element | null;
+
+export { BubbleToolbar, type BubbleToolbarProps, normalizeLinkHref };

package/dist/editor/bubble-toolbar.js

@@ -0,0 +1,391 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NodeSelection } from "@tiptap/pm/state";
+import { useEditorState } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import {
+  Bold,
+  Check,
+  Code,
+  ExternalLink,
+  Heading1,
+  Heading2,
+  Heading3,
+  Italic,
+  Link2,
+  Link2Off,
+  List,
+  ListChecks,
+  ListOrdered,
+  Pencil,
+  SquareCode,
+  Strikethrough,
+  TextQuote
+} from "lucide-react";
+import * as React from "react";
+import { KeyboardHint } from "../components/composite/keyboard-hint.js";
+import { Separator } from "../components/ui/separator.js";
+import { Toggle } from "../components/ui/toggle.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip.js";
+import { cn } from "../lib/cn.js";
+import { useAsRef } from "../lib/use-as-ref.js";
+function normalizeLinkHref(input) {
+  const value = input.trim();
+  if (!value) return null;
+  if (/^(?:https?:\/\/|mailto:|tel:)/i.test(value)) return value;
+  if (/^[a-z][a-z0-9+.-]*:/i.test(value)) return null;
+  if (/^[/#]/.test(value)) return value;
+  if (/^[^\s@/]+@[^\s@/]+\.[^\s@/]+$/.test(value)) return `mailto:${value}`;
+  if (/^[^\s/]+\.[^\s/.]{2,}(?:[/?#]\S*)?$/.test(value)) return `https://${value}`;
+  return null;
+}
+const MARK_ACTIONS = [
+  {
+    id: "bold",
+    icon: Bold,
+    label: "bold",
+    keys: "mod+b",
+    isActive: (editor) => editor.isActive("bold"),
+    run: (editor) => editor.chain().focus().toggleBold().run()
+  },
+  {
+    id: "italic",
+    icon: Italic,
+    label: "italic",
+    keys: "mod+i",
+    isActive: (editor) => editor.isActive("italic"),
+    run: (editor) => editor.chain().focus().toggleItalic().run()
+  },
+  {
+    id: "strike",
+    icon: Strikethrough,
+    label: "strike",
+    keys: "mod+shift+s",
+    isActive: (editor) => editor.isActive("strike"),
+    run: (editor) => editor.chain().focus().toggleStrike().run()
+  },
+  {
+    id: "code",
+    icon: Code,
+    label: "code",
+    keys: "mod+e",
+    isActive: (editor) => editor.isActive("code"),
+    run: (editor) => editor.chain().focus().toggleCode().run()
+  }
+];
+const BLOCK_ACTIONS = [
+  {
+    id: "heading1",
+    icon: Heading1,
+    label: "heading1",
+    keys: "mod+alt+1",
+    isActive: (editor) => editor.isActive("heading", { level: 1 }),
+    run: (editor) => editor.chain().focus().toggleHeading({ level: 1 }).run()
+  },
+  {
+    id: "heading2",
+    icon: Heading2,
+    label: "heading2",
+    keys: "mod+alt+2",
+    isActive: (editor) => editor.isActive("heading", { level: 2 }),
+    run: (editor) => editor.chain().focus().toggleHeading({ level: 2 }).run()
+  },
+  {
+    id: "heading3",
+    icon: Heading3,
+    label: "heading3",
+    keys: "mod+alt+3",
+    isActive: (editor) => editor.isActive("heading", { level: 3 }),
+    run: (editor) => editor.chain().focus().toggleHeading({ level: 3 }).run()
+  },
+  {
+    id: "bulletList",
+    icon: List,
+    label: "bulletList",
+    keys: "mod+shift+8",
+    isActive: (editor) => editor.isActive("bulletList"),
+    run: (editor) => editor.chain().focus().toggleBulletList().run()
+  },
+  {
+    id: "orderedList",
+    icon: ListOrdered,
+    label: "orderedList",
+    keys: "mod+shift+7",
+    isActive: (editor) => editor.isActive("orderedList"),
+    run: (editor) => editor.chain().focus().toggleOrderedList().run()
+  },
+  {
+    id: "taskList",
+    icon: ListChecks,
+    label: "taskList",
+    keys: "mod+shift+9",
+    isActive: (editor) => editor.isActive("taskList"),
+    run: (editor) => editor.chain().focus().toggleTaskList().run()
+  },
+  {
+    id: "blockquote",
+    icon: TextQuote,
+    label: "blockquote",
+    keys: "mod+shift+b",
+    isActive: (editor) => editor.isActive("blockquote"),
+    run: (editor) => editor.chain().focus().toggleBlockquote().run()
+  },
+  {
+    id: "codeBlock",
+    icon: SquareCode,
+    label: "codeBlock",
+    keys: "mod+alt+c",
+    isActive: (editor) => editor.isActive("codeBlock"),
+    run: (editor) => editor.chain().focus().toggleCodeBlock().run()
+  }
+];
+function readToolbarState(editor) {
+  const active = {};
+  for (const action of [...MARK_ACTIONS, ...BLOCK_ACTIONS]) active[action.id] = action.isActive(editor);
+  const href = editor.getAttributes("link").href;
+  return {
+    active,
+    link: editor.isActive("link"),
+    href: typeof href === "string" ? href : "",
+    empty: editor.state.selection.empty,
+    inTable: editor.isActive("table")
+  };
+}
+function sameToolbarState(a, b) {
+  if (!a || !b) return a === b;
+  if (a.link !== b.link || a.href !== b.href || a.empty !== b.empty || a.inTable !== b.inTable) return false;
+  return Object.keys(a.active).every((key) => a.active[key] === b.active[key]);
+}
+const BUTTON_CLASS = "h-7 min-w-7 px-1.5";
+function ToolbarButton({
+  icon: Icon,
+  label,
+  keys,
+  pressed,
+  onClick,
+  className
+}) {
+  const button = pressed === void 0 ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      onMouseDown: (event) => event.preventDefault(),
+      onClick,
+      className: cn(
+        "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors duration-150 ease-out hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0",
+        BUTTON_CLASS,
+        className
+      ),
+      children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" })
+    }
+  ) : /* @__PURE__ */ jsx(
+    Toggle,
+    {
+      "aria-label": label,
+      pressed,
+      onPressedChange: onClick,
+      onMouseDown: (event) => event.preventDefault(),
+      className: cn(BUTTON_CLASS, className),
+      children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" })
+    }
+  );
+  return /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 400, children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsxs(TooltipContent, { side: "top", sideOffset: 6, className: "flex items-center gap-2", children: [
+      label,
+      keys && /* @__PURE__ */ jsx(KeyboardHint, { keys, compact: true })
+    ] })
+  ] });
+}
+function BubbleToolbar({ editor, labels, linkRequest }) {
+  const state = useEditorState({
+    editor,
+    selector: ({ editor: current }) => readToolbarState(current),
+    equalityFn: sameToolbarState
+  });
+  const [editingLink, setEditingLink] = React.useState(false);
+  const editingLinkRef = useAsRef(editingLink);
+  const [draft, setDraft] = React.useState("");
+  const [invalid, setInvalid] = React.useState(false);
+  const inputRef = React.useRef(null);
+  const pluginKey = "comitorBubbleToolbar";
+  const showBubble = React.useCallback(() => {
+    editor.view.dispatch(editor.state.tr.setMeta(pluginKey, "show"));
+    editor.view.dispatch(editor.state.tr.setMeta(pluginKey, "updatePosition"));
+  }, [editor]);
+  const openLinkEditor = React.useCallback(() => {
+    const href = editor.getAttributes("link").href;
+    setDraft(typeof href === "string" ? href : "");
+    setInvalid(false);
+    setEditingLink(true);
+  }, [editor]);
+  React.useEffect(() => {
+    if (linkRequest === 0) return;
+    openLinkEditor();
+  }, [linkRequest, openLinkEditor]);
+  React.useEffect(() => {
+    if (!editingLink) return;
+    showBubble();
+    const frame = requestAnimationFrame(() => inputRef.current?.select());
+    return () => cancelAnimationFrame(frame);
+  }, [editingLink, showBubble]);
+  const closeLinkEditor = (refocus) => {
+    setEditingLink(false);
+    setInvalid(false);
+    if (refocus) editor.commands.focus();
+  };
+  const applyLink = () => {
+    const href = normalizeLinkHref(draft);
+    if (draft.trim() === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+      closeLinkEditor(false);
+      return;
+    }
+    if (!href) {
+      setInvalid(true);
+      return;
+    }
+    const chain = editor.chain().focus().extendMarkRange("link");
+    if (editor.state.selection.empty && !editor.isActive("link")) {
+      chain.insertContent({ type: "text", text: draft.trim(), marks: [{ type: "link", attrs: { href } }] }).run();
+    } else {
+      chain.setLink({ href }).run();
+    }
+    closeLinkEditor(false);
+  };
+  const removeLink = () => {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    closeLinkEditor(false);
+  };
+  const shouldShow = React.useCallback(
+    ({ editor: current, element, view, state: editorState, from, to }) => {
+      if (!current.isEditable) return false;
+      if (!(view.hasFocus() || element.contains(document.activeElement))) return false;
+      if (editingLinkRef.current) return true;
+      const { selection } = editorState;
+      if (selection instanceof NodeSelection || current.isActive("codeBlock")) return false;
+      if (selection.empty) return current.isActive("link");
+      return editorState.doc.textBetween(from, to, " ").trim().length > 0;
+    },
+    [editingLinkRef]
+  );
+  const options = React.useMemo(
+    () => ({
+      // `fixed`: không bị cắt bởi khung cuộn chứa trình soạn (`DialogBody`, cột chi tiết cuộn riêng).
+      strategy: "fixed",
+      placement: "top",
+      offset: 8,
+      flip: true,
+      shift: { padding: 8 },
+      onHide: () => setEditingLink(false)
+    }),
+    []
+  );
+  if (!state) return null;
+  return /* @__PURE__ */ jsx(
+    BubbleMenu,
+    {
+      editor,
+      pluginKey,
+      updateDelay: 100,
+      shouldShow,
+      options,
+      className: "z-50 rounded-lg border bg-popover p-1 text-popover-foreground shadow-overlay",
+      children: editingLink ? /* @__PURE__ */ jsxs(
+        "form",
+        {
+          className: "flex flex-col gap-1",
+          onSubmit: (event) => {
+            event.preventDefault();
+            applyLink();
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: inputRef,
+                  type: "text",
+                  inputMode: "url",
+                  "aria-label": labels.linkInput,
+                  "aria-invalid": invalid || void 0,
+                  placeholder: labels.linkPlaceholder,
+                  value: draft,
+                  onChange: (event) => {
+                    setDraft(event.target.value);
+                    setInvalid(false);
+                  },
+                  onKeyDown: (event) => {
+                    if (event.key === "Escape") {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      closeLinkEditor(true);
+                    }
+                  },
+                  className: "h-7 w-60 rounded-md border border-input bg-transparent px-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary-ink focus:outline-none focus:ring-2 focus:ring-ring/50 aria-invalid:border-destructive-ink dark:bg-input-fill"
+                }
+              ),
+              /* @__PURE__ */ jsx(ToolbarButton, { icon: Check, label: labels.linkApply, onClick: applyLink }),
+              state.link && /* @__PURE__ */ jsx(ToolbarButton, { icon: Link2Off, label: labels.linkRemove, onClick: removeLink })
+            ] }),
+            invalid && /* @__PURE__ */ jsx("p", { role: "alert", className: "px-1 pb-0.5 text-xs text-destructive-ink", children: labels.linkInvalid })
+          ]
+        }
+      ) : state.empty && state.link ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: state.href,
+            target: "_blank",
+            rel: "noopener noreferrer nofollow",
+            onMouseDown: (event) => event.preventDefault(),
+            className: "flex max-w-60 items-center gap-1.5 truncate rounded-md px-1.5 py-1 text-sm text-link-ink underline-offset-4 hover:text-link-ink-hover hover:underline",
+            children: [
+              /* @__PURE__ */ jsx(ExternalLink, { "aria-hidden": "true", className: "size-3.5 shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: state.href }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.linkOpen })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-0.5 h-5" }),
+        /* @__PURE__ */ jsx(ToolbarButton, { icon: Pencil, label: labels.linkEdit, keys: "mod+k", onClick: openLinkEditor }),
+        /* @__PURE__ */ jsx(ToolbarButton, { icon: Link2Off, label: labels.linkRemove, onClick: removeLink })
+      ] }) : /* @__PURE__ */ jsxs("div", { role: "toolbar", "aria-label": labels.toolbar, className: "flex items-center gap-0.5", children: [
+        MARK_ACTIONS.map((action) => /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            icon: action.icon,
+            label: labels[action.label],
+            keys: action.keys,
+            pressed: Boolean(state.active[action.id]),
+            onClick: () => action.run(editor)
+          },
+          action.id
+        )),
+        /* @__PURE__ */ jsx(ToolbarButton, { icon: Link2, label: labels.link, keys: "mod+k", pressed: state.link, onClick: openLinkEditor }),
+        !state.inTable && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 max-sm:hidden", children: [
+          /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-0.5 h-5" }),
+          BLOCK_ACTIONS.map((action, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            (index === 3 || index === 6) && /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-0.5 h-5" }),
+            /* @__PURE__ */ jsx(
+              ToolbarButton,
+              {
+                icon: action.icon,
+                label: labels[action.label],
+                keys: action.keys,
+                pressed: Boolean(state.active[action.id]),
+                onClick: () => action.run(editor)
+              }
+            )
+          ] }, action.id))
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  BubbleToolbar,
+  normalizeLinkHref
+};
+//# sourceMappingURL=bubble-toolbar.js.map

package/dist/editor/bubble-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/editor/bubble-toolbar.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Thanh định dạng NỔI — hiện khi bôi chọn chữ, như Linear: không có thanh công cụ cố định chiếm chỗ\n * trên đầu tài liệu, định dạng ở ngay chỗ đang chọn.\n *\n * Ba trạng thái trong cùng một bong bóng:\n *   · đang chọn chữ  → nút định dạng (dấu nội dòng + đổi khối);\n *   · con trỏ đứng TRONG một liên kết (không chọn gì) → địa chỉ + Mở / Sửa / Gỡ;\n *   · đang sửa liên kết (nút Liên kết, hoặc ⌘K) → ô nhập địa chỉ.\n *\n * Vị trí do `BubbleMenu` của Tiptap tính (Floating UI). Nó gắn vào CHA của vùng soạn chứ không vào\n * `document.body`, nên ở trong `Dialog` vẫn nằm trong lớp của hộp thoại.\n */\n\nimport type { Editor } from \"@tiptap/core\";\nimport { NodeSelection } from \"@tiptap/pm/state\";\nimport { useEditorState } from \"@tiptap/react\";\nimport { BubbleMenu, type BubbleMenuProps } from \"@tiptap/react/menus\";\nimport {\n  Bold,\n  Check,\n  Code,\n  ExternalLink,\n  Heading1,\n  Heading2,\n  Heading3,\n  Italic,\n  Link2,\n  Link2Off,\n  List,\n  ListChecks,\n  ListOrdered,\n  type LucideIcon,\n  Pencil,\n  SquareCode,\n  Strikethrough,\n  TextQuote\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport { KeyboardHint } from \"../components/composite/keyboard-hint.js\";\nimport { Separator } from \"../components/ui/separator.js\";\nimport { Toggle } from \"../components/ui/toggle.js\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../components/ui/tooltip.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { useAsRef } from \"../lib/use-as-ref.js\";\nimport type { MarkdownEditorLabels } from \"./markdown-editor-constants.js\";\n\n/**\n * Chuẩn hoá địa chỉ người dùng gõ vào ô liên kết. Trả `null` khi KHÔNG nhận.\n *\n * Nhận: `http(s):`, `mailto:`, `tel:`, đường dẫn trong app (`/tasks/CV-12`, `#muc`), và hai dạng gõ\n * tắt — tên miền trần (`comitor.ai/docs` → `https://…`), email trần (→ `mailto:`). Từ chối MỌI lược\n * đồ khác: `javascript:`, `data:`, `vbscript:` là ba cách biến một liên kết thành mã chạy được.\n */\nexport function normalizeLinkHref(input: string): string | null {\n  const value = input.trim();\n  if (!value) return null;\n  if (/^(?:https?:\\/\\/|mailto:|tel:)/i.test(value)) return value;\n  if (/^[a-z][a-z0-9+.-]*:/i.test(value)) return null;\n  if (/^[/#]/.test(value)) return value;\n  if (/^[^\\s@/]+@[^\\s@/]+\\.[^\\s@/]+$/.test(value)) return `mailto:${value}`;\n  if (/^[^\\s/]+\\.[^\\s/.]{2,}(?:[/?#]\\S*)?$/.test(value)) return `https://${value}`;\n  return null;\n}\n\n/** Khoá nhãn mang CHUỖI (loại `slashKeywords` và hàm `taskCheckbox`). */\ntype TextLabelKey = {\n  [K in keyof MarkdownEditorLabels]: MarkdownEditorLabels[K] extends string ? K : never;\n}[keyof MarkdownEditorLabels];\n\ninterface ToolbarAction {\n  id: string;\n  icon: LucideIcon;\n  label: TextLabelKey;\n  /** Phím tắt cho tooltip — cú pháp của `KeyboardHint` (`mod+b`). Mặc định Tiptap, trừ ⌘K của gói. */\n  keys?: string;\n  isActive: (editor: Editor) => boolean;\n  run: (editor: Editor) => void;\n}\n\nconst MARK_ACTIONS: readonly ToolbarAction[] = [\n  {\n    id: \"bold\",\n    icon: Bold,\n    label: \"bold\",\n    keys: \"mod+b\",\n    isActive: (editor) => editor.isActive(\"bold\"),\n    run: (editor) => editor.chain().focus().toggleBold().run()\n  },\n  {\n    id: \"italic\",\n    icon: Italic,\n    label: \"italic\",\n    keys: \"mod+i\",\n    isActive: (editor) => editor.isActive(\"italic\"),\n    run: (editor) => editor.chain().focus().toggleItalic().run()\n  },\n  {\n    id: \"strike\",\n    icon: Strikethrough,\n    label: \"strike\",\n    keys: \"mod+shift+s\",\n    isActive: (editor) => editor.isActive(\"strike\"),\n    run: (editor) => editor.chain().focus().toggleStrike().run()\n  },\n  {\n    id: \"code\",\n    icon: Code,\n    label: \"code\",\n    keys: \"mod+e\",\n    isActive: (editor) => editor.isActive(\"code\"),\n    run: (editor) => editor.chain().focus().toggleCode().run()\n  }\n];\n\n/*\n * Đổi khối. Ẩn ở màn hẹp (thanh sẽ rộng hơn 375px) và trong bảng (ô bảng chỉ chứa một đoạn văn —\n * xem `ComitorTableCell`): cả hai chỗ đó vẫn còn cú pháp gõ tắt và menu `/`.\n */\nconst BLOCK_ACTIONS: readonly ToolbarAction[] = [\n  {\n    id: \"heading1\",\n    icon: Heading1,\n    label: \"heading1\",\n    keys: \"mod+alt+1\",\n    isActive: (editor) => editor.isActive(\"heading\", { level: 1 }),\n    run: (editor) => editor.chain().focus().toggleHeading({ level: 1 }).run()\n  },\n  {\n    id: \"heading2\",\n    icon: Heading2,\n    label: \"heading2\",\n    keys: \"mod+alt+2\",\n    isActive: (editor) => editor.isActive(\"heading\", { level: 2 }),\n    run: (editor) => editor.chain().focus().toggleHeading({ level: 2 }).run()\n  },\n  {\n    id: \"heading3\",\n    icon: Heading3,\n    label: \"heading3\",\n    keys: \"mod+alt+3\",\n    isActive: (editor) => editor.isActive(\"heading\", { level: 3 }),\n    run: (editor) => editor.chain().focus().toggleHeading({ level: 3 }).run()\n  },\n  {\n    id: \"bulletList\",\n    icon: List,\n    label: \"bulletList\",\n    keys: \"mod+shift+8\",\n    isActive: (editor) => editor.isActive(\"bulletList\"),\n    run: (editor) => editor.chain().focus().toggleBulletList().run()\n  },\n  {\n    id: \"orderedList\",\n    icon: ListOrdered,\n    label: \"orderedList\",\n    keys: \"mod+shift+7\",\n    isActive: (editor) => editor.isActive(\"orderedList\"),\n    run: (editor) => editor.chain().focus().toggleOrderedList().run()\n  },\n  {\n    id: \"taskList\",\n    icon: ListChecks,\n    label: \"taskList\",\n    keys: \"mod+shift+9\",\n    isActive: (editor) => editor.isActive(\"taskList\"),\n    run: (editor) => editor.chain().focus().toggleTaskList().run()\n  },\n  {\n    id: \"blockquote\",\n    icon: TextQuote,\n    label: \"blockquote\",\n    keys: \"mod+shift+b\",\n    isActive: (editor) => editor.isActive(\"blockquote\"),\n    run: (editor) => editor.chain().focus().toggleBlockquote().run()\n  },\n  {\n    id: \"codeBlock\",\n    icon: SquareCode,\n    label: \"codeBlock\",\n    keys: \"mod+alt+c\",\n    isActive: (editor) => editor.isActive(\"codeBlock\"),\n    run: (editor) => editor.chain().focus().toggleCodeBlock().run()\n  }\n];\n\ninterface ToolbarState {\n  active: Record<string, boolean>;\n  link: boolean;\n  href: string;\n  empty: boolean;\n  inTable: boolean;\n}\n\nfunction readToolbarState(editor: Editor): ToolbarState {\n  const active: Record<string, boolean> = {};\n  for (const action of [...MARK_ACTIONS, ...BLOCK_ACTIONS]) active[action.id] = action.isActive(editor);\n  const href = editor.getAttributes(\"link\").href;\n  return {\n    active,\n    link: editor.isActive(\"link\"),\n    href: typeof href === \"string\" ? href : \"\",\n    empty: editor.state.selection.empty,\n    inTable: editor.isActive(\"table\")\n  };\n}\n\n/** So nông — `useEditorState` chỉ render lại khi kết quả KHÁC, mà mỗi lần đọc là một object mới. */\nfunction sameToolbarState(a: ToolbarState | null, b: ToolbarState | null): boolean {\n  if (!a || !b) return a === b;\n  if (a.link !== b.link || a.href !== b.href || a.empty !== b.empty || a.inTable !== b.inTable) return false;\n  return Object.keys(a.active).every((key) => a.active[key] === b.active[key]);\n}\n\n/*\n * Nút nhỏ hơn `Toggle size=\"sm\"` một bậc (28px): mười ba nút của Linear-style toolbar phải nằm gọn\n * trên một dòng ở màn laptop. Mousedown bị chặn để focus Ở LẠI vùng soạn — mất focus là mất vùng chọn\n * mà nút sắp áp định dạng lên.\n */\nconst BUTTON_CLASS = \"h-7 min-w-7 px-1.5\";\n\nfunction ToolbarButton({\n  icon: Icon,\n  label,\n  keys,\n  pressed,\n  onClick,\n  className\n}: {\n  icon: LucideIcon;\n  label: string;\n  keys?: string;\n  pressed?: boolean;\n  onClick: () => void;\n  className?: string;\n}) {\n  const button =\n    pressed === undefined ? (\n      <button\n        type=\"button\"\n        aria-label={label}\n        onMouseDown={(event) => event.preventDefault()}\n        onClick={onClick}\n        className={cn(\n          \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors duration-150 ease-out hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0\",\n          BUTTON_CLASS,\n          className\n        )}\n      >\n        <Icon aria-hidden=\"true\" />\n      </button>\n    ) : (\n      <Toggle\n        aria-label={label}\n        pressed={pressed}\n        onPressedChange={onClick}\n        onMouseDown={(event) => event.preventDefault()}\n        className={cn(BUTTON_CLASS, className)}\n      >\n        <Icon aria-hidden=\"true\" />\n      </Toggle>\n    );\n\n  return (\n    <Tooltip delayDuration={400}>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent side=\"top\" sideOffset={6} className=\"flex items-center gap-2\">\n        {label}\n        {keys && <KeyboardHint keys={keys} compact />}\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n\nexport interface BubbleToolbarProps {\n  editor: Editor;\n  labels: MarkdownEditorLabels;\n  /** Tăng mỗi lần ⌘/Ctrl+K — mở ô liên kết. Số đếm thay vì cờ để hai lần ⌘K liền nhau vẫn là hai lần. */\n  linkRequest: number;\n}\n\nexport function BubbleToolbar({ editor, labels, linkRequest }: BubbleToolbarProps) {\n  const state = useEditorState({\n    editor,\n    selector: ({ editor: current }) => readToolbarState(current),\n    equalityFn: sameToolbarState\n  });\n  const [editingLink, setEditingLink] = React.useState(false);\n  const editingLinkRef = useAsRef(editingLink);\n  const [draft, setDraft] = React.useState(\"\");\n  const [invalid, setInvalid] = React.useState(false);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const pluginKey = \"comitorBubbleToolbar\";\n\n  /*\n   * Hai giao dịch, theo đúng thứ tự: meta `\"show\"` của plugin gọi `updatePosition()` TRƯỚC `show()`,\n   * mà `updatePosition()` bỏ qua khi bong bóng đang ẩn — nên một mình `\"show\"` hiện bong bóng ở toạ\n   * độ CŨ (lần hiện trước, hoặc góc trái trên). `\"updatePosition\"` sau đó mới tính đúng chỗ.\n   */\n  const showBubble = React.useCallback(() => {\n    editor.view.dispatch(editor.state.tr.setMeta(pluginKey, \"show\"));\n    editor.view.dispatch(editor.state.tr.setMeta(pluginKey, \"updatePosition\"));\n  }, [editor]);\n\n  const openLinkEditor = React.useCallback(() => {\n    const href = editor.getAttributes(\"link\").href;\n    setDraft(typeof href === \"string\" ? href : \"\");\n    setInvalid(false);\n    setEditingLink(true);\n  }, [editor]);\n\n  // ⌘K từ vùng soạn. Bỏ qua giá trị đầu (0) — đó là lúc mount, không phải một lần bấm.\n  React.useEffect(() => {\n    if (linkRequest === 0) return;\n    openLinkEditor();\n  }, [linkRequest, openLinkEditor]);\n\n  // Vừa vào chế độ sửa: bắt plugin hiện bong bóng (kể cả khi không chọn gì) rồi đưa focus vào ô nhập.\n  React.useEffect(() => {\n    if (!editingLink) return;\n    showBubble();\n    const frame = requestAnimationFrame(() => inputRef.current?.select());\n    return () => cancelAnimationFrame(frame);\n  }, [editingLink, showBubble]);\n\n  const closeLinkEditor = (refocus: boolean) => {\n    setEditingLink(false);\n    setInvalid(false);\n    if (refocus) editor.commands.focus();\n  };\n\n  const applyLink = () => {\n    const href = normalizeLinkHref(draft);\n    if (draft.trim() === \"\") {\n      editor.chain().focus().extendMarkRange(\"link\").unsetLink().run();\n      closeLinkEditor(false);\n      return;\n    }\n    if (!href) {\n      setInvalid(true);\n      return;\n    }\n    const chain = editor.chain().focus().extendMarkRange(\"link\");\n    if (editor.state.selection.empty && !editor.isActive(\"link\")) {\n      // Không chọn chữ nào: chèn chính địa chỉ làm chữ của liên kết.\n      chain.insertContent({ type: \"text\", text: draft.trim(), marks: [{ type: \"link\", attrs: { href } }] }).run();\n    } else {\n      chain.setLink({ href }).run();\n    }\n    closeLinkEditor(false);\n  };\n\n  const removeLink = () => {\n    editor.chain().focus().extendMarkRange(\"link\").unsetLink().run();\n    closeLinkEditor(false);\n  };\n\n  /*\n   * Ổn định qua các lượt render: `BubbleMenu` gửi lại TOÀN BỘ tuỳ chọn vào plugin mỗi khi một prop\n   * đổi định danh. `shouldShow` đọc cờ sửa-liên-kết qua ref vì cùng lý do.\n   */\n  const shouldShow = React.useCallback<NonNullable<BubbleMenuProps[\"shouldShow\"]>>(\n    ({ editor: current, element, view, state: editorState, from, to }) => {\n      if (!current.isEditable) return false;\n      if (!(view.hasFocus() || element.contains(document.activeElement))) return false;\n      if (editingLinkRef.current) return true;\n      const { selection } = editorState;\n      if (selection instanceof NodeSelection || current.isActive(\"codeBlock\")) return false;\n      if (selection.empty) return current.isActive(\"link\");\n      return editorState.doc.textBetween(from, to, \" \").trim().length > 0;\n    },\n    [editingLinkRef]\n  );\n\n  const options = React.useMemo<BubbleMenuProps[\"options\"]>(\n    () => ({\n      // `fixed`: không bị cắt bởi khung cuộn chứa trình soạn (`DialogBody`, cột chi tiết cuộn riêng).\n      strategy: \"fixed\",\n      placement: \"top\",\n      offset: 8,\n      flip: true,\n      shift: { padding: 8 },\n      onHide: () => setEditingLink(false)\n    }),\n    []\n  );\n\n  if (!state) return null;\n\n  return (\n    <BubbleMenu\n      editor={editor}\n      pluginKey={pluginKey}\n      updateDelay={100}\n      shouldShow={shouldShow}\n      options={options}\n      className=\"z-50 rounded-lg border bg-popover p-1 text-popover-foreground shadow-overlay\"\n    >\n      {editingLink ? (\n        <form\n          className=\"flex flex-col gap-1\"\n          onSubmit={(event) => {\n            event.preventDefault();\n            applyLink();\n          }}\n        >\n          <div className=\"flex items-center gap-1\">\n            <input\n              ref={inputRef}\n              type=\"text\"\n              inputMode=\"url\"\n              aria-label={labels.linkInput}\n              aria-invalid={invalid || undefined}\n              placeholder={labels.linkPlaceholder}\n              value={draft}\n              onChange={(event) => {\n                setDraft(event.target.value);\n                setInvalid(false);\n              }}\n              onKeyDown={(event) => {\n                if (event.key === \"Escape\") {\n                  event.preventDefault();\n                  // Escape ở đây chỉ đóng ô liên kết — không để nó lan tới `Dialog` bao ngoài.\n                  event.stopPropagation();\n                  closeLinkEditor(true);\n                }\n              }}\n              className=\"h-7 w-60 rounded-md border border-input bg-transparent px-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary-ink focus:outline-none focus:ring-2 focus:ring-ring/50 aria-invalid:border-destructive-ink dark:bg-input-fill\"\n            />\n            <ToolbarButton icon={Check} label={labels.linkApply} onClick={applyLink} />\n            {state.link && <ToolbarButton icon={Link2Off} label={labels.linkRemove} onClick={removeLink} />}\n          </div>\n          {invalid && (\n            <p role=\"alert\" className=\"px-1 pb-0.5 text-xs text-destructive-ink\">\n              {labels.linkInvalid}\n            </p>\n          )}\n        </form>\n      ) : state.empty && state.link ? (\n        <div className=\"flex items-center gap-1\">\n          <a\n            href={state.href}\n            target=\"_blank\"\n            rel=\"noopener noreferrer nofollow\"\n            onMouseDown={(event) => event.preventDefault()}\n            className=\"flex max-w-60 items-center gap-1.5 truncate rounded-md px-1.5 py-1 text-sm text-link-ink underline-offset-4 hover:text-link-ink-hover hover:underline\"\n          >\n            <ExternalLink aria-hidden=\"true\" className=\"size-3.5 shrink-0\" />\n            <span className=\"truncate\">{state.href}</span>\n            <span className=\"sr-only\">{labels.linkOpen}</span>\n          </a>\n          <Separator orientation=\"vertical\" className=\"mx-0.5 h-5\" />\n          <ToolbarButton icon={Pencil} label={labels.linkEdit} keys=\"mod+k\" onClick={openLinkEditor} />\n          <ToolbarButton icon={Link2Off} label={labels.linkRemove} onClick={removeLink} />\n        </div>\n      ) : (\n        <div role=\"toolbar\" aria-label={labels.toolbar} className=\"flex items-center gap-0.5\">\n          {MARK_ACTIONS.map((action) => (\n            <ToolbarButton\n              key={action.id}\n              icon={action.icon}\n              label={labels[action.label]}\n              keys={action.keys}\n              pressed={Boolean(state.active[action.id])}\n              onClick={() => action.run(editor)}\n            />\n          ))}\n          <ToolbarButton icon={Link2} label={labels.link} keys=\"mod+k\" pressed={state.link} onClick={openLinkEditor} />\n          {!state.inTable && (\n            <div className=\"flex items-center gap-0.5 max-sm:hidden\">\n              <Separator orientation=\"vertical\" className=\"mx-0.5 h-5\" />\n              {BLOCK_ACTIONS.map((action, index) => (\n                <React.Fragment key={action.id}>\n                  {(index === 3 || index === 6) && <Separator orientation=\"vertical\" className=\"mx-0.5 h-5\" />}\n                  <ToolbarButton\n                    icon={action.icon}\n                    label={labels[action.label]}\n                    keys={action.keys}\n                    pressed={Boolean(state.active[action.id])}\n                    onClick={() => action.run(editor)}\n                  />\n                </React.Fragment>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n    </BubbleMenu>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/editor/image-upload.d.ts

@@ -0,0 +1,57 @@
+import { Extension, Editor } from '@tiptap/core';
+
+/**
+ * Ảnh dán / kéo thả / chọn từ menu `/` → tải qua `onImageUpload` của app → chèn vào tài liệu.
+ *
+ * Gói KHÔNG biết kho ảnh ở đâu: bucket của module Comitor là riêng tư, URL hiện được là URL đã ký
+ * — nên đường tải là của app (route của app ký và ghi), gói chỉ trao `File` và nhận lại `src` để
+ * LƯU. Cùng nguyên tắc với `/uploader` (`XHRUpload` về endpoint của app).
+ *
+ * ── ẢNH ĐANG TẢI LÀ DECORATION, KHÔNG PHẢI NODE ────────────────────────────────────────────────
+ * Trong lúc tải, ảnh hiện NGAY bằng `blob:` của chính tệp — nhưng dưới dạng một widget decoration
+ * (khuôn "upload" của ProseMirror), không phải một node trong tài liệu. Node ảnh thật chỉ được chèn
+ * MỘT lần, khi app đã trả `src`.
+ *
+ * Bản đầu chèn một node ảnh TẠM rồi đổi `src` khi xong (giao dịch đổi không vào lịch sử). Nó qua
+ * mọi phép thử lúc gõ, và hỏng ở lịch sử hoàn tác: ⌘Z gỡ ảnh, rồi ⌘⇧Z làm lại ĐÚNG bước chèn node
+ * tạm — `src` là `blob:` đã thu hồi, cờ "đang tải" còn nguyên: một ảnh vỡ kẹt mãi, và vì cờ đó
+ * nên nó cũng không bao giờ vào markdown. Với decoration thì tài liệu không bao giờ chứa thứ gì tạm:
+ * lịch sử chỉ có một bước, "chèn ảnh thật".
+ */
+
+/** Thứ `onImageUpload` trả về: `src` để LƯU, hoặc kèm `alt`/`title`. */
+type MarkdownEditorImageUploadResult = string | {
+    src: string;
+    alt?: string;
+    title?: string;
+};
+interface ImageUploadHandlers {
+    upload?: (file: File) => Promise<MarkdownEditorImageUploadResult>;
+    onError: (error: unknown, file: File) => void;
+    /** Đổi `src` lưu → `src` hiện (`resolveImageSrc`), để tải trước ảnh thật trước khi chèn. */
+    resolveSrc?: (src: string) => string;
+    /** Nhãn trợ năng của ảnh đang tải (`role="img"` của widget). */
+    uploadingLabel: string;
+}
+/** Ảnh đang tải của MỘT trình soạn — `MarkdownEditorHandle.isUploading()` đọc nó. */
+type PendingUploads = Set<string>;
+/** Tệp ảnh trong một lần dán/thả. Tệp khác (PDF, zip…) bỏ qua: trình soạn chỉ nhúng ảnh. */
+declare function imageFilesFrom(data: DataTransfer | null): File[];
+/**
+ * Hiện widget cho từng tệp và tải chúng. Xong tệp nào thì gỡ widget và chèn node ảnh thật vào ĐÚNG
+ * chỗ widget đang đứng (vị trí đã đi theo mọi chỉnh sửa trong lúc chờ), trong CÙNG một giao dịch —
+ * một bước hoàn tác. Không dời con trỏ: người dùng có thể đang gõ ở chỗ khác.
+ */
+declare function insertImageFiles(editor: Editor, files: readonly File[], position: number | undefined, handlers: ImageUploadHandlers, pending: PendingUploads): void;
+/**
+ * Bắt ảnh khi DÁN và khi THẢ, và giữ các widget đang tải. Không có `onImageUpload` thì plugin đứng
+ * ngoài (trả `false`) — dán/thả đi đường mặc định của Tiptap, tức ảnh dạng tệp không được nhận
+ * (không có chỗ nào để lưu nó).
+ *
+ * Kéo thả NỘI BỘ (di chuyển một ảnh đã có trong tài liệu, `moved === true`) thì không đụng tới.
+ */
+declare function createImageUploadExtension(handlers: {
+    readonly current: ImageUploadHandlers;
+}, pending: PendingUploads): Extension;
+
+export { type ImageUploadHandlers, type MarkdownEditorImageUploadResult, type PendingUploads, createImageUploadExtension, imageFilesFrom, insertImageFiles };