@weasel-js/core 1.6.1 → 1.7.1

package/dist/features/text/useSceneTextEdit.js

@@ -0,0 +1,138 @@
+import { effectivePose as e } from "../../core/scene/effectivePose.js";
+import { asNodeId as t } from "../../core/scene/types.js";
+import { findMountedCanvas as n } from "../../canvas/mountedCanvases.js";
+import { caretIndexAt as r, pointInTextPose as i } from "./hitTest.js";
+import { useTextEdit as a } from "./useTextEdit.js";
+import { resolveScreenLength as o } from "@weasel-js/paint";
+import { useCallback as s, useRef as c } from "react";
+import { useLatest as l } from "@weasel-js/react";
+import { clientToCanvas as u } from "@weasel-js/routing";
+//#region src/features/text/useSceneTextEdit.ts
+function d(e) {
+	return typeof e == "function" ? e() : e;
+}
+function f(f, p, m = {}) {
+	let h = l(f), g = l(m), _ = l(p), v = c(null), y = () => {
+		let e = _.current, t = e ? n(e, v.current) : null;
+		if (!e || !t) return null;
+		let r = t.element.getBoundingClientRect(), i = e.getBoundingClientRect();
+		return {
+			canvas: t,
+			box: {
+				x: r.left - i.left - e.clientLeft + e.scrollLeft,
+				y: r.top - i.top - e.clientTop + e.scrollTop,
+				width: r.width,
+				height: r.height
+			}
+		};
+	}, b = a({
+		container: p,
+		isEditorChrome: (e) => g.current.isEditorChrome?.(e) ?? !1,
+		escape: m.escape,
+		fontHold: m.fontHold,
+		getText: (e) => {
+			let n = h.current.get(t(e));
+			if (!n) return "";
+			let r = g.current.getText;
+			return r ? r(n.data) : n.data.text ?? "";
+		},
+		getStyle: (e) => {
+			let n = h.current.get(t(e));
+			if (!n) return;
+			let r = g.current.getStyle;
+			return r ? r(n.data) : n.data.style;
+		},
+		getPaint: (e) => {
+			let n = h.current.get(t(e));
+			if (!n) return;
+			let r = g.current.getPaint;
+			return r ? r(n.data) : {
+				fill: n.data.fill,
+				stroke: n.data.stroke
+			};
+		},
+		getScreenPose: (n) => {
+			let r = h.current, i = r.get(t(n));
+			if (!i) return null;
+			let a = e(r, i), s = g.current.getStyle ? g.current.getStyle(i.data) : i.data.style, c = y(), l = d(g.current.view) ?? c?.canvas.getView(), u = l ? l.scale.x : 1, f = c?.box.x ?? 0, p = c?.box.y ?? 0;
+			return {
+				x: f + (l ? (a.x - l.x) * l.scale.x : a.x),
+				y: p + (l ? (a.y - l.y) * l.scale.y : a.y),
+				width: a.width,
+				height: a.height,
+				fontSize: o(s?.fontSize ?? g.current.defaultFontSize ?? 16, u),
+				zoom: u,
+				verticalAlign: g.current.getVerticalAlign ? g.current.getVerticalAlign(i.data) : i.data.verticalAlign
+			};
+		},
+		getClipRect: () => y()?.box ?? null,
+		setText: (e, n) => {
+			let r = t(e), i = h.current.get(r);
+			if (!i) return;
+			let a = g.current.setText, o = a ? a(i.data, n) : {
+				...i.data,
+				text: n
+			};
+			h.current.update(r, { data: o });
+		},
+		getRuns: (e) => {
+			let n = h.current.get(t(e));
+			if (!n) return;
+			let r = g.current.getRuns;
+			return r ? r(n.data) : n.data.runs;
+		},
+		setRuns: (e, n) => {
+			let r = t(e), i = h.current.get(r);
+			if (!i) return;
+			let a = g.current.setRuns, o = a ? a(i.data, n) : {
+				...i.data,
+				runs: n
+			};
+			h.current.update(r, { data: o });
+		},
+		setStyle: (e, n) => {
+			let r = t(e), i = h.current.get(r);
+			if (!i) return;
+			let a = g.current.setStyle, o = a ? a(i.data, n) : {
+				...i.data,
+				style: n
+			};
+			h.current.update(r, { data: o });
+		}
+	}), x = s((t) => {
+		let a = t.target instanceof HTMLElement ? t.target : null;
+		if (!a) return;
+		let [o, s] = u(a, t.clientX, t.clientY), c = _.current, l = d(g.current.view) ?? (c ? n(c, a)?.getView() : void 0), f = l ? o / l.scale.x + l.x : o, p = l ? s / l.scale.y + l.y : s, m = (e) => g.current.getText ? g.current.getText(e) : e.text ?? "", y = (e) => g.current.getStyle ? g.current.getStyle(e) : e.style, x = (e) => g.current.getRuns ? g.current.getRuns(e) : e.runs, S = (e) => g.current.getVerticalAlign ? g.current.getVerticalAlign(e) : e.verticalAlign, C = h.current.renderOrderNodes();
+		for (let t = C.length - 1; t >= 0; t--) {
+			let n = C[t];
+			if (h.current.isLocked(n.id)) continue;
+			let o = m(n.data), s = e(h.current, n), c = {
+				x: s.x,
+				y: s.y,
+				width: s.width,
+				height: s.height,
+				text: o,
+				runs: x(n.data),
+				style: y(n.data),
+				verticalAlign: S(n.data)
+			};
+			if (i(f, p, c)) {
+				v.current = a, b.startEdit(String(n.id), { caret: r(f, p, c) });
+				return;
+			}
+		}
+	}, [
+		b,
+		_,
+		g,
+		h
+	]);
+	return {
+		...b,
+		onDoubleClick: x
+	};
+}
+//#endregion
+export { f as useSceneTextEdit };
+
+//# sourceMappingURL=useSceneTextEdit.js.map

