@handlewithcare/react-prosemirror 3.1.0-tiptap.34 → 3.1.0-tiptap.36

package/dist/esm/hooks/useNodeViewDescriptor.js

@@ -0,0 +1,146 @@
+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(view, source, children) {
+    // When a composition is happening, we want to essentially freeze everything,
+    // so we maintain the current contentDOM.
+    return view.composing ? source?.contentDOM ?? null : children[0]?.dom?.parentElement ?? null;
+}
+export function useNodeViewDescriptor(ref, 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 viewDescRef = useRef();
+    const childrenRef = useRef([]);
+    const create = useEffectEvent(()=>{
+        if (!(view instanceof ReactEditorView)) {
+            return;
+        }
+        const dom = ref.current;
+        if (!dom) {
+            return;
+        }
+        const { node, getPos, decorations, innerDecorations } = props;
+        const nodeView = constructor(node, view, getPos, decorations, innerDecorations);
+        if (!nodeView) {
+            return;
+        }
+        const parent = parentRef.current;
+        const children = childrenRef.current;
+        const contentDOM = findContentDOM(view, nodeView, children);
+        const nodeDOM = nodeView.dom;
+        const viewDesc = new ReactNodeViewDesc(parent, children, getPos, node, decorations, innerDecorations, dom, contentDOM, nodeDOM, nodeView);
+        setDOM(dom);
+        setContentDOM(contentDOM);
+        setNodeDOM(nodeDOM);
+        return viewDesc;
+    });
+    const update = useEffectEvent(()=>{
+        if (!(view instanceof ReactEditorView)) {
+            return false;
+        }
+        const viewDesc = viewDescRef.current;
+        if (!viewDesc) {
+            return false;
+        }
+        const dom = ref.current;
+        if (!dom || dom !== viewDesc.dom) {
+            return false;
+        }
+        const contentDOM = findContentDOM(view, viewDesc, viewDesc.children);
+        if (contentDOM !== viewDesc.contentDOM) {
+            return false;
+        }
+        if (!dom.contains(viewDesc.nodeDOM)) {
+            return false;
+        }
+        const { node, decorations, innerDecorations } = props;
+        return viewDesc.matchesNode(node, decorations, innerDecorations) || viewDesc.update(node, decorations, innerDecorations, view);
+    });
+    const destroy = useEffectEvent(()=>{
+        const viewDesc = viewDescRef.current;
+        if (!viewDesc) {
+            return;
+        }
+        viewDesc.destroy();
+        const siblings = siblingsRef.current;
+        if (siblings.includes(viewDesc)) {
+            const index = siblings.indexOf(viewDesc);
+            siblings.splice(index, 1);
+        }
+        setDOM(null);
+        setContentDOM(null);
+        setNodeDOM(null);
+    });
+    useClientLayoutEffect(()=>{
+        viewDescRef.current = create();
+        return ()=>{
+            destroy();
+        };
+    }, [
+        create,
+        destroy
+    ]);
+    useClientLayoutEffect(()=>{
+        if (!update()) {
+            destroy();
+            viewDescRef.current = create();
+        }
+        const viewDesc = viewDescRef.current;
+        if (!viewDesc) {
+            return;
+        }
+        if (view.dom === viewDesc.dom && view instanceof ReactEditorView) {
+            view.docView = viewDesc;
+        }
+        const parent = parentRef.current;
+        const siblings = siblingsRef.current;
+        const children = childrenRef.current;
+        viewDesc.parent = parent;
+        if (!siblings.includes(viewDesc)) {
+            siblings.push(viewDesc);
+        }
+        siblings.sort(sortViewDescs);
+        for (const child of children){
+            child.parent = viewDesc;
+            // Because TextNodeViews can't locate the DOM nodes
+            // for compositions, we need to override them here
+            if (child instanceof CompositionViewDesc) {
+                const compositionTopDOM = viewDesc?.contentDOM?.firstChild;
+                if (!compositionTopDOM) throw new Error(`Started a composition but couldn't find the text node it belongs to.`);
+                let textDOM = compositionTopDOM;
+                while(textDOM.firstChild){
+                    textDOM = textDOM.firstChild;
+                }
+                if (!textDOM || !(textDOM instanceof Text)) throw new Error(`Started a composition but couldn't find the text node it belongs to.`);
+                child.dom = compositionTopDOM;
+                child.textDOM = textDOM;
+                child.text = textDOM.data;
+                child.textDOM.pmViewDesc = child;
+                // It should not be possible to be in a composition because one could
+                // not start between the renders that switch the view type.
+                view.input.compositionNodes.push(child);
+            }
+        }
+    });
+    const childContextValue = useMemo(()=>({
+            parentRef: viewDescRef,
+            siblingsRef: childrenRef
+        }), [
+        childrenRef,
+        viewDescRef
+    ]);
+    return {
+        childContextValue,
+        dom,
+        contentDOM,
+        nodeDOM,
+        ref
+    };
+}

