@stesura/react-prosemirror 3.2.11-stesura.1

package/dist/esm/components/nodes/NodeViewConstructorView.js

@@ -0,0 +1,94 @@
+import { DOMSerializer } from "prosemirror-model";
+import React, { cloneElement, memo, useMemo, useRef } from "react";
+import { createPortal } from "react-dom";
+import { ChildDescriptionsContext } from "../../contexts/ChildDescriptionsContext.js";
+import { useForceUpdate } from "../../hooks/useForceUpdate.js";
+import { useNodeViewDescription } from "../../hooks/useNodeViewDescription.js";
+import { ChildNodeViews, wrapInDeco } from "../ChildNodeViews.js";
+export const NodeViewConstructorView = /*#__PURE__*/ memo(function NodeViewConstructorView(param) {
+    let { constructor, node, getPos, innerDeco, outerDeco } = param;
+    const ref = useRef(null);
+    const innerRef = useRef(null);
+    const forceUpdate = useForceUpdate();
+    const nodeProps = useMemo(()=>({
+            node,
+            getPos,
+            decorations: outerDeco,
+            innerDecorations: innerDeco,
+            contentDOMRef: {
+                current: null
+            }
+        }), [
+        node,
+        getPos,
+        outerDeco,
+        innerDeco
+    ]);
+    const createNodeView = function() {
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
+        }
+        const nodeView = constructor(...args);
+        if (!nodeView || !nodeView.dom) {
+            const spec = node.type.spec.toDOM?.(node);
+            if (!spec) {
+                throw new Error(`Node spec for ${node.type.name} is missing toDOM`);
+            }
+            return DOMSerializer.renderSpec(document, spec, null);
+        }
+        return nodeView;
+    };
+    const { childContextValue, contentDOM } = useNodeViewDescription(()=>ref.current, (source)=>source?.contentDOM ?? null, function() {
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
+        }
+        const nodeView = createNodeView(...args);
+        const contentDOM = nodeView.contentDOM;
+        const nodeDOM = nodeView.dom;
+        const wrapperDOM = innerRef.current ?? ref.current;
+        wrapperDOM.appendChild(nodeDOM);
+        if (!contentDOM && nodeDOM instanceof HTMLElement && nodeDOM.tagName !== "BR") {
+            if (!nodeDOM.hasAttribute("contenteditable")) {
+                nodeDOM.contentEditable = "false";
+            }
+            if (node.type.spec.draggable) {
+                nodeDOM.draggable = true;
+            }
+        }
+        if (contentDOM) {
+            // Force a re-render if we have a contentDOM,
+            // so that we properly create a portal into it
+            forceUpdate();
+        }
+        return {
+            destroy () {
+                if (nodeView.destroy) {
+                    nodeView.destroy();
+                }
+                wrapperDOM.removeChild(nodeDOM);
+            },
+            dom: nodeView.dom,
+            contentDOM: nodeView.contentDOM,
+            multiType: nodeView.multiType,
+            update: nodeView.update?.bind(nodeView),
+            selectNode: nodeView.selectNode?.bind(nodeView),
+            deselectNode: nodeView.deselectNode?.bind(nodeView),
+            stopEvent: nodeView.stopEvent?.bind(nodeView),
+            ignoreMutation: nodeView.ignoreMutation?.bind(nodeView)
+        };
+    }, nodeProps);
+    const Component = node.isInline ? "span" : "div";
+    const props = {
+        ref: innerRef
+    };
+    const children = !node.isLeaf && contentDOM ? /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(ChildDescriptionsContext.Provider, {
+        value: childContextValue
+    }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
+        getPos: getPos,
+        node: node,
+        innerDecorations: innerDeco
+    })), contentDOM) : null;
+    return /*#__PURE__*/ cloneElement(outerDeco.reduce(wrapInDeco, /*#__PURE__*/ React.createElement(Component, props, children)), {
+        ref
+    });
+});

package/dist/esm/components/nodes/ReactNodeView.js

