refactoring

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>

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,
         )

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,

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)