Merge pull request #79 from bocan:refactor/preview

Implement Zustand store for content and scroll synchronization

Author: bocan

client/package.json

@@ -22,7 +22,8 @@
     "react-syntax-highlighter": "^16.1.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "remark-gfm": "^4.0.0"
+    "remark-gfm": "^4.0.0",
+    "zustand": "^5.0.11"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.2.0",

client/src/App.tsx

@@ -36,8 +36,6 @@ function App() {
   const [error, setError] = useState<string | null>(null);
   const [leftPaneCollapsed, setLeftPaneCollapsed] = useState(false);
   const [rightPaneCollapsed, setRightPaneCollapsed] = useState(false);
-  const [editorContent, setEditorContent] = useState<string>(""); // Track live editor content for preview
-  const [scrollPercent, setScrollPercent] = useState<number>(0); // Synchronized scroll position (editor -> preview)
   const [isMobile, setIsMobile] = useState(false); // Track if we're on mobile for overlay behavior
   const [showAbout, setShowAbout] = useState(false); // About modal visibility
 
@@ -318,13 +316,6 @@ function App() {
 
   const handleSelectPage = (path: string) => {
     setSelectedPage(path);
-    // Reset scroll position when changing pages
-    setScrollPercent(0);
-  };
-
-  // Handle scroll from editor - syncs to preview
-  const handleEditorScroll = (percent: number) => {
-    setScrollPercent(percent);
   };
 
   const handleCloseEditor = () => {
@@ -620,8 +611,6 @@ function App() {
               <Editor
                 pagePath={selectedPage}
                 onClose={handleCloseEditor}
-                onContentChange={setEditorContent}
-                onScroll={handleEditorScroll}
               />
             </section>
 
@@ -656,9 +645,7 @@ function App() {
                   <div className="pane-content">
                     <Preview
                       pagePath={selectedPage}
-                      liveContent={editorContent}
                       onNavigate={handleSelectPage}
-                      scrollPercent={scrollPercent}
                     />
                   </div>
                 </>

client/src/components/Editor.tsx

@@ -2,21 +2,16 @@ import React, { useState, useEffect, useRef } from "react";
 import { api } from "../services/api";
 import VersionHistory from "./VersionHistory";
 import { Attachments } from "./Attachments";
+import { useEditorStore } from "../store/editorStore";
 import "./Editor.css";
 
 interface EditorProps {
   pagePath: string | null;
   onClose: () => void;
-  onContentChange?: (content: string) => void;
-  onScroll?: (percent: number) => void;
 }
 
-export const Editor: React.FC<EditorProps> = ({
-  pagePath,
-  onClose,
-  onContentChange,
-  onScroll,
-}) => {
+export const Editor: React.FC<EditorProps> = ({ pagePath, onClose }) => {
+  const { setContent: setStoreContent, scrollEditor } = useEditorStore();
   const [content, setContent] = useState("");
   const [isSaving, setIsSaving] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -29,6 +24,7 @@ export const Editor: React.FC<EditorProps> = ({
   const [isListening, setIsListening] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const scrollThrottleRef = useRef<number | null>(null);
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const recognitionRef = useRef<any>(null);
   const contentRef = useRef<string>(content); // Track current content for speech recognition
@@ -38,11 +34,29 @@ export const Editor: React.FC<EditorProps> = ({
     contentRef.current = content;
   }, [content]);
 
+  // Debounced store update - only update preview after typing pauses
+  useEffect(() => {
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    debounceTimerRef.current = setTimeout(() => {
+      setStoreContent(content);
+    }, 600); // 600ms debounce
+
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, [content, setStoreContent]);
+
   useEffect(() => {
     if (pagePath) {
       loadPage();
     } else {
       setContent("");
+      setStoreContent("");
       setError(null);
     }
   }, [pagePath]);
@@ -55,10 +69,8 @@ export const Editor: React.FC<EditorProps> = ({
     try {
       const page = await api.getPage(pagePath);
       setContent(page.content);
-      // Notify parent of initial content
-      if (onContentChange) {
-        onContentChange(page.content);
-      }
+      // Update store with initial content
+      setStoreContent(page.content);
     } catch (err) {
       console.error("Failed to load page:", err);
       setError("Failed to load page. Click to retry.");
@@ -117,8 +129,6 @@ export const Editor: React.FC<EditorProps> = ({
 
   // Handle editor scroll - sends scroll position to preview (throttled)
   const handleScroll = (e: React.UIEvent<HTMLTextAreaElement>) => {
-    if (!onScroll) return;
-
     const target = e.currentTarget;
     const scrollTop = target.scrollTop;
     const maxScroll = target.scrollHeight - target.clientHeight;
@@ -129,7 +139,7 @@ export const Editor: React.FC<EditorProps> = ({
     scrollThrottleRef.current = requestAnimationFrame(() => {
       scrollThrottleRef.current = null;
       if (maxScroll > 0) {
-        onScroll(scrollTop / maxScroll);
+        scrollEditor(scrollTop / maxScroll);
       }
     });
   };
@@ -174,9 +184,7 @@ export const Editor: React.FC<EditorProps> = ({
           currentContent.slice(end);
 
         setContent(newContent);
-        if (onContentChange) {
-          onContentChange(newContent);
-        }
+        // Store update is debounced via useEffect
 
         // Move cursor to end of inserted text
         const newCursorPos = start + finalTranscript.length;
@@ -241,9 +249,7 @@ export const Editor: React.FC<EditorProps> = ({
       const end = textarea.selectionEnd;
       const newContent = content.substring(0, start) + text + content.substring(end);
       setContent(newContent);
-      if (onContentChange) {
-        onContentChange(newContent);
-      }
+      // Store update is debounced via useEffect
     }
   };
 
@@ -656,10 +662,7 @@ export const Editor: React.FC<EditorProps> = ({
         value={content}
         onChange={(e) => {
           setContent(e.target.value);
-          // Notify parent of content change immediately for live preview
-          if (onContentChange) {
-            onContentChange(e.target.value);
-          }
+          // Store update is debounced via useEffect
         }}
         onScroll={handleScroll}
         onKeyDown={handleKeyDown}

client/src/components/Preview.tsx

@@ -7,6 +7,7 @@ import { oneDark, oneLight } from "react-syntax-highlighter/dist/esm/styles/pris
 import { asBlob } from "html-docx-js-typescript";
 import { api } from "../services/api";
 import { TableOfContents } from "./TableOfContents";
+import { useEditorStore } from "../store/editorStore";
 import "./Preview.css";
 
 // CodeBlock component with copy functionality
@@ -88,17 +89,16 @@ const CodeBlock: React.FC<{ language?: string; children: string }> = ({ language
 
 interface PreviewProps {
   pagePath: string | null;
-  liveContent?: string;
   onNavigate?: (path: string) => void;
-  scrollPercent?: number;
 }
 
 export const Preview: React.FC<PreviewProps> = ({
   pagePath,
-  liveContent,
   onNavigate,
-  scrollPercent,
 }) => {
+  const liveContent = useEditorStore((state) => state.content);
+  const scrollSource = useEditorStore((state) => state.scrollSource);
+  const editorScrollPercent = useEditorStore((state) => state.editorScrollPercent);
   const [content, setContent] = useState("");
   const [loading, setLoading] = useState(false);
   const [showExportMenu, setShowExportMenu] = useState(false);
@@ -137,17 +137,17 @@ export const Preview: React.FC<PreviewProps> = ({
 
   // Sync scroll from editor (smooth)
   useEffect(() => {
-    if (contentRef.current && scrollPercent !== undefined) {
+    if (contentRef.current && scrollSource === 'editor') {
       const container = contentRef.current;
       const maxScroll = container.scrollHeight - container.clientHeight;
       if (maxScroll > 0) {
         // Use requestAnimationFrame for smoother scrolling
         requestAnimationFrame(() => {
-          container.scrollTop = maxScroll * scrollPercent;
+          container.scrollTop = maxScroll * editorScrollPercent;
         });
       }
     }
-  }, [scrollPercent]);
+  }, [scrollSource, editorScrollPercent]);
 
   // Close export menu when clicking outside
   useEffect(() => {

client/src/store/editorStore.ts

@@ -0,0 +1,41 @@
+import { create } from 'zustand';
+
+interface EditorState {
+  // Content state
+  content: string;
+  setContent: (content: string) => void;
+
+  // Scroll sync state
+  scrollSource: 'editor' | 'preview' | null;
+  editorScrollPercent: number;
+  previewScrollPercent: number;
+
+  scrollEditor: (percent: number) => void;
+  scrollPreview: (percent: number) => void;
+  clearScrollSource: () => void;
+}
+
+export const useEditorStore = create<EditorState>((set) => ({
+  // Content
+  content: '',
+  setContent: (content) => set({ content }),
+
+  // Scroll sync
+  scrollSource: null,
+  editorScrollPercent: 0,
+  previewScrollPercent: 0,
+
+  scrollEditor: (percent) =>
+    set({
+      scrollSource: 'editor',
+      editorScrollPercent: percent,
+    }),
+
+  scrollPreview: (percent) =>
+    set({
+      scrollSource: 'preview',
+      previewScrollPercent: percent,
+    }),
+
+  clearScrollSource: () => set({ scrollSource: null }),
+}));

data/Codex Documentation/README.md

@@ -38,7 +38,7 @@
 - 🔐 **Password Protection**: Simple password-based authentication to secure your data
 - 🛡️ **Security Features**: Rate limiting, request logging, and security headers
 
-## 🔐 Security & Logging
+## 🔐 Security & Logging.
 
 Codex includes several security features to protect your data: