Massbug/judge4c
2
0
Fork 0
mirror of https://github.com/massbug/judge4c.git synced 2025-05-18 07:16:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(code-editor): Merge editor options and support dynamic font and line height adjustment

Browse Source 
- In the CodeEditor component, merged the default CODE_EDITOR_OPTIONS with dynamic options returned by useCodeEditorOption to support runtime font size and line height adjustments.

- Additionally, added the useCodeEditorOption hook to useCodeEditor.ts to manage the state of font size and line height.

- This allows users to dynamically adjust the editor's display properties.
This commit is contained in:
cfngc4594 2025-02-23 14:22:16 +08:00
parent 5af57fbfcf
commit b2b6d1e484
2 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/code-editor.tsx
View File

@ -8,9 +8,9 @@ import { highlighter } from "@/lib/shiki";
import { DEFAULT_VALUE } from "@/config/value";
import { shikiToMonaco } from "@shikijs/monaco";
import { Skeleton } from "@/components/ui/skeleton";
import { useCodeEditorState } from "@/store/useCodeEditor";
import { CODE_EDITOR_OPTIONS } from "@/constants/code-editor-options";
import { SUPPORTED_LANGUAGE_SERVERS } from "@/config/language-server";
import { useCodeEditorOption, useCodeEditorState } from "@/store/useCodeEditor";
import { toSocket, WebSocketMessageReader, WebSocketMessageWriter } from "vscode-ws-jsonrpc";
const Editor = dynamic(
@ -31,6 +31,7 @@ const Editor = dynamic(
export default function CodeEditor() {
const { resolvedTheme } = useTheme();
const { fontSize, lineHeight } = useCodeEditorOption();
const { language, languageClient, setLanguageClient } = useCodeEditorState();
useEffect(() => {
@ -88,6 +89,12 @@ export default function CodeEditor() {
}
}, [language]);
const mergeOptions = {
...CODE_EDITOR_OPTIONS,
fontSize,
lineHeight,
};
return (
<Editor
defaultLanguage={language}
@ -95,7 +102,7 @@ export default function CodeEditor() {
path="file:///main.c"
theme={resolvedTheme === "light" ? "github-light-default" : "github-dark-default"}
className="h-[calc(100vh-56px)]"
options={CODE_EDITOR_OPTIONS}
options={mergeOptions}
beforeMount={(monaco) => {
shikiToMonaco(highlighter, monaco);
}}

9
src/store/useCodeEditor.ts
View File

@ -1,7 +1,9 @@
import { create } from "zustand";
import * as monaco from "monaco-editor";
import { DEFAULT_LANGUAGE } from "@/config/language";
import { SupportedLanguage } from "@/constants/language";
import { MonacoLanguageClient } from "monaco-languageclient";
import { CODE_EDITOR_OPTIONS } from "@/constants/code-editor-options";
interface CodeEditorState {
language: SupportedLanguage;
@ -16,3 +18,10 @@ export const useCodeEditorState = create<CodeEditorState>((set) => ({
setLanguage: (language) => set({ language }),
setLanguageClient: (languageClient) => set({ languageClient }),
}));
export const useCodeEditorOption = create<monaco.editor.IEditorConstructionOptions>((set) => ({
fontSize: CODE_EDITOR_OPTIONS.fontSize,
lineHeight: CODE_EDITOR_OPTIONS.lineHeight,
setFontSize: (fontSize: number) => set({ fontSize }),
setLineHeight: (lineHeight: number) => set({ lineHeight })
}))