@handlewithcare/react-prosemirror 3.1.0-tiptap.52 → 3.1.0

package/README.md

@@ -99,6 +99,9 @@ import "prosemirror-view/style/prosemirror.css";
 
 <!-- tocstop -->
 
+Already using Tiptap, and interesting in using React ProseMirror as the React
+integration? Check out [the Tiptap integration docs](./src/tiptap/README.md)!
+
 ## The Problem
 
 To make updates efficient, React separates updates into phases so that it can

package/dist/cjs/ReactEditorView.js

@@ -33,6 +33,7 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
     nextProps;
     prevState;
     _destroyed;
+    cursorWrapped;
     constructor(place, props){
         // Prevent the base class from destroying the React-managed nodes.
         // Restore them below after invoking the base class constructor.
@@ -85,6 +86,7 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
         // @ts-expect-error this violates the typing but class does it, too.
         this.docView = null;
         this._destroyed = false;
+        this.cursorWrapped = false;
     }
     get props() {
         return this.nextProps;
@@ -185,7 +187,22 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
         // this ensures that the base class validates the DOM selection and invokes
         // node view selection callbacks.
         this.docView.markDirty(-1, -1);
-        super.update(this.nextProps);
+        const selectionChanged = !this.state.selection.eq(this.prevState.selection);
+        if (selectionChanged) {
+            super.update(this.nextProps);
+        } else {
+            // 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 selectionToDOM will cause
+            // the selection to be reset its the previous position.
+            this.domObserver.setCurSelection();
+            this.input.mouseDown = {
+                allowDefault: false,
+                delayedSelectionSync: false
+            };
+            super.update(this.nextProps);
+            this.input.mouseDown = null;
+        }
         // Store the new previous state.
         this.prevState = this.state;
     }

package/dist/cjs/components/ChildNodeViews.js

@@ -118,7 +118,7 @@ const ChildView = /*#__PURE__*/ (0, _react.memo)(function ChildView(param) {
             parentRef: parentRef,
             decorations: child.outerDeco
         });
