From 4f47f777733e6ded8677212cbc91ec43535df60a Mon Sep 17 00:00:00 2001
From: darmody <darmody@brickdoc.com>
Date: Fri, 15 Jul 2022 00:13:52 +0800
Subject: [PATCH] fix: fix React Node View render problem in React 18

---
 packages/react/src/ReactRenderer.tsx | 35 ++++++++++++++++------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/react/src/ReactRenderer.tsx b/packages/react/src/ReactRenderer.tsx
index da962528734..f38ceb554ba 100644
--- a/packages/react/src/ReactRenderer.tsx
+++ b/packages/react/src/ReactRenderer.tsx
@@ -1,5 +1,6 @@
 import { Editor } from '@tiptap/core'
 import React from 'react'
+import { flushSync } from 'react-dom'
 
 import { Editor as ExtendedEditor } from './Editor'
 
@@ -77,14 +78,16 @@ export class ReactRenderer<R = unknown, P = unknown> {
 
     this.reactElement = <Component {...props } />
 
-    if (this.editor?.contentComponent) {
-      this.editor.contentComponent.setState({
-        renderers: this.editor.contentComponent.state.renderers.set(
-          this.id,
-          this,
-        ),
-      })
-    }
+    flushSync(() => {
+      if (this.editor?.contentComponent) {
+        this.editor.contentComponent.setState({
+          renderers: this.editor.contentComponent.state.renderers.set(
+            this.id,
+            this,
+          ),
+        })
+      }
+    })
   }
 
   updateProps(props: Record<string, any> = {}): void {
@@ -97,14 +100,16 @@ export class ReactRenderer<R = unknown, P = unknown> {
   }
 
   destroy(): void {
-    if (this.editor?.contentComponent) {
-      const { renderers } = this.editor.contentComponent.state
+    flushSync(() => {
+      if (this.editor?.contentComponent) {
+        const { renderers } = this.editor.contentComponent.state
 
-      renderers.delete(this.id)
+        renderers.delete(this.id)
 
-      this.editor.contentComponent.setState({
-        renderers,
-      })
-    }
+        this.editor.contentComponent.setState({
+          renderers,
+        })
+      }
+    })
   }
 }