@@ -1080,7 +1146,10 @@ export function Action({
className="cell-card"
>
{/* Code editor section — overflow-hidden keeps border-radius clipping on the editor */}
-
+
{
const updated = create(parser_pb.CellSchema, cell);
updated.value = v;
@@ -1270,7 +1340,17 @@ export function Action({
);
}
-function NotebookTabContent({ docUri }: { docUri: string }) {
+function NotebookTabContent({
+ docUri,
+ activeCell,
+ isWindowFocused,
+ onCellFocus,
+}: {
+ docUri: string;
+ activeCell: NotebookActiveCellState | null;
+ isWindowFocused: boolean;
+ onCellFocus: (docUri: string, state: NotebookActiveCellState) => void;
+}) {
const { getNotebookData, useNotebookSnapshot } = useNotebookContext();
const notebookSnapshot = useNotebookSnapshot(docUri);
const cellDatas = useMemo(() => {
@@ -1329,6 +1409,10 @@ function NotebookTabContent({ docUri }: { docUri: string }) {
cellData={cellData}
docUri={docUri}
isFirst={index === 0}
+ isActiveCell={activeCell?.refId === refId}
+ activeFocusRole={activeCell?.focusRole ?? "editor"}
+ isWindowFocused={isWindowFocused}
+ onFocusStateChange={(state) => onCellFocus(docUri, state)}
/>
);
})}
@@ -1363,6 +1447,15 @@ export default function Actions() {
Boolean(driveLinkSnapshot.lastErrorMessage);
const [mountedTabs, setMountedTabs] = useState>(() => new Set());
const [selectedTabUri, setSelectedTabUri] = useState(null);
+ const [activeCellsByDoc, setActiveCellsByDoc] = useState(
+ () => loadNotebookActiveCellMap(),
+ );
+ const [isWindowFocused, setIsWindowFocused] = useState(() => {
+ if (typeof document === "undefined") {
+ return false;
+ }
+ return document.visibilityState === "visible" && document.hasFocus();
+ });
// Empty-state hint visibility is stored locally so the hint panel can be
// revealed on demand without cluttering the default view.
const [showConsoleHints, setShowConsoleHints] = useState(false);
@@ -1410,6 +1503,27 @@ export default function Actions() {
currentDocUri ??
(statusTabVisible ? DRIVE_LINK_STATUS_TAB_URI : openNotebooks[0]?.uri ?? "");
+ const handleCellFocus = useCallback(
+ (docUri: string, state: NotebookActiveCellState) => {
+ setActiveCellsByDoc((prev) => {
+ const current = prev[docUri];
+ if (
+ current?.refId === state.refId &&
+ current.focusRole === state.focusRole
+ ) {
+ return prev;
+ }
+ const next = {
+ ...prev,
+ [docUri]: state,
+ };
+ persistNotebookActiveCellMap(next);
+ return next;
+ });
+ },
+ [],
+ );
+
// Ensure the active tab is tracked as mounted on first render/whenever it changes.
useEffect(() => {
if (!currentDocUri) {
@@ -1439,6 +1553,28 @@ export default function Actions() {
}
}, [currentDocUri, openNotebooks, selectedTabUri, statusTabVisible]);
+ useEffect(() => {
+ if (typeof window === "undefined" || typeof document === "undefined") {
+ return;
+ }
+
+ const syncWindowFocus = () => {
+ setIsWindowFocused(
+ document.visibilityState === "visible" && document.hasFocus(),
+ );
+ };
+
+ syncWindowFocus();
+ window.addEventListener("focus", syncWindowFocus);
+ window.addEventListener("blur", syncWindowFocus);
+ document.addEventListener("visibilitychange", syncWindowFocus);
+ return () => {
+ window.removeEventListener("focus", syncWindowFocus);
+ window.removeEventListener("blur", syncWindowFocus);
+ document.removeEventListener("visibilitychange", syncWindowFocus);
+ };
+ }, []);
+
// Keep the active tab discoverable when the tab rail overflows horizontally.
// We track each rendered tab node and ask the browser to reveal the selected
// one so keyboard/mouse tab changes do not leave the active notebook clipped.
@@ -1884,7 +2020,14 @@ export default function Actions() {
asChild
>
-
+
))}
diff --git a/app/src/components/Actions/Editor.tsx b/app/src/components/Actions/Editor.tsx
index bed4da5..a312be6 100644
--- a/app/src/components/Actions/Editor.tsx
+++ b/app/src/components/Actions/Editor.tsx
@@ -17,6 +17,8 @@ const Editor = memo(
readOnly = false,
ariaLabel,
autoFocusWhenEmpty = true,
+ shouldFocus = false,
+ onFocus,
onChange,
onEnter,
onMount,
@@ -29,6 +31,8 @@ const Editor = memo(
readOnly?: boolean;
ariaLabel?: string;
autoFocusWhenEmpty?: boolean;
+ shouldFocus?: boolean;
+ onFocus?: () => void;
onChange: (value: string) => void;
onEnter: () => void;
onMount?: (editor: any, monaco: any) => void;
@@ -46,6 +50,8 @@ const Editor = memo(
// don't render an empty scroll track.
const [isClamped, setIsClamped] = useState(false);
const contentSizeListener = useRef<{ dispose: () => void } | null>(null);
+ const focusListener = useRef<{ dispose: () => void } | null>(null);
+ const previousShouldFocusRef = useRef(false);
// Keep the ref updated with the latest onEnter
useEffect(() => {
@@ -146,6 +152,9 @@ const Editor = memo(
contentSizeListener.current = editor.onDidContentSizeChange(() => {
adjustHeight();
});
+ focusListener.current = editor.onDidFocusEditorText(() => {
+ onFocus?.();
+ });
onMount?.(editor, monaco);
};
@@ -160,10 +169,21 @@ const Editor = memo(
editorRef.current.layout?.({ width, height });
}, [width, height]);
+ useEffect(() => {
+ const wasFocused = previousShouldFocusRef.current;
+ previousShouldFocusRef.current = shouldFocus;
+ if (!shouldFocus || wasFocused || readOnly || !editorRef.current) {
+ return;
+ }
+ editorRef.current.focus?.();
+ }, [readOnly, shouldFocus]);
+
useEffect(() => {
return () => {
contentSizeListener.current?.dispose?.();
contentSizeListener.current = null;
+ focusListener.current?.dispose?.();
+ focusListener.current = null;
};
}, []);
@@ -220,7 +240,8 @@ const Editor = memo(
prevProps.language === nextProps.language &&
prevProps.readOnly === nextProps.readOnly &&
prevProps.ariaLabel === nextProps.ariaLabel &&
- prevProps.autoFocusWhenEmpty === nextProps.autoFocusWhenEmpty
+ prevProps.autoFocusWhenEmpty === nextProps.autoFocusWhenEmpty &&
+ prevProps.shouldFocus === nextProps.shouldFocus
);
},
);
diff --git a/app/src/components/Actions/MarkdownCell.test.tsx b/app/src/components/Actions/MarkdownCell.test.tsx
new file mode 100644
index 0000000..0e1df9a
--- /dev/null
+++ b/app/src/components/Actions/MarkdownCell.test.tsx
@@ -0,0 +1,260 @@
+// @vitest-environment jsdom
+import { describe, expect, it, vi } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { clone, create } from "@bufbuild/protobuf";
+import React from "react";
+
+import { parser_pb } from "../../runme/client";
+import type { CellData } from "../../lib/notebookData";
+import MarkdownCell from "./MarkdownCell";
+
+vi.mock("./Editor", () => ({
+ default: ({
+ id,
+ value,
+ onChange,
+ shouldFocus = false,
+ }: {
+ id: string;
+ value: string;
+ onChange: (value: string) => void;
+ shouldFocus?: boolean;
+ }) => {
+ const ref = React.useRef(null);
+ const previousShouldFocusRef = React.useRef(false);
+
+ React.useEffect(() => {
+ const wasFocused = previousShouldFocusRef.current;
+ previousShouldFocusRef.current = shouldFocus;
+ if (!shouldFocus || wasFocused) {
+ return;
+ }
+ ref.current?.focus();
+ }, [shouldFocus]);
+
+ return (
+