chore(json-crdt-peritext-ui): 🤖 add autoflush to Peritext demo

Author: streamich

src/json-crdt-peritext-ui/__demos__/components/App.tsx

@@ -30,6 +30,13 @@ export const App: React.FC = () => {
     return [model, peritext] as const;
   });
 
+  React.useEffect(() => {
+    model.api.autoFlush();
+    return () => {
+      model.api.stopAutoFlush?.();
+    };
+  }, [model]);
+
   const plugins = React.useMemo(() => {
     const cursorPlugin = new CursorPlugin();
     const toolbarPlugin = new ToolbarPlugin();

src/json-crdt-peritext-ui/react/PeritextView.tsx

@@ -56,6 +56,16 @@ export const PeritextView: React.FC<PeritextViewProps> = React.memo((props) => {
     if (onRender) onRender();
   }, [peritext]);
 
+  const model = peritext.model;
+  React.useEffect(() => {
+    const unsubscribe = peritext.model.api.onFlush.listen((patch) => {
+      console.log('flush', patch);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [model]);
+
   const state: PeritextSurfaceState = React.useMemo(() => {
     const state = new PeritextSurfaceState(peritext, create(peritext), rerender, plugins);
     onState?.(state);