@stesura/react-wordgard 0.0.0-stage → 0.2.0

package/dist/decorations/ReactShapeType.js

@@ -0,0 +1,202 @@
+// Named after ReactWidgetType. A React shape is a real Wordgard `Elt`, registered as drawn by a
+// component through a reserved attribute, which every copy Wordgard makes of it keeps and React
+// never renders. Its tag is fixed before React renders (`target` selectors match it), so
+// `createShape` gives `Decoration.Tag.shape` a function of the tag. The props follow
+// react-prosemirror's node views (`nodeProps`, `contentDOMRef`, a forwarded ref).
+import { createElement, } from "react";
+import { Attributes, Elt } from "wordgard/doc";
+import { ignoresMutation } from "../contexts/DecorationContext.js";
+import { takesRef } from "../helpers/refs.js";
+export const reserved = "data-wg-react";
+const draws = new Map();
+// By component: calling createShape again with one gives the same shape, so
+// Wordgard sees no configuration change and the registry doesn't grow.
+const shapes = new WeakMap();
+/**
+ * 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 const createShape = (component) => {
+    const found = shapes.get(component);
+    if (found)
+        return found;
+    const id = String(draws.size + 1);
+    draws.set(id, ({ attrs, nodeProps, children, ref }) => createElement(component, {
+        ...attrs,
+        ref: takesRef(component) ? ref : undefined,
+        nodeProps,
+        children,
+    }));
+    const shapeElt = (element, attrs, atom) => Elt.create(element, Attributes.merge(attrs, [reserved, id]), atom ? [] : [0]);
+    const forTag = (tag) => {
+        const { shape } = tag.type;
+        const outer = shape.create(tag.param);
+        return shapeElt(outer.tagName, outer.attrs, shape.atom);
+    };
+    const shape = Object.assign(forTag, {
+        of: (element, { atom = false } = {}) => shapeElt(element, [], atom),
+    });
+    shapes.set(component, shape);
+    return shape;
+};
+export const idOf = (elt) => Attributes.get(elt.attrs, reserved);
+export const isReactShape = (elt) => {
+    const id = idOf(elt);
+    return id != null && draws.has(id);
+};
+// The attributes Wordgard merged onto the shape, without the reserved one.
+export const shapeAttributes = (elt) => {
+    const attrs = [];
+    for (let i = 0; i + 1 < elt.attrs.length; i += 2) {
+        const name = elt.attrs[i];
+        const value = elt.attrs[i + 1];
+        if (name !== undefined && value !== undefined && name != reserved)
+            attrs.push(name, value);
+    }
+    return attrs;
+};
+export const drawShape = (elt, props) => {
+    const draw = draws.get(idOf(elt) ?? "");
+    if (!draw)
+        throw new Error("Not a React shape");
+    return draw(props);
+};
+const roots = new WeakMap();
+const contents = new WeakMap();
+const wrapped = new WeakSet();
+// Every element that was a shape's content element: typing never adds or
+// removes one, React moving a shape's content does.
+const everContent = new WeakSet();
+export const shapeOfRoot = (dom) => roots.get(dom);
+export const contentOf = (handle) => handle.content ?? (handle.wrapper || handle.atom ? null : handle.root);
+const rootRef = (handle) => (dom) => {
+    if (handle.root)
+        roots.delete(handle.root);
+    handle.root = dom;
+    if (dom)
+        roots.set(dom, handle);
+};
+// Whether the shape a root draws is an atom, recorded when React commits it.
+export const atomRef = (handle, atom) => () => {
+    handle.atom = atom;
+};
+export const createShapeHandle = () => {
+    const handle = { root: null, content: null, wrapper: false, atom: false };
+    const contentDOMRef = (dom) => {
+        if (handle.content)
+            contents.delete(handle.content);
+        handle.content = dom;
+        if (dom) {
+            contents.set(dom, handle);
+            everContent.add(dom);
+        }
+    };
+    return { handle, ref: rootRef(handle), contentDOMRef };
+};
+export const createWrapperHandle = () => {
+    const handle = { root: null, content: null, wrapper: true, atom: false };
+    const wrappedRef = (dom) => {
+        if (handle.content)
+            wrapped.delete(handle.content);
+        handle.content = dom;
+        if (dom)
+            wrapped.add(dom);
+    };
+    return { handle, ref: rootRef(handle), wrappedRef };
+};
+// The position of the node a React shape or wrapper draws, from its tile: the
+// root's, or the one around it when wrapped.
+export const nodePos = (handle) => () => {
+    let tile = handle.root?.isConnected ? handle.root.wgTile : undefined;
+    while (tile && !tile.tag)
+        tile = tile.parent ?? undefined;
+    if (!tile)
+        throw new Error("This React shape or wrapper isn't drawn");
+    return tile.posBefore;
+};
+// The React shape or wrapper whose chrome or structure `node` is in: the
+// first root found going up, unless a shape's content element or a wrapped
+// element comes first.
+const shapeAround = (node) => {
+    for (let cur = node; cur; cur = cur.parentNode) {
+        if (!(cur instanceof Element))
+            continue;
+        if (contents.has(cur))
+            return null;
+        const root = roots.get(cur);
+        // A shape's root without a content element holds the content itself,
+        // unless it's an atom's.
+        if (root)
+            return root.content || root.atom ? root : null;
+        if (wrapped.has(cur))
+            return null;
+    }
+    return null;
+};
+// The React shape whose content element `dom` is.
+const contentShape = (dom) => {
+    const handle = contents.get(dom) ?? roots.get(dom);
+    return handle && contentOf(handle) == dom ? handle : null;
+};
+// The React shape or wrapper whose root, or an element inside it, `node` is.
+const shapeOf = (node) => {
+    for (let cur = node; cur; cur = cur.parentNode) {
+        const handle = cur instanceof Element ? roots.get(cur) : undefined;
+        if (handle)
+            return handle;
+    }
+    return null;
+};
+const movesContent = (record) => [...record.addedNodes, ...record.removedNodes].some((node) => node instanceof Element && everContent.has(node));
+// Sorts DOM mutation records: the ones a React shape's own commit made outside
+// its content go (Wordgard would take them for edits), and the shapes whose
+// structure changed (an element added or removed between the root and the
+// content, or beside the content in a container's content element) are
+// collected, for their tiles to be rebuilt. The same for a React wrapper, what
+// it wraps standing for the content. In a container (blocks, no text),
+// the browser's typing never adds or removes children of the content element
+// itself, so those records are React's too; `inline` says whether a shape's
+// content is text. Typing in an empty textblock in the same task as a commit
+// moving its content would be taken for React's (a limit).
+export const sortRecords = (records, changed, inline) => {
+    // Shapes whose content React moved to another element in these records (one
+    // commit's: typing comes in a task of its own): what else changed in their
+    // content element is React's too.
+    const moved = new Set();
+    for (const record of records)
+        if (record.type == "childList" && movesContent(record)) {
+            const handle = shapeOf(record.target);
+            if (handle)
+                moved.add(handle);
+        }
+    const keeps = (record) => {
+        const { target } = record;
+        if (record.type == "attributes") {
+            if (!(target instanceof Element))
+                return true;
+            return !contents.has(target) && !roots.has(target) && !shapeAround(target);
+        }
+        const own = record.type == "childList" && target instanceof Element && contentShape(target);
+        if (own) {
+            if (own.root && inline(own.root) && !moved.has(own))
+                return true;
+            if (own.root)
+                changed.add(own.root);
+            return false;
+        }
+        const handle = shapeAround(target);
+        if (!handle)
+            return true;
+        // An atom's structure is its root's children: its tiles are chrome over them.
+        const content = contentOf(handle) ?? (handle.atom ? handle.root : null);
+        if (record.type == "childList" &&
+            handle.root &&
+            content &&
+            target instanceof Element &&
+            target.contains(content))
+            changed.add(handle.root);
+        return false;
+    };
+    // What's left is Wordgard's, unless a decoration around it claims it.
+    return records.filter((record) => keeps(record) && !ignoresMutation(record));
+};

package/dist/decorations/ReactWidgetType.d.ts

@@ -0,0 +1,29 @@
+import { type AllHTMLAttributes, type ComponentType, type HTMLProps, type ReactElement, type RefAttributes, type RefCallback } from "react";
+import { Attributes, Elt } from "wordgard/doc";
+import { Widget } from "wordgard/editor";
+/**
+ * A React widget's props: its `value`, and, for a widget drawing a node, the node's attributes for
+ * its root.
+ */
+export type WidgetComponentProps<Param, E extends Element = HTMLElement> = Omit<AllHTMLAttributes<HTMLElement>, "value"> & {
+    value: Param;
+} & RefAttributes<E>;
+/** `createWidgetType`'s spec: Wordgard's widget spec, with a component in place of `render`. */
+export type WidgetTypeSpec<Param, E extends Element = HTMLElement> = Omit<Widget.Spec<Param>, "render"> & {
+    component: ComponentType<WidgetComponentProps<Param, E>>;
+    /**
+     * The root `DecorationRoot` draws in the component, `span` by default. Wordgard doesn't look at a
+     * widget's element, so it's the component's choice.
+     */
+    element?: string;
+};
+/** A widget type whose widgets, `type.of(value)`, the component draws. */
+export declare const createWidgetType: <Param, E extends Element = HTMLElement>(spec: WidgetTypeSpec<Param, E>) => Widget.Type<Param>;
+export declare const createWidgetTypeWithRender: <Param, E extends Element = HTMLElement>(spec: WidgetTypeSpec<Param, E> & Pick<Widget.Spec<Param>, "render">) => Widget.Type<Param>;
+export declare const isReactWidget: (widget: Widget) => boolean;
+export declare const drawWidget: (widget: Widget, ref: RefCallback<Element>, attrs?: HTMLProps<HTMLElement>) => ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export declare const widgetElement: (widget: Widget) => string;
+export declare const attributeWidget: (widget: Widget, attrs: Attributes, tagName: string) => Elt<Widget<unknown>>;
+export declare const attributedWidget: (elt: Elt<unknown>) => Widget<any> | null;
+export declare const widgetRoots: WeakSet<Element>;
+export declare const widgetRoot: (dom: Element | null) => void;

