@handlewithcare/react-prosemirror 2.1.0 → 2.2.0

package/dist/esm/components/CustomNodeView.js

@@ -1,12 +1,79 @@
-import React, { createElement, useContext } from "react";
+import React, { cloneElement, createElement, memo, useContext, useLayoutEffect, useMemo, useRef } from "react";
 import { createPortal } from "react-dom";
+import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
 import { EditorContext } from "../contexts/EditorContext.js";
 import { useClientOnly } from "../hooks/useClientOnly.js";
-import { ChildNodeViews } from "./ChildNodeViews.js";
-export function CustomNodeView(param) {
-    let { contentDomRef, customNodeViewRef, customNodeViewRootRef, customNodeView, initialNode, node, getPos, initialOuterDeco, initialInnerDeco, innerDeco } = param;
+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 { view } = useContext(EditorContext);
+    const domRef = useRef(null);
+    const nodeDomRef = useRef(null);
+    const contentDomRef = useRef(null);
+    const getPosFunc = useRef(()=>getPos.current()).current;
+    // this is ill-conceived; should revisit
+    const initialNode = useRef(node);
+    const initialOuterDeco = useRef(outerDeco);
+    const initialInnerDeco = useRef(innerDeco);
+    const customNodeViewRootRef = useRef(null);
+    const customNodeViewRef = useRef(null);
     const shouldRender = useClientOnly();
+    useLayoutEffect(()=>{
+        if (!customNodeViewRef.current || !customNodeViewRootRef.current || !shouldRender) return;
+        const { dom } = customNodeViewRef.current;
+        nodeDomRef.current = customNodeViewRootRef.current;
+        customNodeViewRootRef.current.appendChild(dom);
+        return ()=>{
+            customNodeViewRef.current?.destroy?.();
+        };
+    }, [
+        customNodeViewRef,
+        customNodeViewRootRef,
+        nodeDomRef,
+        shouldRender
+    ]);
+    useLayoutEffect(()=>{
+        if (!customNodeView || !customNodeViewRef.current || !shouldRender) 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;
+        initialNode.current = node;
+        initialOuterDeco.current = outerDeco;
+        initialInnerDeco.current = innerDeco;
+        customNodeViewRef.current = customNodeView(initialNode.current, // customNodeView will only be set if view is set, and we can only reach
+        // this line if customNodeView is set
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        view, getPosFunc, initialOuterDeco.current, initialInnerDeco.current);
+        const { dom } = customNodeViewRef.current;
+        nodeDomRef.current = customNodeViewRootRef.current;
+        customNodeViewRootRef.current.appendChild(dom);
+    }, [
+        customNodeView,
+        view,
+        innerDeco,
+        node,
+        outerDeco,
+        getPos,
+        customNodeViewRef,
+        customNodeViewRootRef,
+        initialNode,
+        initialOuterDeco,
+        initialInnerDeco,
+        nodeDomRef,
+        shouldRender,
+        getPosFunc
+    ]);
+    const { childDescriptors, nodeViewDescRef } = useNodeViewDescriptor(node, ()=>getPos.current(), domRef, nodeDomRef, innerDeco, outerDeco, undefined, contentDomRef);
+    const childContextValue = useMemo(()=>({
+            parentRef: nodeViewDescRef,
+            siblingsRef: childDescriptors
+        }), [
+        childDescriptors,
+        nodeViewDescRef
+    ]);
     if (!shouldRender) return null;
     if (!customNodeViewRef.current) {
         customNodeViewRef.current = customNodeView(initialNode.current, // customNodeView will only be set if view is set, and we can only reach
@@ -16,7 +83,7 @@ export function CustomNodeView(param) {
     }
     const { contentDOM } = customNodeViewRef.current;
     contentDomRef.current = contentDOM ?? null;
-    return /*#__PURE__*/ createElement(node.isInline ? "span" : "div", {
+    const element = /*#__PURE__*/ createElement(node.isInline ? "span" : "div", {
         ref: customNodeViewRootRef,
         contentEditable: !!contentDOM,
         suppressContentEditableWarning: true
@@ -25,4 +92,13 @@ export function CustomNodeView(param) {
         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);
+});

package/dist/esm/components/NodeView.js

@@ -1,145 +1,25 @@
-import React, { cloneElement, memo, useContext, useLayoutEffect, useMemo, useRef } from "react";
-import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import React, { memo, useContext } from "react";
 import { EditorContext } from "../contexts/EditorContext.js";
-import { NodeViewContext } from "../contexts/NodeViewContext.js";
-import { SelectNodeContext } from "../contexts/SelectNodeContext.js";
-import { StopEventContext } from "../contexts/StopEventContext.js";
-import { useNodeViewDescriptor } from "../hooks/useNodeViewDescriptor.js";
-import { ChildNodeViews, wrapInDeco } from "./ChildNodeViews.js";
 import { CustomNodeView } from "./CustomNodeView.js";
-import { OutputSpec } from "./OutputSpec.js";
+import { ReactNodeView } from "./ReactNodeView.js";
 export const NodeView = /*#__PURE__*/ memo(function NodeView(param) {
     let { outerDeco, getPos, node, innerDeco, ...props } = param;
-    const domRef = useRef(null);
-    const nodeDomRef = useRef(null);
-    const contentDomRef = useRef(null);
-    const getPosFunc = useRef(()=>getPos.current()).current;
-    // this is ill-conceived; should revisit
-    const initialNode = useRef(node);
-    const initialOuterDeco = useRef(outerDeco);
-    const initialInnerDeco = useRef(innerDeco);
-    const customNodeViewRootRef = useRef(null);
-    const customNodeViewRef = useRef(null);
-    // const state = useEditorState();
-    const { nodeViews } = useContext(NodeViewContext);
     const { view } = useContext(EditorContext);
-    let element = null;
-    const Component = nodeViews[node.type.name];
-    const outputSpec = useMemo(()=>node.type.spec.toDOM?.(node), [
-        node
-    ]);
-    // TODO: Would be great to pull all of the custom node view stuff into
-    // a hook
     const customNodeView = view?.someProp("nodeViews", (nodeViews)=>nodeViews?.[node.type.name]);
-    useLayoutEffect(()=>{
-        if (!customNodeViewRef.current || !customNodeViewRootRef.current) return;
-        const { dom } = customNodeViewRef.current;
-        nodeDomRef.current = customNodeViewRootRef.current;
-        customNodeViewRootRef.current.appendChild(dom);
-        return ()=>{
-            customNodeViewRef.current?.destroy?.();
-        };
-    }, []);
-    useLayoutEffect(()=>{
-        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;
-        initialNode.current = node;
-        initialOuterDeco.current = outerDeco;
-        initialInnerDeco.current = innerDeco;
-        customNodeViewRef.current = customNodeView(initialNode.current, // customNodeView will only be set if view is set, and we can only reach
-        // this line if customNodeView is set
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        view, ()=>getPos.current(), initialOuterDeco.current, initialInnerDeco.current);
-        const { dom } = customNodeViewRef.current;
-        nodeDomRef.current = customNodeViewRootRef.current;
-        customNodeViewRootRef.current.appendChild(dom);
-    }, [
-        customNodeView,
-        view,
-        innerDeco,
-        node,
-        outerDeco,
-        getPos
-    ]);
-    const { hasContentDOM, childDescriptors, setStopEvent, setSelectNode, nodeViewDescRef } = useNodeViewDescriptor(node, ()=>getPos.current(), domRef, nodeDomRef, innerDeco, outerDeco, undefined, contentDomRef);
-    const finalProps = {
-        ...props,
-        ...!hasContentDOM && {
-            contentEditable: false
-        }
-    };
-    const nodeProps = useMemo(()=>({
-            node: node,
-            getPos: getPosFunc,
-            decorations: outerDeco,
-            innerDecorations: innerDeco
-        }), [
-        getPosFunc,
-        innerDeco,
-        node,
-        outerDeco
-    ]);
-    if (Component) {
-        element = /*#__PURE__*/ React.createElement(Component, {
-            ...finalProps,
-            ref: nodeDomRef,
-            nodeProps: nodeProps
-        }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
-            getPos: getPos,
-            node: node,
-            innerDecorations: innerDeco
-        }));
-    } else if (customNodeView) {
-        element = /*#__PURE__*/ React.createElement(CustomNodeView, {
-            contentDomRef: contentDomRef,
+    if (customNodeView) {
+        return /*#__PURE__*/ React.createElement(CustomNodeView, {
             customNodeView: customNodeView,
-            customNodeViewRef: customNodeViewRef,
-            customNodeViewRootRef: customNodeViewRootRef,
-            initialInnerDeco: initialInnerDeco,
-            initialNode: initialNode,
-            initialOuterDeco: initialOuterDeco,
             node: node,
-            getPos: getPos,
-            innerDeco: innerDeco
+            innerDeco: innerDeco,
+            outerDeco: outerDeco,
+            getPos: getPos
         });
-    } else {
-        if (outputSpec) {
-            element = /*#__PURE__*/ React.createElement(OutputSpec, {
-                ...finalProps,
-                ref: nodeDomRef,
-                outputSpec: outputSpec
-            }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
-                getPos: getPos,
-                node: node,
-                innerDecorations: innerDeco
-            }));
-        }
-    }
-    if (!element) {
-        throw new Error(`Node spec for ${node.type.name} is missing toDOM`);
     }
-    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);
-    const childContextValue = useMemo(()=>({
-            parentRef: nodeViewDescRef,
-            siblingsRef: childDescriptors
-        }), [
-        childDescriptors,
-        nodeViewDescRef
-    ]);
-    return /*#__PURE__*/ React.createElement(SelectNodeContext.Provider, {
-        value: setSelectNode
-    }, /*#__PURE__*/ React.createElement(StopEventContext.Provider, {
-        value: setStopEvent
-    }, /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
-        value: childContextValue
-    }, decoratedElement)));
+    return /*#__PURE__*/ React.createElement(ReactNodeView, {
+        node: node,
+        innerDeco: innerDeco,
+        outerDeco: outerDeco,
+        getPos: getPos,
+        ...props
+    });
 });

package/dist/esm/components/OutputSpec.js

@@ -6,7 +6,7 @@ const ForwardedOutputSpec = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function
         return /*#__PURE__*/ React.createElement(React.Fragment, null, outputSpec);
     }
     if (!Array.isArray(outputSpec)) {
-        throw new Error("@nytimes/react-prosemirror only supports strings and arrays in toDOM");
+        throw new Error("@handlewithcare/react-prosemirror only supports strings and arrays in toDOM");
     }
     const tagSpec = outputSpec[0];
     const tagName = tagSpec.replace(" ", ":");

