@stesura/react-wordgard 0.0.0-stage → 0.1.0

package/dist/components/marks/MarkView.js

@@ -0,0 +1,13 @@
+// Named after react-prosemirror's MarkView, rewritten for Wordgard: draws a
+// wrapper, either an element-shaped mark or the span holding a text run's
+// attribute-shaped marks, or a React mark's component. It draws what it holds
+// from its views, so it can be skipped while they keep their shape (iterDeco
+// keeps a wrapper's unchanged views; a node that changed gets its view from
+// its cell).
+import React, { createElement, memo } from "react";
+import { shapeOf } from "../../decorations/iterDeco.js";
+import { attrsToRecord, htmlAttrsToReactProps } from "../../helpers/index.js";
+import { renderChildViews } from "../ChildNodeViews.js";
+import { viewRoot } from "../../viewRoots.js";
+import { ReactMarkView } from "./ReactMarkView.js";
+export const MarkView = memo(({ elt, views, mark }) => mark ? (React.createElement(ReactMarkView, { elt: elt, mark: mark }, renderChildViews(views))) : (createElement(elt.tagName, { ...htmlAttrsToReactProps(attrsToRecord(elt.attrs)), ref: viewRoot }, renderChildViews(views))), (a, b) => shapeOf(a.views) == shapeOf(b.views) && a.elt.eq(b.elt) && a.mark == b.mark);

package/dist/components/marks/ReactMarkView.d.ts

@@ -0,0 +1,10 @@
+import React, { type ReactNode } from "react";
+import type { Mark } from "wordgard/doc";
+import type { DecoElt } from "../../wordgardInternals.js";
+type Props = {
+    elt: DecoElt;
+    mark: Mark;
+    children: ReactNode;
+};
+export declare const ReactMarkView: ({ elt, mark, children }: Props) => React.JSX.Element;
+export {};

package/dist/components/marks/ReactMarkView.js

@@ -0,0 +1,32 @@
+// Named after react-prosemirror's ReactMarkView, rewritten for Wordgard: draws
+// a React mark's component around the marked content. As ShapeView, it has no
+// effects: ReactDocTile builds the tiles over what it commits, and the
+// component's own commits are sorted out of Wordgard's DOM observer.
+import React, { useMemo, useState } from "react";
+import { DecorationContext, createDecorationHandlers, decorationRoot, } from "../../contexts/DecorationContext.js";
+import { drawMark } from "../../decorations/ReactMarkType.js";
+import { createShapeHandle, shapeAttributes } from "../../decorations/ReactShapeType.js";
+import { DecorationRootContext } from "../../contexts/DecorationRootContext.js";
+import { attrsToRecord, componentProps } from "../../helpers/index.js";
+import { mergeRefs } from "../../helpers/refs.js";
+export const ReactMarkView = ({ elt, mark, children }) => {
+    const [{ handle, ref, contentDOMRef }] = useState(createShapeHandle);
+    const [handlers] = useState(() => createDecorationHandlers(() => {
+        const tile = handle.root?.isConnected ? handle.root.wgTile : undefined;
+        if (!tile)
+            throw new Error("This React mark isn't drawn");
+        return tile.posBefore;
+    }));
+    const rootRef = useMemo(() => mergeRefs(ref, decorationRoot(handlers)), [ref, handlers]);
+    // A mark is no node: never selected.
+    const decoration = useMemo(() => ({ handlers, selected: false }), [handlers]);
+    const attrs = useMemo(() => attrsToRecord(shapeAttributes(elt)), [elt]);
+    const root = useMemo(() => ({ tagName: elt.tagName, attrs, ref: rootRef }), [elt.tagName, attrs, rootRef]);
+    return (React.createElement(DecorationContext.Provider, { value: decoration },
+        React.createElement(DecorationRootContext.Provider, { value: root }, drawMark(elt, {
+            attrs: componentProps(attrs),
+            markProps: { mark, getPos: handlers.getPos, contentDOMRef },
+            children,
+            ref: rootRef,
+        }))));
+};

