@stesura/react-wordgard 0.0.0-stage → 0.1.0

package/dist/helpers/refs.d.ts

@@ -0,0 +1,6 @@
+import { type ForwardedRef, type RefCallback } from "react";
+type DOMRef = (dom: Element | null) => void;
+export declare const mergeRefs: (...refs: (DOMRef | undefined)[]) => DOMRef;
+export declare const toCallbackRef: <T>(ref: ForwardedRef<T>) => RefCallback<T> | undefined;
+export declare const takesRef: (component: unknown) => boolean;
+export {};

package/dist/helpers/refs.js

@@ -0,0 +1,20 @@
+import { version } from "react";
+// A React decoration's root ref, with what else must know its root: the
+// React wrapper around it, its hooks' handlers.
+export const mergeRefs = (...refs) => (dom) => {
+    for (const ref of refs)
+        ref?.(dom);
+};
+// A forwarded ref as a callback, for mergeRefs.
+export const toCallbackRef = (ref) => typeof ref == "function"
+    ? ref
+    : ref
+        ? (value) => {
+            ref.current = value;
+        }
+        : undefined;
+// Whether React gives `component` a ref: React 19 passes it as a prop, React
+// 18 only to a forwardRef (an object) and warns for a function component,
+// which needs none with DecorationRoot.
+const refAsProp = Number(version.split(".")[0]) >= 19;
+export const takesRef = (component) => refAsProp || typeof component != "function";

package/dist/hooks/useEditorEffect.d.ts

@@ -0,0 +1,3 @@
+import { type DependencyList } from "react";
+import type { Wordgard } from "wordgard/editor";
+export declare const useEditorEffect: (effect: (wg: Wordgard) => void | (() => void), dependencies?: DependencyList) => void;

package/dist/hooks/useEditorEffect.js

