🐛 (textBubble) Fix text bubble not updating when focusing on another one

Closes #1400

apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { Plate } from '@udecode/plate-core'
 import { platePlugins } from '@/lib/plate'
 import { TElement } from '@udecode/plate-common'
@@ -7,18 +7,28 @@ import { TextEditorEditorContent } from './TextEditorEditorContent'
 type TextBubbleEditorContentProps = {
   id: string
   initialValue: TElement[]
-  onClose: (newContent: TElement[]) => void
+  onChange: (newContent: TElement[]) => void
+  onClose: () => void
 }
 
 export const TextBubbleEditor = ({
   id,
   initialValue,
+  onChange,
   onClose,
 }: TextBubbleEditorContentProps) => {
-  const [textEditorValue, setTextEditorValue] =
+  const textEditorValueRef = useRef<TElement[]>(initialValue)
-    useState<TElement[]>(initialValue)
 
-  const closeEditor = () => onClose(textEditorValue)
+  const setTextEditorValue = (newValue: TElement[]) => {
+    textEditorValueRef.current = newValue
+  }
+
+  useEffect(
+    () => () => {
+      onChange(textEditorValueRef.current)
+    },
+    [onChange]
+  )
 
   return (
     <Plate
@@ -31,7 +41,7 @@ export const TextBubbleEditor = ({
       }
       onChange={setTextEditorValue}
     >
-      <TextEditorEditorContent closeEditor={closeEditor} />
+      <TextEditorEditorContent closeEditor={onClose} />
     </Plate>
   )
 }

apps/builder/src/features/graph/components/nodes/block/BlockNode.tsx

@@ -144,10 +144,13 @@ export const BlockNode = ({
       })
   }
 
-  const handleCloseEditor = (content: TElement[]) => {
+  const handleCloseEditor = () => {
+    setOpenedBlockId(undefined)
+  }
+
+  const handleTextEditorChange = (content: TElement[]) => {
     const updatedBlock = { ...block, content: { richText: content } }
     updateBlock(indices, updatedBlock)
-    setOpenedBlockId(undefined)
   }
 
   const handleClick = (e: React.MouseEvent) => {
@@ -223,6 +226,7 @@ export const BlockNode = ({
     <TextBubbleEditor
       id={block.id}
       initialValue={block.content?.richText ?? []}
+      onChange={handleTextEditorChange}
       onClose={handleCloseEditor}
     />
   ) : (