@stesura/react-wordgard 0.0.0-stage → 0.1.0

package/dist/ReactWordgard.js

@@ -0,0 +1,96 @@
+// Adapted from react-prosemirror's ReactEditorView, to fit Wordgard: it
+// extends Wordgard instead of EditorView and, where ReactEditorView replaces
+// the docView ProseMirror's constructor builds, has the base constructor build
+// a tile tree React renders.
+import { Wordgard } from "wordgard/editor";
+import { GardState } from "wordgard/state";
+import { editorOf } from "./contexts/EditorContext.js";
+import { editorEventHandlers, hasEditorEventHandlers } from "./contexts/editorEvents.js";
+import { ReactDocTile, RefusedUpdate, observeShapes } from "./tile.js";
+import { DocTile } from "./wordgardInternals.js";
+// Asks Wordgard for a frame: a no-op read schedules a flush.
+const retry = () => { };
+export class ReactWordgard
+// @ts-expect-error Wordgard's constructor is private in its typings.
+ extends Wordgard {
+    // An editor with a React root of its own.
+    static create = (spec) => new ReactWordgard(spec, false);
+    // An editor WordgardEditor hosts: its document renders through
+    // WordgardDoc's portal, in the app's React tree.
+    static host = (spec) => new ReactWordgard(spec, true);
+    // Wordgard's own tests build tile trees through `Wordgard.DocTile`.
+    static DocTile = ReactDocTile;
+    constructor(spec, hosted = false) {
+        // Wordgard's constructor draws the document with `DocTile.create`, before
+        // this one can run: React draws it there instead, so it's drawn once. Put
+        // back at once, for any editor React's render creates; other editors
+        // created first (by a plugin) draw as before.
+        const create = DocTile.create;
+        const self = { editor: null };
+        DocTile.create = (state, dom, wg) => {
+            if (!(wg instanceof ReactWordgard))
+                return create(state, dom, wg);
+            DocTile.create = create;
+            if (!hosted)
+                return ReactDocTile.create(state, dom, wg);
+            return ReactDocTile.host(state, dom, wg, () => {
+                const { editor } = self;
+                if (editor)
+                    editor.docTile = editor.observer.ignore(() => ReactDocTile.mount(editor.contentDOM, editor, editor.docTile));
+            });
+        };
+        // Given a `parent`, it would also put the editor in the page, where
+        // connecting measures it: that's left until it's built.
+        // useEditorEventListener's handlers come first; Wordgard keeps one copy of
+        // an extension, so a state taken from another ReactWordgard is fine.
+        const events = spec.state
+            ? {
+                state: spec.state.update({ effects: GardState.appendConfig.of(editorEventHandlers) })
+                    .state,
+            }
+            : { config: [editorEventHandlers, spec.config ?? []] };
+        try {
+            // @ts-expect-error The typings drop the private constructor's parameter.
+            super({ ...spec, ...events, parent: undefined });
+        }
+        finally {
+            DocTile.create = create;
+        }
+        self.editor = this;
+        // React shapes' own commits are sorted out of what Wordgard's DOM
+        // observer reads; replaced before the editor is connected and observes.
+        this.observer.observer = observeShapes(this, (records) => {
+            this.observer.queue.push(...records);
+            this.scheduleFlush();
+        });
+        spec.parent?.appendChild(this.dom);
+    }
+    // Wordgard's flush runs from an animation frame and from the methods that
+    // need an up-to-date DOM; useEditorEffect's effects run after it. A refused
+    // update leaves Wordgard's transactions pending with no frame requested for
+    // them, so one is.
+    flush() {
+        const editor = editorOf(this);
+        // React shapes that committed since their records were delivered get
+        // their tiles first (taking the records rebuilds them): Wordgard reads
+        // them before the build.
+        this.observer.queue.push(...this.observer.observer.takeRecords());
+        editor.flushing = true;
+        try {
+            super.flush();
+        }
+        catch (error) {
+            if (error instanceof RefusedUpdate)
+                this.scheduleDOMRead(retry);
+            throw error;
+        }
+        finally {
+            editor.flushing = false;
+        }
+        editor.runEffects();
+        // A reconfiguration (GardState.reconfigure) dropped useEditorEventListener's
+        // handlers: they come back with a transaction of their own.
+        if (!hasEditorEventHandlers(this.state))
+            this.dispatch({ effects: GardState.appendConfig.of(editorEventHandlers) });
+    }
+}

