@stesura/react-wordgard 0.0.0-stage → 0.1.0

package/dist/contexts/editorEvents.js

@@ -0,0 +1,95 @@
+// The DOM events useEditorEventListener can listen to, and the handlers
+// ReactWordgard installs for them. Wordgard has a handler per event type, so
+// the types are fixed when the editor is created. Adding a handler makes
+// Wordgard's listener for the type non-passive: the events that block
+// scrolling (touch, wheel) aren't among them, nor the most frequent ones
+// (mousemove, pointer events), each of which would then walk the tiles.
+import { Wordgard } from "wordgard/editor";
+import { GardState } from "wordgard/state";
+export const editorEvents = [
+    "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",
+];
+// Every type's list made at once: the type checks none is missing, and they're
+// then only read.
+const createListeners = () => ({
+    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: [],
+});
+const registries = new WeakMap();
+export const listenersOf = (wg, type) => {
+    let registry = registries.get(wg);
+    if (!registry) {
+        registry = createListeners();
+        registries.set(wg, registry);
+    }
+    return registry[type];
+};
+const handler = (type) => Wordgard.domEventHandler(type, (event, wg) => {
+    // A copy: a listener may unregister one.
+    for (const listener of [...listenersOf(wg, type)])
+        if (listener(event) || event.defaultPrevented)
+            return true;
+    return false;
+});
+// Whether a state has the handlers: `GardState.reconfigure` drops them.
+const installed = GardState.Facet.define({
+    combine: (values) => values.length > 0,
+});
+export const hasEditorEventHandlers = (state) => state.facet(installed);
+// Wordgard redoes its handlers only when its plugins change: this one makes
+// adding or dropping the handlers such a change.
+const refresh = Wordgard.Plugin.define(() => ({}));
+export const editorEventHandlers = GardState.prec.highest([
+    editorEvents.map(handler),
+    installed.of(true),
+    refresh,
+]);

package/dist/decorations/DecoIterator.d.ts

@@ -0,0 +1,43 @@
+import { type Mark, type Node, type Plot, type Pos } from "wordgard/doc";
+import { Decoration, Widget } from "wordgard/editor";
+import { type Set } from "wordgard/set";
+import type { GardState } from "wordgard/state";
+import { type DecoElt, type DecoSet, type TagAttribute, type TagWidget, type TagWrapper, type WrapperRangeDecoration } from "../wordgardInternals.js";
+declare const enum WidgetPlace {
+    Before = 0,
+    After = 1,
+    Start = 2,
+    End = 3
+}
+export type WrapperSource = Mark | WrapperRangeDecoration;
+export interface DecoWalker {
+    enter(node: Plot, shape: DecoElt, wrappers: readonly WrapperSource[], pos: number): boolean;
+    leave(): void;
+    node(node: Node, shape: Decoration.Shape, wrappers: readonly WrapperSource[], partial: number | undefined, pos: number): void;
+    nodePart(node: Node, length: number, done: boolean): void;
+    widget(widget: Widget, side: number, point: boolean): void;
+}
+export declare const getDecoSet: (state: GardState) => DecoSet;
+export declare const renderMarkWrapper: (arg: Mark<unknown>) => DecoElt;
+export declare const documentMark: (mark: Mark) => Mark<unknown>;
+export declare const renderWrapper: (src: WrapperSource) => DecoElt;
+export declare class DecoIterator {
+    readonly state: GardState;
+    readonly decoSet: DecoSet;
+    tagShapes: Map<Node.Type, (tag: Node.Tag) => Decoration.Shape>;
+    globalWidgets: readonly TagWidget[];
+    globalWrappers: readonly TagWrapper[];
+    globalAttrs: readonly TagAttribute[];
+    markShapes: Map<Mark.Type, Mark.Type>;
+    pos: Pos;
+    rangeCursor: Set.Cursor<Decoration.Range>;
+    pointSets: readonly Decoration.Point.Set[];
+    pointCursor: Set.Cursor<Decoration.Point>;
+    constructor(state: GardState, decoSet: DecoSet);
+    widgets(tag: Node.Tag, place: WidgetPlace, walker: DecoWalker): void;
+    nodeWrappers(tag: Node.Tag, active: readonly Decoration.Range[], atom: boolean): readonly WrapperSource[];
+    walk(from: number, inclusiveStart: boolean, to: number, walker: DecoWalker): void;
+    tagShape(tag: Node.Tag, active: readonly Decoration.Range[]): Decoration.Shape;
+}
+export declare const spanningOf: (src: WrapperSource) => boolean;
+export {};

