@handlewithcare/react-prosemirror 2.5.2 → 2.5.4

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