@@ -0,0 +1,24 @@
+// Named after react-prosemirror's useEditorEffect, rewritten for Wordgard: an
+// effect that runs once the editor's DOM is up to date, after the flush under
+// way or pending, else in a microtask, never inside React's commit, so it may
+// read the editor's layout and dispatch. A plain React effect may run inside
+// the flush, before the tiles over the new DOM exist.
+import { useLayoutEffect } from "react";
+import { useEditorContext } from "../contexts/EditorContext.js";
+export const useEditorEffect = (effect, dependencies) => {
+    const { wg, afterFlush, cancel } = useEditorContext();
+    useLayoutEffect(() => {
+        let cleanup;
+        const run = () => {
+            cleanup = effect(wg);
+        };
+        afterFlush(run);
+        return () => {
+            cancel(run);
+            if (typeof cleanup == "function")
+                cleanup();
+        };
+        // The caller's dependencies, as with React's own effects.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, dependencies);
+};

package/dist/hooks/useEditorEventCallback.d.ts

@@ -0,0 +1,2 @@
+import type { Wordgard } from "wordgard/editor";
+export declare const useEditorEventCallback: <Args extends unknown[], Result>(callback: (wg: Wordgard, ...args: Args) => Result) => (...args: Args) => Result;

package/dist/hooks/useEditorEventCallback.js

@@ -0,0 +1,13 @@
+// Named after react-prosemirror's useEditorEventCallback, rewritten for
+// Wordgard: a stable function calling the latest `callback` with the editor,
+// for event handlers.
+import { useCallback, useLayoutEffect, useRef } from "react";
+import { useEditorContext } from "../contexts/EditorContext.js";
+export const useEditorEventCallback = (callback) => {
+    const { wg } = useEditorContext();
+    const latest = useRef(callback);
+    useLayoutEffect(() => {
+        latest.current = callback;
+    });
+    return useCallback((...args) => latest.current(wg, ...args), [wg]);
+};

package/dist/hooks/useEditorEventListener.d.ts

@@ -0,0 +1,3 @@
+import type { Wordgard } from "wordgard/editor";
+import { type EditorEvent } from "../contexts/editorEvents.js";
+export declare const useEditorEventListener: <Type extends EditorEvent>(type: Type, handler: (wg: Wordgard, event: HTMLElementEventMap[Type]) => boolean | void) => void;

package/dist/hooks/useEditorEventListener.js

@@ -0,0 +1,26 @@
+// Named after react-prosemirror's useEditorEventListener, rewritten for
+// Wordgard: `handler` gets the editor's DOM events of `type` before Wordgard's
+// own handlers and keymaps, as react-prosemirror's `handleDOMEvents` came
+// before plugins: ReactWordgard installs a Wordgard.domEventHandler for each
+// type, at the highest precedence. Returning true says it handled the event:
+// Wordgard then calls `preventDefault` and goes no further. The latest
+// registered runs first, as in react-prosemirror. Unlike there, key events
+// during a composition don't come (Wordgard ignores them first), and handling
+// `input`, `beforeinput` or a composition event skips Wordgard's own tracking
+// of it. Among `prec.highest` handlers, these come first in an editor made
+// from `config`, after the state's own in one made from a `state`.
+import { useLayoutEffect } from "react";
+import { useEditorContext } from "../contexts/EditorContext.js";
+import { listenersOf } from "../contexts/editorEvents.js";
+import { useEditorEventCallback } from "./useEditorEventCallback.js";
+export const useEditorEventListener = (type, handler) => {
+    const { wg } = useEditorContext();
+    const listener = useEditorEventCallback(handler);
+    useLayoutEffect(() => {
+        const listeners = listenersOf(wg, type);
+        listeners.unshift(listener);
+        return () => {
+            listeners.splice(listeners.indexOf(listener), 1);
+        };
+    }, [wg, type, listener]);
+};

package/dist/hooks/useEditorLayoutEffect.d.ts

@@ -0,0 +1,6 @@
+import type { Wordgard } from "wordgard/editor";
+export type EditorLayoutEffect<T> = {
+    read: (wg: Wordgard) => T | undefined;
+    write: (value: T, wg: Wordgard) => void;
+};
+export declare const useEditorLayoutEffect: <T>(measure: EditorLayoutEffect<T>) => void;

package/dist/hooks/useEditorLayoutEffect.js

@@ -0,0 +1,38 @@
+// The other half of react-prosemirror's useEditorEffect, which ran inside
+// React's commit: what it set showed on the same paint. Here React commits
+// inside Wordgard's flush, so useEditorEffect runs after it, and this hook
+// runs in it, as React's useLayoutEffect to useEffect. It measures the
+// editor's layout and writes from it on the same paint as the document update:
+// `read` runs in every flush's read phase, `write` with its result in the
+// write phase after (Wordgard's scheduleDOMRead and scheduleDOMWrite), React
+// state it sets committing there too. A write that changes the size of the
+// editor's content makes Wordgard update and measure again within the flush,
+// so pagination can settle there. A `read` returning undefined skips its write;
+// with no write to do, none is scheduled, which spares Wordgard measuring
+// again. Reads run in registration order: an engine whose parts must run in
+// another order registers one effect and drives them. Neither may dispatch
+// (Wordgard throws during
+// its flush): dispatch from useEditorEffect or an event handler. Writes into
+// the document's own DOM are foreign edits to Wordgard: write inside widgets,
+// outside the editor, or through decorations.
+import { useLayoutEffect, useRef } from "react";
+import { useEditorContext } from "../contexts/EditorContext.js";
+export const useEditorLayoutEffect = (measure) => {
+    const { wg, measures, requestMeasure } = useEditorContext();
+    const latest = useRef(measure);
+    useLayoutEffect(() => {
+        latest.current = measure;
+    });
+    useLayoutEffect(() => {
+        const entry = () => {
+            const { read, write } = latest.current;
+            const value = read(wg);
+            return value === undefined ? null : () => write(value, wg);
+        };
+        measures.add(entry);
+        requestMeasure();
+        return () => {
+            measures.delete(entry);
+        };
+    }, [wg, measures, requestMeasure]);
+};

package/dist/hooks/useEditorState.d.ts

@@ -0,0 +1 @@
+export declare const useEditorState: () => import("wordgard/state").GardState;

package/dist/hooks/useEditorState.js

@@ -0,0 +1,10 @@
+// Named after react-prosemirror's useEditorState, rewritten for Wordgard: the
+// state the editor's DOM shows, as of its last flush. Re-renders on every
+// state change, in the same commit as the document; `wg.state` is ahead of it
+// between a dispatch and the flush.
+import { useSyncExternalStore } from "react";
+import { useEditorContext } from "../contexts/EditorContext.js";
+export const useEditorState = () => {
+    const { store } = useEditorContext();
+    return useSyncExternalStore(store.subscribe, store.getState);
+};

package/dist/hooks/useEditorStateSelector.d.ts

@@ -0,0 +1,2 @@
+import type { GardState } from "wordgard/state";
+export declare const useEditorStateSelector: <Result>(selector: (state: GardState) => Result, isEqual?: (a: Result, b: Result) => boolean) => Result;

package/dist/hooks/useEditorStateSelector.js

@@ -0,0 +1,6 @@
+import { useSyncExternalStoreWithSelector } from "use-sync-external-store/with-selector";
+import { useEditorContext } from "../contexts/EditorContext.js";
+export const useEditorStateSelector = (selector, isEqual) => {
+    const { store } = useEditorContext();
+    return useSyncExternalStoreWithSelector(store.subscribe, store.getState, store.getState, selector, isEqual);
+};

package/dist/hooks/useIgnoreMutation.d.ts

@@ -0,0 +1,2 @@
+import type { Wordgard } from "wordgard/editor";
+export declare const useIgnoreMutation: (ignoreMutation: (wg: Wordgard, mutation: MutationRecord) => boolean) => void;

package/dist/hooks/useIgnoreMutation.js

@@ -0,0 +1,18 @@
+// Named after react-prosemirror's useIgnoreMutation, rewritten for Wordgard:
+// when `ignoreMutation` returns true for a DOM mutation inside the React
+// decoration (its content included), Wordgard doesn't read it. Mutations in
+// the decoration's chrome never reach Wordgard anyway (`sortRecords`). Typing
+// isn't stopped: Wordgard takes it from `beforeinput`, not the mutation.
+import { useLayoutEffect } from "react";
+import { useDecorationContext } from "../contexts/DecorationContext.js";
+import { useEditorEventCallback } from "./useEditorEventCallback.js";
+export const useIgnoreMutation = (ignoreMutation) => {
+    const { handlers } = useDecorationContext("useIgnoreMutation");
+    const ignore = useEditorEventCallback(ignoreMutation);
+    useLayoutEffect(() => {
+        handlers.ignoreMutation.add(ignore);
+        return () => {
+            handlers.ignoreMutation.delete(ignore);
+        };
+    }, [handlers, ignore]);
+};

package/dist/hooks/useIsNodeSelected.d.ts

@@ -0,0 +1 @@
+export declare const useIsNodeSelected: () => boolean;

package/dist/hooks/useIsNodeSelected.js

@@ -0,0 +1,6 @@
+// Named after react-prosemirror's useIsNodeSelected, rewritten for Wordgard:
+// whether the node the React decoration a component is drawn in draws is the
+// node selection, read from the class Wordgard draws it with
+// (`wg-selected-node`), so the component renders with it, without an effect.
+import { useDecorationContext } from "../contexts/DecorationContext.js";
+export const useIsNodeSelected = () => useDecorationContext("useIsNodeSelected").selected;

package/dist/hooks/useMergedDOMRefs.d.ts

@@ -0,0 +1,2 @@
+import { type Ref, type RefCallback } from "react";
+export declare const useMergedDOMRefs: <Value>(...refs: (Ref<Value> | undefined)[]) => RefCallback<Value>;

package/dist/hooks/useMergedDOMRefs.js

@@ -0,0 +1,17 @@
+// Adapted from react-prosemirror's useMergedDOMRefs (src/refs.ts there),
+// without its typecast: one ref callback setting each of `refs`, as a React
+// decoration's component gives its root both the forwarded `ref` and
+// `contentDOMRef`, or a measuring ref.
+import { useCallback } from "react";
+export const useMergedDOMRefs = (...refs) => useCallback((value) => {
+    for (const ref of refs) {
+        if (typeof ref == "function")
+            ref(value);
+        else if (ref)
+            Object.assign(ref, { current: value });
+    }
+}, 
+// The refs themselves, as react-prosemirror's: a new callback when one
+// changes, so React gives it the element.
+// eslint-disable-next-line react-hooks/exhaustive-deps, react-hooks/use-memo
+refs);

package/dist/hooks/useNodePos.d.ts

@@ -0,0 +1 @@
+export declare const useNodePos: () => () => number;

package/dist/hooks/useNodePos.js

@@ -0,0 +1,8 @@
+// Named after react-prosemirror's useNodePos, rewritten for Wordgard: the
+// position of what the React decoration a component is drawn in draws (a
+// shape's, wrapper's or widget's node, or where a mark or point widget
+// starts), read from its tile. Returns a stable function, for event handlers
+// and effects, rather than the position: during render the tile may not be
+// built yet.
+import { useDecorationContext } from "../contexts/DecorationContext.js";
+export const useNodePos = () => useDecorationContext("useNodePos").handlers.getPos;

package/dist/hooks/useSelectNode.d.ts

@@ -0,0 +1,2 @@
+import type { Wordgard } from "wordgard/editor";
+export declare const useSelectNode: (selectNode: (wg: Wordgard) => void, deselectNode?: (wg: Wordgard) => void) => void;

package/dist/hooks/useSelectNode.js

@@ -0,0 +1,24 @@
+// Named after react-prosemirror's useSelectNode, rewritten for Wordgard:
+// `selectNode` runs once the node the React decoration draws becomes the node
+// selection, `deselectNode` once it stops being it, after the flush that draws
+// the change, as ProseMirror's NodeView.selectNode and deselectNode.
+import { useRef } from "react";
+import { useEditorEffect } from "./useEditorEffect.js";
+import { useEditorEventCallback } from "./useEditorEventCallback.js";
+import { useIsNodeSelected } from "./useIsNodeSelected.js";
+const noop = () => { };
+export const useSelectNode = (selectNode, deselectNode = noop) => {
+    const selected = useIsNodeSelected();
+    const select = useEditorEventCallback(selectNode);
+    const deselect = useEditorEventCallback(deselectNode);
+    const was = useRef(false);
+    useEditorEffect(() => {
+        if (selected == was.current)
+            return;
+        was.current = selected;
+        if (selected)
+            select();
+        else
+            deselect();
+    }, [selected, select, deselect]);
+};

package/dist/hooks/useStopEvent.d.ts

@@ -0,0 +1,2 @@
+import type { Wordgard } from "wordgard/editor";
+export declare const useStopEvent: (stopEvent: (wg: Wordgard, event: Event) => boolean) => void;

package/dist/hooks/useStopEvent.js

@@ -0,0 +1,20 @@
+// Named after react-prosemirror's useStopEvent, rewritten for Wordgard: when
+// `stopEvent` returns true, Wordgard doesn't handle the event, nor do its
+// handlers and keymaps, and the browser's default goes ahead. It's consulted
+// through widget types' `propagateEvent`, for events in a React decoration's
+// chrome or in a React widget, its own or a nested one's, and through its own
+// elements' tiles (tile.ts `ownTile`), for events on them; not for those in
+// its content.
+import { useLayoutEffect } from "react";
+import { useDecorationContext } from "../contexts/DecorationContext.js";
+import { useEditorEventCallback } from "./useEditorEventCallback.js";
+export const useStopEvent = (stopEvent) => {
+    const { handlers } = useDecorationContext("useStopEvent");
+    const stop = useEditorEventCallback(stopEvent);
+    useLayoutEffect(() => {
+        handlers.stopEvent.add(stop);
+        return () => {
+            handlers.stopEvent.delete(stop);
+        };
+    }, [handlers, stop]);
+};

package/dist/hooks/useWordgard.d.ts

@@ -0,0 +1 @@
+export declare const useWordgard: () => import("wordgard/editor").Wordgard;

package/dist/hooks/useWordgard.js

@@ -0,0 +1,4 @@
+// The editor a component is drawn in, or under (WordgardEditor): what a
+// widget's `render` gets.
+import { useEditorContext } from "../contexts/EditorContext.js";
+export const useWordgard = () => useEditorContext().wg;

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+export { DecorationRoot, type DecorationRootProps } from "./components/DecorationRoot.js";
+export { WordgardDoc } from "./components/WordgardDoc.js";
+export { WordgardEditor } from "./components/WordgardEditor.js";
+export { type MarkComponentProps, type MarkShapeOptions, createMarkShape, } from "./decorations/ReactMarkType.js";
+export { type ReactShape, type ShapeComponentProps, createShape, } from "./decorations/ReactShapeType.js";
+export { type WidgetTypeSpec, type WidgetComponentProps, createWidgetType, } from "./decorations/ReactWidgetType.js";
+export { type WrapperOptions, type WrapperComponentProps, createWrapper, } from "./decorations/ReactWrapperType.js";
+export { useEditorEffect } from "./hooks/useEditorEffect.js";
+export { useEditorEventCallback } from "./hooks/useEditorEventCallback.js";
+export { useEditorEventListener } from "./hooks/useEditorEventListener.js";
+export { type EditorLayoutEffect, useEditorLayoutEffect } from "./hooks/useEditorLayoutEffect.js";
+export { useEditorState } from "./hooks/useEditorState.js";
+export { useEditorStateSelector } from "./hooks/useEditorStateSelector.js";
+export { useIgnoreMutation } from "./hooks/useIgnoreMutation.js";
+export { useIsNodeSelected } from "./hooks/useIsNodeSelected.js";
+export { useMergedDOMRefs } from "./hooks/useMergedDOMRefs.js";
+export { useNodePos } from "./hooks/useNodePos.js";
+export { useSelectNode } from "./hooks/useSelectNode.js";
+export { useStopEvent } from "./hooks/useStopEvent.js";
+export { useWordgard } from "./hooks/useWordgard.js";

package/dist/index.js

@@ -0,0 +1,20 @@
+export { DecorationRoot } from "./components/DecorationRoot.js";
+export { WordgardDoc } from "./components/WordgardDoc.js";
+export { WordgardEditor } from "./components/WordgardEditor.js";
+export { createMarkShape, } from "./decorations/ReactMarkType.js";
+export { createShape, } from "./decorations/ReactShapeType.js";
+export { createWidgetType, } from "./decorations/ReactWidgetType.js";
+export { createWrapper, } from "./decorations/ReactWrapperType.js";
+export { useEditorEffect } from "./hooks/useEditorEffect.js";
+export { useEditorEventCallback } from "./hooks/useEditorEventCallback.js";
+export { useEditorEventListener } from "./hooks/useEditorEventListener.js";
+export { useEditorLayoutEffect } from "./hooks/useEditorLayoutEffect.js";
+export { useEditorState } from "./hooks/useEditorState.js";
+export { useEditorStateSelector } from "./hooks/useEditorStateSelector.js";
+export { useIgnoreMutation } from "./hooks/useIgnoreMutation.js";
+export { useIsNodeSelected } from "./hooks/useIsNodeSelected.js";
+export { useMergedDOMRefs } from "./hooks/useMergedDOMRefs.js";
+export { useNodePos } from "./hooks/useNodePos.js";
+export { useSelectNode } from "./hooks/useSelectNode.js";
+export { useStopEvent } from "./hooks/useStopEvent.js";
+export { useWordgard } from "./hooks/useWordgard.js";

package/dist/reactKeys.d.ts

@@ -0,0 +1,39 @@
+import type { Plot } from "wordgard/doc";
+import type { Widget } from "wordgard/editor";
+import type { ChildView } from "./decorations/iterDeco.js";
+export type ReactKeys = WeakMap<Plot, readonly string[]>;
+export declare const createNodeKey: () => string;
+export declare const addFreshKeys: (keys: ReactKeys, plot: Plot) => void;
+export declare const mapKeys: (keys: ReactKeys, oldDoc: Plot, newDoc: Plot, changes: readonly number[]) => WeakMap<Plot, Plot>;
+export declare const childViewKeys: (views: readonly ChildView[]) => ({
+    view: {
+        type: "widget";
+        widget: Widget;
+        side: number;
+        key?: string;
+        offset?: number;
+    };
+    key: string;
+} | {
+    view: import("./decorations/iterDeco.js").NodeView | {
+        type: "text";
+        text: string;
+    } | {
+        type: "wrapper";
+        elt: import("./wordgardInternals.js").DecoElt;
+        spanning: boolean;
+        children: ChildView[];
+        key?: string;
+        mark?: import("wordgard/doc").Mark;
+    } | {
+        type: "buffer";
+        side: -1 | 1;
+    } | {
+        type: "composition";
+        key: string;
+        rendered: string | null;
+    } | {
+        type: "trailingHack";
+    };
+    key: string;
+})[];

package/dist/reactKeys.js

@@ -0,0 +1,188 @@
+import { mapNodePos, unchangedEnds } from "./changes.js";
+export const createNodeKey = () => Math.floor(Math.random() * 0xffffffffffff).toString(16);
+// Gives keys to `plot` and everything in it that has none yet.
+export const addFreshKeys = (keys, plot) => {
+    if (keys.has(plot))
+        return;
+    keys.set(plot, plot.content.map((child) => (child.isText ? "" : createNodeKey())));
+    for (const child of plot.content)
+        if (child.isPlot)
+            addFreshKeys(keys, child);
+};
+// Carries keys from `oldDoc` to `newDoc` through `changes` (the sections
+// DocTile.update receives), as react-prosemirror maps them through a
+// transaction's steps: a node whose start survives keeps its key, as does a
+// node moved within its parent (the same object); others get fresh ones. Only
+// plots that changed identity are visited. Returns, for each
+// of those, the plot it replaces.
+export const mapKeys = (keys, oldDoc, newDoc, changes) => {
+    const replaced = new WeakMap();
+    const mapChildren = (oldPlot, oldStart, newPlot, newStart) => {
+        if (keys.has(newPlot))
+            return;
+        replaced.set(newPlot, oldPlot);
+        const oldKeys = keys.get(oldPlot) ?? [];
+        // The children at both ends are the same nodes at the same places: they
+        // keep their keys, and only the middle is mapped.
+        const { head, tail } = unchangedEnds(changes, oldPlot, oldStart, newPlot);
+        const before = oldPlot.content;
+        const after = newPlot.content;
+        const oldTail = before.length - tail;
+        const newTail = after.length - tail;
+        // Only the middle is walked node by node: typing in one of 5,000 blocks
+        // mustn't allocate per block.
+        let headSize = 0;
+        for (let i = 0; i < head; i++)
+            headSize += before[i]?.length ?? 0;
+        const found = new Map();
+        const byNode = new Map();
+        const retagged = new Map();
+        for (let i = head, pos = oldStart + headSize; i < oldTail; i++) {
+            const node = before[i];
+            if (!node)
+                continue;
+            const key = oldKeys[i];
+            if (key && !node.isText) {
+                const old = { key, node, start: pos };
+                const mapped = mapNodePos(changes, pos, node.isLeaf);
+                if (mapped && !mapped.retagged)
+                    found.set(mapped.pos, old);
+                else {
+                    byNode.set(node, [...(byNode.get(node) ?? []), old]);
+                    if (mapped)
+                        retagged.set(mapped.pos, old);
+                }
+            }
+            pos += node.length;
+        }
+        // Each old key goes once: to its node where it's still there (moved),
+        // else to what a retag put in its place, if of its type.
+        const claimed = new Set();
+        const moved = [];
+        for (let i = head; i < newTail; i++) {
+            const child = after[i];
+            const old = child && !child.isText ? byNode.get(child)?.find((old) => !claimed.has(old)) : undefined;
+            if (old)
+                claimed.add(old);
+            moved.push(old);
+        }
+        const same = (child, key) => {
+            if (key !== undefined)
+                return key;
+            if (child.isPlot)
+                addFreshKeys(keys, child);
+            return child.isText ? "" : createNodeKey();
+        };
+        const newKeys = [];
+        for (let i = 0; i < head; i++) {
+            const child = after[i];
+            if (child)
+                newKeys.push(same(child, oldKeys[i]));
+        }
+        for (let i = head, pos = newStart + headSize; i < newTail; i++) {
+            const child = after[i];
+            if (!child)
+                continue;
+            const start = pos;
+            pos += child.length;
+            if (child.isText) {
+                newKeys.push("");
+                continue;
+            }
+            let kept = found.get(start) ?? moved[i - head];
+            const retag = kept ? undefined : retagged.get(start);
+            if (retag && !claimed.has(retag) && retag.node.type == child.type) {
+                claimed.add(retag);
+                kept = retag;
+            }
+            // A moved plot is the same object: its content keeps its keys.
+            if (child.isPlot && kept?.node.isPlot && kept.node != child)
+                mapChildren(kept.node, kept.start + 1, child, start + 1);
+            else if (child.isPlot)
+                addFreshKeys(keys, child);
+            newKeys.push(kept ? kept.key : createNodeKey());
+        }
+        for (let i = newTail; i < after.length; i++) {
+            const child = after[i];
+            if (child)
+                newKeys.push(same(child, oldKeys[i - newTail + oldTail]));
+        }
+        keys.set(newPlot, newKeys);
+    };
+    mapChildren(oldDoc, 0, newDoc, 0);
+    return replaced;
+};
+const typeIds = new WeakMap();
+let lastTypeId = 0;
+const typeId = (type) => {
+    let id = typeIds.get(type);
+    if (id === undefined)
+        typeIds.set(type, (id = ++lastTypeId));
+    return id;
+};
+// The keys of a list of sibling views (ChildNodeViews renders them, ReactDocTile
+// records them), paired with them. A node's key comes from ReactKeys, through
+// its view (iterDeco); other
+// views are keyed after their previous sibling, so a text run keeps its text
+// node while its start changes. Widgets don't count as that sibling: one
+// coming or going leaves the next text node alone. React point widgets come
+// with keys (iterDeco); other widgets are keyed after the sibling on their
+// side (the next one for a positive side, as a `before` widget sticks to its
+// node) and their type, so a React tag widget keeps its instance while its
+// node does.
+// A composition, and the wrappers around it, keep the keys of the nodes React
+// committed there, and nothing else in their list may take those.
+export const childViewKeys = (views) => {
+    const fixed = (view) => view.type == "composition" || view.type == "wrapper" ? view.key : undefined;
+    const taken = new Set();
+    for (const view of views) {
+        const key = fixed(view);
+        if (key !== undefined)
+            taken.add(key);
+    }
+    let previous = "";
+    let widgets = false;
+    // Widgets first get the key before them, and their own key below.
+    const keyed = views.map((view) => {
+        if (view.type == "widget") {
+            if (view.key !== undefined)
+                return { view, key: view.key };
+            widgets = true;
+            return { view, key: previous };
+        }
+        let key = fixed(view);
+        if (key === undefined) {
+            key =
+                view.type == "node"
+                    ? view.key
+                    : `${previous}>${view.type == "buffer" ? `buffer${view.side}` : view.type}`;
+            while (taken.has(key))
+                key += "+";
+        }
+        previous = key;
+        return { view, key };
+    });
+    if (!widgets)
+        return keyed;
+    let next = "";
+    const used = new Set();
+    for (let i = keyed.length - 1; i >= 0; i--) {
+        const entry = keyed[i];
+        if (!entry)
+            continue;
+        const { view } = entry;
+        if (view.type != "widget") {
+            next = entry.key;
+            continue;
+        }
+        if (view.key !== undefined)
+            continue;
+        const id = typeId(view.widget.type);
+        let key = view.side > 0 ? `${next}<w${id}` : `${entry.key}>w${id}`;
+        while (used.has(key))
+            key += "+";
+        used.add(key);
+        entry.key = key;
+    }
+    return keyed;
+};

package/dist/tile.d.ts

@@ -0,0 +1,32 @@
+import { type ReactElement } from "react";
+import { type Wordgard } from "wordgard/editor";
+import type { GardState } from "wordgard/state";
+import { type NodeView } from "./decorations/iterDeco.js";
+import { type CompositionInfo, type DecoSet, DocTile, type Tile } from "./wordgardInternals.js";
+export type DocPortal = {
+    readonly get: () => ReactElement;
+    readonly subscribe: (listener: () => void) => () => void;
+    readonly committed: (element: ReactElement) => void;
+    readonly claim: () => () => void;
+    readonly mount: () => void;
+};
+export declare const nodeViewOf: (tile: Tile) => NodeView | undefined;
+export declare class RefusedUpdate extends Error {
+}
+export declare const docPortal: (dom: Element) => DocPortal;
+export declare class ReactDocTile extends DocTile {
+    widgets: boolean;
+    static create: (state: GardState, dom: Element, wg: Wordgard) => ReactDocTile;
+    static host: (state: GardState, dom: Element, wg: Wordgard, mount: () => void) => ReactDocTile;
+    static mount: (dom: Element, wg: Wordgard, old: DocTile) => ReactDocTile;
+    private static render;
+    private static build;
+    updateRanges(state: GardState, decoSet: DecoSet, changes: readonly number[], wg: Wordgard, info?: CompositionInfo | null): ReactDocTile;
+}
+export declare const observeShapes: (wg: Wordgard, queue: (records: MutationRecord[]) => void) => {
+    takeRecords(): MutationRecord[];
+    discard(): void;
+    disconnect(): void;
+    observe(target: Node, options?: MutationObserverInit): void;
+};
+export declare const rebuildShapes: (wg: Wordgard) => void;