@comitor/ui 3.4.0 → 3.5.0

package/README.md

@@ -10,7 +10,7 @@ component ghép sẵn và khung ứng dụng (shell) kiểu workspace × app.
 
 > Trạng thái: `3.0.0` — mặc định **tiếng Anh**, tiếng Việt dựng sẵn (§5) · 79 file primitive (Tier 1,
 > gồm 18 component port từ [Dice UI](docs/diceui.md)) · 33 file composite (Tier 2) · 25 file shell
-> (Tier 3) · 4 file chart · 32 file data-grid · 5 file uploader · 43 file ngôn ngữ (`src/i18n`). API
+> (Tier 3) · 4 file chart · 32 file data-grid · 5 file uploader · 11 file editor · 44 file ngôn ngữ (`src/i18n`). API
 > chốt từ `1.0.0`. (Đếm bằng `ls src/<tầng>`; con số trôi theo mỗi bản — đếm lại, đừng chép.)
 >
 > Tài liệu đầy đủ: **https://design-system.comitor.ai** —
@@ -41,6 +41,11 @@ pnpm add recharts           # cho @comitor/ui/chart
 pnpm add react-hook-form    # cho @comitor/ui/form
 pnpm add @tanstack/react-table         # cho @comitor/ui/data-grid
 pnpm add @uppy/core @uppy/xhr-upload   # cho @comitor/ui/uploader
