@extable/core 0.3.1 → 0.3.2

package/dist/index.js

@@ -1259,12 +1259,12 @@ const oi = {
   aliases: {
     Fall: "Autumn"
   }
-}, Ri = {
+}, Mi = {
   id: "seasons-ja",
   mode: "cycle",
   langs: ["ja"],
   items: ["春", "夏", "秋", "冬"]
-}, Mi = {
+}, Ri = {
   id: "solfege-ja",
   mode: "cycle",
   langs: ["ja"],
@@ -2020,8 +2020,8 @@ const oi = {
   Si,
   xi,
   bi,
-  Ri,
   Mi,
+  Ri,
   ki,
   Ii,
   Ei,
@@ -2393,10 +2393,10 @@ const ve = 1e-9, sn = 100, on = (r) => ({
   ...Object.keys(Nt),
   ...Object.keys(xe),
   ...Object.keys(xn)
-]), Rn = (r) => bn.has(r), Mn = (r) => /[壱弐参肆伍陸柒捌玖拾萬佰仟]/.test(r) ? "traditional" : "modern", be = (r) => {
+]), Mn = (r) => bn.has(r), Rn = (r) => /[壱弐参肆伍陸柒捌玖拾萬佰仟]/.test(r) ? "traditional" : "modern", be = (r) => {
   if (!r)
     return null;
-  const t = Mn(r);
+  const t = Rn(r);
   if (r.includes("万") || r.includes("萬")) {
     const o = /^([一二三四五六七八九壱弐参肆伍陸柒捌玖])?(万|萬)$/.exec(r);
     if (!o)
@@ -2427,7 +2427,7 @@ const ve = 1e-9, sn = 100, on = (r) => ({
   const t = [];
   let e = "", i = 0, n = 0;
   for (const c of r)
-    Rn(c) ? (e || (i = n), e += c) : e && (t.push({ start: i, end: n, text: e }), e = ""), n += c.length;
+    Mn(c) ? (e || (i = n), e += c) : e && (t.push({ start: i, end: n, text: e }), e = ""), n += c.length;
   e && t.push({ start: i, end: n, text: e });
   const s = t.map((c) => ({ run: c, parsed: be(c.text) })).filter((c) => c.parsed !== null);
   if (s.length !== 1)
@@ -2439,7 +2439,7 @@ const ve = 1e-9, sn = 100, on = (r) => ({
     suffix: a,
     style: o.parsed.style
   };
-}, Re = (r, t) => {
+}, Me = (r, t) => {
   if (!Number.isFinite(r) || r <= 0 || r > 1e4)
     return null;
   const e = t === "traditional" ? ["", "壱", "弐", "参", "肆", "伍", "陸", "柒", "捌", "玖"] : ["", "一", "二", "三", "四", "五", "六", "七", "八", "九"], i = t === "traditional" ? "拾" : "十", n = t === "traditional" ? "萬" : "万";
@@ -2457,7 +2457,7 @@ const ve = 1e-9, sn = 100, on = (r) => ({
   return {
     next() {
       i += 1;
-      const n = r + t * i, s = Re(n, e);
+      const n = r + t * i, s = Me(n, e);
       return s ? { value: s, done: !1 } : { value: void 0, done: !0 };
     }
   };
@@ -2466,7 +2466,7 @@ const ve = 1e-9, sn = 100, on = (r) => ({
   return {
     next() {
       i += 1;
-      const n = t + e * i, s = Re(n, r.style);
+      const n = t + e * i, s = Me(n, r.style);
       return s ? { value: `${r.prefix}${s}${r.suffix}`, done: !1 } : { value: void 0, done: !0 };
     }
   };
@@ -2671,7 +2671,7 @@ function Ln(r) {
   }
   return null;
 }
-function Me(r, t) {
+function Re(r, t) {
   if (t.length !== 1) return null;
   const e = Dn(t[0]);
   if (e.kind !== "cells") return null;
@@ -2766,12 +2766,12 @@ function Ee(r, t = ke) {
 function Te(r, t, e) {
   return r >= e.left && r <= e.right && t >= e.top && t <= e.bottom;
 }
-function Rt(r, t, e, i, n) {
+function Mt(r, t, e, i, n) {
   if (n === "readonly") return !1;
-  const s = Me(r, t);
+  const s = Re(r, t);
   return !(!s || !e || e === "__all__" || i === null || i === "__all__" || i === null || i !== s.colKey || r.isReadonly(e, i));
 }
-function Mt(r) {
+function Rt(r) {
   const t = r.style, e = t?.decorations;
   return {
     backgroundColor: t?.backgroundColor,
@@ -2797,7 +2797,7 @@ function J(r, t) {
   } : r;
 }
 function Fn(r, t, e) {
-  const i = Mt(e), n = r.resolveConditionalStyle(t, e).delta ?? {}, s = r.getCellStyle(t, e.key) ?? {}, o = J(J(i, n), s);
+  const i = Rt(e), n = r.resolveConditionalStyle(t, e).delta ?? {}, s = r.getCellStyle(t, e.key) ?? {}, o = J(J(i, n), s);
   return { columnStyle: i, cellStyle: s, resolved: o };
 }
 function ae(r) {
@@ -2959,7 +2959,7 @@ class bt {
     if (this.frame += 1, !this.tableEl) return;
     const e = this.tableEl.parentElement, i = e?.scrollTop ?? 0, n = e?.scrollLeft ?? 0, s = this.dataModel.getSchema(), o = this.dataModel.getView(), l = this.dataModel.listRows();
     this.tableEl.innerHTML = "";
-    const a = G(s, o), c = s.columns.map((p) => Mt(p)), h = c.map((p) => ae(p)), d = this.rowHeaderWidth + a.reduce((p, v) => p + (v ?? 0), 0), u = document.createElement("colgroup"), g = document.createElement("col");
+    const a = G(s, o), c = s.columns.map((p) => Rt(p)), h = c.map((p) => ae(p)), d = this.rowHeaderWidth + a.reduce((p, v) => p + (v ?? 0), 0), u = document.createElement("colgroup"), g = document.createElement("col");
     g.style.width = `${this.rowHeaderWidth}px`, u.appendChild(g);
     for (const p of a) {
       const v = document.createElement("col");
@@ -3081,7 +3081,7 @@ class bt {
       y && (g.style.width = `${y}px`);
       const w = l.wrapText?.[u.key] ?? u.wrapText;
       g.classList.add(w ? "cell-wrap" : "cell-nowrap");
-      const C = this.dataModel.getRawCell(t.id, u.key), S = this.dataModel.resolveCellValue(t.id, u), b = S.textOverride ?? (p.forceErrorText ? "#ERROR" : void 0), x = b ? { text: b } : this.formatValue(S.value, u), D = this.dataModel.getCellInteraction(t.id, u.key), F = u.type === "tags" && !b ? Bt(S.value) : null, M = u.type === "button" || u.type === "link", H = M ? u.type === "button" ? ut(S.value) : ft(S.value) : null, R = M ? u.type === "button" ? rt(S.value) : lt(S.value) : "";
+      const C = this.dataModel.getRawCell(t.id, u.key), S = this.dataModel.resolveCellValue(t.id, u), b = S.textOverride ?? (p.forceErrorText ? "#ERROR" : void 0), x = b ? { text: b } : this.formatValue(S.value, u), D = this.dataModel.getCellInteraction(t.id, u.key), F = u.type === "tags" && !b ? Bt(S.value) : null, R = u.type === "button" || u.type === "link", H = R ? u.type === "button" ? ut(S.value) : ft(S.value) : null, M = R ? u.type === "button" ? rt(S.value) : lt(S.value) : "";
       if (F && F.length) {
         const E = document.createElement("div");
         E.className = "extable-tag-list", F.forEach((B, T) => {
@@ -3092,11 +3092,11 @@ class bt {
           const N = document.createElement("button");
           N.type = "button", N.className = "extable-tag-remove", N.dataset.extableTagRemove = "1", N.dataset.extableTagIndex = String(T), N.textContent = "×", (D.readonly || D.disabled) && (N.disabled = !0), A.appendChild(k), A.appendChild(N), E.appendChild(A);
         }), g.replaceChildren(E);
-      } else if (M && !b && H && R) {
+      } else if (R && !b && H && M) {
         const E = u.type === "button" ? document.createElement("button") : document.createElement("span");
-        E instanceof HTMLButtonElement && (E.type = "button"), E.className = u.type === "button" ? "extable-action-button" : "extable-action-link", D.disabled && E.classList.add("extable-action-disabled"), u.type === "link" && f && (E.style.color = "inherit"), E.dataset.extableAction = u.type, E.textContent = R, g.replaceChildren(E);
+        E instanceof HTMLButtonElement && (E.type = "button"), E.className = u.type === "button" ? "extable-action-button" : "extable-action-link", D.disabled && E.classList.add("extable-action-disabled"), u.type === "link" && f && (E.style.color = "inherit"), E.dataset.extableAction = u.type, E.textContent = M, g.replaceChildren(E);
       } else
-        g.textContent = R || x.text, x.color && (g.style.color = x.color);
+        g.textContent = M || x.text, x.color && (g.style.color = x.color);
       const K = this.dataModel.getCellMarker(t.id, u.key);
       K ? (g.classList.toggle("extable-diag-warning", K.level === "warning"), g.classList.toggle("extable-diag-error", K.level === "error"), g.dataset.extableDiagMessage = K.message) : (g.classList.remove("extable-diag-warning", "extable-diag-error"), g.removeAttribute("data-extable-diag-message"));
       const L = u.style?.align ?? (u.type === "number" ? "right" : "left");
@@ -3272,7 +3272,7 @@ const U = class U {
       if (!e) return;
       e.font = "14px sans-serif";
       let i = e.font;
-      const n = this.activeRowId === "__all__" && this.activeColKey === "__all__", s = this.dataModel.getSchema(), o = this.dataModel.getView(), l = this.dataModel.listRows(), a = G(s, o), c = s.columns.map((T) => Mt(T)), h = /* @__PURE__ */ new Map(), d = s.columns.some((T) => o.wrapText?.[T.key] ?? T.wrapText), u = d ? this.getRowHeightCacheKey(s, o, a) : null;
+      const n = this.activeRowId === "__all__" && this.activeColKey === "__all__", s = this.dataModel.getSchema(), o = this.dataModel.getView(), l = this.dataModel.listRows(), a = G(s, o), c = s.columns.map((T) => Rt(T)), h = /* @__PURE__ */ new Map(), d = s.columns.some((T) => o.wrapText?.[T.key] ?? T.wrapText), u = d ? this.getRowHeightCacheKey(s, o, a) : null;
       u !== this.rowHeightCacheKey && (this.rowHeightCacheKey = u, this.rowHeightMeasuredVersion.clear(), this.rowHeightMeasureTask = null), d || this.cancelRowHeightMeasurement(), this.ensureHeightIndex(l, d ? u : null, d);
       const g = this.heightIndex;
       if (!g) return;
@@ -3291,7 +3291,7 @@ const U = class U {
       };
       let x = g.fenwick.total();
       const D = this.canvas?.height ?? this.root.clientHeight, F = Math.max(0, D - this.headerHeight);
-      let M = Math.max(0, x - F), H = Math.max(0, Math.min(C, M)), { accum: R, visibleStart: K, visibleEnd: L } = b(H);
+      let R = Math.max(0, x - F), H = Math.max(0, Math.min(C, R)), { accum: M, visibleStart: K, visibleEnd: L } = b(H);
       if (d && u) {
         const T = {};
         for (let A = K; A < L; A += 1) {
@@ -3302,12 +3302,12 @@ const U = class U {
           const V = this.measureRowHeight(e, k, s, a);
           T[k.id] = V, this.rowHeightMeasuredVersion.set(k.id, N);
         }
-        this.applyRowHeightUpdates(T), x = g.fenwick.total(), this.dataModel.setRowHeightsBulk(T), M = Math.max(0, x - F), H = Math.max(0, Math.min(C, M)), { accum: R, visibleStart: K, visibleEnd: L } = b(H), (this.rowHeightMeasureTask || Object.keys(T).length > 0) && this.scheduleRowHeightMeasurement();
+        this.applyRowHeightUpdates(T), x = g.fenwick.total(), this.dataModel.setRowHeightsBulk(T), R = Math.max(0, x - F), H = Math.max(0, Math.min(C, R)), { accum: M, visibleStart: K, visibleEnd: L } = b(H), (this.rowHeightMeasureTask || Object.keys(T).length > 0) && this.scheduleRowHeightMeasurement();
       }
-      this.spacer && (this.spacer.style.height = `${M}px`, this.spacer.style.width = `${m}px`);
+      this.spacer && (this.spacer.style.height = `${R}px`, this.spacer.style.width = `${m}px`);
       const _ = this.rowHeaderWidth - S;
       e.clearRect(0, 0, this.canvas.width, this.canvas.height), e.fillStyle = "#e5e7eb", e.fillRect(0, 0, this.rowHeaderWidth, this.canvas.height);
-      let E = this.headerHeight + R - H;
+      let E = this.headerHeight + M - H;
       for (let T = K; T < L; T += 1) {
         const A = l[T], k = g.heights[T] ?? this.rowHeight;
         e.strokeStyle = "#d0d7de", e.fillStyle = "#e5e7eb", e.fillRect(0, E, this.rowHeaderWidth, k), e.strokeRect(0, E, this.rowHeaderWidth, k);
@@ -3330,7 +3330,7 @@ const U = class U {
           const et = this.dataModel.resolveConditionalStyle(A.id, I), ct = this.dataModel.getCellStyle(A.id, I.key), jt = c[$] ?? {}, Wt = et.delta ? J(jt, et.delta) : jt, z = ct ? J(Wt, ct) : Wt, Ke = at ? "#f3f4f6" : z.backgroundColor ?? "#ffffff";
           e.fillStyle = Ke, e.fillRect(V, E, P, k), e.strokeRect(V, E, P, k);
           const it = this.dataModel.resolveCellValue(A.id, I), qt = it.textOverride ?? (et.forceErrorText ? "#ERROR" : void 0), Et = qt ? { text: "#ERROR" } : this.formatValue(it.value, I), Tt = I.type === "button" || I.type === "link", Ut = Tt ? I.type === "button" ? ut(it.value) : ft(it.value) : null, Xt = Tt ? Ut?.label ?? (I.type === "button" ? rt(it.value) : lt(it.value)) : "", gt = !!(Tt && Ut && Xt && !qt), zt = Xt || Et.text, Gt = I.style?.align ?? (I.type === "number" ? "right" : "left");
-          if (this.activeRowId === A.id && this.activeColKey !== null && this.activeColKey === I.key && (e.strokeStyle = "#3b82f6", e.lineWidth = 2, e.strokeRect(V + 1, E + 1, P - 2, k - 2), e.lineWidth = 1, Rt(
+          if (this.activeRowId === A.id && this.activeColKey !== null && this.activeColKey === I.key && (e.strokeStyle = "#3b82f6", e.lineWidth = 2, e.strokeRect(V + 1, E + 1, P - 2, k - 2), e.lineWidth = 1, Mt(
             this.dataModel,
             this.selection,
             this.activeRowId,
@@ -3514,7 +3514,7 @@ const U = class U {
   }
   hitTest(t) {
     if (!this.root || !this.canvas) return null;
-    const e = this.canvas.getBoundingClientRect(), i = t.clientX - e.left, n = t.clientY - e.top, s = i + this.root.scrollLeft, o = this.dataModel.getSchema(), l = this.dataModel.getView(), a = this.dataModel.listRows(), c = this.headerHeight, h = G(o, l), d = o.columns.some((R) => l.wrapText?.[R.key] ?? R.wrapText), u = d ? this.getRowHeightCacheKey(o, l, h) : null;
+    const e = this.canvas.getBoundingClientRect(), i = t.clientX - e.left, n = t.clientY - e.top, s = i + this.root.scrollLeft, o = this.dataModel.getSchema(), l = this.dataModel.getView(), a = this.dataModel.listRows(), c = this.headerHeight, h = G(o, l), d = o.columns.some((M) => l.wrapText?.[M.key] ?? M.wrapText), u = d ? this.getRowHeightCacheKey(o, l, h) : null;
     this.ensureHeightIndex(a, u, d);
     const g = this.heightIndex;
     if (!g) return null;
@@ -3526,18 +3526,18 @@ const U = class U {
         rect: new DOMRect(e.left, e.top, this.rowHeaderWidth, c)
       };
     if (n < c) {
-      let R = this.rowHeaderWidth, K = -1;
+      let M = this.rowHeaderWidth, K = -1;
       for (let L = 0; L < h.length; L += 1) {
         const _ = h[L] ?? 100;
-        if (s >= R && s <= R + _) {
+        if (s >= M && s <= M + _) {
           K = L;
           break;
         }
-        R += _;
+        M += _;
       }
       if (K >= 0) {
         const L = o.columns[K], _ = new DOMRect(
-          e.left + R - this.root.scrollLeft,
+          e.left + M - this.root.scrollLeft,
           e.top,
           h[K] ?? 100,
           c
@@ -3547,9 +3547,9 @@ const U = class U {
       return null;
     }
     if (i < this.rowHeaderWidth) {
-      const R = n - c + y, K = Math.max(
+      const M = n - c + y, K = Math.max(
         0,
-        Math.min(a.length - 1, g.fenwick.lowerBound(R + 1))
+        Math.min(a.length - 1, g.fenwick.lowerBound(M + 1))
       ), L = g.fenwick.sum(K);
       if (K < 0 || K >= a.length) return null;
       const _ = a[K], E = e.top + c + L - y, B = new DOMRect(
@@ -3563,18 +3563,18 @@ const U = class U {
     const w = n - c + y, C = Math.max(0, Math.min(a.length - 1, g.fenwick.lowerBound(w + 1))), S = g.fenwick.sum(C);
     if (C < 0 || C >= a.length) return null;
     let b = this.rowHeaderWidth, x = -1;
-    for (let R = 0; R < h.length; R += 1) {
-      const K = h[R] ?? 100;
+    for (let M = 0; M < h.length; M += 1) {
+      const K = h[M] ?? 100;
       if (s >= b && s <= b + K) {
-        x = R;
+        x = M;
         break;
       }
       b += K;
     }
     if (x === -1) return null;
-    const D = a[C], F = o.columns[x], M = S, H = new DOMRect(
+    const D = a[C], F = o.columns[x], R = S, H = new DOMRect(
       e.left + b - this.root.scrollLeft,
-      e.top + c + M - this.root.scrollTop,
+      e.top + c + R - this.root.scrollTop,
       h[x] ?? 100,
       g.heights[C] ?? this.rowHeight
     );
@@ -3592,7 +3592,7 @@ const U = class U {
     if (!a || !a.label) return null;
     const c = this.canvas.getContext("2d");
     if (!c) return null;
-    const h = Mt(n), d = o.delta ? J(h, o.delta) : h, u = this.dataModel.getCellStyle(e.rowId, n.key), g = u ? J(d, u) : d, m = g.bold ? "600 " : "", p = g.italic ? "italic " : "";
+    const h = Rt(n), d = o.delta ? J(h, o.delta) : h, u = this.dataModel.getCellStyle(e.rowId, n.key), g = u ? J(d, u) : d, m = g.bold ? "600 " : "", p = g.italic ? "italic " : "";
     c.save(), c.font = `${p}${m}14px sans-serif`.trim() || "14px sans-serif", c.textBaseline = "alphabetic";
     const f = this.dataModel.getView().wrapText?.[n.key] ?? n.wrapText ?? !1, y = n.style?.align ?? "left", w = e.rect.left + 8, C = e.rect.top + 2, S = Math.max(0, e.rect.width - 12), b = Math.max(0, e.rect.height - 8), x = this.measureTextBounds(
       c,
@@ -3605,8 +3605,8 @@ const U = class U {
       y
     );
     if (c.restore(), !x) return null;
-    const D = n.type === "button" ? 6 : 2, F = Math.max(e.rect.left, x.x - D), M = Math.max(e.rect.top, x.y - D), H = Math.min(e.rect.right, x.x + x.width + D), R = Math.min(e.rect.bottom, x.y + x.height + D);
-    return t.clientX >= F && t.clientX <= H && t.clientY >= M && t.clientY <= R ? { rowId: e.rowId, colKey: String(e.colKey), kind: n.type } : null;
+    const D = n.type === "button" ? 6 : 2, F = Math.max(e.rect.left, x.x - D), R = Math.max(e.rect.top, x.y - D), H = Math.min(e.rect.right, x.x + x.width + D), M = Math.min(e.rect.bottom, x.y + x.height + D);
+    return t.clientX >= F && t.clientX <= H && t.clientY >= R && t.clientY <= M ? { rowId: e.rowId, colKey: String(e.colKey), kind: n.type } : null;
   }
   isPointInSelection(t, e) {
     if (!this.selection.length) return !1;
@@ -3668,18 +3668,18 @@ const U = class U {
         const S = this.dataModel.getSchema(), b = this.dataModel.getView(), x = G(S, b);
         let D = this.rowHeaderWidth, F = -1;
         for (let H = 0; H < x.length; H += 1) {
-          const R = x[H] ?? 100;
-          if (m >= D && m <= D + R) {
+          const M = x[H] ?? 100;
+          if (m >= D && m <= D + M) {
             F = H;
             break;
           }
-          D += R;
+          D += M;
         }
-        const M = F >= 0 ? S.columns[F] : null;
-        if (M) {
-          y = M.key;
-          const H = x[F] ?? 100, R = 18, L = D + H - R - 4, _ = Math.floor((this.headerHeight - R) / 2);
-          w = m >= L && m <= L + R && p >= _ && p <= _ + R;
+        const R = F >= 0 ? S.columns[F] : null;
+        if (R) {
+          y = R.key;
+          const H = x[F] ?? 100, M = 18, L = D + H - M - 4, _ = Math.floor((this.headerHeight - M) / 2);
+          w = m >= L && m <= L + M && p >= _ && p <= _ + M;
         }
       }
       const C = String(v ?? "") !== String(y ?? "") || !!f != !!w;
@@ -3725,7 +3725,7 @@ const U = class U {
       this.canvas.style.cursor = "cell";
       return;
     }
-    if (this.activeRowId && this.activeColKey !== null && this.activeRowId !== "__all__" && this.activeColKey !== "__all__" && Rt(
+    if (this.activeRowId && this.activeColKey !== null && this.activeRowId !== "__all__" && this.activeColKey !== "__all__" && Mt(
       this.dataModel,
       this.selection,
       this.activeRowId,
@@ -3880,18 +3880,18 @@ class On {
       const y = f.target;
       if (y?.closest('button[data-extable-fs-open="1"]') || y?.closest(".extable-filter-sort-trigger") || this.inputEl && f.target && this.inputEl.contains(f.target)) return;
       if (this.inputEl && this.activeCell && this.activeCell.colKey !== null) {
-        const { rowId: M, colKey: H } = this.activeCell, R = this.readActiveValue();
-        this.commitEdit(M, H, R), this.onMove(M), this.teardownInput(!1);
+        const { rowId: R, colKey: H } = this.activeCell, M = this.readActiveValue();
+        this.commitEdit(R, H, M), this.onMove(R), this.teardownInput(!1);
       }
       if (this.fillDragging) return;
       const w = this.hitTest(f);
       if (!w || w.rowId === "__all__" && w.colKey === "__all__" || w.colKey === "__all__") return;
-      const C = Me(this.dataModel, this.selectionRanges);
+      const C = Re(this.dataModel, this.selectionRanges);
       if (C && this.activeCell) {
-        const M = this.dataModel.getSchema(), H = this.dataModel.listRows(), R = C.endRowIndex, K = C.colIndex, L = H[R], _ = M.columns[K];
+        const R = this.dataModel.getSchema(), H = this.dataModel.listRows(), M = C.endRowIndex, K = C.colIndex, L = H[M], _ = R.columns[K];
         if (L && _) {
           const E = this.findHtmlCellElement(L.id, _.key)?.getBoundingClientRect() ?? this.computeCanvasCellRect(L.id, _.key);
-          if (E && Rt(
+          if (E && Mt(
             this.dataModel,
             this.selectionRanges,
             this.activeCell.rowId,
@@ -3919,20 +3919,20 @@ class On {
           }
         }
       }
-      const S = this.dataModel.getSchema(), b = this.dataModel.listRows(), x = w.rowId === "__header__" ? 0 : this.dataModel.getRowIndex(w.rowId), D = S.columns.findIndex((M) => String(M.key) === String(w.colKey));
+      const S = this.dataModel.getSchema(), b = this.dataModel.listRows(), x = w.rowId === "__header__" ? 0 : this.dataModel.getRowIndex(w.rowId), D = S.columns.findIndex((R) => String(R.key) === String(w.colKey));
       if (D < 0) return;
       if (w.rowId === "__header__") {
         if (!b.length) return;
-        const M = {
+        const R = {
           kind: "cells",
           startRow: 0,
           endRow: b.length - 1,
           startCol: D,
           endCol: D
         };
-        this.selectionRanges = [M], this.onSelectionChange(this.selectionRanges), this.dragging = !1, this.selectionMode = !0, this.dragStart = null, this.selectionAnchor = null, this.suppressNextClick = !1;
-        const H = b[0], R = S.columns[D];
-        H && R && (this.activeCell = { rowId: H.id, colKey: R.key }, this.onActiveChange(H.id, R.key)), this.focusSelectionInput("");
+        this.selectionRanges = [R], this.onSelectionChange(this.selectionRanges), this.dragging = !1, this.selectionMode = !0, this.dragStart = null, this.selectionAnchor = null, this.suppressNextClick = !1;
+        const H = b[0], M = S.columns[D];
+        H && M && (this.activeCell = { rowId: H.id, colKey: M.key }, this.onActiveChange(H.id, M.key)), this.focusSelectionInput("");
         return;
       }
       if (x < 0) return;
@@ -3992,8 +3992,29 @@ class On {
       f.preventDefault();
       const y = f.clipboardData?.getData("text/html") ?? "", w = f.clipboardData?.getData("text/tab-separated-values") ?? "", C = f.clipboardData?.getData("text/plain") ?? "", S = this.parseClipboardGrid({ html: y, tsv: w, text: C });
       S && this.applyClipboardGrid(S);
-    }, this.handleSelectionCompositionStart = () => {
-      this.selectionMode && (this.selectionMode = !1, this.teardownSelectionInput(), this.openEditorAtActiveCell());
+    }, this.handleSelectionCompositionStart = (f) => {
+      if (!this.selectionMode) return;
+      const y = this.activeCell;
+      if (!(!y || y.colKey === null)) {
+        if (this.isCellReadonly(y.rowId, y.colKey)) {
+          f?.preventDefault?.(), f?.stopPropagation?.();
+          const w = this.dataModel.getCell(y.rowId, y.colKey), C = this.cellToClipboardString(w);
+          this.teardownSelectionInput(), this.focusSelectionInput(C);
+          return;
+        }
+        this.selectionMode = !1, this.teardownSelectionInput(), this.openEditorAtActiveCell();
+      }
+    }, this.handleSelectionBeforeInput = (f) => {
+      if (!this.selectionMode) return;
+      const y = this.activeCell;
+      if (!(!y || y.colKey === null) && this.isCellReadonly(y.rowId, y.colKey)) {
+        f.preventDefault();
+        try {
+          const w = this.dataModel.getCell(y.rowId, y.colKey), C = this.cellToClipboardString(w), S = this.ensureSelectionInput();
+          S.value = C, S.select();
+        } catch {
+        }
+      }
     }, this.handleSelectionKeydown = async (f) => {
       if (!this.selectionMode || !this.activeCell || f.isComposing || this.composing || f.key === "Shift" || f.key === "Control" || f.key === "Alt" || f.key === "Meta" || f.key === "CapsLock" || f.key === "NumLock" || f.key === "ScrollLock")
         return;
@@ -4063,8 +4084,8 @@ class On {
       if (this.inputEl && f.target && this.inputEl.contains(f.target))
         return;
       if (this.inputEl && this.activeCell && this.activeCell.colKey !== null) {
-        const { rowId: M, colKey: H } = this.activeCell, R = this.readActiveValue();
-        this.commitEdit(M, H, R), this.onMove(M), this.teardownInput(!1);
+        const { rowId: R, colKey: H } = this.activeCell, M = this.readActiveValue();
+        this.commitEdit(R, H, M), this.onMove(R), this.teardownInput(!1);
       }
       const w = typeof document.elementFromPoint == "function" ? this.getHitAtClientPoint(f.clientX, f.clientY) : this.hitTest(f);
       if (!w) return;
@@ -4082,27 +4103,27 @@ class On {
       } else globalThis.__EXTABLE_DEBUG_ACTIONS && console.log("[extable][canvas][action-click]", null);
       const S = this.selectionMode && !f.shiftKey && !f.metaKey && !f.ctrlKey && this.activeCell?.rowId === w.rowId && String(this.activeCell?.colKey) === String(w.colKey);
       if (w.rowId === "__all__" && w.colKey === "__all__") {
-        const M = this.dataModel.getSchema(), H = this.dataModel.listRows();
-        this.teardownInput(!1), H.length && M.columns.length ? (this.selectionRanges = [
+        const R = this.dataModel.getSchema(), H = this.dataModel.listRows();
+        this.teardownInput(!1), H.length && R.columns.length ? (this.selectionRanges = [
           {
             kind: "cells",
             startRow: 0,
             endRow: H.length - 1,
             startCol: 0,
-            endCol: M.columns.length - 1
+            endCol: R.columns.length - 1
           }
         ], this.activeCell = { rowId: "__all__", colKey: "__all__" }, this.onActiveChange("__all__", "__all__"), this.onSelectionChange(this.selectionRanges), this.updateFillHandleFlag(), this.selectionMode = !0, this.selectionAnchor = null, this.focusSelectionInput("")) : (this.activeCell = null, this.onActiveChange("__all__", "__all__"), this.selectionAnchor = null);
         return;
       }
       if (this.onRowSelect(w.rowId), w.rowId === "__header__") {
-        const M = this.dataModel.getSchema(), H = this.dataModel.listRows(), R = M.columns.findIndex((K) => String(K.key) === String(w.colKey));
-        H.length && R >= 0 && (this.selectionRanges = [
+        const R = this.dataModel.getSchema(), H = this.dataModel.listRows(), M = R.columns.findIndex((K) => String(K.key) === String(w.colKey));
+        H.length && M >= 0 && (this.selectionRanges = [
           {
             kind: "cells",
             startRow: 0,
             endRow: H.length - 1,
-            startCol: R,
-            endCol: R
+            startCol: M,
+            endCol: M
           }
         ], this.activeCell = { rowId: H[0].id, colKey: w.colKey }, this.onActiveChange(this.activeCell.rowId, this.activeCell.colKey), this.onSelectionChange(this.selectionRanges), this.updateFillHandleFlag(), this.selectionMode = !0, this.selectionAnchor = null, this.focusSelectionInput(""));
         return;
@@ -4117,13 +4138,13 @@ class On {
       }
       if (this.isCellReadonly(w.rowId, w.colKey)) {
         this.selectionMode = !0, this.selectionAnchor = null, this.teardownInput(!1);
-        const M = this.dataModel.getCell(w.rowId, w.colKey);
-        this.focusSelectionInput(this.cellToClipboardString(M));
+        const R = this.dataModel.getCell(w.rowId, w.colKey);
+        this.focusSelectionInput(this.cellToClipboardString(R));
         return;
       }
       if (this.findColumn(w.colKey)?.type === "boolean") {
-        const M = this.lastBooleanCell?.rowId === w.rowId && String(this.lastBooleanCell?.colKey) === String(w.colKey);
-        if (this.lastBooleanCell = { rowId: w.rowId, colKey: w.colKey }, this.selectionMode = !0, this.selectionAnchor = null, this.teardownInput(!1), this.teardownSelectionInput(), M) {
+        const R = this.lastBooleanCell?.rowId === w.rowId && String(this.lastBooleanCell?.colKey) === String(w.colKey);
+        if (this.lastBooleanCell = { rowId: w.rowId, colKey: w.colKey }, this.selectionMode = !0, this.selectionAnchor = null, this.teardownInput(!1), this.teardownSelectionInput(), R) {
           this.toggleBoolean(w.rowId, w.colKey), this.focusSelectionInput("");
           return;
         }
@@ -4230,7 +4251,7 @@ class On {
   }
   updateFillHandleFlag() {
     const t = this.activeCell?.colKey ?? null, e = this.activeCell?.rowId ?? null;
-    this.root.dataset.extableFillHandle = Rt(
+    this.root.dataset.extableFillHandle = Mt(
       this.dataModel,
       this.selectionRanges,
       e,
@@ -4303,7 +4324,7 @@ class On {
   ensureSelectionInput() {
     if (this.selectionInput) return this.selectionInput;
     const t = document.createElement("input");
-    return t.type = "text", t.autocomplete = "off", t.spellcheck = !1, t.style.position = "absolute", t.style.left = "0", t.style.top = "0", t.style.transform = "translate(-10000px, 0)", t.style.width = "1px", t.style.height = "1px", t.style.opacity = "0", t.style.pointerEvents = "none", t.addEventListener("keydown", this.handleSelectionKeydown), t.addEventListener("compositionstart", this.handleSelectionCompositionStart), t.addEventListener("copy", this.handleSelectionCopy), t.addEventListener("cut", this.handleSelectionCut), t.addEventListener("paste", this.handleSelectionPaste), t.addEventListener("blur", this.handleSelectionBlur), this.root.appendChild(t), this.selectionInput = t, t;
+    return t.type = "text", t.readOnly = !0, t.inputMode = "none", t.autocomplete = "off", t.spellcheck = !1, t.style.position = "absolute", t.style.left = "0", t.style.top = "0", t.style.transform = "translate(-10000px, 0)", t.style.width = "1px", t.style.height = "1px", t.style.opacity = "0", t.style.pointerEvents = "none", t.addEventListener("keydown", this.handleSelectionKeydown), t.addEventListener("beforeinput", this.handleSelectionBeforeInput), t.addEventListener("compositionstart", this.handleSelectionCompositionStart), t.addEventListener("copy", this.handleSelectionCopy), t.addEventListener("cut", this.handleSelectionCut), t.addEventListener("paste", this.handleSelectionPaste), t.addEventListener("blur", this.handleSelectionBlur), this.root.appendChild(t), this.selectionInput = t, t;
   }
   focusSelectionInput(t) {
     const e = this.ensureSelectionInput();
@@ -4605,7 +4626,7 @@ class On {
   }
   teardownSelectionInput() {
     const t = this.selectionInput;
-    t && (this.selectionInput = null, t.removeEventListener("keydown", this.handleSelectionKeydown), t.removeEventListener("compositionstart", this.handleSelectionCompositionStart), t.removeEventListener("copy", this.handleSelectionCopy), t.removeEventListener("cut", this.handleSelectionCut), t.removeEventListener("paste", this.handleSelectionPaste), t.removeEventListener("blur", this.handleSelectionBlur), j(t));
+    t && (this.selectionInput = null, t.removeEventListener("keydown", this.handleSelectionKeydown), t.removeEventListener("beforeinput", this.handleSelectionBeforeInput), t.removeEventListener("compositionstart", this.handleSelectionCompositionStart), t.removeEventListener("copy", this.handleSelectionCopy), t.removeEventListener("cut", this.handleSelectionCut), t.removeEventListener("paste", this.handleSelectionPaste), t.removeEventListener("blur", this.handleSelectionBlur), j(t));
   }
   async copySelection() {
     const t = this.buildSelectionClipboardPayload();