@handlewithcare/react-prosemirror 2.5.0 → 2.5.2

package/dist/esm/ReactEditorView.js

@@ -33,9 +33,6 @@ function changedNodeViews(a, b) {
     nextProps;
     prevState;
     constructor(place, props){
-        // By the time the editor view mounts this should exist.
-        // We assume it is not possible to set the mount point otherwise.
-        const docView = place.mount.pmViewDesc;
         // Prevent the base class from destroying the React-managed nodes.
         // Restore them below after invoking the base class constructor.
         const reactContent = [
@@ -71,8 +68,11 @@ function changedNodeViews(a, b) {
         this.nextProps = props;
         this.state = props.state;
         this.nodeViews = buildNodeViews(this);
-        this.docView = docView;
-        this.dom.pmViewDesc = docView;
+        // Destroy the document view description that the base class makes.
+        // A React document view will assign itself to this attribute later.
+        this.docView.destroy();
+        // @ts-expect-error this violates the typing but class does it, too.
+        this.docView = null;
     }
     get props() {
         return this.nextProps;
@@ -87,7 +87,7 @@ function changedNodeViews(a, b) {
         const prevProps = this.nextProps;
         this.nextProps = props;
         this.state = props.state;
-        if (prevProps.state.plugins !== props.state.plugins || prevProps.plugins !== props.plugins) {
+        if (prevProps.state.plugins !== props.state.plugins || prevProps.plugins !== props.plugins || prevProps.nodeViews !== props.nodeViews) {
             const nodeViews = buildNodeViews(this);
             if (changedNodeViews(this.nodeViews, nodeViews)) {
                 this.nodeViews = nodeViews;

package/dist/esm/components/ChildNodeViews.js

@@ -333,18 +333,18 @@ export const ChildNodeViews = /*#__PURE__*/ memo(function ChildNodeViews(param)
         /\n$/.test(lastChild.node.text)) {
             children.push({
                 type: "hack",
-                component: TrailingHackView,
+                component: SeparatorHackView,
                 marks: [],
                 offset: lastChild?.offset ?? 0,
-                index: (lastChild?.index ?? 0) + 1,
-                key: "trailing-hack-br"
+                index: (lastChild?.index ?? 0) + 2,
+                key: "trailing-hack-img"
             }, {
                 type: "hack",
-                component: SeparatorHackView,
+                component: TrailingHackView,
                 marks: [],
                 offset: lastChild?.offset ?? 0,
-                index: (lastChild?.index ?? 0) + 2,
-                key: "trailing-hack-img"
+                index: (lastChild?.index ?? 0) + 1,
+                key: "trailing-hack-br"
             });
         }
     }

package/dist/esm/components/CustomNodeView.js

@@ -1,137 +1,93 @@
-import React, { cloneElement, createElement, memo, useContext, useMemo, useRef } from "react";
+import { DOMSerializer } from "prosemirror-model";
+import React, { cloneElement, createElement, memo, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
-import { EditorContext } from "../contexts/EditorContext.js";
-import { useClientLayoutEffect } from "../hooks/useClientLayoutEffect.js";
-import { useClientOnly } from "../hooks/useClientOnly.js";
-import { useForceUpdate } from "../hooks/useForceUpdate.js";
 import { useNodeViewDescriptor } from "../hooks/useNodeViewDescriptor.js";
 import { ChildNodeViews, wrapInDeco } from "./ChildNodeViews.js";
 export const CustomNodeView = /*#__PURE__*/ memo(function CustomNodeView(param) {
-    let { customNodeView, node, getPos, innerDeco, outerDeco } = param;
-    const editor = useContext(EditorContext);
-    // Only ReactEditorView supports custom node views.
-    const view = editor.view;
-    const domRef = useRef(null);
-    const nodeDomRef = useRef(null);
-    const contentDomRef = useRef(null);
-    const nodeRef = useRef(node);
-    nodeRef.current = node;
-    const outerDecoRef = useRef(outerDeco);
-    outerDecoRef.current = outerDeco;
-    const innerDecoRef = useRef(innerDeco);
-    innerDecoRef.current = innerDeco;
-    const customNodeViewRootRef = useRef(null);
-    const customNodeViewRef = useRef(null);
-    const forceUpdate = useForceUpdate();
-    const isOnClient = useClientOnly();
-    // In Strict/Concurrent mode, layout effects can be destroyed/re-run
-    // independently of renders. We need to ensure that if the
-    // destructor that destroys the node view is called, we then recreate
-    // the node view when the layout effect is re-run.
-    useClientLayoutEffect(()=>{
-        if (!customNodeViewRef.current) {
-            customNodeViewRef.current = customNodeView(nodeRef.current, view, getPos, outerDecoRef.current, innerDecoRef.current);
-            if (customNodeViewRef.current.stopEvent) {
-                setStopEvent(customNodeViewRef.current.stopEvent.bind(customNodeViewRef.current));
-            }
-            if (customNodeViewRef.current.selectNode) {
-                setSelectNode(customNodeViewRef.current.selectNode.bind(customNodeViewRef.current), customNodeViewRef.current.deselectNode?.bind(customNodeViewRef.current) ?? (()=>{}));
-            }
-            if (customNodeViewRef.current.ignoreMutation) {
-                setIgnoreMutation(customNodeViewRef.current.ignoreMutation.bind(customNodeViewRef.current));
-            }
-            // If we've reconstructed the nodeview, then we need to
-            // recreate the portal into its contentDOM, which happens
-            // during the render. So we need to trigger a re-render!
-            forceUpdate();
-        }
-        if (!customNodeViewRootRef.current) return;
-        const { dom } = customNodeViewRef.current;
-        if (customNodeViewRootRef.current.firstChild === dom) {
-            return;
-        }
-        nodeDomRef.current = customNodeViewRootRef.current;
-        customNodeViewRootRef.current.appendChild(dom);
-        const nodeView = customNodeViewRef.current;
-        return ()=>{
-            nodeView.destroy?.();
-            customNodeViewRef.current = null;
-        };
-    // setStopEvent, setSelectNodee, and setIgnoreMutation are all stable
-    // functions and don't need to be added to the dependencies. They also
-    // can't be, because they come from useNodeViewDescriptor, which
-    // _has_ to be called after this hook, so that the effects run
-    // in the correct order
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        customNodeView,
-        getPos,
-        view
-    ]);
-    useClientLayoutEffect(()=>{
-        if (!customNodeView || !customNodeViewRef.current) return;
-        const { destroy, update } = customNodeViewRef.current;
-        const updated = update?.call(customNodeViewRef.current, node, outerDeco, innerDeco) ?? true;
-        if (updated) return;
-        destroy?.call(customNodeViewRef.current);
-        if (!customNodeViewRootRef.current) return;
-        customNodeViewRef.current = customNodeView(nodeRef.current, view, getPos, outerDecoRef.current, innerDecoRef.current);
-        const { dom } = customNodeViewRef.current;
-        nodeDomRef.current = customNodeViewRootRef.current;
-        customNodeViewRootRef.current.appendChild(dom);
-    }, [
-        customNodeView,
-        view,
-        innerDeco,
+    let { constructor, node, getPos, innerDeco, outerDeco } = param;
+    const ref = useRef(null);
+    const innerRef = useRef(null);
+    const [selected, setSelected] = useState(false);
+    const nodeProps = useMemo(()=>({
+            node,
+            getPos,
+            decorations: outerDeco,
+            innerDecorations: innerDeco
+        }), [
         node,
+        getPos,
         outerDeco,
-        getPos
-    ]);
-    const { childDescriptors, nodeViewDescRef, setStopEvent, setSelectNode, setIgnoreMutation } = useNodeViewDescriptor(node, getPos, domRef, nodeDomRef, innerDeco, outerDeco, contentDomRef);
-    const childContextValue = useMemo(()=>({
-            parentRef: nodeViewDescRef,
-            siblingsRef: childDescriptors
-        }), [
-        childDescriptors,
-        nodeViewDescRef
+        innerDeco
     ]);
-    if (!isOnClient) return null;
-    // In order to render the correct element with the correct
-    // props below, we have to call the customNodeView in the
-    // render function here. We only do this once, and the
-    // results are stored in a ref but not actually appended
-    // to the DOM until a client effect
-    if (!customNodeViewRef.current) {
-        customNodeViewRef.current = customNodeView(nodeRef.current, view, getPos, outerDecoRef.current, innerDecoRef.current);
-        if (customNodeViewRef.current.stopEvent) {
-            setStopEvent(customNodeViewRef.current.stopEvent.bind(customNodeViewRef.current));
+    const createNodeView = function() {
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
         }
-        if (customNodeViewRef.current.selectNode) {
-            setSelectNode(customNodeViewRef.current.selectNode.bind(customNodeViewRef.current), customNodeViewRef.current.deselectNode?.bind(customNodeViewRef.current) ?? (()=>{}));
+        const nodeView = constructor(...args);
+        if (!nodeView || !nodeView.dom) {
+            const spec = node.type.spec.toDOM?.(node);
+            if (!spec) {
+                throw new Error(`Node spec for ${node.type.name} is missing toDOM`);
+            }
+            return DOMSerializer.renderSpec(document, spec, null);
         }
-        if (customNodeViewRef.current.ignoreMutation) {
-            setIgnoreMutation(customNodeViewRef.current.ignoreMutation.bind(customNodeViewRef.current));
+        return nodeView;
+    };
+    const { childContextValue, contentDOM } = useNodeViewDescriptor(ref, function() {
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
         }
-    }
-    const { contentDOM } = customNodeViewRef.current;
-    contentDomRef.current = contentDOM ?? null;
-    const element = /*#__PURE__*/ createElement(node.isInline ? "span" : "div", {
-        ref: customNodeViewRootRef,
-        contentEditable: !!contentDOM,
-        suppressContentEditableWarning: true
-    }, contentDOM && /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(ChildNodeViews, {
+        setSelected(false);
+        const nodeView = createNodeView(...args);
+        const contentDOM = nodeView.contentDOM;
+        const nodeDOM = nodeView.dom;
+        const wrapperDOM = innerRef.current ?? ref.current;
+        wrapperDOM.appendChild(nodeDOM);
+        if (!contentDOM && nodeDOM instanceof HTMLElement && nodeDOM.tagName !== "BR") {
+            if (!nodeDOM.hasAttribute("contenteditable")) {
+                nodeDOM.contentEditable = "false";
+            }
+        }
+        return {
+            ...nodeView,
+            destroy () {
+                if (nodeView.destroy) {
+                    nodeView.destroy();
+                }
+                wrapperDOM.removeChild(nodeDOM);
+            },
+            selectNode: nodeView.selectNode?.bind(nodeView) ?? (()=>{
+                if (nodeDOM instanceof HTMLElement) {
+                    nodeDOM.classList.add("ProseMirror-selectednode");
+                }
+                setSelected(true);
+            }),
+            deselectNode: nodeView.deselectNode?.bind(nodeView) ?? (()=>{
+                if (nodeDOM instanceof HTMLElement) {
+                    nodeDOM.classList.remove("ProseMirror-selectednode");
+                }
+                setSelected(false);
+            }),
+            stopEvent: nodeView.stopEvent?.bind(nodeView),
+            ignoreMutation: nodeView.ignoreMutation?.bind(nodeView)
+        };
+    }, nodeProps);
+    const children = !node.isLeaf && contentDOM ? /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
+        value: childContextValue
+    }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
         getPos: getPos,
         node: node,
         innerDecorations: innerDeco
-    }), contentDOM));
-    const decoratedElement = /*#__PURE__*/ cloneElement(outerDeco.reduce(wrapInDeco, element), // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    outerDeco.some((d)=>d.type.attrs.nodeName) ? {
-        ref: domRef
-    } : // we've already passed the domRef to the NodeView component
-    // as a prop
-    undefined);
-    return /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
-        value: childContextValue
-    }, decoratedElement);
+    })), contentDOM) : null;
+    const innerElement = /*#__PURE__*/ createElement(node.isInline ? "span" : "div", {
+        ref: innerRef
+    }, children);
+    const props = {
+        ...selected || node.type.spec.draggable ? {
+            draggable: true
+        } : null,
+        ref
+    };
+    return /*#__PURE__*/ cloneElement(outerDeco.reduce(wrapInDeco, innerElement), props);
 });

package/dist/esm/components/DefaultNodeView.js

@@ -0,0 +1,16 @@
+import React, { forwardRef, useMemo } from "react";
+import { OutputSpec } from "./OutputSpec.js";
+export const DefaultNodeView = /*#__PURE__*/ forwardRef(function DefaultNodeView(param, ref) {
+    let { nodeProps: { node }, children, ...props } = param;
+    const spec = useMemo(()=>node.type.spec.toDOM?.(node), [
+        node
+    ]);
+    if (!spec) {
+        throw new Error(`Node spec for ${node.type.name} is missing toDOM`);
+    }
+    return /*#__PURE__*/ React.createElement(OutputSpec, {
+        ...props,
+        outputSpec: spec,
+        ref: ref
+    }, children);
+});

package/dist/esm/components/DocNodeView.js

@@ -1,44 +1,45 @@
-// TODO: I must be missing something, but I do not know why
-// this linting rule is only broken in this file
-/* eslint-disable react/prop-types */ import React, { cloneElement, createElement, forwardRef, memo, useImperativeHandle, useMemo, useRef } from "react";
+import React, { cloneElement, createElement, forwardRef, memo, useImperativeHandle, useMemo, useRef } from "react";
 import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
 import { useNodeViewDescriptor } from "../hooks/useNodeViewDescriptor.js";
 import { ChildNodeViews, wrapInDeco } from "./ChildNodeViews.js";
-function getPos() {
-    return -1;
-}
 export const DocNodeView = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function DocNodeView(param, ref) {
-    let { className, node, innerDeco, outerDeco, as, ...elementProps } = param;
+    let { as, node, getPos, decorations, innerDecorations, setMount, ...elementProps } = param;
     const innerRef = useRef(null);
-    useImperativeHandle(ref, ()=>{
-        return innerRef.current;
-    }, []);
-    const { childDescriptors, nodeViewDescRef } = useNodeViewDescriptor(node, getPos, innerRef, innerRef, innerDeco, outerDeco, innerRef);
-    const childContextValue = useMemo(()=>({
-            parentRef: nodeViewDescRef,
-            siblingsRef: childDescriptors
+    useImperativeHandle(ref, ()=>innerRef.current);
+    useImperativeHandle(setMount, ()=>innerRef.current);
+    const nodeProps = useMemo(()=>({
+            node,
+            getPos,
+            decorations,
+            innerDecorations
         }), [
-        childDescriptors,
-        nodeViewDescRef
+        node,
+        getPos,
+        decorations,
+        innerDecorations
     ]);
-    const props = {
-        ...elementProps,
-        ref: innerRef,
-        className,
-        suppressContentEditableWarning: true
-    };
-    const element = as ? /*#__PURE__*/ cloneElement(as, props, /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
-        value: childContextValue
-    }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
-        getPos: getPos,
-        node: node,
-        innerDecorations: innerDeco
-    }))) : /*#__PURE__*/ createElement("div", props, /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
+    const { childContextValue } = useNodeViewDescriptor(innerRef, ()=>{
+        const dom = innerRef.current;
+        return {
+            dom,
+            contentDOM: dom,
+            update () {
+                return true;
+            }
+        };
+    }, nodeProps);
+    const children = /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
         value: childContextValue
     }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
         getPos: getPos,
         node: node,
-        innerDecorations: innerDeco
-    })));
-    return outerDeco.reduce(wrapInDeco, element);
+        innerDecorations: innerDecorations
+    }));
+    const props = {
+        ...elementProps,
+        suppressContentEditableWarning: true,
+        ref: innerRef
+    };
+    const element = as ? /*#__PURE__*/ cloneElement(as, props, children) : /*#__PURE__*/ createElement("div", props, children);
+    return nodeProps.decorations.reduce(wrapInDeco, element);
 }));