+# cho @comitor/ui/editor — MỌI gói @tiptap/* CÙNG một phiên bản (docs/editor.md §3)
+pnpm add @tiptap/core @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/markdown \
+  @tiptap/extensions @tiptap/extension-list @tiptap/extension-table @tiptap/extension-image \
+  @tiptap/extension-mention @tiptap/suggestion @tiptap/extension-paragraph \
+  @tiptap/extension-code-block-lowlight lowlight highlight.js
 ```
 
 | Peer | Range | Bắt buộc | Cần khi |
@@ -55,6 +60,8 @@ pnpm add @uppy/core @uppy/xhr-upload   # cho @comitor/ui/uploader
 | `@tanstack/react-table` | `>=8.21.0 <9` | — | `/data-grid` (app và gói phải dùng **cùng một bản**, nếu không `ColumnDef` app tự khai sẽ lệch kiểu) |
 | `@uppy/core` | `^6.0.0` | — | `/uploader` |
 | `@uppy/xhr-upload` | `^6.0.0` | — | `/uploader` |
+| `@tiptap/*` (13 gói, xem lệnh trên) | `^3.31.0` | — | `/editor` — mọi gói **cùng một phiên bản** (chúng ghim `@tiptap/core`/`@tiptap/pm` bằng số chính xác), và app tự viết extension phải dùng **chính** bản đó |
+| `lowlight` | `^3.0.0` | — | `/editor` (tô màu khối mã; kéo theo `highlight.js` `^11`) |
 
 > **Vì sao `recharts` và `lucide-react` là `>=` chứ không phải `^`.** `^2.15.0` loại thẳng recharts
 > 3 — mà 3.x chạy tốt với gói này: kiểu của tầng `/chart` không dẫn xuất `payload`/`label` từ
@@ -113,7 +120,7 @@ buộc ở thẻ `<html>`: https://design-system.comitor.ai/shell
 
 ## 3. Entry point
 
-Package có **7 entry**, tách theo peer optional mà mỗi tầng kéo theo:
+Package có **8 entry**, tách theo peer optional mà mỗi tầng kéo theo:
 
 | Entry | Nội dung | Peer optional kéo theo |
 |---|---|---|
@@ -122,6 +129,7 @@ Package có **7 entry**, tách theo peer optional mà mỗi tầng kéo theo:
 | `@comitor/ui/chart` | Lớp shadcn bọc recharts + `Comitor*Chart` + `CHART_COLORS` | `recharts` (~100KB) |
 | `@comitor/ui/data-grid` | `DataGrid` — lưới sửa trực tiếp kiểu bảng tính: ảo hoá dòng, chọn vùng bằng bàn phím, copy/paste với Excel, ghim cột, lọc/sắp xếp nhiều tiêu chí, hoàn tác/làm lại | `@tanstack/react-table` (peer); kèm `@tanstack/react-virtual` + `@dnd-kit/*` (dependency của gói) |
 | `@comitor/ui/uploader` | `FileUpload` (tệp tài liệu) · `ImageUploadField` (ảnh đại diện, logo) · `useFileUpload` | `@uppy/core`, `@uppy/xhr-upload` (~13KB gzip) |
+| `@comitor/ui/editor` | `MarkdownEditor` — trình soạn kiểu Linear, lưu bằng markdown: gõ tắt, menu `/`, `@` nhắc người, thanh định dạng nổi, ảnh, bảng, khối mã tô màu | `@tiptap/*` + `lowlight` (~234KB gzip — nạp lười nếu trang không cần ngay) |
 | `@comitor/ui/form` | Binding shadcn ⇄ react-hook-form | `react-hook-form` |
 | `@comitor/ui/tokens` | Token dạng object TS — cho nơi không có Tailwind: canvas, email HTML, PDF | không có |
 
@@ -168,7 +176,7 @@ https://design-system.comitor.ai/foundations/server-client
 
 ## 5. Bảng component
 
-Số file nguồn hiện tại: **79 primitive · 33 composite · 25 shell · 4 chart · 32 data-grid · 5 uploader · 43 i18n**. Mỗi component có trang
+Số file nguồn hiện tại: **79 primitive · 33 composite · 25 shell · 4 chart · 32 data-grid · 5 uploader · 11 editor · 44 i18n**. Mỗi component có trang
 riêng kèm demo, bảng prop và cạm bẫy của nó:
 
 | Tầng | Là gì | Trang |
@@ -179,6 +187,7 @@ riêng kèm demo, bảng prop và cạm bẫy của nó:
 | **chart** · 4 file · `@comitor/ui/chart` | Lớp shadcn bọc recharts, cùng ba bản dựng sẵn theo brand. ⚠ Ba wrapper `Comitor*Chart` **mặc định TẮT** hiệu ứng vẽ dần (`isAnimationActive = false`) — bật lại là biểu đồ kẹt ở khung đầu: có trục, có lưới, KHÔNG có dữ liệu. Mặc định đó KHÔNG áp cho `<ChartContainer>` + recharts do app tự lắp | https://design-system.comitor.ai/components/chart |
 | **data-grid** · 32 file · `@comitor/ui/data-grid` | `DataGrid` — lưới sửa trực tiếp kiểu bảng tính, cho màn nhập liệu hàng loạt. Port từ [tablecn](https://www.tablecn.com/data-grid) (MIT) sang primitive + token của gói. ⚠ Là tầng DUY NHẤT có peer **`@tanstack/react-table`**, có thêm prop `locale` riêng (xem dưới), và mọi thứ trong nó là client component | [docs/data-grid.md](docs/data-grid.md) |
 | **uploader** · 5 file · `@comitor/ui/uploader` | `FileUpload` (tệp) · `ImageUploadField` (ảnh) · `useFileUpload` — kéo thả, xem trước, tiến độ. Peer optional: `@uppy/core` + `@uppy/xhr-upload` | https://design-system.comitor.ai/components |
+| **editor** · 11 file · `@comitor/ui/editor` | `MarkdownEditor` — soạn trực tiếp trên bản đã định dạng, giá trị vào/ra là markdown (GFM). Dựng trên Tiptap 3 (ProseMirror). ⚠ Định dạng LƯU là hợp đồng: nhắc người là `[@Tên](mention:<id>)`, ảnh lưu `src` app trả về (không phải URL đã ký), gạch chân cố ý không có. Peer optional: bộ `@tiptap/*` + `lowlight` | [docs/editor.md](docs/editor.md) |
 | **form** · `@comitor/ui/form` | Binding shadcn ⇄ react-hook-form | https://design-system.comitor.ai/components/form |
 
 **Ngôn ngữ — mặc định TIẾNG ANH, tiếng Việt dựng sẵn (từ `3.0.0`).** Mọi chuỗi hiển thị của gói —
@@ -280,7 +289,7 @@ https://design-system.comitor.ai/foundations/colors
 
 Mỗi bản publish đi qua cùng một chuỗi cổng (`prepublishOnly` nối chúng lại): typecheck → build →
 `verify:directives` → `smoke:entries` → `check:exports` → `test:nav-active` → `test:grid-contract`
-→ `test:grid-render` → `test:a11y-gate` → `lint:a11y`. Những cổng đáng để người dùng gói biết là chúng tồn tại:
+→ `test:grid-render` → `test:editor-markdown` → `test:a11y-gate` → `lint:a11y`. Những cổng đáng để người dùng gói biết là chúng tồn tại:
 
 - **`lint:a11y` — hợp đồng màu.** Quét **toàn bộ** `src/**/*.{ts,tsx}` theo QUY TẮC (không theo danh
   sách phát hiện) và đối chiếu với `styles.css`: token TÔ NỀN đem làm màu chữ/icon/viền là sai
@@ -300,7 +309,10 @@ Mỗi bản publish đi qua cùng một chuỗi cổng (`prepublishOnly` nối c
 - **`verify:directives` — ranh giới server/client.** File nguồn nào mở đầu bằng `"use client"` thì
   file `dist/` tương ứng phải mở đầu y hệt (thiếu file build cũng tính là hỏng), và không hằng dữ
   liệu thuần nào được kẹt trong file client (§4.2).
-- **`smoke:entries`** nạp cả 7 entry bằng Node ESM thuần, qua đúng `exports` map (§3).
+- **`smoke:entries`** nạp cả 8 entry bằng Node ESM thuần, qua đúng `exports` map (§3).
+- **`test:editor-markdown`** — markdown là định dạng LƯU của `MarkdownEditor`, nên phép đo là tài liệu →
+  markdown → tài liệu phải ra đúng tài liệu ban đầu, trên CHÍNH lược đồ trong `dist/`. Lỗi loại này không lộ
+  ra lúc gõ mà ở lần mở sau. Trên lược đồ gốc của Tiptap (chưa vá) cổng trượt 16/46 — [docs/editor.md](docs/editor.md) §5.
 - **`test:a11y-gate`** tự kiểm chính cổng màu (cổng còn bắt đủ không); **`test:nav-active`** khoá
   toàn bộ luật active matching của sidebar dưới dạng hàm thuần (§4.1).
 - **`test:grid-render`** render THẬT `DataGrid` bằng `react-dom/server` rồi soi HTML ra được. Nó

package/dist/components/ui/item.d.ts

@@ -18,7 +18,7 @@ interface ItemProps extends React.ComponentProps<"div">, VariantProps<typeof ite
 }
 declare function Item({ className, variant, size, asChild, ...props }: ItemProps): React.JSX.Element;
 declare const itemMediaVariants: (props?: ({
-    variant?: "default" | "image" | "icon" | null | undefined;
+    variant?: "image" | "default" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ItemMediaProps extends React.ComponentProps<"div">, VariantProps<typeof itemMediaVariants> {
 }

package/dist/data-grid/use-data-grid.d.ts

@@ -122,7 +122,7 @@ declare function useDataGrid<TData>({ data, columns, rowHeight: rowHeightProp, o
     pasteDialog: PasteDialogState;
     onRowAdd: ((event?: React.MouseEvent<HTMLDivElement>) => Promise<void>) | undefined;
     adjustLayout: boolean;
-    locale: {
+    locale: "en" | "vi" | {
         grid: {
             label: string;
             addRow: string;
@@ -397,7 +397,7 @@ declare function useDataGrid<TData>({ data, columns, rowHeight: rowHeightProp, o
                 shortcuts: string;
             };
         };
-    } | "en" | "vi" | undefined;
+    } | undefined;
 };
 
 export { type UseDataGridProps, useDataGrid };

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":[]}