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

package/dist/esm/components/CursorWrapper.js

@@ -1,4 +1,5 @@
 import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import { ReactEditorView } from "../ReactEditorView.js";
 import { domIndex } from "../dom.js";
 import { useEditorEffect } from "../hooks/useEditorEffect.js";
 export const CursorWrapper = /*#__PURE__*/ forwardRef(function CursorWrapper(param, ref) {
@@ -8,17 +9,18 @@ export const CursorWrapper = /*#__PURE__*/ forwardRef(function CursorWrapper(par
         return innerRef.current;
     }, []);
     useEditorEffect((view)=>{
-        if (!view || !innerRef.current) return;
-        // @ts-expect-error Internal property - domObserver
+        if (!(view instanceof 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;
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         domSel.collapse(node.parentNode, domIndex(node) + 1);
-        // @ts-expect-error Internal property - domObserver
+        view.cursorWrapped = true;
         view.domObserver.connectSelection();
+        return ()=>{
+            view.cursorWrapped = false;
+        };
     }, []);
     return /*#__PURE__*/ React.createElement("img", {
         ref: innerRef,

package/dist/esm/components/ProseMirror.js

@@ -1,11 +1,13 @@
 import React, { useMemo, useState } from "react";
 import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
+import { CompositionContext } from "../contexts/CompositionContext.js";
 import { EditorContext } from "../contexts/EditorContext.js";
 import { EditorStateContext } from "../contexts/EditorStateContext.js";
 import { NodeViewContext } from "../contexts/NodeViewContext.js";
 import { computeDocDeco } from "../decorations/computeDocDeco.js";
 import { viewDecorations } from "../decorations/viewDecorations.js";
 import { useEditor } from "../hooks/useEditor.js";
+import { reactKeysPluginKey } from "../plugins/reactKeys.js";
 import { LayoutGroup } from "./LayoutGroup.js";
 import { DocNodeViewContext } from "./ProseMirrorDoc.js";
 function getPos() {
@@ -17,9 +19,7 @@ const rootChildDescriptionsContextValue = {
     },
     siblingsRef: {
         current: []
-    },
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    findCompositionDOM: ()=>{}
+    }
 };
 function ProseMirrorInner(param) {
     let { children, nodeViewComponents, markViewComponents, ...props } = param;
@@ -53,6 +53,12 @@ function ProseMirrorInner(param) {
         decorations,
         innerDecorations
     ]);
+    const freezeFrom = reactKeysPluginKey.getState(state)?.freezeFrom ?? null;
+    const compositionContextValue = useMemo(()=>({
+            freezeFrom
+        }), [
+        freezeFrom
+    ]);
     return /*#__PURE__*/ React.createElement(EditorContext.Provider, {
         value: editor
     }, /*#__PURE__*/ React.createElement(EditorStateContext.Provider, {
@@ -61,9 +67,11 @@ function ProseMirrorInner(param) {
         value: nodeViewContextValue
     }, /*#__PURE__*/ React.createElement(ChildDescriptionsContext.Provider, {
         value: rootChildDescriptionsContextValue
+    }, /*#__PURE__*/ React.createElement(CompositionContext.Provider, {
+        value: compositionContextValue
     }, /*#__PURE__*/ React.createElement(DocNodeViewContext.Provider, {
         value: docNodeViewContextValue
-    }, children)))));
+    }, children))))));
 }
 export function ProseMirror(props) {
     return /*#__PURE__*/ React.createElement(LayoutGroup, null, /*#__PURE__*/ React.createElement(ProseMirrorInner, props));

package/dist/esm/components/TextNodeView.js

@@ -1,9 +1,8 @@
-import { TextSelection } from "prosemirror-state";
 import { DecorationSet } from "prosemirror-view";
-import React, { Component, createRef, useReducer } from "react";
+import { Component, createRef } from "react";
 import { ReactEditorView } from "../ReactEditorView.js";
 import { findDOMNode } from "../findDOMNode.js";
-import { CompositionViewDesc, TextViewDesc, findTextInFragment, sortViewDescs } from "../viewdesc.js";
+import { TextViewDesc, sortViewDescs } from "../viewdesc.js";
 import { wrapInDeco } from "./ChildNodeViews.js";
 function shallowEqual(objA, objB) {
     if (objA === objB) {
@@ -29,57 +28,6 @@ function shallowEqual(objA, objB) {
 }
 export class TextNodeView extends Component {
     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)) 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 TextViewDesc && viewDesc.nodeDOM === view.input.compositionNode;
-        if (!ownsCompositionNode) {
-            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.current;
-    }
-    handleCompositionEnd = ()=>{
-        if (!this.wasProtecting.current) return;
-        const { view } = this.props;
-        if (!(view instanceof 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 = findDOMNode(this);
-        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 = findDOMNode(this);
@@ -91,24 +39,10 @@ export class TextNodeView extends Component {
         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.
-            // 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);
-        }
+        if (!dom || !textNode) return null;
+        const viewDesc = new TextViewDesc(parentRef.current, [], getPos, node, decorations, DecorationSet.empty, dom, textNode);
         siblingsRef.current.push(viewDesc);
         siblingsRef.current.sort(sortViewDescs);
-        if (viewDesc instanceof CompositionViewDesc) {
-            this.props.findCompositionDOM(viewDesc);
-        }
         return viewDesc;
     }
     update() {
@@ -116,18 +50,6 @@ export class TextNodeView extends Component {
         if (!(view instanceof 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 TextViewDesc && viewDesc.nodeDOM === view.input.compositionNode;
-        if (!ownsCompositionNode && 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;
@@ -148,58 +70,15 @@ export class TextNodeView extends Component {
             this.destroy();
             this.viewDescRef.current = this.create();
         }
-        const { view } = this.props;
-        if (!(view instanceof 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 = 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();
     }
@@ -208,43 +87,12 @@ export class TextNodeView extends Component {
         const { view } = this.props;
         if (!(view instanceof ReactEditorView)) return;
     }
-    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 { 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.current = true;
-            return this.renderRef.current;
-        }
-        this.wasProtecting.current = false;
-        this.renderRef.current = decorations.reduce(wrapInDeco, node.text);
-        return this.renderRef.current;
+        return decorations.reduce(wrapInDeco, node.text);
     }
 }
 /**
@@ -254,11 +102,3 @@ export class TextNodeView extends Component {
  */ function createMutRef() {
     return /*#__PURE__*/ createRef();
 }
-export function RemountableTextNodeView(props) {
-    const [key, forceRemount] = useReducer((x)=>x + 1, 0);
-    return /*#__PURE__*/ React.createElement(TextNodeView, {
-        key: key,
-        forceRemount: forceRemount,
-        ...props
-    });
-}

package/dist/esm/components/TrailingHackView.js

@@ -1,21 +1,12 @@
-import React, { useContext, useRef, useState } from "react";
-import { ReactEditorView } from "../ReactEditorView.js";
+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 [shouldReinsert, setShouldReinsert] = useState(false);
     const { siblingsRef, parentRef } = useContext(ChildDescriptionsContext);
     const viewDescRef = useRef(null);
     const ref = useRef(null);
-    const preservedRef = useRef(ref.current);
-    if (ref.current) {
-        preservedRef.current = ref.current;
-    }
     useClientLayoutEffect(()=>{
         const siblings = siblingsRef.current;
         return ()=>{
@@ -41,67 +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);
-            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.
-    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
-    useEditorEffect((view)=>{
-        if (!(view instanceof ReactEditorView)) return;
-        if (!view.compositionStarting) return;
-        const { from } = view.state.selection;
-        if (from === getPos()) {
-            setShouldRender(false);
-        }
-    }, [
-        getPos
-    ]);
-    useEditorEventListener("compositionend", ()=>{
-        setShouldRender(true);
-        setShouldReinsert(false);
-    });
-    if (!shouldRender) return null;
     return /*#__PURE__*/ React.createElement("br", {
         ref: ref,
         className: "ProseMirror-trailingBreak"

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

@@ -1,10 +1,15 @@
-import React, { createContext, memo, useContext, useMemo } from "react";
+import React, { createContext, memo, useContext, useLayoutEffect, useMemo, useReducer, useRef } from "react";
+import { CompositionContext } from "../../contexts/CompositionContext.js";
 import { NodeViewContext } from "../../contexts/NodeViewContext.js";
 import { DefaultNodeView } from "./DefaultNodeView.js";
 import { NodeViewConstructorView } from "./NodeViewConstructorView.js";
 import { ReactNodeView } from "./ReactNodeView.js";
-export const NodeView = /*#__PURE__*/ memo(function NodeView(props) {
+export const NodeView = /*#__PURE__*/ memo(function NodeView(param) {
+    let { forceRemount, ...props } = param;
+    const renderRef = useRef(null);
+    const { freezeFrom } = useContext(CompositionContext);
     const { components, constructors } = useContext(NodeViewContext);
+    const committedFrozenRef = useRef(false);
     const component = components[props.node.type.name] ?? DefaultNodeView;
     const constructor = constructors[props.node.type.name];
     // Construct a wrapper component so that the node view remounts when either
@@ -31,8 +36,36 @@ export const NodeView = /*#__PURE__*/ memo(function NodeView(props) {
         constructor,
         component
     ]);
-    return /*#__PURE__*/ React.createElement(GetPosContext.Provider, {
-        value: props.getPos
-    }, /*#__PURE__*/ React.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.createElement(GetPosContext.Provider, {
+            value: props.getPos
+        }, /*#__PURE__*/ React.createElement(Component, props));
+    }
+    useLayoutEffect(()=>{
+        const wasFrozen = committedFrozenRef.current;
+        committedFrozenRef.current = frozen;
+        if (wasFrozen && !frozen) forceRemount();
+    }, [
+        frozen,
+        forceRemount
+    ]);
+    return renderRef.current;
 });
 export const GetPosContext = /*#__PURE__*/ createContext(null);
+export function RemountableNodeView(props) {
+    const [key, forceRemount] = useReducer((x)=>x + 1, 0);
+    return /*#__PURE__*/ React.createElement(NodeView, {
+        key: key.toString(),
+        ...props,
+        forceRemount: forceRemount
+    });
+}

package/dist/esm/contexts/ChildDescriptionsContext.js

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

package/dist/esm/contexts/CompositionContext.js

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+export const CompositionContext = createContext({
+    freezeFrom: null
+});

package/dist/esm/hooks/useIsEditorStatic.js

@@ -1,5 +1,8 @@
 import { useContext } from "react";
 import { EditorContext } from "../contexts/EditorContext.js";
-export function useIsEditorStatic() {
+/**
+ * Returns true if the nearest ProseMirror component
+ * is rendered with the `static` prop set to `true`.
+ */ export function useIsEditorStatic() {
     return useContext(EditorContext)?.isStatic ?? false;
 }

package/dist/esm/hooks/useMarkViewDescription.js

@@ -2,7 +2,7 @@ import { useCallback, useContext, useMemo, useRef } from "react";
 import { ReactEditorView } from "../ReactEditorView.js";
 import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
 import { EditorContext } from "../contexts/EditorContext.js";
-import { ReactMarkViewDesc, TextViewDesc, sortViewDescs } from "../viewdesc.js";
+import { ReactMarkViewDesc, sortViewDescs } from "../viewdesc.js";
 import { useClientLayoutEffect } from "./useClientLayoutEffect.js";
 import { useEffectEvent } from "./useEffectEvent.js";
 export function useMarkViewDescription(getDOM, getContentDOM, constructor, props) {
@@ -110,71 +110,10 @@ export function useMarkViewDescription(getDOM, getContentDOM, constructor, props
             child.parent = viewDesc;
         }
     });
-    const findCompositionDOM = useCallback((compositionViewDesc)=>{
-        const children = childrenRef.current;
-        // Because TextNodeViews can't locate the DOM nodes
-        // for compositions, we need to override them here
-        if (!viewDescRef.current?.contentDOM) return;
-        let compositionTopDOM = null;
-        for (const childNode of viewDescRef.current.contentDOM.childNodes){
-            if (children.every((child)=>child.dom !== childNode)) {
-                compositionTopDOM = childNode;
-                break;
-            }
-        }
-        if (!compositionTopDOM) {
-            // Otherwise the IME extended an existing tracked text node. Take it over.
-            const reactView = view;
-            const imeTextNode = reactView.input.compositionNode;
-            if (!imeTextNode || !viewDescRef.current.contentDOM.contains(imeTextNode.parentNode)) {
-                return;
-            }
-            const claimedDesc = imeTextNode.pmViewDesc;
-            if (!(claimedDesc instanceof TextViewDesc)) return;
-            if (claimedDesc.node.text === imeTextNode.nodeValue) return; // not extended
-            // Walk up to the direct child of contentDOM that contains the IME text node
-            // (could be the text node itself, could be wrapped in a mark span).
-            let topDOM = imeTextNode;
-            while(topDOM.parentNode !== viewDescRef.current.contentDOM){
-                const next = topDOM.parentNode;
-                if (!next) return;
-                topDOM = next;
-            }
-            // Detach the displaced TextViewDesc from the sibling list so sibling-size
-            // accounting (used by posBeforeChild) doesn't double-count this text node.
-            const displacedIdx = children.indexOf(claimedDesc);
-            if (displacedIdx >= 0) children.splice(displacedIdx, 1);
-            compositionViewDesc.dom = topDOM;
-            compositionViewDesc.textDOM = imeTextNode;
-            compositionViewDesc.text = imeTextNode.data;
-            imeTextNode.pmViewDesc = compositionViewDesc;
-            compositionViewDesc._displacedDesc = claimedDesc;
-            reactView.input.compositionNodes.push(compositionViewDesc);
-            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);
-    }, [
-        view
-    ]);
     const childContextValue = useMemo(()=>({
             parentRef: viewDescRef,
-            siblingsRef: childrenRef,
-            findCompositionDOM
-        }), [
-        findCompositionDOM
-    ]);
+            siblingsRef: childrenRef
+        }), []);
     return {
         childContextValue,
         contentDOM: contentDOMRef.current ?? viewDescRef.current?.dom,

package/dist/esm/hooks/useNodeViewDescription.js

@@ -2,7 +2,7 @@ import { useCallback, useContext, useMemo, useRef } from "react";
 import { ReactEditorView } from "../ReactEditorView.js";
 import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
 import { EditorContext } from "../contexts/EditorContext.js";
-import { ReactNodeViewDesc, TextViewDesc, sortViewDescs } from "../viewdesc.js";
+import { ReactNodeViewDesc, sortViewDescs } from "../viewdesc.js";
 import { useClientLayoutEffect } from "./useClientLayoutEffect.js";
 import { useEffectEvent } from "./useEffectEvent.js";
 export function useNodeViewDescription(getDOM, getContentDOM, constructor, props) {
@@ -133,74 +133,10 @@ export function useNodeViewDescription(getDOM, getContentDOM, constructor, props
             child.parent = viewDesc;
         }
     });
-    const findCompositionDOM = useCallback((compositionViewDesc)=>{
-        if (!props.node.isTextblock) return;
-        const children = childrenRef.current;
-        // Because TextNodeViews can't locate the DOM nodes
-        // for compositions, we need to override them here
-        if (!viewDescRef.current?.contentDOM) return;
-        let compositionTopDOM = null;
-        for (const childNode of viewDescRef.current.contentDOM.childNodes){
-            if (children.every((child)=>child.dom !== childNode)) {
-                compositionTopDOM = childNode;
-                break;
-            }
-        }
-        if (!compositionTopDOM) {
-            // Otherwise the IME extended an existing tracked text node. Take it over.
-            const reactView = view;
-            const imeTextNode = reactView.input.compositionNode;
-            if (!imeTextNode || !viewDescRef.current.contentDOM.contains(imeTextNode.parentNode)) {
-                return;
-            }
-            const claimedDesc = imeTextNode.pmViewDesc;
-            if (!(claimedDesc instanceof TextViewDesc)) return;
-            if (claimedDesc.node.text === imeTextNode.nodeValue) return; // not extended
-            // Walk up to the direct child of contentDOM that contains the IME text node
-            // (could be the text node itself, could be wrapped in a mark span).
-            let topDOM = imeTextNode;
-            while(topDOM.parentNode !== viewDescRef.current.contentDOM){
-                const next = topDOM.parentNode;
-                if (!next) return;
-                topDOM = next;
-            }
-            // Detach the displaced TextViewDesc from the sibling list so sibling-size
-            // accounting (used by posBeforeChild) doesn't double-count this text node.
-            const displacedIdx = children.indexOf(claimedDesc);
-            if (displacedIdx >= 0) children.splice(displacedIdx, 1);
-            reactView.displacedNodes.push(claimedDesc);
-            compositionViewDesc.dom = topDOM;
-            compositionViewDesc.textDOM = imeTextNode;
-            compositionViewDesc.text = imeTextNode.data;
-            imeTextNode.pmViewDesc = compositionViewDesc;
-            compositionViewDesc._displacedDesc = claimedDesc;
-            reactView.input.compositionNodes.push(compositionViewDesc);
-            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);
-    }, [
-        props.node.isTextblock,
-        view
-    ]);
     const childContextValue = useMemo(()=>({
             parentRef: viewDescRef,
-            siblingsRef: childrenRef,
-            findCompositionDOM
-        }), [
-        findCompositionDOM
-    ]);
+            siblingsRef: childrenRef
+        }), []);
     return {
         childContextValue,
         contentDOM: contentDOMRef.current,