@weasel-js/text-dom 1.9.4 → 1.10.0

package/dist/index.js

@@ -1,7 +1,8 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { useLatest, useVisibleRaf } from '@weasel-js/react';
-import { DEFAULT_TEXT_STYLE, smallCapsScaleFor, numericWeight, resolveTextStyle, styleAtRange, runsCarryStyling, runsToPlainText, unboldPatch, nodeHasFlag, setFlagOverRange, applyStyleToRange, patchRangeStyle, fontString, verticalAlignOffset, layoutTextPose, SMALL_CAPS_SCALE, isHardLineBreak, supersededKey, rangeWeight, resolveAlign, scriptMetricsFor, transformRunTexts, smallCapsText, paragraphDirection } from '@weasel-js/text';
+import { DEFAULT_TEXT_STYLE, smallCapsScaleFor, numericWeight, resolveTextStyle, styleAtRange, runsCarryStyling, runsToPlainText, unboldPatch, nodeHasFlag, setFlagOverRange, applyStyleToRange, patchRangeStyle, effectiveRangeStyle, SMALL_CAPS_SCALE, isHardLineBreak, fontString, supersededKey, rangeWeight, scriptMetricsFor, transformRunTexts, smallCapsText, resolveAlign, paragraphDirection, layoutTextPose, verticalAlignOffset } from '@weasel-js/text';
 import { cssFontFamily, cssFontFamilyLoading, isCanvasFont } from '@weasel-js/font';
+import { isSolidPaint } from '@weasel-js/paint';
 
 // src/useTextEdit.ts
 
@@ -82,7 +83,7 @@ function domPositionToCharOffset(parent, node, offset) {
 // src/domRuns.ts
 function solidColor(p) {
   if (!p) return null;
-  if ("color" in p) return p.color;
+  if (isSolidPaint(p)) return p.color;
   return null;
 }
 var FILL_ATTR = "data-fill";
@@ -194,7 +195,7 @@ function toRun(text, style) {
   if (style.fontSize != null) run.fontSize = style.fontSize;
   if (style.fontFamily != null) run.fontFamily = style.fontFamily;
   if (style.fillJson !== void 0) run.fill = JSON.parse(style.fillJson);
-  else if (style.color != null) run.fill = { fill: "solid", color: style.color };
+  else if (style.color != null) run.fill = { paint: { kind: "solid", color: style.color } };
   if (style.letterSpacing != null) run.letterSpacing = style.letterSpacing;
   if (style.underline) run.underline = true;
   if (style.strikethrough) run.strikethrough = true;
@@ -333,7 +334,7 @@ function runsToDom(runs, parent, base = DEFAULT_TEXT_STYLE) {
       });
       span.setAttribute("data-font-family", run.fontFamily);
     }
-    const color = solidColor(run.fill);
+    const color = solidColor(run.fill?.paint);
     if (color != null) span.style.color = color;
     else if (run.fill !== void 0) span.setAttribute(FILL_ATTR, JSON.stringify(run.fill));
     if (run.fill === null) span.style.color = "#000";
@@ -421,67 +422,282 @@ function overlayAlignEdge(el, style) {
   return resolveAlign(style.align, paragraphDirection(el.textContent ?? "", style.direction));
 }
 