package/dist/changes.d.ts

@@ -0,0 +1,14 @@
+import type { Plot } from "wordgard/doc";
+export declare const mapNodePos: (changes: readonly number[], pos: number, leaf?: boolean) => {
+    pos: number;
+    retagged: boolean;
+} | null;
+export declare const mapKept: (changes: readonly number[], pos: number) => number | null;
+export declare const samePlace: (changes: readonly number[], oldStart: number, start: number) => boolean;
+export declare const redrawn: (changes: readonly number[] | null, pos: number) => boolean;
+export declare const isKept: (changes: readonly number[] | null, from: number, to: number) => boolean;
+export declare const pointMapper: (changes: readonly number[]) => (pos: number) => number[];
+export declare const unchangedEnds: (changes: readonly number[], oldPlot: Plot, oldStart: number, plot: Plot) => {
+    head: number;
+    tail: number;
+};

package/dist/changes.js

@@ -0,0 +1,163 @@
+const indexes = new WeakMap();
+const indexOf = (changes) => {
+    const found = indexes.get(changes);
+    if (found)
+        return found;
+    const index = {
+        startA: [],
+        endA: [],
+        startB: [],
+        endB: [],
+        ins: [],
+        first: Infinity,
+        last: -Infinity,
+    };
+    for (let i = 0, posA = 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);
+        index.startA.push(posA);
+        index.endA.push(posA + len);
+        index.startB.push(posB);
+        index.endB.push(endB);
+        index.ins.push(ins);
+        if (ins != -1) {
+            index.first = Math.min(index.first, posA);
+            index.last = posA + len;
+        }
+        posA += len;
+        posB = endB;
+    }
+    indexes.set(changes, index);
+    return index;
+};
+// The first section whose end (`ends` is ascending) is past `pos`, or reaches
+// it when `inclusive`; the section count when none is.
+const sectionAt = (ends, pos, inclusive = false) => {
+    let low = 0;
+    let high = ends.length;
+    while (low < high) {
+        const mid = (low + high) >> 1;
+        const end = ends[mid] ?? 0;
+        if (inclusive ? end >= pos : end > pos)
+            high = mid;
+        else
+            low = mid + 1;
+    }
+    return low;
+};
+// Wordgard's ChangeSet.mapPos with assoc 1 and track "after": where the node
+// starting at `pos` went, or null when its first token was replaced.
+// `retagged` marks a replacement of that token alone, by one token (a tag or
+// parameter change), which keeps the key when the node type stays the same. A
+// leaf is its token, and Wordgard's update merges adjacent replaced sections:
+// a leaf in a replaced section of unchanged length is retagged, at the same
+// offset in it. A copy, since `update` gets bare sections and Wordgard can't
+// map over those (docs/wordgard-upstream-bugs.md, "Requests").
+export const mapNodePos = (changes, pos, leaf = false) => {
+    const { startA, endA, startB, endB, ins } = indexOf(changes);
+    const k = sectionAt(endA, pos);
+    const fromA = startA[k] ?? 0;
+    const fromB = startB[k] ?? 0;
+    if (k == endA.length) {
+        const totalA = endA.at(-1) ?? 0;
+        return { pos: (endB.at(-1) ?? 0) + pos - totalA, retagged: false };
+    }
+    if ((ins[k] ?? 0) < 0)
+        return { pos: fromB + pos - fromA, retagged: false };
+    const lenA = (endA[k] ?? 0) - fromA;
+    if (leaf && lenA == ins[k])
+        return { pos: fromB + pos - fromA, retagged: true };
+    return fromA == pos && lenA == 1 && ins[k] == 1 ? { pos: fromB, retagged: true } : null;
+};
+// Where `pos` in the old document went, or null when it was replaced.
+export const mapKept = (changes, pos) => {
+    const { startA, endA, startB, ins } = indexOf(changes);
+    const k = sectionAt(endA, pos);
+    if (k == endA.length || (ins[k] ?? 0) >= 0)
+        return null;
+    return (startB[k] ?? 0) + pos - (startA[k] ?? 0);
+};
+// Whether a plot's content, which started at `oldStart`, starts at `start`
+// now, the plot kept in its place: mapped through its opening token (the doc
+// has none, and starts at 0), kept or replaced by one (a parameter changed),
+// as its key is, so an insertion at the start of the content doesn't count as
+// a move.
+export const samePlace = (changes, oldStart, start) => oldStart == 0 ? start == 0 : mapNodePos(changes, oldStart - 1)?.pos == start - 1;
+// Whether the token at `pos` in the new document is in a range the update
+// redraws or replaces.
+export const redrawn = (changes, pos) => {
+    if (!changes)
+        return false;
+    const { endB, ins } = indexOf(changes);
+    const k = sectionAt(endB, pos);
+    return k < endB.length && ins[k] != -1;
+};
+// Whether [from, to] in the new document lies in kept sections only, touching
+// no other (zero-length ones included).
+export const isKept = (changes, from, to) => {
+    if (!changes)
+        return false;
+    const { startB, endB, ins } = indexOf(changes);
+    for (let k = sectionAt(endB, from, true); k < endB.length; k++) {
+        const start = startB[k] ?? 0;
+        const end = endB[k] ?? 0;
+        if (start > to)
+            break;
+        if (ins[k] != -1 && (end == start ? start >= from && start <= to : start < to && end > from))
+            return false;
+    }
+    return true;
+};
+// Where an old position is in the new document, for Wordgard's update to look
+// for old widgets there (TilePointer.matchingWidget): along kept and redrawn
+// ranges, and at both edges of a replaced one, which meet in the old document
+// when it's an insertion. Nowhere inside one.
+export const pointMapper = (changes) => {
+    const { startA, endA, startB, ins } = indexOf(changes);
+    return (pos) => {
+        const found = [];
+        for (let k = sectionAt(endA, pos, true); k < endA.length; k++) {
+            const a = startA[k] ?? 0;
+            if (a > pos)
+                break;
+            const b = startB[k] ?? 0;
+            const inserted = ins[k] ?? 0;
+            if (inserted < 0)
+                found.push(b + pos - a);
+            else {
+                if (pos == a)
+                    found.push(b);
+                if (pos == (endA[k] ?? 0))
+                    found.push(b + inserted);
+            }
+        }
+        return found;
+    };
+};
+// How many of a plot's first and last children an update leaves alone: the
+// same node objects, wholly outside the ranges it redraws or replaces, without
+// touching one (zero-length ones included). `oldStart` is where the old plot's
+// content started. Laying out, keying and checking a re-laid plot then only
+// need its middle.
+export const unchangedEnds = (changes, oldPlot, oldStart, plot) => {
+    const { first, last } = indexOf(changes);
+    const before = oldPlot.content;
+    const after = plot.content;
+    const both = Math.min(before.length, after.length);
+    let head = 0;
+    for (let pos = oldStart; head < both; head++) {
+        const child = before[head];
+        if (!child || child !== after[head] || pos + child.length >= first)
+            break;
+        pos += child.length;
+    }
+    let tail = 0;
+    for (let pos = oldStart + oldPlot.contentLength; tail < both - head; tail++) {
+        const child = before[before.length - 1 - tail];
+        if (!child || child !== after[after.length - 1 - tail] || pos - child.length <= last)
+            break;
+        pos -= child.length;
+    }
+    return { head, tail };
+};