package/dist/esm/tiptap/TiptapNodeView.js

@@ -0,0 +1,22 @@
+import { NodeView } from "@tiptap/core";
+/**
+ * Subclass of Tiptap's NodeView to be used in tiptapNodeView.
+ *
+ * Allows us to pass in an existing dom and contentODM from React ProseMirror's
+ * ViewDesc, so that we can call Tiptap's default stopEvent and ignoreMutation
+ * methods
+ */ export class ReactProseMirrorNodeView extends NodeView {
+    _dom;
+    _contentDOM;
+    constructor(component, props, dom, contentDOM, options){
+        super(component, props, options);
+        this._dom = dom;
+        this._contentDOM = contentDOM;
+    }
+    get dom() {
+        return this._dom;
+    }
+    get contentDOM() {
+        return this._contentDOM;
+    }
+}

package/dist/esm/tiptap/tiptapNodeView.js

@@ -1,12 +1,13 @@
 import { getAttributesFromExtensions, getRenderedAttributes } from "@tiptap/core";
 import { ReactNodeViewContext, useCurrentEditor } from "@tiptap/react";
 import cx from "classnames";
-import React, { forwardRef, memo, useMemo } from "react";
+import React, { forwardRef, memo, useMemo, useRef } from "react";
 import { useEditorEventCallback } from "../hooks/useEditorEventCallback.js";
 import { useIgnoreMutation } from "../hooks/useIgnoreMutation.js";
 import { useIsNodeSelected } from "../hooks/useIsNodeSelected.js";
 import { useStopEvent } from "../hooks/useStopEvent.js";
 import { htmlAttrsToReactProps } from "../props.js";
+import { useMergedDOMRefs } from "../refs.js";
 import { ReactProseMirrorNodeView } from "./ReactProseMirrorNodeView.js";
 import { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallback.js";
 /**
@@ -43,6 +44,7 @@ import { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallba
         const extensionManager = editor?.extensionManager ?? null;
         const extensions = extensionManager?.extensions ?? null;
         const selected = useIsNodeSelected();
+        const isDraggingRef = useRef(false);
         const htmlAttributes = useMemo(()=>{
             if (!extensions) return {};
             const attributes = getAttributesFromExtensions(extensions);
@@ -73,7 +75,10 @@ import { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallba
                 node,
                 view: editor.view
             }, this.dom, this.contentDOM);
-            return nodeView.stopEvent(event) ?? false;
+            nodeView.isDragging = isDraggingRef.current;
+            const result = nodeView.stopEvent(event) ?? false;
+            isDraggingRef.current = nodeView.isDragging;
+            return result;
         });
         useIgnoreMutation(function(_, mutation) {
             if (ignoreMutation) {
@@ -152,12 +157,10 @@ import { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallba
             contentDOMRef,
             node.type.name
         ]);
+        const innerRef = useRef(null);
+        const finalRef = useMergedDOMRefs(ref, innerRef);
         const onDragStart = useTiptapEditorEventCallback((editor, event)=>{
-            // TODO: We should probably just merge this with our own
-            // ref, I'm being lazy since we are providing this
-            // ref in the first place (in ReactNodeView), so we know
-            // it's an object
-            const dom = typeof ref === "object" ? ref?.current : null;
+            const dom = innerRef.current;
             if (!dom) return;
             const viewDesc = dom.pmViewDesc;
             if (!viewDesc) return;
@@ -184,7 +187,7 @@ import { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallba
         return /*#__PURE__*/ React.createElement(ReactNodeViewContext.Provider, {
             value: nodeViewContext
         }, /*#__PURE__*/ React.createElement(OuterTag, {
-            ref: ref,
+            ref: finalRef,
             ...props,
             ...htmlProps,
             className: finalClassName