@handlewithcare/react-prosemirror 3.1.0-tiptap.53 → 3.1.1

package/README.md

@@ -99,6 +99,9 @@ import "prosemirror-view/style/prosemirror.css";
 
 <!-- tocstop -->
 
+Already using Tiptap, and interesting in using React ProseMirror as the React
+integration? Check out [the Tiptap integration docs](./src/tiptap/README.md)!
+
 ## The Problem
 
 To make updates efficient, React separates updates into phases so that it can

package/dist/cjs/ReactEditorView.js

@@ -33,10 +33,7 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
     nextProps;
     prevState;
     _destroyed;
-    // TODO: Probably refactor? It's used in TrailingHackView to detect
-    // whether it was mounted during a compositionstart event handler
-    compositionStarting;
-    displacedNodes;
+    cursorWrapped;
     constructor(place, props){
         // Prevent the base class from destroying the React-managed nodes.
         // Restore them below after invoking the base class constructor.
@@ -89,8 +86,7 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
         // @ts-expect-error this violates the typing but class does it, too.
         this.docView = null;
         this._destroyed = false;
-        this.compositionStarting = false;
-        this.displacedNodes = [];
+        this.cursorWrapped = false;
     }
     get props() {
         return this.nextProps;
@@ -191,7 +187,22 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
         // this ensures that the base class validates the DOM selection and invokes
         // node view selection callbacks.
         this.docView.markDirty(-1, -1);
-        super.update(this.nextProps);
+        const selectionChanged = !this.state.selection.eq(this.prevState.selection);
+        if (selectionChanged) {
+            super.update(this.nextProps);
+        } else {
+            // If the selection hasn't changed between renders, force prosemirror-view to
+            // skip the selectionToDOM call. If a render happens after a DOM selection change
+            // but before the "selectionchange" event fired, calling selectionToDOM will cause
+            // the selection to be reset its the previous position.
+            this.domObserver.setCurSelection();
+            this.input.mouseDown = {
+                allowDefault: false,
+                delayedSelectionSync: false
+            };
+            super.update(this.nextProps);
+            this.input.mouseDown = null;
+        }
         // Store the new previous state.
         this.prevState = this.state;
     }

package/dist/cjs/components/ChildNodeViews.js