package/dist/components/nodes/DefaultNodeView.d.ts

@@ -0,0 +1,16 @@
+import React, { Component } from "react";
+import type { NodeCell } from "../../contexts/RenderStoreContext.js";
+type Props = {
+    cell: NodeCell;
+};
+export declare class DefaultNodeView extends Component<Props> {
+    private drawn;
+    private readonly redraw;
+    shouldComponentUpdate(next: Props): boolean;
+    componentDidMount(): void;
+    componentDidUpdate(prev: Props): void;
+    componentWillUnmount(): void;
+    private listen;
+    render(): React.JSX.Element | null;
+}
+export {};

package/dist/components/nodes/DefaultNodeView.js

@@ -0,0 +1,116 @@
+// Named after react-prosemirror's DefaultNodeView, rewritten for Wordgard: a
+// node renders as the shape Wordgard's decorations give it (its
+// buildNodeShape), with the plot's content in the hole. In Wordgard every node
+// type has a shape, so there's no missing `toDOM` to check for. Widgets, as a
+// node's shape or inside it, are drawn by their component when they're React
+// widgets, else draw nothing: ReactDocTile puts their DOM in place. React
+// shapes and wrappers in the shape are drawn by ShapeView and WrapperView.
+import React, { Component, createElement } from "react";
+import { Attributes, Elt } from "wordgard/doc";
+import { isReactShape, shapeAttributes } from "../../decorations/ReactShapeType.js";
+import { attributedWidget, isReactWidget } from "../../decorations/ReactWidgetType.js";
+import { isReactWrapper } from "../../decorations/ReactWrapperType.js";
+import { uneditable } from "../../decorations/iterDeco.js";
+import { attrsToRecord, htmlAttrsToReactProps } from "../../helpers/index.js";
+import { ChildNodeViews } from "../ChildNodeViews.js";
+import { ShapeView } from "../ShapeView.js";
+import { WidgetView } from "../WidgetView.js";
+import { WrapperView } from "../WrapperView.js";
+import { viewRoot } from "../../viewRoots.js";
+const renderShape = (draw, shape, inEditable, key, ref) => {
+    const { node, content, selected } = draw;
+    const widget = attributedWidget(shape);
+    if (widget)
+        return (React.createElement(WidgetView, { key: key, widget: widget, attrs: shapeAttributes(shape), selected: selected, outerRef: ref }));
+    const { shape: elt, inEditable: inner } = uneditable(shape, inEditable);
+    // Wordgard fills a wrapper's hole with what it wraps, which a React shape
+    // would drop.
+    if (isReactShape(elt) && (elt.children.length > 1 || elt.children.some((child) => child !== 0)))
+        throw new Error("A React shape can't wrap: use createWrapper");
+    if (isReactShape(elt))
+        return (React.createElement(ShapeView, { key: key, elt: elt, node: node, content: content, selected: selected, outerRef: ref }));
+    if (isReactWrapper(elt))
+        return (React.createElement(WrapperView, { key: key, elt: elt, node: node, wrapped: (wrappedRef) => renderWrapped(draw, elt, inner, wrappedRef), selected: selected, outerRef: ref }));
+    const props = {
+        key,
+        ref,
+        suppressContentEditableWarning: true,
+        ...htmlAttrsToReactProps(attrsToRecord(elt.attrs)),
+    };
+    return createElement(elt.tagName, props, ...elt.children.map((child, i) => {
+        if (child === 0)
+            return content;
+        if (typeof child == "string")
+            return child;
+        if (child instanceof Elt)
+            return renderShape(draw, child, inner, i);
+        return isReactWidget(child) ? (React.createElement(WidgetView, { key: i, widget: child, selected: selected })) : null;
+    }));
+};
+// What a React wrapper wraps: its hole holds one element or widget, whose root
+// the wrapper's tiles are built down to. A native widget's DOM is placed after
+// the commit, where React drew nothing: there'd be no telling where the
+// component put its children.
+const renderWrapped = (draw, wrapper, inEditable, ref) => {
+    const [child, ...rest] = wrapper.children;
+    if (child === 0)
+        throw new Error("A React wrapper isn't a shape: use createShape");
+    if (rest.length || child === undefined || typeof child == "string")
+        throw new Error("A React wrapper's hole holds one element or widget");
+    if (child instanceof Elt)
+        return renderShape(draw, child, inEditable, undefined, ref);
+    if (!isReactWidget(child))
+        throw new Error(`A React wrapper can't wrap a native widget: draw ${draw.node.name} with a React widget`);
+    return React.createElement(WidgetView, { widget: child, selected: draw.selected, outerRef: ref });
+};
+// Wordgard draws a node selection as a class on the node's shape: on its outer
+// element (a widget-drawn node gets one around it), or inside a wrapper a point
+// decoration added after it.
+const isSelected = (shape) => (Attributes.get(shape.attrs, "class") ?? "").split(" ").includes("wg-selected-node") ||
+    shape.children.some((child) => child instanceof Elt && isSelected(child));
+const draw = ({ node, shape, children }) => {
+    if (!(shape instanceof Elt))
+        return isReactWidget(shape) ? React.createElement(WidgetView, { widget: shape }) : null;
+    // Keyed, so React keeps the content where a shape moves its hole: the tile
+    // build counts on an element React kept keeping its content.
+    const content = node.isPlot && children ? React.createElement(ChildNodeViews, { key: "content", views: children }) : null;
+    return renderShape({ node, content, selected: isSelected(shape) }, shape, true, undefined, viewRoot);
+};
+// Renders when its cell gets a new view, not when its list renders again:
+// Wordgard's documents share unchanged nodes between states, and their layouts
+// are kept outside redrawn ranges. A class, so a node's listener costs no hook
+// state and an update no effect (useSyncExternalStore made Bold all over 5,000
+// paragraphs about 15% slower, and held more memory).
+export class DefaultNodeView extends Component {
+    // What it drew last, to catch a view its cell got before it listened.
+    drawn = null;
+    redraw = () => this.forceUpdate();
+    shouldComponentUpdate(next) {
+        return next.cell != this.props.cell;
+    }
+    componentDidMount() {
+        this.listen();
+    }
+    componentDidUpdate(prev) {
+        if (prev.cell == this.props.cell)
+            return;
+        if (prev.cell.listener == this.redraw)
+            prev.cell.listener = null;
+        this.listen();
+    }
+    componentWillUnmount() {
+        const { cell } = this.props;
+        if (cell.listener == this.redraw)
+            cell.listener = null;
+    }
+    listen() {
+        const { cell } = this.props;
+        cell.listener = this.redraw;
+        if (cell.view != this.drawn)
+            this.forceUpdate();
+    }
+    render() {
+        this.drawn = this.props.cell.view;
+        return draw(this.drawn);
+    }
+}

