How do I handle two-way binding with Smart Editor in web app?

[emily.thorne91]

Hi everyone, I am working on a small reporting tool for operations with Editor. I am currently trying to solve this: How do I handle two-way binding with Smart Editor in web app? So far, I tested with both static data and API data, but some edge cases break expected behavior. Any practical example I can follow?

[admin]

Hi,

You usually have to simulate two-way binding by explicitly syncing incoming props → editor state and editor changes → your app state, while guarding against loops and stale updates.

You can try this code:

function SmartEditorWrapper({ value, onChange }) {
  const editorRef = useRef(null);
  const lastValueRef = useRef(value);

  // Initialize editor once
  useEffect(() => {
    editorRef.current = createSmartEditor({
      content: value,
      onUpdate: (newContent) => {
        // prevent unnecessary updates
        if (newContent !== lastValueRef.current) {
          lastValueRef.current = newContent;
          onChange(newContent);
        }
      }
    });

    return () => editorRef.current?.destroy();
  }, []);

  // Sync external value → editor
  useEffect(() => {
    if (!editorRef.current) return;

    if (value !== lastValueRef.current) {
      lastValueRef.current = value;
      editorRef.current.setContent(value);
    }
  }, [value]);

  return <div id="editor-container" />;
}

Regards,
Peter

[Author]

Posts