();
+// The Find widget floats inside this frame, so it stays relative; the change notice is the
+// only row that shares the column with the editor host.
const FRAME_STYLE = {
display: "flex",
+ flexDirection: "column",
position: "relative",
flex: 1,
minHeight: 0,
diff --git a/packages/app/src/file-pane/pane.tsx b/packages/app/src/file-pane/pane.tsx
index a5630ed82f..557482d868 100644
--- a/packages/app/src/file-pane/pane.tsx
+++ b/packages/app/src/file-pane/pane.tsx
@@ -58,14 +58,6 @@ interface FilePreviewBodyProps {
type TextExplorerFile = ExplorerFile & { kind: "text" };
-function trimNonEmpty(value: string | null | undefined): string | null {
- if (typeof value !== "string") {
- return null;
- }
- const trimmed = value.trim();
- return trimmed.length > 0 ? trimmed : null;
-}
-
function formatFileSize({ size }: { size: number }): string {
if (size < 1024) {
return `${size} B`;
@@ -164,7 +156,7 @@ function FilePreviewBody({
);
}
- if (preview.kind === "text") {
+ if (preview.kind === "text" || (location.lineStart && preview.content !== undefined)) {
if (renderKind === "html") {
// The HTML document owns its own scrolling, so no ScrollView wrapper here.
return (
@@ -239,8 +231,8 @@ export function FilePane({
const supportsEditing = useSessionStore(
(state) => state.sessions[serverId]?.serverInfo?.features?.workspaceFileEditing === true,
);
- const normalizedWorkspaceRoot = useMemo(() => workspaceRoot.trim(), [workspaceRoot]);
- const normalizedFilePath = useMemo(() => trimNonEmpty(location.path), [location.path]);
+ const normalizedWorkspaceRoot = workspaceRoot;
+ const normalizedFilePath = location.path || null;
const readTarget = useMemo(
() =>
normalizedFilePath
diff --git a/packages/app/src/file-pane/source/index.tsx b/packages/app/src/file-pane/source/index.tsx
new file mode 100644
index 0000000000..c31644cfeb
--- /dev/null
+++ b/packages/app/src/file-pane/source/index.tsx
@@ -0,0 +1,39 @@
+import { useTranslation } from "react-i18next";
+import { useMemo } from "react";
+import { UnistylesRuntime } from "react-native-unistyles";
+import type { WorkspaceFileLocation } from "@/workspace/file-open";
+import { FileSourceView } from "./view";
+
+/** Read-only source preview. The source module owns platform rendering and its theme. */
+export function WorkspaceFileSource(props: {
+ content: string;
+ filename: string;
+ location: WorkspaceFileLocation;
+ navigationRevision: number;
+ size: number;
+}) {
+ const { t } = useTranslation();
+ const theme = UnistylesRuntime.getTheme();
+ const visualTheme = useMemo(
+ () => ({
+ colorScheme: theme.colorScheme,
+ background: theme.colors.surface0,
+ foreground: theme.colors.foreground,
+ cursor: theme.colors.terminal.cursor,
+ foregroundMuted: theme.colors.foregroundMuted,
+ border: theme.colors.border,
+ selection: theme.colors.terminal.selectionBackground,
+ monoFont: theme.fontFamily.mono,
+ codeFontSize: theme.fontSize.code,
+ syntax: theme.colors.syntax,
+ }),
+ [theme],
+ );
+ return (
+
+ );
+}
diff --git a/packages/app/src/file-pane/source/view.native.tsx b/packages/app/src/file-pane/source/view.native.tsx
index de7c5eeae1..3ef40c93d6 100644
--- a/packages/app/src/file-pane/source/view.native.tsx
+++ b/packages/app/src/file-pane/source/view.native.tsx
@@ -1,5 +1,6 @@
-import { useEffect, useMemo, useRef } from "react";
-import { FlatList, Text, View, type ListRenderItem } from "react-native";
+import { useTranslation } from "react-i18next";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { FlatList, Text, View } from "react-native";
import { StyleSheet } from "react-native-unistyles";
import { highlightCode, type HighlightToken } from "@getpaseo/highlight";
import { syntaxTokenStyleFor } from "@/styles/syntax-token-styles";
@@ -58,14 +59,16 @@ function VirtualizedSource({
}: Omit
& {
presentation: "highlighted" | "plain";
}) {
+ const { t } = useTranslation();
const listRef = useRef>(null);
const lines = useMemo(() => {
+ const source = content.replace(/\r\n?/g, "\n");
if (presentation === "highlighted")
- return highlightCode(content, filename).map((tokens, index) => ({
+ return highlightCode(source, filename).map((tokens, index) => ({
number: index + 1,
tokens,
}));
- return content
+ return source
.split("\n")
.map((text, index) => ({ number: index + 1, tokens: [{ text, style: null }] }));
}, [content, filename, presentation]);
@@ -77,29 +80,63 @@ function VirtualizedSource({
viewPosition: 0.5,
});
}, [lines.length, location.lineStart, navigationRevision]);
+ const selectedLine = lines[(location.lineStart ?? 1) - 1]?.tokens
+ .map((token) => token.text)
+ .join("");
+ const changed =
+ location.expectedText !== undefined &&
+ selectedLine?.slice((location.columnStart ?? 1) - 1, (location.columnEnd ?? 1) - 1) !==
+ location.expectedText;
+ const renderLine = useCallback(
+ ({ item }: { item: SourceLine }) => (
+
+ ),
+ [changed, location],
+ );
return (
-
+
+ {changed ? (
+
+ {t("shell.commandCenter.contentChanged")}
+
+ ) : null}
+
+
);
}
-function SourceLineView({ line }: { line: SourceLine }) {
+function SourceLineView({ line, start, end }: { line: SourceLine; start?: number; end?: number }) {
+ let offset = 0;
return (
{line.number}
- {line.tokens.map((token) => (
-
- {token.text}
-
- ))}
+ {line.tokens.map((token) => {
+ const tokenStart = offset;
+ offset += token.text.length;
+ const from = Math.max(0, Math.min(token.text.length, (start ?? 1) - 1 - tokenStart));
+ const to = Math.max(from, Math.min(token.text.length, (end ?? 1) - 1 - tokenStart));
+ return (
+
+ {token.text.slice(0, from)}
+ {token.text.slice(from, to)}
+ {token.text.slice(to)}
+
+ );
+ })}
);
@@ -113,9 +150,14 @@ function sourceLineLayout(_data: ArrayLike | null | undefined, index
return { length: 20, offset: index * 20, index };
}
-const renderSourceLine: ListRenderItem = ({ item }) => ;
-
const styles = StyleSheet.create((theme) => ({
+ root: { flex: 1 },
+ notice: {
+ padding: theme.spacing[2],
+ color: theme.colors.foregroundMuted,
+ fontSize: theme.fontSize.sm,
+ },
+ match: { backgroundColor: theme.colors.terminal.selectionBackground },
unsupported: {
flex: 1,
alignItems: "center",
diff --git a/packages/app/src/file-pane/source/view.web.tsx b/packages/app/src/file-pane/source/view.web.tsx
index 3499ac7d8e..bc2c346046 100644
--- a/packages/app/src/file-pane/source/view.web.tsx
+++ b/packages/app/src/file-pane/source/view.web.tsx
@@ -1,9 +1,10 @@
+import { useTranslation } from "react-i18next";
import { useEffect, useRef, useState } from "react";
import { FileFind, FileFindModel } from "../find/index.web";
import { Compartment, EditorState } from "@codemirror/state";
-import { EditorView } from "@codemirror/view";
+import { EditorView, drawSelection } from "@codemirror/view";
import { getLanguageForFile } from "@getpaseo/highlight";
-import type { WorkspaceFileLocation } from "@/workspace/file-open";
+import { resolveWorkspaceFileSelection, type WorkspaceFileLocation } from "@/workspace/file-open";
import type { EditorVisualTheme } from "../editor/extensions.web";
import { editorTheme } from "../editor/extensions.web";
import { selectSourcePresentation, type SourcePresentation } from "./presentation";
@@ -60,6 +61,7 @@ function ReadonlyCodeMirror({
}: Omit & {
presentation: Exclude;
}) {
+ const { t } = useTranslation();
const [find] = useState(() => new FileFindModel());
const hostRef = useRef(null);
const viewRef = useRef(null);
@@ -79,6 +81,9 @@ function ReadonlyCodeMirror({
tabindex: "0",
"aria-label": `Source for ${values.filename}`,
}),
+ // The preview is never focused, so the browser draws no selection of its own; the
+ // exact occurrence has to be painted by CodeMirror.
+ drawSelection(),
EditorView.editable.of(false),
languageCompartment.of(
languageFor({ filename: values.filename, presentation: values.presentation }),
@@ -112,13 +117,17 @@ function ReadonlyCodeMirror({
useEffect(() => {
const view = viewRef.current;
if (!view || !location.lineStart) return;
- const line = Math.min(location.lineStart, view.state.doc.lines);
- const from = view.state.doc.line(line).from;
- view.dispatch({ effects: EditorView.scrollIntoView(from, { y: "center" }) });
- }, [location.lineStart, navigationRevision]);
+ const { from, to } = resolveWorkspaceFileSelection(view.state.doc.toString(), location);
+ view.dispatch({
+ selection: { anchor: from, head: to },
+ effects: EditorView.scrollIntoView(from, { y: "center" }),
+ });
+ }, [content, location, navigationRevision]);
+ const changed = resolveWorkspaceFileSelection(content.replace(/\r\n?/g, "\n"), location).changed;
return (
+ {changed ?
{t("shell.commandCenter.contentChanged")}
: null}