package/dist/components/nodes/DocNodeView.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ChildView } from "../../decorations/iterDeco.js";
+type Props = {
+    views: readonly ChildView[];
+};
+export declare const DocNodeView: ({ views }: Props) => React.JSX.Element;
+export {};

package/dist/components/nodes/DocNodeView.js

@@ -0,0 +1,6 @@
+// Named after react-prosemirror's DocNodeView, rewritten for Wordgard: the
+// document's content renders straight into Wordgard's content element, which
+// is React's container.
+import React from "react";
+import { ChildNodeViews } from "../ChildNodeViews.js";
+export const DocNodeView = ({ views }) => React.createElement(ChildNodeViews, { views: views });

package/dist/composition.d.ts

@@ -0,0 +1,23 @@
+import { Elt, type Mark, type Plot } from "wordgard/doc";
+import { type CompositionLayout } from "./decorations/iterDeco.js";
+import { type CompositionInfo } from "./wordgardInternals.js";
+export type RenderedText = {
+    readonly key: string;
+    readonly text: string;
+};
+export type Rendered = {
+    readonly texts: WeakMap<Text, RenderedText>;
+    readonly wrappers: WeakMap<Element, string>;
+};
+export type CompositionView = {
+    readonly plot: Plot;
+    readonly path: ReadonlySet<Plot>;
+    readonly layout: CompositionLayout;
+    readonly target: Text | null;
+    readonly node: ChildNode | null;
+    readonly text: string;
+    readonly wrapCursor: Mark.Set | null;
+    readonly rendered: RenderedText | null;
+};
+export declare const compositionView: (doc: Plot, info: CompositionInfo, changes: readonly number[], rendered: Rendered) => CompositionView | null;
+export declare const browserElt: (dom: Element) => Elt<never>;

