@comitor/ui 3.5.0 → 3.6.1

package/dist/editor/markdown-editor.js

@@ -1,321 +1,29 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { PluginKey } from "@tiptap/pm/state";
-import { EditorContent, useEditor } from "@tiptap/react";
-import * as React from "react";
-import { LetterAvatar } from "../components/composite/letter-avatar.js";
-import { toast } from "../components/composite/toast.js";
-import { useComitorLabels } from "../i18n/locale-provider.js";
-import { cn } from "../lib/cn.js";
-import { matchesSearch } from "../lib/text-search.js";
-import { useAsRef } from "../lib/use-as-ref.js";
-import { useLazyRef } from "../lib/use-lazy-ref.js";
-import { BubbleToolbar } from "./bubble-toolbar.js";
-import {
-  createImageUploadExtension,
-  insertImageFiles
-} from "./image-upload.js";
-import { MARKDOWN_EDITOR_CONTENT_CLASS } from "./markdown-editor-classes.js";
-import {
-  createEditorKeymap,
-  createMarkdownSchemaExtensions
-} from "./markdown-extensions.js";
-import { trimMarkdown } from "./markdown-syntax.js";
-import {
-  createSlashCommandExtension,
-  filterSlashCommands,
-  SLASH_PLUGIN_KEY
-} from "./slash-commands.js";
-import { SuggestionMenu } from "./suggestion-menu.js";
-import { SuggestionStore } from "./suggestion-store.js";
-const MENTION_PLUGIN_KEY = new PluginKey("comitorMentionMenu");
-const MENTION_LIST_LIMIT = 50;
-function filterMentionItems(items, query) {
-  const term = query.trim();
-  const matches = term ? items.filter(
-    (item) => matchesSearch(item.label, term) || // Đi QUA từ đầu của tên: "@nguyenvana" vẫn tới "Nguyễn Văn An" — cùng luật `Mention`.
-    matchesSearch(item.label.replace(/\s+/g, ""), term.replace(/\s+/g, "")) || (item.description ? matchesSearch(item.description, term) : false)
-  ) : items;
-  return matches.slice(0, MENTION_LIST_LIMIT);
-}
-function readMarkdown(editor) {
-  return trimMarkdown(editor.getMarkdown());
-}
-const toBoolean = (value) => value === true || value === "true";
-function MarkdownEditor({
-  value,
-  defaultValue,
-  onChange,
-  onSubmit,
-  onFocus,
-  onBlur,
-  placeholder,
-  editable = true,
-  autoFocus = false,
-  variant = "outline",
-  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,
-  ref
-}) {
-  const labels = useComitorLabels("markdownEditor", labelsProp);
-  const runtime = useAsRef({
-    placeholder: placeholder ?? labels.placeholder,
-    taskCheckbox: labels.taskCheckbox,
-    resolveImageSrc,
-    resolveMentionLabel: mentions?.resolveLabel
-  });
-  const latest = useAsRef({ onChange, onFocus, onBlur, mentions, onImageUpload, labels, name });
-  const imageHandlers = useAsRef({
-    upload: onImageUpload,
-    onError: (error, file) => {
-      if (onImageUploadError) onImageUploadError(error, file);
-      else toast(labels.imageUploadFailed, { variant: "destructive", description: file.name || void 0 });
-    },
-    resolveSrc: resolveImageSrc,
-    uploadingLabel: labels.imageUploading
-  });
-  const [linkRequest, setLinkRequest] = React.useState(0);
-  const keymapHandlers = useAsRef({
-    onLinkShortcut: () => {
-      if (!editable) return false;
-      setLinkRequest((count) => count + 1);
-      return true;
-    },
-    onSubmitShortcut: () => {
-      if (!onSubmit) return false;
-      onSubmit();
-      return true;
-    }
-  });
-  const initialMarkdown = value ?? defaultValue ?? "";
-  const lastMarkdown = React.useRef(initialMarkdown);
-  const [hiddenValue, setHiddenValue] = React.useState(initialMarkdown);
-  const pendingUploads = useLazyRef(() => /* @__PURE__ */ new Set()).current;
-  const fileInputRef = React.useRef(null);
-  const slashStore = useLazyRef(
-    () => new SuggestionStore(SLASH_PLUGIN_KEY, (item) => item)
-  ).current;
-  const mentionStore = useLazyRef(
-    () => new SuggestionStore(MENTION_PLUGIN_KEY, (item) => ({
-      id: item.id,
-      label: item.label
-    }))
-  ).current;
-  const [extensions] = React.useState(() => [
-    ...createMarkdownSchemaExtensions({
-      runtime,
-      mentionSuggestion: {
-        pluginKey: MENTION_PLUGIN_KEY,
-        char: "@",
-        // Tên người Việt có dấu cách. Khi chữ gõ có dấu cách mà không còn ai khớp, menu tự thoát
-        // (`exitWhenEmpty`) — người dùng đang viết câu, không còn tìm người nữa.
-        allowSpaces: true,
-        debounce: typeof mentions?.items === "function" ? 150 : 0,
-        items: async ({ query, signal }) => {
-          const source = latest.current.mentions?.items;
-          if (!source) return [];
-          if (typeof source === "function") return [...await source(query, { signal })];
-          return filterMentionItems(source, query);
-        },
-        allow: ({ editor: current }) => Boolean(latest.current.mentions) && current.isEditable && !current.isActive("codeBlock") && !current.isActive("code"),
-        render: mentionStore.render
-      }
-    }),
-    createSlashCommandExtension({
-      items: ({ editor: current, query }) => filterSlashCommands(current, query, latest.current.labels, {
-        pickImage: latest.current.onImageUpload ? () => fileInputRef.current?.click() : void 0
-      }),
-      render: slashStore.render
-    }),
-    createImageUploadExtension(imageHandlers, pendingUploads),
-    createEditorKeymap(keymapHandlers),
-    ...extraExtensions ?? []
-  ]);
-  const [labelElementId, setLabelElementId] = React.useState(null);
-  const editorProps = React.useMemo(() => {
-    const attributes = {
-      class: cn(
-        MARKDOWN_EDITOR_CONTENT_CLASS,
-        variant === "outline" ? "min-h-16 px-3 py-2" : "min-h-6",
-        contentClassName
-      )
-    };
-    if (id) attributes.id = id;
-    if (!editable) attributes.role = "none";
-    if (editable) {
-      attributes.role = "textbox";
-      attributes["aria-multiline"] = "true";
-      const labelledBy = ariaLabelledBy ?? labelElementId;
-      if (ariaLabel || !labelledBy) attributes["aria-label"] = ariaLabel ?? labels.editorLabel;
-      if (labelledBy) attributes["aria-labelledby"] = labelledBy;
-      if (toBoolean(ariaRequired)) attributes["aria-required"] = "true";
+import { jsx } from "react/jsx-runtime";
+import { EditorCore } from "./editor-core.js";
+function createMarkdownHandle(core) {
+  return {
+    focus: core.focus,
+    getMarkdown: core.getValue,
+    setMarkdown: core.setValue,
+    clear: core.clear,
+    isEmpty: core.isEmpty,
+    isUploading: core.isUploading,
+    get editor() {
+      return core.editor;
     }
-    if (ariaDescribedBy) attributes["aria-describedby"] = ariaDescribedBy;
-    if (toBoolean(ariaInvalid)) attributes["aria-invalid"] = "true";
-    return { attributes };
-  }, [
-    variant,
-    contentClassName,
-    id,
-    editable,
-    ariaLabel,
-    ariaLabelledBy,
-    labelElementId,
-    ariaDescribedBy,
-    ariaInvalid,
-    ariaRequired,
-    labels.editorLabel
-  ]);
-  const editor = useEditor({
-    extensions,
-    content: initialMarkdown,
-    contentType: "markdown",
-    editable,
-    autofocus: autoFocus ? "end" : false,
-    // Next App Router render ở máy chủ: dựng trình soạn ở client sau lần hydrate đầu, không thì HTML
-    // hai phía lệch nhau. Khung rỗng giữ chỗ trong khoảng đó — xem phần render.
-    immediatelyRender: false,
-    editorProps,
-    onUpdate: ({ editor: current }) => {
-      const markdown = readMarkdown(current);
-      lastMarkdown.current = markdown;
-      latest.current.onChange?.(markdown);
-      if (latest.current.name) setHiddenValue(markdown);
-    },
-    onFocus: () => latest.current.onFocus?.(),
-    onBlur: () => latest.current.onBlur?.()
-  });
-  React.useEffect(() => {
-    if (!editor || value === void 0 || value === lastMarkdown.current) return;
-    editor.commands.setContent(value, { contentType: "markdown", emitUpdate: false });
-    lastMarkdown.current = value;
-    setHiddenValue(value);
-  }, [editor, value]);
-  React.useEffect(() => {
-    if (editor && editor.isEditable !== editable) editor.setEditable(editable, false);
-  }, [editor, editable]);
-  React.useEffect(() => {
-    if (!editor || !id || !editable || ariaLabel || ariaLabelledBy) return;
-    const label = document.querySelector(`label[for="${CSS.escape(id)}"]`);
-    if (!label) return;
-    if (!label.id) label.id = `${id}-label`;
-    setLabelElementId(label.id);
-    const focusEditor = (event) => {
-      event.preventDefault();
-      editor.commands.focus();
-    };
-    label.addEventListener("click", focusEditor);
-    return () => {
-      label.removeEventListener("click", focusEditor);
-      setLabelElementId(null);
-    };
-  }, [editor, id, editable, ariaLabel, ariaLabelledBy]);
-  const editorRef = useAsRef(editor);
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      focus: (position = "end") => {
-        editorRef.current?.commands.focus(position);
-      },
-      getMarkdown: () => editorRef.current ? readMarkdown(editorRef.current) : lastMarkdown.current,
-      setMarkdown: (markdown) => {
-        editorRef.current?.commands.setContent(markdown, { contentType: "markdown", emitUpdate: true });
-      },
-      clear: () => {
-        editorRef.current?.commands.clearContent(true);
-      },
-      isEmpty: () => editorRef.current ? editorRef.current.isEmpty : lastMarkdown.current.trim() === "",
-      isUploading: () => pendingUploads.size > 0,
-      get editor() {
-        return editorRef.current;
-      }
-    }),
-    [editorRef, pendingUploads]
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
+  };
+}
+function MarkdownEditor({ toolbar = "bubble", ref, ...props }) {
+  return /* @__PURE__ */ jsx(
+    EditorCore,
     {
-      "data-slot": "markdown-editor",
-      "data-variant": variant,
-      "data-readonly": !editable || void 0,
-      className: cn(
-        "relative min-w-0",
-        variant === "outline" && // Khuôn khung của `Textarea`: viền `border-input`, nền trong suốt (dark: `--input-fill`),
-        // focus `--primary-ink` + vòng `ring/50`; lỗi đọc từ `aria-invalid` của CHÍNH vùng soạn.
-        "rounded-md border border-input bg-transparent shadow-xs transition-colors duration-150 ease-out focus-within:border-primary-ink focus-within:ring-2 focus-within:ring-ring/50 has-[[aria-invalid=true]]:border-destructive-ink dark:bg-input-fill",
-        className
-      ),
-      children: [
-        editor ? /* @__PURE__ */ jsx(EditorContent, { editor }) : (
-          // Giữ chỗ tới khi trình soạn dựng xong ở client (`immediatelyRender: false`) — cùng chiều cao tối thiểu.
-          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: variant === "outline" ? "min-h-16 px-3 py-2" : "min-h-6" })
-        ),
-        editor && editable && /* @__PURE__ */ jsx(BubbleToolbar, { editor, labels, linkRequest }),
-        editor && /* @__PURE__ */ jsx(
-          SuggestionMenu,
-          {
-            editor,
-            store: slashStore,
-            label: labels.slashMenu,
-            emptyLabel: labels.slashEmpty,
-            getKey: (item) => item.id,
-            renderItem: (item) => /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(item.icon, { "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
-              item.hint && // Cú pháp gõ tắt — mờ, chữ đều, như phím tắt trong `CommandShortcut`.
-              /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-xs text-muted-foreground", children: item.hint })
-            ] })
-          }
-        ),
-        editor && mentions && /* @__PURE__ */ jsx(
-          SuggestionMenu,
-          {
-            editor,
-            store: mentionStore,
-            label: labels.mentionMenu,
-            emptyLabel: labels.mentionEmpty,
-            loadingLabel: labels.mentionLoading,
-            getKey: (item) => item.id,
-            exitWhenEmpty: (query) => /\s/.test(query),
-            renderItem: (item) => /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(LetterAvatar, { name: item.label, src: item.avatarUrl, size: "xs", "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
-              item.description && /* @__PURE__ */ jsx("span", { className: "max-w-[45%] truncate text-xs text-muted-foreground", children: item.description })
-            ] })
-          }
-        ),
-        onImageUpload && /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref: fileInputRef,
-            type: "file",
-            accept: "image/*",
-            multiple: true,
-            hidden: true,
-            tabIndex: -1,
-            onChange: (event) => {
-              const files = Array.from(event.target.files ?? []).filter((file) => file.type.startsWith("image/"));
-              event.target.value = "";
-              if (editor && files.length > 0)
-                insertImageFiles(editor, files, void 0, imageHandlers.current, pendingUploads);
-            }
-          }
-        ),
-        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: hiddenValue })
-      ]
+      ...props,
+      format: "markdown",
+      toolbar,
+      slot: "markdown-editor",
+      handleRef: ref,
+      createHandle: createMarkdownHandle
     }
   );
 }

