@stesura/react-wordgard 0.0.0-stage → 0.2.0

package/THIRD_PARTY_LICENSES.txt

@@ -0,0 +1,93 @@
+react-wordgard includes code from the projects below. Their copyright and
+license notices are reproduced here, as their licenses require.
+
+
+================================================================================
+react-prosemirror
+https://github.com/handlewithcarecollective/react-prosemirror
+================================================================================
+
+react-wordgard is derived from react-prosemirror, maintained by Handle with
+Care Collective and originally created at The New York Times Company. Files
+that came from it keep their "Copyright (c) The New York Times Company"
+headers.
+
+react-prosemirror was released under the Apache License 2.0 until 2026-10-02
+(commit 1827d3a) and under the MIT License since then. Both notices follow.
+
+--- MIT License (since 2026-10-02) ---------------------------------------------
+
+MIT License
+
+Copyright (c) 2026 Handle with Care Collective
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+--- Apache License 2.0 (until 2026-10-02) --------------------------------------
+
+Copyright (c) 2022 The New York Times Company
+Copyright (c) 2025 Handle with Care Collective
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this library except in compliance with the License. You may obtain a copy of the
+License at
+
+www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed
+under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. See the License for the
+specific language governing permissions and limitations under the License.
+
+
+================================================================================
+Wordgard
+https://wordgard.net
+================================================================================
+
+test/wordgard/ holds copies of Wordgard's browser tests and their helpers;
+demo/main.tsx is adapted from Wordgard's demo (demo/demo.ts), and the
+IME emulation in src/__tests__/tile.browser.test.ts from its `compose` test
+helper (test/webtest-composition.ts). src/decorations/DecoIterator.ts copies
+Wordgard's decoration walker (src/editor/decoration.ts), with changes noted in
+the file. src/tile.ts copies `setUneditable` from Wordgard's tile tree
+(src/editor/tile.ts) and follows its tile builder there.
+
+MIT License
+
+Copyright (C) 2026 by Marijn Haverbeke <marijn@haverbeke.berlin>.
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/ReactWordgard.d.ts

@@ -0,0 +1,13 @@
+import { Wordgard } from "wordgard/editor";
+import { ReactDocTile } from "./tile.js";
+import { type DOMObserver, DocTile } from "./wordgardInternals.js";
+export declare class ReactWordgard extends Wordgard {
+    docTile: DocTile;
+    observer: DOMObserver;
+    scheduleFlush: () => void;
+    static create: (spec: Wordgard.Spec) => ReactWordgard;
+    static host: (spec: Wordgard.Spec) => ReactWordgard;
+    static DocTile: typeof ReactDocTile;
+    constructor(spec: Wordgard.Spec, hosted?: boolean);
+    flush(): void;
+}

package/dist/ReactWordgard.js

@@ -0,0 +1,94 @@
+// Adapted from react-prosemirror's ReactEditorView, to fit Wordgard: it extends Wordgard, and its
+// base constructor builds a tile tree React renders, where ReactEditorView replaces the docView.
+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,36 @@
+// Named after react-prosemirror's ChildNodeViews, rewritten for Wordgard: draws what iterDeco lays
+// out. 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,13 @@
+import { type AllHTMLAttributes, type ReactNode } from "react";
+/** `DecorationRoot`'s props: its root's attributes, and its children. */
+export type DecorationRootProps = AllHTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+};
+/**
+ * The root element of a React shape, wrapper, mark or widget: the tag the decoration says, with
+ * Wordgard's attributes merged with the props. See [React
+ * decorations](https://github.com/stesura/react-wordgard#react-decorations).
+ */
+export declare const DecorationRoot: import("react").ForwardRefExoticComponent<AllHTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+} & import("react").RefAttributes<Element>>;

package/dist/components/DecorationRoot.js

@@ -0,0 +1,31 @@
+// Not in react-prosemirror. The component's own props win, but `className` joins Wordgard's and
+// `style` merges, its keys winning.
+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";
+/**
+ * The root element of a React shape, wrapper, mark or widget: the tag the decoration says, with
+ * Wordgard's attributes merged with the props. See [React
+ * decorations](https://github.com/stesura/react-wordgard#react-decorations).
+ */
+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,14 @@
+// Not in react-prosemirror: catches a render error for ReactDocTile to throw from the update. React
+// 18 rethrows it from flushSync, React 19 reports it and commits nothing. 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,4 @@
+// Named after react-prosemirror's SeparatorHackView, rewritten for Wordgard: the
+// `<img class="wg-buffer">` (`Widget.img`) at the ends of an inline plot.
+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,24 @@
+// Named after react-prosemirror's ReactNodeView, for Wordgard: draws a React shape's component. Its
+// 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,4 @@
+// Named after react-prosemirror's TextNodeView, rewritten for Wordgard: a bare text node, whose
+// tile ReactDocTile builds after the commit.
+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,4 @@
+// Named after react-prosemirror's TrailingHackView, rewritten for Wordgard: the `<br>` a textblock
+// may need (`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,32 @@
+// Named after react-prosemirror's WidgetView, rewritten for Wordgard. 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,9 @@
+import React, { type HTMLAttributes } from "react";
+type Props = Omit<HTMLAttributes<HTMLDivElement>, "children">;
+/**
+ * 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 declare const WordgardDoc: (props: Props) => React.JSX.Element;
+export {};