npm - @handlewithcare/react-prosemirror - Versions diffs - 3.1.0-tiptap.51 → 3.1.0-tiptap.52 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

package/dist/cjs/ReactEditorView.js +0 -2
package/dist/cjs/components/ChildNodeViews.js +9 -14
package/dist/cjs/components/CursorWrapper.js +9 -6
package/dist/cjs/components/TextNodeView.js +38 -109
package/dist/cjs/components/TrailingHackView.js +0 -29
package/dist/cjs/components/WidgetView.js +1 -0
package/dist/cjs/hooks/useComponentEventListeners.js +6 -14
package/dist/cjs/hooks/useNodeViewDescription.js +16 -37
package/dist/cjs/plugins/beforeInputPlugin.js +43 -41
package/dist/cjs/plugins/componentEventListeners.js +2 -9
package/dist/cjs/tiptap/utils/ssrJSDOMPatch.js +59 -0
package/dist/cjs/viewdesc.js +3 -10
package/dist/esm/ReactEditorView.js +0 -2
package/dist/esm/components/ChildNodeViews.js +9 -14
package/dist/esm/components/CursorWrapper.js +10 -7
package/dist/esm/components/TextNodeView.js +38 -109
package/dist/esm/components/TrailingHackView.js +1 -30
package/dist/esm/components/WidgetView.js +1 -0
package/dist/esm/hooks/useComponentEventListeners.js +6 -14
package/dist/esm/hooks/useNodeViewDescription.js +17 -38
package/dist/esm/plugins/beforeInputPlugin.js +43 -41
package/dist/esm/plugins/componentEventListeners.js +2 -9
package/dist/esm/tiptap/hooks/useTiptapEditor.js +7 -1
package/dist/esm/tiptap/utils/ssrJSDOMPatch.js +56 -0
package/dist/esm/viewdesc.js +3 -10
package/dist/tsconfig.tsbuildinfo +1 -1
package/dist/types/ReactEditorView.d.ts +0 -4
package/dist/types/components/CursorWrapper.d.ts +2 -4
package/dist/types/components/TextNodeView.d.ts +4 -14
package/dist/types/components/TrailingHackView.d.ts +1 -1
package/dist/types/components/WidgetViewComponentProps.d.ts +4 -3
package/dist/types/constants.d.ts +1 -1
package/dist/types/hooks/useComponentEventListeners.d.ts +1 -1
package/dist/types/plugins/componentEventListeners.d.ts +2 -3
package/dist/types/props.d.ts +26 -26
package/dist/types/tiptap/hooks/useTiptapEditor.d.ts +7 -0
package/dist/types/tiptap/utils/ssrJSDOMPatch.d.ts +1 -0
package/dist/types/viewdesc.d.ts +2 -2
package/package.json +1 -2

package/dist/cjs/tiptap/utils/ssrJSDOMPatch.js ADDED Viewed

@@ -0,0 +1,59 @@
+/**
+ * This file is used to patch global DOM variables in a NodeJS environment.
+ * This is needed for ProseMirror to work in a NodeJS environment.
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+if (typeof window === "undefined") {
+    // Make sure to import JSDOM only in a NodeJS environment.
+    // The magic comments prevent bundlers from statically analyzing this require:
+    // - webpackIgnore: true  → webpack / Next.js
+    // - @vite-ignore         → Vite
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const jsdom = require(/* webpackIgnore: true */ /* @vite-ignore */ "jsdom");
+    const html = `
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Testing</title>
+  </head>
+  <body></body>
+</html>
+`;
+    const { window: window1 } = new jsdom.JSDOM(html);
+    global.window = window1;
+    global.document = window1.document;
+    // Use Object.defineProperty for navigator since it's read-only in Node.js 22+
+    Object.defineProperty(global, "navigator", {
+        value: window1.navigator,
+        writable: true,
+        configurable: true
+    });
+    global.innerHeight = 0;
+    global.SVGElement = window1.SVGElement;
+    // @ts-expect-error stub getSelection for SSR
+    document.getSelection = ()=>({});
+    document.createRange = ()=>({
+            setStart () {},
+            setEnd () {},
+            // @ts-expect-error stub getBoundingClientRect for SSR
+            getClientRects () {
+                return {
+                    left: 0,
+                    top: 0,
+                    right: 0,
+                    bottom: 0
+                };
+            },
+            // @ts-expect-error stub getBoundingClientRect for SSR
+            getBoundingClientRect () {
+                return {
+                    left: 0,
+                    top: 0,
+                    right: 0,
+                    bottom: 0
+                };
+            }
+        });
+}