-    }) : /*#__PURE__*/ _react.default.createElement(_NodeView.NodeView, {
+    }) : /*#__PURE__*/ _react.default.createElement(_NodeView.RemountableNodeView, {
         key: child.key,
         node: child.node,
         getPos: getPos,
@@ -266,7 +266,7 @@ const ChildElement = /*#__PURE__*/ (0, _react.memo)(function ChildElement(param)
                 mark: mark,
                 getPos: getPos,
                 inline: false
-            }, element), /*#__PURE__*/ _react.default.createElement(_NodeView.NodeView, {
+            }, element), /*#__PURE__*/ _react.default.createElement(_NodeView.RemountableNodeView, {
             key: child.key,
             outerDeco: child.outerDeco,
             node: child.node,
@@ -399,14 +399,14 @@ const ChildNodeViews = /*#__PURE__*/ (0, _react.memo)(function ChildNodeViews(pa
                 component: _SeparatorHackView.SeparatorHackView,
                 marks: [],
                 offset: lastChild?.offset ?? 0,
-                index: (lastChild?.index ?? 0) + 2,
+                index: (lastChild?.index ?? 0) + 1,
                 key: "trailing-hack-img"
             }, {
                 type: "hack",
                 component: _TrailingHackView.TrailingHackView,
                 marks: [],
                 offset: lastChild?.offset ?? 0,
-                index: (lastChild?.index ?? 0) + 1,
+                index: (lastChild?.index ?? 0) + 2,
                 key: "trailing-hack-br"
             });
         }

package/dist/cjs/components/CursorWrapper.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "CursorWrapper", {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _ReactEditorView = require("../ReactEditorView.js");
 const _dom = require("../dom.js");
 const _useEditorEffect = require("../hooks/useEditorEffect.js");
 function _getRequireWildcardCache(nodeInterop) {
@@ -59,21 +60,18 @@ const CursorWrapper = /*#__PURE__*/ (0, _react.forwardRef)(function CursorWrappe
         return innerRef.current;
     }, []);
     (0, _useEditorEffect.useEditorEffect)((view)=>{
-        if (!view || !innerRef.current) return;
-        // @ts-expect-error Internal property - domObserver
+        if (!(view instanceof _ReactEditorView.ReactEditorView) || !innerRef.current) return;
         view.domObserver.disconnectSelection();
-        // @ts-expect-error Internal property - domSelection
         const domSel = view.domSelection();
+        if (!domSel.isCollapsed) return;
         const node = innerRef.current;
-        const img = node.nodeName == "IMG";
-        if (img) {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            domSel.collapse(node.parentNode, (0, _dom.domIndex)(node) + 1);
-        } else {
-            domSel.collapse(node, 0);
-        }
-        // @ts-expect-error Internal property - domObserver
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        domSel.collapse(node.parentNode, (0, _dom.domIndex)(node) + 1);
+        view.cursorWrapped = true;
         view.domObserver.connectSelection();
+        return ()=>{
+            view.cursorWrapped = false;
+        };
     }, []);
     return /*#__PURE__*/ _react.default.createElement("img", {
         ref: innerRef,

package/dist/cjs/components/ProseMirror.js

@@ -10,12 +10,14 @@ Object.defineProperty(exports, "ProseMirror", {
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _ChildDescriptionsContext = require("../contexts/ChildDescriptionsContext.js");
+const _CompositionContext = require("../contexts/CompositionContext.js");
 const _EditorContext = require("../contexts/EditorContext.js");
 const _EditorStateContext = require("../contexts/EditorStateContext.js");
 const _NodeViewContext = require("../contexts/NodeViewContext.js");
 const _computeDocDeco = require("../decorations/computeDocDeco.js");
 const _viewDecorations = require("../decorations/viewDecorations.js");
 const _useEditor = require("../hooks/useEditor.js");
+const _reactKeys = require("../plugins/reactKeys.js");
 const _LayoutGroup = require("./LayoutGroup.js");
 const _ProseMirrorDoc = require("./ProseMirrorDoc.js");
 function _getRequireWildcardCache(nodeInterop) {
@@ -73,7 +75,7 @@ const rootChildDescriptionsContextValue = {
 function ProseMirrorInner(param) {
     let { children, nodeViewComponents, markViewComponents, ...props } = param;
     const [mount, setMount] = (0, _react.useState)(null);
-    const { editor, cursorWrapper, state } = (0, _useEditor.useEditor)(mount, props);
+    const { editor, state } = (0, _useEditor.useEditor)(mount, props);
     const nodeViewConstructors = editor.view.nodeViews;
     const nodeViewContextValue = (0, _react.useMemo)(()=>{
         return {
@@ -90,7 +92,7 @@ function ProseMirrorInner(param) {
     ]);
     const node = state.doc;
     const decorations = (0, _computeDocDeco.computeDocDeco)(editor.view);
-    const innerDecorations = (0, _viewDecorations.viewDecorations)(editor.view, cursorWrapper);
+    const innerDecorations = (0, _viewDecorations.viewDecorations)(editor.view);
     const docNodeViewContextValue = (0, _react.useMemo)(()=>({
             setMount,
             node,
@@ -102,6 +104,12 @@ function ProseMirrorInner(param) {
         decorations,
         innerDecorations
     ]);
+    const freezeFrom = _reactKeys.reactKeysPluginKey.getState(state)?.freezeFrom ?? null;
+    const compositionContextValue = (0, _react.useMemo)(()=>({
+            freezeFrom
+        }), [
+        freezeFrom
+    ]);
     return /*#__PURE__*/ _react.default.createElement(_EditorContext.EditorContext.Provider, {
         value: editor
     }, /*#__PURE__*/ _react.default.createElement(_EditorStateContext.EditorStateContext.Provider, {
@@ -110,9 +118,11 @@ function ProseMirrorInner(param) {
         value: nodeViewContextValue
     }, /*#__PURE__*/ _react.default.createElement(_ChildDescriptionsContext.ChildDescriptionsContext.Provider, {
         value: rootChildDescriptionsContextValue
+    }, /*#__PURE__*/ _react.default.createElement(_CompositionContext.CompositionContext.Provider, {
+        value: compositionContextValue
     }, /*#__PURE__*/ _react.default.createElement(_ProseMirrorDoc.DocNodeViewContext.Provider, {
         value: docNodeViewContextValue
-    }, children)))));
+    }, children))))));
 }
 function ProseMirror(props) {
     return /*#__PURE__*/ _react.default.createElement(_LayoutGroup.LayoutGroup, null, /*#__PURE__*/ _react.default.createElement(ProseMirrorInner, props));

package/dist/cjs/components/TextNodeView.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "TextNodeView", {
 });
 const _prosemirrorview = require("prosemirror-view");
 const _react = require("react");
+const _ReactEditorView = require("../ReactEditorView.js");
 const _findDOMNode = require("../findDOMNode.js");
 const _viewdesc = require("../viewdesc.js");
 const _ChildNodeViews = require("./ChildNodeViews.js");
@@ -36,75 +37,78 @@ function shallowEqual(objA, objB) {
     return true;
 }
 let TextNodeView = class TextNodeView extends _react.Component {
-    viewDescRef = null;
-    renderRef = null;
-    updateEffect() {
+    viewDescRef = createMutRef();
+    create() {
         const { view, decorations, siblingsRef, parentRef, getPos, node } = this.props;
-        // There simply is no other way to ref a text node
-        // eslint-disable-next-line react/no-find-dom-node
         const dom = (0, _findDOMNode.findDOMNode)(this);
-        // We only need to explicitly create a CompositionViewDesc
-        // when a composition was started that produces a new text node.
-        // Otherwise we just rely on re-rendering the renderRef
-        if (!dom) {
-            if (!view.composing) return;
-            this.viewDescRef = new _viewdesc.CompositionViewDesc(parentRef.current, getPos, // These are just placeholders/dummies. We can't
-            // actually find the correct DOM nodes from here,
-            // so we let our parent do it.
-            // Passing a valid element here just so that the
-            // ViewDesc constructor doesn't blow up.
-            document.createElement("div"), document.createTextNode(node.text ?? ""), node.text ?? "");
-            return;
-        }
+        if (!dom && !view.composing) return null;
         let textNode = dom;
-        while(textNode.firstChild){
+        while(textNode?.firstChild){
             textNode = textNode.firstChild;
         }
-        if (!this.viewDescRef || this.viewDescRef instanceof _viewdesc.CompositionViewDesc) {
-            this.viewDescRef = new _viewdesc.TextViewDesc(undefined, [], getPos, node, decorations, _prosemirrorview.DecorationSet.empty, dom, textNode);
-        } else {
-            this.viewDescRef.parent = parentRef.current;
-            this.viewDescRef.children = [];
-            this.viewDescRef.node = node;
-            this.viewDescRef.outerDeco = decorations;
-            this.viewDescRef.innerDeco = _prosemirrorview.DecorationSet.empty;
-            this.viewDescRef.dom = dom;
-            this.viewDescRef.dom.pmViewDesc = this.viewDescRef;
-            this.viewDescRef.nodeDOM = textNode;
-        }
-        if (!siblingsRef.current.includes(this.viewDescRef)) {
-            siblingsRef.current.push(this.viewDescRef);
+        if (!(textNode instanceof Text)) {
+            textNode = null;
         }
+        if (!dom || !textNode) return null;
+        const viewDesc = new _viewdesc.TextViewDesc(parentRef.current, [], getPos, node, decorations, _prosemirrorview.DecorationSet.empty, dom, textNode);
+        siblingsRef.current.push(viewDesc);
         siblingsRef.current.sort(_viewdesc.sortViewDescs);
+        return viewDesc;
+    }
+    update() {
+        const { view, node, decorations } = this.props;
+        if (!(view instanceof _ReactEditorView.ReactEditorView)) return false;
+        const viewDesc = this.viewDescRef.current;
+        if (!viewDesc) return false;
+        const dom = (0, _findDOMNode.findDOMNode)(this);
+        if (!dom || dom !== viewDesc.dom) return false;
+        if (!dom.contains(viewDesc.nodeDOM)) return false;
+        return viewDesc.matchesNode(node, decorations, _prosemirrorview.DecorationSet.empty) || viewDesc.update(node, decorations, _prosemirrorview.DecorationSet.empty, view);
+    }
+    destroy() {
+        const viewDesc = this.viewDescRef.current;
+        if (!viewDesc) return;
+        viewDesc.destroy();
+        const siblings = this.props.siblingsRef.current;
+        if (siblings.includes(viewDesc)) {
+            const index = siblings.indexOf(viewDesc);
+            siblings.splice(index, 1);
+        }
+    }
+    updateEffect() {
+        if (!this.update()) {
+            this.destroy();
+            this.viewDescRef.current = this.create();
+        }
     }
     shouldComponentUpdate(nextProps) {
         return !shallowEqual(this.props, nextProps);
     }
+    constructor(props){
+        super(props);
+        this.viewDescRef.current = null;
+    }
     componentDidMount() {
+        this.viewDescRef.current = this.create();
         this.updateEffect();
     }
     componentDidUpdate() {
         this.updateEffect();
+        const { view } = this.props;
+        if (!(view instanceof _ReactEditorView.ReactEditorView)) return;
     }
     componentWillUnmount() {
-        const { siblingsRef } = this.props;
-        if (!this.viewDescRef) return;
-        if (siblingsRef.current.includes(this.viewDescRef)) {
-            const index = siblingsRef.current.indexOf(this.viewDescRef);
-            siblingsRef.current.splice(index, 1);
-        }
+        this.destroy();
     }
     render() {
-        const { view, getPos, node, decorations } = this.props;
-        // During a composition, it's crucial that we don't try to
-        // update the DOM that the user is working in. If there's
-        // an active composition and the selection is in this node,
-        // we freeze the DOM of this element so that it doesn't
-        // interrupt the composition
-        if (view.composing && view.state.selection.from >= getPos() && view.state.selection.from <= getPos() + node.nodeSize) {
-            return this.renderRef;
-        }
-        this.renderRef = decorations.reduce(_ChildNodeViews.wrapInDeco, node.text);
-        return this.renderRef;
+        const { node, decorations } = this.props;
+        return decorations.reduce(_ChildNodeViews.wrapInDeco, node.text);
     }
 };
+/**
+ * createRef returns a RefObject, even though the docs
+ * say that it's acceptible to manage the ref's value
+ * yourself.
+ */ function createMutRef() {
+    return /*#__PURE__*/ (0, _react.createRef)();
+}

package/dist/cjs/components/WidgetView.js

@@ -90,6 +90,8 @@ function WidgetView(param) {
         ref: domRef,
         widget: widget,
         getPos: getPos,
-        contentEditable: false
+        ...!widget.type.spec.raw && {
+            contentEditable: false
+        }
     });
 }

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

@@ -14,9 +14,13 @@ _export(exports, {
     },
     NodeView: function() {
         return NodeView;
+    },
+    RemountableNodeView: function() {
+        return RemountableNodeView;
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _CompositionContext = require("../../contexts/CompositionContext.js");
 const _NodeViewContext = require("../../contexts/NodeViewContext.js");
 const _DefaultNodeView = require("./DefaultNodeView.js");
 const _NodeViewConstructorView = require("./NodeViewConstructorView.js");
@@ -62,8 +66,12 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const NodeView = /*#__PURE__*/ (0, _react.memo)(function NodeView(props) {
+const NodeView = /*#__PURE__*/ (0, _react.memo)(function NodeView(param) {
+    let { forceRemount, ...props } = param;
+    const renderRef = (0, _react.useRef)(null);
+    const { freezeFrom } = (0, _react.useContext)(_CompositionContext.CompositionContext);
     const { components, constructors } = (0, _react.useContext)(_NodeViewContext.NodeViewContext);
+    const committedFrozenRef = (0, _react.useRef)(false);
     const component = components[props.node.type.name] ?? _DefaultNodeView.DefaultNodeView;
     const constructor = constructors[props.node.type.name];
     // Construct a wrapper component so that the node view remounts when either
@@ -90,8 +98,36 @@ const NodeView = /*#__PURE__*/ (0, _react.memo)(function NodeView(props) {
         constructor,
         component
     ]);
-    return /*#__PURE__*/ _react.default.createElement(GetPosContext.Provider, {
-        value: props.getPos
-    }, /*#__PURE__*/ _react.default.createElement(Component, props));
+    // It's not generally safe to access getPos during render, because the
+    // component may not re-render when its return value would change. Here it's
+    // safe because we only use it to _suppress_ commits that would otherwise
+    // have happened.
+    const frozen = props.getPos() === freezeFrom;
+    // Protect content while frozen, and also through the single render where we
+    // leave the frozen state: `committedFrozenRef` still reflects the previous
+    // commit, so we keep returning the exact same cached element reference.
+    const protecting = (frozen || committedFrozenRef.current) && renderRef.current != null;
+    if (!protecting) {
+        renderRef.current = /*#__PURE__*/ _react.default.createElement(GetPosContext.Provider, {
+            value: props.getPos
+        }, /*#__PURE__*/ _react.default.createElement(Component, props));
+    }
+    (0, _react.useLayoutEffect)(()=>{
+        const wasFrozen = committedFrozenRef.current;
+        committedFrozenRef.current = frozen;
+        if (wasFrozen && !frozen) forceRemount();
+    }, [
+        frozen,
+        forceRemount
+    ]);
+    return renderRef.current;
 });
 const GetPosContext = /*#__PURE__*/ (0, _react.createContext)(null);
+function RemountableNodeView(props) {
+    const [key, forceRemount] = (0, _react.useReducer)((x)=>x + 1, 0);
+    return /*#__PURE__*/ _react.default.createElement(NodeView, {
+        key: key.toString(),
+        ...props,
+        forceRemount: forceRemount
+    });
+}

package/dist/cjs/contexts/CompositionContext.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CompositionContext", {
+    enumerable: true,
+    get: function() {
+        return CompositionContext;
+    }
+});
+const _react = require("react");
+const CompositionContext = (0, _react.createContext)({
+    freezeFrom: null
+});

package/dist/cjs/decorations/viewDecorations.js

@@ -123,17 +123,12 @@ function insertAhead(array, i, deco) {
     array.splice(i, 0, deco);
 }
 const ViewDecorationsCache = new WeakMap();
-function viewDecorations(view, cursorWrapper) {
+function viewDecorations(view) {
     const found = [];
     view.someProp("decorations", (f)=>{
         const result = f(view.state);
         if (result && result != empty) found.push(result);
     });
-    if (cursorWrapper) {
-        found.push(_prosemirrorview.DecorationSet.create(view.state.doc, [
-            cursorWrapper
-        ]));
-    }
     const previous = ViewDecorationsCache.get(view);
     if (!previous) {
         const result = DecorationGroup.from(found);

package/dist/cjs/hooks/useEditor.js

@@ -27,23 +27,16 @@ function useEditor(mount, options) {
         }
     }
     const flushSyncRef = (0, _react.useRef)(true);
-    const [cursorWrapper, _setCursorWrapper] = (0, _react.useState)(null);
     const forceUpdate = (0, _useForceUpdate.useForceUpdate)();
     const defaultState = options.defaultState ?? _constants.EMPTY_STATE;
     const [_state, setState] = (0, _react.useState)(defaultState);
     const state = options.state ?? _state;
     const { handleDOMEvents, registerEventListener, unregisterEventListener } = (0, _useComponentEventListeners.useComponentEventListeners)(options.handleDOMEvents);
-    const setCursorWrapper = (0, _react.useCallback)((deco)=>{
-        (0, _reactdom.flushSync)(()=>{
-            _setCursorWrapper(deco);
-        });
-    }, []);
     const plugins = (0, _react.useMemo)(()=>[
             ...options.plugins ?? [],
-            (0, _beforeInputPlugin.beforeInputPlugin)(setCursorWrapper)
+            (0, _beforeInputPlugin.beforeInputPlugin)()
         ], [
-        options.plugins,
-        setCursorWrapper
+        options.plugins
     ]);
     const dispatchTransaction = (0, _react.useCallback)(function dispatchTransaction(tr) {
         if (flushSyncRef.current) {
@@ -122,7 +115,6 @@ function useEditor(mount, options) {
     ]);
     return {
         editor,
-        cursorWrapper,
         state
     };
 }

package/dist/cjs/hooks/useMarkViewDescription.js

@@ -123,10 +123,7 @@ function useMarkViewDescription(getDOM, getContentDOM, constructor, props) {
     const childContextValue = (0, _react.useMemo)(()=>({
             parentRef: viewDescRef,
             siblingsRef: childrenRef
-        }), [
-        childrenRef,
-        viewDescRef
-    ]);
+        }), []);
     return {
         childContextValue,
         contentDOM: contentDOMRef.current ?? viewDescRef.current?.dom,

package/dist/cjs/hooks/useNodeViewDescription.js

@@ -141,33 +141,12 @@ function useNodeViewDescription(getDOM, getContentDOM, constructor, props) {
         children.sort(_viewdesc.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 _viewdesc.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 = (0, _react.useMemo)(()=>({
             parentRef: viewDescRef,
             siblingsRef: childrenRef
-        }), [
-        childrenRef,
-        viewDescRef
-    ]);
+        }), []);
     return {
         childContextValue,
         contentDOM: contentDOMRef.current,