package/dist/components/ChildNodeViews.d.ts

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

package/dist/components/ChildNodeViews.js

@@ -0,0 +1,38 @@
+// Named after react-prosemirror's ChildNodeViews, rewritten for Wordgard: draws
+// what iterDeco lays out: nodes, text, mark wrappers, Wordgard's hack nodes and
+// React widgets. Native widgets aren't React's: ReactDocTile puts their DOM in
+// place after the commit.
+import React, { memo } from "react";
+import { cellOf } from "../contexts/RenderStoreContext.js";
+import { isReactWidget } from "../decorations/ReactWidgetType.js";
+import { shapeOf } from "../decorations/iterDeco.js";
+import { childViewKeys } from "../reactKeys.js";
+import { SeparatorHackView } from "./SeparatorHackView.js";
+import { TextNodeView } from "./TextNodeView.js";
+import { TrailingHackView } from "./TrailingHackView.js";
+import { WidgetView } from "./WidgetView.js";
+import { MarkView } from "./marks/MarkView.js";
+import { DefaultNodeView } from "./nodes/DefaultNodeView.js";
+export const renderChildViews = (views) => childViewKeys(views).map(({ view, key }) => {
+    switch (view.type) {
+        case "node":
+            return React.createElement(DefaultNodeView, { key: key, cell: cellOf(view) });
+        case "text":
+            return React.createElement(TextNodeView, { key: key, text: view.text });
+        case "wrapper":
+            return React.createElement(MarkView, { key: key, elt: view.elt, views: view.children, mark: view.mark });
+        case "buffer":
+            return React.createElement(SeparatorHackView, { key: key });
+        case "composition":
+            // React keeps what it last committed in its own node, so it never
+            // writes to it; the browser's own node isn't React's to draw.
+            return view.rendered === null ? null : React.createElement(TextNodeView, { key: key, text: view.rendered });
+        case "trailingHack":
+            return React.createElement(TrailingHackView, { key: key });
+        case "widget":
+            return isReactWidget(view.widget) ? React.createElement(WidgetView, { key: key, widget: view.widget }) : null;
+    }
+});
+// Skipped when a plot's content keeps its shape (iterDeco's shapeOf): the
+// nodes that changed in it get their views from their cells.
+export const ChildNodeViews = memo(({ views }) => React.createElement(React.Fragment, null, renderChildViews(views)), (a, b) => shapeOf(a.views) == shapeOf(b.views));