package/dist/features/text/useSceneTextEdit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSceneTextEdit.js","names":["resolveView","view","useSceneTextEdit","sceneRef","useLatest","scene","optsRef","options","containerRef","container","openedOnRef","useRef","surface","root","canvas","findMountedCanvas","a","b","edit","useTextEdit","el","node","asNodeId","id","get","pose","effectivePose","style","at","zoom","originX","originY","resolveScreenLength","nid","setter","data","text","runs","onDoubleClick","useCallback","e","canvasX","canvasY","clientToCanvas","cx","cy","readText","readStyle","readRuns","readVerticalAlign","order","i","pointInTextPose","caretIndexAt"],"sources":["../../../src/features/text/useSceneTextEdit.ts"],"sourcesContent":["/**\n * `useSceneTextEdit` — scene-aware wrapper around `useTextEdit`.\n *\n * Every consumer that wires `useTextEdit` against a `useScene`-managed\n * scene writes the same callbacks: scene lookups for text / style /\n * runs / screen-pose, and `scene.update(id, { data })` for commits. This\n * helper bakes that wiring in. Consumers pass `scene` + `container` and\n * get back the same `UseTextEditReturn` shape (`startEdit`, `isEditing`,\n * `cancelEdit`, `commit`, `editingId`).\n *\n * Defaults assume the node's `data` carries `text` / `style` / `runs`\n * directly — matches the `useScene({ items })` trivial form where\n * `data === item` for text-shaped items, and matches `TextPose`-shaped\n * data. For custom data shapes, override any of the optional projections\n * (`getText` / `getStyle` / `getRuns` / `setText` / `setRuns` / `setStyle`).\n *\n * Pose component: the helper reads `(x, y, width, height)` straight off\n * the node's pose (typed `RectPose`) and projects that box through the view\n * of the weasel canvas mounted inside `container` — see the `view` option.\n * The overlay is clipped to that canvas's box, where its glyphs are clipped.\n * Consumers with non-rect poses should drop down to raw `useTextEdit` and\n * supply their own `getScreenPose`.\n */\nimport { useCallback, useRef, type MouseEvent } from 'react';\nimport { useLatest } from '@weasel-js/react';\nimport { asNodeId } from '../../core/scene/types';\nimport { effectivePose } from '../../core/scene/effectivePose';\nimport type { Scene } from '../../core/scene/types';\nimport type { FillStyle, Stroke } from '@weasel-js/paint';\nimport { resolveScreenLength } from '@weasel-js/paint';\nimport { clientToCanvas } from '@weasel-js/routing';\nimport { findMountedCanvas, type MountedCanvas } from '../../canvas/mountedCanvases';\nimport type { View } from '../../core/viewport/view';\nimport type { RectPose } from 'core/geometry/unionBounds';\nimport { caretIndexAt, pointInTextPose } from './hitTest';\nimport type { StyledRun } from '@weasel-js/text';\nimport type { TextPaint, TextStyle, TextVerticalAlign } from '@weasel-js/text';\nimport { useTextEdit, type TextEditClipRect, type UseTextEditReturn } from './useTextEdit';\n\n/** Shape the default projections expect `data` to satisfy. All fields\n *  optional so any object satisfies the constraint — projections fill in\n *  the gaps for non-default shapes. */\nexport interface DefaultTextData {\n  text?: string;\n  style?: TextStyle;\n  runs?: readonly StyledRun[];\n  fill?: FillStyle | null;\n  stroke?: Stroke | null;\n  verticalAlign?: TextVerticalAlign;\n}\n\n/** All-optional projections + fontSize fallback. */\nexport interface UseSceneTextEditOptions<TData> {\n  /** Read plain text from `data`. Default: `data.text ?? ''`. */\n  getText?: (data: TData) => string;\n  /** Read style from `data`. Default: `data.style`. */\n  getStyle?: (data: TData) => TextStyle | undefined;\n  /** Read the node's paint from `data`. Default: `data.fill` / `data.stroke`. */\n  getPaint?: (data: TData) => TextPaint | undefined;\n  /** Read rich-text runs from `data`. Default: `data.runs`. */\n  getRuns?: (data: TData) => readonly StyledRun[] | undefined;\n  /** Read the box vertical alignment from `data`. Default: `data.verticalAlign`. */\n  getVerticalAlign?: (data: TData) => TextVerticalAlign | undefined;\n  /** Produce updated data with new text. Default: `{ ...data, text }`. */\n  setText?: (data: TData, text: string) => TData;\n  /** Produce updated data with new runs. Default: `{ ...data, runs }`. */\n  setRuns?: (data: TData, runs: StyledRun[]) => TData;\n  /**\n   * Produce updated data with a new node-wide style. Default:\n   * `{ ...data, style }`. Written only when a range toggle has to *clear* a\n   * flag the node itself sets — the run algebra is additive, so that edit\n   * lowers the node flag and raises it on the runs outside the range. See\n   * `useTextEdit`'s `setStyle`.\n   */\n  setStyle?: (data: TData, style: TextStyle) => TData;\n  /** Fallback fontSize when `style.fontSize` is unset. Default `16`. */\n  defaultFontSize?: number;\n  /**\n   * The view to project through. Omit it and the view is read live from the\n   * weasel canvas mounted inside `container` (the one a double-click landed\n   * on, when there are several) — which is all a canvas that pans or zooms\n   * needs. With no canvas there, the node's world box is passed through as\n   * screen pixels.\n   *\n   * The overlay is positioned at the node's projected origin and CSS-scaled\n   * by the view, so every typographic metric on it — including the\n   * `fontSize` / `letterSpacing` a *run* carries — stays in world units and\n   * scales together.\n   *\n   * The overlay takes a single scale factor, so a non-uniform view scale is\n   * represented by its `scale.x`; text under `scale.x !== scale.y` will not\n   * match the canvas.\n   *\n   * Pass one to project through a camera other than the canvas's own. A\n   * thunk is re-read on every projection; a plain `View` is the value from\n   * the render that supplied it.\n   */\n  view?: View | (() => View);\n  /**\n   * Forwarded to `useTextEdit`: is `el` part of the editor's own chrome?\n   * Focus moving into it does not end the edit. Wire it to whatever renders\n   * the character controls.\n   */\n  isEditorChrome?: (el: Element) => boolean;\n  /** Forwarded to `useTextEdit`: what Escape does to the edit. */\n  escape?: 'cancel' | 'commit';\n  /** Forwarded to `useTextEdit`: how long an edit waits for its face. */\n  fontHold?: number;\n}\n\nfunction resolveView(view: View | (() => View) | undefined): View | undefined {\n  return typeof view === 'function' ? view() : view;\n}\n\n/** Return shape extends `UseTextEditReturn` with an `onDoubleClick`\n *  binding for the canvas container. Double-clicking inside a text\n *  node enters edit mode with the caret seeded at the clicked glyph. */\nexport interface UseSceneTextEditReturn extends UseTextEditReturn {\n  /** Bind to the element wrapping `<SceneCanvas>` (the same element\n   *  passed as `container`, or any ancestor that receives the dblclick\n   *  bubble). The handler looks up the canvas via `e.target`, hits the\n   *  top-most text node under the cursor via `pointInTextPose`, resolves\n   *  a caret offset via `caretIndexAt`, and starts edit on that node. */\n  onDoubleClick: (e: MouseEvent<HTMLElement>) => void;\n}\n\n/** Wire double-click-to-edit text on a scene: mounts a DOM editing overlay\n *  over the node being edited and writes the result back as an undoable op. */\nexport function useSceneTextEdit<\n  TData extends DefaultTextData,\n  TLayer extends string,\n  TPose extends RectPose = RectPose,\n>(\n  scene: Scene<TData, TLayer, TPose>,\n  container: HTMLElement | null,\n  options: UseSceneTextEditOptions<TData> = {},\n): UseSceneTextEditReturn {\n  // Stash scene + options in refs so the useTextEdit callbacks always see\n  // the current values without re-binding (the underlying hook also reads\n  // its options through a ref, so any re-creation would be churn).\n  const sceneRef = useLatest(scene);\n  const optsRef = useLatest(options);\n  const containerRef = useLatest(container);\n  // The last double-click's target, so the overlay projects through the\n  // canvas the edit was opened on.\n  const openedOnRef = useRef<EventTarget | null>(null);\n\n  // The canvas's box in container pixels is both the origin its view projects\n  // from and the region its glyphs are clipped to.\n  const surface = (): { canvas: MountedCanvas; box: TextEditClipRect } | null => {\n    const root = containerRef.current;\n    const canvas = root ? findMountedCanvas(root, openedOnRef.current) : null;\n    if (!root || !canvas) return null;\n    const a = canvas.element.getBoundingClientRect();\n    const b = root.getBoundingClientRect();\n    return {\n      canvas,\n      box: {\n        x: a.left - b.left - root.clientLeft + root.scrollLeft,\n        y: a.top - b.top - root.clientTop + root.scrollTop,\n        width: a.width,\n        height: a.height,\n      },\n    };\n  };\n\n  const edit = useTextEdit({\n    container,\n    isEditorChrome: (el) => optsRef.current.isEditorChrome?.(el) ?? false,\n    escape: options.escape,\n    fontHold: options.fontHold,\n    getText: (id) => {\n      const node = sceneRef.current.get(asNodeId(id));\n      if (!node) return '';\n      const get = optsRef.current.getText;\n      return get ? get(node.data) : (node.data.text ?? '');\n    },\n    getStyle: (id) => {\n      const node = sceneRef.current.get(asNodeId(id));\n      if (!node) return undefined;\n      const get = optsRef.current.getStyle;\n      return get ? get(node.data) : node.data.style;\n    },\n    getPaint: (id) => {\n      const node = sceneRef.current.get(asNodeId(id));\n      if (!node) return undefined;\n      const get = optsRef.current.getPaint;\n      return get ? get(node.data) : { fill: node.data.fill, stroke: node.data.stroke };\n    },\n    getScreenPose: (id) => {\n      const scene = sceneRef.current;\n      const node = scene.get(asNodeId(id));\n      if (!node) return null;\n      const pose = effectivePose(scene, node);\n      const style = optsRef.current.getStyle\n        ? optsRef.current.getStyle(node.data)\n        : node.data.style;\n      const at = surface();\n      const view = resolveView(optsRef.current.view) ?? at?.canvas.getView();\n      const zoom = view ? view.scale.x : 1;\n      const originX = at?.box.x ?? 0;\n      const originY = at?.box.y ?? 0;\n      // Only the origin is projected. Width, height and font size stay in\n      // world units and reach the screen through the overlay's own\n      // `scale(zoom)` — see `TextEditScreenPose.zoom`.\n      return {\n        x: originX + (view ? (pose.x - view.x) * view.scale.x : pose.x),\n        y: originY + (view ? (pose.y - view.y) * view.scale.y : pose.y),\n        width: pose.width,\n        height: pose.height,\n        // Against `zoom`, the same factor the overlay scales back up by, so a\n        // `{ px }` size arrives on screen at the pixel count it names.\n        fontSize: resolveScreenLength(\n          style?.fontSize ?? optsRef.current.defaultFontSize ?? 16,\n          zoom,\n        ),\n        zoom,\n        verticalAlign: optsRef.current.getVerticalAlign\n          ? optsRef.current.getVerticalAlign(node.data)\n          : node.data.verticalAlign,\n      };\n    },\n    getClipRect: () => surface()?.box ?? null,\n    setText: (id, text) => {\n      const nid = asNodeId(id);\n      const node = sceneRef.current.get(nid);\n      if (!node) return;\n      const setter = optsRef.current.setText;\n      const data = setter ? setter(node.data, text) : { ...node.data, text };\n      sceneRef.current.update(nid, { data });\n    },\n    getRuns: (id) => {\n      const node = sceneRef.current.get(asNodeId(id));\n      if (!node) return undefined;\n      const get = optsRef.current.getRuns;\n      return get ? get(node.data) : node.data.runs;\n    },\n    setRuns: (id, runs) => {\n      const nid = asNodeId(id);\n      const node = sceneRef.current.get(nid);\n      if (!node) return;\n      const setter = optsRef.current.setRuns;\n      const data = setter ? setter(node.data, runs) : { ...node.data, runs };\n      sceneRef.current.update(nid, { data });\n    },\n    setStyle: (id, style) => {\n      const nid = asNodeId(id);\n      const node = sceneRef.current.get(nid);\n      if (!node) return;\n      const setter = optsRef.current.setStyle;\n      const data = setter ? setter(node.data, style) : { ...node.data, style };\n      sceneRef.current.update(nid, { data });\n    },\n  });\n\n  const onDoubleClick = useCallback((e: MouseEvent<HTMLElement>) => {\n    // The dblclick bubbles from the canvas up to any wrapping container; the\n    // element it started on is what the click coordinates are relative to.\n    const canvas = e.target instanceof HTMLElement ? e.target : null;\n    if (!canvas) return;\n\n    // `pointInTextPose` and `caretIndexAt` both work in world units, so the\n    // canvas-space click has to be un-projected before either sees it.\n    const [canvasX, canvasY] = clientToCanvas(canvas, e.clientX, e.clientY);\n    const root = containerRef.current;\n    const view = resolveView(optsRef.current.view)\n      ?? (root ? findMountedCanvas(root, canvas)?.getView() : undefined);\n    const cx = view ? canvasX / view.scale.x + view.x : canvasX;\n    const cy = view ? canvasY / view.scale.y + view.y : canvasY;\n    const readText = (data: TData): string =>\n      optsRef.current.getText ? optsRef.current.getText(data) : (data.text ?? '');\n    const readStyle = (data: TData): TextStyle | undefined =>\n      optsRef.current.getStyle ? optsRef.current.getStyle(data) : data.style;\n    const readRuns = (data: TData): readonly StyledRun[] | undefined =>\n      optsRef.current.getRuns ? optsRef.current.getRuns(data) : data.runs;\n    const readVerticalAlign = (data: TData): TextVerticalAlign | undefined =>\n      optsRef.current.getVerticalAlign ? optsRef.current.getVerticalAlign(data) : data.verticalAlign;\n\n    // Top-most-first hit test: renderOrder() is back-to-front, so iterate\n    // in reverse and break on the first hit.\n    const order = sceneRef.current.renderOrderNodes();\n    for (let i = order.length - 1; i >= 0; i--) {\n      const node = order[i];\n      if (sceneRef.current.isLocked(node.id)) continue;\n      const text = readText(node.data);\n      const at = effectivePose(sceneRef.current, node);\n      const pose = {\n        x: at.x,\n        y: at.y,\n        width: at.width,\n        height: at.height,\n        text,\n        runs: readRuns(node.data) as StyledRun[] | undefined,\n        style: readStyle(node.data),\n        verticalAlign: readVerticalAlign(node.data),\n      };\n      if (!pointInTextPose(cx, cy, pose)) continue;\n\n      openedOnRef.current = canvas;\n      edit.startEdit(String(node.id), { caret: caretIndexAt(cx, cy, pose) });\n      return;\n    }\n  }, [edit, containerRef, optsRef, sceneRef]);\n\n  return { ...edit, onDoubleClick };\n}\n"],"mappings":"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"}

package/dist/features/text/useTextEdit.js

@@ -0,0 +1,465 @@
+import { useVisibleRaf as e } from "../../scheduling/useVisibleRaf.js";
+import { SMALL_CAPS_SCALE_PROPERTY as t, appendOverlayText as n, charOffsetToDomPosition as r, domPositionToCharOffset as i, domToRuns as a, normalizeSmallCaps as o, runsToDom as s } from "./domRuns.js";
+import { applyStyleToRange as c, patchRangeStyle as l, runsCarryStyling as u, styleAtRange as d, supersededKey as f } from "./runs/rangeStyle.js";
+import { nodeHasFlag as p, setFlagOverRange as m, unboldPatch as h } from "./runs/flagRange.js";
+import { rangeWeight as g } from "./runs/effectiveRangeStyle.js";
+import { cssFontFamily as _, cssFontFamilyLoading as v } from "@weasel-js/font";
+import { fontString as y, layoutTextPose as b, numericWeight as x, resolveAlign as S, resolveTextStyle as C, runsToPlainText as w, scriptMetricsFor as T, smallCapsScaleFor as E, verticalAlignOffset as D } from "@weasel-js/text";
+import { useCallback as O, useEffect as k, useRef as A, useState as j } from "react";
+import { useLatest as M } from "@weasel-js/react";
+//#region src/features/text/useTextEdit.ts
+var N = [
+	{
+		key: "b",
+		shift: !1,
+		toggle: "bold"
+	},
+	{
+		key: "i",
+		shift: !1,
+		toggle: "italic"
+	},
+	{
+		key: "u",
+		shift: !1,
+		toggle: "underline"
+	},
+	{
+		key: "x",
+		shift: !0,
+		toggle: "strikethrough"
+	},
+	{
+		key: "=",
+		shift: !0,
+		toggle: "super"
+	},
+	{
+		key: "-",
+		shift: !0,
+		toggle: "sub"
+	}
+], P = {
+	"+": "=",
+	_: "-"
+};
+function ee(e) {
+	if (!e.metaKey && !e.ctrlKey) return null;
+	let t = e.key.toLowerCase(), n = P[t] ?? t;
+	return N.find((t) => t.key === n && t.shift === e.shiftKey)?.toggle ?? null;
+}
+function F(e, t, n) {
+	if (t === "super" || t === "sub") return { script: e.script === t ? void 0 : t };
+	let r = t === "bold" ? g(e, n).bold === !0 : e[t] === !0 || p(n, t);
+	return { [t]: !r };
+}
+function I(e, t) {
+	return t > 0 ? d(e, t - 1, t) : d(e, 0, 1);
+}
+function te(e, t, n) {
+	let r = [], i = 0, a = !1;
+	for (let o of e) {
+		let e = i + o.text.length;
+		if (!a && t <= e) {
+			let e = t - i;
+			e > 0 && r.push({
+				...o,
+				text: o.text.slice(0, e)
+			}), r.push(n), e < o.text.length && r.push({
+				...o,
+				text: o.text.slice(e)
+			}), a = !0;
+		} else r.push({ ...o });
+		i = e;
+	}
+	return a || r.push(n), c(r, 0, 0, {});
+}
+function L(e, t) {
+	let n = document.activeElement;
+	if (n === e || e.contains(n) || n instanceof HTMLInputElement || n instanceof HTMLTextAreaElement || n instanceof HTMLElement && n.isContentEditable || n instanceof Element && n.closest("[role=\"dialog\"]") !== null) return;
+	e.focus();
+	let i = r(e, t.start), a = r(e, t.end), o = window.getSelection();
+	if (!i || !a || !o) return;
+	let s = document.createRange();
+	s.setStart(i.node, i.offset), s.setEnd(a.node, a.offset), o.removeAllRanges(), o.addRange(s);
+}
+function ne(e, t, n) {
+	let r = 0, i = -1;
+	for (let e = 0; e < t.length; e++) {
+		if (r += t[e].text.length, r === n) {
+			i = e;
+			break;
+		}
+		if (r > n) return;
+	}
+	let a = i >= 0 ? e.children[i] : null, o = window.getSelection();
+	if (!a || !o) return;
+	let s = document.createRange();
+	s.setStartAfter(a), s.collapse(!0), o.removeAllRanges(), o.addRange(s);
+}
+var R = Object.freeze({});
+function re(e, t) {
+	let n = { ...e }, r = f(t);
+	r !== void 0 && delete n[r];
+	for (let [e, r] of Object.entries(t)) r === void 0 || r === !1 ? delete n[e] : n[e] = r;
+	return n;
+}
+function z(e) {
+	let t = window.getSelection();
+	if (!t || t.rangeCount === 0) return null;
+	let n = t.getRangeAt(0);
+	if (!e.contains(n.startContainer) || !e.contains(n.endContainer)) return null;
+	let r = i(e, n.startContainer, n.startOffset), a = i(e, n.endContainer, n.endOffset);
+	return r <= a ? {
+		start: r,
+		end: a
+	} : {
+		start: a,
+		end: r
+	};
+}
+function B(e, t, n, i, a) {
+	let o = document.activeElement, c = o !== e && !e.contains(o) && (o instanceof HTMLInputElement || o instanceof HTMLTextAreaElement || o instanceof HTMLElement && o.isContentEditable);
+	if (s(t, e, a), c) return;
+	let l = r(e, n), u = r(e, i), d = window.getSelection();
+	if (!l || !u || !d) return;
+	let f = document.createRange();
+	f.setStart(l.node, l.offset), f.setEnd(u.node, u.offset), d.removeAllRanges(), d.addRange(f);
+}
+function ie(e) {
+	let t = e[e.length - 1];
+	if (t === void 0 || !t.text.endsWith("\n")) return e;
+	let n = {
+		...t,
+		text: t.text.slice(0, -1)
+	}, r = e.slice(0, -1);
+	return n.text === "" ? r : [...r, n];
+}
+function ae(e, t) {
+	return e === null || t === null ? e === t : e.start === t.start && e.end === t.end;
+}
+var V = 100;
+function H(t) {
+	let i = M(t), [f, g] = j(null), _ = M(f), v = A(null), y = A(C(void 0)), b = A(() => {}), x = e(() => {
+		b.current();
+	}), S = A("all"), [T, E] = j(null), [D, N] = j(null), [P, H] = j(R), U = A(R), W = A(null), G = O((e, t) => {
+		let n = Object.keys(e).length === 0;
+		U.current = n ? R : e, W.current = n ? null : t, H(U.current);
+	}, []), K = O(() => {
+		W.current !== null && (U.current = R, W.current = null, H(R));
+	}, []), q = A(null), J = O((e, t) => {
+		let n = t.start === t.end;
+		W.current !== null && !(n && t.start === W.current) && K(), q.current = t, E((e) => ae(e, t) ? e : t);
+		let r = a(e);
+		N(n ? I(r, t.start) : d(r, t.start, t.end));
+	}, [K]), Y = O(() => {
+		let e = v.current;
+		if (!e) return;
+		let t = z(e);
+		t !== null && J(e, t);
+	}, [J]), pe = O(() => {
+		q.current = null, E(null), N(null), K();
+	}, [K]), X = O(() => {
+		g(null);
+	}, []), Z = O(() => {
+		let e = f, t = v.current;
+		if (e == null || !t) {
+			g(null);
+			return;
+		}
+		let n = i.current.getRuns?.(e), r = i.current.setRuns, o = ie(a(t)), s = n != null && n.length > 0;
+		i.current.setText(e, w(o)), r && (s || u(o)) && r(e, o), g(null);
+	}, [f, i]), me = O((e, t) => {
+		S.current = t?.caret ?? "all", g(e);
+	}, []), he = O((e) => f === e, [f]), Q = O((e) => {
+		let t = v.current;
+		if (!t || Object.keys(e).length === 0) return;
+		let n = z(t) ?? q.current;
+		if (!n) return;
+		let r = _.current, o = i.current.setStyle, s = a(t);
+		e.bold === !1 && !("fontWeight" in e) && r !== null && (e = {
+			...e,
+			...h(i.current.getStyle(r) ?? {})
+		});
+		let l = r !== null && o ? Object.keys(e).find((t) => t !== "bold" && e[t] === !1 && p(i.current.getStyle(r) ?? {}, t)) : void 0;
+		if (l !== void 0 && r !== null && o) {
+			let a = i.current.getStyle(r) ?? {}, c = m(s, a, n.start, n.end, l, !1);
+			o(r, c.style), B(t, c.runs, n.start, n.end, y.current), J(t, n), n.start === n.end && G({
+				...U.current,
+				[l]: !1
+			}, n.start), L(t, n);
+			let u = { ...e };
+			delete u[l], Object.keys(u).length > 0 && Q(u);
+			return;
+		}
+		if (n.start === n.end) {
+			G(re(U.current, e), n.start), L(t, n);
+			return;
+		}
+		B(t, c(s, n.start, n.end, e), n.start, n.end, y.current), L(t, n), J(t, n);
+	}, [
+		J,
+		G,
+		_,
+		i
+	]), $ = O((e) => {
+		let t = v.current;
+		if (!t) return;
+		let n = z(t) ?? q.current;
+		if (!n) return;
+		let r = a(t), o = _.current, s = (o === null ? void 0 : i.current.getStyle(o)) ?? {}, c = n.start === n.end ? l(I(r, n.start), U.current) : d(r, n.start, n.end);
+		Q(F(c, e, s));
+	}, [
+		Q,
+		_,
+		i
+	]);
+	return k(() => {
+		if (f == null) return;
+		let { container: e, getText: t, getStyle: c, getPaint: l } = i.current;
+		if (!e) return;
+		let u = C(c(f), l?.(f)), d = document.createElement("div"), p = `weasel-text-edit-${++oe}`;
+		d.classList.add(p), d.setAttribute("contenteditable", "true"), d.spellcheck = !1, y.current = u;
+		let m = i.current.getRuns?.(f);
+		m && m.length > 0 ? s(m, d, u) : u.fontVariantCaps === "small-caps" ? s([{ text: t(f) }], d, u) : n(d, t(f)), ue(d, u);
+		let h = se(u, m ?? []);
+		h && (d.style.opacity = "0");
+		let g = de(p, u), _ = le();
+		_.appendChild(d), e.appendChild(_), v.current = d;
+		let w = () => {
+			let e = i.current.getClipRect?.() ?? null;
+			fe(d, _, i.current.getScreenPose(f), e, u);
+		};
+		w();
+		let T = h !== null, E = () => {
+			T && (T = !1, clearTimeout(D), w(), d.style.opacity = "");
+		}, D = T ? setTimeout(E, i.current.fontHold ?? V) : void 0;
+		h?.then(E);
+		let O = document.createRange(), k = S.current;
+		k === "all" ? O.selectNodeContents(d) : ce(d, O, k), d.focus();
+		let A = window.getSelection();
+		A?.removeAllRanges(), A?.addRange(O), Y();
+		let j = (e) => {
+			if (e.key === "Enter" && !e.shiftKey) {
+				e.preventDefault(), Z();
+				return;
+			}
+			if (e.key === "Escape") {
+				e.preventDefault(), i.current.escape === "commit" ? Z() : X();
+				return;
+			}
+			let t = ee(e);
+			t && (e.preventDefault(), $(t));
+		}, M = (e) => {
+			let t = e.relatedTarget, n = i.current.isEditorChrome;
+			n && t instanceof Element && n(t) || Z();
+		}, N = (e) => {
+			if (e.inputType !== "insertText" || !e.data) return;
+			let t = U.current;
+			if (Object.keys(t).length > 0) {
+				let n = z(d) ?? q.current;
+				if (!n || n.start !== n.end) return;
+				e.preventDefault();
+				let r = te(a(d), n.start, {
+					...t,
+					text: e.data
+				}), i = n.start + e.data.length;
+				B(d, r, i, i, y.current), ne(d, r, i), K(), J(d, {
+					start: i,
+					end: i
+				});
+				return;
+			}
+			e.preventDefault();
+			let n = window.getSelection();
+			if (!n || n.rangeCount === 0) return;
+			let r = n.getRangeAt(0);
+			r.deleteContents();
+			{
+				let t = document.createTextNode(e.data);
+				r.insertNode(t);
+				let i = document.createRange();
+				i.setStartAfter(t), i.collapse(!0), n.removeAllRanges(), n.addRange(i);
+			}
+			P();
+		}, P = (e) => {
+			if (e instanceof InputEvent && e.isComposing) return;
+			let t = z(d);
+			if (!o(d) || !t) return;
+			let n = r(d, t.start), i = r(d, t.end), a = window.getSelection();
+			if (!n || !i || !a) return;
+			let s = document.createRange();
+			s.setStart(n.node, n.offset), s.setEnd(i.node, i.offset), a.removeAllRanges(), a.addRange(s);
+		}, F = (e) => {
+			P(e), w();
+		}, I = (e) => {
+			let t = e.target;
+			if (!(t instanceof Node) || d.contains(t)) return;
+			let n = i.current.isEditorChrome;
+			n && t instanceof Element && n(t) || Z();
+		};
+		return d.addEventListener("keydown", j), d.addEventListener("blur", M), d.addEventListener("input", F), d.addEventListener("beforeinput", N), document.addEventListener("pointerdown", I, !0), document.addEventListener("selectionchange", Y), b.current = () => {
+			w(), x.request();
+		}, x.request(), () => {
+			T = !1, clearTimeout(D), x.cancel(), b.current = () => {}, d.removeEventListener("keydown", j), d.removeEventListener("blur", M), d.removeEventListener("input", F), d.removeEventListener("beforeinput", N), document.removeEventListener("pointerdown", I, !0), document.removeEventListener("selectionchange", Y), _.remove(), g?.remove(), v.current = null, pe();
+		};
+	}, [
+		f,
+		i,
+		Z,
+		X,
+		Y,
+		pe,
+		x,
+		$,
+		K,
+		J
+	]), {
+		editingId: f,
+		startEdit: me,
+		cancelEdit: X,
+		commit: Z,
+		isEditing: he,
+		selection: T,
+		rangeStyle: D,
+		pendingStyle: P,
+		applyStyleToSelection: Q,
+		toggleStyle: $
+	};
+}
+var oe = 0;
+function se(e, t) {
+	let n = [v(e.fontFamily, {
+		weight: x(e.fontWeight),
+		style: e.fontStyle
+	}), ...t.filter((e) => e.fontFamily != null).map((e) => v(e.fontFamily, {
+		weight: e.fontWeight ?? (e.bold ? 700 : void 0),
+		style: e.italic ? "italic" : void 0
+	}))].filter((e) => e !== null);
+	return n.length === 0 ? null : Promise.all(n);
+}
+function ce(e, t, n) {
+	let r = n, i = document.createTreeWalker(e, NodeFilter.SHOW_TEXT), a = i.nextNode();
+	for (; a;) {
+		let e = a.data.length;
+		if (r <= e) {
+			t.setStart(a, r), t.setEnd(a, r);
+			return;
+		}
+		r -= e, a = i.nextNode();
+	}
+	t.selectNodeContents(e), t.collapse(!1);
+}
+function le() {
+	let e = document.createElement("div");
+	return e.style.position = "absolute", e.style.margin = "0", e.style.padding = "0", e.style.border = "0", e.style.pointerEvents = "none", e;
+}
+function ue(e, n) {
+	e.style.position = "absolute", e.style.pointerEvents = "auto", e.style.boxSizing = "border-box", e.style.margin = "0", e.style.padding = "0", e.style.border = "0", e.style.outline = "none", e.style.background = "transparent", e.style.color = n.fill !== null && "color" in n.fill ? n.fill.color : "#000", e.style.caretColor = n.caretColor;
+	let r = _(n.fontFamily, {
+		weight: x(n.fontWeight),
+		style: n.fontStyle
+	});
+	e.style.font = y({
+		...n,
+		fontFamily: r
+	}), e.style.lineHeight = String(n.lineHeight);
+	let i = S(n.align, n.direction);
+	e.style.textAlign = n.align === "justify" ? "justify" : i, e.style.setProperty("text-align-last", n.align === "justify" ? i : "");
+	let a = [];
+	n.underline && a.push("underline"), n.strikethrough && a.push("line-through"), n.overline && a.push("overline"), e.style.textDecoration = a.length > 0 ? a.join(" ") : "none", e.style.textTransform = n.textTransform, e.style.fontVariant = n.fontVariantCaps, e.style.setProperty(t, n.fontVariantCaps === "small-caps" ? String(E(n.fontFamily, x(n.fontWeight), n.fontStyle)) : ""), e.style.whiteSpace = n.wrap ? "pre-wrap" : "pre", e.style.overflowWrap = "normal", e.style.wordBreak = "normal";
+}
+function de(e, t) {
+	if (t.selectionBackground == null && t.selectionColor == null) return null;
+	let n = document.createElement("style"), r = [];
+	return t.selectionBackground != null && r.push(`background: ${t.selectionBackground};`), t.selectionColor != null && r.push(`color: ${t.selectionColor};`), n.textContent = `.${e}::selection { ${r.join(" ")} }`, document.head.appendChild(n), n;
+}
+var U = {
+	left: 0,
+	center: .5,
+	right: 1
+};
+function W(e, t, n = 0) {
+	let r = D(e.verticalAlign, e.height, t);
+	return e.y + (r + n) * (e.zoom ?? 1);
+}
+function G(e, t, n, r) {
+	let i = b({
+		x: 0,
+		y: 0,
+		width: n.width,
+		height: n.height,
+		text: " ",
+		style: {
+			fontFamily: t.fontFamily,
+			fontWeight: t.fontWeight,
+			fontStyle: t.fontStyle,
+			fontSize: n.fontSize,
+			lineHeight: r,
+			script: t.script
+		}
+	}).laid.lines[0]?.baselineY ?? 0, a = q(e);
+	return i > 0 && a > 0 ? i - a : 0;
+}
+var K = /* @__PURE__ */ new Map();
+function q(e) {
+	let t = e.parentElement;
+	if (!t) return 0;
+	let { fontFamily: n, fontWeight: r, fontStyle: i, fontSize: a, lineHeight: o } = e.style, s = [
+		n,
+		r,
+		i,
+		a,
+		o
+	].join("|"), c = K.get(s);
+	if (c !== void 0) return c;
+	let l = document.createElement("div");
+	Object.assign(l.style, {
+		position: "absolute",
+		left: "0",
+		top: "0",
+		width: "100px",
+		margin: "0",
+		padding: "0",
+		border: "0",
+		visibility: "hidden",
+		whiteSpace: "pre",
+		fontFamily: n,
+		fontWeight: r,
+		fontStyle: i,
+		fontSize: a,
+		lineHeight: o
+	});
+	let u = document.createElement("span");
+	Object.assign(u.style, {
+		display: "inline-block",
+		width: "0",
+		height: "0",
+		verticalAlign: "baseline"
+	}), l.appendChild(u), t.appendChild(l);
+	let d = l.getBoundingClientRect(), f = d.width / 100, p = f > 0 ? (u.getBoundingClientRect().top - d.top) / f : 0;
+	return l.remove(), p > 0 && document.fonts?.status !== "loading" && (K.size >= 64 && K.clear(), K.set(s, p)), p;
+}
+function fe(e, t, n, r, i) {
+	if (!n) {
+		e.style.display = "none";
+		return;
+	}
+	t.style.overflow = r ? "clip" : "visible", t.style.left = `${r?.x ?? 0}px`, t.style.top = `${r?.y ?? 0}px`, t.style.width = `${r?.width ?? 0}px`, t.style.height = `${r?.height ?? 0}px`, e.style.display = "";
+	let a = i.wrap ? 0 : U[S(i.align, i.direction)];
+	e.style.left = `${n.x + n.width * (n.zoom ?? 1) * a - (r?.x ?? 0)}px`, e.style.width = i.wrap ? `${n.width}px` : "max-content", e.style.minWidth = i.wrap ? "" : `${n.width}px`;
+	let o = i.script ? T(i.fontFamily, x(i.fontWeight), i.fontStyle)[i.script] : void 0, s = n.lineHeight ?? i.lineHeight;
+	e.style.fontSize = `${n.fontSize * (o?.size ?? 1)}px`, e.style.lineHeight = o ? `${n.fontSize * s}px` : String(s);
+	let c = n.verticalAlign !== void 0 && n.verticalAlign !== "top";
+	e.style.minHeight = c ? "" : `${n.height}px`;
+	let l = G(e, i, n, s) - (o?.shift ?? 0) * n.fontSize;
+	e.style.top = `${W(n, c ? e.offsetHeight : n.height, l) - (r?.y ?? 0)}px`, e.style.transformOrigin = "0 0";
+	let u = [];
+	n.zoom !== void 0 && n.zoom !== 1 && u.push(`scale(${n.zoom})`), a !== 0 && u.push(`translateX(${-a * 100}%)`), e.style.transform = u.length > 0 ? u.join(" ") : "none";
+	let d = n.zoom === void 0 && i.fontSize > 0 ? n.fontSize / i.fontSize : 1;
+	e.style.letterSpacing = `${i.letterSpacing * d}px`;
+}
+//#endregion
+export { V as TEXT_EDIT_FONT_HOLD, G as baselineDrop, W as overlayTop, H as useTextEdit };
+
+//# sourceMappingURL=useTextEdit.js.map