@handlewithcare/react-prosemirror 2.9.0-tiptap.25 → 3.0.1

package/dist/esm/hooks/{useNodeViewDescriptor.js → useNodeViewDescription.js}

@@ -1,23 +1,21 @@
-import { useContext, useMemo, useRef, useState } from "react";
+import { useCallback, useContext, useMemo, useRef } from "react";
 import { ReactEditorView } from "../ReactEditorView.js";
-import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
 import { EditorContext } from "../contexts/EditorContext.js";
 import { CompositionViewDesc, ReactNodeViewDesc, sortViewDescs } from "../viewdesc.js";
 import { useClientLayoutEffect } from "./useClientLayoutEffect.js";
 import { useEffectEvent } from "./useEffectEvent.js";
-export function useNodeViewDescriptor(ref, constructor, findContentDOM, props) {
+export function useNodeViewDescription(getDOM, getContentDOM, constructor, props) {
     const { view } = useContext(EditorContext);
-    const { parentRef, siblingsRef } = useContext(ChildDescriptorsContext);
-    const [dom, setDOM] = useState(null);
-    const [nodeDOM, setNodeDOM] = useState(null);
-    const [contentDOM, setContentDOM] = useState(null);
+    const { parentRef, siblingsRef } = useContext(ChildDescriptionsContext);
+    const contentDOMRef = useRef(null);
     const viewDescRef = useRef();
     const childrenRef = useRef([]);
     const create = useEffectEvent(()=>{
         if (!(view instanceof ReactEditorView)) {
             return;
         }
-        const dom = ref.current;
+        const dom = getDOM();
         if (!dom) {
             return;
         }
@@ -28,12 +26,15 @@ export function useNodeViewDescriptor(ref, constructor, findContentDOM, props) {
         }
         const parent = parentRef.current;
         const children = childrenRef.current;
-        const contentDOM = findContentDOM(nodeView, children);
+        const contentDOM = getContentDOM(nodeView);
         const nodeDOM = nodeView.dom;
         const viewDesc = new ReactNodeViewDesc(parent, children, getPos, node, decorations, innerDecorations, dom, contentDOM, nodeDOM, nodeView);
-        setDOM(dom);
-        setContentDOM(contentDOM);
-        setNodeDOM(nodeDOM);
+        const siblings = siblingsRef.current;
+        if (!siblings.includes(viewDesc)) {
+            siblings.push(viewDesc);
+        }
+        siblings.sort(sortViewDescs);
+        contentDOMRef.current = getContentDOM(nodeView);
         return viewDesc;
     });
     const update = useEffectEvent(()=>{
@@ -44,11 +45,11 @@ export function useNodeViewDescriptor(ref, constructor, findContentDOM, props) {
         if (!viewDesc) {
             return false;
         }
-        const dom = ref.current;
+        const dom = getDOM();
         if (!dom || dom !== viewDesc.dom) {
             return false;
         }
-        const contentDOM = findContentDOM(viewDesc, viewDesc.children);
+        const contentDOM = getContentDOM(viewDesc);
         if (contentDOM !== viewDesc.contentDOM) {
             return false;
         }
@@ -69,9 +70,7 @@ export function useNodeViewDescriptor(ref, constructor, findContentDOM, props) {
             const index = siblings.indexOf(viewDesc);
             siblings.splice(index, 1);
         }
-        setDOM(null);
-        setContentDOM(null);
-        setNodeDOM(null);
+        contentDOMRef.current = null;
     });
     useClientLayoutEffect(()=>{
         viewDescRef.current = create();
@@ -82,6 +81,17 @@ export function useNodeViewDescriptor(ref, constructor, findContentDOM, props) {
         create,
         destroy
     ]);
+    const refUpdated = useCallback(()=>{
+        if (!viewDescRef.current) return;
+        if (!update()) {
+            destroy();
+            viewDescRef.current = create();
+        }
+    }, [
+        create,
+        destroy,
+        update
+    ]);
     useClientLayoutEffect(()=>{
         if (!update()) {
             destroy();
@@ -101,7 +111,21 @@ export function useNodeViewDescriptor(ref, constructor, findContentDOM, props) {
         if (!siblings.includes(viewDesc)) {
             siblings.push(viewDesc);
         }
+        // In strict/concurrent mode, a node can sometimes re-render
+        // entirely on its own, without even its parent re-rendering.
+        // In this case, we will have added our view descriptions to
+        // our parent's children, but our parent has no opportunity
+        // to sort its children, because it never renders. So
+        // we always sort our siblings, too.
         siblings.sort(sortViewDescs);
+        // If a child updates, usually it will re-render and sort
+        // our children for us. But it's possible to reorder
+        // child nodes without changing their keys or node
+        // instances, in which case our children _won't_
+        // rerender. As a fallback, we do one last pass through
+        // our own child view descriptions and make sure
+        // they're ordered. This should be a cheap no-op in most cases.
+        children.sort(sortViewDescs);
         for (const child of children){
             child.parent = viewDesc;
             // Because TextNodeViews can't locate the DOM nodes
@@ -133,9 +157,7 @@ export function useNodeViewDescriptor(ref, constructor, findContentDOM, props) {
     ]);
     return {
         childContextValue,
-        dom,
-        contentDOM,
-        nodeDOM,
-        ref
+        contentDOM: contentDOMRef.current,
+        refUpdated
     };
 }

package/dist/esm/index.js

@@ -6,6 +6,7 @@ export { useEditorEffect } from "./hooks/useEditorEffect.js";
 export { useEditorEventCallback } from "./hooks/useEditorEventCallback.js";
 export { useEditorEventListener } from "./hooks/useEditorEventListener.js";
 export { useEditorState } from "./hooks/useEditorState.js";
+export { useNodePos } from "./hooks/useNodePos.js";
 export { useStopEvent } from "./hooks/useStopEvent.js";
 export { useSelectNode } from "./hooks/useSelectNode.js";
 export { useIgnoreMutation } from "./hooks/useIgnoreMutation.js";
@@ -13,3 +14,4 @@ export { useIsEditorStatic } from "./hooks/useIsEditorStatic.js";
 export { useIsNodeSelected } from "./hooks/useIsNodeSelected.js";
 export { reactKeys } from "./plugins/reactKeys.js";
 export { widget } from "./decorations/ReactWidgetType.js";
+export { useMergedDOMRefs } from "./refs.js";

package/dist/esm/refs.js

@@ -0,0 +1,18 @@
+import { useCallback } from "react";
+export function useMergedDOMRefs() {
+    for(var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++){
+        refs[_key] = arguments[_key];
+    }
+    return useCallback((value)=>{
+        refs.forEach((ref)=>{
+            if (typeof ref === "function") {
+                ref(value);
+                return;
+            }
+            if (ref) {
+                ref.current = value;
+            }
+        });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, refs);
+}

package/dist/esm/viewdesc.js

@@ -711,25 +711,32 @@ let CustomNodeViewDesc = class CustomNodeViewDesc extends NodeViewDesc {
         }
     }
     selectNode() {
-        this.spec.selectNode ? this.spec.selectNode.call(this) : super.selectNode();
+        this.spec.selectNode ? this.spec.selectNode() : super.selectNode();
     }
     deselectNode() {
-        this.spec.deselectNode ? this.spec.deselectNode.call(this) : super.deselectNode();
+        this.spec.deselectNode ? this.spec.deselectNode() : super.deselectNode();
     }
     setSelection(anchor, head, view, force) {
-        this.spec.setSelection ? this.spec.setSelection.call(this, anchor, head, view.root) : super.setSelection(anchor, head, view, force);
+        this.spec.setSelection ? this.spec.setSelection(anchor, head, view.root) : super.setSelection(anchor, head, view, force);
     }
     destroy() {
         if (this.spec.destroy) this.spec.destroy();
         super.destroy();
     }
     stopEvent(event) {
-        return this.spec.stopEvent ? this.spec.stopEvent.call(this, event) : false;
+        return this.spec.stopEvent ? this.spec.stopEvent(event) : false;
     }
     ignoreMutation(mutation) {
-        return this.spec.ignoreMutation ? this.spec.ignoreMutation.call(this, mutation) : super.ignoreMutation(mutation);
+        return this.spec.ignoreMutation ? this.spec.ignoreMutation(mutation) : super.ignoreMutation(mutation);
     }
 };
+export class ReactMarkViewDesc extends MarkViewDesc {
+    destroy() {
+        // React has already destroyed the children (if needed).
+        this.children = [];
+        super.destroy();
+    }
+}
 export class ReactNodeViewDesc extends CustomNodeViewDesc {
     updateChildren(_view, _pos) {
     // React has already updated the children.
@@ -744,7 +751,7 @@ export class ReactNodeViewDesc extends CustomNodeViewDesc {
         super.destroy();
     }
 }
-function sameOuterDeco(a, b) {
+export function sameOuterDeco(a, b) {
     if (a.length != b.length) return false;
     // @ts-expect-error ...
     for(let i = 0; i < a.length; i++)if (!a[i].type.eq(b[i].type)) return false;