package/dist/editor/markdown-editor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/editor/markdown-editor.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * MarkdownEditor — trình soạn văn bản giàu định dạng kiểu Linear, LƯU bằng markdown.\n *\n * Soạn trực tiếp trên bản đã định dạng (không có khung \"Xem trước\" tách đôi): gõ `## ` là thành\n * tiêu đề, `- ` là danh sách, `[] ` là danh sách việc, ```` ``` ```` là khối mã; `/` mở menu khối,\n * `@` mở danh sách người, bôi chọn chữ là hiện thanh định dạng. Giá trị vào/ra là CHUỖI markdown\n * (GFM) — thứ module lưu ở cột mô tả và thứ công cụ MCP đọc/ghi.\n *\n * Dựng trên Tiptap 3 (ProseMirror — cùng nền với trình soạn của Linear). Lý do chọn, các phương án\n * đã loại, và những chỗ đã vá `@tiptap/markdown`: docs/editor.md.\n *\n * ⚠ Mọi gói `@tiptap/*` là peer TUỲ CHỌN của entry `@comitor/ui/editor` và phải CÙNG MỘT phiên bản\n * (chúng ghim nhau bằng số chính xác). Lệnh cài ở `src/editor/index.ts`.\n */\n\nimport type { AnyExtension, Editor } from \"@tiptap/core\";\nimport { PluginKey } from \"@tiptap/pm/state\";\nimport { EditorContent, useEditor } from \"@tiptap/react\";\nimport * as React from \"react\";\nimport { LetterAvatar } from \"../components/composite/letter-avatar.js\";\nimport { toast } from \"../components/composite/toast.js\";\nimport { useComitorLabels } from \"../i18n/locale-provider.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { matchesSearch } from \"../lib/text-search.js\";\nimport { useAsRef } from \"../lib/use-as-ref.js\";\nimport { useLazyRef } from \"../lib/use-lazy-ref.js\";\nimport { BubbleToolbar } from \"./bubble-toolbar.js\";\nimport {\n  createImageUploadExtension,\n  type ImageUploadHandlers,\n  insertImageFiles,\n  type MarkdownEditorImageUploadResult,\n  type PendingUploads\n} from \"./image-upload.js\";\nimport { MARKDOWN_EDITOR_CONTENT_CLASS } from \"./markdown-editor-classes.js\";\nimport type { MarkdownEditorLabels } from \"./markdown-editor-constants.js\";\nimport {\n  createEditorKeymap,\n  createMarkdownSchemaExtensions,\n  type EditorKeymapHandlers,\n  type MarkdownEditorRuntime\n} from \"./markdown-extensions.js\";\nimport { trimMarkdown } from \"./markdown-syntax.js\";\nimport {\n  createSlashCommandExtension,\n  filterSlashCommands,\n  SLASH_PLUGIN_KEY,\n  type SlashMenuItem\n} from \"./slash-commands.js\";\nimport { SuggestionMenu } from \"./suggestion-menu.js\";\nimport { SuggestionStore } from \"./suggestion-store.js\";\n\n/** Một người trong danh sách `@`. */\nexport interface MarkdownEditorMentionItem {\n  /** Định danh LƯU vào markdown (`[@Tên](mention:<id>)`) — với module Comitor là id người dùng của Account */\n  id: string;\n  /** Tên hiển thị lúc chọn — cũng là ảnh chụp tên ghi kèm trong markdown */\n  label: string;\n  /** Dòng phụ mờ bên phải (email, chức danh) — cũng được dùng để lọc */\n  description?: string;\n  avatarUrl?: string | null;\n}\n\n/**\n * Nguồn danh sách `@`:\n *   · MẢNG — gói tự lọc theo tên/dòng phụ, không dấu (cùng luật `Combobox`), tối đa 50 người;\n *   · HÀM — app tự tìm (gọi API danh bạ…). `signal` bị huỷ khi người dùng gõ tiếp; gói chờ 150ms\n *     sau phím cuối mới gọi. (Kiểu nguồn xét LÚC MOUNT — độ trễ là tuỳ chọn dựng của plugin.)\n */\nexport type MarkdownEditorMentionSource =\n  | readonly MarkdownEditorMentionItem[]\n  | ((\n      query: string,\n      options: { signal: AbortSignal }\n    ) => readonly MarkdownEditorMentionItem[] | Promise<readonly MarkdownEditorMentionItem[]>);\n\nexport interface MarkdownEditorMentions {\n  items: MarkdownEditorMentionSource;\n  /**\n   * Tên SỐNG theo id, dùng lúc VẼ. Markdown giữ tên chụp lúc nhắc; người đó đổi tên ở Account thì\n   * hàm này cho tên mới mà không phải sửa nội dung. `undefined` → rơi về tên chụp.\n   */\n  resolveLabel?: (id: string) => string | undefined;\n}\n\n/** Điều khiển trình soạn từ ngoài — lấy qua prop `ref`. */\nexport interface MarkdownEditorHandle {\n  focus: (position?: \"start\" | \"end\") => void;\n  /** Markdown hiện tại — cùng chuỗi mà `onChange` nhận. */\n  getMarkdown: () => string;\n  /** Thay toàn bộ nội dung. Có gọi `onChange`. */\n  setMarkdown: (markdown: string) => void;\n  /** Xoá trắng — vd sau khi gửi bình luận. Có gọi `onChange(\"\")`. */\n  clear: () => void;\n  isEmpty: () => boolean;\n  /**\n   * Còn ảnh đang tải lên không. Ảnh chưa tải xong KHÔNG có trong markdown — nút Gửi nên chờ (hoặc\n   * khoá) khi hàm này trả `true`, nếu không bình luận đi mà thiếu ảnh.\n   */\n  isUploading: () => boolean;\n  /** Bản Tiptap bên dưới — lối thoát cho nhu cầu gói chưa phủ. `null` trước lần render đầu ở client. */\n  readonly editor: Editor | null;\n}\n\nexport type MarkdownEditorVariant = \"outline\" | \"ghost\";\n\nexport interface MarkdownEditorProps {\n  /** Markdown — điều khiển từ ngoài. Đổi giá trị KHÁC thứ trình soạn vừa phát là nạp lại nội dung. */\n  value?: string;\n  /** Markdown ban đầu khi KHÔNG điều khiển. */\n  defaultValue?: string;\n  /** Mỗi lần nội dung đổi, nhận markdown đã chuẩn hoá. */\n  onChange?: (markdown: string) => void;\n  /**\n   * ⌘/Ctrl+Enter (ngoài danh sách việc — ở đó phím này tick mục). Cho ô bình luận; không truyền thì\n   * phím giữ nghĩa mặc định.\n   */\n  onSubmit?: () => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  /** Chữ mờ khi rỗng. Mặc định theo `ComitorLocaleProvider`. */\n  placeholder?: string;\n  /** `false` = chế độ ĐỌC: không con trỏ, không menu, liên kết bấm mở được. Đổi lúc chạy được. */\n  editable?: boolean;\n  autoFocus?: boolean;\n  /**\n   * `outline` (mặc định) — khung như `Textarea`, cho biểu mẫu và ô bình luận.\n   * `ghost` — không khung, không đệm: tài liệu nằm thẳng trên trang, kiểu mô tả việc của Linear.\n   */\n  variant?: MarkdownEditorVariant;\n  /** Bật `@`. Không truyền thì gõ `@` là chữ thường — nhưng nhắc tên CÓ SẴN trong nội dung vẫn hiện đúng. */\n  mentions?: MarkdownEditorMentions;\n  /**\n   * Bật ảnh: dán, kéo thả, và mục \"Ảnh\" của menu `/`. Nhận `File`, trả `src` để LƯU vào markdown —\n   * khoá trong kho, hoặc một route ổn định của app; KHÔNG trả URL đã ký có hạn (xem `resolveImageSrc`).\n   */\n  onImageUpload?: (file: File) => Promise<MarkdownEditorImageUploadResult>;\n  /** Lỗi tải ảnh. Mặc định: toast `imageUploadFailed` (cần `Toaster` ở gốc app). */\n  onImageUploadError?: (error: unknown, file: File) => void;\n  /** Đổi `src` ĐÃ LƯU thành địa chỉ HIỂN THỊ (vd URL đã ký) lúc vẽ. Markdown vẫn giữ `src` gốc. */\n  resolveImageSrc?: (src: string) => string;\n  /**\n   * Extension Tiptap thêm vào (vd node `KEY-n` của module). Chỉ đọc LÚC MOUNT — đổi danh sách là\n   * phải dựng lại trình soạn (mất lịch sử hoàn tác), nên muốn đổi thì đổi `key` của component.\n   * Phải cùng phiên bản `@tiptap/*` với gói.\n   */\n  extensions?: readonly AnyExtension[];\n  labels?: Partial<MarkdownEditorLabels>;\n  /** Có `name` thì kèm một `<input type=\"hidden\">` mang markdown — để trình soạn nằm trong `<form>` thật. */\n  name?: string;\n  /** Đặt lên vùng soạn. Có `<label for={id}>` trong trang thì gói tự nối nó làm tên trợ năng. */\n  id?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean | \"true\" | \"false\";\n  \"aria-required\"?: boolean | \"true\" | \"false\";\n  className?: string;\n  /** Lớp thêm cho vùng soạn (phần tử ProseMirror) — vd `min-h-40`, `max-h-96 overflow-y-auto`. */\n  contentClassName?: string;\n  ref?: React.Ref<MarkdownEditorHandle>;\n}\n\ntype MentionSelection = { id: string; label: string };\n\nconst MENTION_PLUGIN_KEY = new PluginKey(\"comitorMentionMenu\");\n\n/** Trần số người hiện khi nguồn là MẢNG mà chưa gõ gì — gõ thêm chữ là lọc; 500 dòng DOM thì không. */\nconst MENTION_LIST_LIMIT = 50;\n\nfunction filterMentionItems(items: readonly MarkdownEditorMentionItem[], query: string): MarkdownEditorMentionItem[] {\n  const term = query.trim();\n  const matches = term\n    ? items.filter(\n        (item) =>\n          matchesSearch(item.label, term) ||\n          // Đi QUA từ đầu của tên: \"@nguyenvana\" vẫn tới \"Nguyễn Văn An\" — cùng luật `Mention`.\n          matchesSearch(item.label.replace(/\\s+/g, \"\"), term.replace(/\\s+/g, \"\")) ||\n          (item.description ? matchesSearch(item.description, term) : false)\n      )\n    : items;\n  return matches.slice(0, MENTION_LIST_LIMIT);\n}\n\nfunction readMarkdown(editor: Editor): string {\n  return trimMarkdown(editor.getMarkdown());\n}\n\nconst toBoolean = (value: boolean | \"true\" | \"false\" | undefined) => value === true || value === \"true\";\n\nexport function MarkdownEditor({\n  value,\n  defaultValue,\n  onChange,\n  onSubmit,\n  onFocus,\n  onBlur,\n  placeholder,\n  editable = true,\n  autoFocus = false,\n  variant = \"outline\",\n  mentions,\n  onImageUpload,\n  onImageUploadError,\n  resolveImageSrc,\n  extensions: extraExtensions,\n  labels: labelsProp,\n  name,\n  id,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-invalid\": ariaInvalid,\n  \"aria-required\": ariaRequired,\n  className,\n  contentClassName,\n  ref\n}: MarkdownEditorProps) {\n  const labels = useComitorLabels(\"markdownEditor\", labelsProp);\n\n  /*\n   * Mọi giá trị đổi được SAU KHI dựng đi qua ref: danh sách extension chỉ dựng MỘT lần (đổi nó là\n   * dựng lại trình soạn — mất lịch sử hoàn tác, mất con trỏ), nên extension đọc giá trị mới nhất lúc\n   * cần chứ không chép lúc dựng.\n   */\n  const runtime = useAsRef<MarkdownEditorRuntime>({\n    placeholder: placeholder ?? labels.placeholder,\n    taskCheckbox: labels.taskCheckbox,\n    resolveImageSrc,\n    resolveMentionLabel: mentions?.resolveLabel\n  });\n  const latest = useAsRef({ onChange, onFocus, onBlur, mentions, onImageUpload, labels, name });\n  const imageHandlers = useAsRef<ImageUploadHandlers>({\n    upload: onImageUpload,\n    onError: (error, file) => {\n      if (onImageUploadError) onImageUploadError(error, file);\n      else toast(labels.imageUploadFailed, { variant: \"destructive\", description: file.name || undefined });\n    },\n    resolveSrc: resolveImageSrc,\n    uploadingLabel: labels.imageUploading\n  });\n\n  const [linkRequest, setLinkRequest] = React.useState(0);\n  const keymapHandlers = useAsRef<EditorKeymapHandlers>({\n    onLinkShortcut: () => {\n      if (!editable) return false;\n      setLinkRequest((count) => count + 1);\n      return true;\n    },\n    onSubmitShortcut: () => {\n      if (!onSubmit) return false;\n      onSubmit();\n      return true;\n    }\n  });\n\n  const initialMarkdown = value ?? defaultValue ?? \"\";\n  const lastMarkdown = React.useRef(initialMarkdown);\n  const [hiddenValue, setHiddenValue] = React.useState(initialMarkdown);\n  const pendingUploads = useLazyRef<PendingUploads>(() => new Set()).current;\n  const fileInputRef = React.useRef<HTMLInputElement>(null);\n\n  const slashStore = useLazyRef(\n    () => new SuggestionStore<SlashMenuItem, SlashMenuItem>(SLASH_PLUGIN_KEY, (item) => item)\n  ).current;\n  const mentionStore = useLazyRef(\n    () =>\n      new SuggestionStore<MarkdownEditorMentionItem, MentionSelection>(MENTION_PLUGIN_KEY, (item) => ({\n        id: item.id,\n        label: item.label\n      }))\n  ).current;\n\n  const [extensions] = React.useState<AnyExtension[]>(() => [\n    ...createMarkdownSchemaExtensions({\n      runtime,\n      mentionSuggestion: {\n        pluginKey: MENTION_PLUGIN_KEY,\n        char: \"@\",\n        // Tên người Việt có dấu cách. Khi chữ gõ có dấu cách mà không còn ai khớp, menu tự thoát\n        // (`exitWhenEmpty`) — người dùng đang viết câu, không còn tìm người nữa.\n        allowSpaces: true,\n        debounce: typeof mentions?.items === \"function\" ? 150 : 0,\n        items: async ({ query, signal }) => {\n          const source = latest.current.mentions?.items;\n          if (!source) return [];\n          if (typeof source === \"function\") return [...(await source(query, { signal }))];\n          return filterMentionItems(source, query);\n        },\n        allow: ({ editor: current }) =>\n          Boolean(latest.current.mentions) &&\n          current.isEditable &&\n          !current.isActive(\"codeBlock\") &&\n          !current.isActive(\"code\"),\n        render: mentionStore.render\n      }\n    }),\n    createSlashCommandExtension({\n      items: ({ editor: current, query }) =>\n        filterSlashCommands(current, query, latest.current.labels, {\n          pickImage: latest.current.onImageUpload ? () => fileInputRef.current?.click() : undefined\n        }),\n      render: slashStore.render\n    }),\n    createImageUploadExtension(imageHandlers, pendingUploads),\n    createEditorKeymap(keymapHandlers),\n    ...(extraExtensions ?? [])\n  ]);\n\n  /*\n   * `<label for={id}>` không trỏ được vào một `div contenteditable` (chỉ `input`/`textarea`/… là\n   * \"labelable\") — nên `FormField` dựng nhãn đúng mà vùng soạn vẫn không có tên, và bấm nhãn không\n   * đưa con trỏ vào. Effect bên dưới tìm nhãn theo `for` và ghi id của nó vào đây; tên trợ năng đi\n   * qua `aria-labelledby` trong bộ thuộc tính — nhờ vậy tên dự phòng (`editorLabel`) được BỎ hẳn\n   * chứ không nằm song song với nhãn thật.\n   */\n  const [labelElementId, setLabelElementId] = React.useState<string | null>(null);\n\n  /*\n   * Thuộc tính của vùng soạn. Ổn định theo giá trị: `useEditor` so tuỳ chọn mỗi lượt render và gửi\n   * lại `editorProps` mỗi khi định danh đổi — tức mỗi lần FormField bật/tắt `aria-invalid` là một\n   * lần cập nhật đúng, chứ không phải mỗi phím gõ.\n   *\n   * Tên trợ năng: chỉ đặt khi SOẠN được (`role=\"textbox\"`). Ở chế độ đọc, vùng nội dung là văn bản\n   * thường; `aria-label` trên một `div` không vai trò là thứ ARIA 1.2 cấm và trình đọc màn hình bỏ qua.\n   * ⚠ Chế độ đọc phải GHI ĐÈ `role` chứ không bỏ trống: Tiptap luôn trộn `role=\"textbox\"` mặc định\n   * vào TRƯỚC thuộc tính của app (`getEditorViewAttributes`), nên thiếu khoá là danh sách bình luận\n   * đọc lên thành một dãy \"ô nhập chỉ đọc\" — đã gặp ở harness.\n   */\n  const editorProps = React.useMemo(() => {\n    const attributes: Record<string, string> = {\n      class: cn(\n        MARKDOWN_EDITOR_CONTENT_CLASS,\n        variant === \"outline\" ? \"min-h-16 px-3 py-2\" : \"min-h-6\",\n        contentClassName\n      )\n    };\n    if (id) attributes.id = id;\n    if (!editable) attributes.role = \"none\";\n    if (editable) {\n      attributes.role = \"textbox\";\n      attributes[\"aria-multiline\"] = \"true\";\n      const labelledBy = ariaLabelledBy ?? labelElementId;\n      if (ariaLabel || !labelledBy) attributes[\"aria-label\"] = ariaLabel ?? labels.editorLabel;\n      if (labelledBy) attributes[\"aria-labelledby\"] = labelledBy;\n      if (toBoolean(ariaRequired)) attributes[\"aria-required\"] = \"true\";\n    }\n    if (ariaDescribedBy) attributes[\"aria-describedby\"] = ariaDescribedBy;\n    if (toBoolean(ariaInvalid)) attributes[\"aria-invalid\"] = \"true\";\n    return { attributes };\n  }, [\n    variant,\n    contentClassName,\n    id,\n    editable,\n    ariaLabel,\n    ariaLabelledBy,\n    labelElementId,\n    ariaDescribedBy,\n    ariaInvalid,\n    ariaRequired,\n    labels.editorLabel\n  ]);\n\n  const editor = useEditor({\n    extensions,\n    content: initialMarkdown,\n    contentType: \"markdown\",\n    editable,\n    autofocus: autoFocus ? \"end\" : false,\n    // Next App Router render ở máy chủ: dựng trình soạn ở client sau lần hydrate đầu, không thì HTML\n    // hai phía lệch nhau. Khung rỗng giữ chỗ trong khoảng đó — xem phần render.\n    immediatelyRender: false,\n    editorProps,\n    onUpdate: ({ editor: current }) => {\n      const markdown = readMarkdown(current);\n      lastMarkdown.current = markdown;\n      latest.current.onChange?.(markdown);\n      if (latest.current.name) setHiddenValue(markdown);\n    },\n    onFocus: () => latest.current.onFocus?.(),\n    onBlur: () => latest.current.onBlur?.()\n  });\n\n  // Giá trị đổi từ NGOÀI (xoá sau khi gửi, nạp bản nháp…). Giá trị chính mình vừa phát thì bỏ qua —\n  // không thì mỗi phím gõ là một lần nạp lại, con trỏ nhảy về đầu.\n  React.useEffect(() => {\n    if (!editor || value === undefined || value === lastMarkdown.current) return;\n    editor.commands.setContent(value, { contentType: \"markdown\", emitUpdate: false });\n    lastMarkdown.current = value;\n    setHiddenValue(value);\n  }, [editor, value]);\n\n  // `useEditor` cố ý giữ nguyên `editable` khi cập nhật tuỳ chọn, nên phải tự đặt. Không phát `update`:\n  // đổi chế độ không phải đổi nội dung.\n  React.useEffect(() => {\n    if (editor && editor.isEditable !== editable) editor.setEditable(editable, false);\n  }, [editor, editable]);\n\n  // Nối `<label for={id}>` — lý do ở chỗ khai `labelElementId`. Bấm nhãn thì tự đưa con trỏ vào.\n  React.useEffect(() => {\n    if (!editor || !id || !editable || ariaLabel || ariaLabelledBy) return;\n    const label = document.querySelector<HTMLLabelElement>(`label[for=\"${CSS.escape(id)}\"]`);\n    if (!label) return;\n    if (!label.id) label.id = `${id}-label`;\n    setLabelElementId(label.id);\n    const focusEditor = (event: MouseEvent) => {\n      event.preventDefault();\n      editor.commands.focus();\n    };\n    label.addEventListener(\"click\", focusEditor);\n    return () => {\n      label.removeEventListener(\"click\", focusEditor);\n      setLabelElementId(null);\n    };\n  }, [editor, id, editable, ariaLabel, ariaLabelledBy]);\n\n  /*\n   * Handle ỔN ĐỊNH suốt đời component (deps rỗng), đọc trình soạn MỚI NHẤT qua ref. Dựng lại theo\n   * `editor` thì ai giữ đối tượng cũ — một closure, một biến ngoài React — thấy `editor: null` mãi,\n   * vì trình soạn chỉ có SAU lượt render đầu (`immediatelyRender: false`). Đã gặp ở harness.\n   */\n  const editorRef = useAsRef(editor);\n  React.useImperativeHandle(\n    ref,\n    () => ({\n      focus: (position = \"end\") => {\n        editorRef.current?.commands.focus(position);\n      },\n      getMarkdown: () => (editorRef.current ? readMarkdown(editorRef.current) : lastMarkdown.current),\n      setMarkdown: (markdown) => {\n        editorRef.current?.commands.setContent(markdown, { contentType: \"markdown\", emitUpdate: true });\n      },\n      clear: () => {\n        editorRef.current?.commands.clearContent(true);\n      },\n      isEmpty: () => (editorRef.current ? editorRef.current.isEmpty : lastMarkdown.current.trim() === \"\"),\n      isUploading: () => pendingUploads.size > 0,\n      get editor() {\n        return editorRef.current;\n      }\n    }),\n    [editorRef, pendingUploads]\n  );\n\n  return (\n    <div\n      data-slot=\"markdown-editor\"\n      data-variant={variant}\n      data-readonly={!editable || undefined}\n      className={cn(\n        \"relative min-w-0\",\n        variant === \"outline\" &&\n          // Khuôn khung của `Textarea`: viền `border-input`, nền trong suốt (dark: `--input-fill`),\n          // focus `--primary-ink` + vòng `ring/50`; lỗi đọc từ `aria-invalid` của CHÍNH vùng soạn.\n          \"rounded-md border border-input bg-transparent shadow-xs transition-colors duration-150 ease-out focus-within:border-primary-ink focus-within:ring-2 focus-within:ring-ring/50 has-[[aria-invalid=true]]:border-destructive-ink dark:bg-input-fill\",\n        className\n      )}\n    >\n      {editor ? (\n        <EditorContent editor={editor} />\n      ) : (\n        // Giữ chỗ tới khi trình soạn dựng xong ở client (`immediatelyRender: false`) — cùng chiều cao tối thiểu.\n        <div aria-hidden=\"true\" className={variant === \"outline\" ? \"min-h-16 px-3 py-2\" : \"min-h-6\"} />\n      )}\n\n      {editor && editable && <BubbleToolbar editor={editor} labels={labels} linkRequest={linkRequest} />}\n\n      {editor && (\n        <SuggestionMenu\n          editor={editor}\n          store={slashStore}\n          label={labels.slashMenu}\n          emptyLabel={labels.slashEmpty}\n          getKey={(item) => item.id}\n          renderItem={(item) => (\n            <>\n              <item.icon aria-hidden=\"true\" />\n              <span className=\"min-w-0 flex-1 truncate\">{item.label}</span>\n              {item.hint && (\n                // Cú pháp gõ tắt — mờ, chữ đều, như phím tắt trong `CommandShortcut`.\n                <span className=\"ml-auto font-mono text-xs text-muted-foreground\">{item.hint}</span>\n              )}\n            </>\n          )}\n        />\n      )}\n\n      {editor && mentions && (\n        <SuggestionMenu\n          editor={editor}\n          store={mentionStore}\n          label={labels.mentionMenu}\n          emptyLabel={labels.mentionEmpty}\n          loadingLabel={labels.mentionLoading}\n          getKey={(item) => item.id}\n          exitWhenEmpty={(query) => /\\s/.test(query)}\n          renderItem={(item) => (\n            <>\n              <LetterAvatar name={item.label} src={item.avatarUrl} size=\"xs\" aria-hidden=\"true\" />\n              <span className=\"min-w-0 flex-1 truncate\">{item.label}</span>\n              {item.description && (\n                <span className=\"max-w-[45%] truncate text-xs text-muted-foreground\">{item.description}</span>\n              )}\n            </>\n          )}\n        />\n      )}\n\n      {onImageUpload && (\n        <input\n          ref={fileInputRef}\n          type=\"file\"\n          accept=\"image/*\"\n          multiple\n          hidden\n          tabIndex={-1}\n          onChange={(event) => {\n            const files = Array.from(event.target.files ?? []).filter((file) => file.type.startsWith(\"image/\"));\n            // Xoá giá trị để chọn LẠI đúng tệp đó lần sau vẫn phát `change`.\n            event.target.value = \"\";\n            if (editor && files.length > 0)\n              insertImageFiles(editor, files, undefined, imageHandlers.current, pendingUploads);\n          }}\n        />\n      )}\n\n      {name && <input type=\"hidden\" name={name} value={hiddenValue} />}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/editor/markdown-editor.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * MarkdownEditor — trình soạn văn bản giàu định dạng kiểu Linear, LƯU bằng markdown.\n *\n * Soạn trực tiếp trên bản đã định dạng (không có khung \"Xem trước\" tách đôi): gõ `## ` là thành\n * tiêu đề, `- ` là danh sách, `[] ` là danh sách việc, ```` ``` ```` là khối mã; `/` mở menu khối,\n * `@` mở danh sách người, bôi chọn chữ là hiện thanh định dạng. Giá trị vào/ra là CHUỖI markdown\n * (GFM) — thứ module lưu ở cột mô tả và thứ công cụ MCP đọc/ghi.\n *\n * Cần lưu HTML (trang CMS, nội dung hiển thị lại ngoài trình soạn)? Đó là `RichTextEditor` — cùng\n * lõi (`editor-core.tsx`), lược đồ rộng hơn. Chọn theo thứ CỘT LƯU mang, không theo giao diện: cả hai\n * đều có `toolbar=\"bubble\" | \"fixed\"`.\n *\n * Dựng trên Tiptap 3 (ProseMirror — cùng nền với trình soạn của Linear). Lý do chọn, các phương án\n * đã loại, và những chỗ đã vá `@tiptap/markdown`: docs/editor.md.\n *\n * ⚠ Mọi gói `@tiptap/*` là peer TUỲ CHỌN của entry `@comitor/ui/editor` và phải CÙNG MỘT phiên bản\n * (chúng ghim nhau bằng số chính xác). Lệnh cài ở `src/editor/index.ts`.\n */\n\nimport type * as React from \"react\";\nimport { EditorCore, type EditorCoreHandle } from \"./editor-core.js\";\nimport type { EditorBaseProps, EditorHandleBase, EditorToolbarMode } from \"./editor-types.js\";\n\n/** Điều khiển trình soạn từ ngoài — lấy qua prop `ref`. */\nexport interface MarkdownEditorHandle extends EditorHandleBase {\n  /** Markdown hiện tại — cùng chuỗi mà `onChange` nhận. */\n  getMarkdown: () => string;\n  /** Thay toàn bộ nội dung. Có gọi `onChange`. */\n  setMarkdown: (markdown: string) => void;\n}\n\nexport interface MarkdownEditorProps extends EditorBaseProps {\n  /** Markdown — điều khiển từ ngoài. Đổi giá trị KHÁC thứ trình soạn vừa phát là nạp lại nội dung. */\n  value?: string;\n  /** Markdown ban đầu khi KHÔNG điều khiển. */\n  defaultValue?: string;\n  /** Mỗi lần nội dung đổi, nhận markdown đã chuẩn hoá. */\n  onChange?: (markdown: string) => void;\n  /**\n   * `bubble` (mặc định) — kiểu Linear: định dạng hiện ở chỗ bôi chọn. `fixed` — thanh dính đầu khung,\n   * cho người soạn không thuộc phím tắt (mô tả dài, trang nội bộ). Xem `EditorToolbarMode`.\n   */\n  toolbar?: EditorToolbarMode;\n  ref?: React.Ref<MarkdownEditorHandle>;\n}\n\nfunction createMarkdownHandle(core: EditorCoreHandle): MarkdownEditorHandle {\n  return {\n    focus: core.focus,\n    getMarkdown: core.getValue,\n    setMarkdown: core.setValue,\n    clear: core.clear,\n    isEmpty: core.isEmpty,\n    isUploading: core.isUploading,\n    get editor() {\n      return core.editor;\n    }\n  };\n}\n\nexport function MarkdownEditor({ toolbar = \"bubble\", ref, ...props }: MarkdownEditorProps) {\n  return (\n    <EditorCore\n      {...props}\n      format=\"markdown\"\n      toolbar={toolbar}\n      slot=\"markdown-editor\"\n      handleRef={ref}\n      createHandle={createMarkdownHandle}\n    />\n  );\n}\n"],"mappings":";AAgEI;AA1CJ,SAAS,kBAAyC;AA0BlD,SAAS,qBAAqB,MAA8C;AAC1E,SAAO;AAAA,IACL,OAAO,KAAK;AAAA,IACZ,aAAa,KAAK;AAAA,IAClB,aAAa,KAAK;AAAA,IAClB,OAAO,KAAK;AAAA,IACZ,SAAS,KAAK;AAAA,IACd,aAAa,KAAK;AAAA,IAClB,IAAI,SAAS;AACX,aAAO,KAAK;AAAA,IACd;AAAA,EACF;AACF;AAEO,SAAS,eAAe,EAAE,UAAU,UAAU,KAAK,GAAG,MAAM,GAAwB;AACzF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,QAAO;AAAA,MACP;AAAA,MACA,MAAK;AAAA,MACL,WAAW;AAAA,MACX,cAAc;AAAA;AAAA,EAChB;AAEJ;","names":[]}

