@stesura/react-prosemirror 3.2.11-stesura.1

package/dist/esm/components/ProseMirror.js

@@ -0,0 +1,95 @@
+import React, { useMemo, useRef, useState } from "react";
+import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
+import { EditorContext } from "../contexts/EditorContext.js";
+import { EditorStateContext } from "../contexts/EditorStateContext.js";
+import { NodeViewContext } from "../contexts/NodeViewContext.js";
+import { RenderStoreContext } from "../contexts/RenderStoreContext.js";
+import { computeDocDeco } from "../decorations/computeDocDeco.js";
+import { viewDecorations } from "../decorations/viewDecorations.js";
+import { useEditor } from "../hooks/useEditor.js";
+import { EditorStateSelectorsProvider, EditorStateSelectorsRegistrar } from "./EditorStateSelectorsProvider.js";
+import { LayoutGroup } from "./LayoutGroup.js";
+import { DocNodeViewContext } from "./ProseMirrorDoc.js";
+function getPos() {
+    return -1;
+}
+const rootChildDescriptionsContextValue = {
+    parentRef: {
+        current: undefined
+    },
+    siblingsRef: {
+        current: []
+    }
+};
+function ProseMirrorInner(param) {
+    let { children, nodeViewComponents, markViewComponents, ...props } = param;
+    const [mount, setMount] = useState(null);
+    const { editor, state, renderStore } = useEditor(mount, props);
+    const nodeViewConstructors = editor.view.nodeViews;
+    const nodeViewContextValue = useMemo(()=>{
+        return {
+            components: {
+                ...nodeViewComponents,
+                ...markViewComponents
+            },
+            constructors: nodeViewConstructors
+        };
+    }, [
+        markViewComponents,
+        nodeViewComponents,
+        nodeViewConstructors
+    ]);
+    const node = state.doc;
+    const decorations = computeDocDeco(editor.view);
+    const innerDecorations = viewDecorations(editor.view);
+    const docNodeViewContextValue = useMemo(()=>({
+            setMount,
+            node,
+            getPos,
+            decorations,
+            innerDecorations
+        }), [
+        node,
+        decorations,
+        innerDecorations
+    ]);
+    // An announced render keeps the previous context values: the consumers
+    // re-render through the store in this pass anyway. The flag is consumed
+    // here, so that a render the announcement did not cover (a transaction
+    // dispatched from a layout effect, say) changes the contexts again.
+    const contextValuesRef = useRef({
+        state,
+        doc: docNodeViewContextValue
+    });
+    if (renderStore) {
+        renderStore.state = state;
+        renderStore.doc = docNodeViewContextValue;
+        if (!renderStore.announced) {
+            contextValuesRef.current = {
+                state,
+                doc: docNodeViewContextValue
+            };
+        }
+        renderStore.announced = false;
+    }
+    const contextValues = renderStore ? contextValuesRef.current : {
+        state,
+        doc: docNodeViewContextValue
+    };
+    return /*#__PURE__*/ React.createElement(EditorContext.Provider, {
+        value: editor
+    }, /*#__PURE__*/ React.createElement(RenderStoreContext.Provider, {
+        value: renderStore
+    }, /*#__PURE__*/ React.createElement(EditorStateContext.Provider, {
+        value: contextValues.state
+    }, /*#__PURE__*/ React.createElement(EditorStateSelectorsProvider, null, /*#__PURE__*/ React.createElement(NodeViewContext.Provider, {
+        value: nodeViewContextValue
+    }, /*#__PURE__*/ React.createElement(ChildDescriptionsContext.Provider, {
+        value: rootChildDescriptionsContextValue
+    }, /*#__PURE__*/ React.createElement(DocNodeViewContext.Provider, {
+        value: contextValues.doc
+    }, children)))))));
+}
+export function ProseMirror(props) {
+    return /*#__PURE__*/ React.createElement(LayoutGroup, null, /*#__PURE__*/ React.createElement(EditorStateSelectorsRegistrar, null, /*#__PURE__*/ React.createElement(ProseMirrorInner, props)));
+}