@@ -0,0 +1,138 @@
+import React, { cloneElement, memo, useCallback, useMemo, useRef, useState } from "react";
+import { ChildDescriptionsContext } from "../../contexts/ChildDescriptionsContext.js";
+import { IgnoreMutationContext } from "../../contexts/IgnoreMutationContext.js";
+import { SelectNodeContext } from "../../contexts/SelectNodeContext.js";
+import { StopEventContext } from "../../contexts/StopEventContext.js";
+import { useForceUpdate } from "../../hooks/useForceUpdate.js";
+import { useNodeViewDescription } from "../../hooks/useNodeViewDescription.js";
+import { useSetDom } from "../../hooks/useSetDom.js";
+import { ChildNodeViews, wrapInDeco } from "../ChildNodeViews.js";
+export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
+    let { component: Component, outerDeco, getPos, node, innerDeco } = param;
+    const [hasCustomSelectNode, setHasCustomSelectNode] = useState(false);
+    const [selected, setSelected] = useState(false);
+    const forceUpdate = useForceUpdate();
+    const domRef = useRef(null);
+    const nodeDOMRef = useRef(null);
+    const contentDOMRef = useRef(null);
+    const selectNodeRef = useRef(null);
+    const deselectNodeRef = useRef(null);
+    const stopEventRef = useRef(null);
+    const ignoreMutationRef = useRef(null);
+    const setSelectNode = useCallback((selectHandler, deselectHandler)=>{
+        selectNodeRef.current = selectHandler;
+        deselectNodeRef.current = deselectHandler;
+        setHasCustomSelectNode(true);
+        return ()=>{
+            selectNodeRef.current = null;
+            deselectNodeRef.current = null;
+            setHasCustomSelectNode(false);
+        };
+    }, []);
+    const setStopEvent = useCallback((handler)=>{
+        stopEventRef.current = handler;
+        return ()=>{
+            stopEventRef.current = null;
+        };
+    }, []);
+    const setIgnoreMutation = useCallback((handler)=>{
+        ignoreMutationRef.current = handler;
+        return ()=>{
+            ignoreMutationRef.current = null;
+            return ()=>{
+                ignoreMutationRef.current = null;
+            };
+        };
+    }, []);
+    const nodeViewDescProps = useMemo(()=>({
+            node: node,
+            getPos: getPos,
+            decorations: outerDeco,
+            innerDecorations: innerDeco
+        }), [
+        getPos,
+        innerDeco,
+        node,
+        outerDeco
+    ]);
+    const { childContextValue, refUpdated, isMounted } = useNodeViewDescription(()=>domRef.current, ()=>contentDOMRef.current, ()=>{
+        setSelected(false);
+        return {
+            dom: nodeDOMRef.current ?? domRef.current,
+            contentDOM: contentDOMRef.current,
+            update () {
+                return true;
+            },
+            multiType: true,
+            selectNode () {
+                const selectNode = selectNodeRef.current;
+                if (selectNode) {
+                    selectNode.call(this);
+                }
+                setSelected(true);
+            },
+            deselectNode () {
+                const deselectNode = deselectNodeRef.current;
+                if (deselectNode) {
+                    deselectNode.call(this);
+                }
+                setSelected(false);
+            },
+            stopEvent (event) {
+                const stopEvent = stopEventRef.current;
+                if (stopEvent) {
+                    return stopEvent.call(this, event);
+                }
+                return false;
+            },
+            ignoreMutation (mutation) {
+                const ignoreMutation = ignoreMutationRef.current;
+                if (ignoreMutation) {
+                    return ignoreMutation.call(this, mutation);
+                }
+                return false;
+            }
+        };
+    }, nodeViewDescProps);
+    const setDOM = useSetDom(domRef, refUpdated, isMounted, forceUpdate);
+    const setNodeDOM = useSetDom(nodeDOMRef, refUpdated, isMounted, forceUpdate);
+    const setContentDOM = useSetDom(contentDOMRef, refUpdated, isMounted, forceUpdate);
+    const nodeProps = useMemo(()=>({
+            ...nodeViewDescProps,
+            contentDOMRef: setContentDOM
+        }), [
+        nodeViewDescProps,
+        setContentDOM
+    ]);
+    const props = {
+        nodeProps,
+        ...!contentDOMRef.current && !nodeProps.node.isText && nodeDOMRef.current?.nodeName !== "BR" ? {
+            contentEditable: false,
+            suppressContentEditableWarning: true
+        } : null,
+        ...!hasCustomSelectNode && selected ? {
+            className: "ProseMirror-selectednode"
+        } : null,
+        ...!hasCustomSelectNode && selected || !contentDOMRef.current && !nodeProps.node.isText && domRef.current?.nodeName !== "BR" && node.type.spec.draggable ? {
+            draggable: true
+        } : null,
+        ref: setNodeDOM
+    };
+    const children = !node.isLeaf ? /*#__PURE__*/ React.createElement(ChildNodeViews, {
+        getPos: getPos,
+        node: node,
+        innerDecorations: innerDeco
+    }) : null;
+    const element = /*#__PURE__*/ cloneElement(outerDeco.reduce(wrapInDeco, /*#__PURE__*/ React.createElement(Component, props, children)), {
+        ref: setDOM
+    });
+    return /*#__PURE__*/ React.createElement(SelectNodeContext.Provider, {
+        value: setSelectNode
+    }, /*#__PURE__*/ React.createElement(StopEventContext.Provider, {
+        value: setStopEvent
+    }, /*#__PURE__*/ React.createElement(IgnoreMutationContext.Provider, {
+        value: setIgnoreMutation
+    }, /*#__PURE__*/ React.createElement(ChildDescriptionsContext.Provider, {
+        value: childContextValue
+    }, element))));
+});

