feat: enhance code editor with improved options and multilingual support

This commit is contained in:
ngc2207 2025-01-10 15:40:24 +08:00
parent 6a88409a32
commit 3cf2cd156a
2 changed files with 42 additions and 6 deletions

Binary file not shown.

View File

@ -4,6 +4,7 @@ import {
DEFAULT_EDITOR_LANGUAGE, DEFAULT_EDITOR_LANGUAGE,
} from "@/config"; } from "@/config";
import { useState } from "react"; import { useState } from "react";
import * as monaco from "monaco-editor";
import { highlighter } from "@/lib/shiki"; import { highlighter } from "@/lib/shiki";
import { Bot, CodeXml } from "lucide-react"; import { Bot, CodeXml } from "lucide-react";
import { shikiToMonaco } from "@shikijs/monaco"; import { shikiToMonaco } from "@shikijs/monaco";
@ -31,7 +32,7 @@ function App() {
strokeWidth={2} strokeWidth={2}
aria-hidden="true" aria-hidden="true"
/> />
Code
</TabsTrigger> </TabsTrigger>
<TabsTrigger <TabsTrigger
value="diff-editor" value="diff-editor"
@ -43,21 +44,45 @@ function App() {
strokeWidth={2} strokeWidth={2}
aria-hidden="true" aria-hidden="true"
/> />
AI Assistant AI
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
<ScrollBar orientation="horizontal" /> <ScrollBar orientation="horizontal" />
</ScrollArea> </ScrollArea>
<TabsContent value="code-editor" className="h-full"> <TabsContent value="code-editor" className="h-full mt-0">
<Editor <Editor
theme={theme} theme={theme}
path={file.path} path={file.path}
defaultLanguage={file.language} defaultLanguage={file.language}
defaultValue={file.value} defaultValue={file.value}
options={{ automaticLayout: true, minimap: { enabled: false } }} options={{
minimap: { enabled: false },
fontSize: 16,
tabSize: 2,
showFoldingControls: "always",
automaticLayout: true,
autoIndent: "full",
guides: {
bracketPairs: true,
indentation: true,
},
padding: { top: 8 },
}}
beforeMount={async (monaco: Monaco) => { beforeMount={async (monaco: Monaco) => {
shikiToMonaco(await highlighter, monaco); shikiToMonaco(await highlighter, monaco);
}} }}
onMount={(
editor: monaco.editor.IStandaloneCodeEditor,
monaco: Monaco
) => {
const value = editor.getModel()?.getValue();
if (value !== undefined) {
window.parent.postMessage(
{ type: "editor-info", language, code: value },
"*"
);
}
}}
onChange={(value) => { onChange={(value) => {
if (value !== undefined) { if (value !== undefined) {
window.parent.postMessage( window.parent.postMessage(
@ -68,13 +93,24 @@ function App() {
}} }}
/> />
</TabsContent> </TabsContent>
<TabsContent value="diff-editor" className="h-full"> <TabsContent value="diff-editor" className="h-full mt-0">
<DiffEditor <DiffEditor
theme={theme} theme={theme}
language={file.language} language={file.language}
original={file.value} original={file.value}
modified={file.value} modified={file.value}
options={{ automaticLayout: true, minimap: { enabled: false } }} options={{
minimap: { enabled: false },
fontSize: 16,
showFoldingControls: "always",
automaticLayout: true,
autoIndent: "full",
guides: {
bracketPairs: true,
indentation: true,
},
padding: { top: 8 },
}}
beforeMount={async (monaco: Monaco) => { beforeMount={async (monaco: Monaco) => {
shikiToMonaco(await highlighter, monaco); shikiToMonaco(await highlighter, monaco);
}} }}