feat(playground): enhance PlaygroundPage with Monaco editor focus and position handling

This commit is contained in:
ngc2207 2025-01-05 03:05:19 +08:00
parent d71a2fd534
commit 2c7630c286

View File

@ -1,6 +1,7 @@
"use client"; "use client";
import { useState } from "react"; import * as monaco from "monaco-editor";
import { 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";
@ -39,6 +40,7 @@ int main() {
}; };
export default function PlaygroundPage() { export default function PlaygroundPage() {
const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
const [language, setLanguage] = useState<keyof typeof files>("c"); const [language, setLanguage] = useState<keyof typeof files>("c");
const file = files[language]; const file = files[language];
@ -98,6 +100,20 @@ export default function PlaygroundPage() {
defaultLanguage={file.language} defaultLanguage={file.language}
defaultValue={file.value} defaultValue={file.value}
options={{ automaticLayout: true }} options={{ automaticLayout: true }}
onMount={(editor) => {
editorRef.current = editor;
const model = editor.getModel();
if (model) {
const lineCount = model.getLineCount();
const lastLineLength = model.getLineLength(lineCount);
editor.setPosition({
lineNumber: lineCount,
column: lastLineLength + 1,
});
editor.focus();
console.log(editor.getModel()?.uri.path);
}
}}
/> />
</div> </div>
); );