package/dist/esm/components/ProseMirrorDoc.js

@@ -0,0 +1,15 @@
+import React, { createContext, forwardRef, useContext } from "react";
+import { useRenderStore } from "../contexts/RenderStoreContext.js";
+import { DocNodeView } from "./nodes/DocNodeView.js";
+export const DocNodeViewContext = /*#__PURE__*/ createContext(null);
+export const ProseMirrorDoc = /*#__PURE__*/ forwardRef(function ProseMirrorDoc(param, ref) {
+    let { as, ...props } = param;
+    const docProps = useContext(DocNodeViewContext);
+    const store = useRenderStore();
+    return /*#__PURE__*/ React.createElement(DocNodeView, {
+        ref: ref,
+        ...props,
+        ...store?.doc ?? docProps,
+        as: as
+    });
+});

package/dist/esm/components/SeparatorHackView.js

@@ -0,0 +1,48 @@
+import React, { useContext, useRef, useState } from "react";
+import { browser } from "../browser.js";
+import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
+import { useClientLayoutEffect } from "../hooks/useClientLayoutEffect.js";
+import { TrailingHackViewDesc, placeViewDesc } from "../viewdesc.js";
+export function SeparatorHackView(param) {
+    let { getPos } = param;
+    const { siblingsRef, parentRef } = useContext(ChildDescriptionsContext);
+    const viewDescRef = useRef(null);
+    const ref = useRef(null);
+    const [shouldRender, setShouldRender] = useState(false);
+    useClientLayoutEffect(()=>{
+        const siblings = siblingsRef.current;
+        return ()=>{
+            if (!viewDescRef.current) return;
+            if (siblings.includes(viewDescRef.current)) {
+                const index = siblings.indexOf(viewDescRef.current);
+                siblings.splice(index, 1);
+            }
+        };
+    }, [
+        siblingsRef
+    ]);
+    // There's no risk of an infinite loop here, because
+    // we call setShouldRender conditionally
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useClientLayoutEffect(()=>{
+        const nonHackSiblings = siblingsRef.current.filter((viewdesc)=>!(viewdesc instanceof TrailingHackViewDesc));
+        const lastSibling = nonHackSiblings[nonHackSiblings.length - 1];
+        if (!shouldRender && (browser.safari || browser.chrome) && lastSibling?.dom?.contentEditable == "false") {
+            setShouldRender(true);
+            return;
+        }
+        if (!ref.current) return;
+        if (!viewDescRef.current) {
+            viewDescRef.current = new TrailingHackViewDesc(parentRef.current, [], getPos, ref.current, null);
+        } else {
+            viewDescRef.current.parent = parentRef.current;
+            viewDescRef.current.dom = ref.current;
+        }
+        placeViewDesc(siblingsRef.current, viewDescRef.current);
+    });
+    return shouldRender ? /*#__PURE__*/ React.createElement("img", {
+        ref: ref,
+        className: "ProseMirror-separator",
+        alt: ""
+    }) : null;
+}

package/dist/esm/components/TextNodeView.js