package/dist/decorations/DecoIterator.js

@@ -0,0 +1,462 @@
+// Copied from Wordgard 0.6.2 (src/editor/decoration.ts in its repo: DecoIterator,
+// SpanIterator, getDecoSet and the shape helpers), which doesn't export them.
+// Changes, so React can lay out one plot at a time:
+// - `walker.enter` says whether to descend. When it doesn't, the walk goes
+//   past the plot as a whole, emitting its `after` widgets once past.
+// - The walker gets each node's position, and is told which widgets come from
+//   point decorations.
+// - A walk can start before the previous one ended.
+// - Decoration sets come from the DecoSet, not from calling sources again, and
+//   range sets are split into layers a cursor can seek into.
+// - `nodeWrappers` without wrappers returns a shared empty array, as upstream.
+// - It records the document's mark behind a mark of an overridden shape
+//   (`documentMark`), for React marks.
+// - The element it wraps a React widget in to add attributes is marked
+//   (`attributeWidget`): the view draws the widget with them as props.
+// The internal classes and facets come from src/wordgardInternals.ts.
+import { Attributes, Elt, Leaf } from "wordgard/doc";
+import { Decoration, Widget } from "wordgard/editor";
+import { PointSet, RangeSet } from "wordgard/set";
+import { getDecorationInternals, } from "../wordgardInternals.js";
+import { attributeWidget } from "./ReactWidgetType.js";
+var DecorationScope;
+(function (DecorationScope) {
+    DecorationScope[DecorationScope["Atom"] = 1] = "Atom";
+    DecorationScope[DecorationScope["InlineAtom"] = 2] = "InlineAtom";
+    DecorationScope[DecorationScope["All"] = 4] = "All";
+})(DecorationScope || (DecorationScope = {}));
+var WidgetPlace;
+(function (WidgetPlace) {
+    WidgetPlace[WidgetPlace["Before"] = 0] = "Before";
+    WidgetPlace[WidgetPlace["After"] = 1] = "After";
+    WidgetPlace[WidgetPlace["Start"] = 2] = "Start";
+    WidgetPlace[WidgetPlace["End"] = 3] = "End";
+})(WidgetPlace || (WidgetPlace = {}));
+var Side;
+(function (Side) {
+    Side[Side["After"] = 1000000000] = "After";
+})(Side || (Side = {}));
+export const getDecoSet = (state) => {
+    const set = { points: new Map(), ranges: new Map() };
+    for (const src of state.facet(Decoration.Point.source))
+        set.points.set(src, src(state));
+    for (const src of state.facet(Decoration.Range.source))
+        set.ranges.set(src, src(state));
+    return set;
+};
+const memo = (f) => {
+    const map = new WeakMap();
+    return (arg) => {
+        let found = map.get(arg);
+        if (found === undefined)
+            map.set(arg, (found = f(arg)));
+        return found;
+    };
+};
+const addMarkAttributes = (overrides, shape, tag) => {
+    let attrs;
+    for (const mark of tag.marks) {
+        const type = overrides.get(mark.type) || mark.type;
+        if (type.attribute && (mark.type.spanning || !tag.isText)) {
+            const { get, target } = type.attribute;
+            const markAttrs = get(mark.value);
+            if (markAttrs.length) {
+                if (target && shape instanceof Elt)
+                    shape = shape.addAttrs(markAttrs, target);
+                else
+                    attrs = attrs ? Attributes.merge(attrs, markAttrs) : markAttrs;
+            }
+        }
+    }
+    return attrs ? addAttrs(shape, attrs, tag.type.isInline) : shape;
+};
+const addAttrs = (shape, attrs, inline) => shape instanceof Elt
+    ? shape.addAttrs(attrs)
+    : attributeWidget(shape, attrs, inline ? "span" : "div");
+const applyDeco = (shape, deco, tag) => {
+    const { AttributeDecoration, WrapperDecoration } = getDecorationInternals();
+    if (deco instanceof AttributeDecoration) {
+        return deco.selector && shape instanceof Elt
+            ? shape.addAttrs(deco.attrs, deco.selector)
+            : addAttrs(shape, deco.attrs, tag.type.isInline);
+    }
+    else if (deco instanceof WrapperDecoration) {
+        return deco.selector && shape instanceof Elt
+            ? shape.wrap(deco.elt, deco.selector)
+            : deco.elt.fill([shape]);
+    }
+    return shape;
+};
+const baseTagShape = memo((tag) => tag.is(Leaf.Text) ? Widget.editableText.of(tag.param) : tag.type.shape.create(tag.param));
+class SpanIterator {
+    ranges;
+    points;
+    end;
+    active = [];
+    activeEnd = [];
+    from;
+    to;
+    point = null;
+    pointSource = null;
+    done = false;
+    constructor(ranges, points, start, end) {
+        this.ranges = ranges;
+        this.points = points;
+        this.end = end;
+        this.from = this.to = start;
+    }
+    next() {
+        if (this.done)
+            return this;
+        if (this.point)
+            this.point = null;
+        const { ranges, points, active, activeEnd } = this;
+        for (;;) {
+            const [startPos, startSide] = ranges.value
+                ? [ranges.from, ranges.value.inclusiveStart ? -1 : 1]
+                : [1e9, 0];
+            let endPos = 1e9;
+            let endSide = 0;
+            let nextActive = -1;
+            for (let i = 0; i < active.length; i++) {
+                const pos = activeEnd[i] ?? 0;
+                const side = active[i]?.inclusiveEnd ? 1 : -1;
+                if ((pos - endPos || side - endSide) < 0) {
+                    endPos = pos;
+                    endSide = side;
+                    nextActive = i;
+                }
+            }
+            const [pointPos, pointSide] = points.value ? [points.from, points.value.side] : [1e9, 1];
+            const nextPos = Math.min(startPos, endPos, pointPos);
+            if (this.to == this.end && nextPos > this.to) {
+                this.done = true;
+                break;
+            }
+            else if (nextPos > this.to) {
+                this.from = this.to;
+                this.to = Math.min(this.end, nextPos);
+                break;
+            }
+            else if (pointPos == nextPos &&
+                (startPos > pointPos || pointSide < 0) &&
+                (endPos > pointPos || pointSide < 0)) {
+                this.point = points.value;
+                this.pointSource = points.set;
+                this.from = this.to = points.from;
+                points.next();
+                break;
+            }
+            else if ((startPos - endPos || startSide - endSide) < 0) {
+                if (ranges.value)
+                    active.push(ranges.value);
+                activeEnd.push(ranges.to);
+                ranges.next();
+            }
+            else {
+                active.splice(nextActive, 1);
+                activeEnd.splice(nextActive, 1);
+            }
+        }
+        return this;
+    }
+}
+const tagScope = (tag, atom) => DecorationScope.All |
+    (atom ? DecorationScope.Atom | (tag.type.isInline ? DecorationScope.InlineAtom : 0) : 0);
+export const renderMarkWrapper = memo((mark) => {
+    const shape = mark.type.element;
+    if (!shape)
+        throw new Error(`${mark.name} has no element shape`);
+    return Elt.create(shape.name, shape.attrs(mark.value), [0]);
+});
+// The document's mark a wrapper draws: `Decoration.Mark.shape` draws one of
+// a type it clones.
+const documentMarks = new WeakMap();
+export const documentMark = (mark) => documentMarks.get(mark) ?? mark;
+export const renderWrapper = (src) => src instanceof getDecorationInternals().WrapperRangeDecoration ? src.elt : renderMarkWrapper(src);
+const compareSetPrec = (setA, setB, array) => {
+    if (setA != setB)
+        for (const set of array) {
+            if (set == setA)
+                return -1;
+            if (set == setB)
+                return 1;
+        }
+    return 0;
+};
+// Where a walk ending at `target` has to stop: past the whole plot `target`
+// falls inside, among the content after `pos`.
+const pastPlotAt = (pos, target) => {
+    const { content } = pos.parent.node;
+    let start = pos.pos - pos.inText;
+    for (let i = pos.index; i < content.length; i++) {
+        const child = content[i];
+        if (!child)
+            break;
+        const end = start + child.length;
+        if (target < end)
+            return child.isPlot && target > start ? end : target;
+        start = end;
+    }
+    return target;
+};
+// Wordgard bug (docs/wordgard-upstream-bugs.md): a range set's second layer can
+// hold overlapping ranges, which its cursor can't seek into. Wordgard walks
+// forward only; React's per-plot walks seek, so they get the set's ranges in
+// layers that don't overlap.
+const seekable = memo((set) => {
+    const layers = [];
+    for (const cursor = set.cursor(0); cursor.value; cursor.next()) {
+        const { value, from, to } = cursor;
+        let layer = layers.find((layer) => layer.to <= from);
+        if (!layer)
+            layers.push((layer = { to, ranges: [] }));
+        layer.ranges.push([value, from, to]);
+        layer.to = to;
+    }
+    return layers.length > 1 ? layers.map(({ ranges }) => Decoration.Range.set(ranges)) : [set];
+});
+const none = [];
+export class DecoIterator {
+    state;
+    decoSet;
+    tagShapes;
+    globalWidgets;
+    globalWrappers;
+    globalAttrs;
+    markShapes;
+    pos;
+    rangeCursor;
+    pointSets;
+    pointCursor;
+    constructor(state, decoSet) {
+        this.state = state;
+        this.decoSet = decoSet;
+        const { tagShape, tagWidget, tagWrapper, tagAttribute, markShape } = getDecorationInternals();
+        this.tagShapes = state.facet(tagShape);
+        this.globalWidgets = state.facet(tagWidget);
+        this.globalWrappers = state.facet(tagWrapper);
+        this.globalAttrs = state.facet(tagAttribute);
+        this.markShapes = state.facet(markShape);
+        this.pos = state.doc.resolve(0);
+        this.rangeCursor = RangeSet.cursor([...decoSet.ranges.values()].flatMap(seekable));
+        this.pointSets = [...decoSet.points.values()];
+        this.pointCursor = PointSet.cursor(this.pointSets);
+    }
+    widgets(tag, place, walker) {
+        if (place == WidgetPlace.Start && tag.type.isInline)
+            walker.widget(Widget.img, -1, false);
+        for (const src of this.globalWidgets) {
+            if (src.place == place && tag.type == src.type) {
+                const widget = typeof src.widget == "function" ? src.widget(tag) : src.widget;
+                if (widget)
+                    walker.widget(widget, place == WidgetPlace.Before || place == WidgetPlace.End ? 1 : -1, false);
+            }
+        }
+        if (place == WidgetPlace.End && tag.type.isInline)
+            walker.widget(Widget.img, 1, false);
+    }
+    // Enumerate all wrapper elements for a given node. Spanning wrappers
+    // are always moved to the front of the result. Within the
+    // spanning/non-spanning wrappers, the ordering is determined by rank.
+    nodeWrappers(tag, active, atom) {
+        const { WrapperRangeDecoration } = getDecorationInternals();
+        const wrappers = [];
+        for (const mark of tag.marks) {
+            const shape = this.markShapes.get(mark.type) || mark.type;
+            if (shape.element) {
+                const drawn = shape == mark.type ? mark : shape.of(mark.value);
+                if (drawn != mark)
+                    documentMarks.set(drawn, mark);
+                wrappers.push(drawn);
+            }
+        }
+        for (const val of active) {
+            if (val instanceof WrapperRangeDecoration &&
+                tagScope(tag, atom) & val.scope &&
+                (!val.query || this.state.schema.matchNode(tag.type, val.query)))
+                wrappers.push(val);
+        }
+        if (!wrappers.length)
+            return none;
+        if (wrappers.length > 1)
+            wrappers.sort((a, b) => (spanningOf(a) == spanningOf(b) ? 0 : spanningOf(a) ? -1 : 1) || rankOf(a) - rankOf(b));
+        return wrappers;
+    }
+    walk(from, inclusiveStart, to, walker) {
+        const { WidgetDecoration, ShapeDecoration } = getDecorationInternals();
+        this.rangeCursor.goto(from);
+        this.pointCursor.goto(from, inclusiveStart ? -1e9 : Side.After);
+        const iter = new SpanIterator(this.rangeCursor, this.pointCursor, from, to);
+        let pos = from >= this.pos.pos ? this.pos.advance(from - this.pos.pos) : this.state.doc.resolve(from);
+        let started = inclusiveStart;
+        let atomParent;
+        for (let p = pos.parent; p; p = p.parent)
+            if (this.state.isAtom(p.node.type))
+                atomParent = p;
+        // Track points that may apply to the node at the start of the next range
+        const pendingDeco = [];
+        let pendingPos = -1;
+        let pendingShape = null;
+        let pendingShapeSet = null;
+        // A plot the walker didn't enter: its `after` widgets come once past it.
+        let skipped = null;
+        const flushSkipped = () => {
+            if (!skipped)
+                return;
+            const tag = skipped;
+            skipped = null;
+            this.widgets(tag, WidgetPlace.After, walker);
+        };
+        const wrap = {
+            skip: (node, pos) => {
+                // Only done for leaf nodes.
+                flushSkipped();
+                if (started)
+                    this.widgets(node.tag, WidgetPlace.Before, walker);
+                else
+                    started = true;
+                const hasPending = pendingPos == pos && !node.isText;
+                let shape = hasPending && pendingShape ? pendingShape : this.tagShape(node.tag, iter.active);
+                if (hasPending)
+                    for (const deco of pendingDeco)
+                        shape = applyDeco(shape, deco, node.tag);
+                if (shape.hasContent)
+                    throw new Error("Leaf nodes shapes shouldn't have a content hole");
+                walker.node(node, shape, this.nodeWrappers(node.tag, iter.active, true), undefined, pos);
+                this.widgets(node.tag, WidgetPlace.After, walker);
+            },
+            enterPlot: (node, pos) => {
+                flushSkipped();
+                if (started)
+                    this.widgets(node.tag, WidgetPlace.Before, walker);
+                else
+                    started = true;
+                let shape = pendingShape && pendingPos == pos ? pendingShape : this.tagShape(node.tag, iter.active);
+                if (pendingPos == pos)
+                    for (const deco of pendingDeco)
+                        shape = applyDeco(shape, deco, node.tag);
+                const wrappers = this.nodeWrappers(node.tag, iter.active, !shape.hasContent);
+                const atom = !shape.hasContent;
+                if (atom) {
+                    walker.node(node, shape, wrappers, pos + node.length > to ? to - pos : undefined, pos);
+                }
+                else if (shape instanceof Elt && !walker.enter(node, shape, wrappers, pos)) {
+                    skipped = node.tag;
+                    return false;
+                }
+                this.widgets(node.tag, WidgetPlace.Start, walker);
+                return !atom;
+            },
+            leavePlot: (tag) => {
+                flushSkipped();
+                if (started)
+                    this.widgets(tag, WidgetPlace.End, walker);
+                else
+                    started = true;
+                walker.leave();
+                this.widgets(tag, WidgetPlace.After, walker);
+            },
+        };
+        if (inclusiveStart) {
+            const before = pos.nodeBefore;
+            if (before)
+                this.widgets(before.tag, WidgetPlace.After, walker);
+            else
+                this.widgets(pos.parent.node.tag, WidgetPlace.Start, walker);
+        }
+        for (; !iter.next().done;) {
+            if (atomParent) {
+                const end = Math.min(to, atomParent.after);
+                const done = atomParent.after <= to;
+                walker.nodePart(atomParent.node, end - pos.pos, done);
+                pos = pos.advance(end - pos.pos);
+                if (done)
+                    this.widgets(atomParent.node.tag, WidgetPlace.After, walker);
+                atomParent = undefined;
+                while (iter.point && iter.from < end)
+                    iter.next();
+            }
+            else if (iter.point) {
+                // Inside a plot the walk went past.
+                if (iter.from < pos.pos)
+                    continue;
+                flushSkipped();
+                const value = iter.point;
+                if (value instanceof WidgetDecoration) {
+                    walker.widget(value.widget, value.side, true);
+                }
+                else {
+                    if (pendingPos < pos.pos) {
+                        pendingDeco.length = 0;
+                        pendingShape = null;
+                        pendingPos = pos.pos;
+                    }
+                    if (value instanceof ShapeDecoration &&
+                        (!pendingShape ||
+                            (pendingShapeSet &&
+                                iter.pointSource &&
+                                compareSetPrec(pendingShapeSet, iter.pointSource, this.pointSets)))) {
+                        pendingShape = value.shape;
+                        pendingShapeSet = iter.pointSource;
+                    }
+                    else {
+                        pendingDeco.push(value);
+                    }
+                }
+            }
+            else if (iter.to > pos.pos) {
+                pos = pos.walk(pastPlotAt(pos, iter.to) - pos.pos, wrap);
+            }
+        }
+        if (pos.pos < to)
+            pos = pos.walk(pastPlotAt(pos, to) - pos.pos, wrap);
+        flushSkipped();
+        if (atomParent) {
+            walker.nodePart(atomParent.node, 0, atomParent.after == to);
+        }
+        else {
+            const after = pos.nodeAfter;
+            if (after)
+                this.widgets(after.tag, WidgetPlace.Before, walker);
+            else
+                this.widgets(pos.parent.node.tag, WidgetPlace.End, walker);
+        }
+        this.pos = pos;
+    }
+    tagShape(tag, active) {
+        const { AttributeRangeDecoration } = getDecorationInternals();
+        const override = this.tagShapes.get(tag.type);
+        let shape = override ? override(tag) : baseTagShape(tag);
+        if (tag.marks.length)
+            shape = addMarkAttributes(this.markShapes, shape, tag);
+        let add;
+        for (const src of this.globalAttrs)
+            if (tag.type == src.type) {
+                if (src.target && shape instanceof Elt)
+                    shape = shape.addAttrs([src.attr, src.value(tag)], src.target);
+                else
+                    Attributes.push((add ||= []), src.attr, src.value(tag));
+            }
+        const scope = tagScope(tag, !shape.hasContent);
+        for (const { type, elt, target } of this.globalWrappers)
+            if (tag.type == type) {
+                shape = target && shape instanceof Elt ? shape.wrap(elt, target) : elt.fill([shape]);
+            }
+        for (const deco of active) {
+            if (deco instanceof AttributeRangeDecoration &&
+                scope & deco.scope &&
+                (!deco.query || this.state.schema.matchNode(tag.type, deco.query)))
+                Attributes.push((add ||= []), deco.attribute, deco.value);
+        }
+        if (add) {
+            if (shape instanceof Elt)
+                shape = Elt.create(shape.tagName, Attributes.merge(shape.attrs, add), shape.children);
+            else
+                shape = attributeWidget(shape, add, tag.type.isBlock ? "div" : "span");
+        }
+        return shape;
+    }
+}
+const rankOf = (src) => src instanceof getDecorationInternals().WrapperRangeDecoration ? src.rank : src.type.rank;
+export const spanningOf = (src) => src instanceof getDecorationInternals().WrapperRangeDecoration ? src.spanning : src.type.spanning;