package/dist/esm/components/ReactNodeView.js

@@ -0,0 +1,85 @@
+import React, { cloneElement, memo, useContext, useMemo, useRef } from "react";
+import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { NodeViewContext } from "../contexts/NodeViewContext.js";
+import { SelectNodeContext } from "../contexts/SelectNodeContext.js";
+import { StopEventContext } from "../contexts/StopEventContext.js";
+import { useNodeViewDescriptor } from "../hooks/useNodeViewDescriptor.js";
+import { ChildNodeViews, wrapInDeco } from "./ChildNodeViews.js";
+import { OutputSpec } from "./OutputSpec.js";
+export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
+    let { outerDeco, getPos, node, innerDeco, ...props } = param;
+    const domRef = useRef(null);
+    const nodeDomRef = useRef(null);
+    const contentDomRef = useRef(null);
+    const getPosFunc = useRef(()=>getPos.current()).current;
+    const { nodeViews } = useContext(NodeViewContext);
+    let element = null;
+    const Component = nodeViews[node.type.name];
+    const outputSpec = useMemo(()=>node.type.spec.toDOM?.(node), [
+        node
+    ]);
+    const { hasContentDOM, childDescriptors, setStopEvent, setSelectNode, nodeViewDescRef } = useNodeViewDescriptor(node, ()=>getPos.current(), domRef, nodeDomRef, innerDeco, outerDeco, undefined, contentDomRef);
+    const finalProps = {
+        ...props,
+        ...!hasContentDOM && {
+            contentEditable: false
+        }
+    };
+    const nodeProps = useMemo(()=>({
+            node: node,
+            getPos: getPosFunc,
+            decorations: outerDeco,
+            innerDecorations: innerDeco
+        }), [
+        getPosFunc,
+        innerDeco,
+        node,
+        outerDeco
+    ]);
+    if (Component) {
+        element = /*#__PURE__*/ React.createElement(Component, {
+            ...finalProps,
+            ref: nodeDomRef,
+            nodeProps: nodeProps
+        }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
+            getPos: getPos,
+            node: node,
+            innerDecorations: innerDeco
+        }));
+    } else {
+        if (outputSpec) {
+            element = /*#__PURE__*/ React.createElement(OutputSpec, {
+                ...finalProps,
+                ref: nodeDomRef,
+                outputSpec: outputSpec
+            }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
+                getPos: getPos,
+                node: node,
+                innerDecorations: innerDeco
+            }));
+        }
+    }
+    if (!element) {
+        throw new Error(`Node spec for ${node.type.name} is missing toDOM`);
+    }
+    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);
+    const childContextValue = useMemo(()=>({
+            parentRef: nodeViewDescRef,
+            siblingsRef: childDescriptors
+        }), [
+        childDescriptors,
+        nodeViewDescRef
+    ]);
+    return /*#__PURE__*/ React.createElement(SelectNodeContext.Provider, {
+        value: setSelectNode
+    }, /*#__PURE__*/ React.createElement(StopEventContext.Provider, {
+        value: setStopEvent
+    }, /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
+        value: childContextValue
+    }, decoratedElement)));
+});

