@comitor/ui 3.4.0 → 3.6.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 · `RichTextEditor` — lưu HTML, thanh công cụ cố định kiểu CMS. Chung: gõ tắt, menu `/`, `@` nhắc người, ảnh, bảng, khối mã tô màu, `toolbar="bubble" \| "fixed"` | `@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** · 17 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); `RichTextEditor` — cùng lõi, giá trị là HTML, lược đồ có thêm gạch chân và ô bảng nhiều khối, mặc định thanh cố định. 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>)` / `<span data-type="mention">`, ảnh lưu `src` app trả về (không phải URL đã ký), markdown cố ý không có gạch chân. ⚠ HTML đã lưu hiển thị lại bằng `RichTextEditor editable={false}`, không `dangerouslySetInnerHTML`. 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,12 @@ 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.
+  Từ `3.6.0` nó canh cả lược đồ HTML của `RichTextEditor`: thứ GHI xuống (`src` gốc, tên chụp) không được lẫn
+  thứ chỉ để VẼ (URL đã ký, tên sống).
 - **`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/editor/bubble-toolbar.d.ts

@@ -0,0 +1,53 @@
+import { Editor } from '@tiptap/core';
+import * as React from 'react';
+import { f as EditorFormat } from '../editor-types-BMST7-VR.js';
+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.
+ *
+ * ⚠ `strategy` PHẢI là `absolute` (mặc định của Tiptap), không phải `fixed`. `BubbleMenu` của
+ * `@tiptap/react` gán sẵn `position: absolute` cho phần tử lúc dựng, và Floating UI đo theo vị trí
+ * ĐANG CÓ của phần tử: lần hiện ĐẦU TIÊN, nó tính toạ độ theo khung `relative` của trình soạn rồi plugin
+ * áp chúng như toạ độ MÀN HÌNH (`fixed`) — bong bóng lệch đúng bằng khoảng cách từ khung tới góc màn
+ * hình, tới lần cập nhật sau mới về chỗ. `3.5.0` để `fixed` và lỗi đó có thật (đo ở harness: liên kết
+ * mở ở `left: -9px` thay vì sát chữ). `absolute` còn đi theo chữ khi một khung cuộn BÊN TRONG cuộn
+ * (`DialogBody`, cột chi tiết) — `fixed` thì đứng yên, vì plugin chỉ nghe cuộn của `window`. Bị khung
+ * cuộn cắt thì `flip` lật bong bóng xuống dưới vùng chọn.
+ *
+ * Trình soạn có thanh CỐ ĐỊNH (`toolbar="fixed"`) vẫn dùng bong bóng này với `formatting={false}`:
+ * nút định dạng đã ở thanh trên, nhưng ô sửa liên kết và phần xem trước liên kết chỉ có ở đây.
+ */
+
+/**
+ * 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;
+    format: EditorFormat;
+    /**
+     * `false` khi trình soạn có thanh cố định (`toolbar="fixed"`): bong bóng không hiện nút định dạng
+     * nữa (đã có ở thanh trên), chỉ còn phần LIÊN KẾT — xem trước, sửa, gỡ.
+     */
+    formatting: boolean;
+    /** 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, format, formatting, linkRequest }: BubbleToolbarProps): React.JSX.Element | null;
+
+export { BubbleToolbar, type BubbleToolbarProps, normalizeLinkHref };

package/dist/editor/bubble-toolbar.js

@@ -0,0 +1,231 @@
+"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 { Check, ExternalLink, Link2, Link2Off, Pencil } from "lucide-react";
+import * as React from "react";
+import { Separator } from "../components/ui/separator.js";
+import { useAsRef } from "../lib/use-as-ref.js";
+import { actionsFor, BLOCK_ACTIONS, MARK_ACTIONS } from "./toolbar-actions.js";
+import { ToolbarButton } from "./toolbar-button.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;
+}
+function readToolbarState(editor) {
+  const active = {};
+  for (const action of [...MARK_ACTIONS, ...BLOCK_ACTIONS]) active[action.id] = action.isActive?.(editor) ?? false;
+  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]);
+}
+function BubbleToolbar({ editor, labels, format, formatting, linkRequest }) {
+  const state = useEditorState({
+    editor,
+    selector: ({ editor: current }) => readToolbarState(current),
+    equalityFn: sameToolbarState
+  });
+  const [editingLink, setEditingLink] = React.useState(false);
+  const editingLinkRef = useAsRef(editingLink);
+  const formattingRef = useAsRef(formatting);
+  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");
+      if (!formattingRef.current) return false;
+      return editorState.doc.textBetween(from, to, " ").trim().length > 0;
+    },
+    [editingLinkRef, formattingRef]
+  );
+  const options = React.useMemo(
+    () => ({
+      // `absolute`, không `fixed` — lý do ở đầu file.
+      strategy: "absolute",
+      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: [
+        actionsFor(MARK_ACTIONS, format).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 }),
+        !(format === "markdown" && 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 * ⚠ `strategy` PHẢI là `absolute` (mặc định của Tiptap), không phải `fixed`. `BubbleMenu` của\n * `@tiptap/react` gán sẵn `position: absolute` cho phần tử lúc dựng, và Floating UI đo theo vị trí\n * ĐANG CÓ của phần tử: lần hiện ĐẦU TIÊN, nó tính toạ độ theo khung `relative` của trình soạn rồi plugin\n * áp chúng như toạ độ MÀN HÌNH (`fixed`) — bong bóng lệch đúng bằng khoảng cách từ khung tới góc màn\n * hình, tới lần cập nhật sau mới về chỗ. `3.5.0` để `fixed` và lỗi đó có thật (đo ở harness: liên kết\n * mở ở `left: -9px` thay vì sát chữ). `absolute` còn đi theo chữ khi một khung cuộn BÊN TRONG cuộn\n * (`DialogBody`, cột chi tiết) — `fixed` thì đứng yên, vì plugin chỉ nghe cuộn của `window`. Bị khung\n * cuộn cắt thì `flip` lật bong bóng xuống dưới vùng chọn.\n *\n * Trình soạn có thanh CỐ ĐỊNH (`toolbar=\"fixed\"`) vẫn dùng bong bóng này với `formatting={false}`:\n * nút định dạng đã ở thanh trên, nhưng ô sửa liên kết và phần xem trước liên kết chỉ có ở đây.\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 { Check, ExternalLink, Link2, Link2Off, Pencil } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Separator } from \"../components/ui/separator.js\";\nimport { useAsRef } from \"../lib/use-as-ref.js\";\nimport type { EditorFormat } from \"./editor-types.js\";\nimport type { MarkdownEditorLabels } from \"./markdown-editor-constants.js\";\nimport { actionsFor, BLOCK_ACTIONS, MARK_ACTIONS } from \"./toolbar-actions.js\";\nimport { ToolbarButton } from \"./toolbar-button.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\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) ?? false;\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\nexport interface BubbleToolbarProps {\n  editor: Editor;\n  labels: MarkdownEditorLabels;\n  format: EditorFormat;\n  /**\n   * `false` khi trình soạn có thanh cố định (`toolbar=\"fixed\"`): bong bóng không hiện nút định dạng\n   * nữa (đã có ở thanh trên), chỉ còn phần LIÊN KẾT — xem trước, sửa, gỡ.\n   */\n  formatting: boolean;\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, format, formatting, 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 formattingRef = useAsRef(formatting);\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      if (!formattingRef.current) return false;\n      return editorState.doc.textBetween(from, to, \" \").trim().length > 0;\n    },\n    [editingLinkRef, formattingRef]\n  );\n\n  const options = React.useMemo<BubbleMenuProps[\"options\"]>(\n    () => ({\n      // `absolute`, không `fixed` — lý do ở đầu file.\n      strategy: \"absolute\",\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          {actionsFor(MARK_ACTIONS, format).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          {!(format === \"markdown\" && 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":";AAkOU,SACE,KADF;AAtMV,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,kBAAwC;AACjD,SAAS,OAAO,cAAc,OAAO,UAAU,cAAc;AAC7D,YAAY,WAAW;AACvB,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AAGzB,SAAS,YAAY,eAAe,oBAAoB;AACxD,SAAS,qBAAqB;AASvB,SAAS,kBAAkB,OAA8B;AAC9D,QAAM,QAAQ,MAAM,KAAK;AACzB,MAAI,CAAC,MAAO,QAAO;AACnB,MAAI,iCAAiC,KAAK,KAAK,EAAG,QAAO;AACzD,MAAI,uBAAuB,KAAK,KAAK,EAAG,QAAO;AAC/C,MAAI,QAAQ,KAAK,KAAK,EAAG,QAAO;AAChC,MAAI,gCAAgC,KAAK,KAAK,EAAG,QAAO,UAAU,KAAK;AACvE,MAAI,sCAAsC,KAAK,KAAK,EAAG,QAAO,WAAW,KAAK;AAC9E,SAAO;AACT;AAUA,SAAS,iBAAiB,QAA8B;AACtD,QAAM,SAAkC,CAAC;AACzC,aAAW,UAAU,CAAC,GAAG,cAAc,GAAG,aAAa,EAAG,QAAO,OAAO,EAAE,IAAI,OAAO,WAAW,MAAM,KAAK;AAC3G,QAAM,OAAO,OAAO,cAAc,MAAM,EAAE;AAC1C,SAAO;AAAA,IACL;AAAA,IACA,MAAM,OAAO,SAAS,MAAM;AAAA,IAC5B,MAAM,OAAO,SAAS,WAAW,OAAO;AAAA,IACxC,OAAO,OAAO,MAAM,UAAU;AAAA,IAC9B,SAAS,OAAO,SAAS,OAAO;AAAA,EAClC;AACF;AAGA,SAAS,iBAAiB,GAAwB,GAAiC;AACjF,MAAI,CAAC,KAAK,CAAC,EAAG,QAAO,MAAM;AAC3B,MAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,QAAS,QAAO;AACrG,SAAO,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,EAAE,OAAO,GAAG,CAAC;AAC7E;AAeO,SAAS,cAAc,EAAE,QAAQ,QAAQ,QAAQ,YAAY,YAAY,GAAuB;AACrG,QAAM,QAAQ,eAAe;AAAA,IAC3B;AAAA,IACA,UAAU,CAAC,EAAE,QAAQ,QAAQ,MAAM,iBAAiB,OAAO;AAAA,IAC3D,YAAY;AAAA,EACd,CAAC;AACD,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,KAAK;AAC1D,QAAM,iBAAiB,SAAS,WAAW;AAC3C,QAAM,gBAAgB,SAAS,UAAU;AACzC,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,EAAE;AAC3C,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,KAAK;AAClD,QAAM,WAAW,MAAM,OAAyB,IAAI;AACpD,QAAM,YAAY;AAOlB,QAAM,aAAa,MAAM,YAAY,MAAM;AACzC,WAAO,KAAK,SAAS,OAAO,MAAM,GAAG,QAAQ,WAAW,MAAM,CAAC;AAC/D,WAAO,KAAK,SAAS,OAAO,MAAM,GAAG,QAAQ,WAAW,gBAAgB,CAAC;AAAA,EAC3E,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,iBAAiB,MAAM,YAAY,MAAM;AAC7C,UAAM,OAAO,OAAO,cAAc,MAAM,EAAE;AAC1C,aAAS,OAAO,SAAS,WAAW,OAAO,EAAE;AAC7C,eAAW,KAAK;AAChB,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,MAAM,CAAC;AAGX,QAAM,UAAU,MAAM;AACpB,QAAI,gBAAgB,EAAG;AACvB,mBAAe;AAAA,EACjB,GAAG,CAAC,aAAa,cAAc,CAAC;AAGhC,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,YAAa;AAClB,eAAW;AACX,UAAM,QAAQ,sBAAsB,MAAM,SAAS,SAAS,OAAO,CAAC;AACpE,WAAO,MAAM,qBAAqB,KAAK;AAAA,EACzC,GAAG,CAAC,aAAa,UAAU,CAAC;AAE5B,QAAM,kBAAkB,CAAC,YAAqB;AAC5C,mBAAe,KAAK;AACpB,eAAW,KAAK;AAChB,QAAI,QAAS,QAAO,SAAS,MAAM;AAAA,EACrC;AAEA,QAAM,YAAY,MAAM;AACtB,UAAM,OAAO,kBAAkB,KAAK;AACpC,QAAI,MAAM,KAAK,MAAM,IAAI;AACvB,aAAO,MAAM,EAAE,MAAM,EAAE,gBAAgB,MAAM,EAAE,UAAU,EAAE,IAAI;AAC/D,sBAAgB,KAAK;AACrB;AAAA,IACF;AACA,QAAI,CAAC,MAAM;AACT,iBAAW,IAAI;AACf;AAAA,IACF;AACA,UAAM,QAAQ,OAAO,MAAM,EAAE,MAAM,EAAE,gBAAgB,MAAM;AAC3D,QAAI,OAAO,MAAM,UAAU,SAAS,CAAC,OAAO,SAAS,MAAM,GAAG;AAE5D,YAAM,cAAc,EAAE,MAAM,QAAQ,MAAM,MAAM,KAAK,GAAG,OAAO,CAAC,EAAE,MAAM,QAAQ,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI;AAAA,IAC5G,OAAO;AACL,YAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,IAAI;AAAA,IAC9B;AACA,oBAAgB,KAAK;AAAA,EACvB;AAEA,QAAM,aAAa,MAAM;AACvB,WAAO,MAAM,EAAE,MAAM,EAAE,gBAAgB,MAAM,EAAE,UAAU,EAAE,IAAI;AAC/D,oBAAgB,KAAK;AAAA,EACvB;AAMA,QAAM,aAAa,MAAM;AAAA,IACvB,CAAC,EAAE,QAAQ,SAAS,SAAS,MAAM,OAAO,aAAa,MAAM,GAAG,MAAM;AACpE,UAAI,CAAC,QAAQ,WAAY,QAAO;AAChC,UAAI,EAAE,KAAK,SAAS,KAAK,QAAQ,SAAS,SAAS,aAAa,GAAI,QAAO;AAC3E,UAAI,eAAe,QAAS,QAAO;AACnC,YAAM,EAAE,UAAU,IAAI;AACtB,UAAI,qBAAqB,iBAAiB,QAAQ,SAAS,WAAW,EAAG,QAAO;AAChF,UAAI,UAAU,MAAO,QAAO,QAAQ,SAAS,MAAM;AACnD,UAAI,CAAC,cAAc,QAAS,QAAO;AACnC,aAAO,YAAY,IAAI,YAAY,MAAM,IAAI,GAAG,EAAE,KAAK,EAAE,SAAS;AAAA,IACpE;AAAA,IACA,CAAC,gBAAgB,aAAa;AAAA,EAChC;AAEA,QAAM,UAAU,MAAM;AAAA,IACpB,OAAO;AAAA;AAAA,MAEL,UAAU;AAAA,MACV,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO,EAAE,SAAS,EAAE;AAAA,MACpB,QAAQ,MAAM,eAAe,KAAK;AAAA,IACpC;AAAA,IACA,CAAC;AAAA,EACH;AAEA,MAAI,CAAC,MAAO,QAAO;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MAET,wBACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,UAAU,CAAC,UAAU;AACnB,kBAAM,eAAe;AACrB,sBAAU;AAAA,UACZ;AAAA,UAEA;AAAA,iCAAC,SAAI,WAAU,2BACb;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,MAAK;AAAA,kBACL,WAAU;AAAA,kBACV,cAAY,OAAO;AAAA,kBACnB,gBAAc,WAAW;AAAA,kBACzB,aAAa,OAAO;AAAA,kBACpB,OAAO;AAAA,kBACP,UAAU,CAAC,UAAU;AACnB,6BAAS,MAAM,OAAO,KAAK;AAC3B,+BAAW,KAAK;AAAA,kBAClB;AAAA,kBACA,WAAW,CAAC,UAAU;AACpB,wBAAI,MAAM,QAAQ,UAAU;AAC1B,4BAAM,eAAe;AAErB,4BAAM,gBAAgB;AACtB,sCAAgB,IAAI;AAAA,oBACtB;AAAA,kBACF;AAAA,kBACA,WAAU;AAAA;AAAA,cACZ;AAAA,cACA,oBAAC,iBAAc,MAAM,OAAO,OAAO,OAAO,WAAW,SAAS,WAAW;AAAA,cACxE,MAAM,QAAQ,oBAAC,iBAAc,MAAM,UAAU,OAAO,OAAO,YAAY,SAAS,YAAY;AAAA,eAC/F;AAAA,YACC,WACC,oBAAC,OAAE,MAAK,SAAQ,WAAU,4CACvB,iBAAO,aACV;AAAA;AAAA;AAAA,MAEJ,IACE,MAAM,SAAS,MAAM,OACvB,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,MAAM;AAAA,YACZ,QAAO;AAAA,YACP,KAAI;AAAA,YACJ,aAAa,CAAC,UAAU,MAAM,eAAe;AAAA,YAC7C,WAAU;AAAA,YAEV;AAAA,kCAAC,gBAAa,eAAY,QAAO,WAAU,qBAAoB;AAAA,cAC/D,oBAAC,UAAK,WAAU,YAAY,gBAAM,MAAK;AAAA,cACvC,oBAAC,UAAK,WAAU,WAAW,iBAAO,UAAS;AAAA;AAAA;AAAA,QAC7C;AAAA,QACA,oBAAC,aAAU,aAAY,YAAW,WAAU,cAAa;AAAA,QACzD,oBAAC,iBAAc,MAAM,QAAQ,OAAO,OAAO,UAAU,MAAK,SAAQ,SAAS,gBAAgB;AAAA,QAC3F,oBAAC,iBAAc,MAAM,UAAU,OAAO,OAAO,YAAY,SAAS,YAAY;AAAA,SAChF,IAEA,qBAAC,SAAI,MAAK,WAAU,cAAY,OAAO,SAAS,WAAU,6BACvD;AAAA,mBAAW,cAAc,MAAM,EAAE,IAAI,CAAC,WACrC;AAAA,UAAC;AAAA;AAAA,YAEC,MAAM,OAAO;AAAA,YACb,OAAO,OAAO,OAAO,KAAK;AAAA,YAC1B,MAAM,OAAO;AAAA,YACb,SAAS,QAAQ,MAAM,OAAO,OAAO,EAAE,CAAC;AAAA,YACxC,SAAS,MAAM,OAAO,IAAI,MAAM;AAAA;AAAA,UAL3B,OAAO;AAAA,QAMd,CACD;AAAA,QACD,oBAAC,iBAAc,MAAM,OAAO,OAAO,OAAO,MAAM,MAAK,SAAQ,SAAS,MAAM,MAAM,SAAS,gBAAgB;AAAA,QAC1G,EAAE,WAAW,cAAc,MAAM,YAChC,qBAAC,SAAI,WAAU,2CACb;AAAA,8BAAC,aAAU,aAAY,YAAW,WAAU,cAAa;AAAA,UACxD,cAAc,IAAI,CAAC,QAAQ,UAC1B,qBAAC,MAAM,UAAN,EACG;AAAA,uBAAU,KAAK,UAAU,MAAM,oBAAC,aAAU,aAAY,YAAW,WAAU,cAAa;AAAA,YAC1F;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM,OAAO;AAAA,gBACb,OAAO,OAAO,OAAO,KAAK;AAAA,gBAC1B,MAAM,OAAO;AAAA,gBACb,SAAS,QAAQ,MAAM,OAAO,OAAO,EAAE,CAAC;AAAA,gBACxC,SAAS,MAAM,OAAO,IAAI,MAAM;AAAA;AAAA,YAClC;AAAA,eARmB,OAAO,EAS5B,CACD;AAAA,WACH;AAAA,SAEJ;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/editor/editor-core.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { g as EditorBaseProps, f as EditorFormat, a as EditorToolbarMode, E as EditorHandleBase } from '../editor-types-BMST7-VR.js';
+import '@tiptap/core';
+import './markdown-editor-constants.js';
+
+/** Handle chung, đọc/ghi theo định dạng của trình soạn — mỗi lớp ngoài đặt tên lại cho cặp này. */
+interface EditorCoreHandle extends EditorHandleBase {
+    getValue: () => string;
+    setValue: (value: string) => void;
+}
+interface EditorCoreProps<THandle> extends EditorBaseProps {
+    format: EditorFormat;
+    toolbar: EditorToolbarMode;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** `data-slot` của khung ngoài — mỗi trình soạn một tên, để CSS/test của app nhắm đúng. */
+    slot: string;
+    handleRef?: React.Ref<THandle>;
+    /**
+     * Dựng handle công khai từ handle chung. Hàm ở cấp MODULE (định danh ổn định), và KHÔNG trải `core`
+     * ra (`{ ...core }`): trải là đọc getter `editor` đúng một lần — lúc nó còn `null`.
+     */
+    createHandle: (core: EditorCoreHandle) => THandle;
+}
+declare function EditorCore<THandle>({ format, toolbar, value, defaultValue, onChange, onSubmit, onFocus, onBlur, placeholder, editable, autoFocus, variant, mentions, onImageUpload, onImageUploadError, resolveImageSrc, extensions: extraExtensions, labels: labelsProp, name, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, className, contentClassName, slot, handleRef, createHandle }: EditorCoreProps<THandle>): React.JSX.Element;
+
+export { EditorCore, type EditorCoreHandle, type EditorCoreProps };