package/dist/composition.js

@@ -0,0 +1,97 @@
+// How the React view keeps a composition alive through Wordgard's flush, as
+// Wordgard's ContentUpdate.composition does (src/editor/tile.ts in its repo):
+// the browser's text node stays as it is, in a tile of its own. React must not
+// write to it: when React drew it, React keeps rendering the value it last
+// committed there, in the wrappers it committed around it; when the browser
+// made it (or an element around it), React draws nothing in its place.
+import { Attributes, Elt } from "wordgard/doc";
+import { cursorWrappers, } from "./decorations/iterDeco.js";
+import { markOfTile, markTiles } from "./decorations/ReactMarkType.js";
+import { TileFlag, getTileClasses } from "./wordgardInternals.js";
+// The innermost plot holding [from, to), and the plots down to it.
+const plotAround = (doc, from, to) => {
+    const path = new Set();
+    let plot = doc;
+    let start = 0;
+    for (;;) {
+        let pos = start;
+        let next = null;
+        for (const child of plot.content) {
+            if (child.isPlot && pos + 1 <= from && to <= pos + child.length - 1) {
+                next = { plot: child, start: pos + 1 };
+                break;
+            }
+            pos += child.length;
+        }
+        if (!next)
+            return { plot, start, path };
+        path.add(next.plot);
+        ({ plot, start } = next);
+    }
+};
+// An element React put there: one of its wrappers, a React mark's element, or
+// what holds a plot's content.
+const isReacts = (dom, rendered) => (dom instanceof Element && rendered.wrappers.has(dom)) ||
+    !!dom.wgTile?.isDoc ||
+    !!(dom.wgTile && (dom.wgTile.flags & TileFlag.PlotContent || markTiles.has(dom.wgTile)));
+// The outermost node around `target` that React didn't put there.
+const browserMade = (target, rendered) => {
+    let node = target;
+    while (node.parentNode instanceof Element && !isReacts(node.parentNode, rendered))
+        node = node.parentNode;
+    return node;
+};
+// The wrappers `node` sits in, outermost first, as the tiles over them say
+// (ContentUpdate.composition walks up to the node), with React's keys. A React
+// mark's elements are one wrapper, its root's.
+const domWrappers = (node, rendered) => {
+    const wrappers = [];
+    for (let dom = node.parentNode; dom instanceof Element; dom = dom.parentNode) {
+        const tile = dom.wgTile;
+        if (!(tile instanceof getTileClasses().EltTile) || !(tile.flags & TileFlag.Wrapper))
+            break;
+        const mark = markOfTile.get(tile);
+        if (markTiles.has(tile) && !mark)
+            continue;
+        const key = rendered.wrappers.get(dom);
+        wrappers.unshift({ elt: tile.elt, spanning: tile.isSpanning, key, ...(mark && { mark }) });
+    }
+    return wrappers;
+};
+// Wordgard's separateChange fails, and the flush drops the composition, when a
+// replaced range reaches across the composition's edges.
+const separates = (changes, fromB, toB) => {
+    for (let i = 0, posB = 0; i < changes.length; i += 2) {
+        const len = changes[i] ?? 0;
+        const ins = changes[i + 1] ?? 0;
+        const endB = posB + (ins < 0 ? len : ins);
+        if (ins >= 0 && fromB < endB && toB > posB && (posB < fromB || endB > toB))
+            return false;
+        posB = endB;
+    }
+    return true;
+};
+export const compositionView = (doc, info, changes, rendered) => {
+    if (!separates(changes, info.fromB, info.toB))
+        return null;
+    const { plot, start, path } = plotAround(doc, info.fromB, info.toB);
+    const node = info.target && browserMade(info.target, rendered);
+    return {
+        plot,
+        path,
+        layout: {
+            from: info.fromB - start,
+            to: info.toB - start,
+            wrappers: node ? domWrappers(node, rendered) : cursorWrappers(info.wrapCursor ?? []),
+            cursor: !info.target,
+        },
+        target: info.target,
+        node,
+        text: info.text,
+        wrapCursor: info.wrapCursor ?? null,
+        rendered: (info.target && node == info.target && rendered.texts.get(info.target)) || null,
+    };
+};
+// The tile Wordgard's ContentUpdate.composition makes for an element the
+// browser put around the composed text: its tag and attributes, a content hole.
+export const browserElt = (dom) => Elt.create(dom.nodeName.toLowerCase(), Attributes.read(Object.fromEntries(dom.getAttributeNames().map((name) => [name, dom.getAttribute(name)]))), [0]);