@@ -0,0 +1,103 @@
+import { DecorationSet } from "prosemirror-view";
+import { Component, createRef } from "react";
+import { ReactEditorView } from "../ReactEditorView.js";
+import { findDOMNode } from "../findDOMNode.js";
+import { TextViewDesc, placeViewDesc } from "../viewdesc.js";
+import { wrapInDeco } from "./ChildNodeViews.js";
+function shallowEqual(objA, objB) {
+    if (objA === objB) {
+        return true;
+    }
+    if (!objA || !objB) {
+        return false;
+    }
+    const aKeys = Object.keys(objA);
+    const bKeys = Object.keys(objB);
+    const len = aKeys.length;
+    if (bKeys.length !== len) {
+        return false;
+    }
+    for(let i = 0; i < len; i++){
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const key = aKeys[i];
+        if (objA[key] !== objB[key] || !Object.prototype.hasOwnProperty.call(objB, key)) {
+            return false;
+        }
+    }
+    return true;
+}
+export class TextNodeView extends Component {
+    viewDescRef = createMutRef();
+    create() {
+        const { view, decorations, siblingsRef, parentRef, getPos, node } = this.props;
+        const dom = findDOMNode(this);
+        if (!dom && !view.composing) return null;
+        let textNode = dom;
+        while(textNode?.firstChild){
+            textNode = textNode.firstChild;
+        }
+        if (!(textNode instanceof Text)) {
+            textNode = null;
+        }
+        if (!dom || !textNode) return null;
+        const viewDesc = new TextViewDesc(parentRef.current, [], getPos, node, decorations, DecorationSet.empty, dom, textNode);
+        placeViewDesc(siblingsRef.current, viewDesc);
+        return viewDesc;
+    }
+    update() {
+        const { view, node, decorations } = this.props;
+        if (!(view instanceof ReactEditorView)) return false;
+        const viewDesc = this.viewDescRef.current;
+        if (!viewDesc) return false;
+        const dom = findDOMNode(this);
+        if (!dom || dom !== viewDesc.dom) return false;
+        if (!dom.contains(viewDesc.nodeDOM)) return false;
+        return viewDesc.matchesNode(node, decorations, DecorationSet.empty) || viewDesc.update(node, decorations, DecorationSet.empty, view);
+    }
+    destroy() {
+        const viewDesc = this.viewDescRef.current;
+        if (!viewDesc) return;
+        viewDesc.destroy();
+        const siblings = this.props.siblingsRef.current;
+        if (siblings.includes(viewDesc)) {
+            const index = siblings.indexOf(viewDesc);
+            siblings.splice(index, 1);
+        }
+    }
+    updateEffect() {
+        if (!this.update()) {
+            this.destroy();
+            this.viewDescRef.current = this.create();
+        }
+    }
+    shouldComponentUpdate(nextProps) {
+        return !shallowEqual(this.props, nextProps);
+    }
+    constructor(props){
+        super(props);
+        this.viewDescRef.current = null;
+    }
+    componentDidMount() {
+        this.viewDescRef.current = this.create();
+        this.updateEffect();
+    }
+    componentDidUpdate() {
+        this.updateEffect();
+        const { view } = this.props;
+        if (!(view instanceof ReactEditorView)) return;
+    }
+    componentWillUnmount() {
+        this.destroy();
+    }
+    render() {
+        const { node, decorations } = this.props;
+        return decorations.reduce(wrapInDeco, node.text);
+    }
+}
+/**
+ * createRef returns a RefObject, even though the docs
+ * say that it's acceptible to manage the ref's value
+ * yourself.
+ */ function createMutRef() {
+    return /*#__PURE__*/ createRef();
+}

package/dist/esm/components/TrailingHackView.js

@@ -0,0 +1,36 @@
+import React, { useContext, useRef } from "react";
+import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
+import { useClientLayoutEffect } from "../hooks/useClientLayoutEffect.js";
+import { TrailingHackViewDesc, placeViewDesc } from "../viewdesc.js";
+export function TrailingHackView(param) {
+    let { getPos } = param;
+    const { siblingsRef, parentRef } = useContext(ChildDescriptionsContext);
+    const viewDescRef = useRef(null);
+    const ref = useRef(null);
+    useClientLayoutEffect(()=>{
+        const siblings = siblingsRef.current;
+        return ()=>{
+            if (!viewDescRef.current) return;
+            if (siblings.includes(viewDescRef.current)) {
+                const index = siblings.indexOf(viewDescRef.current);
+                siblings.splice(index, 1);
+            }
+        };
+    }, [
+        siblingsRef
+    ]);
+    useClientLayoutEffect(()=>{
+        if (!ref.current) return;
+        if (!viewDescRef.current) {
+            viewDescRef.current = new TrailingHackViewDesc(parentRef.current, [], getPos, ref.current, null);
+        } else {
+            viewDescRef.current.parent = parentRef.current;
+            viewDescRef.current.dom = ref.current;
+        }
+        placeViewDesc(siblingsRef.current, viewDescRef.current);
+    });
+    return /*#__PURE__*/ React.createElement("br", {
+        ref: ref,
+        className: "ProseMirror-trailingBreak"
+    });
+}

