@handlewithcare/react-prosemirror 3.2.1 → 3.2.3

package/README.md

@@ -739,7 +739,7 @@ update.
 ### `useStopEvent`
 
 ```tsx
-type useStopEvent = (stopEvent: (view: EditorView, event: Event) => boolean): void
+type useStopEvent = (stopEvent: (this: NodeView, view: EditorView, event: Event) => boolean): void
 ```
 
 This hook can be used within a node view component to register a
@@ -749,7 +749,7 @@ Events for which this returns true are not handled by the editor.
 ### `useIgnoreMutation`
 
 ```tsx
-type useIgnoreMutation = (stopEvent: (view: EditorView, mutation: ViewMutationRecord) => boolean): void
+type useIgnoreMutation = (stopEvent: (this: NodeView, view: EditorView, mutation: ViewMutationRecord) => boolean): void
 ```
 
 This hook can be used within a node view component to register an

package/dist/cjs/ReactEditorView.js

@@ -188,11 +188,14 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
         // node view selection callbacks.
         this.docView.markDirty(-1, -1);
         const nextSelection = this.nextProps.state.selection;
-        const currentSelection = this.prevState.selection;
-        const selectionChanged = !nextSelection.eq(currentSelection);
-        if (selectionChanged) {
-            super.update(this.nextProps);
-        } else {
+        const prevSelection = this.prevState.selection;
+        const selectionChanged = !nextSelection.eq(prevSelection);
+        const needsSelectionUpdate = selectionChanged || // If the doc within the selection has changed, then the DOM has likely changed.
+        // In this case, we need to force a re-sync of the selection, because the browser
+        // will have probably collapsed the selection to work around the new DOM, which
+        // no longer matches the previous selection.
+        !this.prevState.doc.slice(prevSelection.from, prevSelection.to).eq(this.nextProps.state.doc.slice(prevSelection.from, prevSelection.to));
+        if (!needsSelectionUpdate) {
             // 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
@@ -202,7 +205,9 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
                 allowDefault: false,
                 delayedSelectionSync: false
             };
-            super.update(this.nextProps);
+        }
+        super.update(this.nextProps);
+        if (!needsSelectionUpdate) {
             this.input.mouseDown = null;
         }
         // Store the new previous state.

package/dist/cjs/components/marks/ReactMarkView.js