package/dist/cjs/viewdesc.js CHANGED Viewed

@@ -266,9 +266,7 @@ let ViewDesc = class ViewDesc {
                 prev = i ? this.children[i - 1] : null;
                 if (!prev || prev.dom.parentNode == this.contentDOM) break;
             }
-            if (prev && side && enter && !prev.border && !prev.domAtom) {
-                return prev.domFromPos(prev.size, side);
-            }
+            if (prev && side && enter && !prev.border && !prev.domAtom) return prev.domFromPos(prev.size, side);
             return {
                 node: this.contentDOM,
                 offset: prev ? (0, _dom.domIndex)(prev.dom) + 1 : 0
@@ -403,9 +401,7 @@ let ViewDesc = class ViewDesc {
             const after = selRange.focusNode.childNodes[selRange.focusOffset];
             if (after && after.contentEditable == "false") force = true;
         }
-        if (!(force || brKludge && _browser.browser.safari) && (0, _dom.isEquivalentPosition)(anchorDOM.node, anchorDOM.offset, selRange.anchorNode, selRange.anchorOffset) && (0, _dom.isEquivalentPosition)(headDOM.node, headDOM.offset, selRange.focusNode, selRange.focusOffset)) {
-            return;
-        }
+        if (!(force || brKludge && _browser.browser.safari) && (0, _dom.isEquivalentPosition)(anchorDOM.node, anchorDOM.offset, selRange.anchorNode, selRange.anchorOffset) && (0, _dom.isEquivalentPosition)(headDOM.node, headDOM.offset, selRange.focusNode, selRange.focusOffset)) return;
         // Selection.extend can be used to create an 'inverted' selection
         // (one where the focus is before the anchor), but not all
         // browsers support it yet.
@@ -670,10 +666,7 @@ let TextViewDesc = class TextViewDesc extends NodeViewDesc {
             skip: skip || true
         };
     }
