From 3d1d794a84b228da771bdde7ab718e522745b6cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@getprobo.com>
Date: Tue, 31 Mar 2026 13:05:53 +0400
Subject: [PATCH] Fix first rendering save
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Émile Ré <emile@getprobo.com>
---
 packages/ui/src/RichEditor/RichEditor.tsx | 28 ++++++++---------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/packages/ui/src/RichEditor/RichEditor.tsx b/packages/ui/src/RichEditor/RichEditor.tsx
index 5f545cd72..4984d117e 100644
--- a/packages/ui/src/RichEditor/RichEditor.tsx
+++ b/packages/ui/src/RichEditor/RichEditor.tsx
@@ -18,8 +18,8 @@ import { TableKit } from "@tiptap/extension-table";
 import { Text } from "@tiptap/extension-text";
 import { Underline } from "@tiptap/extension-underline";
 import { Dropcursor, UndoRedo } from "@tiptap/extensions";
-import { type Content, EditorContent, useEditor, useEditorState } from "@tiptap/react";
-import { type ComponentProps, useEffect, useRef } from "react";
+import { type Content, Editor, EditorContent, useEditor } from "@tiptap/react";
+import { type ComponentProps, useCallback, useEffect } from "react";
 import { tv } from "tailwind-variants";
 
 import { BlockMenu } from "./BlockMenu/BlockMenu";
@@ -82,7 +82,12 @@ type RichEditorProps = ComponentProps<"div"> & {
 export function RichEditor(props: RichEditorProps) {
   const { className, content, disabled = false, onChangeContent } = props;
 
-  const previousContentRef = useRef<string>(content);
+  const handleUpdate = useCallback(
+    ({ editor }: { editor: Editor }) => {
+      onChangeContent(JSON.stringify(editor.getJSON()));
+    },
+    [onChangeContent],
+  );
 
   const editor = useEditor({
     editorProps: {
@@ -93,25 +98,12 @@ export function RichEditor(props: RichEditorProps) {
     editable: !disabled,
     extensions,
     content: (content ? JSON.parse(content) : "") as Content,
+    onUpdate: handleUpdate,
   });
 
-  const watchedContent = useEditorState({
-    editor,
-    selector: ({ editor }) => {
-      return JSON.stringify(editor.getJSON());
-    },
-  });
-
-  useEffect(() => {
-    if (watchedContent !== previousContentRef.current) {
-      previousContentRef.current = watchedContent;
-      onChangeContent(watchedContent);
-    }
-  }, [content, watchedContent, onChangeContent]);
-
   useEffect(() => {
     if (!editor) return;
-    editor.setEditable(!disabled);
+    editor.setEditable(!disabled, false);
   }, [editor, disabled]);
 
   if (!editor) return null;