@gmickel/gno 0.9.0 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gmickel/gno",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Local semantic search for your documents. Index Markdown, PDF, and Office files with hybrid BM25 + vector search.",
   "keywords": [
     "embeddings",

package/src/serve/public/components/editor/CodeMirrorEditor.tsx

@@ -21,6 +21,8 @@ export interface CodeMirrorEditorProps {
   initialContent: string;
   /** Called when content changes */
   onChange: (content: string) => void;
+  /** Called when scroll position changes (0-1 percentage) */
+  onScroll?: (scrollPercent: number) => void;
   /** Additional CSS classes */
   className?: string;
 }
@@ -36,21 +38,28 @@ export interface CodeMirrorEditorRef {
   wrapSelection: (prefix: string, suffix: string) => void;
   /** Insert text at cursor position */
   insertAtCursor: (text: string) => void;
+  /** Scroll to percentage position (0-1). Returns true if scroll actually changed. */
+  scrollToPercent: (percent: number) => boolean;
 }
 
 function CodeMirrorEditorInner(
-  { initialContent, onChange, className }: CodeMirrorEditorProps,
+  { initialContent, onChange, onScroll, className }: CodeMirrorEditorProps,
   ref: ForwardedRef<CodeMirrorEditorRef>
 ) {
   const containerRef = useRef<HTMLDivElement>(null);
   const viewRef = useRef<EditorView | null>(null);
   const onChangeRef = useRef(onChange);
+  const onScrollRef = useRef(onScroll);
 
-  // Keep onChange ref current to avoid recreating editor on callback change
+  // Keep callback refs current to avoid recreating editor
   useEffect(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
 
+  useEffect(() => {
+    onScrollRef.current = onScroll;
+  }, [onScroll]);
+
   // Initialize CodeMirror
   useEffect(() => {
     if (!containerRef.current) return;
@@ -81,8 +90,28 @@ function CodeMirrorEditorInner(
       parent: containerRef.current,
     });
 
+    // Attach scroll listener directly to scrollDOM for reliable event capture
+    // (scroll events don't bubble, so domEventHandlers may miss them)
+    const scroller = view.scrollDOM;
+    const handleScroll = () => {
+      const maxScroll = scroller.scrollHeight - scroller.clientHeight;
+      if (maxScroll > 0 && onScrollRef.current) {
+        const percent = Math.max(
+          0,
+          Math.min(1, scroller.scrollTop / maxScroll)
+        );
+        if (Number.isFinite(percent)) {
+          onScrollRef.current(percent);
+        }
+      }
+    };
+    scroller.addEventListener("scroll", handleScroll, { passive: true });
+
     viewRef.current = view;
-    return () => view.destroy();
+    return () => {
+      scroller.removeEventListener("scroll", handleScroll);
+      view.destroy();
+    };
     // Only run on mount - initialContent should not trigger re-creation
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -134,6 +163,23 @@ function CodeMirrorEditorInner(
       });
       view.focus();
     },
+    scrollToPercent: (percent: number): boolean => {
+      const view = viewRef.current;
+      if (!view || !Number.isFinite(percent)) return false;
+
+      const clamped = Math.max(0, Math.min(1, percent));
+      const scroller = view.scrollDOM;
+      const maxScroll = scroller.scrollHeight - scroller.clientHeight;
+      if (maxScroll > 0) {
+        const targetScroll = clamped * maxScroll;
+        // Only scroll if position actually changes (avoids unnecessary events)
+        if (Math.abs(scroller.scrollTop - targetScroll) > 0.5) {
+          scroller.scrollTop = targetScroll;
+          return true;
+        }
+      }
+      return false;
+    },
   }));
 
   return <div ref={containerRef} className={className} />;

package/src/serve/public/pages/DocumentEditor.tsx

@@ -16,8 +16,10 @@ import {
   CloudIcon,
   EyeIcon,
   EyeOffIcon,
+  LinkIcon,
   Loader2Icon,
   PenIcon,
+  UnlinkIcon,
 } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 
