From 4f1569301e781d976aaf9ac605ea37cd7c18636b Mon Sep 17 00:00:00 2001
From: Nick the Sick <nicholas.perez@tiptap.dev>
Date: Wed, 26 Jun 2024 19:33:54 +0200
Subject: [PATCH] feat: finally something that works

---
 .../CustomParagraph/React/Paragraph.jsx        |  1 +
 packages/react/src/ReactRenderer.tsx           | 18 +++++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/demos/src/Examples/CustomParagraph/React/Paragraph.jsx b/demos/src/Examples/CustomParagraph/React/Paragraph.jsx
index cec21f2fd6d..422cab82370 100644
--- a/demos/src/Examples/CustomParagraph/React/Paragraph.jsx
+++ b/demos/src/Examples/CustomParagraph/React/Paragraph.jsx
@@ -6,6 +6,7 @@ import {
 } from '@tiptap/react'
 
 const ParagraphComponent = ({ node }) => {
+  console.count('render')
   return (
     <NodeViewWrapper style={{ position: 'relative' }}>
       <span contentEditable={false} className="label" style={{
diff --git a/packages/react/src/ReactRenderer.tsx b/packages/react/src/ReactRenderer.tsx
index 4fde17bca3a..fc57426f2dc 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.js'
 
@@ -71,6 +72,8 @@ type ComponentType<R, P> =
   React.FunctionComponent<P> |
   React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<R>>;
 
+let first = true
+
 /**
  * The ReactRenderer class. It's responsible for rendering React components inside the editor.
  * @example
@@ -121,7 +124,20 @@ export class ReactRenderer<R = unknown, P = unknown> {
       })
     }
 
-    this.render()
+    if (first) {
+      // TODO this is totally a hack, on the first render of the editor (parent editor)
+      // We need to delay the rendering of the ReactRenderer components (because it would render before the editor is ready)
+      // setTimeout(() => {
+      this.render()
+      first = false
+      // }, 100)
+    } else {
+      // On first render, we need to flush the render synchronously
+      // Renders afterwards can be async, but this fixes a cursor positioning issue
+      flushSync(() => {
+        this.render()
+      })
+    }
   }
 
   render(): void {