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

package/dist/cjs/viewdesc.js

@@ -266,7 +266,9 @@ 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
@@ -401,7 +403,9 @@ 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.
@@ -666,7 +670,10 @@ let TextViewDesc = class TextViewDesc extends NodeViewDesc {
             skip: skip || true
         };
     }
-    update(_node, _outerDeco, _innerDeco, _view) {
+    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;
         this.dirty = NOT_DIRTY;
         return true;
     }

package/dist/esm/ReactEditorView.js

@@ -33,6 +33,7 @@ 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.
@@ -85,6 +86,7 @@ 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

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

package/dist/esm/components/CursorWrapper.js

@@ -1,8 +1,9 @@
-import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import React, { forwardRef, useImperativeHandle, useRef, useState } 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;
@@ -14,22 +15,18 @@ export const CursorWrapper = /*#__PURE__*/ forwardRef(function CursorWrapper(par
         // @ts-expect-error Internal property - domSelection
         const domSel = view.domSelection();
         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, domIndex(node) + 1);
-        } else {
-            domSel.collapse(node, 0);
-        }
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        domSel.collapse(node.parentNode, domIndex(node) + 1);
         // @ts-expect-error Internal property - domObserver
         view.domObserver.connectSelection();
+        setShouldRender(false);
     }, []);
