Merge pull request #15 from typelets/perf/reduce-sync-latency

fix: resolve TipTap v3 compatibility issues and clean up Monaco edito…

Author: rui-typelets

src/components/editor/extensions/ExecutableCodeBlockNodeView.tsx

@@ -102,15 +102,30 @@ export function ExecutableCodeBlockNodeView({ node, updateAttributes, selected:
   const monacoRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
   const resizeStartY = useRef<number>(0);
   const resizeStartHeight = useRef<number>(300);
+  const isUpdatingFromMonaco = useRef(false);
 
   const language = node.attrs.language || 'javascript';
   const isExecutable = codeExecutionService.isLanguageSupported(language as SupportedLanguage);
 
 
 
   useEffect(() => {
-    setCode(node.textContent);
-  }, [node.textContent]);
+    // COMPLETELY DISABLE this effect to prevent any Monaco updates from external sources
+    // This should eliminate all blinking by never touching Monaco after initialization
+    // External sync will be handled differently if needed
+    return;
+
+    // Only update code if it's not coming from Monaco itself
+    // This prevents the circular update loop that causes blinking
+    const nodeText = node.textContent;
+    if (nodeText !== code && !isUpdatingFromMonaco.current) {
+      setCode(nodeText);
+      // Since we're using defaultValue, manually update Monaco's content
+      if (monacoRef.current?.getValue() !== nodeText) {
+        monacoRef.current?.setValue(nodeText);
+      }
+    }
+  }, [node.textContent, code]);
 
 
   useEffect(() => {
@@ -122,7 +137,7 @@ export function ExecutableCodeBlockNodeView({ node, updateAttributes, selected:
       setEditorHeight(newHeight);
 
       // Trigger Monaco layout when height changes (throttled)
-      if (monacoRef.current) {
+      if (monacoRef.current && !isUpdatingFromMonaco.current) {
         monacoRef.current.layout();
       }
     };
@@ -140,10 +155,10 @@ export function ExecutableCodeBlockNodeView({ node, updateAttributes, selected:
       document.removeEventListener('mousemove', handleMouseMove);
       document.removeEventListener('mouseup', handleMouseUp);
       if (updateTimeoutRef.current) {
-        if (updateTimeoutRef.current) {
         clearTimeout(updateTimeoutRef.current);
       }
-      }
+      // Reset the Monaco update flag on cleanup
+      isUpdatingFromMonaco.current = false;
     };
   }, [isResizing]);
 
@@ -155,7 +170,8 @@ export function ExecutableCodeBlockNodeView({ node, updateAttributes, selected:
     const triggerLayout = () => {
       clearTimeout(resizeTimeout);
       resizeTimeout = setTimeout(() => {
-        if (monacoRef.current) {
+        // Don't trigger layout if we're updating from Monaco to prevent blinking
+        if (monacoRef.current && !isUpdatingFromMonaco.current) {
           monacoRef.current.layout();
         }
       }, 100); // Reduced debounce for better responsiveness
@@ -188,14 +204,13 @@ export function ExecutableCodeBlockNodeView({ node, updateAttributes, selected:
 
   const handleCodeChange = (value: string | undefined) => {
     if (value !== undefined) {
-      setCode(value);
-      // Debounce the node content update to avoid performance issues
+      // Minimal debounced update - only update TipTap node
       if (updateTimeoutRef.current) {
         clearTimeout(updateTimeoutRef.current);
       }
       updateTimeoutRef.current = setTimeout(() => {
         updateNodeContent(value);
-      }, 300);
+      }, 300); // Increased debounce to reduce updates
     }
   };
 
@@ -359,10 +374,11 @@ export function ExecutableCodeBlockNodeView({ node, updateAttributes, selected:
         {/* Code Content */}
         <div className={`relative w-full ${monacoThemeOverride === 'light' ? 'monaco-light-override' : 'monaco-dark-override'}`}>
           <Editor
+            key={`monaco-${node.attrs.language}-${getPos()}`}
             height={`${editorHeight}px`}
             width="100%"
             language={language}
-            value={code}
+            defaultValue={code}
             onChange={handleCodeChange}
             theme="vs-dark"
             options={{
@@ -410,7 +426,10 @@ export function ExecutableCodeBlockNodeView({ node, updateAttributes, selected:
                 if (entries[0].isIntersecting) {
                   // Small delay to ensure DOM is ready
                   setTimeout(() => {
-                    monacoEditor.layout();
+                    // Don't layout if updating from Monaco to prevent blinking
+                    if (!isUpdatingFromMonaco.current) {
+                      monacoEditor.layout();
+                    }
                   }, 50);
                 }
               });

src/components/editor/hooks/useEditorEffects.ts

@@ -23,29 +23,42 @@ export function useEditorEffects({
   setBaseFontSize,
   lastContentRef,
 }: UseEditorEffectsProps) {
+
   // Sync editor content with note changes
   useEffect(() => {
     if (!editor || !note) return;
 
     const currentContent = editor.getHTML();
     if (note.content !== currentContent) {
-      const { from, to } = editor.state.selection;
-      editor.commands.setContent(note.content || '', { emitUpdate: false });
-      lastContentRef.current = note.content || '';
-
-      // Update word and character counts
-      const text = editor.state.doc.textContent;
-      updateCounts(text);
-
-      try {
-        const docSize = editor.state.doc.content.size;
-        if (from <= docSize && to <= docSize) {
-          editor.commands.setTextSelection({ from, to });
+      const editorHasFocus = editor.isFocused;
+
+      if (!editorHasFocus) {
+        const { from, to } = editor.state.selection;
+
+        editor.commands.setContent(note.content || '', {
+          emitUpdate: false,
+          parseOptions: {
+            preserveWhitespace: 'full'
+          }
+        });
+        lastContentRef.current = note.content || '';
+
+        const text = editor.state.doc.textContent;
+        updateCounts(text);
+
+        try {
+          const docSize = editor.state.doc.content.size;
+          if (from <= docSize && to <= docSize) {
+            editor.commands.setTextSelection({ from, to });
+          }
+        } catch {
+          // Ignore cursor restoration errors
         }
-      } catch {
-        // Ignore cursor restoration errors
+      } else {
+        lastContentRef.current = currentContent;
       }
     }
+
   }, [note, editor, updateCounts, lastContentRef]);
 
   // Initialize word count when editor is ready

src/components/editor/index.tsx

@@ -319,11 +319,11 @@ export default function Index({
               setSaveStatus('error');
               console.error('Failed to save note:', error);
             }
-          }, 1000); // Wait 1 second after user stops typing
+          }, 300); // Reduced from 1000ms to 300ms for faster sync
         }
       },
     },
-    [note?.id, note?.hidden, updateCounts]
+    [note?.id]
   );
 
   // Use custom hook for editor effects
@@ -343,6 +343,7 @@ export default function Index({
     if (editor && note) {
       const currentContent = editor.getHTML();
 
+
       // Only update if content actually changed
       if (note.hidden && currentContent !== '[HIDDEN]') {
         editor.commands.setContent('[HIDDEN]');

src/hooks/useNotesOperations.ts

@@ -148,7 +148,7 @@ export function useNotesOperations({
         clearTimeout(existingTimeout);
       }
 
-      const immediateUpdates = ['starred', 'archived', 'deleted', 'folderId'];
+      const immediateUpdates = ['starred', 'archived', 'deleted', 'folderId', 'title'];
       const needsImmediateSave = Object.keys(updates).some((key) =>
         immediateUpdates.includes(key)
       );
@@ -204,6 +204,11 @@ export function useNotesOperations({
           void loadData();
         }
       } else {
+        // Send WebSocket update immediately for instant cross-tab sync
+        if (webSocket.isAuthenticated) {
+          webSocket.sendNoteUpdate(noteId, updates);
+        }
+
         const timeout = setTimeout(async () => {
           try {
             if (
@@ -218,6 +223,7 @@ export function useNotesOperations({
               );
             }
 
+            // API call for server persistence (follows WebSocket update)
             await api.updateNote(noteId, {
               title: updates.title,
               content: updates.content,
@@ -228,11 +234,6 @@ export function useNotesOperations({
               tags: updates.tags,
             });
 
-            // Send WebSocket notification about note update (delayed updates)
-            if (webSocket.isAuthenticated) {
-              webSocket.sendNoteUpdate(noteId, updates);
-            }
-
             saveTimeoutsRef.current.delete(noteId);
           } catch (error) {
             const secureError = sanitizeError(error, 'Failed to update note');
@@ -245,7 +246,7 @@ export function useNotesOperations({
             }
             void loadData();
           }
-        }, 1500);
+        }, 500); // Reduced from 1500ms to 500ms for faster sync
 
         saveTimeoutsRef.current.set(noteId, timeout);
       }