package/dist/esm/constants.js

@@ -0,0 +1,15 @@
+import { Schema } from "prosemirror-model";
+import { EditorState } from "prosemirror-state";
+export const EMPTY_SCHEMA = new Schema({
+    nodes: {
+        doc: {
+            content: "text*"
+        },
+        text: {
+            inline: true
+        }
+    }
+});
+export const EMPTY_STATE = EditorState.create({
+    schema: EMPTY_SCHEMA
+});

package/dist/esm/contexts/ChildDescriptionsContext.js

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+export const ChildDescriptionsContext = createContext({
+    parentRef: {
+        current: undefined
+    },
+    siblingsRef: {
+        current: []
+    }
+});

package/dist/esm/contexts/EditorContext.js

@@ -0,0 +1,7 @@
+/* Copyright (c) The New York Times Company */ import { createContext } from "react";
+/**
+ * Provides the EditorView, as well as the current
+ * EditorState. Should not be consumed directly; instead
+ * see `useEditorState`, `useEditorViewEvent`, and
+ * `useEditorViewLayoutEffect`.
+ */ export const EditorContext = createContext(null);

package/dist/esm/contexts/EditorStateContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const EditorStateContext = createContext(null);

package/dist/esm/contexts/EditorStateStoreContext.js

@@ -0,0 +1,27 @@
+import { createContext } from "react";
+export function createEditorStateStore() {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let state = null;
+    let pendingNotify = false;
+    const listeners = new Set();
+    return {
+        getState: ()=>state,
+        subscribe: (listener)=>{
+            listeners.add(listener);
+            return ()=>listeners.delete(listener);
+        },
+        setState: (newState)=>{
+            if (state !== newState) {
+                state = newState;
+                pendingNotify = true;
+            }
+        },
+        notifyListeners: ()=>{
+            if (pendingNotify) {
+                pendingNotify = false;
+                listeners.forEach((l)=>l());
+            }
+        }
+    };
+}
+export const EditorStateStoreContext = createContext(null);

package/dist/esm/contexts/IgnoreMutationContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const IgnoreMutationContext = createContext(null);

package/dist/esm/contexts/LayoutGroupContext.js

@@ -0,0 +1,2 @@
+/* Copyright (c) The New York Times Company */ import { createContext } from "react";
+export const LayoutGroupContext = /*#__PURE__*/ createContext(null);

package/dist/esm/contexts/NodeViewContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const NodeViewContext = createContext(null);

package/dist/esm/contexts/RenderStoreContext.js