-// src/useTextEdit.ts
-var STYLE_SHORTCUTS = [
-  { key: "b", shift: false, toggle: "bold" },
-  { key: "i", shift: false, toggle: "italic" },
-  { key: "u", shift: false, toggle: "underline" },
-  { key: "x", shift: true, toggle: "strikethrough" },
-  { key: "=", shift: true, toggle: "super" },
-  { key: "-", shift: true, toggle: "sub" }
-];
-var UNSHIFT = { "+": "=", _: "-" };
-function toggleForKey(e) {
-  if (!e.metaKey && !e.ctrlKey) return null;
-  const raw = e.key.toLowerCase();
-  const key = UNSHIFT[raw] ?? raw;
-  return STYLE_SHORTCUTS.find((s) => s.key === key && s.shift === e.shiftKey)?.toggle ?? null;
+// src/overlayFrame.ts
+function overlayTransform(pose, left, top, anchor) {
+  const zoom = pose.zoom ?? 1;
+  const parts = [];
+  if (pose.frame) {
+    const [a, b, c, d] = pose.frame;
+    const dx = left - (pose.x + pose.width * zoom / 2);
+    const dy = top - (pose.y + pose.height * zoom / 2);
+    const m = [a * zoom, b * zoom, c * zoom, d * zoom, (a - 1) * dx + c * dy, b * dx + (d - 1) * dy];
+    parts.push(`matrix(${m.join(", ")})`);
+  } else if (zoom !== 1) {
+    parts.push(`scale(${zoom})`);
+  }
+  if (anchor !== 0) parts.push(`translateX(${-anchor * 100}%)`);
+  return parts.length > 0 ? parts.join(" ") : "none";
 }
-function patchForToggle(current, toggle, nodeStyle) {
-  if (toggle === "super" || toggle === "sub") {
-    return { script: current.script === toggle ? void 0 : toggle };
+function applyOverlayStyle(el, style) {
+  el.style.position = "absolute";
+  el.style.pointerEvents = "auto";
+  el.style.boxSizing = "border-box";
+  el.style.margin = "0";
+  el.style.padding = "0";
+  el.style.border = "0";
+  el.style.outline = "none";
+  el.style.background = "transparent";
+  const paint = style.fill?.paint;
+  el.style.color = isSolidPaint(paint) ? paint.color : "#000";
+  el.style.caretColor = style.caretColor;
+  const fontFamily = cssFontFamily(style.fontFamily, {
+    weight: numericWeight(style.fontWeight),
+    style: style.fontStyle
+  });
+  el.style.font = fontString({ ...style, fontFamily });
+  el.style.textRendering = isCanvasFont(style.fontFamily) ? "" : "geometricPrecision";
+  el.style.lineHeight = String(style.lineHeight);
+  applyOverlayDirection(el, style);
+  const decorations = [];
+  if (style.underline) decorations.push("underline");
+  if (style.strikethrough) decorations.push("line-through");
+  if (style.overline) decorations.push("overline");
+  el.style.textDecoration = decorations.length > 0 ? decorations.join(" ") : "none";
+  el.style.textTransform = style.textTransform;
+  el.style.fontVariant = style.fontVariantCaps;
+  el.style.setProperty(
+    SMALL_CAPS_SCALE_PROPERTY,
+    style.fontVariantCaps === "small-caps" ? String(smallCapsScaleFor(style.fontFamily, numericWeight(style.fontWeight), style.fontStyle)) : ""
+  );
+  el.style.whiteSpace = style.wrap ? "pre-wrap" : "pre";
+  el.style.overflowWrap = "normal";
+  el.style.wordBreak = "normal";
+}
+var endsInBreak = (text) => text.length > 0 && isHardLineBreak(text.charCodeAt(text.length - 1));
+function seedOverlay(overlay, text, runs, base) {
+  const styled = runs !== void 0 && runs.length > 0;
+  if (styled) runsToDom(runs, overlay, base);
+  else if (base.fontVariantCaps === "small-caps") runsToDom([{ text }], overlay, base);
+  else appendOverlayText(overlay, text);
+  let ownBreak = endsInBreak(styled ? runsToPlainText(runs) : text);
+  return {
+    edited(el) {
+      if (ownBreak && !endsInBreak(runsToPlainText(domToRuns(el)))) ownBreak = false;
+    },
+    trim: (read) => ownBreak ? read : trimCaretHolder(read)
+  };
+}
+function trimCaretHolder(runs) {
+  const last = runs[runs.length - 1];
+  if (last === void 0 || !last.text.endsWith("\n")) return runs;
+  const trimmed = { ...last, text: last.text.slice(0, -1) };
+  const head = runs.slice(0, -1);
+  return trimmed.text === "" ? head : [...head, trimmed];
+}
+
+// src/overlaySelection.ts
+function readSelectionOffsets(overlay) {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return null;
+  const range = sel.getRangeAt(0);
+  if (!overlay.contains(range.startContainer) || !overlay.contains(range.endContainer)) {
+    return null;
   }
-  const on = toggle === "bold" ? rangeWeight(current, nodeStyle).bold === true : current[toggle] === true || nodeHasFlag(nodeStyle, toggle);
-  return { [toggle]: !on };
+  const start = domPositionToCharOffset(overlay, range.startContainer, range.startOffset);
+  const end = domPositionToCharOffset(overlay, range.endContainer, range.endOffset);
+  return start <= end ? { start, end } : { start: end, end: start };
 }
-function styleAtCaret(runs, at) {
-  return at > 0 ? styleAtRange(runs, at - 1, at) : styleAtRange(runs, 0, 1);
+function selectOffsets(overlay, start, end) {
+  const a = charOffsetToDomPosition(overlay, start);
+  const b = charOffsetToDomPosition(overlay, end);
+  const sel = window.getSelection();
+  if (!a || !b || !sel) return;
+  const range = document.createRange();
+  range.setStart(a.node, a.offset);
+  range.setEnd(b.node, b.offset);
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+function writeRunsPreservingSelection(overlay, runs, start, end, base) {
+  const active = document.activeElement;
+  const inTextEntry = active !== overlay && !overlay.contains(active) && (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active instanceof HTMLElement && active.isContentEditable);
+  runsToDom(runs, overlay, base);
+  if (!inTextEntry) selectOffsets(overlay, start, end);
+}
+
+// src/pasteRuns.ts
+var UNSEEN = /* @__PURE__ */ new Set([
+  "HEAD",
+  "IFRAME",
+  "NOSCRIPT",
+  "OBJECT",
+  "SCRIPT",
+  "STYLE",
+  "TEMPLATE",
+  "TITLE"
+]);
+var BLOCKS = /* @__PURE__ */ new Set([
+  "ADDRESS",
+  "ARTICLE",
+  "ASIDE",
+  "BLOCKQUOTE",
+  "CAPTION",
+  "DD",
+  "DETAILS",
+  "DIV",
+  "DL",
+  "DT",
+  "FIELDSET",
+  "FIGCAPTION",
+  "FIGURE",
+  "FOOTER",
+  "FORM",
+  "H1",
+  "H2",
+  "H3",
+  "H4",
+  "H5",
+  "H6",
+  "HEADER",
+  "HR",
+  "LI",
+  "MAIN",
+  "NAV",
+  "OL",
+  "P",
+  "PRE",
+  "SECTION",
+  "SUMMARY",
+  "TABLE",
+  "TR",
+  "UL"
+]);
+var CELLS = /* @__PURE__ */ new Set(["TD", "TH"]);
+function keepsSpace(el, inherited) {
+  const collapse = el.style.getPropertyValue("white-space-collapse");
+  const ws = collapse || el.style.getPropertyValue("white-space");
+  if (ws === "") return el.tagName === "PRE" || inherited;
+  return /^(pre|pre-wrap|break-spaces|preserve)\b/.test(ws);
+}
+function emphasis(text, style) {
+  const read = toRun(text, style);
+  const run = { text };
+  if (read.bold || (read.fontWeight ?? 0) >= 600) run.bold = true;
+  for (const key of ["italic", "underline", "strikethrough", "overline"]) if (read[key]) run[key] = true;
+  if (read.script) run.script = read.script;
+  return run;
 }
-function spliceRunAt(runs, at, run) {
+function htmlToRuns(html) {
+  const body = new DOMParser().parseFromString(html, "text/html").body;
+  const runs = [];
+  let gap = { line: false, tab: false };
+  let onLine = false;
+  let spaced = false;
+  const write = (text, style) => {
+    const lead = (gap.line && runs.length > 0 ? "\n" : "") + (gap.tab ? "	" : "");
+    runs.push(emphasis(lead + text, style));
+    gap = { line: false, tab: false };
+    onLine = true;
+    spaced = false;
+  };
+  const trimSpace = () => {
+    const last = runs[runs.length - 1];
+    if (spaced && last) last.text = last.text.slice(0, -1);
+    spaced = false;
+  };
+  const boundary = () => {
+    trimSpace();
+    gap = { line: gap.line || onLine, tab: false };
+    onLine = false;
+  };
+  const visit = (node, style, keep) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const data = node.data.replace(/\r\n?/g, "\n");
+      if (keep) {
+        if (data.length > 0) write(data, style);
+        return;
+      }
+      data.split(/[ \t\n\f]+/).forEach((word, i) => {
+        if (i > 0 && onLine && !spaced) {
+          write(" ", style);
+          spaced = true;
+        }
+        if (word.length > 0) write(word, style);
+      });
+      return;
+    }
+    if (!(node instanceof HTMLElement) || UNSEEN.has(node.tagName)) return;
+    if (node.tagName === "BR") {
+      if (node.classList.contains("Apple-interchange-newline")) return;
+      trimSpace();
+      write("\n", style);
+      onLine = false;
+      return;
+    }
+    const block = BLOCKS.has(node.tagName);
+    if (block) boundary();
+    if (CELLS.has(node.tagName) && node.previousElementSibling !== null) {
+      trimSpace();
+      gap.tab = true;
+    }
+    const next = styleStateFromElement(node, style);
+    const keeps = keepsSpace(node, keep);
+    for (const child of node.childNodes) visit(child, next, keeps);
+    if (block) boundary();
+  };
+  visit(body, EMPTY_STYLE, false);
+  trimSpace();
+  const kept = (run) => JSON.stringify({ ...run, text: "" });
+  const merged = [];
+  for (const run of runs) {
+    const last = merged[merged.length - 1];
+    if (run.text.length === 0) continue;
+    if (last && kept(last) === kept(run)) last.text += run.text;
+    else merged.push(run);
+  }
+  return merged;
+}
+function clipboardRuns(data) {
+  const html = data.getData("text/html");
+  const fromHtml = html ? htmlToRuns(html) : [];
+  if (fromHtml.length > 0) return fromHtml;
+  const plain = data.getData("text/plain").replace(/\r\n/g, "\n");
+  return plain.length > 0 ? [{ text: plain }] : [];
+}
+function replaceRunRange(runs, start, end, insert) {
   const out = [];
   let pos = 0;
   let placed = false;
+  const place = () => {
+    if (!placed) out.push(...insert.map((r) => ({ ...r })));
+    placed = true;
+  };
   for (const r of runs) {
-    const end = pos + r.text.length;
-    if (!placed && at <= end) {
-      const k = at - pos;
-      if (k > 0) out.push({ ...r, text: r.text.slice(0, k) });
-      out.push(run);
-      if (k < r.text.length) out.push({ ...r, text: r.text.slice(k) });
-      placed = true;
-    } else {
-      out.push({ ...r });
-    }
-    pos = end;
+    const from = pos;
+    pos += r.text.length;
+    if (from < start) out.push({ ...r, text: r.text.slice(0, start - from) });
+    if (pos >= start) place();
+    if (pos > end) out.push({ ...r, text: r.text.slice(Math.max(0, end - from)) });
   }
-  if (!placed) out.push(run);
+  place();
   return applyStyleToRange(out, 0, 0, {});
 }
-function restoreOverlayFocus(overlay, range) {
-  const active = document.activeElement;
-  if (active === overlay || overlay.contains(active)) return;
-  if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active instanceof HTMLElement && active.isContentEditable || active instanceof Element && active.closest('[role="dialog"]') !== null) return;
-  overlay.focus();
-  const a = charOffsetToDomPosition(overlay, range.start);
-  const b = charOffsetToDomPosition(overlay, range.end);
-  const sel = window.getSelection();
-  if (!a || !b || !sel) return;
-  const r = document.createRange();
-  r.setStart(a.node, a.offset);
-  r.setEnd(b.node, b.offset);
-  sel.removeAllRanges();
-  sel.addRange(r);
+function runStyleAt(runs, at) {
+  let pos = 0;
+  let found = runs[0];
+  for (const r of runs) {
+    if (r.text.length === 0) continue;
+    if (pos >= at && pos > 0) break;
+    found = r;
+    pos += r.text.length;
+  }
+  if (!found) return {};
+  const style = { ...found };
+  delete style.text;
+  return style;
 }
+
+// src/overlayTyping.ts
 function placeCaretBetweenRuns(overlay, runs, offset) {
   let acc = 0;
   let index = -1;
@@ -502,6 +718,126 @@ function placeCaretBetweenRuns(overlay, runs, offset) {
   sel.removeAllRanges();
   sel.addRange(range);
 }
+function resplitSmallCaps(overlay, e) {
+  if (e instanceof InputEvent && e.isComposing) return;
+  const at = readSelectionOffsets(overlay);
+  if (normalizeSmallCaps(overlay) && at) selectOffsets(overlay, at.start, at.end);
+}
+function namesItsRange(ie, caret) {
+  const target = ie.getTargetRanges?.()[0];
+  return target !== void 0 && caret.collapsed && !target.collapsed;
+}
+function replacedOffsets(overlay, ie, host) {
+  const target = ie.getTargetRanges?.()[0];
+  if (target && overlay.contains(target.startContainer) && overlay.contains(target.endContainer)) {
+    const a = domPositionToCharOffset(overlay, target.startContainer, target.startOffset);
+    const b = domPositionToCharOffset(overlay, target.endContainer, target.endOffset);
+    return { start: Math.min(a, b), end: Math.max(a, b) };
+  }
+  return readSelectionOffsets(overlay) ?? host.lastRange();
+}
+function styledForRange(pasted, runs, at, pending) {
+  const base = { ...runStyleAt(runs, at.start === at.end ? at.start : at.start + 1) };
+  for (const [key, value] of Object.entries(pending)) {
+    if (value === void 0 || value === false) delete base[key];
+    else base[key] = value;
+  }
+  return pasted.map((run) => {
+    const styled = { ...base, ...run };
+    const superseded = supersededKey(run);
+    if (superseded !== void 0) delete styled[superseded];
+    return styled;
+  });
+}
+var PASTES = /* @__PURE__ */ new Set(["insertFromPaste", "insertFromDrop"]);
+function typingHandlers(overlay, host) {
+  const edited = (e) => {
+    resplitSmallCaps(overlay, e);
+    host.onEdited();
+  };
+  const onPaste = (ie) => {
+    const at = ie.dataTransfer ? replacedOffsets(overlay, ie, host) : null;
+    if (!ie.dataTransfer || !at) return;
+    ie.preventDefault();
+    const pasted = clipboardRuns(ie.dataTransfer);
+    if (pasted.length === 0) return;
+    const runs = domToRuns(overlay);
+    const next = replaceRunRange(runs, at.start, at.end, styledForRange(pasted, runs, at, host.pending()));
+    const after = at.start + runsToPlainText(pasted).length;
+    writeRunsPreservingSelection(overlay, next, after, after, host.base());
+    host.onWritten(after);
+    host.onEdited();
+  };
+  const onBeforeInput = (ie) => {
+    if (PASTES.has(ie.inputType)) {
+      onPaste(ie);
+      return;
+    }
+    if (ie.inputType !== "insertText" || !ie.data) return;
+    const sel = window.getSelection();
+    const caret = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
+    if (caret && namesItsRange(ie, caret)) return;
+    const pending = host.pending();
+    if (Object.keys(pending).length > 0) {
+      const at = readSelectionOffsets(overlay) ?? host.lastRange();
+      if (!at || at.start !== at.end) return;
+      ie.preventDefault();
+      const typed = { ...pending, text: ie.data };
+      const next = replaceRunRange(domToRuns(overlay), at.start, at.start, [typed]);
+      const after = at.start + ie.data.length;
+      writeRunsPreservingSelection(overlay, next, after, after, host.base());
+      placeCaretBetweenRuns(overlay, next, after);
+      host.onWritten(after);
+      host.onEdited();
+      return;
+    }
+    if (!sel || !caret || !caret.collapsed || caret.startContainer.nodeType === Node.TEXT_NODE) return;
+    if (!overlay.contains(caret.startContainer)) return;
+    ie.preventDefault();
+    const textNode = document.createTextNode(ie.data);
+    caret.insertNode(textNode);
+    sel.collapse(textNode, ie.data.length);
+    edited();
+  };
+  return { onBeforeInput, onInput: edited };
+}
+
+// src/textEditTypes.ts
+var TEXT_EDIT_FONT_HOLD = 100;
+
+// src/useTextEdit.ts
+var STYLE_SHORTCUTS = [
+  { key: "b", shift: false, toggle: "bold" },
+  { key: "i", shift: false, toggle: "italic" },
+  { key: "u", shift: false, toggle: "underline" },
+  { key: "x", shift: true, toggle: "strikethrough" },
+  { key: "=", shift: true, toggle: "super" },
+  { key: "-", shift: true, toggle: "sub" }
+];
+var UNSHIFT = { "+": "=", _: "-" };
+function toggleForKey(e) {
+  if (!e.metaKey && !e.ctrlKey) return null;
+  const raw = e.key.toLowerCase();
+  const key = UNSHIFT[raw] ?? raw;
+  return STYLE_SHORTCUTS.find((s) => s.key === key && s.shift === e.shiftKey)?.toggle ?? null;
+}
+function patchForToggle(current, toggle, nodeStyle) {
+  if (toggle === "super" || toggle === "sub") {
+    return { script: current.script === toggle ? void 0 : toggle };
+  }
+  const on = toggle === "bold" ? rangeWeight(current, nodeStyle).bold === true : current[toggle] === true || nodeHasFlag(nodeStyle, toggle);
+  return { [toggle]: !on };
+}
+function styleAtCaret(runs, at) {
+  return at > 0 ? styleAtRange(runs, at - 1, at) : styleAtRange(runs, 0, 1);
+}
+function restoreOverlayFocus(overlay, range) {
+  const active = document.activeElement;
+  if (active === overlay || overlay.contains(active)) return;
+  if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active instanceof HTMLElement && active.isContentEditable || active instanceof Element && active.closest('[role="dialog"]') !== null) return;
+  overlay.focus();
+  selectOffsets(overlay, range.start, range.end);
+}
 var NO_PENDING = Object.freeze({});
 function mergePending(prev, patch) {
   const next = { ...prev };
@@ -513,44 +849,10 @@ function mergePending(prev, patch) {
   }
   return next;
 }
-function readSelectionOffsets(overlay) {
-  const sel = window.getSelection();
-  if (!sel || sel.rangeCount === 0) return null;
-  const range = sel.getRangeAt(0);
-  if (!overlay.contains(range.startContainer) || !overlay.contains(range.endContainer)) {
-    return null;
-  }
-  const start = domPositionToCharOffset(overlay, range.startContainer, range.startOffset);
-  const end = domPositionToCharOffset(overlay, range.endContainer, range.endOffset);
-  return start <= end ? { start, end } : { start: end, end: start };
-}
-function writeRunsPreservingSelection(overlay, runs, start, end, base) {
-  const active = document.activeElement;
-  const inTextEntry = active !== overlay && !overlay.contains(active) && (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active instanceof HTMLElement && active.isContentEditable);
-  runsToDom(runs, overlay, base);
-  if (inTextEntry) return;
-  const a = charOffsetToDomPosition(overlay, start);
-  const b = charOffsetToDomPosition(overlay, end);
-  const sel = window.getSelection();
-  if (!a || !b || !sel) return;
-  const range = document.createRange();
-  range.setStart(a.node, a.offset);
-  range.setEnd(b.node, b.offset);
-  sel.removeAllRanges();
-  sel.addRange(range);
-}
-function trimCaretHolder(runs) {
-  const last = runs[runs.length - 1];
-  if (last === void 0 || !last.text.endsWith("\n")) return runs;
-  const trimmed = { ...last, text: last.text.slice(0, -1) };
-  const head = runs.slice(0, -1);
-  return trimmed.text === "" ? head : [...head, trimmed];
-}
 function sameSelection(a, b) {
   if (a === null || b === null) return a === b;
   return a.start === b.start && a.end === b.end;
 }
-var TEXT_EDIT_FONT_HOLD = 100;
 function useTextEdit(opts) {
   const optsRef = useLatest(opts);
   const [editingId, setEditingId] = useState(null);
@@ -574,6 +876,7 @@ function useTextEdit(opts) {
   });
   const initialCaretRef = useRef("all");
   const openedRef = useRef(null);
+  const holderRef = useRef(null);
   const [selection, setSelection] = useState(null);
   const [rangeStyle, setRangeStyle] = useState(null);
   const [pendingStyle, setPendingStyle] = useState(NO_PENDING);
@@ -633,7 +936,7 @@ function useTextEdit(opts) {
       setEditingId(null);
       return;
     }
-    const runs = trimCaretHolder(read);
+    const runs = holderRef.current?.trim(read) ?? read;
     const hadRuns = priorRuns != null && priorRuns.length > 0;
     const runsInPlay = hadRuns || runsCarryStyling(runs);
     const text = runsToPlainText(runs);
@@ -716,13 +1019,7 @@ function useTextEdit(opts) {
     overlay.spellcheck = false;
     baseRef.current = style;
     const initialRuns = optsRef.current.getRuns?.(editingId);
-    if (initialRuns && initialRuns.length > 0) {
-      runsToDom(initialRuns, overlay, style);
-    } else if (style.fontVariantCaps === "small-caps") {
-      runsToDom([{ text: getText(editingId) }], overlay, style);
-    } else {
-      appendOverlayText(overlay, getText(editingId));
-    }
+    holderRef.current = seedOverlay(overlay, getText(editingId), initialRuns, style);
     openedRef.current = JSON.stringify(domToRuns(overlay));
     applyOverlayStyle(overlay, style);
     const hold = holdForFaces(style, initialRuns ?? []);
@@ -780,67 +1077,26 @@ function useTextEdit(opts) {
     };
     const onBlur = (e) => {
       const next = e.relatedTarget;
-      const isChrome = optsRef.current.isEditorChrome;
-      if (isChrome && next instanceof Element && isChrome(next)) return;
+      if (isChrome(optsRef.current, next)) return;
       commit();
     };
-    const onBeforeInput = (ie) => {
-      if (ie.inputType !== "insertText" || !ie.data) return;
-      const pending = pendingRef.current;
-      if (Object.keys(pending).length > 0) {
-        const at = readSelectionOffsets(overlay) ?? selectionRef.current;
-        if (!at || at.start !== at.end) return;
-        ie.preventDefault();
-        const next = spliceRunAt(domToRuns(overlay), at.start, {
-          ...pending,
-          text: ie.data
-        });
-        const after = at.start + ie.data.length;
-        writeRunsPreservingSelection(overlay, next, after, after, baseRef.current);
-        placeCaretBetweenRuns(overlay, next, after);
+    const { onBeforeInput, onInput } = typingHandlers(overlay, {
+      pending: () => pendingRef.current,
+      base: () => baseRef.current,
+      lastRange: () => selectionRef.current,
+      onWritten: (caret) => {
         dropPending();
-        publishRange(overlay, { start: after, end: after });
-        return;
-      }
-      ie.preventDefault();
-      const sel2 = window.getSelection();
-      if (!sel2 || sel2.rangeCount === 0) return;
-      const range2 = sel2.getRangeAt(0);
-      range2.deleteContents();
-      {
-        const textNode = document.createTextNode(ie.data);
-        range2.insertNode(textNode);
-        const after = document.createRange();
-        after.setStartAfter(textNode);
-        after.collapse(true);
-        sel2.removeAllRanges();
-        sel2.addRange(after);
+        publishRange(overlay, { start: caret, end: caret });
+      },
+      onEdited: () => {
+        holderRef.current?.edited(overlay);
+        place();
       }
-      resplitSmallCaps();
-    };
-    const resplitSmallCaps = (e) => {
-      if (e instanceof InputEvent && e.isComposing) return;
-      const at = readSelectionOffsets(overlay);
-      if (!normalizeSmallCaps(overlay) || !at) return;
-      const a = charOffsetToDomPosition(overlay, at.start);
-      const b = charOffsetToDomPosition(overlay, at.end);
-      const sel2 = window.getSelection();
-      if (!a || !b || !sel2) return;
-      const r = document.createRange();
-      r.setStart(a.node, a.offset);
-      r.setEnd(b.node, b.offset);
-      sel2.removeAllRanges();
-      sel2.addRange(r);
-    };
-    const onInput = (e) => {
-      resplitSmallCaps(e);
-      place();
-    };
+    });
     const onPointerDownOutside = (e) => {
       const target = e.target;
       if (!(target instanceof Node) || overlay.contains(target)) return;
-      const isChrome = optsRef.current.isEditorChrome;
-      if (isChrome && target instanceof Element && isChrome(target)) return;
+      if (isChrome(optsRef.current, target)) return;
       commit();
     };
     overlay.addEventListener("keydown", onKeyDown);
@@ -897,9 +1153,21 @@ function useTextEdit(opts) {
     rangeStyle,
     pendingStyle,
     applyStyleToSelection,
-    toggleStyle
+    toggleStyle,
+    effectiveStyle: shownStyle(opts, editingId, nodeStyle, rangeStyle, pendingStyle)
   };
 }
+function isChrome(opts, el) {
+  return el instanceof Element && (opts.isEditorChrome?.(el) ?? false);
+}
+function shownStyle(opts, editingId, nodeStyle, rangeStyle, pendingStyle) {
+  if (editingId === null) return null;
+  return effectiveRangeStyle(
+    patchRangeStyle(rangeStyle ?? {}, pendingStyle),
+    nodeStyle ?? opts.getStyle(editingId),
+    opts.getPaint?.(editingId)
+  );
+}
 var OVERLAY_SEQ = 0;
 function holdForFaces(style, runs) {
   const pending = [
@@ -940,40 +1208,6 @@ function createClipBox() {
   el.style.pointerEvents = "none";
   return el;
 }
-function applyOverlayStyle(el, style) {
-  el.style.position = "absolute";
-  el.style.pointerEvents = "auto";
-  el.style.boxSizing = "border-box";
-  el.style.margin = "0";
-  el.style.padding = "0";
-  el.style.border = "0";
-  el.style.outline = "none";
-  el.style.background = "transparent";
-  el.style.color = style.fill !== null && "color" in style.fill ? style.fill.color : "#000";
-  el.style.caretColor = style.caretColor;
-  const fontFamily = cssFontFamily(style.fontFamily, {
-    weight: numericWeight(style.fontWeight),
-    style: style.fontStyle
-  });
-  el.style.font = fontString({ ...style, fontFamily });
-  el.style.textRendering = isCanvasFont(style.fontFamily) ? "" : "geometricPrecision";
-  el.style.lineHeight = String(style.lineHeight);
-  applyOverlayDirection(el, style);
-  const decorations = [];
-  if (style.underline) decorations.push("underline");
-  if (style.strikethrough) decorations.push("line-through");
-  if (style.overline) decorations.push("overline");
-  el.style.textDecoration = decorations.length > 0 ? decorations.join(" ") : "none";
-  el.style.textTransform = style.textTransform;
-  el.style.fontVariant = style.fontVariantCaps;
-  el.style.setProperty(
-    SMALL_CAPS_SCALE_PROPERTY,
-    style.fontVariantCaps === "small-caps" ? String(smallCapsScaleFor(style.fontFamily, numericWeight(style.fontWeight), style.fontStyle)) : ""
-  );
-  el.style.whiteSpace = style.wrap ? "pre-wrap" : "pre";
-  el.style.overflowWrap = "normal";
-  el.style.wordBreak = "normal";
-}
 function installSelectionStyle(overlayClass, style) {
   if (style.selectionBackground == null && style.selectionColor == null) return null;
   const el = document.createElement("style");
@@ -1064,7 +1298,8 @@ function placeOverlay(el, clipBox, pose, clip, style) {
   clipBox.style.height = `${clip?.height ?? 0}px`;
   el.style.display = "";
   const anchor = style.wrap ? 0 : ALIGN_ANCHOR[overlayAlignEdge(el, style)];
-  el.style.left = `${pose.x + pose.width * (pose.zoom ?? 1) * anchor - (clip?.x ?? 0)}px`;
+  const left = pose.x + pose.width * (pose.zoom ?? 1) * anchor;
+  el.style.left = `${left - (clip?.x ?? 0)}px`;
   el.style.width = style.wrap ? `${pose.width}px` : "max-content";
   el.style.minWidth = style.wrap ? "" : `${pose.width}px`;
   const script = style.script ? scriptMetricsFor(style.fontFamily, numericWeight(style.fontWeight), style.fontStyle)[style.script] : void 0;
@@ -1074,16 +1309,14 @@ function placeOverlay(el, clipBox, pose, clip, style) {
   const aligned = pose.verticalAlign !== void 0 && pose.verticalAlign !== "top";
   el.style.minHeight = aligned ? "" : `${pose.height}px`;
   const drop = baselineDrop(el, style, pose, lineHeight) - (script?.shift ?? 0) * pose.fontSize;
-  el.style.top = `${overlayTop(pose, aligned ? el.offsetHeight : pose.height, drop) - (clip?.y ?? 0)}px`;
+  const top = overlayTop(pose, aligned ? el.offsetHeight : pose.height, drop);
+  el.style.top = `${top - (clip?.y ?? 0)}px`;
   el.style.transformOrigin = "0 0";
-  const transforms = [];
-  if (pose.zoom !== void 0 && pose.zoom !== 1) transforms.push(`scale(${pose.zoom})`);
-  if (anchor !== 0) transforms.push(`translateX(${-anchor * 100}%)`);
-  el.style.transform = transforms.length > 0 ? transforms.join(" ") : "none";
+  el.style.transform = overlayTransform(pose, left, top, anchor);
   const scale = pose.zoom !== void 0 ? 1 : style.fontSize > 0 ? pose.fontSize / style.fontSize : 1;
   el.style.letterSpacing = `${style.letterSpacing * scale}px`;
 }
 
-export { TEXT_EDIT_FONT_HOLD, baselineDrop, charOffsetToDomPosition, domPositionToCharOffset, domToRuns, overlayTop, runsToDom, useTextEdit };
+export { TEXT_EDIT_FONT_HOLD, charOffsetToDomPosition, domPositionToCharOffset, domToRuns, runsToDom, useTextEdit };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map