@@ -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