package/dist/contexts/DecorationContext.d.ts

@@ -0,0 +1,15 @@
+export type DecorationHandlers = {
+    readonly getPos: () => number;
+    readonly stopEvent: Set<(event: Event) => boolean>;
+    readonly ignoreMutation: Set<(record: MutationRecord) => boolean>;
+};
+export type DecorationContextValue = {
+    readonly handlers: DecorationHandlers;
+    readonly selected: boolean;
+};
+export declare const DecorationContext: import("react").Context<DecorationContextValue | null>;
+export declare const useDecorationContext: (hook: string) => DecorationContextValue;
+export declare const createDecorationHandlers: (getPos: () => number) => DecorationHandlers;
+export declare const decorationRoot: (handlers: DecorationHandlers) => (dom: Element | null) => void;
+export declare const stopsEvent: (event: Event) => boolean;
+export declare const ignoresMutation: (record: MutationRecord) => boolean;

package/dist/contexts/DecorationContext.js

@@ -0,0 +1,38 @@
+// The React decoration (shape, wrapper, mark or widget) a component is drawn
+// in, for the hooks react-prosemirror's node views use: its position, whether
+// its node is selected, and the handlers its components register. It takes
+// the place of react-prosemirror's GetPosContext, SelectNodeContext,
+// StopEventContext and IgnoreMutationContext.
+import { createContext, useContext } from "react";
+export const DecorationContext = createContext(null);
+export const useDecorationContext = (hook) => {
+    const context = useContext(DecorationContext);
+    if (!context)
+        throw new Error(`${hook} is called outside a React shape, wrapper, mark or widget`);
+    return context;
+};
+export const createDecorationHandlers = (getPos) => ({
+    getPos,
+    stopEvent: new Set(),
+    ignoreMutation: new Set(),
+});
+// The handlers of the decorations whose root elements they are.
+const roots = new WeakMap();
+export const decorationRoot = (handlers) => (dom) => {
+    if (dom)
+        roots.set(dom, handlers);
+};
+// Whether a decoration around `node`, innermost first, says yes. Only in
+// `node`'s own editor: one nested in a decoration isn't its.
+const someAround = (node, says) => {
+    for (let cur = node; cur && !cur.wgTile?.isDoc; cur = cur.parentNode) {
+        const handlers = cur instanceof Element ? roots.get(cur) : undefined;
+        if (handlers && says(handlers))
+            return true;
+    }
+    return false;
+};
+// Whether a decoration around the event's target stops it (useStopEvent).
+export const stopsEvent = (event) => someAround(event.target instanceof Node ? event.target : null, ({ stopEvent }) => [...stopEvent].some((stop) => stop(event)));
+// Whether a decoration around the record's target claims it (useIgnoreMutation).
+export const ignoresMutation = (record) => someAround(record.target, ({ ignoreMutation }) => [...ignoreMutation].some((ignore) => ignore(record)));

package/dist/contexts/DecorationRootContext.d.ts

