Fix editable file focus and live syntax highlighting

apps/web/src/components/files/FilePreviewPanel.tsx

@@ -7,7 +7,7 @@ import type {
 import { isWorkspaceImagePreviewPath } from "@t3tools/shared/filePreview";
 import { VirtualizedFile, type SelectedLineRange } from "@pierre/diffs";
 import { Editor } from "@pierre/diffs/editor";
-import { EditorProvider, File, type FileOptions, Virtualizer } from "@pierre/diffs/react";
+import { EditProvider, File, type FileOptions, Virtualizer } from "@pierre/diffs/react";
 import {
   isAtomCommandInterrupted,
   squashAtomCommandFailure,
@@ -52,7 +52,7 @@ import {
 } from "./fileCommentAnnotations";
 import { installFileEditorDismissal } from "./fileEditorDismissal";
 import { LocalCommentAnnotation } from "./LocalCommentAnnotation";
-import { projectFileCacheKey } from "./fileContentRevision";
+import { projectFileCacheKey, projectFileEditorCacheKey } from "./fileContentRevision";
 import { fileBreadcrumbs } from "./filePath";
 import { isMarkdownPreviewFile, setMarkdownTaskChecked } from "./filePreviewMode";
 import { FileSaveCoordinator } from "./fileSaveCoordinator";
@@ -364,6 +364,8 @@ function EditableFileSurface({
   const editor = useMemo(
     () =>
       new Editor<FileCommentAnnotationGroup>({
+        persistState: true,
+        persistStateStorage: "inMemory",
         onChange: (file, nextLineAnnotations) => {
           setProjectFileQueryData(environmentId, cwd, relativePath, file.contents);
           saveCoordinator.change(file.contents);
@@ -536,7 +538,7 @@ function EditableFileSurface({
   );
 
   return (
-    <EditorProvider editor={editor}>
+    <EditProvider editor={editor}>
       <div ref={surfaceRef} className="flex min-h-0 flex-1">
         <Virtualizer
           className="file-preview-virtualizer min-h-0 flex-1 overflow-auto"
@@ -549,7 +551,13 @@ function EditableFileSurface({
             file={{
               name: relativePath,
               contents,
-              cacheKey: projectFileCacheKey(cwd, relativePath, contents),
+              cacheKey: projectFileEditorCacheKey(
+                environmentId,
+                cwd,
+                relativePath,
+                contents,
+                editor.getFile(),
+              ),
             }}
             options={{
               disableFileHeader: true,
@@ -586,7 +594,7 @@ function EditableFileSurface({
           />
         </Virtualizer>
       </div>
-    </EditorProvider>
+    </EditProvider>
   );
 }
 

apps/web/src/components/files/fileContentRevision.test.ts

@@ -1,6 +1,10 @@
 import { describe, expect, it } from "vite-plus/test";
 
-import { fileContentRevision, projectFileCacheKey } from "./fileContentRevision";
+import {
+  fileContentRevision,
+  projectFileCacheKey,
+  projectFileEditorCacheKey,
+} from "./fileContentRevision";
 
 describe("fileContentRevision", () => {
   it("changes for same-length edits", () => {
@@ -12,4 +16,27 @@ describe("fileContentRevision", () => {
       projectFileCacheKey("/repo", "file.json", "contents"),
     );
   });
+
+  it("keeps editor identity stable for locally edited contents", () => {
+    const cacheKey = projectFileEditorCacheKey("local", "/repo", "file.json", "after", undefined);
+
+    expect(
+      projectFileEditorCacheKey("local", "/repo", "file.json", "after edit", {
+        cacheKey,
+        contents: "after edit",
+      }),
+    ).toBe(cacheKey);
+  });
+
+  it("rotates editor identity for external contents and environments", () => {
+    const cacheKey = projectFileEditorCacheKey("local", "/repo", "file.json", "before", undefined);
+    const editorFile = { cacheKey, contents: "before" };
+
+    expect(
+      projectFileEditorCacheKey("local", "/repo", "file.json", "external edit", editorFile),
+    ).not.toBe(cacheKey);
+    expect(projectFileEditorCacheKey("remote", "/repo", "file.json", "before", undefined)).not.toBe(
+      cacheKey,
+    );
+  });
 });

apps/web/src/components/files/fileContentRevision.ts

@@ -10,3 +10,21 @@ export function fileContentRevision(contents: string): string {
 export function projectFileCacheKey(cwd: string, relativePath: string, contents: string): string {
   return `${cwd}:${relativePath}:${fileContentRevision(contents)}`;
 }
+
+interface EditorFileIdentity {
+  readonly cacheKey?: string;
+  readonly contents: string;
+}
+
+export function projectFileEditorCacheKey(
+  environmentId: string,
+  cwd: string,
+  relativePath: string,
+  contents: string,
+  editorFile: EditorFileIdentity | undefined,
+): string {
+  if (editorFile?.contents === contents && editorFile.cacheKey) {
+    return editorFile.cacheKey;
+  }
+  return `editor:${environmentId}:${projectFileCacheKey(cwd, relativePath, contents)}`;
+}

patches/@pierre%2Fdiffs@1.3.0-beta.5.patch → patches/@pierre%2Fdiffs@1.3.0-beta.10.patch

@@ -1,38 +1,54 @@
 diff --git a/dist/editor/editor.js b/dist/editor/editor.js
-index e8013fc6eb6f243a6c912facf3fc0319ac66a8d0..80c82df4cdeb828bd331f5ec2f443d216bedc304 100644
+index ff78e2a..f9df318 100644
 --- a/dist/editor/editor.js
 +++ b/dist/editor/editor.js
-@@ -77,15 +77,12 @@ var Editor = class {
- 		this.#options = options;
- 	}
- 	edit(component) {
--		const { useTokenTransformer, enableGutterUtility, enableLineSelection, expandUnchanged, diffStyle, lineHoverHighlight,...rest } = component.options;
-+		const { useTokenTransformer, expandUnchanged, diffStyle,...rest } = component.options;
- 		const isDiff = component.type === "file-diff";
--		if (useTokenTransformer !== true || enableGutterUtility === true || enableLineSelection === true || lineHoverHighlight !== "disabled" || expandUnchanged !== true && isDiff || diffStyle === "unified" && isDiff) {
-+		if (useTokenTransformer !== true || expandUnchanged !== true && isDiff || diffStyle === "unified" && isDiff) {
- 			component.setOptions({
+@@ -146,14 +146,11 @@ var Editor = class {
+ 			const file = fileInstance.__getCurrentFile?.();
+ 			if (file !== void 0) requirePersistedCacheKey(file);
+ 		}
+-		const { useTokenTransformer, enableGutterUtility, enableLineSelection, lineHoverHighlight = "disabled", ...rest } = fileInstance.options;
+-		if (useTokenTransformer !== true || enableGutterUtility === true || enableLineSelection === true || lineHoverHighlight !== "disabled") {
++		const { useTokenTransformer, ...rest } = fileInstance.options;
++		if (useTokenTransformer !== true) {
+ 			fileInstance.setOptions({
  				...rest,
- 				useTokenTransformer: true,
+-				useTokenTransformer: true,
 -				enableGutterUtility: false,
 -				enableLineSelection: false,
--				lineHoverHighlight: "disabled",
- 				expandUnchanged: true,
- 				diffStyle: "split"
+-				lineHoverHighlight: "disabled"
++				useTokenTransformer: true
  			});
-@@ -511,6 +508,7 @@ var Editor = class {
+ 			fileInstance.rerender();
+ 		}
+@@ -908,6 +905,7 @@ var Editor = class {
  				return lineNumber - 1;
  			};
  			this.#editorEventDisposes.push(addEventListener(gutterEl, "pointerdown", (e) => {
 +				if (this.#fileInstance?.options.enableLineSelection === true) return;
- 				const textDocument = this.#textDocument;
- 				const lineIndex = resolveEditableLine(resolveGutterTarget(e.composedPath()[0]));
- 				if (lineIndex === void 0 || textDocument === void 0) return;
+ 				const gutterRow = resolveGutterTarget(e.composedPath()[0]);
+ 				if (gutterRow?.dataset.lineType === "change-deletion") {
+ 					const code = gutterRow.closest("[data-code]");
+@@ -1522,6 +1520,7 @@ var Editor = class {
+ 			if (gutterEl !== void 0) gutterEl.style.gridRow = "span " + gridRow;
+ 		}
+ 		fileInstance.updateRenderCache(dirtyLines, tokenizer.themeType, !didLineCountChange, didLineCountChange);
++		if (fileInstance.file !== void 0) fileInstance.file.contents = textDocument.getText();
+ 		if (didLineCountChange) fileInstance.applyDocumentChange(textDocument, newLineAnnotations, shouldUpdateBuffer);
+ 		if (this.#isDiff && (this.#diffSyle === "unified" || didLineCountChange)) this.#resetCache();
+ 		if (newLineAnnotations !== void 0) {
+@@ -1788,6 +1787,7 @@ var Editor = class {
+ 		}
+ 	}
+ 	#setSelectedLinesSafe(range, lineNumberOnly = false) {
++		if (this.#fileInstance?.options.controlledSelection === true) return;
+ 		try {
+ 			this.#fileInstance?.setSelectedLines(range, {
+ 				notify: false,
 diff --git a/dist/react/utils/useFileInstance.js b/dist/react/utils/useFileInstance.js
-index cb8e2026fb5d7a19f489c0a2402efbcb7dff3322..510fad6364d4a2214c7dd65fe2b114f1cce0c815 100644
+index e9f62f5..af82a46 100644
 --- a/dist/react/utils/useFileInstance.js
 +++ b/dist/react/utils/useFileInstance.js
-@@ -92,10 +92,7 @@ function mergeFileOptions({ options, controlledSelection, contentEditable, hasCu
+@@ -91,10 +91,7 @@ function mergeFileOptions({ options, controlledSelection, contentEditable, hasCu
  	};
  	if (needsEditorOptions) merged = {
  		...merged,
@@ -45,7 +61,7 @@ index cb8e2026fb5d7a19f489c0a2402efbcb7dff3322..510fad6364d4a2214c7dd65fe2b114f1
  	return merged;
  }
 diff --git a/package.json b/package.json
-index d1558633de87044b7aa96cff09443db11f163cec..c0b16f0a0bec6fba2026f24f38b2c0a8fa06af7c 100644
+index ff61c90..1e170e5 100644
 --- a/package.json
 +++ b/package.json
 @@ -55,6 +55,18 @@

pnpm-workspace.yaml

@@ -41,7 +41,7 @@ catalog:
   "@effect/vitest": 4.0.0-beta.102
   "@noble/curves": 1.9.1
   "@noble/hashes": 1.8.0
-  "@pierre/diffs": 1.3.0-beta.5
+  "@pierre/diffs": 1.3.0-beta.10
   "@types/node": 24.12.4
   "@typescript/native-preview": 7.0.0-dev.20260604.1
   effect: 4.0.0-beta.102
@@ -128,7 +128,7 @@ patchedDependencies:
   "@expo/metro-config@56.0.14": patches/@expo%2Fmetro-config@56.0.14.patch
   "@ff-labs/fff-node@0.9.4": patches/@ff-labs__fff-node@0.9.4.patch
   "@legendapp/list@3.2.0": patches/@legendapp__list@3.2.0.patch
-  "@pierre/diffs@1.3.0-beta.5": patches/@pierre%2Fdiffs@1.3.0-beta.5.patch
+  "@pierre/diffs@1.3.0-beta.10": patches/@pierre%2Fdiffs@1.3.0-beta.10.patch
   "@react-native-menu/menu@2.0.0": patches/@react-native-menu__menu@2.0.0.patch
   "@react-navigation/native-stack@7.17.6": patches/@react-navigation%2Fnative-stack@7.17.6.patch
   effect@4.0.0-beta.102: patches/effect@4.0.0-beta.102.patch