diff --git a/packages/react/src/ReactNodeViewRenderer.tsx b/packages/react/src/ReactNodeViewRenderer.tsx index 233b6964..e4022211 100644 --- a/packages/react/src/ReactNodeViewRenderer.tsx +++ b/packages/react/src/ReactNodeViewRenderer.tsx @@ -20,6 +20,8 @@ class ReactNodeView extends NodeView { renderer!: ReactRenderer + contentDOMElement!: Element | null + mount() { const props: NodeViewProps = { editor: this.editor, @@ -52,6 +54,10 @@ class ReactNodeView extends NodeView { ReactNodeViewProvider.displayName = 'ReactNodeView' + this.contentDOMElement = this.node.isLeaf + ? null + : document.createElement(this.node.isInline ? 'span' : 'div') + this.renderer = new ReactRenderer(ReactNodeViewProvider, { editor: this.editor, props, @@ -62,7 +68,10 @@ class ReactNodeView extends NodeView { } get dom() { - if (!this.renderer.element.firstElementChild?.hasAttribute('data-node-view-wrapper')) { + if ( + this.renderer.element.firstElementChild + && !this.renderer.element.firstElementChild?.hasAttribute('data-node-view-wrapper') + ) { throw Error('Please use the NodeViewWrapper component for your node view.') } @@ -76,7 +85,15 @@ class ReactNodeView extends NodeView { const contentElement = this.dom.querySelector('[data-node-view-content]') - return contentElement || this.dom + if ( + this.contentDOMElement + && contentElement + && !contentElement.contains(this.contentDOMElement) + ) { + contentElement.appendChild(this.contentDOMElement) + } + + return this.contentDOMElement } update(node: ProseMirrorNode, decorations: Decoration[]) { @@ -113,6 +130,7 @@ class ReactNodeView extends NodeView { destroy() { this.renderer.destroy() + this.contentDOMElement = null } }