package/dist/esm/components/WidgetView.js

@@ -0,0 +1,43 @@
+import React, { useContext, useRef } from "react";
+import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
+import { useClientLayoutEffect } from "../hooks/useClientLayoutEffect.js";
+import { WidgetViewDesc, placeViewDesc } from "../viewdesc.js";
+export function WidgetView(param) {
+    let { widget, getPos } = param;
+    const { siblingsRef, parentRef } = useContext(ChildDescriptionsContext);
+    const viewDescRef = useRef(null);
+    const domRef = useRef(null);
+    useClientLayoutEffect(()=>{
+        const siblings = siblingsRef.current;
+        return ()=>{
+            if (!viewDescRef.current) return;
+            if (siblings.includes(viewDescRef.current)) {
+                const index = siblings.indexOf(viewDescRef.current);
+                siblings.splice(index, 1);
+            }
+        };
+    }, [
+        siblingsRef
+    ]);
+    useClientLayoutEffect(()=>{
+        if (!domRef.current) return;
+        if (!viewDescRef.current) {
+            viewDescRef.current = new WidgetViewDesc(parentRef.current, getPos, widget, domRef.current);
+        } else {
+            viewDescRef.current.parent = parentRef.current;
+            viewDescRef.current.widget = widget;
+            viewDescRef.current.dom = domRef.current;
+            viewDescRef.current.dom.pmViewDesc = viewDescRef.current;
+        }
+        placeViewDesc(siblingsRef.current, viewDescRef.current);
+    });
+    const { Component } = widget.type;
+    return Component && /*#__PURE__*/ React.createElement(Component, {
+        ref: domRef,
+        widget: widget,
+        getPos: getPos,
+        ...!widget.type.spec.raw && {
+            contentEditable: false
+        }
+    });
+}

package/dist/esm/components/WidgetViewComponentProps.js

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

package/dist/esm/components/marks/DefaultMarkView.js

@@ -0,0 +1,19 @@
+import React, { forwardRef, useMemo } from "react";
+import { OutputSpec } from "../OutputSpec.js";
+export const DefaultMarkView = /*#__PURE__*/ forwardRef(function DefaultMarkView(param, ref) {
+    let { markProps: { mark, inline, contentDOMRef }, children, ...props } = param;
+    const spec = useMemo(()=>mark.type.spec.toDOM?.(mark, inline), [
+        mark,
+        inline
+    ]);
+    if (!spec) {
+        throw new Error(`Mark spec for ${mark.type.name} is missing toDOM`);
+    }
+    return /*#__PURE__*/ React.createElement(OutputSpec, {
+        ...props,
+        outputSpec: spec,
+        contentDOMRef: contentDOMRef,
+        ref: ref,
+        isMark: true
+    }, children);
+});

package/dist/esm/components/marks/MarkView.js