package/dist/decorations/ReactWidgetType.js

@@ -0,0 +1,67 @@
+// Named after react-prosemirror's ReactWidgetType, rewritten for Wordgard: a real Wordgard widget
+// type (Widget.define, same spec), drawn by its component in the editor's React tree. Its root,
+// which the component forwards its ref to, is the widget's DOM: the component may re-render inside
+// it, but not swap it, or the parent's tile puts the old one back. An editable one the user edits
+// keeps the edit, where Wordgard would redraw it.
+import { createElement, } from "react";
+import { Attributes, Elt } from "wordgard/doc";
+import { Widget } from "wordgard/editor";
+import { stopsEvent } from "../contexts/DecorationContext.js";
+import { takesRef } from "../helpers/refs.js";
+import { reserved } from "./ReactShapeType.js";
+const components = new WeakMap();
+// Widget.define needs a `render`, which ReactWordgard never calls: only plain
+// Wordgard, given a React widget, draws this.
+const placeholder = () => document.createElement("span");
+/** A widget type whose widgets, `type.of(value)`, the component draws. */
+export const createWidgetType = (spec) => createWidgetTypeWithRender({ ...spec, render: placeholder });
+// For the tests comparing ReactWordgard with plain Wordgard, which draws
+// `render`.
+export const createWidgetTypeWithRender = (spec) => {
+    const { component, element = "span", propagateEvent, ...widgetSpec } = spec;
+    // Its components' useStopEvent first, then the spec's.
+    const type = Widget.define({
+        ...widgetSpec,
+        propagateEvent: (event) => !stopsEvent(event) &&
+            (typeof propagateEvent == "function" ? propagateEvent(event) : propagateEvent !== false),
+    });
+    // A type guard, not checked by the compiler: a widget of `type` was made by
+    // `type.of`, so its value is a Param.
+    const own = (widget) => widget.type == type;
+    const draw = (widget, ref, attrs) => own(widget)
+        ? createElement(component, {
+            ...attrs,
+            value: widget.value,
+            ref: takesRef(component) ? ref : undefined,
+        })
+        : null;
+    components.set(type, { draw, element });
+    return type;
+};
+export const isReactWidget = (widget) => components.has(widget.type);
+// The widget's component, its ref on the root element.
+export const drawWidget = (widget, ref, attrs = {}) => components.get(widget.type)?.draw(widget, ref, attrs) ?? null;
+// The root a React widget's DecorationRoot draws.
+export const widgetElement = (widget) => components.get(widget.type)?.element ?? "span";
+// Wordgard adds attributes to a widget-drawn node by wrapping the widget in an
+// element. Around a React widget, that element is marked: the view draws the
+// widget alone, the attributes as props, so a selection (the class it adds)
+// doesn't move the component under a new parent, which would remount it. The
+// marked element still merges later attributes and takes wrappers, as
+// Wordgard's.
+const attributed = "widget";
+export const attributeWidget = (widget, attrs, tagName) => Elt.create(tagName, isReactWidget(widget) ? Attributes.merge(attrs, [reserved, attributed]) : attrs, [widget]);
+// The React widget a marked element holds, its attributes being the widget's.
+export const attributedWidget = (elt) => {
+    const [widget] = elt.children;
+    return Attributes.get(elt.attrs, reserved) == attributed && widget instanceof Widget
+        ? widget
+        : null;
+};
+// The root elements React widgets forwarded their ref to, for ReactDocTile to
+// check it got the widget's DOM.
+export const widgetRoots = new WeakSet();
+export const widgetRoot = (dom) => {
+    if (dom)
+        widgetRoots.add(dom);
+};