@@ -109,22 +109,16 @@ const ChildView = /*#__PURE__*/ (0, _react.memo)(function ChildView(param) {
     }) : child.node.isText ? /*#__PURE__*/ _react.default.createElement(_ChildDescriptionsContext.ChildDescriptionsContext.Consumer, {
         key: child.key
     }, (param)=>{
-        let { siblingsRef, parentRef, findCompositionDOM } = param;
-        return /*#__PURE__*/ _react.default.createElement(_EditorContext.EditorContext.Consumer, null, (param)=>{
-            let { registerEventListener, unregisterEventListener } = param;
-            return /*#__PURE__*/ _react.default.createElement(_TextNodeView.RemountableTextNodeView, {
-                view: view,
-                node: child.node,
-                getPos: getPos,
-                siblingsRef: siblingsRef,
-                parentRef: parentRef,
-                findCompositionDOM: findCompositionDOM,
-                decorations: child.outerDeco,
-                registerEventListener: registerEventListener,
-                unregisterEventListener: unregisterEventListener
-            });
+        let { siblingsRef, parentRef } = param;
+        return /*#__PURE__*/ _react.default.createElement(_TextNodeView.TextNodeView, {
+            view: view,
+            node: child.node,
+            getPos: getPos,
+            siblingsRef: siblingsRef,
+            parentRef: parentRef,
+            decorations: child.outerDeco
         });
-    }) : /*#__PURE__*/ _react.default.createElement(_NodeView.NodeView, {
+    }) : /*#__PURE__*/ _react.default.createElement(_NodeView.RemountableNodeView, {
         key: child.key,
         node: child.node,
         getPos: getPos,
@@ -272,7 +266,7 @@ const ChildElement = /*#__PURE__*/ (0, _react.memo)(function ChildElement(param)
                 mark: mark,
                 getPos: getPos,
                 inline: false
-            }, element), /*#__PURE__*/ _react.default.createElement(_NodeView.NodeView, {
+            }, element), /*#__PURE__*/ _react.default.createElement(_NodeView.RemountableNodeView, {
             key: child.key,
             outerDeco: child.outerDeco,
             node: child.node,

package/dist/cjs/components/CursorWrapper.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "CursorWrapper", {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _ReactEditorView = require("../ReactEditorView.js");
 const _dom = require("../dom.js");
 const _useEditorEffect = require("../hooks/useEditorEffect.js");
 function _getRequireWildcardCache(nodeInterop) {
@@ -59,17 +60,18 @@ const CursorWrapper = /*#__PURE__*/ (0, _react.forwardRef)(function CursorWrappe
         return innerRef.current;
     }, []);
     (0, _useEditorEffect.useEditorEffect)((view)=>{
-        if (!view || !innerRef.current) return;
-        // @ts-expect-error Internal property - domObserver
+        if (!(view instanceof _ReactEditorView.ReactEditorView) || !innerRef.current) return;
         view.domObserver.disconnectSelection();
-        // @ts-expect-error Internal property - domSelection
         const domSel = view.domSelection();
         if (!domSel.isCollapsed) return;
         const node = innerRef.current;
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         domSel.collapse(node.parentNode, (0, _dom.domIndex)(node) + 1);
-        // @ts-expect-error Internal property - domObserver
+        view.cursorWrapped = true;
         view.domObserver.connectSelection();
+        return ()=>{
+            view.cursorWrapped = false;
+        };
     }, []);
     return /*#__PURE__*/ _react.default.createElement("img", {
         ref: innerRef,

package/dist/cjs/components/ProseMirror.js

@@ -10,12 +10,14 @@ Object.defineProperty(exports, "ProseMirror", {
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _ChildDescriptionsContext = require("../contexts/ChildDescriptionsContext.js");
+const _CompositionContext = require("../contexts/CompositionContext.js");
 const _EditorContext = require("../contexts/EditorContext.js");
 const _EditorStateContext = require("../contexts/EditorStateContext.js");
 const _NodeViewContext = require("../contexts/NodeViewContext.js");
 const _computeDocDeco = require("../decorations/computeDocDeco.js");
 const _viewDecorations = require("../decorations/viewDecorations.js");
 const _useEditor = require("../hooks/useEditor.js");
+const _reactKeys = require("../plugins/reactKeys.js");
 const _LayoutGroup = require("./LayoutGroup.js");
 const _ProseMirrorDoc = require("./ProseMirrorDoc.js");
 function _getRequireWildcardCache(nodeInterop) {
@@ -68,9 +70,7 @@ const rootChildDescriptionsContextValue = {
     },
     siblingsRef: {
         current: []
-    },
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    findCompositionDOM: ()=>{}
+    }
 };
 function ProseMirrorInner(param) {
     let { children, nodeViewComponents, markViewComponents, ...props } = param;
@@ -104,6 +104,12 @@ function ProseMirrorInner(param) {
         decorations,
         innerDecorations
     ]);
+    const freezeFrom = _reactKeys.reactKeysPluginKey.getState(state)?.freezeFrom ?? null;
+    const compositionContextValue = (0, _react.useMemo)(()=>({
+            freezeFrom
+        }), [
+        freezeFrom
+    ]);
     return /*#__PURE__*/ _react.default.createElement(_EditorContext.EditorContext.Provider, {
         value: editor
     }, /*#__PURE__*/ _react.default.createElement(_EditorStateContext.EditorStateContext.Provider, {
@@ -112,9 +118,11 @@ function ProseMirrorInner(param) {
         value: nodeViewContextValue
     }, /*#__PURE__*/ _react.default.createElement(_ChildDescriptionsContext.ChildDescriptionsContext.Provider, {
         value: rootChildDescriptionsContextValue
+    }, /*#__PURE__*/ _react.default.createElement(_CompositionContext.CompositionContext.Provider, {
+        value: compositionContextValue
     }, /*#__PURE__*/ _react.default.createElement(_ProseMirrorDoc.DocNodeViewContext.Provider, {
         value: docNodeViewContextValue
-    }, children)))));
+    }, children))))));
 }
 function ProseMirror(props) {
     return /*#__PURE__*/ _react.default.createElement(_LayoutGroup.LayoutGroup, null, /*#__PURE__*/ _react.default.createElement(ProseMirrorInner, props));

package/dist/cjs/components/TextNodeView.js

@@ -2,68 +2,18 @@
 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, {
-    RemountableTextNodeView: function() {
-        return RemountableTextNodeView;
-    },
-    TextNodeView: function() {
+Object.defineProperty(exports, "TextNodeView", {
+    enumerable: true,
+    get: function() {
         return TextNodeView;
     }
 });
-const _prosemirrorstate = require("prosemirror-state");
 const _prosemirrorview = require("prosemirror-view");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _react = require("react");
 const _ReactEditorView = require("../ReactEditorView.js");
 const _findDOMNode = require("../findDOMNode.js");
 const _viewdesc = require("../viewdesc.js");
 const _ChildNodeViews = require("./ChildNodeViews.js");
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {
-        __proto__: null
-    };
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
 function shallowEqual(objA, objB) {
     if (objA === objB) {
         return true;
@@ -88,57 +38,6 @@ function shallowEqual(objA, objB) {
 }
 let TextNodeView = class TextNodeView extends _react.Component {
     viewDescRef = createMutRef();
-    renderRef = createMutRef();
-    wasProtecting = createMutRef();
-    containsCompositionNodeText = createMutRef();
-    // This is basically NodeViewDesc.localCompositionInfo
-    // from prosemirror-view. It's been slightly adjusted so that
-    // it can be used accurately during render, before we've
-    // necessarily found (or even let the browser create)
-    // view.input.compositionNode
-    shouldProtect(props) {
-        const { view, getPos, node } = props;
-        if (!(view instanceof _ReactEditorView.ReactEditorView)) return false;
-        if (!view.composing) {
-            return false;
-        }
-        const viewDesc = this.viewDescRef.current;
-        // If our DOM text node IS the IME's composition node, protect regardless
-        // of where the PM selection currently is. The IME may have replaced a
-        // selection that included us — moving the PM selection past us — but our
-        // DOM is still part of the in-progress composition. Until another
-        // TextNodeView's findCompositionDOM displaces us into a comp desc, only
-        // our own protect/no-update is preventing React from rewriting the IME's
-        // text. (When we *are* displaced, viewDesc is already a CompositionViewDesc
-        // and the existing position-based logic doesn't apply anyway.)
-        const ownsCompositionNode = viewDesc instanceof _viewdesc.TextViewDesc && viewDesc.nodeDOM === view.input.compositionNode;
-        if (!ownsCompositionNode) {
-            const pos = getPos();
-            const { from, to } = view.state.selection;
-            if (!(view.state.selection instanceof _prosemirrorstate.TextSelection) || from <= pos || to > pos + node.nodeSize) {
-                return false;
-            }
-        }
-        return !!this.containsCompositionNodeText.current;
-    }
-    handleCompositionEnd = ()=>{
-        if (!this.wasProtecting.current) return;
-        const { view } = this.props;
-        if (!(view instanceof _ReactEditorView.ReactEditorView)) return;
-        // If the IME detached our DOM during composition, React's fiber is now
-        // wired to a detached node and will silently send all subsequent updates
-        // into the void. Re-attach the orphan (so the upcoming unmount's
-        // removeChild has something to remove), then ask our wrapper to mint a
-        // new key — that forces React to drop this fiber and mount a fresh one
-        // whose stateNode it creates from the current render output.
-        const dom = (0, _findDOMNode.findDOMNode)(this);
-        if (dom instanceof HTMLElement && !view.dom.contains(dom)) {
-            this.reattachAtCorrectPosition(dom);
-            this.props.forceRemount();
-        } else {
-            this.forceUpdate();
-        }
-    };
     create() {
         const { view, decorations, siblingsRef, parentRef, getPos, node } = this.props;
         const dom = (0, _findDOMNode.findDOMNode)(this);
@@ -150,24 +49,10 @@ let TextNodeView = class TextNodeView extends _react.Component {
         if (!(textNode instanceof Text)) {
             textNode = null;
         }
-        let viewDesc;
-        if (this.shouldProtect(this.props)) {
-            viewDesc = new _viewdesc.CompositionViewDesc(parentRef.current, getPos, // If we can't
-            // actually find the correct DOM nodes from here (
-            // which is the case in a composition in a newly
-            // created text node), we let our parent do it.
-            // Passing a valid element here just so that the
-            // ViewDesc constructor doesn't blow up.
-            dom ?? document.createElement("div"), textNode ?? document.createTextNode(node.text ?? ""), node.text ?? "");
-        } else {
-            if (!dom || !textNode) return null;
-            viewDesc = new _viewdesc.TextViewDesc(parentRef.current, [], getPos, node, decorations, _prosemirrorview.DecorationSet.empty, dom, textNode);
-        }
+        if (!dom || !textNode) return null;
+        const viewDesc = new _viewdesc.TextViewDesc(parentRef.current, [], getPos, node, decorations, _prosemirrorview.DecorationSet.empty, dom, textNode);
         siblingsRef.current.push(viewDesc);
         siblingsRef.current.sort(_viewdesc.sortViewDescs);
-        if (viewDesc instanceof _viewdesc.CompositionViewDesc) {
-            this.props.findCompositionDOM(viewDesc);
-        }
         return viewDesc;
     }
     update() {
@@ -175,18 +60,6 @@ let TextNodeView = class TextNodeView extends _react.Component {
         if (!(view instanceof _ReactEditorView.ReactEditorView)) return false;
         const viewDesc = this.viewDescRef.current;
         if (!viewDesc) return false;
-        // Don't force destroy/recreate just because we transitioned into protect
-        // mode. If our DOM text node is the IME's composition node, we want to
-        // keep the TextViewDesc alive so the new composition-text TextNodeView's
-        // findCompositionDOM second pass can find us, validate the size mismatch,
-        // and displace us into a properly-sized CompositionViewDesc. If we
-        // destroyed here, create() would put a wrong-size CompositionViewDesc on
-        // T and pre-empt that displacement.
-        const ownsCompositionNode = viewDesc instanceof _viewdesc.TextViewDesc && viewDesc.nodeDOM === view.input.compositionNode;
-        if (!ownsCompositionNode && this.shouldProtect(this.props) !== viewDesc instanceof _viewdesc.CompositionViewDesc) {
-            return false;
-        }
-        if (viewDesc instanceof _viewdesc.CompositionViewDesc) return false;
         const dom = (0, _findDOMNode.findDOMNode)(this);
         if (!dom || dom !== viewDesc.dom) return false;
         if (!dom.contains(viewDesc.nodeDOM)) return false;
@@ -207,58 +80,15 @@ let TextNodeView = class TextNodeView extends _react.Component {
             this.destroy();
             this.viewDescRef.current = this.create();
         }
-        const { view } = this.props;
-        if (!(view instanceof _ReactEditorView.ReactEditorView)) {
-            this.containsCompositionNodeText.current = true;
-            return;
-        }
-        const textNode = view.input.compositionNode;
-        if (!textNode) {
-            this.containsCompositionNodeText.current = true;
-            return;
-        }
-        // Resolve the parent textblock containing this text node and ask
-        // findTextInFragment whether the IME text node's *current* content can be
-        // placed somewhere in the textblock's PM content overlapping the
-        // selection. If it can, the composition is still consistent with PM state
-        // and we should protect. If it can't (e.g. a remote change overwrote the
-        // composing region), PM and the DOM have diverged — abandon protection
-        // so the re-render can rewrite the DOM and cancel the composition.
-        const $pos = view.state.doc.resolve(this.props.getPos());
-        const parent = $pos.parent;
-        if (!parent.inlineContent) {
-            this.containsCompositionNodeText.current = false;
-            return;
-        }
-        const parentStart = $pos.start();
-        const { from, to } = view.state.selection;
-        const textPos = (0, _viewdesc.findTextInFragment)(parent.content, // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        textNode.nodeValue, from - parentStart, to - parentStart);
-        this.containsCompositionNodeText.current = textPos >= 0;
     }
     shouldComponentUpdate(nextProps) {
-        // When leaving the protected state, force a re-render so React's
-        // virtual DOM resyncs with whatever the IME wrote into the real DOM
-        // while we were returning a stale renderRef.
-        if (this.wasProtecting.current && !this.shouldProtect(nextProps)) {
-            return true;
-        }
         return !shallowEqual(this.props, nextProps);
     }
     constructor(props){
         super(props);
         this.viewDescRef.current = null;
-        this.renderRef.current = null;
-        this.wasProtecting.current = false;
-        this.containsCompositionNodeText.current = true;
     }
     componentDidMount() {
-        this.containsCompositionNodeText.current = true;
-        // After a composition, force an update so that we re-check whether we need
-        // to be protecting our rendered content and allow React to re-sync with the
-        // DOM.
-        const { registerEventListener } = this.props;
-        registerEventListener("compositionend", this.handleCompositionEnd);
         this.viewDescRef.current = this.create();
         this.updateEffect();
     }
@@ -267,43 +97,12 @@ let TextNodeView = class TextNodeView extends _react.Component {
         const { view } = this.props;
         if (!(view instanceof _ReactEditorView.ReactEditorView)) return;
     }
-    reattachAtCorrectPosition(dom) {
-        const viewDesc = this.viewDescRef.current;
-        if (!viewDesc) return;
-        let host = viewDesc.parent;
-        while(host && !host.contentDOM)host = host.parent;
-        if (!host?.contentDOM) return;
-        const siblings = viewDesc.parent?.children ?? [];
-        const idx = siblings.indexOf(viewDesc);
-        let nextDom = null;
-        for(let i = idx + 1; i < siblings.length; i++){
-            const sib = siblings[i];
-            if (sib?.dom && sib.dom.parentNode === host.contentDOM) {
-                nextDom = sib.dom;
-                break;
-            }
-        }
-        host.contentDOM.insertBefore(dom, nextDom);
-    }
     componentWillUnmount() {
-        const { unregisterEventListener } = this.props;
-        unregisterEventListener("compositionend", this.handleCompositionEnd);
         this.destroy();
     }
     render() {
         const { node, decorations } = this.props;
-        // During a composition, it's crucial that we don't try to
-        // update the DOM that the user is working in. If there's
-        // 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 (this.shouldProtect(this.props)) {
-            this.wasProtecting.current = true;
-            return this.renderRef.current;
-        }
-        this.wasProtecting.current = false;
-        this.renderRef.current = decorations.reduce(_ChildNodeViews.wrapInDeco, node.text);
-        return this.renderRef.current;
+        return decorations.reduce(_ChildNodeViews.wrapInDeco, node.text);
     }
 };
 /**
@@ -313,11 +112,3 @@ let TextNodeView = class TextNodeView extends _react.Component {
  */ function createMutRef() {
     return /*#__PURE__*/ (0, _react.createRef)();
 }
-function RemountableTextNodeView(props) {
-    const [key, forceRemount] = (0, _react.useReducer)((x)=>x + 1, 0);
-    return /*#__PURE__*/ _react.default.createElement(TextNodeView, {
-        key: key,
-        forceRemount: forceRemount,
-        ...props
-    });
-}

package/dist/cjs/components/TrailingHackView.js

@@ -9,11 +9,8 @@ Object.defineProperty(exports, "TrailingHackView", {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _ReactEditorView = require("../ReactEditorView.js");
 const _ChildDescriptionsContext = require("../contexts/ChildDescriptionsContext.js");
 const _useClientLayoutEffect = require("../hooks/useClientLayoutEffect.js");
-const _useEditorEffect = require("../hooks/useEditorEffect.js");
-const _useEditorEventListener = require("../hooks/useEditorEventListener.js");
 const _viewdesc = require("../viewdesc.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -58,15 +55,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 function TrailingHackView(param) {
     let { getPos } = param;
-    const [shouldRender, setShouldRender] = (0, _react.useState)(true);
-    const [shouldReinsert, setShouldReinsert] = (0, _react.useState)(false);
     const { siblingsRef, parentRef } = (0, _react.useContext)(_ChildDescriptionsContext.ChildDescriptionsContext);
     const viewDescRef = (0, _react.useRef)(null);
     const ref = (0, _react.useRef)(null);
-    const preservedRef = (0, _react.useRef)(ref.current);
-    if (ref.current) {
-        preservedRef.current = ref.current;
-    }
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
         const siblings = siblingsRef.current;
         return ()=>{
@@ -92,67 +83,6 @@ function TrailingHackView(param) {
         }
         siblingsRef.current.sort(_viewdesc.sortViewDescs);
     });
-    // At the start of a composition, the browser will automatically delete
-    // the trailing hack br element. We need to unmount ourselves _before_
-    // that happens, so that React doesn't try to remove the already-removed
-    // br node when this component gets unmounted
-    (0, _useEditorEventListener.useEditorEventListener)("compositionstart", (view)=>{
-        const { from } = view.state.selection;
-        if (from === getPos()) {
-            setShouldRender(false);
-            setShouldReinsert(true);
-        }
-    });
-    // Chrome and Safari will cancel/mangle the composition if the br element isn't
-    // still in the DOM after the compositionstart event. We manually add it
-    // back to the DOM, without React managing it, so that it can be removed
-    // again by the browser when it starts the composition.
-    (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
-        if (!shouldReinsert) return;
-        const preservedHack = preservedRef.current;
-        if (!preservedHack) return;
-        if (!viewDescRef.current) return;
-        const { parent } = viewDescRef.current;
-        if (!parent) return;
-        const dom = parent.contentDOM;
-        if (!dom) return;
-        preservedHack.pmViewDesc = undefined;
-        const index = parent.children.indexOf(viewDescRef.current);
-        if (index === 0) {
-            dom.appendChild(preservedHack);
-        } else {
-            dom.insertBefore(preservedHack, dom.childNodes.item(index));
-        }
-        return ()=>{
-            try {
-                dom.removeChild(preservedHack);
-            } catch  {
-            // It may have already been removed by the browser during
-            // the composition, but if we get unmounted before that happens,
-            // we need to remove it ourselves
-            }
-        };
-    }, [
-        shouldReinsert
-    ]);
-    // We need to run the same composition check when we first get mounted,
-    // in case we got mounted in the same render batch as the beginning of
-    // a composition
-    (0, _useEditorEffect.useEditorEffect)((view)=>{
-        if (!(view instanceof _ReactEditorView.ReactEditorView)) return;
-        if (!view.compositionStarting) return;
-        const { from } = view.state.selection;
-        if (from === getPos()) {
-            setShouldRender(false);
-        }
-    }, [
-        getPos
-    ]);
-    (0, _useEditorEventListener.useEditorEventListener)("compositionend", ()=>{
-        setShouldRender(true);
-        setShouldReinsert(false);
-    });
-    if (!shouldRender) return null;
     return /*#__PURE__*/ _react.default.createElement("br", {
         ref: ref,
         className: "ProseMirror-trailingBreak"

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

@@ -14,9 +14,13 @@ _export(exports, {
     },
     NodeView: function() {
         return NodeView;
+    },
+    RemountableNodeView: function() {
+        return RemountableNodeView;
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _CompositionContext = require("../../contexts/CompositionContext.js");
 const _NodeViewContext = require("../../contexts/NodeViewContext.js");
 const _DefaultNodeView = require("./DefaultNodeView.js");
 const _NodeViewConstructorView = require("./NodeViewConstructorView.js");
@@ -62,8 +66,12 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const NodeView = /*#__PURE__*/ (0, _react.memo)(function NodeView(props) {
+const NodeView = /*#__PURE__*/ (0, _react.memo)(function NodeView(param) {
+    let { forceRemount, ...props } = param;
+    const renderRef = (0, _react.useRef)(null);
+    const { freezeFrom } = (0, _react.useContext)(_CompositionContext.CompositionContext);
     const { components, constructors } = (0, _react.useContext)(_NodeViewContext.NodeViewContext);
+    const committedFrozenRef = (0, _react.useRef)(false);
     const component = components[props.node.type.name] ?? _DefaultNodeView.DefaultNodeView;
     const constructor = constructors[props.node.type.name];
     // Construct a wrapper component so that the node view remounts when either
@@ -90,8 +98,36 @@ const NodeView = /*#__PURE__*/ (0, _react.memo)(function NodeView(props) {
         constructor,
         component
     ]);
-    return /*#__PURE__*/ _react.default.createElement(GetPosContext.Provider, {
-        value: props.getPos
-    }, /*#__PURE__*/ _react.default.createElement(Component, props));
+    // It's not generally safe to access getPos during render, because the
+    // component may not re-render when its return value would change. Here it's
+    // safe because we only use it to _suppress_ commits that would otherwise
+    // have happened.
+    const frozen = props.getPos() === freezeFrom;
+    // 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.default.createElement(GetPosContext.Provider, {
+            value: props.getPos
+        }, /*#__PURE__*/ _react.default.createElement(Component, props));
+    }
+    (0, _react.useLayoutEffect)(()=>{
+        const wasFrozen = committedFrozenRef.current;
+        committedFrozenRef.current = frozen;
+        if (wasFrozen && !frozen) forceRemount();
+    }, [
+        frozen,
+        forceRemount
+    ]);
+    return renderRef.current;
 });
 const GetPosContext = /*#__PURE__*/ (0, _react.createContext)(null);
+function RemountableNodeView(props) {
+    const [key, forceRemount] = (0, _react.useReducer)((x)=>x + 1, 0);
+    return /*#__PURE__*/ _react.default.createElement(NodeView, {
+        key: key.toString(),
+        ...props,
+        forceRemount: forceRemount
+    });
+}

package/dist/cjs/contexts/ChildDescriptionsContext.js

@@ -15,7 +15,5 @@ const ChildDescriptionsContext = (0, _react.createContext)({
     },
     siblingsRef: {
         current: []
-    },
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    findCompositionDOM: ()=>{}
+    }
 });

package/dist/cjs/contexts/CompositionContext.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CompositionContext", {
+    enumerable: true,
+    get: function() {
+        return CompositionContext;
+    }
+});
+const _react = require("react");
+const CompositionContext = (0, _react.createContext)({
+    freezeFrom: null
+});