@@ -0,0 +1,33 @@
+import { createContext, useContext, useSyncExternalStore } from "react";
+export const createRenderStore = ()=>{
+    const listeners = new Set();
+    let version = 0;
+    const store = {
+        state: null,
+        doc: null,
+        announced: false,
+        getVersion: ()=>version,
+        subscribe: (listener)=>{
+            listeners.add(listener);
+            return ()=>{
+                listeners.delete(listener);
+            };
+        },
+        announce: ()=>{
+            // Nobody to re-render through the store: let the contexts change.
+            if (!listeners.size) return;
+            store.announced = true;
+            version++;
+            listeners.forEach((listener)=>listener());
+        }
+    };
+    return store;
+};
+export const RenderStoreContext = createContext(null);
+const inertStore = createRenderStore();
+/** Subscribes to announced transactions; null when `stableContexts` is off. */ export const useRenderStore = ()=>{
+    const store = useContext(RenderStoreContext);
+    const subscribed = store ?? inertStore;
+    useSyncExternalStore(subscribed.subscribe, subscribed.getVersion, subscribed.getVersion);
+    return store;
+};

package/dist/esm/contexts/SelectNodeContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const SelectNodeContext = createContext(null);

package/dist/esm/contexts/StopEventContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const StopEventContext = createContext(null);

package/dist/esm/decorations/ReactWidgetType.js

@@ -0,0 +1,40 @@
+import { Decoration } from "prosemirror-view";
+function compareObjs(a, b) {
+    if (a == b) return true;
+    for(const p in a)if (a[p] !== b[p]) return false;
+    for(const p in b)if (!(p in a)) return false;
+    return true;
+}
+const noSpec = {
+    side: 0
+};
+export class ReactWidgetType {
+    Component;
+    side;
+    spec;
+    constructor(Component, spec){
+        this.Component = Component;
+        this.spec = spec ?? noSpec;
+        this.side = this.spec.side ?? 0;
+    }
+    map(mapping, span, offset, oldOffset) {
+        const { pos, deleted } = mapping.mapResult(span.from + oldOffset, this.side < 0 ? -1 : 1);
+        // @ts-expect-error The Decoration constructor is private/internal, but
+        // we need to use it for our custom widget implementation here.
+        return deleted ? null : new Decoration(pos - offset, pos - offset, this);
+    }
+    valid() {
+        return true;
+    }
+    eq(other) {
+        return this == other || other instanceof ReactWidgetType && (this.spec.key && this.spec.key == other.spec.key || this.Component == other.Component && compareObjs(this.spec, other.spec));
+    }
+    destroy() {
+    // Can be implemented with React effect hooks
+    }
+}
+export function widget(pos, component, spec) {
+    // @ts-expect-error The Decoration constructor is private/internal, but
+    // we need to use it for our custom widget implementation here.
+    return new Decoration(pos, pos, new ReactWidgetType(component, spec));
+}

package/dist/esm/decorations/computeDocDeco.js

@@ -0,0 +1,44 @@
+import { Decoration } from "prosemirror-view";
+const DocDecorationsCache = new WeakMap();
+/**
+ * Produces the outer decorations for the doc node, based
+ * on the attributes editor prop.
+ *
+ * The return value of this function is memoized; if it is to
+ * return an equivalent value to the last time it was called for
+ * a given EditorView, it will return exactly that previous value.
+ *
+ * This makes it safe to call in a React render function, even
+ * if its result is used in a dependencies array for a hook.
+ */ export function computeDocDeco(view) {
+    const attrs = Object.create(null);
+    attrs.class = "ProseMirror";
+    attrs.contenteditable = String(view.editable);
+    view.someProp("attributes", (value)=>{
+        if (typeof value == "function") value = value(view.state);
+        if (value) for(const attr in value){
+            if (attr == "class") attrs.class += " " + value[attr];
+            else if (attr == "style") attrs.style = (attrs.style ? attrs.style + ";" : "") + value[attr];
+            else if (!attrs[attr] && attr != "contenteditable" && attr != "nodeName") attrs[attr] = String(value[attr]);
+        }
+    });
+    if (!attrs.translate) attrs.translate = "no";
+    const next = [
+        Decoration.node(0, view.state.doc.content.size, attrs)
+    ];
+    const previous = DocDecorationsCache.get(view);
+    if (!previous) {
+        DocDecorationsCache.set(view, next);
+        return next;
+    }
+    if (previous[0].to !== view.state.doc.content.size) {
+        DocDecorationsCache.set(view, next);
+        return next;
+    }
+    // @ts-expect-error Internal property (Decoration.type)
+    if (!previous[0].type.eq(next[0].type)) {
+        DocDecorationsCache.set(view, next);
+        return next;
+    }
+    return previous;
+}

