wip react renderer

packages/react/src/EditorContent.tsx

@@ -1,11 +1,67 @@
 import React from 'react'
+import ReactDOM from 'react-dom'
 import { Editor } from './Editor'
 
 type EditorContentProps = {
   editor: Editor | null
 }
 
-export class PureEditorContent extends React.Component<EditorContentProps, EditorContentProps> {
+// const Portals = ({ editor }: { editor: Editor | null }) => {
+//   if (!editor?.contentComponent) {
+//     return null
+//   }
+
+//   console.log('render portals')
+
+//   return (
+//     <div>portaaals</div>
+//   )
+// }
+
+const Portals = ({ renderers }: { renderers: Map<any, any> }) => {
+  return (
+    <div>
+      {Array.from(renderers).map(([key, renderer]) => {
+
+        // console.log({renderer})
+        // return (
+        //   <div key={key}>{value}</div>
+        // )
+
+        // return React.createElement(renderer.component)
+
+
+        // return (
+        //   <React.Fragment key={renderer.id}>
+        //     {ReactDOM.createPortal(
+        //       React.createElement(renderer.component),
+        //       renderer.teleportElement,
+        //     )}
+        //   </React.Fragment>
+        // )
+
+        return (
+          <React.Fragment key={renderer.id}>
+            {renderer.bla}
+          </React.Fragment>
+        )
+
+        // return ReactDOM.createPortal(
+        //   React.createElement(renderer.component),
+        //   renderer.teleportElement,
+        // )
+      })}
+    </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>
 
   constructor(props: EditorContentProps) {
@@ -13,14 +69,33 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
     this.editorContentRef = React.createRef()
 
     this.state = {
-      editor: this.props.editor
+      editor: this.props.editor,
+      renderers: new Map(),
     }
+
+    // setInterval(() => {
+    //   if (this.props?.editor?.contentComponent) {
+    //     this.props.editor.contentComponent.setState({
+    //       renderers: this.state.renderers.set(Math.random(), Math.random())
+    //     })
+    //   }
+    // }, 1000)
   }
 
   componentDidUpdate() {
     const { editor } = this.props
 
     if (editor && editor.options.element) {
+      if (editor.contentComponent) {
+        return
+      }
+
+      // this.setState({
+      //   editor,
+      // })
+
+      console.log('UPDATE')
+
       const element = this.editorContentRef.current
 
       element.appendChild(editor.options.element.firstChild)
@@ -39,10 +114,20 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
   }
 
   render() {
+    console.log('render', this.state)
+    // console.log('render', this.props.editor, this.state.editor)
     return (
-      <div ref={this.editorContentRef} />
+      <>
+        <div ref={this.editorContentRef} />
+        {/* <Content reference={this.editorContentRef} /> */}
+        {/* <Portals editor={this.props.editor} /> */}
+
+        <Portals renderers={this.state.renderers} />
+      </>
     )
   }
 }
 
-export const EditorContent = React.memo(PureEditorContent);
+export const EditorContent = React.memo(PureEditorContent)
+
+// export const EditorContent = PureEditorContent