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

package/dist/esm/components/CursorWrapper.js

@@ -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;
@@ -14,19 +13,19 @@ export const CursorWrapper = /*#__PURE__*/ forwardRef(function CursorWrapper(par
         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.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/ProseMirror.js

@@ -17,12 +17,14 @@ const rootChildDescriptionsContextValue = {
     },
     siblingsRef: {
         current: []
-    }
+    },
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    findCompositionDOM: ()=>{}
 };
 function ProseMirrorInner(param) {
     let { children, nodeViewComponents, markViewComponents, ...props } = param;
     const [mount, setMount] = useState(null);
-    const { editor, cursorWrapper, state } = useEditor(mount, props);
+    const { editor, state } = useEditor(mount, props);
     const nodeViewConstructors = editor.view.nodeViews;
     const nodeViewContextValue = useMemo(()=>{
         return {
@@ -39,7 +41,7 @@ function ProseMirrorInner(param) {
     ]);
     const node = state.doc;
     const decorations = computeDocDeco(editor.view);
-    const innerDecorations = viewDecorations(editor.view, cursorWrapper);
+    const innerDecorations = viewDecorations(editor.view);
     const docNodeViewContextValue = useMemo(()=>({
             setMount,
             node,

package/dist/esm/components/TextNodeView.js

@@ -1,9 +1,9 @@
 import { TextSelection } from "prosemirror-state";
 import { DecorationSet } from "prosemirror-view";
-import { Component } from "react";
+import React, { Component, createRef, useReducer } from "react";
 import { ReactEditorView } from "../ReactEditorView.js";
 import { findDOMNode } from "../findDOMNode.js";
-import { CompositionViewDesc, TextViewDesc, sortViewDescs } from "../viewdesc.js";
+import { CompositionViewDesc, TextViewDesc, findTextInFragment, sortViewDescs } from "../viewdesc.js";
 import { wrapInDeco } from "./ChildNodeViews.js";
 function shallowEqual(objA, objB) {
     if (objA === objB) {
@@ -28,10 +28,10 @@ function shallowEqual(objA, objB) {
     return true;
 }
 export class TextNodeView extends Component {
-    viewDescRef = null;
-    renderRef = null;
-    wasProtecting = false;
-    containsCompositionNodeText = true;
+    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
@@ -43,17 +43,42 @@ export class TextNodeView extends Component {
         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;
+        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;
+        return !!this.containsCompositionNodeText.current;
     }
     handleCompositionEnd = ()=>{
-        if (!this.wasProtecting) return;
-        this.forceUpdate();
-        return;
+        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;
@@ -81,14 +106,25 @@ export class TextNodeView extends Component {
         }
         siblingsRef.current.push(viewDesc);
         siblingsRef.current.sort(sortViewDescs);
+        if (viewDesc instanceof CompositionViewDesc) {
+            this.props.findCompositionDOM(viewDesc);
+        }
         return viewDesc;
     }
     update() {
         const { view, node, decorations } = this.props;
         if (!(view instanceof ReactEditorView)) return false;
-        const viewDesc = this.viewDescRef;
+        const viewDesc = this.viewDescRef.current;
         if (!viewDesc) return false;
-        if (this.shouldProtect(this.props) !== viewDesc instanceof CompositionViewDesc) {
+        // 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;
@@ -98,7 +134,7 @@ export class TextNodeView extends Component {
         return viewDesc.matchesNode(node, decorations, DecorationSet.empty) || viewDesc.update(node, decorations, DecorationSet.empty, view);
     }
     destroy() {
-        const viewDesc = this.viewDescRef;
+        const viewDesc = this.viewDescRef.current;
         if (!viewDesc) return;
         viewDesc.destroy();
         const siblings = this.props.siblingsRef.current;
@@ -110,43 +146,85 @@ export class TextNodeView extends Component {
     updateEffect() {
         if (!this.update()) {
             this.destroy();
-            this.viewDescRef = this.create();
+            this.viewDescRef.current = this.create();
         }
-        const { view, node } = this.props;
+        const { view } = this.props;
         if (!(view instanceof ReactEditorView)) {
-            this.containsCompositionNodeText = true;
+            this.containsCompositionNodeText.current = true;
             return;
         }
         const textNode = view.input.compositionNode;
         if (!textNode) {
-            this.containsCompositionNodeText = true;
+            this.containsCompositionNodeText.current = 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;
+        // 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 && !this.shouldProtect(nextProps)) {
+        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.viewDescRef = null;
+        this.containsCompositionNodeText.current = true;
         // After a composition, force an update so that we re-check whether we need
         // to be protecting our rendered content and allow React to re-sync with the
         // DOM.
         const { registerEventListener } = this.props;
         registerEventListener("compositionend", this.handleCompositionEnd);
+        this.viewDescRef.current = this.create();
         this.updateEffect();
     }
     componentDidUpdate() {
         this.updateEffect();
+        const { view } = this.props;
+        if (!(view instanceof ReactEditorView)) 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;
@@ -161,11 +239,26 @@ export class TextNodeView extends Component {
         // we freeze the DOM of this element so that it doesn't
         // interrupt the composition
         if (this.shouldProtect(this.props)) {
-            this.wasProtecting = true;
-            return this.renderRef;
+            this.wasProtecting.current = true;
+            return this.renderRef.current;
         }
-        this.wasProtecting = false;
-        this.renderRef = decorations.reduce(wrapInDeco, node.text);
-        return this.renderRef;
+        this.wasProtecting.current = false;
+        this.renderRef.current = decorations.reduce(wrapInDeco, node.text);
+        return this.renderRef.current;
     }
 }
+/**
+ * createRef returns a RefObject, even though the docs
+ * say that it's acceptible to manage the ref's value
+ * yourself.
+ */ function createMutRef() {
+    return /*#__PURE__*/ 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,4 +1,5 @@
 import React, { useContext, useRef, useState } from "react";
+import { ReactEditorView } from "../ReactEditorView.js";
 import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
 import { useClientLayoutEffect } from "../hooks/useClientLayoutEffect.js";
 import { useEditorEffect } from "../hooks/useEditorEffect.js";
@@ -7,9 +8,14 @@ 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 ()=>{
@@ -43,13 +49,47 @@ export function TrailingHackView(param) {
         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.composing) return;
+        if (!(view instanceof ReactEditorView)) return;
+        if (!view.compositionStarting) return;
         const { from } = view.state.selection;
         if (from === getPos()) {
             setShouldRender(false);
@@ -59,6 +99,7 @@ export function TrailingHackView(param) {
     ]);
     useEditorEventListener("compositionend", ()=>{
         setShouldRender(true);
+        setShouldReinsert(false);
     });
     if (!shouldRender) return null;
     return /*#__PURE__*/ React.createElement("br", {

package/dist/esm/components/WidgetView.js

@@ -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);
@@ -38,6 +39,8 @@ export function WidgetView(param) {
         ref: domRef,
         widget: widget,
         getPos: getPos,
-        contentEditable: false
+        ...!widget.type.spec.raw && {
+            contentEditable: false
+        }
     });
 }

package/dist/esm/contexts/ChildDescriptionsContext.js

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

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

@@ -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/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/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, sortViewDescs } from "../viewdesc.js";
+import { ReactMarkViewDesc, TextViewDesc, sortViewDescs } from "../viewdesc.js";
 import { useClientLayoutEffect } from "./useClientLayoutEffect.js";
 import { useEffectEvent } from "./useEffectEvent.js";
 export function useMarkViewDescription(getDOM, getContentDOM, constructor, props) {
@@ -110,12 +110,70 @@ 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
+            siblingsRef: childrenRef,
+            findCompositionDOM
         }), [
-        childrenRef,
-        viewDescRef
+        findCompositionDOM
     ]);
     return {
         childContextValue,