package/dist/esm/decorations/internalTypes.js

@@ -0,0 +1 @@
+export { };

package/dist/esm/decorations/iterDeco.js

@@ -0,0 +1,85 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */ import { ReactWidgetType } from "./ReactWidgetType.js";
+function compareSide(a, b) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return a.type.side - b.type.side;
+}
+// This function abstracts iterating over the nodes and decorations in
+// a fragment. Calls `onNode` for each node, with its local and child
+// decorations. Splits text nodes when there is a decoration starting
+// or ending inside of them. Calls `onWidget` for each widget.
+export function iterDeco(parent, deco, // Callbacks have been slightly modified to pass
+// the offset, so that we can pass the position as
+// a prop to components
+onWidget, onNode) {
+    const locals = deco.locals(parent);
+    let offset = 0;
+    // Simple, cheap variant for when there are no local decorations
+    if (locals.length == 0) {
+        for(let i = 0; i < parent.childCount; i++){
+            const child = parent.child(i);
+            onNode(child, locals, deco.forChild(offset, child), offset, i);
+            offset += child.nodeSize;
+        }
+        return;
+    }
+    let decoIndex = 0;
+    const active = [];
+    let restNode = null;
+    for(let parentIndex = 0;;){
+        if (decoIndex < locals.length && locals[decoIndex].to == offset) {
+            let widget;
+            let widgets;
+            while(decoIndex < locals.length && locals[decoIndex].to == offset){
+                const next = locals[decoIndex++];
+                if (next.widget || // FORK: Our custom widget type can't report itself as a widget,
+                // so we have to explicitly check
+                next.type instanceof ReactWidgetType) {
+                    if (!widget) widget = next;
+                    else (widgets || (widgets = [
+                        widget
+                    ])).push(next);
+                }
+            }
+            if (widget) {
+                if (widgets) {
+                    widgets.sort(compareSide);
+                    for(let i = 0; i < widgets.length; i++)onWidget(widgets[i], // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    !(widgets[i].type instanceof ReactWidgetType), offset, parentIndex + i, !!restNode);
+                } else {
+                    onWidget(widget, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    !(widget.type instanceof ReactWidgetType), offset, parentIndex, !!restNode);
+                }
+            }
+        }
+        let child, index;
+        if (restNode) {
+            index = -1;
+            child = restNode;
+            restNode = null;
+        } else if (parentIndex < parent.childCount) {
+            index = parentIndex;
+            child = parent.child(parentIndex++);
+        } else {
+            break;
+        }
+        for(let i = 0; i < active.length; i++)if (active[i].to <= offset) active.splice(i--, 1);
+        while(decoIndex < locals.length && locals[decoIndex].from <= offset && locals[decoIndex].to > offset)active.push(locals[decoIndex++]);
+        let end = offset + child.nodeSize;
+        if (child.isText) {
+            let cutAt = end;
+            if (decoIndex < locals.length && locals[decoIndex].from < cutAt) cutAt = locals[decoIndex].from;
+            for(let i = 0; i < active.length; i++)if (active[i].to < cutAt) cutAt = active[i].to;
+            if (cutAt < end) {
+                restNode = child.cut(cutAt - offset);
+                child = child.cut(0, cutAt - offset);
+                end = cutAt;
+                index = -1;
+            }
+        } else {
+            while(decoIndex < locals.length && locals[decoIndex].to < end)decoIndex++;
+        }
+        const outerDeco = child.isInline && !child.isLeaf ? active.filter((d)=>!d.inline) : active.slice();
+        onNode(child, outerDeco, deco.forChild(offset, child), offset, index);
+        offset = end;
+    }
+}