package/dist/components/DecorationRoot.d.ts

@@ -0,0 +1,7 @@
+import { type AllHTMLAttributes, type ReactNode } from "react";
+export type DecorationRootProps = AllHTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+};
+export declare const DecorationRoot: import("react").ForwardRefExoticComponent<AllHTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+} & import("react").RefAttributes<Element>>;

package/dist/components/DecorationRoot.js

@@ -0,0 +1,28 @@
+// A React shape's, wrapper's or mark's root, drawn for its component: the tag
+// its Elt says, Wordgard's attributes and the root's ref, so the component
+// can't get them wrong. The component's own props win, but `className` joins
+// Wordgard's and `style` merges, its keys winning. Not in react-prosemirror.
+import { createElement, forwardRef, useContext, useMemo, } from "react";
+import { DecorationRootContext } from "../contexts/DecorationRootContext.js";
+import { cssToStyle, htmlAttrsToReactProps } from "../helpers/props.js";
+import { mergeRefs, toCallbackRef } from "../helpers/refs.js";
+export const DecorationRoot = forwardRef(({ className, style, ...props }, ref) => {
+    const root = useContext(DecorationRootContext);
+    const rootRef = root?.ref;
+    const merged = useMemo(() => mergeRefs(rootRef, toCallbackRef(ref)), [rootRef, ref]);
+    if (!root)
+        throw new Error("DecorationRoot is the root of a React shape, wrapper, mark or widget: use it in their component");
+    // Wordgard's style is a string, which React can't merge with an object.
+    const { style: css, ...attrs } = root.attrs;
+    const own = htmlAttrsToReactProps(style ? attrs : root.attrs);
+    const classes = [own.className, className].filter(Boolean).join(" ");
+    return createElement(root.tagName, {
+        ...own,
+        ...props,
+        className: classes || undefined,
+        ...(style && { style: { ...cssToStyle(css), ...style } }),
+        ref: merged,
+        suppressContentEditableWarning: true,
+    });
+});
+DecorationRoot.displayName = "DecorationRoot";

package/dist/components/ErrorBoundary.d.ts

@@ -0,0 +1,18 @@
+import { Component, type ReactNode } from "react";
+type Props = {
+    onError: (error: unknown) => void;
+    children?: ReactNode;
+};
+export declare class ErrorBoundary extends Component<Props, {
+    failed: boolean;
+}> {
+    state: {
+        failed: boolean;
+    };
+    static getDerivedStateFromError: () => {
+        failed: boolean;
+    };
+    componentDidCatch(error: unknown): void;
+    render(): ReactNode;
+}
+export {};

package/dist/components/ErrorBoundary.js

