kindy-editor 3.2.7 → 3.2.9

package/dist-lib/{stylesheet-BPIJJMlK.js → stylesheet-BfxJTGA5.js}

@@ -1,4 +1,4 @@
-import { p as u } from "./qrcode-B-JKix2T.js";
+import { p as u } from "./qrcode-CR8i1-w0.js";
 function p(e) {
   return e.type ?? "paragraph";
 }

package/dist-lib/{webmcp-B0swfp0T.js → webmcp-CpWvhcrz.js}

@@ -1,4 +1,4 @@
-import { p as j, c as _, e as F, t as k, D as L } from "./qrcode-B-JKix2T.js";
+import { p as j, c as _, e as F, t as k, D as L } from "./qrcode-CR8i1-w0.js";
 const s = (e) => Math.round(e * 100) / 100;
 function A(e) {
   const o = { font: e.fontFamily, sizePx: e.fontSizePx };
@@ -332,7 +332,7 @@ function H(e, o = {}, r = {}) {
       if (i && e.search(i).total === 0)
         return e.searchClear(), f(`text not found: ${i}`);
       if (!e.getSelection()) return f("no selection (pass 'find' or select_range first)");
-      const { insertText: d } = await import("./editorApp-BtDzRfJq.js").then((m) => m.c);
+      const { insertText: d } = await import("./kindy-editor-Bo4FnkLV.js").then((m) => m.c);
       return e.dispatch(d(t)), i && e.searchClear(), g("inserted");
     }
   }), a({

package/docs/table-editing.md

@@ -95,11 +95,13 @@ if (editor.canExecuteHostTableAction("deleteRow", { tableId: "table_1", row: 1 }
 ```
 
 #### 3. Nhập giá trị vào 1 ô (`setTableCellValue`)
-Cập nhật nội dung một ô theo tọa độ `(row, column)`. Tự động giữ nguyên định dạng cell/paragraph (font, kích thước, căn lề, màu sắc) và hỗ trợ xuống dòng:
+Cập nhật nội dung một ô theo tọa độ `(row, column)`. Tự động giữ nguyên định dạng cell/paragraph (font, kích thước, căn lề, màu sắc), tăng `revision`, giải phóng layout cache của bảng, tự động phân trang lại khi kích thước hàng thay đổi và lên lịch repaint mượt mà qua `requestAnimationFrame`:
 
 ```ts
 await editor.setTableCellValue("table_1", 1, 2, "250.000 đ");
 ```
+- **Không cần gọi `setDocument()`**: Thay đổi được áp dụng ngay lập tức mà không phải rebuild lại DOM editor.
+- **Giữ nguyên trạng thái**: Bảo toàn `mode="view"`, vị trí scroll, zoom và vùng chọn ô (`cellSelection`).
 
 #### 4. Thay thế nhiều dòng dữ liệu cùng lúc (`replaceTableRows`)
 Cập nhật hàng loạt dòng dữ liệu trong một transaction nguyên tử (atomic update).
@@ -124,6 +126,17 @@ await editor.replaceTableRows(
 );
 ```
 
+#### 5. Giải phóng Cache Layout thủ công (`invalidateLayout`)
+Ép buộc giải phóng cache đo đạc layout của bảng hoặc toàn bộ tài liệu:
+
+```ts
+// Giải phóng cache bảng và repaint
+await editor.invalidateLayout("table_1");
+
+// Hoặc giải phóng toàn bộ cache
+await editor.invalidateLayout();
+```
+
 ## API tương tác canvas thông thường
 
 ```ts

package/docs/table-form-integration.md

@@ -568,11 +568,20 @@ const tables = editor.getTables();
 
 ### 10.3 Cập nhật giá trị ô (`editor.setTableCellValue()`)
 
+Cập nhật nội dung một ô theo tọa độ `(row, column)`. Tự động tăng `revision`, giải phóng layout cache (`linesCache`, `tableCache`), tự động phân trang lại nếu chiều cao hàng thay đổi, và lên lịch repaint mượt mà qua `requestAnimationFrame`:
+
 ```ts
 // Cập nhật ô dòng 1, cột 2 (0-indexed)
 await editor.setTableCellValue("tbl_invoice", 1, 2, "Khám tổng quát");
 ```
 
+::: tip Tự động Repaint & Giữ Nguyên Viewport
+- **Không cần gọi `setDocument()`**: Canvas sẽ tự động tính lại layout và repaint ngay sau khi gọi `setTableCellValue()`.
+- **Bảo toàn trạng thái**: Giữ nguyên `mode="view"`, vị trí scroll, tỷ lệ zoom và vùng chọn ô (`cellSelection`).
+- **Bảng tách nhiều trang (Multi-page Fragments)**: Nếu nội dung dài làm tăng chiều cao hàng và đẩy các hàng sang trang sau, hệ thống tự động phân trang lại và repaint tất cả các trang/fragment bị ảnh hưởng.
+- **Kế thừa định dạng thông minh**: Khi thêm dòng hoặc nhập liệu vào dòng dữ liệu thông thường, hệ thống tự động ưu tiên kế thừa định dạng từ data row liền kề, không kế thừa kiểu chữ in đậm (`bold: false`) hay màu nền (`shading`) từ dòng tiêu đề (header) hoặc dòng tổng cộng (total/footer).
+:::
+
 ### 10.4 Thay thế nhiều dòng dữ liệu một lần (`editor.replaceTableRows()`)
 
 Cập nhật hàng loạt dòng dữ liệu trong một transaction nguyên tử:
@@ -622,9 +631,49 @@ await editor.executeHostTableAction("mergeCells", {
 await editor.executeHostTableAction("deleteTable", "tbl_invoice");
 ```
 
+### 10.6 Giải phóng Cache Layout thủ công (`editor.invalidateLayout()`)
+
+Nếu cần ép buộc làm mới cache đo đạc và vẽ lại một bảng hoặc toàn bộ tài liệu:
+
+```ts
+// Xóa cache đo đạc của bảng cụ thể và repaint
+await editor.invalidateLayout("tbl_invoice");
+
+// Hoặc làm mới toàn bộ layout cache
+await editor.invalidateLayout();
+```
+
+---
+
+## 11. Tối Ưu Hiệu Năng: Nhập Liệu Liên Tục Không Gây Giật
+
+::: warning Tuyệt đối không gọi `setDocument()` khi người dùng đang nhập Form
+Phương thức `setDocument()` thực hiện hủy và tái tạo toàn bộ DOM của Editor (`editor.destroy()` + mount lại). Nếu gọi `setDocument()` trên mỗi sự kiện `input` / `change` của form, canvas sẽ bị nhấp nháy trắng, tụt FPS và nhảy vị trí cuộn.
+
+**Hãy dùng `setTableCellValue()` kết hợp gom frame bằng `requestAnimationFrame`:**
+:::
+
+```ts
+let pendingRaf: number | null = null;
+let pendingValue = "";
+
+function onFormCellInput(newValue: string) {
+  pendingValue = newValue;
+  if (pendingRaf !== null) return;
+
+  pendingRaf = requestAnimationFrame(async () => {
+    pendingRaf = null;
+    await editor.setTableCellValue("tbl_invoice", 1, 2, pendingValue);
+  });
+}
+```
+Nhờ cơ chế này:
+- Trình duyệt chỉ cập nhật cell và repaint 1 lần mỗi khung hình (60/120 FPS).
+- Trải nghiệm nhập liệu ở Form ngoài sang Canvas đạt độ mượt mà tối đa.
+
 ---
 
-## 11. Trải Nghiệm Trang Demo Trực Quan
+## 12. Trải Nghiệm Trang Demo Trực Quan
 
 Kindy Editor cung cấp sẵn trang demo tương tác đầy đủ các tính năng trên:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kindy-editor",
-  "version": "3.2.7",
+  "version": "3.2.9",
   "type": "module",
   "description": "Trình soạn thảo tài liệu Word chính xác, vẽ bằng canvas",
   "license": "MIT",

package/types/kindy-editor.d.ts

@@ -991,6 +991,8 @@ export interface EditorHandle {
     options?: ReplaceTableRowsOptions,
   ): boolean;
   getTables(): TableSummary[];
+  /** Invalidate layout cache (for a specific table or full relayout) and repaint. */
+  invalidateLayout(blockId?: string): void;
   // ---- review layer (track changes + comments) ----------------------------
   /** The current editor mode. */
   getMode(): EditMode;
@@ -1173,6 +1175,8 @@ export declare class KindyEditor {
     options?: ReplaceTableRowsOptions,
   ): Promise<boolean>;
   getTables(): TableSummary[];
+  /** Invalidate layout cache (for a specific table or full relayout) and repaint. */
+  invalidateLayout(blockId?: string): Promise<void>;
   getDocId(): string | null;
   getShareLink(): string | null;
   /** Render ephemeral highlight decorations for external comments/annotations.

package/dist-lib/changeAggregator-DEuynIcV.js

@@ -1,376 +0,0 @@
-import { t as T } from "./qrcode-B-JKix2T.js";
-function y(c) {
-  if (c.length === 0) return [];
-  const e = /* @__PURE__ */ new Map();
-  for (const s of c) {
-    let t = e.get(s.blockId);
-    t || (t = [], e.set(s.blockId, t)), t.push({ ...s });
-  }
-  const i = [];
-  for (const [s, t] of e) {
-    if (t.length === 0) continue;
-    const r = [];
-    for (const n of t) {
-      if (r.length === 0) {
-        r.push(n);
-        continue;
-      }
-      const o = r[r.length - 1];
-      if (o.action === "delete" && n.action === "insert" && o.offset === n.offset) {
-        o.action = "replace", o.toText = n.toText;
-        continue;
-      }
-      if (o.action === "replace" && n.action === "insert" && n.offset === o.offset + o.toText.length) {
-        o.toText += n.toText;
-        continue;
-      }
-      if (o.action === "insert" && n.action === "insert" && n.offset === o.offset + o.toText.length) {
-        o.toText += n.toText;
-        continue;
-      }
-      if (o.action === "delete" && n.action === "delete" && n.offset === o.offset) {
-        o.fromText += n.fromText;
-        continue;
-      }
-      if (o.action === "delete" && n.action === "delete" && n.offset + n.fromText.length === o.offset) {
-        o.offset = n.offset, o.fromText = n.fromText + o.fromText;
-        continue;
-      }
-      r.push(n);
-    }
-    for (const n of r)
-      n.action === "replace" && n.fromText === n.toText || n.action === "insert" && n.toText.length === 0 || n.action === "delete" && n.fromText.length === 0 || i.push({
-        action: n.action,
-        blockId: s,
-        offset: n.offset,
-        fromText: n.fromText,
-        toText: n.toText
-      });
-  }
-  return i;
-}
-function v(c, e) {
-  const i = new Map(Object.entries(e)), s = [];
-  for (const t of c)
-    if (t.type === "deleteRange") {
-      const r = i.get(t.blockId) ?? "", n = Math.max(0, Math.min(t.start, r.length)), o = Math.max(n, Math.min(t.end, r.length)), l = r.slice(n, o);
-      l.length > 0 && s.push({
-        action: "delete",
-        blockId: t.blockId,
-        offset: n,
-        fromText: l,
-        toText: ""
-      }), i.set(t.blockId, r.slice(0, n) + r.slice(o));
-    } else if (t.type === "insertText") {
-      const r = i.get(t.at.blockId) ?? "", n = Math.max(0, Math.min(t.at.offset, r.length));
-      t.text.length > 0 && s.push({
-        action: "insert",
-        blockId: t.at.blockId,
-        offset: n,
-        fromText: "",
-        toText: t.text
-      }), i.set(
-        t.at.blockId,
-        r.slice(0, n) + t.text + r.slice(n)
-      );
-    } else if (t.type === "insertRuns") {
-      const r = T(t.runs), n = i.get(t.at.blockId) ?? "", o = Math.max(0, Math.min(t.at.offset, n.length));
-      r.length > 0 && s.push({
-        action: "insert",
-        blockId: t.at.blockId,
-        offset: o,
-        fromText: "",
-        toText: r
-      }), i.set(
-        t.at.blockId,
-        n.slice(0, o) + r + n.slice(o)
-      );
-    } else if (t.type === "setRuns") {
-      const r = i.get(t.blockId) ?? "", n = T(t.runs);
-      r !== n && s.push({
-        action: "replace",
-        blockId: t.blockId,
-        offset: 0,
-        fromText: r,
-        toText: n
-      }), i.set(t.blockId, n);
-    } else if (t.type === "splitParagraph") {
-      const r = i.get(t.at.blockId) ?? "", n = Math.max(0, Math.min(t.at.offset, r.length)), o = r.slice(0, n), l = r.slice(n);
-      i.set(t.at.blockId, o), i.set(t.newBlockId, l);
-    } else if (t.type === "removeBlock") {
-      const r = i.get(t.blockId) ?? "";
-      r.length > 0 && s.push({
-        action: "delete",
-        blockId: t.blockId,
-        offset: 0,
-        fromText: r,
-        toText: ""
-      }), i.set(t.blockId, "");
-    }
-  return y(s);
-}
-function b(c, e, i, s = 0) {
-  if (c === e) return [];
-  let t = 0;
-  const r = Math.min(c.length, e.length);
-  for (; t < r && c[t] === e[t]; )
-    t++;
-  let n = 0;
-  const o = Math.min(c.length - t, e.length - t);
-  for (; n < o && c[c.length - 1 - n] === e[e.length - 1 - n]; )
-    n++;
-  const l = c.slice(t, c.length - n), f = e.slice(t, e.length - n), d = s + t;
-  return l.length > 0 && f.length === 0 ? [{ action: "delete", blockId: i, offset: d, fromText: l, toText: "" }] : l.length === 0 && f.length > 0 ? [{ action: "insert", blockId: i, offset: d, fromText: "", toText: f }] : l.length > 0 && f.length > 0 ? [{ action: "replace", blockId: i, offset: d, fromText: l, toText: f }] : [];
-}
-class S {
-  detail;
-  includeSelection;
-  handlers = /* @__PURE__ */ new Map();
-  anyHandlers = /* @__PURE__ */ new Set();
-  sink;
-  redact;
-  onError;
-  disposed = !1;
-  constructor(e = {}) {
-    this.detail = e.detail ?? "metadata", this.includeSelection = e.includeSelection ?? !1, this.sink = e.sink, this.redact = e.redact, this.onError = e.onError ?? ((i) => console.error("[kindy-editor:event]", i));
-  }
-  on(e, i, s = {}) {
-    if (this.disposed || s.signal?.aborted) return () => {
-    };
-    let t = this.handlers.get(e);
-    t || this.handlers.set(e, t = /* @__PURE__ */ new Set()), t.add(i);
-    const r = () => {
-      t?.delete(i), t?.size === 0 && this.handlers.delete(e);
-    };
-    return s.signal?.addEventListener("abort", r, { once: !0 }), r;
-  }
-  onAny(e, i = {}) {
-    if (this.disposed || i.signal?.aborted) return () => {
-    };
-    this.anyHandlers.add(e);
-    const s = () => {
-      this.anyHandlers.delete(e);
-    };
-    return i.signal?.addEventListener("abort", s, { once: !0 }), s;
-  }
-  off(e, i) {
-    this.handlers.get(e)?.delete(i);
-  }
-  /** Called by the editor runtime after state is already consistent. Public only
-   * for custom bridges; normal integrations subscribe with on/onAny. */
-  dispatch(e) {
-    if (this.disposed) return;
-    const i = this.redact ? this.redact(e) : e;
-    if (i) {
-      for (const s of this.handlers.get(i.type) ?? []) this.safeCall(s, i);
-      for (const s of this.anyHandlers) this.safeCall(s, i);
-      if (this.sink)
-        try {
-          Promise.resolve(this.sink(i)).catch((s) => this.reportError(s, i));
-        } catch (s) {
-          this.reportError(s, i);
-        }
-    }
-  }
-  destroy() {
-    this.disposed = !0, this.handlers.clear(), this.anyHandlers.clear();
-  }
-  safeCall(e, i) {
-    try {
-      e(i);
-    } catch (s) {
-      this.reportError(s, i);
-    }
-  }
-  reportError(e, i) {
-    try {
-      this.onError(e, i);
-    } catch (s) {
-      console.error("[kindy-editor:event:onError]", s);
-    }
-  }
-}
-function w(c) {
-  const e = c.fetch ?? globalThis.fetch;
-  if (!e) throw new Error("createHttpEventSink requires fetch");
-  const i = Math.max(1, c.batchSize ?? 25), s = Math.max(10, c.flushIntervalMs ?? 1e3), t = Math.max(1, c.maxAttempts ?? 3);
-  let r = [], n = null, o = Promise.resolve(), l = !1;
-  const f = () => {
-    n && clearTimeout(n), n = null;
-  }, d = async () => {
-    const a = typeof c.headers == "function" ? await c.headers() : c.headers, h = new Headers(a);
-    return h.has("content-type") || h.set("content-type", "application/json"), h;
-  }, p = async (a) => {
-    let h;
-    for (let g = 1; g <= t; g++)
-      try {
-        const m = await e(c.endpoint, {
-          method: "POST",
-          headers: await d(),
-          body: JSON.stringify({ schemaVersion: a[0]?.schemaVersion ?? "1.0", events: a })
-        });
-        if (!m.ok) throw new Error(`event sink returned HTTP ${m.status}`);
-        return;
-      } catch (m) {
-        h = m, g < t && await new Promise((I) => setTimeout(I, 100 * 2 ** (g - 1)));
-      }
-    c.onDeliveryError?.(h, a);
-  }, u = async () => {
-    if (f(), r.length === 0) return o;
-    const a = r;
-    r = [], o = o.then(() => p(a)), await o;
-  }, x = ((a) => {
-    l || c.eventTypes && !c.eventTypes.includes(a.type) || (r.push(a), r.length >= i ? u() : n || (n = setTimeout(() => void u(), s)));
-  });
-  return x.flush = u, x.destroy = async () => {
-    l = !0, await u();
-  }, x;
-}
-class k {
-  idleMs;
-  selectionJumpThreshold;
-  constructor(e = {}) {
-    this.idleMs = Math.max(100, e.idleMs ?? 1e3), this.selectionJumpThreshold = Math.max(1, e.selectionJumpThreshold ?? 2);
-  }
-  /**
-   * Evaluates if a selection movement constitutes a boundary (e.g. jumped to another block
-   * or moved far away from the active typing position).
-   */
-  shouldCommitOnSelectionChange(e, i, s, t) {
-    return !e || s === null || t === null ? !1 : e !== s || i !== null && Math.abs(t - i) > this.selectionJumpThreshold;
-  }
-}
-class B {
-  policy;
-  emit;
-  getVersion;
-  idGenerator;
-  currentSession = null;
-  idleTimer = null;
-  disposed = !1;
-  nextGroupId = 1;
-  constructor(e) {
-    this.policy = e.policy instanceof k ? e.policy : new k({
-      ...typeof e.idleMs == "number" ? { idleMs: e.idleMs } : {},
-      ...e.policy
-    }), this.emit = e.emit, this.getVersion = e.getVersion ?? (() => 0), this.idGenerator = e.idGenerator ?? (() => `chg-${Date.now()}-${this.nextGroupId++}`);
-  }
-  /**
-   * Tracks a raw applied change. Starts a new session or extends the active session.
-   */
-  trackChange(e) {
-    if (this.disposed) return;
-    this.currentSession && this.currentSession.origin !== e.origin && this.flush("origin-change");
-    const i = e.version ?? this.getVersion();
-    if (!this.currentSession) {
-      const t = this.getVersion(), r = e.version ?? t;
-      this.currentSession = {
-        changeGroupId: this.idGenerator(),
-        origin: e.origin,
-        ...e.intent !== void 0 ? { intent: e.intent } : {},
-        beforeVersion: t,
-        afterVersion: r,
-        lastTransactionId: e.transactionId,
-        initialBlockTexts: /* @__PURE__ */ new Map(),
-        currentBlockTexts: /* @__PURE__ */ new Map(),
-        diffs: [],
-        activeBlockId: e.selectionAfter?.focus.blockId ?? null,
-        lastOffset: e.selectionAfter?.focus.offset ?? null
-      };
-    }
-    const s = this.currentSession;
-    if (s) {
-      s.afterVersion = i, s.lastTransactionId = e.transactionId, e.intent !== void 0 && s.intent === void 0 && (s.intent = e.intent);
-      for (const t of e.affectedBlockIds)
-        if (!s.initialBlockTexts.has(t)) {
-          const r = e.blockTextBefore?.[t] ?? "";
-          s.initialBlockTexts.set(t, r), s.currentBlockTexts.set(t, r);
-        }
-      if (this.applyOpsToCurrentTexts(s.currentBlockTexts, e.ops), e.textDiffs && e.textDiffs.length > 0 && s.diffs.push(...e.textDiffs), e.selectionAfter && (s.activeBlockId = e.selectionAfter.focus.blockId, s.lastOffset = e.selectionAfter.focus.offset), e.origin === "paste" || e.origin === "command") {
-        this.flush("explicit");
-        return;
-      }
-      this.restartIdleTimer();
-    }
-  }
-  /**
-   * Signals a semantic boundary from the editor environment (blur, save, selection change, etc.).
-   */
-  notifyBoundary(e, i) {
-    if (!(this.disposed || !this.currentSession)) {
-      if (e === "selection-jump") {
-        this.policy.shouldCommitOnSelectionChange(
-          this.currentSession.activeBlockId,
-          this.currentSession.lastOffset,
-          i?.newBlockId ?? null,
-          i?.newOffset ?? null
-        ) && this.flush("selection-jump");
-        return;
-      }
-      this.flush(e);
-    }
-  }
-  /**
-   * Flushes and commits the active session if one exists and contains non-trivial changes.
-   */
-  flush(e) {
-    this.clearIdleTimer();
-    const i = this.currentSession;
-    if (!i) return;
-    this.currentSession = null;
-    const s = [];
-    for (const [t, r] of i.initialBlockTexts) {
-      const n = i.currentBlockTexts.get(t) ?? r;
-      if (r !== n) {
-        const o = b(r, n, t);
-        s.push(...o);
-      }
-    }
-    s.length !== 0 && this.emit({
-      transactionId: i.lastTransactionId,
-      changeGroupId: i.changeGroupId,
-      beforeVersion: i.beforeVersion,
-      afterVersion: i.afterVersion,
-      origin: i.origin,
-      textDiffs: s,
-      ...i.intent ? { intent: i.intent } : {},
-      affectedBlockIds: Array.from(i.initialBlockTexts.keys())
-    });
-  }
-  destroy() {
-    this.disposed || (this.flush("destroy"), this.disposed = !0);
-  }
-  applyOpsToCurrentTexts(e, i) {
-    for (const s of i)
-      if (s.type === "deleteRange") {
-        const t = e.get(s.blockId) ?? "", r = Math.max(0, Math.min(s.start, t.length)), n = Math.max(r, Math.min(s.end, t.length));
-        e.set(s.blockId, t.slice(0, r) + t.slice(n));
-      } else if (s.type === "insertText") {
-        const t = e.get(s.at.blockId) ?? "", r = Math.max(0, Math.min(s.at.offset, t.length));
-        e.set(s.at.blockId, t.slice(0, r) + s.text + t.slice(r));
-      } else if (s.type === "insertRuns") {
-        const t = T(s.runs), r = e.get(s.at.blockId) ?? "", n = Math.max(0, Math.min(s.at.offset, r.length));
-        e.set(s.at.blockId, r.slice(0, n) + t + r.slice(n));
-      } else if (s.type === "setRuns")
-        e.set(s.blockId, T(s.runs));
-      else if (s.type === "splitParagraph") {
-        const t = e.get(s.at.blockId) ?? "", r = Math.max(0, Math.min(s.at.offset, t.length));
-        e.set(s.at.blockId, t.slice(0, r)), e.set(s.newBlockId, t.slice(r));
-      } else s.type === "removeBlock" && e.set(s.blockId, "");
-  }
-  restartIdleTimer() {
-    this.clearIdleTimer(), this.idleTimer = setTimeout(() => {
-      this.flush("idle");
-    }, this.policy.idleMs);
-  }
-  clearIdleTimer() {
-    this.idleTimer && (clearTimeout(this.idleTimer), this.idleTimer = null);
-  }
-}
-export {
-  B as C,
-  S as E,
-  k as a,
-  v as b,
-  w as c
-};