code mirror cleanup

jonathanlab · jonathanlab · commit a5f24d53b977 · 2025-11-25T15:58:51.000+01:00
diff --git a/apps/array/src/renderer/features/code-editor/components/CodeMirrorDiffEditor.tsx b/apps/array/src/renderer/features/code-editor/components/CodeMirrorDiffEditor.tsx
@@ -1,7 +1,6 @@
-import { MergeView, unifiedMergeView } from "@codemirror/merge";
-import { EditorView } from "@codemirror/view";
 import { Box, Flex, SegmentedControl } from "@radix-ui/themes";
-import { useEffect, useRef, useState } from "react";
+import { useMemo, useState } from "react";
+import { useCodeMirror } from "../hooks/useCodeMirror";
 import { useEditorExtensions } from "../hooks/useEditorExtensions";
 
 type ViewMode = "split" | "unified";
@@ -17,65 +16,25 @@ export function CodeMirrorDiffEditor({
   modifiedContent,
   filePath,
 }: CodeMirrorDiffEditorProps) {
-  const editorRef = useRef<HTMLDivElement>(null);
-  const mergeViewRef = useRef<MergeView | null>(null);
-  const editorViewRef = useRef<EditorView | null>(null);
   const [viewMode, setViewMode] = useState<ViewMode>("split");
-  const baseExtensions = useEditorExtensions(filePath, true);
-
-  useEffect(() => {
-    if (!editorRef.current) return;
-
-    mergeViewRef.current?.destroy();
-    editorViewRef.current?.destroy();
-    mergeViewRef.current = null;
-    editorViewRef.current = null;
-
-    if (viewMode === "split") {
-      mergeViewRef.current = new MergeView({
-        a: {
-          doc: originalContent,
-          extensions: baseExtensions,
-        },
-        b: {
-          doc: modifiedContent,
-          extensions: baseExtensions,
-        },
-        parent: editorRef.current,
-      });
-    } else {
-      editorViewRef.current = new EditorView({
-        doc: modifiedContent,
-        extensions: [
-          ...baseExtensions,
-          unifiedMergeView({
-            original: originalContent,
-            highlightChanges: true,
-            gutter: true,
-            mergeControls: false,
-          }),
-        ],
-        parent: editorRef.current,
-      });
-    }
-
-    return () => {
-      mergeViewRef.current?.destroy();
-      editorViewRef.current?.destroy();
-      mergeViewRef.current = null;
-      editorViewRef.current = null;
-    };
-  }, [originalContent, modifiedContent, baseExtensions, viewMode]);
+  const extensions = useEditorExtensions(filePath, true);
+  const options = useMemo(
+    () => ({
+      original: originalContent,
+      modified: modifiedContent,
+      extensions,
+      mode: viewMode,
+    }),
+    [originalContent, modifiedContent, extensions, viewMode],
+  );
+  const containerRef = useCodeMirror(options);
 
   return (
     <Flex direction="column" height="100%">
       <Box
         px="3"
         py="2"
-        style={{
-          borderBottom: "1px solid var(--gray-6)",
-          flexShrink: 0,
-        }}
+        style={{ borderBottom: "1px solid var(--gray-6)", flexShrink: 0 }}
       >
         <SegmentedControl.Root
           size="1"
@@ -87,7 +46,7 @@ export function CodeMirrorDiffEditor({
         </SegmentedControl.Root>
       </Box>
       <Box style={{ flex: 1, overflow: "auto" }}>
-        <div ref={editorRef} style={{ height: "100%", width: "100%" }} />
+        <div ref={containerRef} style={{ height: "100%", width: "100%" }} />
       </Box>
     </Flex>
   );
diff --git a/apps/array/src/renderer/features/code-editor/components/CodeMirrorEditor.tsx b/apps/array/src/renderer/features/code-editor/components/CodeMirrorEditor.tsx
@@ -1,6 +1,5 @@
-import { EditorState } from "@codemirror/state";
-import { EditorView } from "@codemirror/view";
-import { useEffect, useRef } from "react";
+import { useMemo } from "react";
+import { useCodeMirror } from "../hooks/useCodeMirror";
 import { useEditorExtensions } from "../hooks/useEditorExtensions";
 
 interface CodeMirrorEditorProps {
@@ -14,28 +13,12 @@ export function CodeMirrorEditor({
   filePath,
   readOnly = false,
 }: CodeMirrorEditorProps) {
-  const editorRef = useRef<HTMLDivElement>(null);
-  const viewRef = useRef<EditorView | null>(null);
   const extensions = useEditorExtensions(filePath, readOnly);
+  const options = useMemo(
+    () => ({ doc: content, extensions }),
+    [content, extensions],
+  );
+  const containerRef = useCodeMirror(options);
 
-  useEffect(() => {
-    if (!editorRef.current) return;
-
-    const state = EditorState.create({
-      doc: content,
-      extensions,
-    });
-
-    viewRef.current = new EditorView({
-      state,
-      parent: editorRef.current,
-    });
-
-    return () => {
-      viewRef.current?.destroy();
-      viewRef.current = null;
-    };
-  }, [content, extensions]);
-
-  return <div ref={editorRef} style={{ height: "100%", width: "100%" }} />;
+  return <div ref={containerRef} style={{ height: "100%", width: "100%" }} />;
 }
diff --git a/apps/array/src/renderer/features/code-editor/components/DiffEditorPanel.tsx b/apps/array/src/renderer/features/code-editor/components/DiffEditorPanel.tsx
@@ -3,7 +3,7 @@ import { CodeMirrorDiffEditor } from "@features/code-editor/components/CodeMirro
 import { CodeMirrorEditor } from "@features/code-editor/components/CodeMirrorEditor";
 import { useTaskData } from "@features/task-detail/hooks/useTaskData";
 import { Box } from "@radix-ui/themes";
-import type { ChangedFile, Task } from "@shared/types";
+import type { Task } from "@shared/types";
 import { useQuery } from "@tanstack/react-query";
 
 interface DiffEditorPanelProps {
@@ -17,94 +17,63 @@ export function DiffEditorPanel({
   task,
   filePath,
 }: DiffEditorPanelProps) {
-  const taskData = useTaskData({ taskId, initialTask: task });
-  const repoPath = taskData.repoPath;
+  const { repoPath } = useTaskData({ taskId, initialTask: task });
 
-  // Fetch changed files to get status information
   const { data: changedFiles = [] } = useQuery({
     queryKey: ["changed-files-head", repoPath],
+    queryFn: () => window.electronAPI.getChangedFilesHead(repoPath!),
     enabled: !!repoPath,
     staleTime: Infinity,
-    queryFn: async () => {
-      if (!window.electronAPI || !repoPath) return [];
-      return window.electronAPI.getChangedFilesHead(repoPath);
-    },
   });
 
-  // Find the file info to get status and originalPath (for renames)
-  const fileInfo = changedFiles.find((f: ChangedFile) => f.path === filePath);
+  const fileInfo = changedFiles.find((f) => f.path === filePath);
   const status = fileInfo?.status ?? "modified";
   const originalPath = fileInfo?.originalPath ?? filePath;
+  const isDeleted = status === "deleted";
+  const isNew = status === "untracked" || status === "added";
 
-  // Determine what to fetch based on status
-  const skipModified = status === "deleted";
-  const skipOriginal = status === "untracked" || status === "added";
-
-  // Fetch modified content (current working directory)
-  const { data: modifiedContent, isLoading: isLoadingModified } = useQuery({
+  const { data: modifiedContent, isLoading: loadingModified } = useQuery({
     queryKey: ["repo-file", repoPath, filePath],
-    enabled: !!repoPath && !!filePath && !skipModified,
+    queryFn: () => window.electronAPI.readRepoFile(repoPath!, filePath),
+    enabled: !!repoPath && !isDeleted,
     staleTime: Infinity,
-    queryFn: async () => {
-      if (!window.electronAPI || !repoPath || !filePath) return null;
-      return window.electronAPI.readRepoFile(repoPath, filePath);
-    },
   });
 
-  // Fetch original content (HEAD) - use originalPath for renames
-  const { data: originalContent, isLoading: isLoadingOriginal } = useQuery({
+  const { data: originalContent, isLoading: loadingOriginal } = useQuery({
     queryKey: ["file-at-head", repoPath, originalPath],
-    enabled: !!repoPath && !!originalPath && !skipOriginal,
+    queryFn: () => window.electronAPI.getFileAtHead(repoPath!, originalPath),
+    enabled: !!repoPath && !isNew,
     staleTime: Infinity,
-    queryFn: async () => {
-      if (!window.electronAPI || !repoPath || !originalPath) return null;
-      return window.electronAPI.getFileAtHead(repoPath, originalPath);
-    },
   });
 
   if (!repoPath) {
     return <PanelMessage>No repository path available</PanelMessage>;
   }
 
   const isLoading =
-    (!skipModified && isLoadingModified) ||
-    (!skipOriginal && isLoadingOriginal);
-
+    (!isDeleted && loadingModified) || (!isNew && loadingOriginal);
   if (isLoading) {
     return <PanelMessage>Loading diff...</PanelMessage>;
   }
 
-  if (skipModified) {
-    return (
-      <Box height="100%" style={{ overflow: "hidden" }}>
-        <CodeMirrorEditor
-          content={originalContent ?? ""}
+  const showDiff = !isDeleted && !isNew;
+  const content = isDeleted ? originalContent : modifiedContent;
+
+  return (
+    <Box height="100%" style={{ overflow: "hidden" }}>
+      {showDiff ? (
+        <CodeMirrorDiffEditor
+          originalContent={originalContent ?? ""}
+          modifiedContent={modifiedContent ?? ""}
           filePath={filePath}
-          readOnly
         />
-      </Box>
-    );
-  }
-
-  if (skipOriginal) {
-    return (
-      <Box height="100%" style={{ overflow: "hidden" }}>
+      ) : (
         <CodeMirrorEditor
-          content={modifiedContent ?? ""}
+          content={content ?? ""}
           filePath={filePath}
           readOnly
         />
-      </Box>
-    );
-  }
-
-  return (
-    <Box height="100%" style={{ overflow: "hidden" }}>
-      <CodeMirrorDiffEditor
-        originalContent={originalContent ?? ""}
-        modifiedContent={modifiedContent ?? ""}
-        filePath={filePath}
-      />
+      )}
     </Box>
   );
 }
diff --git a/apps/array/src/renderer/features/code-editor/hooks/useCodeMirror.ts b/apps/array/src/renderer/features/code-editor/hooks/useCodeMirror.ts
@@ -0,0 +1,69 @@
+import { MergeView, unifiedMergeView } from "@codemirror/merge";
+import { EditorState, type Extension } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { useEffect, useRef } from "react";
+
+type EditorInstance = EditorView | MergeView;
+
+interface UseCodeMirrorOptions {
+  extensions: Extension[];
+}
+
+interface SingleDocOptions extends UseCodeMirrorOptions {
+  doc: string;
+}
+
+interface DiffOptions extends UseCodeMirrorOptions {
+  original: string;
+  modified: string;
+  mode: "split" | "unified";
+}
+
+export function useCodeMirror(options: SingleDocOptions | DiffOptions) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const instanceRef = useRef<EditorInstance | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    instanceRef.current?.destroy();
+    instanceRef.current = null;
+
+    if ("doc" in options) {
+      instanceRef.current = new EditorView({
+        state: EditorState.create({
+          doc: options.doc,
+          extensions: options.extensions,
+        }),
+        parent: containerRef.current,
+      });
+    } else if (options.mode === "split") {
+      instanceRef.current = new MergeView({
+        a: { doc: options.original, extensions: options.extensions },
+        b: { doc: options.modified, extensions: options.extensions },
+        parent: containerRef.current,
+      });
+    } else {
+      instanceRef.current = new EditorView({
+        doc: options.modified,
+        extensions: [
+          ...options.extensions,
+          unifiedMergeView({
+            original: options.original,
+            highlightChanges: true,
+            gutter: true,
+            mergeControls: false,
+          }),
+        ],
+        parent: containerRef.current,
+      });
+    }
+
+    return () => {
+      instanceRef.current?.destroy();
+      instanceRef.current = null;
+    };
+  }, [options]);
+
+  return containerRef;
+}