package/dist/editor/markdown-extensions.d.ts

@@ -1,16 +1,23 @@
 import { Extension, AnyExtension } from '@tiptap/core';
 import { MentionOptions } from '@tiptap/extension-mention';
+import { Slice } from '@tiptap/pm/model';
+import { f as EditorFormat } from '../editor-types-BMST7-VR.js';
+import './markdown-editor-constants.js';
 
 /**
- * LƯỢC ĐỒ + MARKDOWN của `MarkdownEditor` — danh sách extension Tiptap, không React, không DOM.
+ * LƯỢC ĐỒ của hai trình soạn — danh sách extension Tiptap, không React, không DOM.
  *
- * Mọi thứ quyết định "tài liệu này lưu xuống thành chuỗi markdown nào, và đọc lên lại thành tài liệu
- * nào" nằm ở đây, và CHỈ ở đây: trình soạn dùng nó, cổng `test:editor-markdown` dựng
- * `MarkdownManager` từ chính hàm này trên `dist/` rồi đo vòng tài liệu → markdown → tài liệu. Hai
- * nơi mà dùng hai danh sách là hai lược đồ, và cổng xanh trên một lược đồ không ai dùng.
+ * Mọi thứ quyết định "tài liệu này lưu xuống thành chuỗi nào, và đọc lên lại thành tài liệu nào"
+ * nằm ở đây, và CHỈ ở đây: trình soạn dùng nó, cổng `test:editor-markdown` dựng `MarkdownManager`
+ * từ chính hàm này trên `dist/` rồi đo vòng tài liệu → markdown → tài liệu. Hai nơi mà dùng hai danh
+ * sách là hai lược đồ, và cổng xanh trên một lược đồ không ai dùng.
+ *
+ * Hai định dạng LƯU, hai lược đồ khác nhau ở đúng những chỗ định dạng ấy biểu diễn được hay không
+ * (`createSchemaExtensions`): markdown (`MarkdownEditor`) hẹp hơn — không gạch chân, ô bảng một đoạn —
+ * vì thứ gì không ghi được thành markdown thì sẽ mất ở lần lưu; HTML (`RichTextEditor`) giữ được cả hai.
  *
  * Phần GIAO DIỆN (menu `/`, menu `@`, tải ảnh, phím tắt) gắn vào qua tham số — xem
- * `MarkdownSchemaOptions`. Gọi không tham số là ra đúng lược đồ, đủ để đọc/ghi markdown.
+ * `MarkdownSchemaOptions`. Gọi không tham số là ra đúng lược đồ, đủ để đọc/ghi.
  */
 
 /**
@@ -27,7 +34,9 @@ interface MarkdownEditorRuntime {
     resolveMentionLabel?: (id: string) => string | undefined;
 }
 interface MarkdownSchemaOptions {
-    /** Đọc lười — xem `MarkdownEditorRuntime`. Bỏ trống ở nơi chỉ cần đọc/ghi markdown (cổng, máy chủ). */
+    /** Định dạng LƯU — quyết định lược đồ. Mặc định `markdown`. */
+    format?: EditorFormat;
+    /** Đọc lười — xem `MarkdownEditorRuntime`. Bỏ trống ở nơi chỉ cần đọc/ghi (cổng, máy chủ). */
     runtime?: {
         readonly current: MarkdownEditorRuntime;
     };
