@web-ppt/editor 0.5.0-beta.2 → 0.5.0-beta.7

package/dist/edit-context.js

@@ -0,0 +1,333 @@
+import { composeSpaceMatrices as U, textPositionAtIndex as b, TEXT_ATOM as Y, textPositionToIndex as D, textBodyEditText as F, applyTextEditOps as Z, textBodyFromOverride as K } from "@web-ppt/edit-core";
+import { renderTextBodyToHtml as tt } from "@web-ppt/core";
+const et = (n, t) => ({ a: 1, b: 0, c: 0, d: 1, e: n, f: t });
+function nt(n, t) {
+  var e, i;
+  const r = (e = n.rows[t.r]) == null ? void 0 : e.cells[t.c], o = (r == null ? void 0 : r.text) ?? ((i = r == null ? void 0 : r.editInfo) == null ? void 0 : i.textTemplate);
+  return !r || r.merged || !o ? null : {
+    cell: r,
+    text: o,
+    x: n.colWidths.slice(0, t.c).reduce((l, c) => l + c, 0),
+    y: n.rows.slice(0, t.r).reduce((l, c) => l + c.height, 0),
+    width: n.colWidths.slice(t.c, t.c + r.colSpan).reduce((l, c) => l + c, 0) || n.colWidths[t.c] || 0,
+    height: n.rows.slice(t.r, t.r + r.rowSpan).reduce((l, c) => l + c.height, 0) || n.rows[t.r].height
+  };
+}
+function rt(n, t, r) {
+  const o = n.doc.elements[t];
+  if (!o || o.meta.editable !== "full") return null;
+  const e = n.renderedElement(t);
+  if (!r) {
+    const c = e.kind === "shape" ? e.text ?? o.meta.textTemplate : null;
+    return e.kind === "shape" && c ? {
+      id: t,
+      text: c,
+      width: e.w,
+      height: e.h,
+      matrix: n.renderedFrameToSlideMatrix(t)
+    } : null;
+  }
+  if (e.kind !== "table") return null;
+  const i = nt(e, r);
+  if (!i) return null;
+  const l = n.renderedContentToSlideMatrix(t);
+  return {
+    id: t,
+    cell: { ...r },
+    text: i.text,
+    width: i.width,
+    height: i.height,
+    matrix: U(l, et(i.x, i.y)),
+    ...i.cell.margins ? { insets: i.cell.margins } : {},
+    ...i.cell.vAlign ? { anchor: i.cell.vAlign } : {},
+    ...i.cell.vert ? { vert: i.cell.vert } : {}
+  };
+}
+function H(n) {
+  if (n.nodeType === n.TEXT_NODE) return { valid: !0, text: n.nodeValue ?? "" };
+  if (n.nodeType !== n.ELEMENT_NODE) return { valid: !0, text: "" };
+  const t = n;
+  if (t.hasAttribute("data-bullet")) return { valid: !0, text: "" };
+  if (t.localName === "svg" && t.hasAttribute("data-r"))
+    return { valid: !0, text: Y };
+  if (t.localName === "br") return { valid: !0, text: `
+` };
+  let r = "";
+  for (const o of t.childNodes) {
+    const e = H(o);
+    if (!e.valid) return e;
+    r += e.text;
+  }
+  return t.dataset.empty === "true" && r.startsWith(" ") && (r = r.slice(1)), { valid: !0, text: r };
+}
+function ot(n) {
+  const t = [...n.querySelectorAll("[data-p]")].filter((o) => {
+    var e;
+    return !((e = o.parentElement) != null && e.closest("[data-p]"));
+  }), r = [];
+  for (const o of t) {
+    let e = "";
+    for (const i of o.childNodes) {
+      const l = H(i);
+      if (!l.valid) return l;
+      e += l.text;
+    }
+    r.push(e);
+  }
+  return { valid: !0, text: r.join(`
+`) };
+}
+function j(n, t, r) {
+  const o = n.ownerDocument.createRange();
+  try {
+    o.setStart(n, 0), o.setEnd(t, r);
+  } catch {
+    return null;
+  }
+  const e = ot(o.cloneContents());
+  return e.valid ? e.text.length : null;
+}
+function X(n, t) {
+  var l;
+  const r = (l = n.ownerDocument.defaultView) == null ? void 0 : l.getSelection();
+  if (!(r != null && r.rangeCount)) return null;
+  const o = r.getRangeAt(0);
+  if (!n.contains(o.commonAncestorContainer) && o.commonAncestorContainer !== n) return null;
+  const e = j(n, o.startContainer, o.startOffset), i = j(n, o.endContainer, o.endOffset);
+  return e === null || i === null ? null : {
+    from: b(t, e),
+    to: b(t, i)
+  };
+}
+function G(n, t) {
+  var o;
+  let r = t;
+  for (let e = 0; e < n.childNodes.length; e++) {
+    const i = n.childNodes[e];
+    if (i.nodeType === i.TEXT_NODE) {
+      const c = n.dataset.empty === "true" && i.nodeValue === " " ? 0 : ((o = i.nodeValue) == null ? void 0 : o.length) ?? 0;
+      if (r <= c) return { node: i, offset: Math.min(r, c) };
+      r -= c;
+      continue;
+    }
+    const l = H(i);
+    if (l.valid) {
+      if (r <= l.text.length)
+        return i instanceof Element && !["br", "svg"].includes(i.localName) ? G(i, r) : { node: n, offset: e + (r ? 1 : 0) };
+      r -= l.text.length;
+    }
+  }
+  return { node: n, offset: n.childNodes.length };
+}
+function O(n, t, r = "edit") {
+  const o = r === "edit" ? "data-r" : "data-ppt-search-r", e = [...n.querySelectorAll(
+    `[${o}="${t.p}.${t.r}"]`
+  )];
+  if (!e.length) return null;
+  const i = r === "edit" ? "from" : "pptSearchFrom", l = r === "edit" ? "to" : "pptSearchTo", c = e.filter((g) => g.dataset[i] !== void 0 && g.dataset[l] !== void 0), m = c.find((g) => {
+    const s = Number(g.dataset[i]), y = Number(g.dataset[l]);
+    return t.off >= s && t.off < y;
+  }) ?? [...c].reverse().find(
+    (g) => t.off === Number(g.dataset[l])
+  ) ?? e[0], w = Number(m.dataset[i] ?? 0), x = Math.max(0, t.off - w);
+  if (m.localName === "svg") {
+    const g = m.parentNode;
+    if (!g) return null;
+    const s = [...g.childNodes].indexOf(m);
+    return { node: g, offset: s + (x ? 1 : 0) };
+  }
+  return G(m, x);
+}
+function it(n, t) {
+  let r = 0;
+  for (; r < n.length && r < t.length && n[r] === t[r]; ) r++;
+  let o = 0;
+  for (; o < n.length - r && o < t.length - r && n[n.length - 1 - o] === t[t.length - 1 - o]; ) o++;
+  return { from: r, to: n.length - o, text: t.slice(r, t.length - o) };
+}
+function lt(n, t, r, o) {
+  const e = n.slice(0, r), i = n.slice(o);
+  return t.length < e.length + i.length || !t.startsWith(e) || !t.endsWith(i) ? null : { from: r, to: o, text: t.slice(e.length, t.length - i.length) };
+}
+function st(n, t, r, o) {
+  if (n === t) return { from: r, to: o };
+  const e = it(n, t);
+  if (e.to <= r) {
+    const i = e.text.length - (e.to - e.from);
+    return { from: r + i, to: o + i };
+  }
+  return e.from >= o ? { from: r, to: o } : null;
+}
+function ct(n, t, r, o) {
+  const e = n.createElement("div");
+  e.dataset.pptTextEditor = t.id, t.cell && (e.dataset.pptTextCell = `${t.cell.r}:${t.cell.c}`), e.setAttribute("contenteditable", "true"), e.setAttribute("role", "textbox"), e.setAttribute("aria-multiline", "true"), e.spellcheck = !1, e.style.position = "absolute", e.style.left = "0", e.style.top = "0", e.style.width = `${t.width}px`, e.style.height = `${t.height}px`, e.style.transformOrigin = "0 0";
+  const { matrix: i } = t;
+  e.style.transform = `matrix(${i.a},${i.b},${i.c},${i.d},${i.e},${i.f})`, e.style.pointerEvents = "auto", e.style.outline = "none", e.innerHTML = tt(t.text, t.width, t.height, {
+    includeEditMarkers: !0,
+    layout: r,
+    scale: o,
+    ...t.insets ? { insets: t.insets } : {},
+    ...t.anchor ? { anchor: t.anchor } : {},
+    ...t.vert ? { vert: t.vert } : {}
+  });
+  for (const l of e.querySelectorAll("svg[data-r]"))
+    l.contentEditable = "false";
+  return e;
+}
+function q(n, t, r) {
+  var c;
+  const o = O(n, t), e = O(n, r), i = (c = n.ownerDocument.defaultView) == null ? void 0 : c.getSelection();
+  if (!o || !e || !i) return;
+  const l = n.ownerDocument.createRange();
+  l.setStart(o.node, o.offset), l.setEnd(e.node, e.offset), i.removeAllRanges(), i.addRange(l);
+}
+function at(n) {
+  return n.replace(/\r\n?/g, `
+`).replace(/\u00a0/g, " ").replace(/\uFFFC/g, "");
+}
+function ut(n) {
+  return {
+    paragraphs: at(n).split(`
+`).map((t) => ({
+      text: t,
+      marks: t ? [{ from: 0, to: t.length, props: {} }] : []
+    }))
+  };
+}
+function J(n, t, r, o) {
+  const e = O(n, b(t, r)), i = O(n, b(t, o));
+  if (!e || !i) return null;
+  const l = n.ownerDocument.createRange();
+  return l.setStart(e.node, e.offset), l.setEnd(i.node, i.offset), l;
+}
+function z(n, t, r, o) {
+  const e = J(n, t, r, o);
+  return e && typeof e.getBoundingClientRect == "function" ? e.getBoundingClientRect() : n.getBoundingClientRect();
+}
+let dt = 0;
+function ft(n) {
+  const t = n.ownerDocument.defaultView, r = [], o = `webppt-ime-${++dt}-`, e = n.ownerDocument.createElement("style");
+  n.ownerDocument.head.append(e);
+  const i = () => {
+    r.forEach((l) => {
+      var c, m;
+      return (m = (c = t.CSS) == null ? void 0 : c.highlights) == null ? void 0 : m.delete(l);
+    }), r.length = 0, e.textContent = "";
+  };
+  return {
+    update(l, c) {
+      var w;
+      if (i(), !t.Highlight || !((w = t.CSS) != null && w.highlights)) return;
+      const m = [];
+      c.forEach((x, g) => {
+        const s = J(n, l, x.rangeStart, x.rangeEnd);
+        if (!s || x.underlineThickness === "none") return;
+        const y = `${o}${g}`, S = ["solid", "dotted", "dashed", "wavy"].includes(x.underlineStyle) ? x.underlineStyle : "solid";
+        t.CSS.highlights.set(y, new t.Highlight(s)), r.push(y), m.push(`::highlight(${y}){text-decoration:underline ${S};text-decoration-thickness:${x.underlineThickness === "thick" ? "2px" : "1px"}}`);
+      }), e.textContent = m.join("");
+    },
+    dispose() {
+      i(), e.remove();
+    }
+  };
+}
+function gt(n, t) {
+  const r = t.element.ownerDocument, o = r.defaultView, e = o.EditContext;
+  if (!e) return { supported: !1, dispose() {
+  } };
+  const i = t.element.querySelector("[data-ppt-layer=text]");
+  let l = null, c, m = !1;
+  const w = (s) => {
+    var W;
+    const y = (W = s.dataset.pptTextCell) == null ? void 0 : W.split(":").map(Number), S = () => rt(n.editor, s.dataset.pptTextEditor, y ? { r: y[0], c: y[1] } : null), L = S();
+    if (!L) return () => {
+    };
+    let f = L.text, A = !1, v = !1, C = null;
+    const $ = X(s, f), p = new e({
+      text: F(f),
+      selectionStart: $ ? D(f, $.from) : 0,
+      selectionEnd: $ ? D(f, $.to) : 0
+    }), P = ft(s), V = new o.AbortController(), E = (d, a, u, h = !1) => d.addEventListener(a, u, { signal: V.signal, capture: h }), M = () => {
+      v || !s.isConnected || (p.updateControlBounds(s.getBoundingClientRect()), p.updateSelectionBounds(z(s, f, p.selectionStart, p.selectionEnd)));
+    }, T = () => {
+      if (v || A) return;
+      const d = S();
+      if (!d) return;
+      f = d.text;
+      const a = F(f), u = X(s, f);
+      p.text !== a && p.updateText(0, p.text.length, a), u && p.updateSelection(D(f, u.from), D(f, u.to)), M();
+    }, I = (d, a, u) => {
+      const h = i.querySelector("[data-ppt-text-editor]"), N = S();
+      if (!(!h || h.dataset.pptTextEditor !== s.dataset.pptTextEditor || !N))
+        if (q(h, b(N.text, d), b(N.text, a)), u.includes(`
+`)) {
+          const R = new o.Event("paste", { bubbles: !0, cancelable: !0 });
+          Object.defineProperty(R, "clipboardData", { value: { getData: (k) => k === "text/plain" ? u : "" } }), h.dispatchEvent(R);
+        } else h.dispatchEvent(new o.InputEvent("beforeinput", { bubbles: !0, cancelable: !0, inputType: "insertText", data: u }));
+    };
+    E(p, "compositionstart", () => {
+      T(), A = !0, C = { text: p.text, markup: s.innerHTML, from: p.selectionStart, to: p.selectionEnd }, s.dispatchEvent(new o.CompositionEvent("compositionstart", { bubbles: !0 }));
+    }), E(p, "textupdate", (d) => {
+      var k;
+      if (v || !s.isConnected) return;
+      const a = d;
+      if (!A) {
+        I(a.updateRangeStart, a.updateRangeEnd, a.text);
+        const _ = i.querySelector("[data-ppt-text-editor]"), B = S();
+        _ && B && q(
+          _,
+          b(B.text, a.selectionStart),
+          b(B.text, a.selectionEnd)
+        );
+        return;
+      }
+      const u = Z(f, [{
+        type: "replaceFragment",
+        from: b(f, a.updateRangeStart),
+        to: b(f, a.updateRangeEnd),
+        fragment: ut(a.text)
+      }]);
+      if (u.kind !== "flat") return;
+      f = K(u);
+      const h = S();
+      if (!h) return;
+      const N = s.querySelector("[data-layout=engine]") ? "engine" : "browser", R = Number(((k = s.querySelector("[data-font-scale]")) == null ? void 0 : k.dataset.fontScale) ?? 1);
+      s.innerHTML = ct(r, { ...h, text: f }, N, R).innerHTML, q(s, b(f, a.selectionStart), b(f, a.selectionEnd)), M();
+    }), E(p, "compositionend", () => {
+      if (v || !C) return;
+      const d = C, a = S();
+      C = null, A = !1;
+      const u = lt(d.text, F(f), d.from, d.to), h = u && a ? st(d.text, F(a.text), u.from, u.to) : null;
+      if (!(u != null && u.text.includes(`
+`))) {
+        s.dispatchEvent(new o.CompositionEvent("compositionend", { bubbles: !0 }));
+        return;
+      }
+      s.innerHTML = d.markup, s.dispatchEvent(new o.CompositionEvent("compositionend", { bubbles: !0 })), u && h && (u.from !== u.to || u.text) && I(h.from, h.to, u.text), T();
+    }), E(p, "characterboundsupdate", (d) => {
+      const a = d;
+      p.updateCharacterBounds(a.rangeStart, Array.from(
+        { length: Math.max(0, Math.min(p.text.length, a.rangeEnd) - a.rangeStart) },
+        (u, h) => z(s, f, a.rangeStart + h, a.rangeStart + h + 1)
+      ));
+    }), E(p, "textformatupdate", (d) => {
+      P.update(f, d.getTextFormats());
+    }), E(s, "beforeinput", (d) => {
+      d.isTrusted && /^(insertText|insertCompositionText|deleteContentBackward|deleteContentForward)$/.test(d.inputType) && d.stopImmediatePropagation();
+    }, !0), E(r, "selectionchange", T), E(s, "keydown", () => o.queueMicrotask(T)), E(s, "keyup", T), E(s, "pointerup", T);
+    const Q = n.editor.subscribe(() => o.queueMicrotask(T));
+    return E(o, "scroll", M, !0), E(o, "resize", M), s.editContext = p, T(), () => {
+      v = !0, Q(), V.abort(), P.dispose(), s.editContext = null, C && s.isConnected && (s.innerHTML = C.markup, s.dispatchEvent(new o.CompositionEvent("compositionend", { bubbles: !0 })));
+    };
+  }, x = () => {
+    if (m) return;
+    const s = i.querySelector("[data-ppt-text-editor]");
+    s !== l && (c == null || c(), l = s, c = s ? w(s) : void 0);
+  }, g = new o.MutationObserver(x);
+  return g.observe(i, { childList: !0 }), x(), { supported: !0, dispose() {
+    m = !0, g.disconnect(), c == null || c(), l = null;
+  } };
+}
+export {
+  gt as enableEditContext
+};