@@ -0,0 +1,6 @@
+export type DecorationRootValue = {
+    tagName: string;
+    attrs: Record<string, string>;
+    ref: (dom: Element | null) => void;
+};
+export declare const DecorationRootContext: import("react").Context<DecorationRootValue | null>;

package/dist/contexts/DecorationRootContext.js

@@ -0,0 +1,6 @@
+// What DecorationRoot draws: the root a React shape's, wrapper's or mark's Elt
+// says, with Wordgard's attributes and the root's ref. Not in
+// react-prosemirror, whose node views draw their root themselves: Wordgard
+// fixes the root's tag before React draws.
+import { createContext } from "react";
+export const DecorationRootContext = createContext(null);

package/dist/contexts/EditorContext.d.ts

@@ -0,0 +1,26 @@
+import type { Wordgard } from "wordgard/editor";
+import type { GardState } from "wordgard/state";
+export type EditorStore = {
+    readonly getState: () => GardState;
+    readonly subscribe: (listener: () => void) => () => void;
+};
+export type Measure = () => (() => void) | null;
+export type EditorContextValue = {
+    readonly wg: Wordgard;
+    readonly store: EditorStore;
+    readonly afterFlush: (effect: () => void) => void;
+    readonly cancel: (effect: () => void) => void;
+    readonly measures: Set<Measure>;
+    readonly requestMeasure: () => void;
+};
+type Editor = EditorContextValue & {
+    readonly publish: (state: GardState) => void;
+    readonly readMeasures: (wg: Wordgard) => void;
+    readonly runEffects: () => void;
+    readonly requestEffects: () => void;
+    flushing: boolean;
+};
+export declare const editorOf: (wg: Wordgard) => Editor;
+export declare const EditorContext: import("react").Context<EditorContextValue | null>;
+export declare const useEditorContext: () => EditorContextValue;
+export {};

package/dist/contexts/EditorContext.js

@@ -0,0 +1,87 @@
+// Named after react-prosemirror's EditorContext, rewritten for Wordgard: the
+// editor, the state as of its last flush (react-prosemirror's state store),
+// and what the hooks register to run around its flush. One value per editor,
+// which never changes, so memoised components aren't scanned for it.
+import { createContext, useContext } from "react";
+import { flushSync } from "react-dom";
+const editors = new WeakMap();
+export const editorOf = (wg) => {
+    const found = editors.get(wg);
+    if (found)
+        return found;
+    let state = wg.state;
+    const listeners = new Set();
+    const effects = new Set();
+    const measures = new Set();
+    let requested = false;
+    // After a flush the DOM shows `state`, even when a dispatch since then
+    // (an update listener's) has put `wg.state` ahead.
+    const runEffects = () => {
+        if (!wg.connected)
+            return;
+        const pending = [...effects];
+        effects.clear();
+        for (const effect of pending)
+            effect();
+    };
+    // Without a flush under way or pending, the DOM is up to date.
+    const requestEffects = () => {
+        if (requested)
+            return;
+        requested = true;
+        queueMicrotask(() => {
+            requested = false;
+            if (!editor.flushing && wg.state == state)
+                runEffects();
+        });
+    };
+    const readMeasures = (wg) => {
+        const writes = [...measures].flatMap((measure) => measure() ?? []);
+        // A scheduled write makes Wordgard measure again.
+        if (!writes.length)
+            return;
+        // React state set by a write commits now, on the same paint.
+        wg.scheduleDOMWrite(() => flushSync(() => {
+            for (const write of writes)
+                write();
+        }));
+    };
+    const editor = {
+        wg,
+        store: {
+            getState: () => state,
+            subscribe: (listener) => {
+                listeners.add(listener);
+                return () => listeners.delete(listener);
+            },
+        },
+        afterFlush: (effect) => {
+            effects.add(effect);
+            if (!editor.flushing)
+                requestEffects();
+        },
+        cancel: (effect) => effects.delete(effect),
+        measures,
+        requestMeasure: () => wg.scheduleDOMRead(readMeasures),
+        publish: (next) => {
+            if (next == state)
+                return;
+            state = next;
+            for (const listener of listeners)
+                listener();
+        },
+        readMeasures,
+        runEffects,
+        requestEffects,
+        flushing: false,
+    };
+    editors.set(wg, editor);
+    return editor;
+};
+export const EditorContext = createContext(null);
+export const useEditorContext = () => {
+    const context = useContext(EditorContext);
+    if (!context)
+        throw new Error("Used outside a Wordgard editor");
+    return context;
+};