@@ -39,14 +48,30 @@ interface MarkdownSchemaOptions {
     mentionSuggestion?: Partial<MentionOptions["suggestion"]>;
 }
 /**
- * Danh sách extension tạo nên lược đồ + định dạng markdown của trình soạn.
+ * Gộp một đoạn dán thành MỘT dòng nội dòng: các khối chữ nối nhau bằng một dấu cách, xuống dòng (cả
+ * `hardBreak` lẫn `\n` trong khối mã) thành dấu cách, khối không phải chữ (ảnh, đường kẻ) bỏ đi.
+ * Nội dung nội dòng sẵn thì để nguyên; `keepTables` (đoạn dán GỐC có bảng) thì đoạn dán mang ô bảng
+ * cũng để nguyên — dán theo ô là việc của `prosemirror-tables`.
+ * Xuất ra cho cổng `test:editor-markdown`; không nằm trong entry.
+ */
+declare function flattenSliceToLine(slice: Slice, keepTables?: boolean): Slice;
+/**
+ * Danh sách extension tạo nên lược đồ của trình soạn, theo định dạng LƯU.
+ *
+ * Markdown (`format: "markdown"`, mặc định) hẹp hơn HTML ở hai chỗ, cả hai vì cùng một lý do — thứ gì
+ * không ghi được thành markdown thì MẤT ở lần lưu, mà người dùng không được báo:
+ *   · `underline` tắt: markdown không có cú pháp gạch chân. `@tiptap/markdown` ghi nó thành
+ *     `++chữ++` — cú pháp riêng, nên email thông báo, tác tử đọc qua MCP và mọi trình xem markdown
+ *     khác in nguyên hai dấu cộng;
+ *   · ô bảng chỉ chứa MỘT đoạn văn (`ComitorTableCell`).
+ * Hai bản vá markdown (`ComitorParagraph`, `Markdown` với `Marked` riêng) cũng chỉ nạp ở định dạng đó.
  *
- * ⚠ `underline` CỐ Ý tắt: markdown không có cú pháp gạch chân. `@tiptap/markdown` ghi nó thành
- * `++chữ++` — cú pháp riêng, nên email thông báo, tác tử đọc qua MCP và mọi trình xem markdown khác
- * in nguyên hai dấu cộng. Một định dạng chỉ sống trong trình soạn này thì không nên tồn tại trong
- * định dạng LƯU.
+ * HTML (`format: "html"`) giữ cả gạch chân lẫn ô bảng nhiều khối — `<u>`, `<td><ul>…</ul></td>` là HTML
+ * hợp lệ và đọc lên lại đúng.
  */