package/dist/esm/components/NodeView.js

@@ -1,25 +1,35 @@
-import React, { memo, useContext } from "react";
-import { EditorContext } from "../contexts/EditorContext.js";
+import React, { memo, useContext, useMemo } from "react";
+import { NodeViewContext } from "../contexts/NodeViewContext.js";
 import { CustomNodeView } from "./CustomNodeView.js";
+import { DefaultNodeView } from "./DefaultNodeView.js";
 import { ReactNodeView } from "./ReactNodeView.js";
-export const NodeView = /*#__PURE__*/ memo(function NodeView(param) {
-    let { outerDeco, getPos, node, innerDeco, ...props } = param;
-    const { view } = useContext(EditorContext);
-    const customNodeView = view.nodeViews[node.type.name];
-    if (customNodeView) {
-        return /*#__PURE__*/ React.createElement(CustomNodeView, {
-            customNodeView: customNodeView,
-            node: node,
-            innerDeco: innerDeco,
-            outerDeco: outerDeco,
-            getPos: getPos
-        });
-    }
-    return /*#__PURE__*/ React.createElement(ReactNodeView, {
-        node: node,
-        innerDeco: innerDeco,
-        outerDeco: outerDeco,
-        getPos: getPos,
-        ...props
-    });
+export const NodeView = /*#__PURE__*/ memo(function NodeView(props) {
+    const { components, constructors } = useContext(NodeViewContext);
+    const component = components[props.node.type.name] ?? DefaultNodeView;
+    const constructor = constructors[props.node.type.name];
+    // Construct a wrapper component so that the node view remounts when either
+    // its component or constructor changes. A React node view would remount if
+    // its underlying component changed without this wrapper, but a custom node
+    // view otherwise uses the same React components for all custom node views.
+    const Component = useMemo(()=>{
+        if (constructor) {
+            return function NodeView(props) {
+                return /*#__PURE__*/ React.createElement(CustomNodeView, {
+                    constructor: constructor,
+                    ...props
+                });
+            };
+        } else {
+            return function NodeView(props) {
+                return /*#__PURE__*/ React.createElement(ReactNodeView, {
+                    component: component,
+                    ...props
+                });
+            };
+        }
+    }, [
+        constructor,
+        component
+    ]);
+    return /*#__PURE__*/ React.createElement(Component, props);
 });

package/dist/esm/components/ProseMirror.js

@@ -7,6 +7,9 @@ import { viewDecorations } from "../decorations/viewDecorations.js";
 import { useEditor } from "../hooks/useEditor.js";
 import { LayoutGroup } from "./LayoutGroup.js";
 import { DocNodeViewContext } from "./ProseMirrorDoc.js";
+function getPos() {
+    return -1;
+}
 function ProseMirrorInner(param) {
     let { className, children, nodeViews, customNodeViews, ...props } = param;
     const [mount, setMount] = useState(null);
@@ -14,25 +17,33 @@ function ProseMirrorInner(param) {
         ...props,
         nodeViews: customNodeViews
     });
-    const nodeViewContextValue = useMemo(()=>({
-            nodeViews: nodeViews ?? {}
-        }), [
+    const nodeViewConstructors = editor.view.nodeViews;
+    const nodeViewContextValue = useMemo(()=>{
+        return {
+            components: {
+                ...nodeViews
+            },
+            constructors: nodeViewConstructors
+        };
+    }, [
+        nodeViewConstructors,
         nodeViews
     ]);
     const node = state.doc;
-    const innerDeco = viewDecorations(editor.view, editor.cursorWrapper);
-    const outerDeco = computeDocDeco(editor.view);
+    const decorations = computeDocDeco(editor.view);
+    const innerDecorations = viewDecorations(editor.view, editor.cursorWrapper);
     const docNodeViewContextValue = useMemo(()=>({
             className,
             setMount,
             node,
-            innerDeco,
-            outerDeco
+            getPos,
+            decorations,
+            innerDecorations
         }), [
         className,
         node,
-        innerDeco,
-        outerDeco
+        decorations,
+        innerDecorations
     ]);
     return /*#__PURE__*/ React.createElement(EditorContext.Provider, {
         value: editor

package/dist/esm/components/ProseMirrorDoc.js

@@ -1,34 +1,13 @@
-import React, { createContext, forwardRef, useContext, useImperativeHandle, useMemo, useRef } from "react";
-import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import React, { createContext, forwardRef, useContext } from "react";
 import { DocNodeView } from "./DocNodeView.js";
 export const DocNodeViewContext = /*#__PURE__*/ createContext(null);
-function ProseMirrorDoc(param, ref) {
+export const ProseMirrorDoc = /*#__PURE__*/ forwardRef(function ProseMirrorDoc(param, ref) {
     let { as, ...props } = param;
-    const childDescriptors = useRef([]);
-    const innerRef = useRef(null);
-    const { setMount, ...docProps } = useContext(DocNodeViewContext);
-    const viewDescRef = useRef(undefined);
-    useImperativeHandle(ref, ()=>{
-        return innerRef.current;
-    }, []);
-    const childContextValue = useMemo(()=>({
-            parentRef: viewDescRef,
-            siblingsRef: childDescriptors
-        }), [
-        childDescriptors,
-        viewDescRef
-    ]);
-    return /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
-        value: childContextValue
-    }, /*#__PURE__*/ React.createElement(DocNodeView, {
-        ref: (el)=>{
-            innerRef.current = el;
-            setMount(el);
-        },
+    const docProps = useContext(DocNodeViewContext);
+    return /*#__PURE__*/ React.createElement(DocNodeView, {
+        ref: ref,
         ...props,
         ...docProps,
         as: as
-    }));
-}
-const ForwardedProseMirrorDoc = /*#__PURE__*/ forwardRef(ProseMirrorDoc);
-export { ForwardedProseMirrorDoc as ProseMirrorDoc };
+    });
+});