@handlewithcare/react-prosemirror 2.5.3 → 2.5.5

package/README.md

@@ -693,15 +693,14 @@ export function SelectionWidget() {
 ### `NodeViewComponentProps`
 
 ```tsx
-type NodeViewComponentProps = {
+interface NodeViewComponentProps extends AllHTMLAttributes<HTMLElement> = {
   nodeProps: {
     decorations: readonly Decoration[];
     innerDecorations: DecorationSource;
     node: Node;
-    children?: ReactNode | ReactNode[];
     getPos: () => number;
   };
-} & HTMLAttributes<HTMLElement>;
+};
 ```
 
 The props that will be passed to all node view components. These props map

package/dist/cjs/ReactEditorView.js

@@ -32,6 +32,7 @@ function changedNodeViews(a, b) {
 let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView {
     nextProps;
     prevState;
+    _destroyed;
     constructor(place, props){
         // Prevent the base class from destroying the React-managed nodes.
         // Restore them below after invoking the base class constructor.
@@ -55,6 +56,16 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
             this.domObserver.stop();
             this.domObserver.observer = null;
             this.domObserver.queue = [];
+            const originalOnSelectionChange = this.domObserver.onSelectionChange;
+            this.domObserver.onSelectionChange = ()=>{
+                // During a composition, we completely pause React-driven
+                // selection and DOM updates. Compositions are "fragile";
+                // in Safari, even updating the selection to the same
+                // position it's already set to will end the current
+                // composition.
+                if (this.composing) return;
+                originalOnSelectionChange();
+            };
         } finally{
             place.mount.replaceChildren(...reactContent);
             for (const attr of place.mount.attributes){
@@ -73,10 +84,22 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
         this.docView.destroy();
         // @ts-expect-error this violates the typing but class does it, too.
         this.docView = null;
+        this._destroyed = false;
     }
     get props() {
         return this.nextProps;
     }
+    /**
+   * @privateremarks
+   *
+   * We override this getter because the base implementation
+   * relies on checking `docView === null`, but we unconditionally
+   * set view.docView in a layout effect in the DocNodeView.
+   * This has the effect of "un-destroying" the EditorView,
+   * making it impossible to determine whether it's been destroyed.
+   */ get isDestroyed() {
+        return this._destroyed;
+    }
     setProps(props) {
         this.update({
             ...this.props,
@@ -142,6 +165,7 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
             super.destroy();
         } finally{
             this.dom.replaceChildren(...reactContent);
+            this._destroyed = true;
         }
     }
     /**

package/dist/cjs/hooks/useEditor.js

@@ -16,6 +16,7 @@ const _constants = require("../constants.js");
 const _beforeInputPlugin = require("../plugins/beforeInputPlugin.js");
 const _useClientLayoutEffect = require("./useClientLayoutEffect.js");
 const _useComponentEventListeners = require("./useComponentEventListeners.js");
+const _useEffectEvent = require("./useEffectEvent.js");
 const _useForceUpdate = require("./useForceUpdate.js");
 let didWarnValueDefaultValue = false;
 function useEditor(mount, options) {
@@ -77,30 +78,31 @@ function useEditor(mount, options) {
     const [view, setView] = (0, _react.useState)(()=>{
         return new _StaticEditorView.StaticEditorView(directEditorProps);
     });
+    const createEditorView = (0, _useEffectEvent.useEffectEvent)((mount)=>{
+        if (mount) {
+            const view = new _ReactEditorView.ReactEditorView({
+                mount
+            }, directEditorProps);
+            view.dom.addEventListener("compositionend", forceUpdate);
+            return view;
+        }
+        return new _StaticEditorView.StaticEditorView(directEditorProps);
+    });
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
+        const view = createEditorView(mount);
+        setView(view);
         return ()=>{
             view.destroy();
         };
     }, [
-        view
+        createEditorView,
+        mount
     ]);
-    // This rule is concerned about infinite updates due to the
-    // call to setView. These calls are deliberately conditional,
-    // so this is not a concern.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
-        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) {
+        // Ensure that the EditorView hasn't been destroyed before
+        // running effects. Running effects will reattach selection
+        // change listeners if the EditorView has been destroyed.
+        if (view instanceof _ReactEditorView.ReactEditorView && !view.isDestroyed) {
             view.commitPendingEffects();
         }
     });

package/dist/cjs/hooks/useEffectEvent.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useEffectEvent", {
+    enumerable: true,
+    get: function() {
+        return useEffectEvent;
+    }
+});
+const _react = require("react");
+function useEffectEvent(fn) {
+    const ref = (0, _react.useRef)(fn);
+    // Ideally this would be a useInsertionEffect, but
+    // that was introduced in React 18 and we still
+    // support React 17. useLayoutEffect is safe
+    // here as long as the function returned by
+    // useEffectEvent isn't called in a layout effect
+    // that's defined _before_ the useEffectEvent
+    // call, and effect events are never passed
+    // to child components.
+    (0, _react.useLayoutEffect)(()=>{
+        ref.current = fn;
+    }, [
+        fn
+    ]);
+    return (0, _react.useCallback)(function() {
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
+        }
+        const f = ref.current;
+        return f(...args);
+    }, []);
+}

package/dist/cjs/hooks/useNodeViewDescriptor.js

@@ -14,6 +14,7 @@ const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js
 const _EditorContext = require("../contexts/EditorContext.js");
 const _viewdesc = require("../viewdesc.js");
 const _useClientLayoutEffect = require("./useClientLayoutEffect.js");
+const _useEffectEvent = require("./useEffectEvent.js");
 function findContentDOM(source, children) {
     return source?.contentDOM ?? children[0]?.dom?.parentElement ?? null;
 }
@@ -25,7 +26,7 @@ function useNodeViewDescriptor(ref, constructor, props) {
     const [contentDOM, setContentDOM] = (0, _react.useState)(null);
     const viewDescRef = (0, _react.useRef)();
     const childrenRef = (0, _react.useRef)([]);
-    const create = (0, _react.useCallback)((props)=>{
+    const create = (0, _useEffectEvent.useEffectEvent)(()=>{
         if (!(view instanceof _ReactEditorView.ReactEditorView)) {
             return;
         }
@@ -47,13 +48,8 @@ function useNodeViewDescriptor(ref, constructor, props) {
         setContentDOM(contentDOM);
         setNodeDOM(nodeDOM);
         return viewDesc;
-    }, [
-        ref,
-        parentRef,
-        constructor,
-        view
-    ]);
-    const update = (0, _react.useCallback)((props)=>{
+    });
+    const update = (0, _useEffectEvent.useEffectEvent)(()=>{
         if (!(view instanceof _ReactEditorView.ReactEditorView)) {
             return false;
         }
@@ -74,11 +70,8 @@ function useNodeViewDescriptor(ref, constructor, props) {
         }
         const { node, decorations, innerDecorations } = props;
         return viewDesc.matchesNode(node, decorations, innerDecorations) || viewDesc.update(node, decorations, innerDecorations, view);
-    }, [
-        ref,
-        view
-    ]);
-    const destroy = (0, _react.useCallback)(()=>{
+    });
+    const destroy = (0, _useEffectEvent.useEffectEvent)(()=>{
         const viewDesc = viewDescRef.current;
         if (!viewDesc) {
             return;
@@ -92,13 +85,20 @@ function useNodeViewDescriptor(ref, constructor, props) {
         setDOM(null);
         setContentDOM(null);
         setNodeDOM(null);
+    });
+    (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
+        viewDescRef.current = create();
+        return ()=>{
+            destroy();
+        };
     }, [
-        siblingsRef
+        create,
+        destroy
     ]);
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
-        if (!update(props)) {
+        if (!update()) {
             destroy();
-            viewDescRef.current = create(props);
+            viewDescRef.current = create();
         }
         const viewDesc = viewDescRef.current;
         if (!viewDesc) {
@@ -137,14 +137,6 @@ function useNodeViewDescriptor(ref, constructor, props) {
             }
         }
     });
-    (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
-        return ()=>{
-            destroy();
-            viewDescRef.current = undefined;
-        };
-    }, [
-        destroy
-    ]);
     const childContextValue = (0, _react.useMemo)(()=>({
             parentRef: viewDescRef,
             siblingsRef: childrenRef

package/dist/esm/ReactEditorView.js

@@ -32,6 +32,7 @@ function changedNodeViews(a, b) {
  */ export class ReactEditorView extends EditorView {
     nextProps;
     prevState;
+    _destroyed;
     constructor(place, props){
         // Prevent the base class from destroying the React-managed nodes.
         // Restore them below after invoking the base class constructor.
@@ -55,6 +56,16 @@ function changedNodeViews(a, b) {
             this.domObserver.stop();
             this.domObserver.observer = null;
             this.domObserver.queue = [];
+            const originalOnSelectionChange = this.domObserver.onSelectionChange;
+            this.domObserver.onSelectionChange = ()=>{
+                // During a composition, we completely pause React-driven
+                // selection and DOM updates. Compositions are "fragile";
+                // in Safari, even updating the selection to the same
+                // position it's already set to will end the current
+                // composition.
+                if (this.composing) return;
+                originalOnSelectionChange();
+            };
         } finally{
             place.mount.replaceChildren(...reactContent);
             for (const attr of place.mount.attributes){
@@ -73,10 +84,22 @@ function changedNodeViews(a, b) {
         this.docView.destroy();
         // @ts-expect-error this violates the typing but class does it, too.
         this.docView = null;
+        this._destroyed = false;
     }
     get props() {
         return this.nextProps;
     }
+    /**
+   * @privateremarks
+   *
+   * We override this getter because the base implementation
+   * relies on checking `docView === null`, but we unconditionally
+   * set view.docView in a layout effect in the DocNodeView.
+   * This has the effect of "un-destroying" the EditorView,
+   * making it impossible to determine whether it's been destroyed.
+   */ get isDestroyed() {
+        return this._destroyed;
+    }
     setProps(props) {
         this.update({
             ...this.props,
@@ -142,6 +165,7 @@ function changedNodeViews(a, b) {
             super.destroy();
         } finally{
             this.dom.replaceChildren(...reactContent);
+            this._destroyed = true;
         }
     }
     /**

package/dist/esm/hooks/useEditor.js

@@ -6,6 +6,7 @@ import { EMPTY_STATE } from "../constants.js";
 import { beforeInputPlugin } from "../plugins/beforeInputPlugin.js";
 import { useClientLayoutEffect } from "./useClientLayoutEffect.js";
 import { useComponentEventListeners } from "./useComponentEventListeners.js";
+import { useEffectEvent } from "./useEffectEvent.js";
 import { useForceUpdate } from "./useForceUpdate.js";
 let didWarnValueDefaultValue = false;
 /**
@@ -75,30 +76,31 @@ let didWarnValueDefaultValue = false;
     const [view, setView] = useState(()=>{
         return new StaticEditorView(directEditorProps);
     });
+    const createEditorView = useEffectEvent((mount)=>{
+        if (mount) {
+            const view = new ReactEditorView({
+                mount
+            }, directEditorProps);
+            view.dom.addEventListener("compositionend", forceUpdate);
+            return view;
+        }
+        return new StaticEditorView(directEditorProps);
+    });
     useClientLayoutEffect(()=>{
+        const view = createEditorView(mount);
+        setView(view);
         return ()=>{
             view.destroy();
         };
     }, [
-        view
+        createEditorView,
+        mount
     ]);
-    // This rule is concerned about infinite updates due to the
-    // call to setView. These calls are deliberately conditional,
-    // so this is not a concern.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     useClientLayoutEffect(()=>{
-        if (mount !== view.dom) {
-            if (mount) {
-                const view = new ReactEditorView({
-                    mount
-                }, directEditorProps);
-                view.dom.addEventListener("compositionend", forceUpdate);
-                setView(view);
-            } else {
-                const view = new StaticEditorView(directEditorProps);
-                setView(view);
-            }
-        } else if (view instanceof ReactEditorView) {
+        // Ensure that the EditorView hasn't been destroyed before
+        // running effects. Running effects will reattach selection
+        // change listeners if the EditorView has been destroyed.
+        if (view instanceof ReactEditorView && !view.isDestroyed) {
             view.commitPendingEffects();
         }
     });

package/dist/esm/hooks/useEffectEvent.js

@@ -0,0 +1,24 @@
+import { useCallback, useLayoutEffect, useRef } from "react";
+export function useEffectEvent(fn) {
+    const ref = useRef(fn);
+    // Ideally this would be a useInsertionEffect, but
+    // that was introduced in React 18 and we still
+    // support React 17. useLayoutEffect is safe
+    // here as long as the function returned by
+    // useEffectEvent isn't called in a layout effect
+    // that's defined _before_ the useEffectEvent
+    // call, and effect events are never passed
+    // to child components.
+    useLayoutEffect(()=>{
+        ref.current = fn;
+    }, [
+        fn
+    ]);
+    return useCallback(function() {
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
+        }
+        const f = ref.current;
+        return f(...args);
+    }, []);
+}

package/dist/esm/hooks/useNodeViewDescriptor.js

@@ -1,9 +1,10 @@
-import { useCallback, useContext, useMemo, useRef, useState } from "react";
+import { useContext, useMemo, useRef, useState } from "react";
 import { ReactEditorView } from "../ReactEditorView.js";
 import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
 import { EditorContext } from "../contexts/EditorContext.js";
 import { CompositionViewDesc, ReactNodeViewDesc, sortViewDescs } from "../viewdesc.js";
 import { useClientLayoutEffect } from "./useClientLayoutEffect.js";
+import { useEffectEvent } from "./useEffectEvent.js";
 function findContentDOM(source, children) {
     return source?.contentDOM ?? children[0]?.dom?.parentElement ?? null;
 }
@@ -15,7 +16,7 @@ export function useNodeViewDescriptor(ref, constructor, props) {
     const [contentDOM, setContentDOM] = useState(null);
     const viewDescRef = useRef();
     const childrenRef = useRef([]);
-    const create = useCallback((props)=>{
+    const create = useEffectEvent(()=>{
         if (!(view instanceof ReactEditorView)) {
             return;
         }
@@ -37,13 +38,8 @@ export function useNodeViewDescriptor(ref, constructor, props) {
         setContentDOM(contentDOM);
         setNodeDOM(nodeDOM);
         return viewDesc;
-    }, [
-        ref,
-        parentRef,
-        constructor,
-        view
-    ]);
-    const update = useCallback((props)=>{
+    });
+    const update = useEffectEvent(()=>{
         if (!(view instanceof ReactEditorView)) {
             return false;
         }
@@ -64,11 +60,8 @@ export function useNodeViewDescriptor(ref, constructor, props) {
         }
         const { node, decorations, innerDecorations } = props;
         return viewDesc.matchesNode(node, decorations, innerDecorations) || viewDesc.update(node, decorations, innerDecorations, view);
-    }, [
-        ref,
-        view
-    ]);
-    const destroy = useCallback(()=>{
+    });
+    const destroy = useEffectEvent(()=>{
         const viewDesc = viewDescRef.current;
         if (!viewDesc) {
             return;
@@ -82,13 +75,20 @@ export function useNodeViewDescriptor(ref, constructor, props) {
         setDOM(null);
         setContentDOM(null);
         setNodeDOM(null);
+    });
+    useClientLayoutEffect(()=>{
+        viewDescRef.current = create();
+        return ()=>{
+            destroy();
+        };
     }, [
-        siblingsRef
+        create,
+        destroy
     ]);
     useClientLayoutEffect(()=>{
-        if (!update(props)) {
+        if (!update()) {
             destroy();
-            viewDescRef.current = create(props);
+            viewDescRef.current = create();
         }
         const viewDesc = viewDescRef.current;
         if (!viewDesc) {
@@ -127,14 +127,6 @@ export function useNodeViewDescriptor(ref, constructor, props) {
             }
         }
     });
-    useClientLayoutEffect(()=>{
-        return ()=>{
-            destroy();
-            viewDescRef.current = undefined;
-        };
-    }, [
-        destroy
-    ]);
     const childContextValue = useMemo(()=>({
             parentRef: viewDescRef,
             siblingsRef: childrenRef