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

package/dist/cjs/ReactEditorView.js

@@ -33,6 +33,10 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
     nextProps;
     prevState;
     _destroyed;
+    // TODO: Probably refactor? It's used in TrailingHackView to detect
+    // whether it was mounted during a compositionstart event handler
+    compositionStarting;
+    displacedNodes;
     constructor(place, props){
         // Prevent the base class from destroying the React-managed nodes.
         // Restore them below after invoking the base class constructor.
@@ -85,6 +89,8 @@ 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.compositionStarting = false;
+        this.displacedNodes = [];
     }
     get props() {
         return this.nextProps;

package/dist/cjs/components/ChildNodeViews.js

@@ -109,14 +109,20 @@ const ChildView = /*#__PURE__*/ (0, _react.memo)(function ChildView(param) {
     }) : child.node.isText ? /*#__PURE__*/ _react.default.createElement(_ChildDescriptionsContext.ChildDescriptionsContext.Consumer, {
         key: child.key
     }, (param)=>{
-        let { siblingsRef, parentRef } = param;
-        return /*#__PURE__*/ _react.default.createElement(_TextNodeView.TextNodeView, {
-            view: view,
-            node: child.node,
-            getPos: getPos,
-            siblingsRef: siblingsRef,
-            parentRef: parentRef,
-            decorations: child.outerDeco
+        let { siblingsRef, parentRef, findCompositionDOM } = param;
+        return /*#__PURE__*/ _react.default.createElement(_EditorContext.EditorContext.Consumer, null, (param)=>{
+            let { registerEventListener, unregisterEventListener } = param;
+            return /*#__PURE__*/ _react.default.createElement(_TextNodeView.RemountableTextNodeView, {
+                view: view,
+                node: child.node,
+                getPos: getPos,
+                siblingsRef: siblingsRef,
+                parentRef: parentRef,
+                findCompositionDOM: findCompositionDOM,
+                decorations: child.outerDeco,
+                registerEventListener: registerEventListener,
+                unregisterEventListener: unregisterEventListener
+            });
         });
     }) : /*#__PURE__*/ _react.default.createElement(_NodeView.NodeView, {
         key: child.key,
@@ -399,14 +405,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

@@ -64,14 +64,10 @@ const CursorWrapper = /*#__PURE__*/ (0, _react.forwardRef)(function CursorWrappe
         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);
-        }
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        domSel.collapse(node.parentNode, (0, _dom.domIndex)(node) + 1);
         // @ts-expect-error Internal property - domObserver
         view.domObserver.connectSelection();
     }, []);

package/dist/cjs/components/ProseMirror.js

@@ -68,12 +68,14 @@ const rootChildDescriptionsContextValue = {
     },
     siblingsRef: {
         current: []
-    }
+    },
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    findCompositionDOM: ()=>{}
 };
 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,

package/dist/cjs/components/TextNodeView.js

@@ -2,17 +2,68 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "TextNodeView", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    RemountableTextNodeView: function() {
+        return RemountableTextNodeView;
+    },
+    TextNodeView: function() {
         return TextNodeView;
     }
 });
+const _prosemirrorstate = require("prosemirror-state");
 const _prosemirrorview = require("prosemirror-view");
