litchi/judge
1
0
Fork 0
mirror of https://litchi.icu/ngc2207/judge.git synced 2025-10-31 03:24:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(playground): add auto-focus and position handling on language change in PlaygroundPage

Browse Source
This commit is contained in:
ngc2207 2025-01-05 03:18:15 +08:00
parent 2c7630c286
commit 3737a708f6
1 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/playground/page.tsx
View File

@ -1,7 +1,7 @@
"use client"; "use client";
import * as monaco from "monaco-editor"; import * as monaco from "monaco-editor";
import { useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { Editor } from "@monaco-editor/react"; import { Editor } from "@monaco-editor/react";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
@ -44,6 +44,21 @@ export default function PlaygroundPage() {
const [language, setLanguage] = useState<keyof typeof files>("c"); const [language, setLanguage] = useState<keyof typeof files>("c");
const file = files[language]; const file = files[language];
useEffect(() => {
if (editorRef.current) {
const model = editorRef.current.getModel();
if (model) {
const lineCount = model.getLineCount();
const lastLineLength = model.getLineLength(lineCount);
editorRef.current.setPosition({
lineNumber: lineCount,
column: lastLineLength + 1,
});
editorRef.current.focus();
}
}
}, [language]);
return ( return (
<div className="h-full flex flex-col"> <div className="h-full flex flex-col">
<Tabs defaultValue={language as string}> <Tabs defaultValue={language as string}>
@ -102,16 +117,15 @@ export default function PlaygroundPage() {
options={{ automaticLayout: true }} options={{ automaticLayout: true }}
onMount={(editor) => { onMount={(editor) => {
editorRef.current = editor; editorRef.current = editor;
const model = editor.getModel(); const model = editorRef.current.getModel();
if (model) { if (model) {
const lineCount = model.getLineCount(); const lineCount = model.getLineCount();
const lastLineLength = model.getLineLength(lineCount); const lastLineLength = model.getLineLength(lineCount);
editor.setPosition({ editorRef.current.setPosition({
lineNumber: lineCount, lineNumber: lineCount,
column: lastLineLength + 1, column: lastLineLength + 1,
}); });
editor.focus(); editorRef.current.focus();
console.log(editor.getModel()?.uri.path);
} }
}} }}
/> />