@@ -0,0 +1,34 @@
+import React, { memo, useContext, useMemo } from "react";
+import { NodeViewContext } from "../../contexts/NodeViewContext.js";
+import { DefaultMarkView } from "./DefaultMarkView.js";
+import { MarkViewConstructorView } from "./MarkViewConstructorView.js";
+import { ReactMarkView } from "./ReactMarkView.js";
+export const MarkView = /*#__PURE__*/ memo(function MarkView(props) {
+    const { components, constructors } = useContext(NodeViewContext);
+    const component = components[props.mark.type.name] ?? DefaultMarkView;
+    const constructor = constructors[props.mark.type.name];
+    // Construct a wrapper component so that the mark view remounts when either
+    // its component or constructor changes. A React mark view would remount
+    // if its underlying component changed without this wrapper, but a custom
+    // mark view otherwise uses the same React components for all custom mark views.
+    const Component = useMemo(()=>{
+        if (constructor) {
+            return function MarkView(props) {
+                return /*#__PURE__*/ React.createElement(MarkViewConstructorView, {
+                    constructor: constructor,
+                    ...props
+                });
+            };
+        }
+        return function NodeView(props) {
+            return /*#__PURE__*/ React.createElement(ReactMarkView, {
+                component: component,
+                ...props
+            });
+        };
+    }, [
+        component,
+        constructor
+    ]);
+    return /*#__PURE__*/ React.createElement(Component, props);
+});

package/dist/esm/components/marks/MarkViewComponentProps.js

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

package/dist/esm/components/marks/MarkViewConstructorView.js

@@ -0,0 +1,65 @@
+import { DOMSerializer } from "prosemirror-model";
+import React, { memo, useMemo, useRef } from "react";
+import { createPortal } from "react-dom";
+import { ChildDescriptionsContext } from "../../contexts/ChildDescriptionsContext.js";
+import { useForceUpdate } from "../../hooks/useForceUpdate.js";
+import { useMarkViewDescription } from "../../hooks/useMarkViewDescription.js";
+export const MarkViewConstructorView = /*#__PURE__*/ memo(function MarkViewConstructorView(param) {
+    let { constructor, mark, inline, getPos, children } = param;
+    const ref = useRef(null);
+    const innerRef = useRef(null);
+    const forceUpdate = useForceUpdate();
+    const markProps = useMemo(()=>({
+            mark,
+            inline,
+            getPos,
+            contentDOMRef: {
+                current: null
+            }
+        }), [
+        mark,
+        inline,
+        getPos
+    ]);
+    const createMarkView = function() {
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
+        }
+        const markView = constructor(...args);
+        if (!markView || !markView.dom) {
+            const spec = mark.type.spec.toDOM?.(mark, inline);
+            if (!spec) {
+                throw new Error(`Mark spec for ${mark.type.name} is missing toDOM`);
+            }
+            return DOMSerializer.renderSpec(document, spec, null);
+        }
+        return markView;
+    };
+    const { childContextValue, contentDOM } = useMarkViewDescription(()=>ref.current, (markView)=>markView?.contentDOM ?? null, function() {
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
+        }
+        const markView = createMarkView(...args);
+        const dom = markView.dom;
+        const wrapperDOM = innerRef.current ?? ref.current;
+        wrapperDOM.appendChild(dom);
+        // Force a re-render so that we properly create
+        // a portal into the contentDOM/dom
+        forceUpdate();
+        return {
+            ...markView,
+            destroy () {
+                markView.destroy?.();
+                wrapperDOM.removeChild(dom);
+            },
+            ignoreMutation: markView.ignoreMutation
+        };
+    }, markProps);
+    const Component = inline ? "span" : "div";
+    const props = {
+        ref: innerRef
+    };
+    return /*#__PURE__*/ React.createElement(Component, props, contentDOM ? /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(ChildDescriptionsContext.Provider, {
+        value: childContextValue
+    }, children), contentDOM) : null);
+});

package/dist/esm/components/marks/ReactMarkView.js