package/dist/esm/components/TextNodeView.js

@@ -1,6 +1,6 @@
 import { DecorationSet } from "prosemirror-view";
 import { Component } from "react";
-import { findDOMNode } from "react-dom";
+import { findDOMNode } from "../findDOMNode.js";
 import { CompositionViewDesc, TextViewDesc, sortViewDescs } from "../viewdesc.js";
 import { wrapInDeco } from "./ChildNodeViews.js";
 function shallowEqual(objA, objB) {

package/dist/esm/findDOMNode.js

@@ -0,0 +1,31 @@
+//@ts-expect-error This module isn't typed
+import { findCurrentHostFiber } from "react-reconciler/reflection";
+// https://github.com/facebook/react/blob/main/packages/shared/ReactInstanceMap.js#L18
+export function getInstance(key) {
+    return key._reactInternals;
+}
+// https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js#L322
+function getPublicInstance(instance) {
+    return instance;
+}
+// https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberReconciler.js#L153
+function findHostInstance(component) {
+    const fiber = getInstance(component);
+    if (fiber === undefined) {
+        if (typeof component.render === "function") {
+            throw new Error("Unable to find node on an unmounted component.");
+        } else {
+            const keys = Object.keys(component).join(",");
+            throw new Error(`Argument appears to not be a ReactComponent. Keys: ${keys}`);
+        }
+    }
+    const hostFiber = findCurrentHostFiber(fiber);
+    if (hostFiber === null) {
+        return null;
+    }
+    return getPublicInstance(hostFiber.stateNode);
+}
+// https://github.com/facebook/react/blob/main/packages/react-dom/src/client/ReactDOMClient.js#L43
+export function findDOMNode(componentOrElement) {
+    return findHostInstance(componentOrElement);
+}

package/dist/esm/hooks/useEditor.js

@@ -171,6 +171,7 @@ let didWarnValueDefaultValue = false;
             didWarnValueDefaultValue = true;
         }
     }