-const _react = require("react");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _ReactEditorView = require("../ReactEditorView.js");
 const _findDOMNode = require("../findDOMNode.js");
 const _viewdesc = require("../viewdesc.js");
 const _ChildNodeViews = require("./ChildNodeViews.js");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
 function shallowEqual(objA, objB) {
     if (objA === objB) {
         return true;
@@ -36,75 +87,237 @@ function shallowEqual(objA, objB) {
     return true;
 }
 let TextNodeView = class TextNodeView extends _react.Component {
-    viewDescRef = null;
-    renderRef = null;
-    updateEffect() {
-        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
+    viewDescRef = createMutRef();
+    renderRef = createMutRef();
+    wasProtecting = createMutRef();
+    containsCompositionNodeText = createMutRef();
+    // This is basically NodeViewDesc.localCompositionInfo
+    // from prosemirror-view. It's been slightly adjusted so that
+    // it can be used accurately during render, before we've
+    // necessarily found (or even let the browser create)
+    // view.input.compositionNode
+    shouldProtect(props) {
+        const { view, getPos, node } = props;
+        if (!(view instanceof _ReactEditorView.ReactEditorView)) return false;
+        if (!view.composing) {
+            return false;
+        }
+        const viewDesc = this.viewDescRef.current;
+        // If our DOM text node IS the IME's composition node, protect regardless
+        // of where the PM selection currently is. The IME may have replaced a
+        // selection that included us — moving the PM selection past us — but our
+        // DOM is still part of the in-progress composition. Until another
+        // TextNodeView's findCompositionDOM displaces us into a comp desc, only
+        // our own protect/no-update is preventing React from rewriting the IME's
+        // text. (When we *are* displaced, viewDesc is already a CompositionViewDesc
+        // and the existing position-based logic doesn't apply anyway.)
+        const ownsCompositionNode = viewDesc instanceof _viewdesc.TextViewDesc && viewDesc.nodeDOM === view.input.compositionNode;
+        if (!ownsCompositionNode) {
+            const pos = getPos();
+            const { from, to } = view.state.selection;
+            if (!(view.state.selection instanceof _prosemirrorstate.TextSelection) || from <= pos || to > pos + node.nodeSize) {
+                return false;
+            }
+        }
+        return !!this.containsCompositionNodeText.current;
+    }
+    handleCompositionEnd = ()=>{
+        if (!this.wasProtecting.current) return;
+        const { view } = this.props;
+        if (!(view instanceof _ReactEditorView.ReactEditorView)) return;
+        // If the IME detached our DOM during composition, React's fiber is now
+        // wired to a detached node and will silently send all subsequent updates
+        // into the void. Re-attach the orphan (so the upcoming unmount's
+        // removeChild has something to remove), then ask our wrapper to mint a
+        // new key — that forces React to drop this fiber and mount a fresh one
+        // whose stateNode it creates from the current render output.
         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 instanceof HTMLElement && !view.dom.contains(dom)) {
+            this.reattachAtCorrectPosition(dom);
+            this.props.forceRemount();
+        } else {
+            this.forceUpdate();
         }
+    };
+    create() {
+        const { view, decorations, siblingsRef, parentRef, getPos, node } = this.props;
+        const dom = (0, _findDOMNode.findDOMNode)(this);
+        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);
+        if (!(textNode instanceof Text)) {
+            textNode = null;
+        }
+        let viewDesc;
+        if (this.shouldProtect(this.props)) {
+            viewDesc = new _viewdesc.CompositionViewDesc(parentRef.current, getPos, // If we can't
+            // actually find the correct DOM nodes from here (
+            // which is the case in a composition in a newly
+            // created text node), we let our parent do it.
+            // Passing a valid element here just so that the
+            // ViewDesc constructor doesn't blow up.
+            dom ?? document.createElement("div"), textNode ?? document.createTextNode(node.text ?? ""), node.text ?? "");
         } 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 (!dom || !textNode) return null;
+            viewDesc = new _viewdesc.TextViewDesc(parentRef.current, [], getPos, node, decorations, _prosemirrorview.DecorationSet.empty, dom, textNode);
         }
+        siblingsRef.current.push(viewDesc);
         siblingsRef.current.sort(_viewdesc.sortViewDescs);
+        if (viewDesc instanceof _viewdesc.CompositionViewDesc) {
+            this.props.findCompositionDOM(viewDesc);
+        }
+        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;
+        // Don't force destroy/recreate just because we transitioned into protect
+        // mode. If our DOM text node is the IME's composition node, we want to
+        // keep the TextViewDesc alive so the new composition-text TextNodeView's
+        // findCompositionDOM second pass can find us, validate the size mismatch,
+        // and displace us into a properly-sized CompositionViewDesc. If we
+        // destroyed here, create() would put a wrong-size CompositionViewDesc on
+        // T and pre-empt that displacement.
+        const ownsCompositionNode = viewDesc instanceof _viewdesc.TextViewDesc && viewDesc.nodeDOM === view.input.compositionNode;
+        if (!ownsCompositionNode && this.shouldProtect(this.props) !== viewDesc instanceof _viewdesc.CompositionViewDesc) {
+            return false;
+        }
+        if (viewDesc instanceof _viewdesc.CompositionViewDesc) 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();
+        }
+        const { view } = this.props;
+        if (!(view instanceof _ReactEditorView.ReactEditorView)) {
+            this.containsCompositionNodeText.current = true;
+            return;
+        }
+        const textNode = view.input.compositionNode;
+        if (!textNode) {
+            this.containsCompositionNodeText.current = true;
+            return;
+        }
+        // Resolve the parent textblock containing this text node and ask
+        // findTextInFragment whether the IME text node's *current* content can be
+        // placed somewhere in the textblock's PM content overlapping the
+        // selection. If it can, the composition is still consistent with PM state
+        // and we should protect. If it can't (e.g. a remote change overwrote the
+        // composing region), PM and the DOM have diverged — abandon protection
+        // so the re-render can rewrite the DOM and cancel the composition.
+        const $pos = view.state.doc.resolve(this.props.getPos());
+        const parent = $pos.parent;
+        if (!parent.inlineContent) {
+            this.containsCompositionNodeText.current = false;
+            return;
+        }
+        const parentStart = $pos.start();
+        const { from, to } = view.state.selection;
+        const textPos = (0, _viewdesc.findTextInFragment)(parent.content, // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        textNode.nodeValue, from - parentStart, to - parentStart);
+        this.containsCompositionNodeText.current = textPos >= 0;
     }
     shouldComponentUpdate(nextProps) {
+        // When leaving the protected state, force a re-render so React's
+        // virtual DOM resyncs with whatever the IME wrote into the real DOM
+        // while we were returning a stale renderRef.
+        if (this.wasProtecting.current && !this.shouldProtect(nextProps)) {
+            return true;
+        }
         return !shallowEqual(this.props, nextProps);
     }
+    constructor(props){
+        super(props);
+        this.viewDescRef.current = null;
+        this.renderRef.current = null;
+        this.wasProtecting.current = false;
+        this.containsCompositionNodeText.current = true;
+    }
     componentDidMount() {
+        this.containsCompositionNodeText.current = true;
+        // After a composition, force an update so that we re-check whether we need
+        // to be protecting our rendered content and allow React to re-sync with the
+        // DOM.
+        const { registerEventListener } = this.props;
+        registerEventListener("compositionend", this.handleCompositionEnd);
+        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);
+    reattachAtCorrectPosition(dom) {
+        const viewDesc = this.viewDescRef.current;
+        if (!viewDesc) return;
+        let host = viewDesc.parent;
+        while(host && !host.contentDOM)host = host.parent;
+        if (!host?.contentDOM) return;
+        const siblings = viewDesc.parent?.children ?? [];
+        const idx = siblings.indexOf(viewDesc);
+        let nextDom = null;
+        for(let i = idx + 1; i < siblings.length; i++){
+            const sib = siblings[i];
+            if (sib?.dom && sib.dom.parentNode === host.contentDOM) {
+                nextDom = sib.dom;
+                break;
+            }
         }
+        host.contentDOM.insertBefore(dom, nextDom);
+    }
+    componentWillUnmount() {
+        const { unregisterEventListener } = this.props;
+        unregisterEventListener("compositionend", this.handleCompositionEnd);
+        this.destroy();
     }
     render() {
-        const { view, getPos, node, decorations } = this.props;
+        const { 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;
+        if (this.shouldProtect(this.props)) {
+            this.wasProtecting.current = true;
+            return this.renderRef.current;
         }
-        this.renderRef = decorations.reduce(_ChildNodeViews.wrapInDeco, node.text);
-        return this.renderRef;
+        this.wasProtecting.current = false;
+        this.renderRef.current = decorations.reduce(_ChildNodeViews.wrapInDeco, node.text);
+        return this.renderRef.current;
     }
 };
+/**
+ * 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)();
+}
+function RemountableTextNodeView(props) {
+    const [key, forceRemount] = (0, _react.useReducer)((x)=>x + 1, 0);
+    return /*#__PURE__*/ _react.default.createElement(TextNodeView, {
+        key: key,
+        forceRemount: forceRemount,
+        ...props
+    });
+}