@@ -0,0 +1,58 @@
+import React, { memo, useCallback, useMemo, useRef } from "react";
+import { ChildDescriptionsContext } from "../../contexts/ChildDescriptionsContext.js";
+import { IgnoreMutationContext } from "../../contexts/IgnoreMutationContext.js";
+import { useMarkViewDescription } from "../../hooks/useMarkViewDescription.js";
+import { useSetDom } from "../../hooks/useSetDom.js";
+export const ReactMarkView = /*#__PURE__*/ memo(function ReactMarkView(param) {
+    let { component: Component, mark, inline, getPos, children } = param;
+    const ref = useRef(null);
+    const contentDOMRef = useRef(null);
+    const ignoreMutationRef = useRef(null);
+    const setIgnoreMutation = useCallback((handler)=>{
+        ignoreMutationRef.current = handler;
+        return ()=>{
+            ignoreMutationRef.current = null;
+            return ()=>{
+                ignoreMutationRef.current = null;
+            };
+        };
+    }, []);
+    const markViewDescProps = useMemo(()=>({
+            mark,
+            getPos,
+            inline
+        }), [
+        getPos,
+        inline,
+        mark
+    ]);
+    const { childContextValue, refUpdated } = useMarkViewDescription(()=>ref.current, ()=>contentDOMRef.current ?? ref.current, ()=>({
+            dom: ref.current,
+            contentDOM: contentDOMRef.current ?? ref.current,
+            ignoreMutation (mutation) {
+                const ignoreMutation = ignoreMutationRef.current;
+                if (ignoreMutation) {
+                    return ignoreMutation.call(this, mutation);
+                }
+                return false;
+            }
+        }), markViewDescProps);
+    const setDOM = useSetDom(ref, refUpdated);
+    const setContentDOM = useSetDom(contentDOMRef, refUpdated);
+    const markProps = useMemo(()=>({
+            ...markViewDescProps,
+            contentDOMRef: setContentDOM
+        }), [
+        markViewDescProps,
+        setContentDOM
+    ]);
+    const props = {
+        markProps,
+        ref: setDOM
+    };
+    return /*#__PURE__*/ React.createElement(IgnoreMutationContext.Provider, {
+        value: setIgnoreMutation
+    }, /*#__PURE__*/ React.createElement(ChildDescriptionsContext.Provider, {
+        value: childContextValue
+    }, /*#__PURE__*/ React.createElement(Component, props, children)));
+});

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

@@ -0,0 +1,17 @@
+import React, { forwardRef, useMemo } from "react";
+import { OutputSpec } from "../OutputSpec.js";
+export const DefaultNodeView = /*#__PURE__*/ forwardRef(function DefaultNodeView(param, ref) {
+    let { nodeProps: { node, contentDOMRef }, children, ...props } = param;
+    const spec = useMemo(()=>node.type.spec.toDOM?.(node), [
+        node
+    ]);
+    if (!spec) {
+        throw new Error(`Node spec for ${node.type.name} is missing toDOM`);
+    }
+    return /*#__PURE__*/ React.createElement(OutputSpec, {
+        ...props,
+        outputSpec: spec,
+        ref: ref,
+        contentDOMRef: contentDOMRef
+    }, children);
+});

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

@@ -0,0 +1,46 @@
+import React, { createElement, forwardRef, memo, useImperativeHandle, useMemo, useRef } from "react";
+import { ChildDescriptionsContext } from "../../contexts/ChildDescriptionsContext.js";
+import { useNodeViewDescription } from "../../hooks/useNodeViewDescription.js";
+import { ChildNodeViews, wrapInDeco } from "../ChildNodeViews.js";
+export const DocNodeView = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function DocNodeView(param, ref) {
+    let { as, node, getPos, decorations, innerDecorations, setMount, ...elementProps } = param;
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, ()=>innerRef.current);
+    useImperativeHandle(setMount, ()=>innerRef.current);
+    const nodeProps = useMemo(()=>({
+            node,
+            getPos,
+            decorations,
+            innerDecorations,
+            contentDOMRef: innerRef
+        }), [
+        node,
+        getPos,
+        decorations,
+        innerDecorations
+    ]);
+    const { childContextValue } = useNodeViewDescription(()=>innerRef.current, ()=>innerRef.current, ()=>{
+        const dom = innerRef.current;
+        return {
+            dom,
+            contentDOM: dom,
+            update () {
+                return true;
+            }
+        };
+    }, nodeProps);
+    const children = /*#__PURE__*/ React.createElement(ChildDescriptionsContext.Provider, {
+        value: childContextValue
+    }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
+        getPos: getPos,
+        node: node,
+        innerDecorations: innerDecorations
+    }));
+    const props = {
+        ...elementProps,
+        suppressContentEditableWarning: true,
+        ref: innerRef
+    };
+    const element = as ? /*#__PURE__*/ createElement(as, props, children) : /*#__PURE__*/ createElement("div", props, children);
+    return nodeProps.decorations.reduce(wrapInDeco, element);
+}));

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