+    const flushSyncRef = useRef(true);
     const [cursorWrapper, _setCursorWrapper] = useState(null);
     const forceUpdate = useForceUpdate();
     const defaultState = options.defaultState ?? EMPTY_STATE;
@@ -192,14 +193,23 @@ let didWarnValueDefaultValue = false;
         setCursorWrapper
     ]);
     const dispatchTransaction = useCallback(function dispatchTransaction(tr) {
-        flushSync(()=>{
+        if (flushSyncRef.current) {
+            flushSync(()=>{
+                if (!options.state) {
+                    setState((s)=>s.apply(tr));
+                }
+                if (options.dispatchTransaction) {
+                    options.dispatchTransaction.call(this, tr);
+                }
+            });
+        } else {
             if (!options.state) {
                 setState((s)=>s.apply(tr));
             }
             if (options.dispatchTransaction) {
                 options.dispatchTransaction.call(this, tr);
             }
-        });
+        }
     }, [
         options.dispatchTransaction,
         options.state
@@ -264,7 +274,8 @@ let didWarnValueDefaultValue = false;
             registerEventListener,
             unregisterEventListener,
             cursorWrapper,
-            docViewDescRef
+            docViewDescRef,
+            flushSyncRef
         }), [
         view,
         registerEventListener,

package/dist/esm/hooks/useEditorEffect.js

@@ -15,7 +15,7 @@ import { useLayoutGroupEffect } from "./useLayoutGroupEffect.js";
  * _after_ the EditorView has been updated, even when the
  * EditorView lives in an ancestor component.
  */ export function useEditorEffect(effect, dependencies) {
-    const { view } = useContext(EditorContext);
+    const { view, flushSyncRef } = useContext(EditorContext);
     // The rules of hooks want `effect` to be included in the
     // dependency list, but dependency issues for `effect` will
     // be caught by the linter at the call-site for
@@ -25,7 +25,10 @@ import { useLayoutGroupEffect } from "./useLayoutGroupEffect.js";
     // be defined inline and run on every re-render.
     useLayoutGroupEffect(()=>{
         if (view) {
-            return effect(view);
+            flushSyncRef.current = false;
+            const result = effect(view);
+            flushSyncRef.current = true;
+            return result;
         }
     }, // The rules of hooks want to be able to statically
     // verify the dependencies for the effect, but this will

package/dist/esm/hooks/useIsNodeSelected.js

@@ -0,0 +1,11 @@
+import { useState } from "react";
+import { useSelectNode } from "./useSelectNode.js";
+export function useIsNodeSelected() {
+    const [isSelected, setIsSelected] = useState(false);
+    useSelectNode(()=>{
+        setIsSelected(true);
+    }, ()=>{
+        setIsSelected(false);
+    });
+    return isSelected;
+}

package/dist/esm/index.js

@@ -7,5 +7,6 @@ export { useEditorEventListener } from "./hooks/useEditorEventListener.js";
 export { useEditorState } from "./hooks/useEditorState.js";
 export { useStopEvent } from "./hooks/useStopEvent.js";
 export { useSelectNode } from "./hooks/useSelectNode.js";
+export { useIsNodeSelected } from "./hooks/useIsNodeSelected.js";
 export { reactKeys } from "./plugins/reactKeys.js";
 export { widget } from "./decorations/ReactWidgetType.js";

package/dist/esm/plugins/componentEventListeners.js

@@ -16,7 +16,7 @@ export function componentEventListeners(eventHandlerRegistry) {
         domEventHandlers[eventType] = handleEvent;
     }
     const plugin = new Plugin({
-        key: new PluginKey("@nytimes/react-prosemirror/componentEventListeners"),
+        key: new PluginKey("@handlewithcare/react-prosemirror/componentEventListeners"),
         props: {
             handleDOMEvents: domEventHandlers
         }

package/dist/esm/plugins/reactKeys.js

@@ -3,7 +3,7 @@ export function createNodeKey() {
     const key = Math.floor(Math.random() * 0xffffffffffff).toString(16);
     return key;
 }
-export const reactKeysPluginKey = new PluginKey("@nytimes/react-prosemirror/reactKeys");
+export const reactKeysPluginKey = new PluginKey("@handlewithcare/react-prosemirror/reactKeys");
 /**
  * Tracks a unique key for each (non-text) node in the
  * document, identified by its current position. Keys are