refactoring

docs/src/demos/Examples/Default/React/index.jsx

@@ -135,7 +135,7 @@ export default () => {
         draggable: true,
         addNodeView() {
           return ReactNodeViewRenderer((props) => {
-            console.log({props})
+            // console.log({props})
             return (
               <NodeViewWrapper>
                 <div className="heading">
@@ -159,8 +159,8 @@ export default () => {
 
     ],
     content: `
-      <h1>h1</h1>
-      <h2>h2</h2>
+      <h1>heading</h1>
+      <h2>heading</h2>
       <p>paragraph</p>
     `,
 //     content: `

packages/react/src/EditorContent.tsx

@@ -1,31 +1,26 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Editor } from './Editor'
+import { ReactRenderer } from './ReactRenderer'
 
 type EditorContentProps = {
   editor: Editor | null
 }
 
-const Portals = ({ renderers }: { renderers: Map<any, any> }) => {
+const Portals: React.FC<{ renderers: Map<string, ReactRenderer> }> = ({ renderers }) => {
   return (
-    <div>
+    <>
       {Array.from(renderers).map(([key, renderer]) => {
         return ReactDOM.createPortal(
           renderer.reactElement,
-          renderer.teleportElement,
-          renderer.id,
+          renderer.element,
+          key,
         )
       })}
-    </div>
+    </>
   )
 }
 
-// const Content = React.memo(({ reference }: { reference: React.RefObject<any> }) => {
-//   return (
-//     <div ref={reference} />
-//   )
-// })
-
 export class PureEditorContent extends React.Component<EditorContentProps, any> {
   editorContentRef: React.RefObject<any>
 
@@ -69,8 +64,6 @@ export class PureEditorContent extends React.Component<EditorContentProps, any>
   }
 
   render() {
-    // console.log('render', this.state)
-    // console.log('render', this.props.editor, this.state.editor)
     return (
       <>
         <div ref={this.editorContentRef} />

packages/react/src/ReactNodeViewRenderer.ts

@@ -1,10 +1,7 @@
-// @ts-nocheck
 import { Node, NodeViewRenderer, NodeViewRendererProps } from '@tiptap/core'
 import { Decoration, NodeView } from 'prosemirror-view'
 import { NodeSelection } from 'prosemirror-state'
 import { Node as ProseMirrorNode } from 'prosemirror-model'
-import React from 'react'
-import ReactDOM from 'react-dom'
 import { Editor } from './Editor'
 import { ReactRenderer } from './ReactRenderer'
 
@@ -34,22 +31,12 @@ class ReactNodeView implements NodeView {
     update: null,
   }
 
-  domWrapper: Element
-
-  contentDOMWrapper: Element
-
   constructor(component: any, props: NodeViewRendererProps, options?: Partial<ReactNodeViewRendererOptions>) {
     this.options = { ...this.options, ...options }
     this.editor = props.editor as Editor
     this.extension = props.extension
     this.node = props.node
     this.getPos = props.getPos
-
-    this.domWrapper = document.createElement('div')
-    this.domWrapper.classList.add('dom-wrapper')
-    this.contentDOMWrapper = document.createElement('div')
-    this.contentDOMWrapper.classList.add('content-dom-wrapper')
-
     this.mount(component)
   }
 
@@ -72,59 +59,24 @@ class ReactNodeView implements NodeView {
       editor: this.editor,
       props,
     })
-
-    // console.log(this.renderer.element.firstChild)
-
-    this.domWrapper.appendChild(this.renderer.element)
-
-    const contentElement = this.renderer.element.querySelector('[data-node-view-content]')
-
-    // console.log({ contentElement })
-
-    contentElement.appendChild(this.contentDOMWrapper)
-
-    // this.renderer.element.firstChild?.appendChild(this.contentDOMWrapper)
-    // this.domWrapper.appendChild(this.contentDOMWrapper)
   }
 
   get dom() {
-    // return this.renderer.element
-    // return this.renderer.element.firstChild
-    return this.domWrapper
+    if (!this.renderer.element.firstElementChild?.hasAttribute('data-node-view-wrapper')) {
+      throw Error('Please use the ReactViewWrapper component for your node view.')
+    }
 
-    // if (!this.renderer.element) {
-    //   return null
-    // }
-
-    // if (!this.renderer.element.hasAttribute('data-node-view-wrapper')) {
-    //   throw Error('Please use the NodeViewWrapper component for your node view.')
-    // }
-
-    // return this.renderer.element
+    return this.renderer.element
   }
 
   get contentDOM() {
-    return this.contentDOMWrapper
-    // return this.renderer.element
-    return undefined
-    // return this.renderer.element
-    // return this.contentDOMWrapper
+    if (this.node.isLeaf) {
+      return null
+    }
 
-    // console.log(this.dom)
-    // return null
-    // if (!this.renderer.element) {
-    //   return null
-    // }
+    const contentElement = this.dom.querySelector('[data-node-view-content]')
 
-    // const hasContent = !this.node.type.isAtom
-
-    // if (!hasContent) {
-    //   return null
-    // }
-
-    // const contentElement = this.dom.querySelector('[data-node-view-content]')
-
-    // return contentElement || this.dom
+    return contentElement || this.dom
   }
 
   stopEvent(event: Event) {
@@ -211,8 +163,6 @@ class ReactNodeView implements NodeView {
 
   destroy() {
     this.renderer.destroy()
-    this.domWrapper = undefined
-    this.contentDOMWrapper = undefined
   }
 
   update(node: ProseMirrorNode, decorations: Decoration[]) {

packages/react/src/ReactRenderer.ts

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Editor } from './Editor'
 
-export interface VueRendererOptions {
-  as?: string;
-  editor: Editor;
-  props?: { [key: string]: any };
+export interface ReactRendererOptions {
+  as?: string,
+  editor: Editor,
+  props?: { [key: string]: any },
 }
 
 export class ReactRenderer {
@@ -14,24 +14,19 @@ export class ReactRenderer {
 
   component: any
 
-  teleportElement: Element
-
   element: Element
 
   props: { [key: string]: any }
 
   reactElement: React.ReactNode
 
-  constructor(component: any, { props = {}, editor }: VueRendererOptions) {
+  constructor(component: any, { props = {}, editor }: ReactRendererOptions) {
     this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
     this.component = component
     this.editor = editor
     this.props = props
-
-    this.teleportElement = document.createElement('div')
-    this.teleportElement.classList.add('teleport-element')
-    this.element = this.teleportElement
-
+    this.element = document.createElement('div')
+    this.element.classList.add('react-renderer')
     this.render()
   }
 

packages/vue-2/src/VueNodeViewRenderer.ts

@@ -106,9 +106,7 @@ class VueNodeView implements NodeView {
   }
 
   get contentDOM() {
-    const hasContent = !this.node.type.isAtom
-
-    if (!hasContent) {
+    if (this.node.isLeaf) {
       return null
     }
 

packages/vue-3/src/VueNodeViewRenderer.ts

@@ -107,9 +107,7 @@ class VueNodeView implements NodeView {
   }
 
   get contentDOM() {
-    const hasContent = !this.node.type.isAtom
-
-    if (!hasContent) {
+    if (this.node.isLeaf) {
       return null
     }
 

packages/vue-3/src/VueRenderer.ts

@@ -2,9 +2,9 @@ import { reactive, markRaw, Component } from 'vue'
 import { Editor } from './Editor'
 
 export interface VueRendererOptions {
-  as?: string;
-  editor: Editor;
-  props?: { [key: string]: any };
+  as?: string,
+  editor: Editor,
+  props?: { [key: string]: any },
 }
 
 export class VueRenderer {