-declare function createMarkdownSchemaExtensions(options?: MarkdownSchemaOptions): AnyExtension[];
+declare function createSchemaExtensions(options?: MarkdownSchemaOptions): AnyExtension[];
+/** Lược đồ của `MarkdownEditor` — tên có từ `3.5.0`, cổng `test:editor-markdown` gọi thẳng nó. */
+declare function createMarkdownSchemaExtensions(options?: Omit<MarkdownSchemaOptions, "format">): AnyExtension[];
 /** Phím tắt riêng của trình soạn — xem `createEditorKeymap`. */
 interface EditorKeymapHandlers {
     /** ⌘/Ctrl+K — mở ô liên kết. Trả `true` khi đã xử lý. */
@@ -66,6 +91,6 @@ interface EditorKeymapHandlers {
  */
 declare function createEditorKeymap(handlers: {
     readonly current: EditorKeymapHandlers;
-}): Extension;
+}, format?: EditorFormat): Extension;
 
-export { type EditorKeymapHandlers, type MarkdownEditorRuntime, type MarkdownSchemaOptions, createEditorKeymap, createMarkdownSchemaExtensions };
+export { type EditorKeymapHandlers, type MarkdownEditorRuntime, type MarkdownSchemaOptions, createEditorKeymap, createMarkdownSchemaExtensions, createSchemaExtensions, flattenSliceToLine };