From baa5bcc964d3e7f200b1a1f7b110cf720e8455a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sun, 14 Mar 2021 17:01:52 +0100
Subject: [PATCH] refactoring

---
 .../demos/Examples/Default/React/index.jsx    |  9 ++-
 packages/react/src/EditorContent.tsx          |  2 +-
 packages/react/src/ReactNodeViewRenderer.ts   | 15 +++++
 packages/react/src/ReactRenderer.ts           | 58 +++++--------------
 4 files changed, 37 insertions(+), 47 deletions(-)

diff --git a/docs/src/demos/Examples/Default/React/index.jsx b/docs/src/demos/Examples/Default/React/index.jsx
index d42e7145..e37d57b9 100644
--- a/docs/src/demos/Examples/Default/React/index.jsx
+++ b/docs/src/demos/Examples/Default/React/index.jsx
@@ -126,13 +126,16 @@ const MenuBar = ({ editor }) => {
 
 export default () => {
   const editor = useEditor({
+    // onTransaction({ editor }) {
+    //   console.log('anchor', editor.state.selection.anchor)
+    // },
     extensions: [
       ...defaultExtensions().filter(item => item.config.name !== 'heading'),
       Heading.extend({
         draggable: true,
         addNodeView() {
           return ReactNodeViewRenderer((props) => {
-            // console.log({props})
+            console.log({props})
             return (
               <NodeViewWrapper>
                 <div className="heading">
@@ -142,6 +145,10 @@ export default () => {
                     draggable={true}
                     suppressContentEditableWarning={true}
                   >⠿</span>
+                  level: {props.node.attrs.level}
+                  <button onClick={() => props.updateAttributes({ level: 1 })}>
+                    set level 1
+                  </button>
                   <NodeViewContent />
                 </div>
               </NodeViewWrapper>
diff --git a/packages/react/src/EditorContent.tsx b/packages/react/src/EditorContent.tsx
index 8127d2d5..0f73847c 100644
--- a/packages/react/src/EditorContent.tsx
+++ b/packages/react/src/EditorContent.tsx
@@ -11,7 +11,7 @@ const Portals = ({ renderers }: { renderers: Map<any, any> }) => {
     <div>
       {Array.from(renderers).map(([key, renderer]) => {
         return ReactDOM.createPortal(
-          renderer.comp,
+          renderer.reactElement,
           renderer.teleportElement,
           renderer.id,
         )
diff --git a/packages/react/src/ReactNodeViewRenderer.ts b/packages/react/src/ReactNodeViewRenderer.ts
index c4c0baaf..55fd5ec6 100644
--- a/packages/react/src/ReactNodeViewRenderer.ts
+++ b/packages/react/src/ReactNodeViewRenderer.ts
@@ -236,6 +236,21 @@ class ReactNodeView implements NodeView {
     return true
   }
 
+  updateAttributes(attributes: {}) {
+    if (!this.editor.view.editable) {
+      return
+    }
+
+    const { state } = this.editor.view
+    const pos = this.getPos()
+    const transaction = state.tr.setNodeMarkup(pos, undefined, {
+      ...this.node.attrs,
+      ...attributes,
+    })
+
+    this.editor.view.dispatch(transaction)
+  }
+
   selectNode() {
     this.renderer.updateProps({
       selected: true,
diff --git a/packages/react/src/ReactRenderer.ts b/packages/react/src/ReactRenderer.ts
index b5bd0fef..586a9350 100644
--- a/packages/react/src/ReactRenderer.ts
+++ b/packages/react/src/ReactRenderer.ts
@@ -1,8 +1,4 @@
-// @ts-nocheck
-
 import React from 'react'
-import ReactDOM, { render, unmountComponentAtNode } from 'react-dom'
-
 import { Editor } from './Editor'
 
 export interface VueRendererOptions {
@@ -24,6 +20,8 @@ export class ReactRenderer {
 
   props: { [key: string]: any }
 
+  reactElement: React.ReactNode
+
   constructor(component: any, { props = {}, editor }: VueRendererOptions) {
     this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
     this.component = component
@@ -34,46 +32,16 @@ export class ReactRenderer {
     this.teleportElement.classList.add('teleport-element')
     this.element = this.teleportElement
 
-    // this.teleportElement.setAttribute('data-bla', '')
-    // render(React.createElement(component), this.teleportElement)
-    // render(React.createElement(component), this.teleportElement)
-    // this.render()
-    // // this.element = this.teleportElement.firstElementChild as Element
-
-    // console.log({ props })
-
-    // this.bla = ReactDOM.createPortal(
-    //   React.createElement(this.component, props),
-    //   this.teleportElement,
-    // )
     this.render()
-    // this.comp = React.createElement(this.component, { foo: 1 })
-
-    // // this.bla = React.createElement(this.component, props)
-
-    // // console.log({ bla })
-
-    // if (this.editor?.contentComponent) {
-    //   this.editor.contentComponent.setState({
-    //     renderers: this.editor.contentComponent.state.renderers.set(
-    //       this.id,
-    //       this,
-    //     ),
-    //   })
-    // }
   }
 
-  // get comp() {
-  //   console.log('get comp')
-  //   return React.createElement(this.component, { foo: 1 })
-  // }
-
   render() {
-    this.comp = React.createElement(this.component, { foo: 1 })
-    // render(React.createElement(this.component), this.teleportElement)
+    this.reactElement = React.createElement(this.component, this.props)
 
     if (this.editor?.contentComponent) {
       this.editor.contentComponent.setState({
+        // TODO
+        // @ts-ignore
         renderers: this.editor.contentComponent.state.renderers.set(
           this.id,
           this,
@@ -83,18 +51,18 @@ export class ReactRenderer {
   }
 
   updateProps(props: { [key: string]: any } = {}) {
-    // TODO
-    // console.log('update props', { props })
+    this.props = {
+      ...this.props,
+      ...props,
+    }
+
+    this.render()
   }
 
   destroy() {
-    // TODO
-    // console.log('DESTROY', { bla: this.teleportElement })
-    // console.log(document.querySelector('[data-bla]'))
-    // unmountComponentAtNode(this.teleportElement)
-    // unmountComponentAtNode(document.querySelector('[data-bla]'))
-
     if (this.editor?.contentComponent) {
+      // TODO
+      // @ts-ignore
       const { renderers } = this.editor.contentComponent.state
 
       renderers.delete(this.id)