@stesura/react-wordgard 0.0.0-stage → 0.2.0

package/dist/components/WordgardDoc.js

@@ -0,0 +1,36 @@
+// Named after react-prosemirror's ProseMirrorDoc, rewritten for Wordgard. The portal commits first
+// and builds the tiles; attaching the element then connects the editor, as Wordgard's own editor is
+// built before it's connected.
+import React, { useCallback, useInsertionEffect, useLayoutEffect, useSyncExternalStore, } from "react";
+import { createPortal } from "react-dom";
+import { editorOf, useEditorContext } from "../contexts/EditorContext.js";
+import { docPortal } from "../tile.js";
+const DocPortal = ({ wg }) => {
+    const portal = docPortal(wg.contentDOM);
+    const element = useSyncExternalStore(portal.subscribe, portal.get);
+    // Insertion effects all run before any layout effect, so a second portal
+    // committed alongside this one has claimed the editor by the time `mount`
+    // builds the tiles. StrictMode doesn't run them twice.
+    useInsertionEffect(() => portal.claim(), [portal]);
+    useLayoutEffect(() => portal.committed(element));
+    useLayoutEffect(() => portal.mount(), [portal]);
+    return createPortal(element, wg.contentDOM);
+};
+/**
+ * Puts the editor in the page, inside a `div` taking the props, and renders the document through a
+ * portal, in your React tree. It goes under its `<WordgardEditor>`, inside any other components,
+ * with other children before or after it. One per editor: a second throws.
+ */
+export const WordgardDoc = (props) => {
+    const { wg } = useEditorContext();
+    const attach = useCallback((dom) => {
+        if (!dom)
+            return;
+        dom.appendChild(wg.dom);
+        // Effects waiting for the editor to be in the page.
+        editorOf(wg).requestEffects();
+    }, [wg]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DocPortal, { wg: wg }),
+        React.createElement("div", { ...props, ref: attach })));
+};

package/dist/components/WordgardEditor.d.ts

@@ -0,0 +1,15 @@
+import React, { type ReactNode } from "react";
+import type { Wordgard } from "wordgard/editor";
+type Props = Omit<Wordgard.Spec, "parent"> & {
+    children?: ReactNode;
+};
+/**
+ * Creates a Wordgard editor from the spec (`doc`, `config`, `selection`, `state`, `scrollTo`) and
+ * provides it to its children. It draws no DOM of its own. The spec is read once, on mount: from
+ * then on the editor owns its state (see [Accessing the state outside the
+ * editor](https://github.com/stesura/react-wordgard#accessing-the-state-outside-the-editor)). In
+ * React's StrictMode (development only), it creates its editor twice and drops one, which is never
+ * put in the page.
+ */
+export declare const WordgardEditor: ({ children, ...spec }: Props) => React.JSX.Element;
+export {};

package/dist/components/WordgardEditor.js

@@ -0,0 +1,17 @@
+// Named after react-prosemirror's ProseMirror component, rewritten for Wordgard. The spec is read
+// once, as react-prosemirror's `defaultState`: Wordgard's editor owns its state.
+import React, { useState } from "react";
+import { ReactWordgard } from "../ReactWordgard.js";
+import { EditorContext, editorOf } from "../contexts/EditorContext.js";
+/**
+ * Creates a Wordgard editor from the spec (`doc`, `config`, `selection`, `state`, `scrollTo`) and
+ * provides it to its children. It draws no DOM of its own. The spec is read once, on mount: from
+ * then on the editor owns its state (see [Accessing the state outside the
+ * editor](https://github.com/stesura/react-wordgard#accessing-the-state-outside-the-editor)). In
+ * React's StrictMode (development only), it creates its editor twice and drops one, which is never
+ * put in the page.
+ */
+export const WordgardEditor = ({ children, ...spec }) => {
+    const [editor] = useState(() => editorOf(ReactWordgard.host(spec)));
+    return React.createElement(EditorContext.Provider, { value: editor }, children);
+};

package/dist/components/WordgardScope.d.ts

@@ -0,0 +1,14 @@
+import React, { type ReactNode } from "react";
+import type { Wordgard } from "wordgard/editor";
+type Props = {
+    wg: Wordgard;
+    children?: ReactNode;
+};
+/**
+ * Gives the components it holds `wg`, an editor a `WordgardEditor` made elsewhere, in place of the
+ * one around them: for a toolbar acting on whichever of a page's editors has focus. The hooks under
+ * it follow when `wg` changes: selectors subscribe to the new editor's state, callbacks and
+ * listeners get it, effects run again. Any other editor throws.
+ */
+export declare const WordgardScope: ({ wg, children }: Props) => React.JSX.Element;
+export {};

