@stesura/react-wordgard 0.0.0-stage → 0.2.0

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,41 @@
+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";
+/**
+ * A React mark's props, for each run of an equal mark: `markProps.mark` is the document's mark.
+ */
+export type MarkComponentProps<E extends Element = HTMLElement> = AllHTMLAttributes<HTMLElement> & {
+    markProps: {
+        mark: Mark;
+        getPos: () => number;
+        contentDOMRef: RefCallback<Element>;
+    };
+    children: ReactNode;
+} & RefAttributes<E>;
+/** `createMarkShape`'s options. */
+export type MarkShapeOptions = {
+    /**
+     * The component's root element, `span` by default, which plain Wordgard draws. It can't come from
+     * the mark type: a mark type's own `shape` is written before the type exists.
+     */
+    element?: string;
+};
+type DrawProps = {
+    attrs: HTMLProps<HTMLElement>;
+    markProps: MarkComponentProps["markProps"];
+    children: ReactNode;
+    ref: RefCallback<Element>;
+};
+type MarkShape = {
+    element: string;
+    attributes: Record<string, string>;
+};
+/**
+ * A mark's shape, for `Decoration.Mark.shape(MarkType, shape)` or a mark type's own `shape`.
+ */
+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,47 @@
+// Named after ReactWidgetType. A React mark is a mark's element shape, registered as drawn by a
+// component through the reserved attribute React shapes use: Wordgard's mark shapes are
+// declarative. 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();
+/**
+ * A mark's shape, for `Decoration.Mark.shape(MarkType, shape)` or a mark type's own `shape`.
+ */
+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();

package/dist/decorations/ReactShapeType.d.ts

@@ -0,0 +1,65 @@
+import { type AllHTMLAttributes, type ComponentType, type HTMLProps, type ReactElement, type ReactNode, type RefAttributes, type RefCallback } from "react";
+import { type Node as DocNode, Elt } from "wordgard/doc";
+/**
+ * A React shape's props: `nodeProps`, the content as `children`, and Wordgard's attributes and
+ * `ref` for its root. The content goes in the `contentDOMRef` element, else in the root; in an
+ * atom, `children` is empty and a `contentDOMRef` throws. With `<DecorationRoot>` as the root, the
+ * attributes and `ref` are taken care of; a root drawn by hand spreads them onto itself (see [A
+ * root drawn by hand](https://github.com/stesura/react-wordgard#a-root-drawn-by-hand)).
+ */
+export type ShapeComponentProps<E extends Element = HTMLElement> = AllHTMLAttributes<HTMLElement> & {
+    nodeProps: {
+        node: DocNode;
+        getPos: () => number;
+        contentDOMRef: RefCallback<Element>;
+    };
+    children: ReactNode;
+} & RefAttributes<E>;
+/**
+ * What `createShape` returns: for `Decoration.Tag.shape`, a node's shape, its root the node type's
+ * own outer element, an atom where the type's shape is. `of` gives the shape with `element` for its
+ * root: for `Decoration.Point.shape`, or a root other than the type's.
+ */
+export type ReactShape = ((tag: DocNode.Tag) => Elt) & {
+    of: (element: string, options?: {
+        atom?: boolean;
+    }) => Elt;
+};
+export declare const reserved = "data-wg-react";
+type DrawProps = {
+    attrs: HTMLProps<HTMLElement>;
+    nodeProps: ShapeComponentProps["nodeProps"];
+    children: ReactNode;
+    ref: RefCallback<Element>;
+};
+/**
+ * A node's shape, for `Decoration.Tag.shape(NodeType, shape)`. `shape.of(element)` is the shape
+ * with another root element, also for `Decoration.Point.shape`.
+ */
+export declare const createShape: <E extends Element = HTMLElement>(component: ComponentType<ShapeComponentProps<E>>) => ReactShape;
+export declare const idOf: (elt: Elt<unknown>) => string | null;
+export declare const isReactShape: (elt: Elt<unknown>) => boolean;
+export declare const shapeAttributes: (elt: Elt<unknown>) => string[];
+export declare const drawShape: (elt: Elt<unknown>, props: DrawProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export type ShapeHandle = {
+    root: Element | null;
+    content: Element | null;
+    wrapper: boolean;
+    atom: boolean;
+};
+export declare const shapeOfRoot: (dom: Element) => ShapeHandle | undefined;
+export declare const contentOf: (handle: ShapeHandle) => Element | null;
+export declare const atomRef: (handle: ShapeHandle, atom: boolean) => () => void;
+export declare const createShapeHandle: () => {
+    handle: ShapeHandle;
+    ref: (dom: Element | null) => void;
+    contentDOMRef: (dom: Element | null) => void;
+};
+export declare const createWrapperHandle: () => {
+    handle: ShapeHandle;
+    ref: (dom: Element | null) => void;
+    wrappedRef: (dom: Element | null) => void;
+};
+export declare const nodePos: (handle: ShapeHandle) => () => number;
+export declare const sortRecords: (records: readonly MutationRecord[], changed: Set<Element>, inline: (root: Element) => boolean) => MutationRecord[];
+export {};