@handlewithcare/react-prosemirror 2.4.12 → 2.5.1

package/dist/cjs/components/ReactNodeView.js

@@ -11,12 +11,10 @@ Object.defineProperty(exports, "ReactNodeView", {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js");
 const _IgnoreMutationContext = require("../contexts/IgnoreMutationContext.js");
-const _NodeViewContext = require("../contexts/NodeViewContext.js");
 const _SelectNodeContext = require("../contexts/SelectNodeContext.js");
 const _StopEventContext = require("../contexts/StopEventContext.js");
 const _useNodeViewDescriptor = require("../hooks/useNodeViewDescriptor.js");
 const _ChildNodeViews = require("./ChildNodeViews.js");
-const _OutputSpec = require("./OutputSpec.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -59,74 +57,113 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(param) {
-    let { outerDeco, getPos, node, innerDeco, ...props } = param;
-    const domRef = (0, _react.useRef)(null);
-    const nodeDomRef = (0, _react.useRef)(null);
-    const contentDomRef = (0, _react.useRef)(null);
-    const getPosFunc = (0, _react.useRef)(()=>getPos.current()).current;
-    const { nodeViews } = (0, _react.useContext)(_NodeViewContext.NodeViewContext);
-    let element = null;
-    const Component = nodeViews[node.type.name];
-    const outputSpec = (0, _react.useMemo)(()=>node.type.spec.toDOM?.(node), [
-        node
-    ]);
-    const { hasContentDOM, childDescriptors, setStopEvent, setSelectNode, setIgnoreMutation, nodeViewDescRef } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(node, ()=>getPos.current(), domRef, nodeDomRef, innerDeco, outerDeco, undefined, contentDomRef);
-    const finalProps = {
-        ...props,
-        ...!hasContentDOM && nodeDomRef.current?.tagName !== "BR" && {
-            contentEditable: false
-        }
-    };
+    let { component: Component, outerDeco, getPos, node, innerDeco } = param;
+    const [controlSelected, setControlSelected] = (0, _react.useState)(false);
+    const [selected, setSelected] = (0, _react.useState)(false);
+    const ref = (0, _react.useRef)(null);
+    const innerRef = (0, _react.useRef)(null);
+    const selectNodeRef = (0, _react.useRef)(null);
+    const deselectNodeRef = (0, _react.useRef)(null);
+    const stopEventRef = (0, _react.useRef)(null);
+    const ignoreMutationRef = (0, _react.useRef)(null);
+    const setSelectNode = (0, _react.useCallback)((selectHandler, deselectHandler)=>{
+        selectNodeRef.current = selectHandler;
+        deselectNodeRef.current = deselectHandler;
+        setControlSelected(true);
+        return ()=>{
+            selectNodeRef.current = null;
+            deselectNodeRef.current = null;
+            setControlSelected(false);
+        };
+    }, []);
+    const setStopEvent = (0, _react.useCallback)((handler)=>{
+        stopEventRef.current = handler;
+        return ()=>{
+            stopEventRef.current = null;
+        };
+    }, []);
+    const setIgnoreMutation = (0, _react.useCallback)((handler)=>{
+        ignoreMutationRef.current = handler;
+        return ()=>{
+            ignoreMutationRef.current = null;
+            return ()=>{
+                ignoreMutationRef.current = null;
+            };
+        };
+    }, []);
     const nodeProps = (0, _react.useMemo)(()=>({
             node: node,
-            getPos: getPosFunc,
+            getPos: getPos,
             decorations: outerDeco,
             innerDecorations: innerDeco
         }), [
-        getPosFunc,
+        getPos,
         innerDeco,
         node,
         outerDeco
     ]);
-    if (Component) {
-        element = /*#__PURE__*/ _react.default.createElement(Component, {
-            ...finalProps,
-            ref: nodeDomRef,
-            nodeProps: nodeProps
-        }, /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
-            getPos: getPos,
-            node: node,
-            innerDecorations: innerDeco
-        }));
-    } else {
-        if (outputSpec) {
-            element = /*#__PURE__*/ _react.default.createElement(_OutputSpec.OutputSpec, {
-                ...finalProps,
-                ref: nodeDomRef,
-                outputSpec: outputSpec
-            }, /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
-                getPos: getPos,
-                node: node,
-                innerDecorations: innerDeco
-            }));
-        }
-    }
-    if (!element) {
-        throw new Error(`Node spec for ${node.type.name} is missing toDOM`);
-    }
-    const decoratedElement = /*#__PURE__*/ (0, _react.cloneElement)(outerDeco.reduce(_ChildNodeViews.wrapInDeco, element), // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    outerDeco.some((d)=>d.type.attrs.nodeName) ? {
-        ref: domRef
-    } : // we've already passed the domRef to the NodeView component
-    // as a prop
-    undefined);
-    const childContextValue = (0, _react.useMemo)(()=>({
-            parentRef: nodeViewDescRef,
-            siblingsRef: childDescriptors
-        }), [
-        childDescriptors,
-        nodeViewDescRef
-    ]);
+    const { childContextValue, contentDOM, nodeDOM } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(ref, ()=>{
+        setSelected(false);
+        return {
+            dom: innerRef.current ?? ref.current,
+            update () {
+                return true;
+            },
+            multiType: true,
+            selectNode () {
+                const selectNode = selectNodeRef.current;
+                if (selectNode) {
+                    selectNode();
+                }
+                setSelected(true);
+            },
+            deselectNode () {
+                const deselectNode = deselectNodeRef.current;
+                if (deselectNode) {
+                    deselectNode();
+                }
+                setSelected(false);
+            },
+            stopEvent (event) {
+                const stopEvent = stopEventRef.current;
+                if (stopEvent) {
+                    return stopEvent(event);
+                }
+                return false;
+            },
+            ignoreMutation (mutation) {
+                const ignoreMutation = ignoreMutationRef.current;
+                if (ignoreMutation) {
+                    return ignoreMutation(mutation);
+                }
+                return false;
+            }
+        };
+    }, nodeProps);
+    const children = !node.isLeaf ? /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
+        getPos: getPos,
+        node: node,
+        innerDecorations: innerDeco
+    }) : null;
+    const innerProps = {
+        nodeProps,
+        ...!contentDOM && !nodeProps.node.isText && nodeDOM?.nodeName !== "BR" ? {
+            contentEditable: false,
+            suppressContentEditableWarning: true
+        } : null,
+        ...controlSelected && selected ? {
+            className: "ProseMirror-selectednode"
+        } : null,
+        ref: innerRef
+    };
+    const innerElement = /*#__PURE__*/ _react.default.createElement(Component, innerProps, children);
+    const props = {
+        ...controlSelected && selected || node.type.spec.draggable ? {
+            draggable: true
+        } : null,
+        ref
+    };
+    const decoratedElement = /*#__PURE__*/ (0, _react.cloneElement)(outerDeco.reduce(_ChildNodeViews.wrapInDeco, innerElement), props);
     return /*#__PURE__*/ _react.default.createElement(_SelectNodeContext.SelectNodeContext.Provider, {
         value: setSelectNode
     }, /*#__PURE__*/ _react.default.createElement(_StopEventContext.StopEventContext.Provider, {

package/dist/cjs/components/SeparatorHackView.js

@@ -83,11 +83,10 @@ function SeparatorHackView(param) {
         }
         if (!ref.current) return;
         if (!viewDescRef.current) {
-            viewDescRef.current = new _viewdesc.TrailingHackViewDesc(parentRef.current, [], ()=>getPos.current(), ref.current, null);
+            viewDescRef.current = new _viewdesc.TrailingHackViewDesc(parentRef.current, [], getPos, ref.current, null);
         } else {
             viewDescRef.current.parent = parentRef.current;
             viewDescRef.current.dom = ref.current;
-            viewDescRef.current.getPos = ()=>getPos.current();
         }
         if (!siblingsRef.current.includes(viewDescRef.current)) {
             siblingsRef.current.push(viewDescRef.current);

package/dist/cjs/components/TextNodeView.js

@@ -47,8 +47,8 @@ let TextNodeView = class TextNodeView extends _react.Component {
         // when a composition was started that produces a new text node.
         // Otherwise we just rely on re-rendering the renderRef
         if (!dom) {
-            if (!view?.composing) return;
-            this.viewDescRef = new _viewdesc.CompositionViewDesc(parentRef.current, ()=>getPos.current(), // These are just placeholders/dummies. We can't
+            if (!view.composing) return;
+            this.viewDescRef = new _viewdesc.CompositionViewDesc(parentRef.current, getPos, // These are just placeholders/dummies. We can't
             // actually find the correct DOM nodes from here,
             // so we let our parent do it.
             // Passing a valid element here just so that the
@@ -61,12 +61,11 @@ let TextNodeView = class TextNodeView extends _react.Component {
             textNode = textNode.firstChild;
         }
         if (!this.viewDescRef || this.viewDescRef instanceof _viewdesc.CompositionViewDesc) {
-            this.viewDescRef = new _viewdesc.TextViewDesc(undefined, [], ()=>getPos.current(), node, decorations, _prosemirrorview.DecorationSet.empty, dom, textNode);
+            this.viewDescRef = new _viewdesc.TextViewDesc(undefined, [], getPos, node, decorations, _prosemirrorview.DecorationSet.empty, dom, textNode);
         } else {
             this.viewDescRef.parent = parentRef.current;
             this.viewDescRef.children = [];
             this.viewDescRef.node = node;
-            this.viewDescRef.getPos = ()=>getPos.current();
             this.viewDescRef.outerDeco = decorations;
             this.viewDescRef.innerDeco = _prosemirrorview.DecorationSet.empty;
             this.viewDescRef.dom = dom;
@@ -102,7 +101,7 @@ let TextNodeView = class TextNodeView extends _react.Component {
         // an active composition and the selection is in this node,
         // we freeze the DOM of this element so that it doesn't
         // interrupt the composition
-        if (view?.composing && view.state.selection.from >= getPos.current() && view.state.selection.from <= getPos.current() + node.nodeSize) {
+        if (view.composing && view.state.selection.from >= getPos() && view.state.selection.from <= getPos() + node.nodeSize) {
             return this.renderRef;
         }
         this.renderRef = decorations.reduce(_ChildNodeViews.wrapInDeco, node.text);

package/dist/cjs/components/TrailingHackView.js

@@ -73,11 +73,10 @@ function TrailingHackView(param) {
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
         if (!ref.current) return;
         if (!viewDescRef.current) {
-            viewDescRef.current = new _viewdesc.TrailingHackViewDesc(parentRef.current, [], ()=>getPos.current(), ref.current, null);
+            viewDescRef.current = new _viewdesc.TrailingHackViewDesc(parentRef.current, [], getPos, ref.current, null);
         } else {
             viewDescRef.current.parent = parentRef.current;
             viewDescRef.current.dom = ref.current;
-            viewDescRef.current.getPos = ()=>getPos.current();
         }
         if (!siblingsRef.current.includes(viewDescRef.current)) {
             siblingsRef.current.push(viewDescRef.current);

package/dist/cjs/components/WidgetView.js

@@ -57,7 +57,6 @@ function WidgetView(param) {
     let { widget, getPos } = param;
     const { siblingsRef, parentRef } = (0, _react.useContext)(_ChildDescriptorsContext.ChildDescriptorsContext);
     const viewDescRef = (0, _react.useRef)(null);
-    const getPosFunc = (0, _react.useRef)(()=>getPos.current()).current;
     const domRef = (0, _react.useRef)(null);
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
         const siblings = siblingsRef.current;
@@ -74,11 +73,10 @@ function WidgetView(param) {
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
         if (!domRef.current) return;
         if (!viewDescRef.current) {
-            viewDescRef.current = new _viewdesc.WidgetViewDesc(parentRef.current, ()=>getPos.current(), widget, domRef.current);
+            viewDescRef.current = new _viewdesc.WidgetViewDesc(parentRef.current, getPos, widget, domRef.current);
         } else {
             viewDescRef.current.parent = parentRef.current;
             viewDescRef.current.widget = widget;
-            viewDescRef.current.getPos = ()=>getPos.current();
             viewDescRef.current.dom = domRef.current;
         }
         if (!siblingsRef.current.includes(viewDescRef.current)) {
@@ -90,7 +88,7 @@ function WidgetView(param) {
     return Component && /*#__PURE__*/ _react.default.createElement(Component, {
         ref: domRef,
         widget: widget,
-        getPos: getPosFunc,
+        getPos: getPos,
         contentEditable: false
     });
 }

package/dist/cjs/constants.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    EMPTY_SCHEMA: function() {
+        return EMPTY_SCHEMA;
+    },
+    EMPTY_STATE: function() {
+        return EMPTY_STATE;
+    }
+});
+const _prosemirrormodel = require("prosemirror-model");
+const _prosemirrorstate = require("prosemirror-state");
+const EMPTY_SCHEMA = new _prosemirrormodel.Schema({
+    nodes: {
+        doc: {
+            content: "text*"
+        },
+        text: {
+            inline: true
+        }
+    }
+});
+const EMPTY_STATE = _prosemirrorstate.EditorState.create({
+    schema: EMPTY_SCHEMA
+});

package/dist/cjs/hooks/useEditor.js

@@ -2,206 +2,33 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    ReactEditorView: function() {
-        return ReactEditorView;
-    },
-    useEditor: function() {
+Object.defineProperty(exports, "useEditor", {
+    enumerable: true,
+    get: function() {
         return useEditor;
     }
 });
-const _prosemirrormodel = require("prosemirror-model");
-const _prosemirrorstate = require("prosemirror-state");
-const _prosemirrorview = require("prosemirror-view");
 const _react = require("react");
 const _reactdom = require("react-dom");
+const _ReactEditorView = require("../ReactEditorView.js");
+const _StaticEditorView = require("../StaticEditorView.js");
+const _constants = require("../constants.js");
 const _beforeInputPlugin = require("../plugins/beforeInputPlugin.js");
-const _SelectionDOMObserver = require("../selection/SelectionDOMObserver.js");
-const _ssr = require("../ssr.js");
-const _viewdesc = require("../viewdesc.js");
 const _useClientLayoutEffect = require("./useClientLayoutEffect.js");
 const _useComponentEventListeners = require("./useComponentEventListeners.js");
 const _useForceUpdate = require("./useForceUpdate.js");
-function buildNodeViews(view) {
-    const result = Object.create(null);
-    function add(obj) {
-        for(const prop in obj)if (!Object.prototype.hasOwnProperty.call(result, prop)) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        result[prop] = obj[prop];
-    }
-    view.someProp("nodeViews", add);
-    view.someProp("markViews", add);
-    return result;
-}
-function changedNodeViews(a, b) {
-    let nA = 0, nB = 0;
-    for(const prop in a){
-        if (a[prop] != b[prop]) return true;
-        nA++;
-    }
-    for(const _ in b)nB++;
-    return nA != nB;
-}
-function changedProps(a, b) {
-    for (const prop of Object.keys(a)){
-        if (a[prop] !== b[prop]) return true;
-    }
-    return false;
-}
-function getEditable(view) {
-    return !view.someProp("editable", (value)=>value(view.state) === false);
-}
-let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView {
-    shouldUpdatePluginViews = false;
-    oldProps;
-    _props;
-    ready;
-    constructor(place, props){
-        // Call the superclass constructor with an empty
-        // document and limited props. We'll set everything
-        // else ourselves.
-        const cleanup = (0, _ssr.setSsrStubs)();
-        super(place, {
-            state: _prosemirrorstate.EditorState.create({
-                schema: props.state.schema
-            })
-        });
-        cleanup();
-        this.ready = props.ready;
-        this.shouldUpdatePluginViews = true;
-        this._props = props;
-        this.oldProps = {
-            state: props.state
-        };
-        this.state = props.state;
-        // @ts-expect-error We're making use of knowledge of internal attributes here
-        this.domObserver.stop();
-        // @ts-expect-error We're making use of knowledge of internal attributes here
-        this.domObserver = new _SelectionDOMObserver.SelectionDOMObserver(this);
-        // @ts-expect-error We're making use of knowledge of internal attributes here
-        this.domObserver.start();
-        this.editable = getEditable(this);
-        // Destroy the DOM created by the default
-        // ProseMirror ViewDesc implementation; we
-        // have a NodeViewDesc from React instead.
-        // @ts-expect-error We're making use of knowledge of internal attributes here
-        this.docView.dom.replaceChildren();
-        // @ts-expect-error We're making use of knowledge of internal attributes here
-        this.nodeViews = buildNodeViews(this);
-        // @ts-expect-error We're making use of knowledge of internal attributes here
-        this.docView = props.docView;
-    }
-    /**
-   * Whether the EditorView's updateStateInner method thinks that the
-   * docView needs to be blown away and redrawn.
-   *
-   * @privateremarks
-   *
-   * When ProseMirror View detects that the EditorState has been reconfigured
-   * to provide new custom node views, it calls an internal function that
-   * we can't override in order to recreate the entire editor DOM.
-   *
-   * This property mimics that check, so that we can replace the EditorView
-   * with another of our own, preventing ProseMirror View from taking over
-   * DOM management responsibility.
-   */ get needsRedraw() {
-        if (this.oldProps.state.plugins === this._props.state.plugins && this._props.plugins === this.oldProps.plugins) {
-            return false;
-        }
-        const newNodeViews = buildNodeViews(this);
-        // @ts-expect-error Internal property
-        return changedNodeViews(this.nodeViews, newNodeViews);
-    }
-    /**
-   * Like setProps, but without executing any side effects.
-   * Safe to use in a component render method.
-   */ pureSetProps(props) {
-        // this.oldProps = this.props;
-        this._props = {
-            ...this._props,
-            ...props
-        };
-        this.state = this._props.state;
-        this.editable = getEditable(this);
-    }
-    /**
-   * Triggers any side effects that have been queued by previous
-   * calls to pureSetProps.
-   */ runPendingEffects() {
-        if (changedProps(this.props, this.oldProps)) {
-            const newProps = this.props;
-            this._props = this.oldProps;
-            this.state = this._props.state;
-            this.update(newProps);
-        }
-    }
-    update(props) {
-        super.update(props);
-        // Ensure that side effects aren't re-triggered until
-        // pureSetProps is called again
-        this.oldProps = props;
-    }
-    updatePluginViews(prevState) {
-        if (this.shouldUpdatePluginViews) {
-            // @ts-expect-error We're making use of knowledge of internal methods here
-            super.updatePluginViews(prevState);
-        }
-    }
-    // We want to trigger the default EditorView cleanup, but without
-    // the actual view.dom cleanup (which React will have already handled).
-    // So we give the EditorView a dummy DOM element and ask it to clean up
-    destroy() {
-        // If needsRedraw returns true, then we will destroy and recreate
-        // the EditorView, but will likely leave the ProseMirrorDoc node as-is.
-        // In this case, this.dom will still be connected when destroy runs, and
-        // it will be reused for the next EditorView, so we need to manually reset
-        // it.
-        if (this.dom.isConnected) {
-            // We need to manually execute this code from super.destroy(),
-            // because when super.destroy() runs, it will have been given a dummy
-            // dom node
-            // @ts-expect-error Internal property - input
-            for(const type in this.input.eventHandlers){
-                // @ts-expect-error Internal property - input
-                this.dom.removeEventListener(type, this.input.eventHandlers[type]);
-            }
-        }
-        // @ts-expect-error we're intentionally overwriting this property
-        // to prevent side effects
-        this.dom = document.createElement("div");
-        super.destroy();
-    }
-};
-const EMPTY_SCHEMA = new _prosemirrormodel.Schema({
-    nodes: {
-        doc: {
-            content: "text*"
-        },
-        text: {
-            inline: true
-        }
-    }
-});
-const EMPTY_STATE = _prosemirrorstate.EditorState.create({
-    schema: EMPTY_SCHEMA
-});
 let didWarnValueDefaultValue = false;
 function useEditor(mount, options) {
     if (process.env.NODE_ENV !== "production") {
         if (options.defaultState !== undefined && options.state !== undefined && !didWarnValueDefaultValue) {
-            console.error("A component contains a ProseMirror editor with both value and defaultValue props. " + "ProseMirror editors must be either controlled or uncontrolled " + "(specify either the state prop, or the defaultState prop, but not both). " + "Decide between using a controlled or uncontrolled ProseMirror editor " + "and remove one of these props. More info: " + "https://reactjs.org/link/controlled-components");
+            console.error("A component contains a ProseMirror editor with both state and defaultState props. " + "ProseMirror editors must be either controlled or uncontrolled " + "(specify either the state prop, or the defaultState prop, but not both). " + "Decide between using a controlled or uncontrolled ProseMirror editor " + "and remove one of these props. More info: " + "https://reactjs.org/link/controlled-components");
             didWarnValueDefaultValue = true;
         }
     }
     const flushSyncRef = (0, _react.useRef)(true);
     const [cursorWrapper, _setCursorWrapper] = (0, _react.useState)(null);
     const forceUpdate = (0, _useForceUpdate.useForceUpdate)();
-    const defaultState = options.defaultState ?? EMPTY_STATE;
+    const defaultState = options.defaultState ?? _constants.EMPTY_STATE;
     const [_state, setState] = (0, _react.useState)(defaultState);
     const state = options.state ?? _state;
     const { componentEventListenersPlugin, registerEventListener, unregisterEventListener } = (0, _useComponentEventListeners.useComponentEventListeners)();
@@ -241,30 +68,18 @@ function useEditor(mount, options) {
         options.dispatchTransaction,
         options.state
     ]);
-    const cleanup = (0, _ssr.setSsrStubs)();
-    const tempDom = document.createElement("div");
-    cleanup();
-    const docViewDescRef = (0, _react.useRef)(new _viewdesc.NodeViewDesc(undefined, [], ()=>-1, state.doc, [], _prosemirrorview.DecorationSet.empty, tempDom, null, tempDom, ()=>false, ()=>{
-    /* The doc node can't have a node selection*/ }, ()=>{
-    /* The doc node can't have a node selection*/ }, ()=>false));
     const directEditorProps = {
         ...options,
         state,
         plugins,
-        dispatchTransaction,
-        docView: docViewDescRef.current,
-        ready: true
+        dispatchTransaction
     };
-    const [view, setView] = (0, _react.useState)(// During the initial render, we create something of a dummy
-    // EditorView. This allows us to ensure that the first render actually
-    // renders the document, which is necessary for SSR.
-    ()=>new ReactEditorView(null, {
-            ...directEditorProps,
-            ready: false
-        }));
+    const [view, setView] = (0, _react.useState)(()=>{
+        return new _StaticEditorView.StaticEditorView(directEditorProps);
+    });
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
         return ()=>{
-            view?.destroy();
+            view.destroy();
         };
     }, [
         view
@@ -274,44 +89,33 @@ function useEditor(mount, options) {
     // so this is not a concern.
     // eslint-disable-next-line react-hooks/exhaustive-deps
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
-        if (!mount) {
-            setView(null);
-            return;
-        }
-        if (!view || view.dom !== mount) {
-            const newView = new ReactEditorView({
-                mount
-            }, directEditorProps);
-            setView(newView);
-            newView.dom.addEventListener("compositionend", forceUpdate);
-            return;
-        }
-        // TODO: We should be able to put this in previous branch,
-        // but we need to convince EditorView's constructor not to
-        // clear out the DOM when passed a mount that already has
-        // content in it, otherwise React blows up when it tries
-        // to clean up.
-        if (view.needsRedraw) {
-            setView(null);
-            return;
+        if (mount !== view.dom) {
+            if (mount) {
+                const view = new _ReactEditorView.ReactEditorView({
+                    mount
+                }, directEditorProps);
+                view.dom.addEventListener("compositionend", forceUpdate);
+                setView(view);
+            } else {
+                const view = new _StaticEditorView.StaticEditorView(directEditorProps);
+                setView(view);
+            }
+        } else if (view instanceof _ReactEditorView.ReactEditorView) {
+            view.commitPendingEffects();
         }
-        // @ts-expect-error Internal property - domObserver
-        view?.domObserver.selectionToDOM();
-        view?.runPendingEffects();
     });
-    view?.pureSetProps(directEditorProps);
+    view.update(directEditorProps);
     const editor = (0, _react.useMemo)(()=>({
-            view: view,
-            registerEventListener,
-            unregisterEventListener,
+            view,
             cursorWrapper,
-            docViewDescRef,
-            flushSyncRef
+            flushSyncRef,
+            registerEventListener,
+            unregisterEventListener
         }), [
-        view,
+        cursorWrapper,
         registerEventListener,
         unregisterEventListener,
-        cursorWrapper
+        view
     ]);
     return {
         editor,

package/dist/cjs/hooks/useEditorEffect.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "useEditorEffect", {
     }
 });
 const _react = require("react");
+const _ReactEditorView = require("../ReactEditorView.js");
 const _EditorContext = require("../contexts/EditorContext.js");
 const _useLayoutGroupEffect = require("./useLayoutGroupEffect.js");
 function useEditorEffect(effect, dependencies) {
@@ -21,8 +22,7 @@ function useEditorEffect(effect, dependencies) {
     // every time it changes, because it will most likely
     // be defined inline and run on every re-render.
     (0, _useLayoutGroupEffect.useLayoutGroupEffect)(()=>{
-        // @ts-expect-error We're making use of knowledge of internal attributes here
-        if (view?.docView && view.ready) {
+        if (view instanceof _ReactEditorView.ReactEditorView) {
             flushSyncRef.current = false;
             const result = effect(view);
             flushSyncRef.current = true;