-    return /*#__PURE__*/ React.createElement("img", {
+    return shouldRender ? /*#__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

@@ -1,5 +1,7 @@
+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";
@@ -28,72 +30,141 @@ function shallowEqual(objA, objB) {
 export class TextNodeView extends Component {
     viewDescRef = null;
     renderRef = null;
-    updateEffect() {
+    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() {
         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);
-        // 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.
-            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 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;
+        if (!(textNode instanceof Text)) {
+            textNode = null;
         }
-        if (!siblingsRef.current.includes(this.viewDescRef)) {
-            siblingsRef.current.push(this.viewDescRef);
+        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.
+            // 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);
+        }
+    }
+    updateEffect() {
+        if (!this.update()) {
+            this.destroy();
+            this.viewDescRef = this.create();
+        }
+        const { view, node } = this.props;
+        if (!(view instanceof ReactEditorView)) {
+            this.containsCompositionNodeText = true;
+            return;
+        }
+        const textNode = view.input.compositionNode;
+        if (!textNode) {
+            this.containsCompositionNodeText = true;
+            return;
+        }
+        // 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;
     }
     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 { 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);
-        }
+        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) {
+        if (this.shouldProtect(this.props)) {
+            this.wasProtecting = true;
             return this.renderRef;
         }
+        this.wasProtecting = false;
         this.renderRef = decorations.reduce(wrapInDeco, node.text);
         return this.renderRef;
     }

package/dist/esm/components/TrailingHackView.js

@@ -1,9 +1,12 @@
-import React, { useContext, useRef } from "react";
+import React, { useContext, useRef, useState } 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);
@@ -32,6 +35,32 @@ 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/hooks/useComponentEventListeners.js

@@ -1,5 +1,5 @@
-/* Copyright (c) The New York Times Company */ import { useCallback, useMemo, useState } from "react";
-import { componentEventListeners } from "../plugins/componentEventListeners.js";
+/* Copyright (c) The New York Times Company */ import { useCallback, useLayoutEffect, useMemo, useState } from "react";
+import { unstable_batchedUpdates as batch } from "react-dom";
 /**
  * Produces a plugin that can be used with ProseMirror to handle DOM
  * events at the EditorView.dom element.
@@ -14,19 +14,27 @@ import { componentEventListeners } from "../plugins/componentEventListeners.js";
  * @privateRemarks
  *
  * This hook uses a combination of mutable and immutable updates to give
- * us precise control over when we re-create the ProseMirror plugin.
+ * us precise control over when we re-create the event listeners.
  *
- * The plugin has a mutable reference to the set of handlers for each
+ * The hook has a mutable reference to the set of handlers for each
  * event type, but the set of event types is static. This means that we
- * need to produce a new ProseMirror plugin whenever a new event type is
- * registered. We avoid producing a new ProseMirrer plugin in any other
- * scenario to avoid the performance overhead of reconfiguring the plugins
- * in the EditorView.
+ * need to produce a new handleDOMEVents record whenever a new event type is
+ * registered. We avoid producing a new record in any other
+ * scenario to avoid the performance overhead of re-registering the event
+ * listeners in the EditorView.
  *
  * To accomplish this, we shallowly clone the registry whenever a new event
  * type is registered.
- */ export function useComponentEventListeners() {
-    const [registry, setRegistry] = useState(new Map());
+ */ export function useComponentEventListeners(existingHandlers) {
+    const [registry, setRegistry] = useState(new Map(Object.entries(existingHandlers ?? {}).map((param)=>{
+        let [eventName, handler] = param;
+        return [
+            eventName,
+            handler ? [
+                handler
+            ] : []
+        ];
+    })));
     const registerEventListener = useCallback((eventType, handler)=>{
         const handlers = registry.get(eventType) ?? [];
         handlers.unshift(handler);
@@ -43,12 +51,45 @@ import { componentEventListeners } from "../plugins/componentEventListeners.js";
     }, [
         registry
     ]);
-    const componentEventListenersPlugin = useMemo(()=>componentEventListeners(registry), [
+    useLayoutEffect(()=>{
+        if (!existingHandlers) return;
+        for (const [eventType, handler] of Object.entries(existingHandlers)){
+            if (!handler) return;
+            registerEventListener(eventType, handler);
+        }
+        return ()=>{
+            for (const [eventType, handler] of Object.entries(existingHandlers)){
+                if (!handler) return;
+                unregisterEventListener(eventType, handler);
+            }
+        };
+    }, [
+        existingHandlers,
+        registerEventListener,
+        unregisterEventListener
+    ]);
+    const handleDOMEvents = useMemo(()=>{
+        const domEventHandlers = {};
+        for (const [eventType, handlers] of registry.entries()){
+            function handleEvent(view, event) {
+                for (const handler of handlers){
+                    let handled = false;
+                    batch(()=>{
+                        handled = !!handler(view, event);
+                    });
+                    if (handled || event.defaultPrevented) return true;
+                }
+                return false;
+            }
+            domEventHandlers[eventType] = handleEvent;
+        }
+        return domEventHandlers;
+    }, [
         registry
     ]);
     return {
         registerEventListener,
         unregisterEventListener,
-        componentEventListenersPlugin
+        handleDOMEvents
     };
 }

package/dist/esm/hooks/useEditor.js

@@ -30,7 +30,7 @@ let didWarnValueDefaultValue = false;
     const defaultState = options.defaultState ?? EMPTY_STATE;
     const [_state, setState] = useState(defaultState);
     const state = options.state ?? _state;
-    const { componentEventListenersPlugin, registerEventListener, unregisterEventListener } = useComponentEventListeners();
+    const { handleDOMEvents, registerEventListener, unregisterEventListener } = useComponentEventListeners(options.handleDOMEvents);
     const setCursorWrapper = useCallback((deco)=>{
         flushSync(()=>{
             _setCursorWrapper(deco);
@@ -38,11 +38,9 @@ let didWarnValueDefaultValue = false;
     }, []);
     const plugins = useMemo(()=>[
             ...options.plugins ?? [],
-            componentEventListenersPlugin,
             beforeInputPlugin(setCursorWrapper)
         ], [
         options.plugins,
-        componentEventListenersPlugin,
         setCursorWrapper
     ]);
     const dispatchTransaction = useCallback(function dispatchTransaction(tr) {
@@ -71,7 +69,8 @@ let didWarnValueDefaultValue = false;
         ...options,
         state,
         plugins,
-        dispatchTransaction
+        dispatchTransaction,
+        handleDOMEvents
     };
     const [view, setView] = useState(()=>{
         return new StaticEditorView(directEditorProps);
@@ -101,8 +100,6 @@ let didWarnValueDefaultValue = false;
         // running effects. Running effects will reattach selection
         // change listeners if the EditorView has been destroyed.
         if (view instanceof ReactEditorView && !view.isDestroyed) {
-            // Plugins might dispatch transactions from their
-            // view update lifecycle hooks
             flushSyncRef.current = false;
             view.commitPendingEffects();
             flushSyncRef.current = true;

package/dist/esm/hooks/useNodeViewDescription.js

@@ -1,8 +1,10 @@
 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 { CompositionViewDesc, ReactNodeViewDesc, sortViewDescs } from "../viewdesc.js";
+import { ReactWidgetType } from "../decorations/ReactWidgetType.js";
+import { CompositionViewDesc, MarkViewDesc, ReactNodeViewDesc, WidgetViewDesc, sortViewDescs } from "../viewdesc.js";
 import { useClientLayoutEffect } from "./useClientLayoutEffect.js";
 import { useEffectEvent } from "./useEffectEvent.js";
 export function useNodeViewDescription(getDOM, getContentDOM, constructor, props) {
@@ -131,25 +133,44 @@ export function useNodeViewDescription(getDOM, getContentDOM, constructor, props
         children.sort(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 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 (!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;
                 }
-                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,