package/dist/contexts/RenderStoreContext.d.ts

@@ -0,0 +1,15 @@
+import type { NodeView } from "../decorations/iterDeco.js";
+import type { ReactKeys } from "../reactKeys.js";
+export type NodeCell = {
+    view: NodeView;
+    listener: (() => void) | null;
+};
+export type RenderStore = {
+    readonly keys: ReactKeys;
+    readonly pending: Map<NodeCell, NodeView>;
+};
+export declare const cellOf: (view: NodeView) => NodeCell;
+export declare const moveCell: (store: RenderStore, old: NodeView, view: NodeView) => void;
+export declare const publishCells: (store: RenderStore) => () => void;
+export declare const RenderStoreContext: import("react").Context<RenderStore | null>;
+export declare const useRenderStore: () => RenderStore;

package/dist/contexts/RenderStoreContext.js

@@ -0,0 +1,43 @@
+// Named after our react-prosemirror fork's RenderStoreContext, rewritten for
+// Wordgard: what the view computes for rendering, held in one object per
+// content element and provided once, so its context value never changes and
+// memoised node views are never scanned for it. ReactDocTile writes it inside
+// Wordgard's flush, before React renders.
+import { createContext, useContext } from "react";
+const cells = new WeakMap();
+export const cellOf = (view) => {
+    let cell = cells.get(view);
+    if (!cell)
+        cells.set(view, (cell = { view, listener: null }));
+    return cell;
+};
+// `view` takes the place of `old`, its node's view in the last layout.
+export const moveCell = (store, old, view) => {
+    const cell = cellOf(old);
+    cells.set(view, cell);
+    if (cell.view == view)
+        store.pending.delete(cell);
+    else
+        store.pending.set(cell, view);
+};
+// Gives the cells their views, inside the commit's flushSync. Returns what
+// takes them back, for an update React refused.
+export const publishCells = (store) => {
+    const before = [];
+    for (const [cell, view] of store.pending) {
+        before.push([cell, cell.view]);
+        cell.view = view;
+        cell.listener?.();
+    }
+    return () => {
+        for (const [cell, view] of before)
+            cell.view = view;
+    };
+};
+export const RenderStoreContext = createContext(null);
+export const useRenderStore = () => {
+    const store = useContext(RenderStoreContext);
+    if (!store)
+        throw new Error("Rendered outside a ReactDocTile");
+    return store;
+};

package/dist/contexts/editorEvents.d.ts

@@ -0,0 +1,12 @@
+import { Wordgard } from "wordgard/editor";
+import { GardState } from "wordgard/state";
+export declare const editorEvents: readonly ["keydown", "keyup", "keypress", "beforeinput", "input", "mousedown", "mouseup", "mouseover", "mouseout", "click", "dblclick", "contextmenu", "focus", "blur", "copy", "cut", "paste", "dragstart", "dragend", "dragenter", "dragover", "dragleave", "drop", "compositionstart", "compositionupdate", "compositionend"];
+export type EditorEvent = (typeof editorEvents)[number];
+type Listener<Type extends EditorEvent> = (event: HTMLElementEventMap[Type]) => boolean | void;
+type Listeners = {
+    [Type in EditorEvent]: Listener<Type>[];
+};
+export declare const listenersOf: <Type extends EditorEvent>(wg: Wordgard, type: Type) => Listeners[Type];
+export declare const hasEditorEventHandlers: (state: GardState) => boolean;
+export declare const editorEventHandlers: GardState.Extension;
+export {};