@handlewithcare/react-prosemirror 2.2.4 → 2.3.1

package/README.md

@@ -59,6 +59,7 @@ yarn add @handlewithcare/react-prosemirror prosemirror-view@1.37.1 prosemirror-s
   - [`useEditorEffect`](#useeditoreffect-1)
   - [`NodeViewComponentProps`](#nodeviewcomponentprops)
   - [`useStopEvent`](#usestopevent)
+  - [`useIgnoreMutation`](#useignoremutation)
   - [`useSelectNode`](#useselectnode)
   - [`useIsNodeSelected`](#useisnodeselected)
   - [`widget`](#widget)
@@ -362,7 +363,7 @@ const Paragraph = forwardRef<HTMLParagraphElement, NodeViewComponentProps>(
     });
 
     return (
-      <p ref={ref} {...props}>
+      <p {...props} ref={ref}>
         {children}
       </p>
     );
@@ -402,7 +403,7 @@ const Paragraph = forwardRef<HTMLParagraphElement, NodeViewComponentProps>(
     );
 
     return (
-      <p ref={ref} {...props} onClick={onClick}>
+      <p {...props} ref={ref} onClick={onClick}>
         {children}
       </p>
     );
@@ -685,6 +686,16 @@ This hook can be used within a node view component to register a
 [stopEvent handler](https://prosemirror.net/docs/ref/#view.NodeView.stopEvent).
 Events for which this returns true are not handled by the editor.
 
+### `useIgnoreMutation`
+
+```tsx
+type useIgnoreMutation = (stopEvent: (view: EditorView, mutation: ViewMutationRecord) => boolean): void
+```
+
+This hook can be used within a node view component to register an
+[ignoreMutation handler](https://prosemirror.net/docs/ref/#view.NodeView.ignoreMutation).
+Mutations for which this returns true are not handled by the editor.
+
 ### `useSelectNode`
 
 ```tsx

package/dist/cjs/components/CustomNodeView.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "CustomNodeView", {
         return CustomNodeView;
     }
 });
+const _prosemirrorstate = require("prosemirror-state");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _reactdom = require("react-dom");
 const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js");
@@ -64,41 +65,72 @@ const CustomNodeView = /*#__PURE__*/ (0, _react.memo)(function CustomNodeView(pa
     const nodeDomRef = (0, _react.useRef)(null);
     const contentDomRef = (0, _react.useRef)(null);
     const getPosFunc = (0, _react.useRef)(()=>getPos.current()).current;
-    // this is ill-conceived; should revisit
-    const initialNode = (0, _react.useRef)(node);
-    const initialOuterDeco = (0, _react.useRef)(outerDeco);
-    const initialInnerDeco = (0, _react.useRef)(innerDeco);
+    const nodeRef = (0, _react.useRef)(node);
+    nodeRef.current = node;
+    const outerDecoRef = (0, _react.useRef)(outerDeco);
+    outerDecoRef.current = outerDeco;
+    const innerDecoRef = (0, _react.useRef)(innerDeco);
+    innerDecoRef.current = innerDeco;
     const customNodeViewRootRef = (0, _react.useRef)(null);
     const customNodeViewRef = (0, _react.useRef)(null);
     const shouldRender = (0, _useClientOnly.useClientOnly)();
+    // In Strict/Concurrent mode, layout effects can be destroyed/re-run
+    // independently of renders. We need to ensure that if the
+    // destructor that destroys the node view is called, we then recreate
+    // the node view when the layout effect is re-run.
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
-        if (!customNodeViewRef.current || !customNodeViewRootRef.current || !shouldRender) return;
-        const { dom } = customNodeViewRef.current;
-        nodeDomRef.current = customNodeViewRootRef.current;
-        customNodeViewRootRef.current.appendChild(dom);
+        if (!customNodeViewRef.current || !shouldRender) {
+            customNodeViewRef.current = customNodeView(nodeRef.current, // customNodeView will only be set if view is set, and we can only reach
+            // this line if customNodeView is set
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            view, getPosFunc, outerDecoRef.current, innerDecoRef.current);
+            if (customNodeViewRef.current.stopEvent) {
+                setStopEvent(customNodeViewRef.current.stopEvent.bind(customNodeViewRef.current));
+            }
+            if (customNodeViewRef.current.selectNode) {
+                setSelectNode(customNodeViewRef.current.selectNode.bind(customNodeViewRef.current), customNodeViewRef.current.deselectNode?.bind(customNodeViewRef.current) ?? (()=>{}));
+            }
+            if (customNodeViewRef.current.ignoreMutation) {
+                setIgnoreMutation(customNodeViewRef.current.ignoreMutation.bind(customNodeViewRef.current));
+            }
+            if (!customNodeViewRootRef.current) return;
+            const { dom } = customNodeViewRef.current;
+            nodeDomRef.current = customNodeViewRootRef.current;
+            customNodeViewRootRef.current.appendChild(dom);
+            // Layout effects can run multiple times — if this effect
+            // destroyed and recreated this node view, then we need to
+            // resync the selectNode state
+            if (view?.state.selection instanceof _prosemirrorstate.NodeSelection && view.state.selection.node === nodeRef.current) {
+                customNodeViewRef.current.selectNode?.();
+            }
+        }
+        const nodeView = customNodeViewRef.current;
         return ()=>{
-            customNodeViewRef.current?.destroy?.();
+            nodeView.destroy?.();
+            customNodeViewRef.current = null;
         };
+    // setStopEvent, setSelectNodee, and setIgnoreMutation are all stable
+    // functions and don't need to be added to the dependencies. They also
+    // can't be, because they come from useNodeViewDescriptor, which
+    // _has_ to be called after this hook, so that the effects run
+    // in the correct order
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
-        customNodeViewRef,
-        customNodeViewRootRef,
-        nodeDomRef,
-        shouldRender
+        customNodeView,
+        getPosFunc,
+        view
     ]);
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
-        if (!customNodeView || !customNodeViewRef.current || !shouldRender) return;
+        if (!customNodeView || !customNodeViewRef.current) return;
         const { destroy, update } = customNodeViewRef.current;
         const updated = update?.call(customNodeViewRef.current, node, outerDeco, innerDeco) ?? true;
         if (updated) return;
         destroy?.call(customNodeViewRef.current);
         if (!customNodeViewRootRef.current) return;
-        initialNode.current = node;
-        initialOuterDeco.current = outerDeco;
-        initialInnerDeco.current = innerDeco;
-        customNodeViewRef.current = customNodeView(initialNode.current, // customNodeView will only be set if view is set, and we can only reach
+        customNodeViewRef.current = customNodeView(nodeRef.current, // customNodeView will only be set if view is set, and we can only reach
         // this line if customNodeView is set
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        view, getPosFunc, initialOuterDeco.current, initialInnerDeco.current);
+        view, getPosFunc, outerDecoRef.current, innerDecoRef.current);
         const { dom } = customNodeViewRef.current;
         nodeDomRef.current = customNodeViewRootRef.current;
         customNodeViewRootRef.current.appendChild(dom);
@@ -109,16 +141,9 @@ const CustomNodeView = /*#__PURE__*/ (0, _react.memo)(function CustomNodeView(pa
         node,
         outerDeco,
         getPos,
-        customNodeViewRef,
-        customNodeViewRootRef,
-        initialNode,
-        initialOuterDeco,
-        initialInnerDeco,
-        nodeDomRef,
-        shouldRender,
         getPosFunc
     ]);
-    const { childDescriptors, nodeViewDescRef } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(node, ()=>getPos.current(), domRef, nodeDomRef, innerDeco, outerDeco, undefined, contentDomRef);
+    const { childDescriptors, nodeViewDescRef, setStopEvent, setSelectNode, setIgnoreMutation } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(node, getPosFunc, domRef, nodeDomRef, innerDeco, outerDeco, undefined, contentDomRef);
     const childContextValue = (0, _react.useMemo)(()=>({
             parentRef: nodeViewDescRef,
             siblingsRef: childDescriptors
@@ -127,11 +152,25 @@ const CustomNodeView = /*#__PURE__*/ (0, _react.memo)(function CustomNodeView(pa
         nodeViewDescRef
     ]);
     if (!shouldRender) return null;
+    // In order to render the correct element with the correct
+    // props below, we have to call the customNodeView in the
+    // render function here. We only do this once, and the
+    // results are stored in a ref but not actually appended
+    // to the DOM until a client effect
     if (!customNodeViewRef.current) {
-        customNodeViewRef.current = customNodeView(initialNode.current, // customNodeView will only be set if view is set, and we can only reach
+        customNodeViewRef.current = customNodeView(nodeRef.current, // customNodeView will only be set if view is set, and we can only reach
         // this line if customNodeView is set
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        view, ()=>getPos.current(), initialOuterDeco.current, initialInnerDeco.current);
+        view, ()=>getPos.current(), outerDecoRef.current, innerDecoRef.current);
+        if (customNodeViewRef.current.stopEvent) {
+            setStopEvent(customNodeViewRef.current.stopEvent.bind(customNodeViewRef.current));
+        }
+        if (customNodeViewRef.current.selectNode) {
+            setSelectNode(customNodeViewRef.current.selectNode.bind(customNodeViewRef.current), customNodeViewRef.current.deselectNode?.bind(customNodeViewRef.current) ?? (()=>{}));
+        }
+        if (customNodeViewRef.current.ignoreMutation) {
+            setIgnoreMutation(customNodeViewRef.current.ignoreMutation.bind(customNodeViewRef.current));
+        }
     }
     const { contentDOM } = customNodeViewRef.current;
     contentDomRef.current = contentDOM ?? null;

package/dist/cjs/components/ReactNodeView.js

@@ -10,6 +10,7 @@ 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");
@@ -69,7 +70,7 @@ const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(para
     const outputSpec = (0, _react.useMemo)(()=>node.type.spec.toDOM?.(node), [
         node
     ]);
-    const { hasContentDOM, childDescriptors, setStopEvent, setSelectNode, nodeViewDescRef } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(node, ()=>getPos.current(), domRef, nodeDomRef, innerDeco, outerDeco, undefined, contentDomRef);
+    const { hasContentDOM, childDescriptors, setStopEvent, setSelectNode, setIgnoreMutation, nodeViewDescRef } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(node, ()=>getPos.current(), domRef, nodeDomRef, innerDeco, outerDeco, undefined, contentDomRef);
     const finalProps = {
         ...props,
         ...!hasContentDOM && {
@@ -130,7 +131,9 @@ const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(para
         value: setSelectNode
     }, /*#__PURE__*/ _react.default.createElement(_StopEventContext.StopEventContext.Provider, {
         value: setStopEvent
+    }, /*#__PURE__*/ _react.default.createElement(_IgnoreMutationContext.IgnoreMutationContext.Provider, {
+        value: setIgnoreMutation
     }, /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
         value: childContextValue
-    }, decoratedElement)));
+    }, decoratedElement))));
 });

package/dist/cjs/contexts/IgnoreMutationContext.js

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

package/dist/cjs/hooks/useClientOnly.js

@@ -9,10 +9,11 @@ Object.defineProperty(exports, "useClientOnly", {
     }
 });
 const _react = require("react");
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function unsubscribe() {}
+function subscribe() {
+    return unsubscribe;
+}
 function useClientOnly() {
-    const [render, setRender] = (0, _react.useState)(false);
-    (0, _react.useEffect)(()=>{
-        setRender(true);
-    }, []);
-    return render;
+    return (0, _react.useSyncExternalStore)(subscribe, ()=>true, ()=>false);
 }

package/dist/cjs/hooks/useEditor.js

@@ -229,7 +229,7 @@ function useEditor(mount, options) {
     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*/ }));
+    /* The doc node can't have a node selection*/ }, ()=>false));
     const directEditorProps = {
         ...options,
         state,

package/dist/cjs/hooks/useEditorEventCallback.js

@@ -23,10 +23,12 @@ function useEditorEventCallback(callback) {
         for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
             args[_key] = arguments[_key];
         }
-        if (view) {
-            return ref.current(view, ...args);
-        }
-        return;
+        // It's not actually possible for an event handler to run
+        // while view is null, since view is only ever set to
+        // null in a layout effect that then immediately triggers
+        // a re-render which sets view to a new EditorView
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return ref.current(view, ...args);
     }, [
         view
     ]);

package/dist/cjs/hooks/useIgnoreMutation.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useIgnoreMutation", {
+    enumerable: true,
+    get: function() {
+        return useIgnoreMutation;
+    }
+});
+const _react = require("react");
+const _IgnoreMutationContext = require("../contexts/IgnoreMutationContext.js");
+const _useEditorEffect = require("./useEditorEffect.js");
+const _useEditorEventCallback = require("./useEditorEventCallback.js");
+function useIgnoreMutation(ignoreMutation) {
+    const register = (0, _react.useContext)(_IgnoreMutationContext.IgnoreMutationContext);
+    const ignoreMutationMemo = (0, _useEditorEventCallback.useEditorEventCallback)(ignoreMutation);
+    (0, _useEditorEffect.useEditorEffect)(()=>{
+        register(ignoreMutationMemo);
+    }, [
+        register,
+        ignoreMutationMemo
+    ]);
+}

package/dist/cjs/hooks/useNodeViewDescriptor.js

@@ -21,6 +21,10 @@ function useNodeViewDescriptor(node, getPos, domRef, nodeDomRef, innerDecoration
     const setStopEvent = (0, _react.useCallback)((newStopEvent)=>{
         stopEvent.current = newStopEvent;
     }, []);
+    const ignoreMutation = (0, _react.useRef)(()=>false);
+    const setIgnoreMutation = (0, _react.useCallback)((newIgnoreMutation)=>{
+        ignoreMutation.current = newIgnoreMutation;
+    }, []);
     const selectNode = (0, _react.useRef)(()=>{
         if (!nodeDomRef.current || !node) return;
         if (nodeDomRef.current.nodeType == 1) nodeDomRef.current.classList.add("ProseMirror-selectednode");
@@ -56,7 +60,7 @@ function useNodeViewDescriptor(node, getPos, domRef, nodeDomRef, innerDecoration
         if (!node || !nodeDomRef.current) return;
         const firstChildDesc = childDescriptors.current[0];
         if (!nodeViewDescRef.current) {
-            nodeViewDescRef.current = new _viewdesc.NodeViewDesc(parentRef.current, childDescriptors.current, getPos, node, outerDecorations, innerDecorations, domRef?.current ?? nodeDomRef.current, firstChildDesc?.dom.parentElement ?? null, nodeDomRef.current, (event)=>!!stopEvent.current(event), ()=>selectNode.current(), ()=>deselectNode.current());
+            nodeViewDescRef.current = new _viewdesc.NodeViewDesc(parentRef.current, childDescriptors.current, getPos, node, outerDecorations, innerDecorations, domRef?.current ?? nodeDomRef.current, firstChildDesc?.dom.parentElement ?? null, nodeDomRef.current, (event)=>!!stopEvent.current(event), ()=>selectNode.current(), ()=>deselectNode.current(), (mutation)=>ignoreMutation.current(mutation));
         } else {
             nodeViewDescRef.current.parent = parentRef.current;
             nodeViewDescRef.current.children = childDescriptors.current;
@@ -111,6 +115,7 @@ function useNodeViewDescriptor(node, getPos, domRef, nodeDomRef, innerDecoration
         childDescriptors,
         nodeViewDescRef,
         setStopEvent,
-        setSelectNode
+        setSelectNode,
+        setIgnoreMutation
     };
 }

package/dist/cjs/index.js

@@ -31,6 +31,9 @@ _export(exports, {
     useEditorState: function() {
         return _useEditorState.useEditorState;
     },
+    useIgnoreMutation: function() {
+        return _useIgnoreMutation.useIgnoreMutation;
+    },
     useIsNodeSelected: function() {
         return _useIsNodeSelected.useIsNodeSelected;
     },
@@ -52,6 +55,7 @@ const _useEditorEventListener = require("./hooks/useEditorEventListener.js");
 const _useEditorState = require("./hooks/useEditorState.js");
 const _useStopEvent = require("./hooks/useStopEvent.js");
 const _useSelectNode = require("./hooks/useSelectNode.js");
+const _useIgnoreMutation = require("./hooks/useIgnoreMutation.js");
 const _useIsNodeSelected = require("./hooks/useIsNodeSelected.js");
 const _reactKeys = require("./plugins/reactKeys.js");
 const _ReactWidgetType = require("./decorations/ReactWidgetType.js");

package/dist/cjs/props.js

@@ -9,50 +9,53 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    cssToStyles: function() {
-        return cssToStyles;
-    },
     htmlAttrsToReactProps: function() {
         return htmlAttrsToReactProps;
     },
-    kebabCaseToCamelCase: function() {
-        return kebabCaseToCamelCase;
-    },
     mergeReactProps: function() {
         return mergeReactProps;
     }
 });
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
-const _csstree = require("css-tree");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function kebabCaseToCamelCase(str) {
-    return str.replaceAll(/-[a-z]/g, (g)=>g[1]?.toUpperCase() ?? "");
-}
-function cssToStyles(css) {
-    const ast = (0, _csstree.parse)(`* { ${css} }`);
-    if (ast.type !== "StyleSheet") return {};
-    const rule = ast.children.first;
-    if (rule?.type !== "Rule") return {};
-    const block = rule.block;
-    const styles = {};
-    for (const declaration of block.children){
-        if (declaration.type !== "Declaration") continue;
-        const property = declaration.property;
-        const value = declaration.value.type === "Raw" ? declaration.value.value : (0, _csstree.generate)(declaration.value);
-        const camelCasePropertyName = property.startsWith("--") ? property : kebabCaseToCamelCase(property);
-        styles[camelCasePropertyName] = value;
+let patched = false;
+function patchConsoleError() {
+    if (patched) return;
+    /* eslint-disable no-console */ const consoleError = console.error;
+    console.error = function() {
+        for(var _len = arguments.length, data = new Array(_len), _key = 0; _key < _len; _key++){
+            data[_key] = arguments[_key];
+        }
+        const [message, prop, correction] = data;
+        if (typeof message === "string" && message.startsWith("Warning: Invalid DOM property `%s`. Did you mean `%s`?") && prop === "STYLE" && correction === "style") {
+            return;
+        }
+        consoleError(...data);
+    };
+    patched = true;
+/* eslint-enable no-console */ }
+function mergeStyleProps(a, b) {
+    if (!("STYLE" in a)) {
+        if (!("STYLE" in b)) {
+            return undefined;
+        }
+        return b.STYLE;
+    }
+    if (!("STYLE" in b)) {
+        return a.STYLE;
     }
-    return styles;
+    return `${a.STYLE.match(/;\s*$/) ? a.STYLE : `${a.STYLE}`} ${b.STYLE}`;
 }
 function mergeReactProps(a, b) {
     return {
         ...a,
         ...b,
         className: (0, _classnames.default)(a.className, b.className),
+        STYLE: mergeStyleProps(a, b),
         style: {
             ...a.style,
             ...b.style
@@ -60,6 +63,7 @@ function mergeReactProps(a, b) {
     };
 }
 function htmlAttrsToReactProps(attrs) {
+    patchConsoleError();
     const props = {};
     for (const [attrName, attrValue] of Object.entries(attrs)){
         switch(attrName.toLowerCase()){
@@ -70,7 +74,14 @@ function htmlAttrsToReactProps(attrs) {
                 }
             case "style":
                 {
-                    props.style = cssToStyles(attrValue);
+                    // HACK: React expects the `style` prop to be an
+                    // object mapping from CSS property name to value.
+                    // However, it will pass un-recognized props through
+                    // to the underlying DOM element, and HTML attributes
+                    // are case insensitive. So we use `STYLE` instead,
+                    // which React doesn't intercept, but the DOM treats
+                    // as `style`
+                    props.STYLE = attrValue;
                     break;
                 }
             case "autocapitalize":

package/dist/cjs/viewdesc.js

@@ -551,8 +551,9 @@ let NodeViewDesc = class NodeViewDesc extends ViewDesc {
     stopEvent;
     selectNode;
     deselectNode;
-    constructor(parent, children, getPos, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, stopEvent, selectNode, deselectNode){
-        super(parent, children, getPos, dom, contentDOM), this.node = node, this.outerDeco = outerDeco, this.innerDeco = innerDeco, this.nodeDOM = nodeDOM, this.stopEvent = stopEvent, this.selectNode = selectNode, this.deselectNode = deselectNode;
+    ignoreMutation;
+    constructor(parent, children, getPos, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, stopEvent, selectNode, deselectNode, ignoreMutation){
+        super(parent, children, getPos, dom, contentDOM), this.node = node, this.outerDeco = outerDeco, this.innerDeco = innerDeco, this.nodeDOM = nodeDOM, this.stopEvent = stopEvent, this.selectNode = selectNode, this.deselectNode = deselectNode, this.ignoreMutation = ignoreMutation;
     }
     updateOuterDeco() {
     // pass
@@ -612,7 +613,9 @@ let TextViewDesc = class TextViewDesc extends NodeViewDesc {
     constructor(parent, children, getPos, node, outerDeco, innerDeco, dom, nodeDOM){
         super(parent, children, getPos, node, outerDeco, innerDeco, dom, null, nodeDOM, ()=>false, ()=>{
         /* Text nodes can't have node selections */ }, ()=>{
-        /* Text nodes can't have node selections */ });
+        /* Text nodes can't have node selections */ }, (mutation)=>{
+            return mutation.type != "characterData" && mutation.type != "selection";
+        });
     }
     parseRule() {
         let skip = this.nodeDOM.parentNode;
@@ -639,9 +642,6 @@ let TextViewDesc = class TextViewDesc extends NodeViewDesc {
         if (dom == this.nodeDOM) return this.posAtStart + Math.min(offset, this.node.text.length);
         return super.localPosFromDOM(dom, offset, bias);
     }
-    ignoreMutation(mutation) {
-        return mutation.type != "characterData" && mutation.type != "selection";
-    }
     markDirty(from, to) {
         super.markDirty(from, to);
         if (this.dom != this.nodeDOM && (from == 0 || to == this.nodeDOM.nodeValue.length)) this.dirty = NODE_DIRTY;

package/dist/esm/components/CustomNodeView.js

@@ -1,3 +1,4 @@
+import { NodeSelection } from "prosemirror-state";
 import React, { cloneElement, createElement, memo, useContext, useMemo, useRef } from "react";
 import { createPortal } from "react-dom";
 import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
@@ -13,41 +14,72 @@ export const CustomNodeView = /*#__PURE__*/ memo(function CustomNodeView(param)
     const nodeDomRef = useRef(null);
     const contentDomRef = useRef(null);
     const getPosFunc = useRef(()=>getPos.current()).current;
-    // this is ill-conceived; should revisit
-    const initialNode = useRef(node);
-    const initialOuterDeco = useRef(outerDeco);
-    const initialInnerDeco = useRef(innerDeco);
+    const nodeRef = useRef(node);
+    nodeRef.current = node;
+    const outerDecoRef = useRef(outerDeco);
+    outerDecoRef.current = outerDeco;
+    const innerDecoRef = useRef(innerDeco);
+    innerDecoRef.current = innerDeco;
     const customNodeViewRootRef = useRef(null);
     const customNodeViewRef = useRef(null);
     const shouldRender = useClientOnly();
+    // In Strict/Concurrent mode, layout effects can be destroyed/re-run
+    // independently of renders. We need to ensure that if the
+    // destructor that destroys the node view is called, we then recreate
+    // the node view when the layout effect is re-run.
     useClientLayoutEffect(()=>{
-        if (!customNodeViewRef.current || !customNodeViewRootRef.current || !shouldRender) return;
-        const { dom } = customNodeViewRef.current;
-        nodeDomRef.current = customNodeViewRootRef.current;
-        customNodeViewRootRef.current.appendChild(dom);
+        if (!customNodeViewRef.current || !shouldRender) {
+            customNodeViewRef.current = customNodeView(nodeRef.current, // customNodeView will only be set if view is set, and we can only reach
+            // this line if customNodeView is set
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            view, getPosFunc, outerDecoRef.current, innerDecoRef.current);
+            if (customNodeViewRef.current.stopEvent) {
+                setStopEvent(customNodeViewRef.current.stopEvent.bind(customNodeViewRef.current));
+            }
+            if (customNodeViewRef.current.selectNode) {
+                setSelectNode(customNodeViewRef.current.selectNode.bind(customNodeViewRef.current), customNodeViewRef.current.deselectNode?.bind(customNodeViewRef.current) ?? (()=>{}));
+            }
+            if (customNodeViewRef.current.ignoreMutation) {
+                setIgnoreMutation(customNodeViewRef.current.ignoreMutation.bind(customNodeViewRef.current));
+            }
+            if (!customNodeViewRootRef.current) return;
+            const { dom } = customNodeViewRef.current;
+            nodeDomRef.current = customNodeViewRootRef.current;
+            customNodeViewRootRef.current.appendChild(dom);
+            // Layout effects can run multiple times — if this effect
+            // destroyed and recreated this node view, then we need to
+            // resync the selectNode state
+            if (view?.state.selection instanceof NodeSelection && view.state.selection.node === nodeRef.current) {
+                customNodeViewRef.current.selectNode?.();
+            }
+        }
+        const nodeView = customNodeViewRef.current;
         return ()=>{
-            customNodeViewRef.current?.destroy?.();
+            nodeView.destroy?.();
+            customNodeViewRef.current = null;
         };
+    // setStopEvent, setSelectNodee, and setIgnoreMutation are all stable
+    // functions and don't need to be added to the dependencies. They also
+    // can't be, because they come from useNodeViewDescriptor, which
+    // _has_ to be called after this hook, so that the effects run
+    // in the correct order
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
-        customNodeViewRef,
-        customNodeViewRootRef,
-        nodeDomRef,
-        shouldRender
+        customNodeView,
+        getPosFunc,
+        view
     ]);
     useClientLayoutEffect(()=>{
-        if (!customNodeView || !customNodeViewRef.current || !shouldRender) return;
+        if (!customNodeView || !customNodeViewRef.current) return;
         const { destroy, update } = customNodeViewRef.current;
         const updated = update?.call(customNodeViewRef.current, node, outerDeco, innerDeco) ?? true;
         if (updated) return;
         destroy?.call(customNodeViewRef.current);
         if (!customNodeViewRootRef.current) return;
-        initialNode.current = node;
-        initialOuterDeco.current = outerDeco;
-        initialInnerDeco.current = innerDeco;
-        customNodeViewRef.current = customNodeView(initialNode.current, // customNodeView will only be set if view is set, and we can only reach
+        customNodeViewRef.current = customNodeView(nodeRef.current, // customNodeView will only be set if view is set, and we can only reach
         // this line if customNodeView is set
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        view, getPosFunc, initialOuterDeco.current, initialInnerDeco.current);
+        view, getPosFunc, outerDecoRef.current, innerDecoRef.current);
         const { dom } = customNodeViewRef.current;
         nodeDomRef.current = customNodeViewRootRef.current;
         customNodeViewRootRef.current.appendChild(dom);
@@ -58,16 +90,9 @@ export const CustomNodeView = /*#__PURE__*/ memo(function CustomNodeView(param)
         node,
         outerDeco,
         getPos,
-        customNodeViewRef,
-        customNodeViewRootRef,
-        initialNode,
-        initialOuterDeco,
-        initialInnerDeco,
-        nodeDomRef,
-        shouldRender,
         getPosFunc
     ]);
-    const { childDescriptors, nodeViewDescRef } = useNodeViewDescriptor(node, ()=>getPos.current(), domRef, nodeDomRef, innerDeco, outerDeco, undefined, contentDomRef);
+    const { childDescriptors, nodeViewDescRef, setStopEvent, setSelectNode, setIgnoreMutation } = useNodeViewDescriptor(node, getPosFunc, domRef, nodeDomRef, innerDeco, outerDeco, undefined, contentDomRef);
     const childContextValue = useMemo(()=>({
             parentRef: nodeViewDescRef,
             siblingsRef: childDescriptors
@@ -76,11 +101,25 @@ export const CustomNodeView = /*#__PURE__*/ memo(function CustomNodeView(param)
         nodeViewDescRef
     ]);
     if (!shouldRender) return null;
+    // In order to render the correct element with the correct
+    // props below, we have to call the customNodeView in the
+    // render function here. We only do this once, and the
+    // results are stored in a ref but not actually appended
+    // to the DOM until a client effect
     if (!customNodeViewRef.current) {
-        customNodeViewRef.current = customNodeView(initialNode.current, // customNodeView will only be set if view is set, and we can only reach
+        customNodeViewRef.current = customNodeView(nodeRef.current, // customNodeView will only be set if view is set, and we can only reach
         // this line if customNodeView is set
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        view, ()=>getPos.current(), initialOuterDeco.current, initialInnerDeco.current);
+        view, ()=>getPos.current(), outerDecoRef.current, innerDecoRef.current);
+        if (customNodeViewRef.current.stopEvent) {
+            setStopEvent(customNodeViewRef.current.stopEvent.bind(customNodeViewRef.current));
+        }
+        if (customNodeViewRef.current.selectNode) {
+            setSelectNode(customNodeViewRef.current.selectNode.bind(customNodeViewRef.current), customNodeViewRef.current.deselectNode?.bind(customNodeViewRef.current) ?? (()=>{}));
+        }
+        if (customNodeViewRef.current.ignoreMutation) {
+            setIgnoreMutation(customNodeViewRef.current.ignoreMutation.bind(customNodeViewRef.current));
+        }
     }
     const { contentDOM } = customNodeViewRef.current;
     contentDomRef.current = contentDOM ?? null;