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,
} from "@/config";
import { useState } from "react";
import * as monaco from "monaco-editor";
import { highlighter } from "@/lib/shiki";
import { Bot, CodeXml } from "lucide-react";
import { shikiToMonaco } from "@shikijs/monaco";
@ -31,7 +32,7 @@ function App() {
strokeWidth={2}
aria-hidden="true"
/>
Code
</TabsTrigger>
<TabsTrigger
value="diff-editor"
@ -43,21 +44,45 @@ function App() {
strokeWidth={2}
aria-hidden="true"
/>
AI Assistant
AI
</TabsTrigger>
</TabsList>
<ScrollBar orientation="horizontal" />
</ScrollArea>
<TabsContent value="code-editor" className="h-full">
<TabsContent value="code-editor" className="h-full mt-0">
<Editor
theme={theme}
path={file.path}
defaultLanguage={file.language}
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) => {
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) => {
if (value !== undefined) {
window.parent.postMessage(
@ -68,13 +93,24 @@ function App() {
}}
/>
</TabsContent>
<TabsContent value="diff-editor" className="h-full">
<TabsContent value="diff-editor" className="h-full mt-0">
<DiffEditor
theme={theme}
language={file.language}
original={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) => {
shikiToMonaco(await highlighter, monaco);
}}