@@ -0,0 +1,67 @@
+import React, { createContext, memo, useContext, useLayoutEffect, useMemo, useReducer, useRef } from "react";
+import { NodeViewContext } from "../../contexts/NodeViewContext.js";
+import { useEditorStateSelector } from "../../hooks/useEditorStateSelector.js";
+import { reactKeysPluginKey } from "../../plugins/reactKeys.js";
+import { DefaultNodeView } from "./DefaultNodeView.js";
+import { NodeViewConstructorView } from "./NodeViewConstructorView.js";
+import { ReactNodeView } from "./ReactNodeView.js";
+export const NodeView = /*#__PURE__*/ memo(function NodeView(param) {
+    let { forceRemount, ...props } = param;
+    const renderRef = useRef(null);
+    const frozen = useEditorStateSelector((state)=>reactKeysPluginKey.getState(state)?.freezeFrom === props.getPos());
+    const { components, constructors } = useContext(NodeViewContext);
+    const committedFrozenRef = useRef(false);
+    const component = components[props.node.type.name] ?? DefaultNodeView;
+    const constructor = constructors[props.node.type.name];
+    // Construct a wrapper component so that the node view remounts when either
+    // its component or constructor changes. A React node view would remount if
+    // its underlying component changed without this wrapper, but a custom node
+    // view otherwise uses the same React components for all custom node views.
+    const Component = useMemo(()=>{
+        if (constructor) {
+            return function NodeView(props) {
+                return /*#__PURE__*/ React.createElement(NodeViewConstructorView, {
+                    constructor: constructor,
+                    ...props
+                });
+            };
+        } else {
+            return function NodeView(props) {
+                return /*#__PURE__*/ React.createElement(ReactNodeView, {
+                    component: component,
+                    ...props
+                });
+            };
+        }
+    }, [
+        constructor,
+        component
+    ]);
+    // Protect content while frozen, and also through the single render where we
+    // leave the frozen state: `committedFrozenRef` still reflects the previous
+    // commit, so we keep returning the exact same cached element reference.
+    const protecting = (frozen || committedFrozenRef.current) && renderRef.current != null;
+    if (!protecting) {
+        renderRef.current = /*#__PURE__*/ React.createElement(GetPosContext.Provider, {
+            value: props.getPos
+        }, /*#__PURE__*/ React.createElement(Component, props));
+    }
+    useLayoutEffect(()=>{
+        const wasFrozen = committedFrozenRef.current;
+        committedFrozenRef.current = frozen;
+        if (wasFrozen && !frozen) forceRemount();
+    }, [
+        frozen,
+        forceRemount
+    ]);
+    return renderRef.current;
+});
+export const GetPosContext = /*#__PURE__*/ createContext(null);
+export function RemountableNodeView(props) {
+    const [key, forceRemount] = useReducer((x)=>x + 1, 0);
+    return /*#__PURE__*/ React.createElement(NodeView, {
+        key: key.toString(),
+        ...props,
+        forceRemount: forceRemount
+    });
+}

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

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