@@ -0,0 +1,16 @@
+// Not in react-prosemirror: catches an error thrown while React renders the
+// document, for ReactDocTile to throw it from the update. React 18 rethrows it
+// from flushSync, React 19 reports it as uncaught and commits nothing, and the
+// tiles can't be built over what didn't commit. A class: React has no hook for
+// this.
+import { Component } from "react";
+export class ErrorBoundary extends Component {
+    state = { failed: false };
+    static getDerivedStateFromError = () => ({ failed: true });
+    componentDidCatch(error) {
+        this.props.onError(error);
+    }
+    render() {
+        return this.state.failed ? null : this.props.children;
+    }
+}

package/dist/components/SeparatorHackView.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const SeparatorHackView: () => React.JSX.Element;

package/dist/components/SeparatorHackView.js

@@ -0,0 +1,5 @@
+// Named after react-prosemirror's SeparatorHackView, rewritten for Wordgard: the
+// `<img class="wg-buffer">` Wordgard puts at the start and end of an inline plot
+// (`Widget.img`), which gives the cursor somewhere to go.
+import React from "react";
+export const SeparatorHackView = () => React.createElement("img", { className: "wg-buffer" });

package/dist/components/ShapeView.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;
+    content: ReactNode;
+    selected: boolean;
+    outerRef?: ((dom: Element | null) => void) | undefined;
+};
+export declare const ShapeView: ({ elt, node, content, selected, outerRef }: Props) => React.JSX.Element;
+export {};

package/dist/components/ShapeView.js

@@ -0,0 +1,26 @@
+// Named after react-prosemirror's ReactNodeView, for Wordgard: draws a React
+// shape's component, with the node's content as its children. ReactDocTile
+// builds the tiles over what it commits; the component's own commits are
+// sorted out of Wordgard's DOM observer (`sortRecords`).
+import React, { useMemo, useState } from "react";
+import { DecorationContext, createDecorationHandlers, decorationRoot, } from "../contexts/DecorationContext.js";
+import { atomRef, createShapeHandle, drawShape, nodePos, 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 ShapeView = ({ elt, node, content, selected, outerRef }) => {
+    const [{ handle, ref, contentDOMRef }] = useState(createShapeHandle);
+    const [handlers] = useState(() => createDecorationHandlers(nodePos(handle)));
+    const atom = !elt.hasContent;
+    const rootRef = useMemo(() => mergeRefs(ref, outerRef, decorationRoot(handlers), atomRef(handle, atom)), [ref, outerRef, handlers, handle, atom]);
+    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 }, drawShape(elt, {
+            attrs: componentProps(attrs),
+            nodeProps: { node, getPos: handlers.getPos, contentDOMRef },
+            children: content,
+            ref: rootRef,
+        }))));
+};

package/dist/components/TextNodeView.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    text: string;
+};
+export declare const TextNodeView: import("react").MemoExoticComponent<({ text }: Props) => string>;
+export {};

package/dist/components/TextNodeView.js

@@ -0,0 +1,5 @@
+// Named after react-prosemirror's TextNodeView, rewritten for Wordgard: a text
+// leaf renders as a bare text node, its tile is built after the commit
+// (ReactDocTile). Skipped while its text is the same.
+import { memo } from "react";
+export const TextNodeView = memo(({ text }) => text);

package/dist/components/TrailingHackView.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const TrailingHackView: () => React.JSX.Element;

package/dist/components/TrailingHackView.js

@@ -0,0 +1,5 @@
+// Named after react-prosemirror's TrailingHackView, rewritten for Wordgard: the
+// `<br>` Wordgard's own renderer adds to a textblock that needs one
+// (`Widget.br`).
+import React from "react";
+export const TrailingHackView = () => React.createElement("br", null);

package/dist/components/WidgetView.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { Widget } from "wordgard/editor";
+type Props = {
+    widget: Widget;
+    attrs?: readonly string[];
+    selected?: boolean;
+    outerRef?: ((dom: Element | null) => void) | undefined;
+};
+export declare const WidgetView: React.MemoExoticComponent<({ widget, attrs, selected, outerRef }: Props) => React.JSX.Element>;
+export {};

package/dist/components/WidgetView.js

