@@ -344,10 +344,23 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
344344const propsRef = useRef ( props ) ;
345345propsRef . 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+
347358const debouncedOnChangeRef = useRef (
348359debounce ( ( html :string , deltaJSON :string , text :string ) => {
349- propsRef . current . value . onChange ( html ) ;
360+ // Update delta first as it's the primary source of truth
350361propsRef . current . delta . onChange ( deltaJSON ) ;
362+ // Update value with the HTML representation
363+ propsRef . current . value . onChange ( html ) ;
351364propsRef . current . onEvent ( "change" ) ;
352365} , 1000 )
353366) ;
@@ -359,7 +372,16 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
359372} , [ ] ) ;
360373
361374const 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
362380debouncedOnChangeRef . current ?.( html , deltaJSON , text ) ;
381+ // Reset the flag after a brief delay
382+ setTimeout ( ( ) => {
383+ isUserTyping . current = false ;
384+ } , 100 ) ;
363385} ;
364386
365387return (
@@ -368,7 +390,7 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
368390hideToolbar = { props . hideToolbar }
369391toolbar = { props . toolbar }
370392readOnly = { props . readOnly }
371- value = { props . value . value }
393+ value = { localValue }
372394placeholder = { props . placeholder }
373395onChange = { handleChange }
374396$style = { props . style }