From b2b6d1e4846bf61c4243aa64b64e6e7ac27c6ce7 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Sun, 23 Feb 2025 14:22:16 +0800
Subject: [PATCH] feat(code-editor): Merge editor options and support dynamic
 font and line height adjustment

- 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.
---
 src/components/code-editor.tsx | 11 +++++++++--
 src/store/useCodeEditor.ts     |  9 +++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/code-editor.tsx b/src/components/code-editor.tsx
index b1c9b3e..24ca1ae 100644
--- a/src/components/code-editor.tsx
+++ b/src/components/code-editor.tsx
@@ -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);
       }}
diff --git a/src/store/useCodeEditor.ts b/src/store/useCodeEditor.ts
index 2401e17..d4e86e5 100644
--- a/src/store/useCodeEditor.ts
+++ b/src/store/useCodeEditor.ts
@@ -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 })
+}))