package/dist/decorations/ReactMarkType.d.ts

@@ -0,0 +1,30 @@
+import { type AllHTMLAttributes, type ComponentType, type HTMLProps, type ReactElement, type ReactNode, type RefAttributes, type RefCallback } from "react";
+import type { Elt, Mark } from "wordgard/doc";
+import type { Tile } from "../wordgardInternals.js";
+export type MarkComponentProps<E extends Element = HTMLElement> = AllHTMLAttributes<HTMLElement> & {
+    markProps: {
+        mark: Mark;
+        getPos: () => number;
+        contentDOMRef: RefCallback<Element>;
+    };
+    children: ReactNode;
+} & RefAttributes<E>;
+export type MarkShapeOptions = {
+    element?: string;
+};
+type DrawProps = {
+    attrs: HTMLProps<HTMLElement>;
+    markProps: MarkComponentProps["markProps"];
+    children: ReactNode;
+    ref: RefCallback<Element>;
+};
+type MarkShape = {
+    element: string;
+    attributes: Record<string, string>;
+};
+export declare const createMarkShape: <E extends Element = HTMLElement>(component: ComponentType<MarkComponentProps<E>>, { element }?: MarkShapeOptions) => MarkShape;
+export declare const isReactMark: (elt: Elt<unknown>) => boolean;
+export declare const drawMark: (elt: Elt<unknown>, props: DrawProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare const markTiles: WeakSet<Tile>;
+export declare const markOfTile: WeakMap<Tile, Mark>;
+export {};

package/dist/decorations/ReactMarkType.js

@@ -0,0 +1,48 @@
+// Named after ReactWidgetType: a React mark is a mark's element shape (for
+// `Decoration.Mark.shape`, or a mark type's own spec), the element plain
+// Wordgard draws, registered as drawn by a component, which renders the
+// marked content as `children`. Wordgard's mark shapes are declarative, so the
+// registration is the reserved attribute React shapes use, which the element
+// Wordgard makes from the shape keeps. The props follow react-prosemirror's
+// MarkComponentProps.
+import { createElement, } from "react";
+import { takesRef } from "../helpers/refs.js";
+import { idOf, reserved } from "./ReactShapeType.js";
+// Keyed apart from React shapes' and wrappers' ids, which share the attribute.
+const draws = new Map();
+// By component, then root element, as React shapes are.
+const marks = new WeakMap();
+export const createMarkShape = (component, { element = "span" } = {}) => {
+    let registered = marks.get(component);
+    if (!registered) {
+        const id = `m${draws.size + 1}`;
+        draws.set(id, ({ attrs, markProps, children, ref }) => createElement(component, {
+            ...attrs,
+            ref: takesRef(component) ? ref : undefined,
+            markProps,
+            children,
+        }));
+        registered = { id, shapes: new Map() };
+        marks.set(component, registered);
+    }
+    let shape = registered.shapes.get(element);
+    if (!shape) {
+        shape = { element, attributes: { [reserved]: registered.id } };
+        registered.shapes.set(element, shape);
+    }
+    return shape;
+};
+export const isReactMark = (elt) => {
+    const id = idOf(elt);
+    return id != null && draws.has(id);
+};
+export const drawMark = (elt, props) => {
+    const draw = draws.get(idOf(elt) ?? "");
+    if (!draw)
+        throw new Error("Not a React mark");
+    return draw(props);
+};
+// The tiles over React marks' elements, and the mark each root's is for: a
+// composition inside one sits in one wrapper, not in each of its elements.
+export const markTiles = new WeakSet();
+export const markOfTile = new WeakMap();