-    update(node, outerDeco, _innerDeco, _view) {
-        if (this.dirty == NODE_DIRTY || this.dirty != NOT_DIRTY && !this.inParent() || !node.sameMarkup(this.node)) return false;
-        this.updateOuterDeco(outerDeco);
-        this.node = node;
+    update(_node, _outerDeco, _innerDeco, _view) {
         this.dirty = NOT_DIRTY;
         return true;
     }

package/dist/esm/ReactEditorView.js CHANGED Viewed

@@ -33,7 +33,6 @@ function changedNodeViews(a, b) {
     nextProps;
     prevState;
     _destroyed;
-    deferPendingEffects;
     constructor(place, props){
         // Prevent the base class from destroying the React-managed nodes.
         // Restore them below after invoking the base class constructor.
@@ -86,7 +85,6 @@ function changedNodeViews(a, b) {
         // @ts-expect-error this violates the typing but class does it, too.
         this.docView = null;
         this._destroyed = false;
-        this.deferPendingEffects = false;
     }
     get props() {
         return this.nextProps;

package/dist/esm/components/ChildNodeViews.js CHANGED Viewed

@@ -51,18 +51,13 @@ const ChildView = /*#__PURE__*/ memo(function ChildView(param) {
         key: child.key
     }, (param)=>{
         let { siblingsRef, parentRef } = param;
-        return /*#__PURE__*/ React.createElement(EditorContext.Consumer, null, (param)=>{
-            let { registerEventListener, unregisterEventListener } = param;
-            return /*#__PURE__*/ React.createElement(TextNodeView, {
-                view: view,
-                node: child.node,
-                getPos: getPos,
-                siblingsRef: siblingsRef,
-                parentRef: parentRef,
-                decorations: child.outerDeco,
-                registerEventListener: registerEventListener,
-                unregisterEventListener: unregisterEventListener
-            });
+        return /*#__PURE__*/ React.createElement(TextNodeView, {
+            view: view,
+            node: child.node,
+            getPos: getPos,
+            siblingsRef: siblingsRef,
+            parentRef: parentRef,
+            decorations: child.outerDeco
         });
     }) : /*#__PURE__*/ React.createElement(NodeView, {
         key: child.key,
@@ -345,14 +340,14 @@ export const ChildNodeViews = /*#__PURE__*/ memo(function ChildNodeViews(param)
                 component: SeparatorHackView,
                 marks: [],
                 offset: lastChild?.offset ?? 0,
-                index: (lastChild?.index ?? 0) + 1,
+                index: (lastChild?.index ?? 0) + 2,
                 key: "trailing-hack-img"
             }, {
                 type: "hack",
                 component: TrailingHackView,
                 marks: [],
                 offset: lastChild?.offset ?? 0,
-                index: (lastChild?.index ?? 0) + 2,
+                index: (lastChild?.index ?? 0) + 1,
                 key: "trailing-hack-br"
             });
         }

package/dist/esm/components/CursorWrapper.js CHANGED Viewed

@@ -1,9 +1,8 @@
-import React, { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import { domIndex } from "../dom.js";
 import { useEditorEffect } from "../hooks/useEditorEffect.js";
 export const CursorWrapper = /*#__PURE__*/ forwardRef(function CursorWrapper(param, ref) {
     let { widget, getPos, ...props } = param;
-    const [shouldRender, setShouldRender] = useState(true);
     const innerRef = useRef(null);
     useImperativeHandle(ref, ()=>{
         return innerRef.current;
@@ -15,18 +14,22 @@ export const CursorWrapper = /*#__PURE__*/ forwardRef(function CursorWrapper(par
         // @ts-expect-error Internal property - domSelection
         const domSel = view.domSelection();
         const node = innerRef.current;
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        domSel.collapse(node.parentNode, domIndex(node) + 1);
+        const img = node.nodeName == "IMG";
+        if (img) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            domSel.collapse(node.parentNode, domIndex(node) + 1);
+        } else {
+            domSel.collapse(node, 0);
+        }
         // @ts-expect-error Internal property - domObserver
         view.domObserver.connectSelection();
-        setShouldRender(false);
     }, []);
-    return shouldRender ? /*#__PURE__*/ React.createElement("img", {
+    return /*#__PURE__*/ React.createElement("img", {
         ref: innerRef,
         className: "ProseMirror-separator",
         // eslint-disable-next-line react/no-unknown-property
         "mark-placeholder": "true",
         alt: "",
         ...props
-    }) : null;
+    });
 });

package/dist/esm/components/TextNodeView.js CHANGED Viewed

@@ -1,7 +1,5 @@
-import { TextSelection } from "prosemirror-state";
 import { DecorationSet } from "prosemirror-view";
 import { Component } from "react";
-import { ReactEditorView } from "../ReactEditorView.js";
 import { findDOMNode } from "../findDOMNode.js";
 import { CompositionViewDesc, TextViewDesc, sortViewDescs } from "../viewdesc.js";
 import { wrapInDeco } from "./ChildNodeViews.js";
@@ -30,141 +28,72 @@ function shallowEqual(objA, objB) {
 export class TextNodeView extends Component {
     viewDescRef = null;
     renderRef = null;
-    wasProtecting = false;
-    containsCompositionNodeText = true;
-    // 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)) return false;
-        if (!view.composing) {
-            return false;
-        }
-        const pos = getPos();
-        const { from, to } = view.state.selection;
-        if (!(view.state.selection instanceof TextSelection) || from < pos || to > pos + node.nodeSize) {
-            return false;
-        }
-        return this.containsCompositionNodeText;
-    }
-    handleCompositionEnd = ()=>{
-        if (!this.wasProtecting) return;
-        this.forceUpdate();
-        return;
-    };
-    create() {
+    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
         const dom = findDOMNode(this);
-        if (!dom && !view.composing) return null;
-        let textNode = dom;
-        while(textNode?.firstChild){
-            textNode = textNode.firstChild;
-        }
-        if (!(textNode instanceof Text)) {
-            textNode = null;
-        }
-        let viewDesc;
-        if (this.shouldProtect(this.props)) {
-            viewDesc = new 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.
+        // 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 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.
-            dom ?? document.createElement("div"), textNode ?? document.createTextNode(node.text ?? ""), node.text ?? "");
-        } else {
-            if (!dom || !textNode) return null;
-            viewDesc = new TextViewDesc(parentRef.current, [], getPos, node, decorations, DecorationSet.empty, dom, textNode);
-        }
-        siblingsRef.current.push(viewDesc);
-        siblingsRef.current.sort(sortViewDescs);
-        return viewDesc;
-    }
-    update() {
-        const { view, node, decorations } = this.props;
-        if (!(view instanceof ReactEditorView)) return false;
-        const viewDesc = this.viewDescRef;
-        if (!viewDesc) return false;
-        if (this.shouldProtect(this.props) !== viewDesc instanceof CompositionViewDesc) {
-            return false;
-        }
-        if (viewDesc instanceof CompositionViewDesc) return false;
-        const dom = findDOMNode(this);
-        if (!dom || dom !== viewDesc.dom) return false;
-        if (!dom.contains(viewDesc.nodeDOM)) return false;
-        return viewDesc.matchesNode(node, decorations, DecorationSet.empty) || viewDesc.update(node, decorations, DecorationSet.empty, view);
-    }
-    destroy() {
-        const viewDesc = this.viewDescRef;
-        if (!viewDesc) return;
-        viewDesc.destroy();
-        const siblings = this.props.siblingsRef.current;
-        if (siblings.includes(viewDesc)) {
-            const index = siblings.indexOf(viewDesc);
-            siblings.splice(index, 1);
+            document.createElement("div"), document.createTextNode(node.text ?? ""), node.text ?? "");
+            return;
         }
-    }
-    updateEffect() {
-        if (!this.update()) {
-            this.destroy();
-            this.viewDescRef = this.create();
+        let textNode = dom;
+        while(textNode.firstChild){
+            textNode = textNode.firstChild;
         }
-        const { view, node } = this.props;
-        if (!(view instanceof ReactEditorView)) {
-            this.containsCompositionNodeText = true;
-            return;
+        if (!this.viewDescRef || this.viewDescRef instanceof CompositionViewDesc) {
+            this.viewDescRef = new TextViewDesc(undefined, [], getPos, node, decorations, DecorationSet.empty, dom, textNode);
+        } else {
+            this.viewDescRef.parent = parentRef.current;
+            this.viewDescRef.children = [];
+            this.viewDescRef.node = node;
+            this.viewDescRef.outerDeco = decorations;
+            this.viewDescRef.innerDeco = DecorationSet.empty;
+            this.viewDescRef.dom = dom;
+            this.viewDescRef.dom.pmViewDesc = this.viewDescRef;
+            this.viewDescRef.nodeDOM = textNode;
         }
-        const textNode = view.input.compositionNode;
-        if (!textNode) {
-            this.containsCompositionNodeText = true;
-            return;
+        if (!siblingsRef.current.includes(this.viewDescRef)) {
+            siblingsRef.current.push(this.viewDescRef);
         }
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const text = textNode.nodeValue;
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        this.containsCompositionNodeText = node.text === text;
+        siblingsRef.current.sort(sortViewDescs);
     }
     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 && !this.shouldProtect(nextProps)) {
-            return true;
-        }
         return !shallowEqual(this.props, nextProps);
     }
     componentDidMount() {
-        this.viewDescRef = null;
-        // 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.updateEffect();
     }
     componentDidUpdate() {
         this.updateEffect();
     }
     componentWillUnmount() {
-        const { unregisterEventListener } = this.props;
-        unregisterEventListener("compositionend", this.handleCompositionEnd);
-        this.destroy();
+        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);
+        }
     }
     render() {
-        const { node, decorations } = this.props;
+        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 (this.shouldProtect(this.props)) {
-            this.wasProtecting = true;
+        if (view.composing && view.state.selection.from >= getPos() && view.state.selection.from <= getPos() + node.nodeSize) {
             return this.renderRef;
         }
-        this.wasProtecting = false;
         this.renderRef = decorations.reduce(wrapInDeco, node.text);
         return this.renderRef;
     }

package/dist/esm/components/TrailingHackView.js CHANGED Viewed

@@ -1,12 +1,9 @@
-import React, { useContext, useRef, useState } from "react";
+import React, { useContext, useRef } from "react";
 import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
 import { useClientLayoutEffect } from "../hooks/useClientLayoutEffect.js";
-import { useEditorEffect } from "../hooks/useEditorEffect.js";
-import { useEditorEventListener } from "../hooks/useEditorEventListener.js";
 import { TrailingHackViewDesc, sortViewDescs } from "../viewdesc.js";
 export function TrailingHackView(param) {
     let { getPos } = param;
-    const [shouldRender, setShouldRender] = useState(true);
     const { siblingsRef, parentRef } = useContext(ChildDescriptionsContext);
     const viewDescRef = useRef(null);
     const ref = useRef(null);
@@ -35,32 +32,6 @@ export function TrailingHackView(param) {
         }
         siblingsRef.current.sort(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
-    useEditorEventListener("compositionstart", (view)=>{
-        const { from } = view.state.selection;
-        if (from === getPos()) {
-            setShouldRender(false);
-        }
-    });
-    // 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
-    useEditorEffect((view)=>{
-        if (!view.composing) return;
-        const { from } = view.state.selection;
-        if (from === getPos()) {
-            setShouldRender(false);
-        }
-    }, [
-        getPos
-    ]);
-    useEditorEventListener("compositionend", ()=>{
-        setShouldRender(true);
-    });
-    if (!shouldRender) return null;
     return /*#__PURE__*/ React.createElement("br", {
         ref: ref,
         className: "ProseMirror-trailingBreak"

package/dist/esm/components/WidgetView.js CHANGED Viewed

@@ -27,6 +27,7 @@ export function WidgetView(param) {
             viewDescRef.current.parent = parentRef.current;
             viewDescRef.current.widget = widget;
             viewDescRef.current.dom = domRef.current;
+            viewDescRef.current.dom.pmViewDesc = viewDescRef.current;
         }
         if (!siblingsRef.current.includes(viewDescRef.current)) {
             siblingsRef.current.push(viewDescRef.current);

package/dist/esm/hooks/useComponentEventListeners.js CHANGED Viewed

@@ -25,16 +25,8 @@ import { unstable_batchedUpdates as batch } from "react-dom";
  *
  * To accomplish this, we shallowly clone the registry whenever a new event
  * type is registered.
- */ export function useComponentEventListeners(existingHandlers) {
-    const [registry, setRegistry] = useState(new Map(Object.entries(existingHandlers ?? {}).map((param)=>{
-        let [eventName, handler] = param;
-        return [
-            eventName,
-            handler ? [
-                handler
-            ] : []
-        ];
-    })));
+ */ export function useComponentEventListeners(handleDOMEventsProp) {
+    const [registry, setRegistry] = useState(new Map());
     const registerEventListener = useCallback((eventType, handler)=>{
         const handlers = registry.get(eventType) ?? [];
         handlers.unshift(handler);
@@ -52,19 +44,19 @@ import { unstable_batchedUpdates as batch } from "react-dom";
         registry
     ]);
     useLayoutEffect(()=>{
-        if (!existingHandlers) return;
-        for (const [eventType, handler] of Object.entries(existingHandlers)){
+        if (!handleDOMEventsProp) return;
+        for (const [eventType, handler] of Object.entries(handleDOMEventsProp)){
             if (!handler) return;
             registerEventListener(eventType, handler);
         }
         return ()=>{
-            for (const [eventType, handler] of Object.entries(existingHandlers)){
+            for (const [eventType, handler] of Object.entries(handleDOMEventsProp)){
                 if (!handler) return;
                 unregisterEventListener(eventType, handler);
             }
         };
     }, [
-        existingHandlers,
+        handleDOMEventsProp,
         registerEventListener,
         unregisterEventListener
     ]);

package/dist/esm/hooks/useNodeViewDescription.js CHANGED Viewed

@@ -1,10 +1,8 @@
 import { useCallback, useContext, useMemo, useRef } from "react";
 import { ReactEditorView } from "../ReactEditorView.js";
-import { CursorWrapper } from "../components/CursorWrapper.js";
 import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
 import { EditorContext } from "../contexts/EditorContext.js";
-import { ReactWidgetType } from "../decorations/ReactWidgetType.js";
-import { CompositionViewDesc, MarkViewDesc, ReactNodeViewDesc, WidgetViewDesc, sortViewDescs } from "../viewdesc.js";
+import { CompositionViewDesc, ReactNodeViewDesc, sortViewDescs } from "../viewdesc.js";
 import { useClientLayoutEffect } from "./useClientLayoutEffect.js";
 import { useEffectEvent } from "./useEffectEvent.js";
 export function useNodeViewDescription(getDOM, getContentDOM, constructor, props) {
@@ -133,44 +131,25 @@ export function useNodeViewDescription(getDOM, getContentDOM, constructor, props
         children.sort(sortViewDescs);
         for (const child of children){
             child.parent = viewDesc;
-        }
-        if (!props.node.isTextblock) return;
-        // Because TextNodeViews can't locate the DOM nodes
-        // for compositions, we need to override them here
-        if (!viewDescRef.current?.contentDOM) return;
-        const compositionChildIndex = children.findIndex((child)=>child instanceof CompositionViewDesc);
-        if (compositionChildIndex === -1) return;
-        const compositionViewDesc = children[compositionChildIndex];
-        if (!(compositionViewDesc instanceof CompositionViewDesc)) return;
-        let compositionTopDOM = null;
-        let search = children[compositionChildIndex - 1];
-        while(search instanceof MarkViewDesc){
-            search = search.children[0];
-        }
-        if (search instanceof WidgetViewDesc && search.widget.type instanceof ReactWidgetType && search.widget.type.Component === CursorWrapper) {
-            compositionTopDOM = search.dom.nextSibling;
-        } else {
-            for (const childNode of viewDescRef.current.contentDOM.childNodes){
-                if (children.every((child)=>child.dom !== childNode)) {
-                    compositionTopDOM = childNode;
-                    break;
+            // Because TextNodeViews can't locate the DOM nodes
+            // for compositions, we need to override them here
+            if (child instanceof CompositionViewDesc) {
+                const compositionTopDOM = viewDesc?.contentDOM?.firstChild;
+                if (!compositionTopDOM) throw new Error(`Started a composition but couldn't find the text node it belongs to.`);
+                let textDOM = compositionTopDOM;
+                while(textDOM.firstChild){
+                    textDOM = textDOM.firstChild;
                 }
+                if (!textDOM || !(textDOM instanceof Text)) throw new Error(`Started a composition but couldn't find the text node it belongs to.`);
+                child.dom = compositionTopDOM;
+                child.textDOM = textDOM;
+                child.text = textDOM.data;
+                child.textDOM.pmViewDesc = child;
+                // It should not be possible to be in a composition because one could
+                // not start between the renders that switch the view type.
+                view.input.compositionNodes.push(child);
             }
         }
-        if (!compositionTopDOM) return;
-        let textDOM = compositionTopDOM;
-        while(textDOM.firstChild){
-            textDOM = textDOM.firstChild;
-        }
-        if (!textDOM || !(textDOM instanceof Text)) {
-            console.error(compositionTopDOM, textDOM);
-            throw new Error(`Started a composition but couldn't find the text node it belongs to.`);
-        }
-        compositionViewDesc.dom = compositionTopDOM;
-        compositionViewDesc.textDOM = textDOM;
-        compositionViewDesc.text = textDOM.data;
-        compositionViewDesc.textDOM.pmViewDesc = compositionViewDesc;
-        view.input.compositionNodes.push(compositionViewDesc);
     });
     const childContextValue = useMemo(()=>({
             parentRef: viewDescRef,