@@ -131,11 +133,81 @@ export default function DocumentEditor({ navigate }: PageProps) {
   const [saveError, setSaveError] = useState<string | null>(null);
 
   const [showPreview, setShowPreview] = useState(true);
+  const [syncScroll, setSyncScroll] = useState(true);
   const [showUnsavedDialog, setShowUnsavedDialog] = useState(false);
   const editorRef = useRef<CodeMirrorEditorRef>(null);
+  const previewRef = useRef<HTMLDivElement>(null);
+  // Event-based suppression: ignore the echo event caused by programmatic scroll
+  const ignoreNextEditorScroll = useRef(false);
+  const ignoreNextPreviewScroll = useRef(false);
 
   const hasUnsavedChanges = content !== originalContent;
 
+  // Reset ignore flags when sync is toggled to prevent stale state
+  useEffect(() => {
+    ignoreNextEditorScroll.current = false;
+    ignoreNextPreviewScroll.current = false;
+  }, [syncScroll, showPreview]);
+
+  // Scroll sync handlers with event-based loop prevention
+  // Note: Uses percentage-based mapping which provides approximate correspondence.
+  // For very different layouts (headings, code blocks, images), perfect alignment
+  // would require anchor-based mapping between editor lines and rendered elements.
+  const handleEditorScroll = useCallback(
+    (scrollPercent: number) => {
+      // Clear ignore flag first, even if we early-return (prevents lingering)
+      if (ignoreNextEditorScroll.current) {
+        ignoreNextEditorScroll.current = false;
+        return;
+      }
+      if (!syncScroll || !showPreview) return;
+      if (!Number.isFinite(scrollPercent)) return;
+
+      const clamped = Math.max(0, Math.min(1, scrollPercent));
+      const preview = previewRef.current;
+      if (!preview) return;
+
+      const maxScroll = preview.scrollHeight - preview.clientHeight;
+      if (maxScroll <= 0) return;
+
+      const targetScroll = clamped * maxScroll;
+      // Only set ignore flag if scroll position actually changes (avoids lingering flag)
+      if (Math.abs(preview.scrollTop - targetScroll) > 0.5) {
+        ignoreNextPreviewScroll.current = true;
+        preview.scrollTop = targetScroll;
+      }
+    },
+    [syncScroll, showPreview]
+  );
+
+  const handlePreviewScroll = useCallback(() => {
+    // Clear ignore flag first, even if we early-return (prevents lingering)
+    if (ignoreNextPreviewScroll.current) {
+      ignoreNextPreviewScroll.current = false;
+      return;
+    }
+    if (!syncScroll) return;
+
+    const preview = previewRef.current;
+    if (!preview) return;
+
+    const maxScroll = preview.scrollHeight - preview.clientHeight;
+    if (maxScroll <= 0) return;
+
+    const scrollPercentRaw = preview.scrollTop / maxScroll;
+    if (!Number.isFinite(scrollPercentRaw)) return;
+    const scrollPercent = Math.max(0, Math.min(1, scrollPercentRaw));
+
+    // Set ignore flag BEFORE programmatic scroll to prevent race condition
+    ignoreNextEditorScroll.current = true;
+    const didScroll =
+      editorRef.current?.scrollToPercent(scrollPercent) ?? false;
+    // Clear flag if no scroll actually occurred (avoids lingering)
+    if (!didScroll) {
+      ignoreNextEditorScroll.current = false;
+    }
+  }, [syncScroll]);
+
   // Save function
   const saveDocument = useCallback(
     async (contentToSave: string) => {
@@ -442,6 +514,36 @@ export default function DocumentEditor({ navigate }: PageProps) {
             </Tooltip>
           </TooltipProvider>
 
+          {/* Sync scroll toggle (only show when preview is visible) */}
+          {showPreview && (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    aria-label={
+                      syncScroll ? "Disable scroll sync" : "Enable scroll sync"
+                    }
+                    className="transition-all duration-200"
+                    onClick={() => setSyncScroll(!syncScroll)}
+                    size="sm"
+                    variant={syncScroll ? "secondary" : "ghost"}
+                  >
+                    {syncScroll ? (
+                      <LinkIcon className="size-4" />
+                    ) : (
+                      <UnlinkIcon className="size-4" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>
+                    {syncScroll ? "Disable scroll sync" : "Enable scroll sync"}
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
+
           {/* Save button */}
           <Button
             disabled={!hasUnsavedChanges || saveStatus === "saving"}
@@ -468,13 +570,20 @@ export default function DocumentEditor({ navigate }: PageProps) {
             className="h-full"
             initialContent={content}
             onChange={handleContentChange}
+            onScroll={
+              syncScroll && showPreview ? handleEditorScroll : undefined
+            }
             ref={editorRef}
           />
         </div>
 
         {/* Preview pane */}
         {showPreview && (
-          <div className="w-1/2 min-h-0 overflow-auto bg-background p-6">
+          <div
+            className="w-1/2 min-h-0 overflow-auto bg-background p-6"
+            onScroll={handlePreviewScroll}
+            ref={previewRef}
+          >
             <div className="mx-auto max-w-3xl">
               <MarkdownPreview content={content} />
             </div>