package/dist/cjs/components/TrailingHackView.js

@@ -9,8 +9,11 @@ Object.defineProperty(exports, "TrailingHackView", {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _ReactEditorView = require("../ReactEditorView.js");
 const _ChildDescriptionsContext = require("../contexts/ChildDescriptionsContext.js");
 const _useClientLayoutEffect = require("../hooks/useClientLayoutEffect.js");
+const _useEditorEffect = require("../hooks/useEditorEffect.js");
+const _useEditorEventListener = require("../hooks/useEditorEventListener.js");
 const _viewdesc = require("../viewdesc.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -55,9 +58,15 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 function TrailingHackView(param) {
     let { getPos } = param;
+    const [shouldRender, setShouldRender] = (0, _react.useState)(true);
+    const [shouldReinsert, setShouldReinsert] = (0, _react.useState)(false);
     const { siblingsRef, parentRef } = (0, _react.useContext)(_ChildDescriptionsContext.ChildDescriptionsContext);
     const viewDescRef = (0, _react.useRef)(null);
     const ref = (0, _react.useRef)(null);
+    const preservedRef = (0, _react.useRef)(ref.current);
+    if (ref.current) {
+        preservedRef.current = ref.current;
+    }
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
         const siblings = siblingsRef.current;
         return ()=>{
@@ -83,6 +92,67 @@ function TrailingHackView(param) {
         }
         siblingsRef.current.sort(_viewdesc.sortViewDescs);
     });
+    // At the start of a composition, the browser will automatically delete
+    // the trailing hack br element. We need to unmount ourselves _before_
+    // that happens, so that React doesn't try to remove the already-removed
+    // br node when this component gets unmounted
+    (0, _useEditorEventListener.useEditorEventListener)("compositionstart", (view)=>{
+        const { from } = view.state.selection;
+        if (from === getPos()) {
+            setShouldRender(false);
+            setShouldReinsert(true);
+        }
+    });
+    // Chrome and Safari will cancel/mangle the composition if the br element isn't
+    // still in the DOM after the compositionstart event. We manually add it
+    // back to the DOM, without React managing it, so that it can be removed
+    // again by the browser when it starts the composition.
+    (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
+        if (!shouldReinsert) return;
+        const preservedHack = preservedRef.current;
+        if (!preservedHack) return;
+        if (!viewDescRef.current) return;
+        const { parent } = viewDescRef.current;
+        if (!parent) return;
+        const dom = parent.contentDOM;
+        if (!dom) return;
+        preservedHack.pmViewDesc = undefined;
+        const index = parent.children.indexOf(viewDescRef.current);
+        if (index === 0) {
+            dom.appendChild(preservedHack);
+        } else {
+            dom.insertBefore(preservedHack, dom.childNodes.item(index));
+        }
+        return ()=>{
+            try {
+                dom.removeChild(preservedHack);
+            } catch  {
+            // It may have already been removed by the browser during
+            // the composition, but if we get unmounted before that happens,
+            // we need to remove it ourselves
+            }
+        };
+    }, [
+        shouldReinsert
+    ]);
+    // We need to run the same composition check when we first get mounted,
+    // in case we got mounted in the same render batch as the beginning of
+    // a composition
+    (0, _useEditorEffect.useEditorEffect)((view)=>{
+        if (!(view instanceof _ReactEditorView.ReactEditorView)) return;
+        if (!view.compositionStarting) return;
+        const { from } = view.state.selection;
+        if (from === getPos()) {
+            setShouldRender(false);
+        }
+    }, [
+        getPos
+    ]);
+    (0, _useEditorEventListener.useEditorEventListener)("compositionend", ()=>{
+        setShouldRender(true);
+        setShouldReinsert(false);
+    });
+    if (!shouldRender) return null;
     return /*#__PURE__*/ _react.default.createElement("br", {
         ref: ref,
         className: "ProseMirror-trailingBreak"

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/contexts/ChildDescriptionsContext.js

@@ -15,5 +15,7 @@ const ChildDescriptionsContext = (0, _react.createContext)({
     },
     siblingsRef: {
         current: []
-    }
+    },
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    findCompositionDOM: ()=>{}
 });

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
     };
 }