@@ -78,10 +78,11 @@ const ReactMarkView = /*#__PURE__*/ (0, _react.memo)(function ReactMarkView(para
     ]);
     const { childContextValue, refUpdated } = (0, _useMarkViewDescription.useMarkViewDescription)(()=>ref.current, ()=>contentDOMRef.current ?? ref.current, ()=>({
             dom: ref.current,
+            contentDOM: contentDOMRef.current ?? ref.current,
             ignoreMutation (mutation) {
                 const ignoreMutation = ignoreMutationRef.current;
                 if (ignoreMutation) {
-                    return ignoreMutation(mutation);
+                    return ignoreMutation.call(this, mutation);
                 }
                 return false;
             }

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

@@ -109,6 +109,7 @@ const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(para
         setSelected(false);
         return {
             dom: nodeDOMRef.current ?? domRef.current,
+            contentDOM: contentDOMRef.current,
             update () {
                 return true;
             },

package/dist/cjs/decorations/iterDeco.js

@@ -81,6 +81,8 @@ onWidget, onNode) {
                 end = cutAt;
                 index = -1;
             }
+        } else {
+            while(decoIndex < locals.length && locals[decoIndex].to < end)decoIndex++;
         }
         const outerDeco = child.isInline && !child.isLeaf ? active.filter((d)=>!d.inline) : active.slice();
         onNode(child, outerDeco, deco.forChild(offset, child), offset, index);

package/dist/cjs/tiptap/tiptapNodeView.js

@@ -97,7 +97,7 @@ function tiptapNodeView(param) {
                 innerDecorations,
                 node,
                 view: editor.view
-            }, this.dom, this.contentDOM);
+            }, this.dom, this.contentDOM ?? null);
             nodeView.isDragging = isDraggingRef.current;
             if (stopEvent) {
                 const result = stopEvent.call({
@@ -126,7 +126,7 @@ function tiptapNodeView(param) {
                 innerDecorations,
                 node,
                 view: editor.view
-            }, this.dom, this.contentDOM);
+            }, this.dom, this.contentDOM ?? null);
             if (ignoreMutation) {
                 return ignoreMutation.call({
                     name: extension.name,

package/dist/cjs/viewdesc.js

@@ -773,10 +773,10 @@ let CustomNodeViewDesc = class CustomNodeViewDesc extends NodeViewDesc {
         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);
     }
 };
 let ReactMarkViewDesc = class ReactMarkViewDesc extends MarkViewDesc {

package/dist/esm/ReactEditorView.js

@@ -188,11 +188,14 @@ function changedNodeViews(a, b) {
         // node view selection callbacks.
         this.docView.markDirty(-1, -1);
         const nextSelection = this.nextProps.state.selection;
-        const currentSelection = this.prevState.selection;
-        const selectionChanged = !nextSelection.eq(currentSelection);
-        if (selectionChanged) {
-            super.update(this.nextProps);
-        } else {
+        const prevSelection = this.prevState.selection;
+        const selectionChanged = !nextSelection.eq(prevSelection);
+        const needsSelectionUpdate = selectionChanged || // If the doc within the selection has changed, then the DOM has likely changed.
+        // In this case, we need to force a re-sync of the selection, because the browser
+        // will have probably collapsed the selection to work around the new DOM, which
+        // no longer matches the previous selection.
+        !this.prevState.doc.slice(prevSelection.from, prevSelection.to).eq(this.nextProps.state.doc.slice(prevSelection.from, prevSelection.to));
+        if (!needsSelectionUpdate) {
             // 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
@@ -202,7 +205,9 @@ function changedNodeViews(a, b) {
                 allowDefault: false,
                 delayedSelectionSync: false
             };
-            super.update(this.nextProps);
+        }
+        super.update(this.nextProps);
+        if (!needsSelectionUpdate) {
             this.input.mouseDown = null;
         }
         // Store the new previous state.

package/dist/esm/components/marks/ReactMarkView.js

@@ -27,10 +27,11 @@ export const ReactMarkView = /*#__PURE__*/ memo(function ReactMarkView(param) {
     ]);
     const { childContextValue, refUpdated } = useMarkViewDescription(()=>ref.current, ()=>contentDOMRef.current ?? ref.current, ()=>({
             dom: ref.current,
+            contentDOM: contentDOMRef.current ?? ref.current,
             ignoreMutation (mutation) {
                 const ignoreMutation = ignoreMutationRef.current;
                 if (ignoreMutation) {
-                    return ignoreMutation(mutation);
+                    return ignoreMutation.call(this, mutation);
                 }
                 return false;
             }

package/dist/esm/components/nodes/ReactNodeView.js

@@ -58,6 +58,7 @@ export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
         setSelected(false);
         return {
             dom: nodeDOMRef.current ?? domRef.current,
+            contentDOM: contentDOMRef.current,
             update () {
                 return true;
             },

package/dist/esm/decorations/iterDeco.js

@@ -75,6 +75,8 @@ onWidget, onNode) {
                 end = cutAt;
                 index = -1;
             }
+        } else {
+            while(decoIndex < locals.length && locals[decoIndex].to < end)decoIndex++;
         }
         const outerDeco = child.isInline && !child.isLeaf ? active.filter((d)=>!d.inline) : active.slice();
         onNode(child, outerDeco, deco.forChild(offset, child), offset, index);

package/dist/esm/tiptap/tiptapNodeView.js

@@ -63,7 +63,7 @@ import { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallba
                 innerDecorations,
                 node,
                 view: editor.view
-            }, this.dom, this.contentDOM);
+            }, this.dom, this.contentDOM ?? null);
             nodeView.isDragging = isDraggingRef.current;
             if (stopEvent) {
                 const result = stopEvent.call({
@@ -92,7 +92,7 @@ import { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallba
                 innerDecorations,
                 node,
                 view: editor.view
-            }, this.dom, this.contentDOM);
+            }, this.dom, this.contentDOM ?? null);
             if (ignoreMutation) {
                 return ignoreMutation.call({
                     name: extension.name,

package/dist/esm/viewdesc.js

@@ -751,10 +751,10 @@ let CustomNodeViewDesc = class CustomNodeViewDesc extends NodeViewDesc {
         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 {