package/dist/decorations/ReactWrapperType.d.ts

@@ -0,0 +1,31 @@
+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 wrapper's props: as a shape's, without `contentDOMRef`. `children` is what it wraps.
+ */
+export type WrapperComponentProps<E extends Element = HTMLElement> = AllHTMLAttributes<HTMLElement> & {
+    nodeProps: {
+        node: DocNode;
+        getPos: () => number;
+    };
+    children: ReactNode;
+} & RefAttributes<E>;
+/** `createWrapper`'s options. */
+export type WrapperOptions = {
+    /**
+     * The component's root element, `div` by default: `target` selectors match it, and plain Wordgard
+     * draws it. `span` around an inline node.
+     */
+    element?: string;
+};
+type DrawProps = {
+    attrs: HTMLProps<HTMLElement>;
+    nodeProps: WrapperComponentProps["nodeProps"];
+    children: ReactNode;
+    ref: RefCallback<Element>;
+};
+/** A wrapper, for `Decoration.Tag.wrapper` and `Decoration.Point.wrapper`. */
+export declare const createWrapper: <E extends Element = HTMLElement>(component: ComponentType<WrapperComponentProps<E>>, { element }?: WrapperOptions) => Elt;
+export declare const isReactWrapper: (elt: Elt<unknown>) => boolean;
+export declare const drawWrapper: (elt: Elt<unknown>, props: DrawProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export {};

package/dist/decorations/ReactWrapperType.js

@@ -0,0 +1,41 @@
+// Named after ReactWidgetType. A React wrapper is a real Wordgard `Elt` with a hole, registered as
+// React shapes are (the reserved attribute).
+import { createElement, } from "react";
+import { Elt } from "wordgard/doc";
+import { takesRef } from "../helpers/refs.js";
+import { idOf, reserved } from "./ReactShapeType.js";
+// Keyed apart from React shapes' ids, which share the attribute.
+const draws = new Map();
+// By component, then root element, as React shapes are.
+const wrappers = new WeakMap();
+/** A wrapper, for `Decoration.Tag.wrapper` and `Decoration.Point.wrapper`. */
+export const createWrapper = (component, { element = "div" } = {}) => {
+    let registered = wrappers.get(component);
+    if (!registered) {
+        const id = `w${draws.size + 1}`;
+        draws.set(id, ({ attrs, nodeProps, children, ref }) => createElement(component, {
+            ...attrs,
+            ref: takesRef(component) ? ref : undefined,
+            nodeProps,
+            children,
+        }));
+        registered = { id, elts: new Map() };
+        wrappers.set(component, registered);
+    }
+    let elt = registered.elts.get(element);
+    if (!elt) {
+        elt = Elt.mk(element, { [reserved]: registered.id }, [0]);
+        registered.elts.set(element, elt);
+    }
+    return elt;
+};
+export const isReactWrapper = (elt) => {
+    const id = idOf(elt);
+    return id != null && draws.has(id);
+};
+export const drawWrapper = (elt, props) => {
+    const draw = draws.get(idOf(elt) ?? "");
+    if (!draw)
+        throw new Error("Not a React wrapper");
+    return draw(props);
+};

package/dist/decorations/iterDeco.d.ts

@@ -0,0 +1,82 @@
+import { Mark, type Node, type Plot } from "wordgard/doc";
+import { type Decoration, Widget } from "wordgard/editor";
+import type { CompositionView } from "../composition.js";
+import { type RenderStore } from "../contexts/RenderStoreContext.js";
+import type { DecoElt } from "../wordgardInternals.js";
+import { type DecoIterator } from "./DecoIterator.js";
+export type NodeView = {
+    type: "node";
+    node: Node;
+    key: string;
+    shape: Decoration.Shape;
+    children: readonly ChildView[] | null;
+};
+type WrapperChildView = {
+    type: "wrapper";
+    elt: DecoElt;
+    spanning: boolean;
+    children: ChildView[];
+    key?: string;
+    mark?: Mark;
+};
+type WidgetChildView = {
+    type: "widget";
+    widget: Widget;
+    side: number;
+    key?: string;
+    offset?: number;
+};
+export type ChildView = NodeView | {
+    type: "text";
+    text: string;
+} | WrapperChildView | {
+    type: "buffer";
+    side: -1 | 1;
+} | WidgetChildView | {
+    type: "composition";
+    key: string;
+    rendered: string | null;
+} | {
+    type: "trailingHack";
+};
+export type WrapperView = {
+    readonly elt: DecoElt;
+    readonly spanning: boolean;
+    readonly key?: string;
+    readonly mark?: Mark;
+};
+export type CompositionLayout = {
+    readonly from: number;
+    readonly to: number;
+    readonly wrappers: readonly WrapperView[];
+    readonly cursor: boolean;
+};
+export declare const cursorWrappers: (marks: Mark.Set) => WrapperView[];
+export declare const uneditable: (shape: DecoElt, inEditable: boolean) => {
+    shape: DecoElt;
+    inEditable: boolean;
+};
+export declare const sameNodeView: (a: NodeView, b: NodeView) => boolean;
+export declare const shapeOf: (views: readonly ChildView[]) => object;
+export type LayoutContext = {
+    deco: DecoIterator;
+    store: RenderStore;
+    changes: readonly number[] | null;
+    layouts: WeakMap<Plot, Layout>;
+    composition: CompositionView | null;
+    composing: ReadonlySet<Plot>;
+    replaced: WeakMap<Plot, Plot>;
+    pass: object;
+};
+export type Layout = {
+    offset: number;
+    pass: object;
+    readonly views: readonly ChildView[];
+    readonly flat: boolean;
+};
+type ParentStart = {
+    readonly start: number;
+    readonly oldStart: number | null;
+};
+export declare const iterDeco: (context: LayoutContext, plot: Plot, start: number, parent?: ParentStart) => readonly ChildView[];
+export {};