diff --git a/packages/react/src/NodeViewContent.tsx b/packages/react/src/NodeViewContent.tsx index e9a9e96f..03ab6c55 100644 --- a/packages/react/src/NodeViewContent.tsx +++ b/packages/react/src/NodeViewContent.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react' +import React from 'react' import { useReactNodeView } from './useReactNodeView' export interface NodeViewContentProps { @@ -6,18 +6,14 @@ export interface NodeViewContentProps { as?: React.ElementType, } -export const NodeViewContent: React.FC = React.forwardRef((props, ref) => { +export const NodeViewContent: React.FC = props => { const Tag = props.as || 'div' - const { maybeMoveContentDOM } = useReactNodeView() - - useEffect(() => { - maybeMoveContentDOM?.() - }, []) + const { nodeViewContentRef } = useReactNodeView() return ( = React.forwardRef( }} /> ) -}) +} diff --git a/packages/react/src/ReactNodeViewRenderer.tsx b/packages/react/src/ReactNodeViewRenderer.tsx index dfc6831f..e13945f2 100644 --- a/packages/react/src/ReactNodeViewRenderer.tsx +++ b/packages/react/src/ReactNodeViewRenderer.tsx @@ -10,7 +10,7 @@ import { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view' import { Node as ProseMirrorNode } from 'prosemirror-model' import { Editor } from './Editor' import { ReactRenderer } from './ReactRenderer' -import { ReactNodeViewContext } from './useReactNodeView' +import { ReactNodeViewContext, ReactNodeViewContextProps } from './useReactNodeView' export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions { update: ((props: { @@ -49,12 +49,20 @@ class ReactNodeView extends NodeView { - const onDragStart = this.onDragStart.bind(this) - const maybeMoveContentDOM = this.maybeMoveContentDOM.bind(this) const Component = this.component + const onDragStart = this.onDragStart.bind(this) + const nodeViewContentRef: ReactNodeViewContextProps['nodeViewContentRef'] = element => { + if ( + element + && this.contentDOMElement + && element.firstChild !== this.contentDOMElement + ) { + element.appendChild(this.contentDOMElement) + } + } return ( - + ) @@ -98,27 +106,12 @@ class ReactNodeView extends NodeView) => { this.renderer.updateProps(props) - this.maybeMoveContentDOM() } if (typeof this.options.update === 'function') { diff --git a/packages/react/src/useReactNodeView.ts b/packages/react/src/useReactNodeView.ts index 1cad98a2..6127ea4a 100644 --- a/packages/react/src/useReactNodeView.ts +++ b/packages/react/src/useReactNodeView.ts @@ -2,7 +2,7 @@ import { createContext, useContext } from 'react' export interface ReactNodeViewContextProps { onDragStart: (event: DragEvent) => void, - maybeMoveContentDOM: () => void, + nodeViewContentRef: (element: HTMLElement | null) => void, } export const ReactNodeViewContext = createContext>({