@stesura/react-wordgard 0.0.0-stage → 0.2.0

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;