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

package/dist/esm/components/CursorWrapper.js

@@ -13,14 +13,10 @@ 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;
-        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();
     }, []);

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,7 +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) {
@@ -26,75 +28,237 @@ function shallowEqual(objA, objB) {
     return true;
 }
 export class TextNodeView extends Component {
-    viewDescRef = null;
-    renderRef = null;
-    updateEffect() {
-        const { view, decorations, siblingsRef, parentRef, getPos, node } = this.props;
-        // There simply is no other way to ref a text node
-        // eslint-disable-next-line react/no-find-dom-node
+    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);
-        // 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 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);
+        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);
+        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 {
-            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 (!dom || !textNode) return null;
+            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() {
+        const { view, node, decorations } = this.props;
+        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;
+        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();
+        }
+        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();
     }
     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);
+    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 { 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) {
-            return this.renderRef;
+        if (this.shouldProtect(this.props)) {
+            this.wasProtecting.current = true;
+            return this.renderRef.current;
         }
-        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,12 +1,21 @@
-import React, { useContext, useRef } from "react";
+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";
+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 ()=>{
@@ -32,6 +41,67 @@ 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/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/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/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,