package/dist/components/WordgardScope.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { EditorContext, findEditor } from "../contexts/EditorContext.js";
+/**
+ * Gives the components it holds `wg`, an editor a `WordgardEditor` made elsewhere, in place of the
+ * one around them: for a toolbar acting on whichever of a page's editors has focus. The hooks under
+ * it follow when `wg` changes: selectors subscribe to the new editor's state, callbacks and
+ * listeners get it, effects run again. Any other editor throws.
+ */
+export const WordgardScope = ({ wg, children }) => {
+    const editor = findEditor(wg);
+    if (!editor)
+        throw new Error("WordgardScope takes an editor a WordgardEditor made");
+    return React.createElement(EditorContext.Provider, { value: editor }, children);
+};

package/dist/components/WrapperView.d.ts

@@ -0,0 +1,12 @@
+import React, { type ReactNode } from "react";
+import type { Node } from "wordgard/doc";
+import type { DecoElt } from "../wordgardInternals.js";
+type Props = {
+    elt: DecoElt;
+    node: Node;
+    wrapped: (ref: (dom: Element | null) => void) => ReactNode;
+    selected: boolean;
+    outerRef?: ((dom: Element | null) => void) | undefined;
+};
+export declare const WrapperView: ({ elt, node, wrapped, selected, outerRef }: Props) => React.JSX.Element;
+export {};

package/dist/components/WrapperView.js

@@ -0,0 +1,23 @@
+// Like ShapeView, no effects: ReactDocTile builds the tiles over what it commits.
+import React, { useMemo, useState } from "react";
+import { DecorationContext, createDecorationHandlers, decorationRoot, } from "../contexts/DecorationContext.js";
+import { createWrapperHandle, nodePos, shapeAttributes } from "../decorations/ReactShapeType.js";
+import { drawWrapper } from "../decorations/ReactWrapperType.js";
+import { DecorationRootContext } from "../contexts/DecorationRootContext.js";
+import { attrsToRecord, componentProps } from "../helpers/index.js";
+import { mergeRefs } from "../helpers/refs.js";
+export const WrapperView = ({ elt, node, wrapped, selected, outerRef }) => {
+    const [{ handle, ref, wrappedRef }] = useState(createWrapperHandle);
+    const [handlers] = useState(() => createDecorationHandlers(nodePos(handle)));
+    const rootRef = useMemo(() => mergeRefs(ref, outerRef, decorationRoot(handlers)), [ref, outerRef, handlers]);
+    const decoration = useMemo(() => ({ handlers, selected }), [handlers, selected]);
+    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 }, drawWrapper(elt, {
+            attrs: componentProps(attrs),
+            nodeProps: { node, getPos: handlers.getPos },
+            children: wrapped(wrappedRef),
+            ref: rootRef,
+        }))));
+};

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

@@ -0,0 +1,11 @@
+import React from "react";
+import type { Mark } from "wordgard/doc";
+import { type ChildView } from "../../decorations/iterDeco.js";
+import type { DecoElt } from "../../wordgardInternals.js";
+type Props = {
+    elt: DecoElt;
+    views: readonly ChildView[];
+    mark?: Mark | undefined;
+};
+export declare const MarkView: React.MemoExoticComponent<({ elt, views, mark }: Props) => React.JSX.Element>;
+export {};

package/dist/components/marks/MarkView.js

@@ -0,0 +1,10 @@
+// Named after react-prosemirror's MarkView, rewritten for Wordgard: an element-shaped mark, the
+// span of a text run's attribute-shaped marks, or a React mark. Memoised: iterDeco keeps a
+// wrapper's unchanged views.
+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,30 @@
+// Named after react-prosemirror's ReactMarkView, rewritten for Wordgard. Like ShapeView, no
+// effects: ReactDocTile builds the tiles over what it commits.
+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,112 @@
+// Named after react-prosemirror's DefaultNodeView, rewritten for Wordgard: a node renders as its
+// decorated shape (buildNodeShape). Every Wordgard node type has a shape, so there's no missing
+// `toDOM` to check for. Native widgets draw nothing: ReactDocTile puts their DOM in place.
+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,5 @@
+// Named after react-prosemirror's DocNodeView, rewritten for Wordgard: renders straight into
+// Wordgard's content element, 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,95 @@
+// Keeps a composition alive through Wordgard's flush, as Wordgard's ContentUpdate.composition does:
+// the browser's text node stays, in a tile of its own, and React must not write to it. When React
+// drew it, React keeps rendering what it last committed there; when the browser made 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,35 @@
+// The React decoration a component is drawn in, for the decoration hooks. Replaces
+// 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,4 @@
+// Not in react-prosemirror, whose node views draw their root: 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,27 @@
+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 findEditor: (wg: Wordgard) => EditorContextValue | undefined;
+export declare const EditorContext: import("react").Context<EditorContextValue | null>;
+export declare const useEditorContext: () => EditorContextValue;
+export {};