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

package/dist/esm/components/TextNodeView.js

@@ -1,7 +1,8 @@
 import { DecorationSet } from "prosemirror-view";
-import { Component } from "react";
+import { Component, createRef } from "react";
+import { ReactEditorView } from "../ReactEditorView.js";
 import { findDOMNode } from "../findDOMNode.js";
-import { CompositionViewDesc, TextViewDesc, sortViewDescs } from "../viewdesc.js";
+import { TextViewDesc, sortViewDescs } from "../viewdesc.js";
 import { wrapInDeco } from "./ChildNodeViews.js";
 function shallowEqual(objA, objB) {
     if (objA === objB) {
@@ -26,75 +27,78 @@ function shallowEqual(objA, objB) {
     return true;
 }
 export class TextNodeView extends Component {
-    viewDescRef = null;
-    renderRef = null;
-    updateEffect() {
+    viewDescRef = createMutRef();
+    create() {
         const { view, decorations, siblingsRef, parentRef, getPos, node } = this.props;
-        // There simply is no other way to ref a text node
-        // eslint-disable-next-line react/no-find-dom-node
         const dom = 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 (!siblingsRef.current.includes(this.viewDescRef)) {
-            siblingsRef.current.push(this.viewDescRef);
+        if (!(textNode instanceof Text)) {
+            textNode = null;
         }
+        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);
+        return viewDesc;
+    }
+    update() {
+        const { view, node, decorations } = this.props;
+        if (!(view instanceof ReactEditorView)) return false;
+        const viewDesc = this.viewDescRef.current;
+        if (!viewDesc) 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.current;
+        if (!viewDesc) return;
+        viewDesc.destroy();
+        const siblings = this.props.siblingsRef.current;
+        if (siblings.includes(viewDesc)) {
+            const index = siblings.indexOf(viewDesc);
+            siblings.splice(index, 1);
+        }
+    }
+    updateEffect() {
+        if (!this.update()) {
+            this.destroy();
+            this.viewDescRef.current = this.create();
+        }
     }
     shouldComponentUpdate(nextProps) {
         return !shallowEqual(this.props, nextProps);
     }
+    constructor(props){
+        super(props);
+        this.viewDescRef.current = null;
+    }
     componentDidMount() {
+        this.viewDescRef.current = this.create();
         this.updateEffect();
     }
     componentDidUpdate() {
         this.updateEffect();
+        const { view } = this.props;
+        if (!(view instanceof ReactEditorView)) return;
     }
     componentWillUnmount() {
-        const { siblingsRef } = this.props;
-        if (!this.viewDescRef) return;
-        if (siblingsRef.current.includes(this.viewDescRef)) {
-            const index = siblingsRef.current.indexOf(this.viewDescRef);
-            siblingsRef.current.splice(index, 1);
-        }
+        this.destroy();
     }
     render() {
-        const { view, getPos, node, decorations } = this.props;
-        // During a composition, it's crucial that we don't try to
-        // update the DOM that the user is working in. If there's
-        // an active composition and the selection is in this node,
-        // we freeze the DOM of this element so that it doesn't
-        // interrupt the composition
-        if (view.composing && view.state.selection.from >= getPos() && view.state.selection.from <= getPos() + node.nodeSize) {
-            return this.renderRef;
-        }
-        this.renderRef = decorations.reduce(wrapInDeco, node.text);
-        return this.renderRef;
+        const { node, decorations } = this.props;
+        return decorations.reduce(wrapInDeco, node.text);
     }
 }
+/**
+ * createRef returns a RefObject, even though the docs
+ * say that it's acceptible to manage the ref's value
+ * yourself.
+ */ function createMutRef() {
+    return /*#__PURE__*/ createRef();
+}

package/dist/esm/components/WidgetView.js

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

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/CompositionContext.js

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

package/dist/esm/decorations/viewDecorations.js

@@ -123,17 +123,12 @@ const ViewDecorationsCache = new WeakMap();
  *
  * This makes it safe to call in a React render function, even
  * if its result is used in a dependencies array for a hook.
- */ export function viewDecorations(view, cursorWrapper) {
+ */ export 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(DecorationSet.create(view.state.doc, [
-            cursorWrapper
-        ]));
-    }
     const previous = ViewDecorationsCache.get(view);
     if (!previous) {
         const result = DecorationGroup.from(found);

package/dist/esm/hooks/useEditor.js

@@ -25,23 +25,16 @@ let didWarnValueDefaultValue = false;
         }
     }
     const flushSyncRef = useRef(true);
-    const [cursorWrapper, _setCursorWrapper] = useState(null);
     const forceUpdate = useForceUpdate();
     const defaultState = options.defaultState ?? EMPTY_STATE;
     const [_state, setState] = useState(defaultState);
     const state = options.state ?? _state;
     const { handleDOMEvents, registerEventListener, unregisterEventListener } = useComponentEventListeners(options.handleDOMEvents);
-    const setCursorWrapper = useCallback((deco)=>{
-        flushSync(()=>{
-            _setCursorWrapper(deco);
-        });
-    }, []);
     const plugins = useMemo(()=>[
             ...options.plugins ?? [],
-            beforeInputPlugin(setCursorWrapper)
+            beforeInputPlugin()
         ], [
-        options.plugins,
-        setCursorWrapper
+        options.plugins
     ]);
     const dispatchTransaction = useCallback(function dispatchTransaction(tr) {
         if (flushSyncRef.current) {
@@ -120,7 +113,6 @@ let didWarnValueDefaultValue = false;
     ]);
     return {
         editor,
-        cursorWrapper,
         state
     };
 }

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

@@ -113,10 +113,7 @@ export function useMarkViewDescription(getDOM, getContentDOM, constructor, props
     const childContextValue = useMemo(()=>({
             parentRef: viewDescRef,
             siblingsRef: childrenRef
-        }), [
-        childrenRef,
-        viewDescRef
-    ]);
+        }), []);
     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 { CompositionViewDesc, ReactNodeViewDesc, 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) {
@@ -131,33 +131,12 @@ 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 (!textDOM || !(textDOM instanceof Text)) throw new Error(`Started a composition but couldn't find the text node it belongs to.`);
-                child.dom = compositionTopDOM;
-                child.textDOM = textDOM;
-                child.text = textDOM.data;
-                child.textDOM.pmViewDesc = child;
-                // It should not be possible to be in a composition because one could
-                // not start between the renders that switch the view type.
-                view.input.compositionNodes.push(child);
-            }
         }
     });
     const childContextValue = useMemo(()=>({
             parentRef: viewDescRef,
             siblingsRef: childrenRef
-        }), [
-        childrenRef,
-        viewDescRef
-    ]);
+        }), []);
     return {
         childContextValue,
         contentDOM: contentDOMRef.current,

package/dist/esm/plugins/beforeInputPlugin.js

@@ -1,7 +1,10 @@
 import { Fragment, Slice } from "prosemirror-model";
 import { Plugin, TextSelection } from "prosemirror-state";
+import { ReactEditorView } from "../ReactEditorView.js";
 import { CursorWrapper } from "../components/CursorWrapper.js";
 import { widget } from "../decorations/ReactWidgetType.js";
+import { CompositionViewDesc, TextViewDesc, findTextInFragment } from "../viewdesc.js";
+import { reactKeysPluginKey } from "./reactKeys.js";
 function insertText(view, eventData) {
     let options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
     if (eventData === null) return false;
@@ -44,74 +47,127 @@ function handleGapCursorComposition(view) {
     tr.setSelection(TextSelection.near(tr.doc.resolve($from.pos + 1)));
     view.dispatch(tr);
 }
-export function beforeInputPlugin(setCursorWrapper) {
-    let compositionMarks = null;
-    let precompositionSnapshot = null;
+const observeOptions = {
+    childList: true,
+    characterData: true,
+    characterDataOldValue: true,
+    attributes: true,
+    attributeOldValue: true,
+    subtree: true
+};
+export function beforeInputPlugin() {
+    let observer = null;
+    let preCompositionSnapshot = null;
+    function teardownComposition(view, endedAt) {
+        view.input.composing = false;
+        if (observer) {
+            if (view.input.compositionNode && view.dom.contains(view.input.compositionNode)) {
+                view.domObserver.queue.push(...observer.takeRecords());
+                view.domObserver.flush();
+            } else {
+                const freezeFrom = reactKeysPluginKey.getState(view.state)?.freezeFrom;
+                const frozenNode = freezeFrom == null ? null : view.state.doc.nodeAt(freezeFrom);
+                if (freezeFrom != null && frozenNode != null && preCompositionSnapshot) {
+                    // This is a little hacky — it only works because we always abort
+                    // compositions if the node after freezeFrom changes, so we can
+                    // be sure that if a composition was canceled by the user/browser,
+                    // the content hasn't changed since the composition started
+                    view.dispatch(view.state.tr.replaceWith(freezeFrom + 1, freezeFrom + 1 + frozenNode.content.size, preCompositionSnapshot));
+                }
+            }
+            observer.disconnect();
+            observer = null;
+        }
+        view.input.compositionEndedAt = endedAt;
+        view.input.compositionNode = null;
+        view.input.compositionNodes = [];
+        view.input.compositionID++;
+    }
     return new Plugin({
+        view () {
+            return {
+                update (view) {
+                    if (!(view instanceof ReactEditorView)) return;
+                    const frozen = reactKeysPluginKey.getState(view.state)?.freezeFrom != null;
+                    if (observer && view.composing && !frozen) {
+                        teardownComposition(view, Date.now());
+                    }
+                }
+            };
+        },
         props: {
             handleDOMEvents: {
                 compositionstart (view) {
-                    compositionMarks = view.state.storedMarks ?? view.state.selection.$from.marks();
-                    view.dispatch(view.state.tr.deleteSelection());
+                    if (!(view instanceof ReactEditorView)) return false;
+                    const storedMarks = view.state.selection.empty ? view.state.storedMarks : view.state.storedMarks ?? (view.state.selection instanceof TextSelection ? view.state.selection.$from.marksAcross(view.state.selection.$to) : null);
+                    view.dispatch(view.state.tr.deleteSelection().setStoredMarks(storedMarks));
                     handleGapCursorComposition(view);
-                    const { state } = view;
-                    const $pos = state.selection.$from;
-                    if (compositionMarks) {
-                        setCursorWrapper(widget(state.selection.from, CursorWrapper, {
-                            key: "cursor-wrapper",
-                            marks: compositionMarks
+                    if (storedMarks) {
+                        view.dispatch(view.state.tr.setMeta(reactKeysPluginKey, {
+                            cursorWrapper: widget(view.state.selection.from, CursorWrapper, {
+                                key: "cursor-wrapper",
+                                marks: storedMarks,
+                                side: 0,
+                                raw: true
+                            })
                         }));
+                    // Pin the DOM cursor to PM's canonical position before the IME
+                    // captures wherever the browser happened to leave it. Without this,
+                    // a cursor at a mark boundary lands in either the left or right text
+                    // node depending on the user's last navigation direction, and the
+                    // IME composes into whichever one it found.
+                    } else if (view.state.selection.empty) {
+                        view.domObserver.disconnectSelection();
+                        try {
+                            view.docView.setSelection(view.state.selection.anchor, view.state.selection.head, view, true // force — skip the isEquivalentPosition early-return
+                            );
+                        } finally{
+                            view.domObserver.setCurSelection();
+                            view.domObserver.connectSelection();
+                        }
                     }
-                    // Snapshot the siblings of the node that contains the
-                    // current cursor. We'll restore this later, so that React
-                    // doesn't panic about unknown DOM nodes.
-                    const { node: parent } = view.domAtPos($pos.pos);
-                    precompositionSnapshot = [];
-                    for (const node of parent.childNodes){
-                        precompositionSnapshot.push(node);
+                    const freezeFrom = view.state.selection.$from.before();
+                    view.dispatch(view.state.tr.setMeta(reactKeysPluginKey, {
+                        freezeFrom
+                    }));
+                    const frozenDom = view.nodeDOM(freezeFrom);
+                    if (!frozenDom) {
+                        view.dispatch(view.state.tr.setMeta(reactKeysPluginKey, {
+                            cursorWrapper: null,
+                            freezeFrom: null
+                        }));
+                        return false;
                     }
-                    // @ts-expect-error Internal property - input
+                    preCompositionSnapshot = view.state.doc.nodeAt(freezeFrom)?.content ?? null;
                     view.input.composing = true;
+                    observer = new MutationObserver((records)=>{
+                        if (reactKeysPluginKey.getState(view.state)?.freezeFrom == null) {
+                            return;
+                        }
+                        view.domObserver.queue.push(...records);
+                        view.domObserver.flush();
+                        syncCompositionViewDescs(view);
+                    });
+                    observer.observe(frozenDom, observeOptions);
                     return true;
                 },
                 compositionupdate () {
                     return true;
                 },
                 compositionend (view, event) {
-                    // @ts-expect-error Internal property - input
-                    view.input.composing = false;
-                    const { state } = view;
-                    const { node: parent } = view.domAtPos(state.selection.from);
-                    if (precompositionSnapshot) {
-                        // Restore the snapshot of the parent node's children
-                        // from before the composition started. This gives us a
-                        // clean slate from which to dispatch our transaction
-                        // and trigger a React update.
-                        precompositionSnapshot.forEach((prevNode, i)=>{
-                            if (parent.childNodes.length <= i) {
-                                parent.appendChild(prevNode);
-                                return;
-                            }
-                            parent.replaceChild(prevNode, parent.childNodes.item(i));
-                        });
-                        if (parent.childNodes.length > precompositionSnapshot.length) {
-                            for(let i = precompositionSnapshot.length; i < parent.childNodes.length; i++){
-                                parent.removeChild(parent.childNodes.item(i));
-                            }
-                        }
-                    }
-                    if (event.data) {
-                        insertText(view, event.data, {
-                            marks: compositionMarks
-                        });
-                    }
-                    compositionMarks = null;
-                    precompositionSnapshot = null;
-                    setCursorWrapper(null);
+                    if (!(view instanceof ReactEditorView)) return false;
+                    if (!view.composing) return false;
+                    teardownComposition(view, event.timeStamp);
+                    view.dispatch(view.state.tr.setMeta(reactKeysPluginKey, {
+                        cursorWrapper: null,
+                        freezeFrom: null
+                    }));
                     return true;
                 },
                 beforeinput (view, event) {
-                    event.preventDefault();
+                    if (event.inputType !== "insertFromComposition") {
+                        event.preventDefault();
+                    }
                     switch(event.inputType){
                         case "insertParagraph":
                         case "insertLineBreak":
@@ -189,3 +245,59 @@ export function beforeInputPlugin(setCursorWrapper) {
         }
     });
 }
+function syncCompositionViewDescs(view) {
+    const compositionNode = view.domObserver.lastChangedTextNode;
+    if (!compositionNode) return;
+    const freezeFrom = reactKeysPluginKey.getState(view.state)?.freezeFrom;
+    if (freezeFrom == null) return;
+    const compositionBlock = view.state.doc.nodeAt(freezeFrom);
+    if (!compositionBlock) return;
+    const compositionBlockDesc = view.docView.descAt(freezeFrom);
+    if (!compositionBlockDesc) return;
+    const desc = view.docView.nearestDesc(compositionNode);
+    compositionBlockDesc.node = compositionBlock;
+    if (desc instanceof TextViewDesc) {
+        if (compositionNode.nodeValue && desc.node.text !== compositionNode.nodeValue) {
+            desc.node = view.state.schema.text(compositionNode.nodeValue, desc.node.marks);
+            desc.nodeDOM = compositionNode;
+            compositionNode.pmViewDesc = desc;
+        }
+        return;
+    }
+    if (desc instanceof CompositionViewDesc) {
+        if (compositionNode.nodeValue != null && desc.text !== compositionNode.nodeValue) {
+            desc.dom = compositionNode;
+            desc.textDOM = compositionNode;
+            desc.text = compositionNode.nodeValue;
+            compositionNode.pmViewDesc = desc;
+        }
+        return;
+    }
+    const parentDesc = desc?.contentDOM ? desc : compositionBlockDesc;
+    const children = parentDesc.children;
+    // Drop any text or composition desc in this container whose DOM the
+    // IME has detached. This covers two cases: a TextViewDesc the IME subsumed
+    // into the composition node, and (on Safari, which replaces the whole text
+    // node on each composition update) any orphaned composition view
+    // desc(s) left over from the previous composition steps.
+    for(let i = children.length - 1; i >= 0; i--){
+        const c = children[i];
+        if (!(c instanceof TextViewDesc) && !(c instanceof CompositionViewDesc)) {
+            continue;
+        }
+        const dom = c.dom;
+        if (view.dom.contains(dom)) continue;
+        children.splice(i, 1);
+    }
+    const contentStart = freezeFrom + 1;
+    const { from, to } = view.state.selection;
+    const textPos = findTextInFragment(compositionBlock.content, compositionNode.nodeValue ?? "", from - contentStart, to - contentStart);
+    if (textPos < 0) return;
+    const startPos = contentStart + textPos;
+    let topDOM = compositionNode;
+    while(topDOM.parentNode && topDOM.parentNode !== parentDesc.contentDOM){
+        topDOM = topDOM.parentNode;
+    }
+    const insertIndex = children.findLastIndex((c)=>c.posBefore <= startPos) + 1;
+    children.splice(insertIndex, 0, new CompositionViewDesc(parentDesc, ()=>startPos, topDOM, compositionNode, compositionNode.nodeValue ?? ""));
+}