@@ -344,10 +344,23 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
344344 const propsRef = useRef ( props ) ;
345345 propsRef . current = props ;
346346
347+ // Local state to manage editor content
348+ const [ localValue , setLocalValue ] = useState ( props . value . value ) ;
349+ const isUserTyping = useRef ( false ) ;
350+
351+ // Sync local state with props when they change externally (not from user typing)
352+ useEffect ( ( ) => {
353+ if ( ! isUserTyping . current ) {
354+ setLocalValue ( props . value . value ) ;
355+ }
356+ } , [ props . value . value ] ) ;
357+
347358 const debouncedOnChangeRef = useRef (
348359 debounce ( ( html : string , deltaJSON : string , text : string ) => {
349- propsRef . current . value . onChange ( html ) ;
360+ // Update delta first as it's the primary source of truth
350361 propsRef . current . delta . onChange ( deltaJSON ) ;
362+ // Update value with the HTML representation
363+ propsRef . current . value . onChange ( html ) ;
351364 propsRef . current . onEvent ( "change" ) ;
352365 } , 1000 )
353366 ) ;
@@ -359,7 +372,16 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
359372 } , [ ] ) ;
360373
361374 const handleChange = ( html : string , deltaJSON : string , text : string ) => {
375+ // Mark that user is typing
376+ isUserTyping . current = true ;
377+ // Update local state immediately for responsive UI
378+ setLocalValue ( html ) ;
379+ // Debounce the prop updates
362380 debouncedOnChangeRef . current ?.( html , deltaJSON , text ) ;
381+ // Reset the flag after a brief delay
382+ setTimeout ( ( ) => {
383+ isUserTyping . current = false ;
384+ } , 100 ) ;
363385 } ;
364386
365387 return (
@@ -368,7 +390,7 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
368390 hideToolbar = { props . hideToolbar }
369391 toolbar = { props . toolbar }
370392 readOnly = { props . readOnly }
371- value = { props . value . value }
393+ value = { localValue }
372394 placeholder = { props . placeholder }
373395 onChange = { handleChange }
374396 $style = { props . style }
0 commit comments