@weasel-js/text-dom 0.0.0-stage → 1.9.4

package/dist/index.js

@@ -0,0 +1,1089 @@
+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 { cssFontFamily, cssFontFamilyLoading, isCanvasFont } from '@weasel-js/font';
+
+// src/useTextEdit.ts
+
+// src/domOffsets.ts
+var BLOCK_TAGS = /* @__PURE__ */ new Set(["DIV", "P"]);
+function overlayPieces(parent) {
+  const out = [];
+  const visit = (node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      if (node.data.length > 0) out.push({ text: node });
+      return;
+    }
+    if (!(node instanceof Element)) return;
+    if (node.tagName === "BR") {
+      out.push({ br: node });
+      return;
+    }
+    if (BLOCK_TAGS.has(node.tagName) && out.length > 0) out.push({ block: node });
+    for (const child of node.childNodes) visit(child);
+  };
+  for (const child of parent.childNodes) visit(child);
+  return out;
+}
+var indexIn = (el) => Array.prototype.indexOf.call(el.parentNode.childNodes, el);
+function afterBreak(piece) {
+  return "br" in piece ? { node: piece.br.parentNode, offset: indexIn(piece.br) + 1 } : { node: piece.block, offset: 0 };
+}
+function charOffsetToDomPosition(parent, offset) {
+  let remaining = offset;
+  let end = { node: parent, offset: 0 };
+  let pending = null;
+  for (const piece of overlayPieces(parent)) {
+    if ("text" in piece) {
+      const len = piece.text.data.length;
+      if (remaining <= len) return { node: piece.text, offset: remaining };
+      remaining -= len;
+      end = { node: piece.text, offset: len };
+      pending = null;
+      continue;
+    }
+    if (remaining === 0) {
+      return pending ?? ("br" in piece ? { node: piece.br.parentNode, offset: indexIn(piece.br) } : afterBreak(piece));
+    }
+    remaining -= 1;
+    end = afterBreak(piece);
+    pending = remaining === 0 ? end : null;
+  }
+  return end;
+}
+function domPositionToCharOffset(parent, node, offset) {
+  const pieces = overlayPieces(parent);
+  let total = 0;
+  if (node.nodeType === Node.TEXT_NODE) {
+    for (const piece of pieces) {
+      if (!("text" in piece)) {
+        total += 1;
+        continue;
+      }
+      if (piece.text === node) return total + offset;
+      total += piece.text.data.length;
+    }
+    return total;
+  }
+  const point = document.createRange();
+  point.setStart(node, Math.max(0, Math.min(offset, node.childNodes.length)));
+  point.collapse(true);
+  for (const piece of pieces) {
+    if ("text" in piece) {
+      if (point.comparePoint(piece.text, 0) < 0) total += piece.text.data.length;
+    } else {
+      const past = afterBreak(piece);
+      if (point.comparePoint(past.node, past.offset) <= 0) total += 1;
+    }
+  }
+  return total;
+}
+
+// src/domRuns.ts
+function solidColor(p) {
+  if (!p) return null;
+  if ("color" in p) return p.color;
+  return null;
+}
+var FILL_ATTR = "data-fill";
+var TRANSFORMS = /* @__PURE__ */ new Set(["none", "uppercase", "lowercase", "capitalize"]);
+var EMPTY_STYLE = {
+  bold: false,
+  italic: false,
+  underline: false,
+  strikethrough: false,
+  overline: false
+};
+function parseLetterSpacing(raw) {
+  const n = parseFloat(raw);
+  if (!Number.isFinite(n)) return void 0;
+  const unit = /^-?[\d.]+([a-z%]+)$/i.exec(raw.trim())?.[1]?.toLowerCase();
+  if (unit && unit !== "px") {
+    console.warn(
+      `weasel domRuns: letter-spacing "${raw}" uses unit "${unit}", which is not converted; treated as ${n} world units`
+    );
+  }
+  return n;
+}
+var isSmallCapsPiece = (el) => el.hasAttribute("data-small-caps");
+function cssFontVariant(el) {
+  const v = el.style.fontVariant || el.style.getPropertyValue("font-variant-caps");
+  return v === "small-caps" || v === "normal" ? v : void 0;
+}
+function styleStateFromElement(el, parent) {
+  if (isSmallCapsPiece(el)) return parent;
+  const next = { ...parent };
+  const tag = el.tagName;
+  if (tag === "B" || tag === "STRONG") {
+    next.bold = true;
+    next.fontWeight = void 0;
+  }
+  if (tag === "I" || tag === "EM") next.italic = true;
+  if (tag === "U") next.underline = true;
+  if (tag === "S" || tag === "STRIKE" || tag === "DEL") next.strikethrough = true;
+  if (tag === "SUP") next.script = "super";
+  if (tag === "SUB") next.script = "sub";
+  if (el instanceof HTMLElement) {
+    const fw = el.style.fontWeight;
+    const ownWeight = Number(el.getAttribute("data-font-weight") ?? fw);
+    if (el.hasAttribute("data-font-weight") || !["", "700", "bold", "400", "normal"].includes(fw)) {
+      if (Number.isFinite(ownWeight) && ownWeight > 0) {
+        next.fontWeight = ownWeight;
+        next.bold = false;
+      }
+    } else if (fw !== "") {
+      next.bold = fw === "700" || fw === "bold";
+      next.fontWeight = void 0;
+    }
+    const fs = el.style.fontStyle;
+    if (fs === "italic") next.italic = true;
+    if (fs === "normal") next.italic = false;
+    const td = el.style.textDecoration || el.style.textDecorationLine;
+    if (td && !td.includes("none")) {
+      next.underline ||= td.includes("underline");
+      next.strikethrough ||= td.includes("line-through");
+      next.overline ||= td.includes("overline");
+    }
+    if (el.style.fontSize) {
+      const size = parseFloat(el.style.fontSize);
+      if (Number.isFinite(size)) {
+        if (el.style.fontSize.trim().endsWith("%")) next.fontScale = size / 100;
+        else next.fontSize = size;
+      }
+    }
+    const va = el.style.verticalAlign;
+    if (va === "super" || va === "sub") next.script = va === "super" ? "super" : "sub";
+    if (va === "baseline") next.script = void 0;
+    const rawShift = el.getAttribute("data-baseline-shift");
+    if (rawShift != null) {
+      const shift = parseFloat(rawShift);
+      if (Number.isFinite(shift)) next.baselineShift = shift;
+    }
+    const tt = el.style.textTransform;
+    if (TRANSFORMS.has(tt)) next.textTransform = tt;
+    const fv = cssFontVariant(el);
+    if (fv) next.fontVariantCaps = fv;
+    const family = el.getAttribute("data-font-family") ?? el.style.fontFamily;
+    if (family) next.fontFamily = family;
+    const fillJson = el.getAttribute(FILL_ATTR);
+    if (fillJson != null) {
+      next.fillJson = fillJson;
+      next.color = void 0;
+    } else if (el.style.color) {
+      next.color = el.style.color;
+      next.fillJson = void 0;
+    }
+    const ls = el.style.letterSpacing;
+    if (ls === "normal") {
+      next.letterSpacing = void 0;
+    } else if (ls) {
+      const px = parseLetterSpacing(ls);
+      if (px != null) next.letterSpacing = px;
+    }
+  }
+  return next;
+}
+function styleEquals(a, b) {
+  return a.bold === b.bold && a.italic === b.italic && a.underline === b.underline && a.strikethrough === b.strikethrough && a.overline === b.overline && a.fontWeight === b.fontWeight && a.fontSize === b.fontSize && a.fontFamily === b.fontFamily && a.color === b.color && a.fillJson === b.fillJson && a.letterSpacing === b.letterSpacing && a.script === b.script && a.baselineShift === b.baselineShift && a.fontScale === b.fontScale && a.textTransform === b.textTransform && a.fontVariantCaps === b.fontVariantCaps;
+}
+function toRun(text, style) {
+  const run = { text };
+  if (style.bold) run.bold = true;
+  if (style.italic) run.italic = true;
+  if (style.fontWeight != null) run.fontWeight = style.fontWeight;
+  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 };
+  if (style.letterSpacing != null) run.letterSpacing = style.letterSpacing;
+  if (style.underline) run.underline = true;
+  if (style.strikethrough) run.strikethrough = true;
+  if (style.overline) run.overline = true;
+  if (style.script != null) run.script = style.script;
+  if (style.baselineShift != null) run.baselineShift = style.baselineShift;
+  if (style.fontScale != null) run.fontScale = style.fontScale;
+  if (style.textTransform != null) run.textTransform = style.textTransform;
+  if (style.fontVariantCaps != null) run.fontVariantCaps = style.fontVariantCaps;
+  return run;
+}
+var BREAK_ATTR = "data-break";
+function restoreBreak(el) {
+  const text = el.textContent ?? "";
+  const code = parseInt(el.getAttribute(BREAK_ATTR) ?? "", 16);
+  return text.startsWith("\n") && Number.isFinite(code) ? String.fromCharCode(code) + text.slice(1) : text;
+}
+function appendOverlayText(parent, text) {
+  let from = 0;
+  for (let i = 0; i < text.length; i++) {
+    const c = text.charCodeAt(i);
+    if (c === 10 || !isHardLineBreak(c) || c === 13 && text.charCodeAt(i + 1) === 10) continue;
+    if (i > from) parent.appendChild(document.createTextNode(text.slice(from, i)));
+    const span = document.createElement("span");
+    span.setAttribute(BREAK_ATTR, c.toString(16));
+    span.textContent = "\n";
+    parent.appendChild(span);
+    from = i + 1;
+  }
+  if (from < text.length) parent.appendChild(document.createTextNode(text.slice(from)));
+}
+function domToRuns(parent) {
+  const fragments = [];
+  function visit(node, style) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.data;
+      if (text.length > 0) fragments.push({ text, style });
+      return;
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) return;
+    const el = node;
+    if (el.tagName === "BR") {
+      fragments.push({ text: "\n", style });
+      return;
+    }
+    if (el.hasAttribute(BREAK_ATTR)) {
+      const restored = restoreBreak(el);
+      if (restored.length > 0) fragments.push({ text: restored, style });
+      return;
+    }
+    if (BLOCK_TAGS.has(el.tagName) && fragments.length > 0) {
+      fragments.push({ text: "\n", style });
+    }
+    const nextStyle = styleStateFromElement(el, style);
+    for (const child of Array.from(el.childNodes)) {
+      visit(child, nextStyle);
+    }
+  }
+  for (const child of Array.from(parent.childNodes)) {
+    visit(child, EMPTY_STYLE);
+  }
+  const runs = [];
+  let i = 0;
+  while (i < fragments.length) {
+    let j = i + 1;
+    while (j < fragments.length && styleEquals(fragments[i].style, fragments[j].style)) {
+      j++;
+    }
+    const merged = fragments.slice(i, j).map((f) => f.text).join("");
+    runs.push(toRun(merged, fragments[i].style));
+    i = j;
+  }
+  return runs;
+}
+var SMALL_CAPS_SCALE_PROPERTY = "--weasel-small-caps";
+function smallCapsPieces(text, transform) {
+  const [shown] = transformRunTexts([text], [transform]);
+  const caps = smallCapsText(shown.text, shown.srcMap);
+  const small = new Array(text.length).fill(false);
+  caps.small?.forEach((s, i) => {
+    if (s) small[caps.srcMap ? caps.srcMap.starts[i] : i] = true;
+  });
+  const out = [];
+  let at = 0;
+  for (const ch of text) {
+    const last = out[out.length - 1];
+    if (last && last.small === small[at]) last.text += ch;
+    else out.push({ text: ch, small: small[at] });
+    at += ch.length;
+  }
+  return out;
+}
+function writeSmallCaps(span, text, transform) {
+  span.replaceChildren();
+  for (const p of smallCapsPieces(text, transform)) {
+    if (!p.small) {
+      appendOverlayText(span, p.text);
+      continue;
+    }
+    const piece = document.createElement("span");
+    piece.setAttribute("data-small-caps", "");
+    piece.style.fontSize = `calc(var(${SMALL_CAPS_SCALE_PROPERTY}, ${SMALL_CAPS_SCALE}) * 1em)`;
+    piece.style.textTransform = "uppercase";
+    piece.textContent = p.text;
+    span.appendChild(piece);
+  }
+}
+function runsToDom(runs, parent, base = DEFAULT_TEXT_STYLE) {
+  parent.replaceChildren();
+  for (const run of runs) {
+    const span = document.createElement("span");
+    span.setAttribute("data-run", "");
+    if ((run.fontVariantCaps ?? base.fontVariantCaps) === "small-caps") {
+      const scale = smallCapsScaleFor(
+        run.fontFamily ?? base.fontFamily,
+        run.fontWeight ?? (run.bold ? 700 : numericWeight(base.fontWeight)),
+        run.italic ? "italic" : base.fontStyle
+      );
+      span.style.setProperty(SMALL_CAPS_SCALE_PROPERTY, String(scale));
+      writeSmallCaps(span, run.text, run.textTransform ?? base.textTransform);
+    } else {
+      appendOverlayText(span, run.text);
+    }
+    if (run.fontVariantCaps != null) span.style.fontVariant = run.fontVariantCaps;
+    if (run.fontWeight != null) {
+      span.style.fontWeight = String(run.fontWeight);
+      span.setAttribute("data-font-weight", String(run.fontWeight));
+    } else if (run.bold) span.style.fontWeight = "700";
+    if (run.italic) span.style.fontStyle = "italic";
+    if (run.fontSize != null) span.style.fontSize = `${run.fontSize}px`;
+    else if (run.fontScale != null) span.style.fontSize = `${run.fontScale * 100}%`;
+    if (run.fontFamily != null) {
+      span.style.fontFamily = cssFontFamily(run.fontFamily, {
+        weight: run.fontWeight ?? (run.bold ? 700 : void 0),
+        style: run.italic ? "italic" : void 0
+      });
+      span.setAttribute("data-font-family", run.fontFamily);
+    }
+    const color = solidColor(run.fill);
+    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";
+    const decorations = [];
+    if (run.underline) decorations.push("underline");
+    if (run.strikethrough) decorations.push("line-through");
+    if (run.overline) decorations.push("overline");
+    if (decorations.length > 0) span.style.textDecoration = decorations.join(" ");
+    if (run.script != null) span.style.verticalAlign = run.script;
+    if (run.baselineShift != null) {
+      span.setAttribute("data-baseline-shift", String(run.baselineShift));
+    }
+    if (run.letterSpacing != null) span.style.letterSpacing = `${run.letterSpacing}px`;
+    if (run.textTransform != null) span.style.textTransform = run.textTransform;
+    parent.appendChild(span);
+  }
+}
+function sourceText(el) {
+  let out = "";
+  for (const n of el.childNodes) {
+    if (n.nodeType === Node.TEXT_NODE) out += n.data;
+    else if (n instanceof Element) out += n.hasAttribute(BREAK_ATTR) ? restoreBreak(n) : sourceText(n);
+  }
+  return out;
+}
+function piecesMatch(span, transform) {
+  const want = smallCapsPieces(sourceText(span), transform);
+  const have = [];
+  for (const n of span.childNodes) {
+    let small;
+    let text;
+    if (n.nodeType === Node.TEXT_NODE) {
+      small = false;
+      text = n.data;
+    } else if (n instanceof HTMLElement && n.hasAttribute(BREAK_ATTR)) {
+      small = false;
+      text = restoreBreak(n);
+    } else if (n instanceof HTMLElement && isSmallCapsPiece(n) && n.children.length === 0) {
+      small = true;
+      text = n.textContent ?? "";
+    } else return false;
+    if (text.length === 0) continue;
+    const last = have[have.length - 1];
+    if (last && last.small === small) last.text += text;
+    else have.push({ text, small });
+  }
+  return want.length === have.length && want.every((p, i) => p.text === have[i].text && p.small === have[i].small);
+}
+function normalizeSmallCaps(parent) {
+  let changed = false;
+  const visit = (el, variant, transform) => {
+    const v = cssFontVariant(el) ?? variant;
+    const tt = el.style.textTransform;
+    const t = TRANSFORMS.has(tt) ? tt : transform;
+    if (el.hasAttribute("data-run")) {
+      if (v === "small-caps") {
+        if (!piecesMatch(el, t)) {
+          writeSmallCaps(el, sourceText(el), t);
+          changed = true;
+        }
+      } else if (el.querySelector("[data-small-caps]")) {
+        const text = sourceText(el);
+        el.replaceChildren();
+        appendOverlayText(el, text);
+        changed = true;
+      }
+      return;
+    }
+    for (const child of el.children) if (child instanceof HTMLElement) visit(child, v, t);
+  };
+  visit(parent, "normal", "none");
+  return changed;
+}
+function applyOverlayDirection(el, style) {
+  const auto = style.direction === "auto";
+  el.style.direction = auto ? "" : style.direction;
+  el.style.setProperty("unicode-bidi", auto ? "plaintext" : "");
+  el.style.setProperty("tab-size", String(style.tabSize));
+  const justify = style.align === "justify";
+  const edge = style.direction === "auto" ? justify ? "start" : style.align : resolveAlign(style.align, style.direction);
+  el.style.textAlign = justify ? "justify" : edge;
+  el.style.setProperty("text-align-last", justify ? edge : "");
+}
+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;
+}
+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 spliceRunAt(runs, at, run) {
+  const out = [];
+  let pos = 0;
+  let placed = false;
+  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;
+  }
+  if (!placed) out.push(run);
+  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 placeCaretBetweenRuns(overlay, runs, offset) {
+  let acc = 0;
+  let index = -1;
+  for (let i = 0; i < runs.length; i++) {
+    acc += runs[i].text.length;
+    if (acc === offset) {
+      index = i;
+      break;
+    }
+    if (acc > offset) return;
+  }
+  const span = index >= 0 ? overlay.children[index] : null;
+  const sel = window.getSelection();
+  if (!span || !sel) return;
+  const range = document.createRange();
+  range.setStartAfter(span);
+  range.collapse(true);
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+var NO_PENDING = Object.freeze({});
+function mergePending(prev, patch) {
+  const next = { ...prev };
+  const superseded = supersededKey(patch);
+  if (superseded !== void 0) delete next[superseded];
+  for (const [key, value] of Object.entries(patch)) {
+    if (value === void 0 || value === false) delete next[key];
+    else next[key] = value;
+  }
+  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);
+  const editingIdRef = useLatest(editingId);
+  const overlayRef = useRef(null);
+  const baseRef = useRef(resolveTextStyle(void 0));
+  const [nodeStyle, setNodeStyle] = useState(null);
+  const nodeStyleRef = useRef(null);
+  const holdNodeStyle = useCallback((style) => {
+    nodeStyleRef.current = style;
+    setNodeStyle(style);
+  }, []);
+  const styleOf = useCallback(
+    (id) => nodeStyleRef.current ?? optsRef.current.getStyle(id),
+    [optsRef]
+  );
+  const tickRef = useRef(() => {
+  });
+  const frameLoop = useVisibleRaf(() => {
+    tickRef.current();
+  });
+  const initialCaretRef = useRef("all");
+  const openedRef = useRef(null);
+  const [selection, setSelection] = useState(null);
+  const [rangeStyle, setRangeStyle] = useState(null);
+  const [pendingStyle, setPendingStyle] = useState(NO_PENDING);
+  const pendingRef = useRef(NO_PENDING);
+  const pendingAtRef = useRef(null);
+  const armPending = useCallback((next, at) => {
+    const empty = Object.keys(next).length === 0;
+    pendingRef.current = empty ? NO_PENDING : next;
+    pendingAtRef.current = empty ? null : at;
+    setPendingStyle(pendingRef.current);
+  }, []);
+  const dropPending = useCallback(() => {
+    if (pendingAtRef.current === null) return;
+    pendingRef.current = NO_PENDING;
+    pendingAtRef.current = null;
+    setPendingStyle(NO_PENDING);
+  }, []);
+  const selectionRef = useRef(null);
+  const publishRange = useCallback((overlay, range) => {
+    const collapsed = range.start === range.end;
+    if (pendingAtRef.current !== null && !(collapsed && range.start === pendingAtRef.current)) {
+      dropPending();
+    }
+    selectionRef.current = range;
+    setSelection((prev) => sameSelection(prev, range) ? prev : range);
+    const runs = domToRuns(overlay);
+    setRangeStyle(collapsed ? styleAtCaret(runs, range.start) : styleAtRange(runs, range.start, range.end));
+  }, [dropPending]);
+  const syncSelection = useCallback(() => {
+    const overlay = overlayRef.current;
+    if (!overlay) return;
+    const next = readSelectionOffsets(overlay);
+    if (next === null) return;
+    publishRange(overlay, next);
+  }, [publishRange]);
+  const clearSelection = useCallback(() => {
+    selectionRef.current = null;
+    setSelection(null);
+    setRangeStyle(null);
+    dropPending();
+  }, [dropPending]);
+  const cancelEdit = useCallback(() => {
+    setEditingId(null);
+  }, []);
+  const commit = useCallback(() => {
+    const id = editingId;
+    const overlay = overlayRef.current;
+    if (id == null || !overlay) {
+      setEditingId(null);
+      return;
+    }
+    const { getRuns, setRuns, setText, setStyle, commit: commitAll } = optsRef.current;
+    const priorRuns = getRuns?.(id);
+    const read = domToRuns(overlay);
+    const style = nodeStyleRef.current;
+    if (!style && JSON.stringify(read) === openedRef.current) {
+      setEditingId(null);
+      return;
+    }
+    const runs = trimCaretHolder(read);
+    const hadRuns = priorRuns != null && priorRuns.length > 0;
+    const runsInPlay = hadRuns || runsCarryStyling(runs);
+    const text = runsToPlainText(runs);
+    holdNodeStyle(null);
+    if (commitAll) {
+      commitAll(id, { text, ...runsInPlay ? { runs } : {}, ...style ? { style } : {} });
+    } else {
+      if (style) setStyle?.(id, style);
+      setText?.(id, text);
+      if (setRuns && runsInPlay) setRuns(id, runs);
+    }
+    setEditingId(null);
+  }, [editingId, optsRef, holdNodeStyle]);
+  const startEdit = useCallback((id, opts2) => {
+    initialCaretRef.current = opts2?.caret ?? "all";
+    setEditingId(id);
+  }, []);
+  const isEditing = useCallback((id) => editingId === id, [editingId]);
+  const applyStyleToSelection = useCallback((patch) => {
+    const overlay = overlayRef.current;
+    if (!overlay) return;
+    if (Object.keys(patch).length === 0) return;
+    const range = readSelectionOffsets(overlay) ?? selectionRef.current;
+    if (!range) return;
+    const id = editingIdRef.current;
+    const canWriteStyle = optsRef.current.setStyle !== void 0 || optsRef.current.commit !== void 0;
+    const runs = domToRuns(overlay);
+    if (patch.bold === false && !("fontWeight" in patch) && id !== null) {
+      patch = { ...patch, ...unboldPatch(styleOf(id) ?? {}) };
+    }
+    const unsetFlag = id !== null && canWriteStyle ? Object.keys(patch).find((key) => key !== "bold" && patch[key] === false && nodeHasFlag(styleOf(id) ?? {}, key)) : void 0;
+    if (unsetFlag !== void 0 && id !== null) {
+      const r = setFlagOverRange(runs, styleOf(id) ?? {}, range.start, range.end, unsetFlag, false);
+      holdNodeStyle(r.style);
+      const resolved = resolveTextStyle(r.style, optsRef.current.getPaint?.(id));
+      baseRef.current = resolved;
+      applyOverlayStyle(overlay, resolved);
+      writeRunsPreservingSelection(overlay, r.runs, range.start, range.end, resolved);
+      publishRange(overlay, range);
+      if (range.start === range.end) {
+        armPending({ ...pendingRef.current, [unsetFlag]: false }, range.start);
+      }
+      restoreOverlayFocus(overlay, range);
+      const rest = { ...patch };
+      delete rest[unsetFlag];
+      if (Object.keys(rest).length > 0) applyStyleToSelection(rest);
+      return;
+    }
+    if (range.start === range.end) {
+      armPending(mergePending(pendingRef.current, patch), range.start);
+      restoreOverlayFocus(overlay, range);
+      return;
+    }
+    const next = applyStyleToRange(runs, range.start, range.end, patch);
+    writeRunsPreservingSelection(overlay, next, range.start, range.end, baseRef.current);
+    restoreOverlayFocus(overlay, range);
+    publishRange(overlay, range);
+  }, [publishRange, armPending, editingIdRef, optsRef, styleOf, holdNodeStyle]);
+  const toggleStyle = useCallback((toggle) => {
+    const overlay = overlayRef.current;
+    if (!overlay) return;
+    const range = readSelectionOffsets(overlay) ?? selectionRef.current;
+    if (!range) return;
+    const runs = domToRuns(overlay);
+    const id = editingIdRef.current;
+    const nodeStyle2 = (id !== null ? styleOf(id) : void 0) ?? {};
+    const current = range.start === range.end ? patchRangeStyle(styleAtCaret(runs, range.start), pendingRef.current) : styleAtRange(runs, range.start, range.end);
+    applyStyleToSelection(patchForToggle(current, toggle, nodeStyle2));
+  }, [applyStyleToSelection, editingIdRef, styleOf]);
+  useEffect(() => {
+    if (editingId == null) return;
+    const { container, getText, getStyle, getPaint } = optsRef.current;
+    if (!container) return;
+    holdNodeStyle(null);
+    const style = resolveTextStyle(getStyle(editingId), getPaint?.(editingId));
+    const overlay = document.createElement("div");
+    const overlayClass = `weasel-text-edit-${++OVERLAY_SEQ}`;
+    overlay.classList.add(overlayClass);
+    overlay.setAttribute("contenteditable", "true");
+    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));
+    }
+    openedRef.current = JSON.stringify(domToRuns(overlay));
+    applyOverlayStyle(overlay, style);
+    const hold = holdForFaces(style, initialRuns ?? []);
+    if (hold) overlay.style.opacity = "0";
+    const styleEl = installSelectionStyle(overlayClass, style);
+    const clipBox = createClipBox();
+    clipBox.appendChild(overlay);
+    container.appendChild(clipBox);
+    overlayRef.current = overlay;
+    const place = () => {
+      const clip = optsRef.current.getClipRect?.() ?? null;
+      placeOverlay(overlay, clipBox, optsRef.current.getScreenPose(editingId), clip, style);
+    };
+    place();
+    let held = hold !== null;
+    const release = () => {
+      if (!held) return;
+      held = false;
+      clearTimeout(holdTimer);
+      place();
+      overlay.style.opacity = "";
+    };
+    const holdTimer = held ? setTimeout(release, optsRef.current.fontHold ?? TEXT_EDIT_FONT_HOLD) : void 0;
+    void hold?.then(release);
+    const range = document.createRange();
+    const initial = initialCaretRef.current;
+    if (initial === "all") {
+      range.selectNodeContents(overlay);
+    } else {
+      placeCaretAt(overlay, range, initial);
+    }
+    overlay.focus();
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+    syncSelection();
+    const onKeyDown = (e) => {
+      if (e.isComposing || e.keyCode === 229) return;
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        commit();
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        if (optsRef.current.escape === "commit") commit();
+        else cancelEdit();
+        return;
+      }
+      const toggle = toggleForKey(e);
+      if (toggle) {
+        e.preventDefault();
+        toggleStyle(toggle);
+      }
+    };
+    const onBlur = (e) => {
+      const next = e.relatedTarget;
+      const isChrome = optsRef.current.isEditorChrome;
+      if (isChrome && next instanceof Element && isChrome(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);
+        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);
+      }
+      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;
+      commit();
+    };
+    overlay.addEventListener("keydown", onKeyDown);
+    overlay.addEventListener("blur", onBlur);
+    overlay.addEventListener("input", onInput);
+    overlay.addEventListener("beforeinput", onBeforeInput);
+    document.addEventListener("pointerdown", onPointerDownOutside, true);
+    document.addEventListener("selectionchange", syncSelection);
+    tickRef.current = () => {
+      place();
+      frameLoop.request();
+    };
+    frameLoop.request();
+    return () => {
+      held = false;
+      clearTimeout(holdTimer);
+      frameLoop.cancel();
+      tickRef.current = () => {
+      };
+      overlay.removeEventListener("keydown", onKeyDown);
+      overlay.removeEventListener("blur", onBlur);
+      overlay.removeEventListener("input", onInput);
+      overlay.removeEventListener("beforeinput", onBeforeInput);
+      document.removeEventListener("pointerdown", onPointerDownOutside, true);
+      document.removeEventListener("selectionchange", syncSelection);
+      clipBox.remove();
+      styleEl?.remove();
+      overlayRef.current = null;
+      holdNodeStyle(null);
+      clearSelection();
+    };
+  }, [
+    editingId,
+    opts.container,
+    optsRef,
+    commit,
+    cancelEdit,
+    syncSelection,
+    clearSelection,
+    frameLoop,
+    toggleStyle,
+    dropPending,
+    publishRange,
+    holdNodeStyle
+  ]);
+  return {
+    editingId,
+    startEdit,
+    cancelEdit,
+    commit,
+    isEditing,
+    nodeStyle,
+    selection,
+    rangeStyle,
+    pendingStyle,
+    applyStyleToSelection,
+    toggleStyle
+  };
+}
+var OVERLAY_SEQ = 0;
+function holdForFaces(style, runs) {
+  const pending = [
+    cssFontFamilyLoading(style.fontFamily, {
+      weight: numericWeight(style.fontWeight),
+      style: style.fontStyle
+    }),
+    ...runs.filter((r) => r.fontFamily != null).map((r) => cssFontFamilyLoading(r.fontFamily, {
+      weight: r.fontWeight ?? (r.bold ? 700 : void 0),
+      style: r.italic ? "italic" : void 0
+    }))
+  ].filter((p) => p !== null);
+  return pending.length === 0 ? null : Promise.all(pending);
+}
+function placeCaretAt(root, range, offset) {
+  let remaining = offset;
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let node = walker.nextNode();
+  while (node) {
+    const len = node.data.length;
+    if (remaining <= len) {
+      range.setStart(node, remaining);
+      range.setEnd(node, remaining);
+      return;
+    }
+    remaining -= len;
+    node = walker.nextNode();
+  }
+  range.selectNodeContents(root);
+  range.collapse(false);
+}
+function createClipBox() {
+  const el = document.createElement("div");
+  el.style.position = "absolute";
+  el.style.margin = "0";
+  el.style.padding = "0";
+  el.style.border = "0";
+  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");
+  const decls = [];
+  if (style.selectionBackground != null) {
+    decls.push(`background: ${style.selectionBackground};`);
+  }
+  if (style.selectionColor != null) {
+    decls.push(`color: ${style.selectionColor};`);
+  }
+  el.textContent = `.${overlayClass}::selection { ${decls.join(" ")} }`;
+  document.head.appendChild(el);
+  return el;
+}
+var ALIGN_ANCHOR = { left: 0, center: 0.5, right: 1 };
+function overlayTop(pose, contentHeight, drop = 0) {
+  const slack = verticalAlignOffset(pose.verticalAlign, pose.height, contentHeight);
+  return pose.y + (slack + drop) * (pose.zoom ?? 1);
+}
+function baselineDrop(el, style, pose, lineHeight) {
+  const canvas = layoutTextPose({
+    x: 0,
+    y: 0,
+    width: pose.width,
+    height: pose.height,
+    text: " ",
+    style: {
+      fontFamily: style.fontFamily,
+      fontWeight: style.fontWeight,
+      fontStyle: style.fontStyle,
+      fontSize: pose.fontSize,
+      lineHeight,
+      script: style.script
+    }
+  }).laid.lines[0]?.baselineY ?? 0;
+  const css = cssBaseline(el);
+  return canvas > 0 && css > 0 ? canvas - css : 0;
+}
+var CSS_BASELINES = /* @__PURE__ */ new Map();
+function cssBaseline(el) {
+  const parent = el.parentElement;
+  if (!parent) return 0;
+  const { fontFamily, fontWeight, fontStyle, fontSize, lineHeight, textRendering } = el.style;
+  const key = [fontFamily, fontWeight, fontStyle, fontSize, lineHeight, textRendering].join("|");
+  const cached = CSS_BASELINES.get(key);
+  if (cached !== void 0) return cached;
+  const line = document.createElement("div");
+  Object.assign(line.style, {
+    position: "absolute",
+    left: "0",
+    top: "0",
+    width: "100px",
+    margin: "0",
+    padding: "0",
+    border: "0",
+    visibility: "hidden",
+    whiteSpace: "pre",
+    fontFamily,
+    fontWeight,
+    fontStyle,
+    fontSize,
+    lineHeight,
+    textRendering
+  });
+  const mark = document.createElement("span");
+  Object.assign(mark.style, { display: "inline-block", width: "0", height: "0", verticalAlign: "baseline" });
+  line.appendChild(mark);
+  parent.appendChild(line);
+  const box = line.getBoundingClientRect();
+  const scale = box.width / 100;
+  const baseline = scale > 0 ? (mark.getBoundingClientRect().top - box.top) / scale : 0;
+  line.remove();
+  if (baseline > 0 && document.fonts?.status !== "loading") {
+    if (CSS_BASELINES.size >= 64) CSS_BASELINES.clear();
+    CSS_BASELINES.set(key, baseline);
+  }
+  return baseline;
+}
+function placeOverlay(el, clipBox, pose, clip, style) {
+  if (!pose) {
+    el.style.display = "none";
+    return;
+  }
+  clipBox.style.overflow = clip ? "clip" : "visible";
+  clipBox.style.left = `${clip?.x ?? 0}px`;
+  clipBox.style.top = `${clip?.y ?? 0}px`;
+  clipBox.style.width = `${clip?.width ?? 0}px`;
+  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`;
+  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;
+  const lineHeight = pose.lineHeight ?? style.lineHeight;
+  el.style.fontSize = `${pose.fontSize * (script?.size ?? 1)}px`;
+  el.style.lineHeight = script ? `${pose.fontSize * lineHeight}px` : String(lineHeight);
+  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`;
+  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";
+  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 };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map