@@ -0,0 +1,35 @@
+// Named after react-prosemirror's WidgetView, rewritten for Wordgard: draws a
+// React widget's component, whose root element becomes the widget's DOM.
+// ReactDocTile builds its tile after the commit, so there's no view
+// description to register here. Skipped while the widget is `eq`, so the
+// component keeps its DOM, as Wordgard keeps an equal widget's.
+import React, { memo, useMemo, useRef, useState } from "react";
+import { DecorationContext, createDecorationHandlers, decorationRoot, } from "../contexts/DecorationContext.js";
+import { DecorationRootContext } from "../contexts/DecorationRootContext.js";
+import { drawWidget, widgetElement, widgetRoot } from "../decorations/ReactWidgetType.js";
+import { attrsToRecord, componentProps } from "../helpers/index.js";
+import { mergeRefs } from "../helpers/refs.js";
+export const WidgetView = memo(({ widget, attrs = none, selected = false, outerRef }) => {
+    const root = useRef(null);
+    const [handlers] = useState(() => createDecorationHandlers(() => {
+        // A removed element keeps its last tile.
+        const tile = root.current?.isConnected && root.current.wgTile;
+        if (!tile)
+            throw new Error("This React widget isn't drawn");
+        return tile.posBefore;
+    }));
+    const ref = useMemo(() => mergeRefs((dom) => {
+        root.current = dom;
+    }, widgetRoot, decorationRoot(handlers), outerRef), [root, handlers, outerRef]);
+    const decoration = useMemo(() => ({ handlers, selected }), [handlers, selected]);
+    const record = useMemo(() => attrsToRecord(attrs), [attrs]);
+    const tagName = widgetElement(widget);
+    const decorationRootValue = useMemo(() => ({ tagName, attrs: record, ref }), [tagName, record, ref]);
+    return (React.createElement(DecorationContext.Provider, { value: decoration },
+        React.createElement(DecorationRootContext.Provider, { value: decorationRootValue }, drawWidget(widget, ref, componentProps(record)))));
+}, (a, b) => a.widget.eq(b.widget) &&
+    a.outerRef == b.outerRef &&
+    a.selected == b.selected &&
+    sameAttrs(a.attrs ?? none, b.attrs ?? none));
+const none = [];
+const sameAttrs = (a, b) => a.length == b.length && a.every((value, i) => value == b[i]);

package/dist/components/WordgardDoc.d.ts

@@ -0,0 +1,4 @@
+import React, { type HTMLAttributes } from "react";
+type Props = Omit<HTMLAttributes<HTMLDivElement>, "children">;
+export declare const WordgardDoc: (props: Props) => React.JSX.Element;
+export {};

package/dist/components/WordgardDoc.js

@@ -0,0 +1,34 @@
+// Named after react-prosemirror's ProseMirrorDoc, rewritten for Wordgard:
+// puts the editor's element in the page, inside a `div` taking the props, and
+// renders its document through a portal into Wordgard's content element, so
+// the document shares the app's React tree and contexts. 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);
+};
+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,7 @@
+import React, { type ReactNode } from "react";
+import type { Wordgard } from "wordgard/editor";
+type Props = Omit<Wordgard.Spec, "parent"> & {
+    children?: ReactNode;
+};
+export declare const WordgardEditor: ({ children, ...spec }: Props) => React.JSX.Element;
+export {};

package/dist/components/WordgardEditor.js

@@ -0,0 +1,13 @@
+// Named after react-prosemirror's ProseMirror component, rewritten for
+// Wordgard: creates the editor and provides it to what it holds, WordgardDoc
+// and the app's own components (menus, hooks). The spec is read once, as
+// react-prosemirror's `defaultState`: Wordgard's editor owns its state, so
+// changes go through `dispatch`, and configuration through Wordgard's
+// compartments or `GardState.appendConfig`.
+import React, { useState } from "react";
+import { ReactWordgard } from "../ReactWordgard.js";
+import { EditorContext, editorOf } from "../contexts/EditorContext.js";
+export const WordgardEditor = ({ children, ...spec }) => {
+    const [editor] = useState(() => editorOf(ReactWordgard.host(spec)));
+    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,26 @@
+// Draws a React wrapper's component, with what it wraps (the node's shape, or
+// the element its `target` picks) as its children. Like 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 { 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 {};