From e7273e002a39cfb8b58ef3bc3eb0367fa4ae2839 Mon Sep 17 00:00:00 2001
From: outlook84 <96007761+outlook84@users.noreply.github.com>
Date: Thu, 4 Sep 2025 19:36:38 +0800
Subject: [PATCH] feat(editor): Add configurable font size (#188)

This commit introduces a new local setting to allow users to customize the font size in the Monaco editor.

- Adds an editor_font_size setting to the local store with a default of 14.

- Implements a number input with increment/decrement buttons in the Local Settings panel to modify the font size.

- The MonacoEditor component now reads this value to set its font size and updates dynamically when the setting is changed.
---
 src/components/MonacoEditor.tsx          |  9 ++++++
 src/pages/home/toolbar/LocalSettings.tsx | 36 ++++++++++++++++++++++++
 src/store/local_settings.ts              |  5 ++++
 3 files changed, 50 insertions(+)

diff --git a/src/components/MonacoEditor.tsx b/src/components/MonacoEditor.tsx
index 88fa4ab..df55c2b 100644
--- a/src/components/MonacoEditor.tsx
+++ b/src/components/MonacoEditor.tsx
@@ -4,6 +4,7 @@ import { MaybeLoading } from "./FullLoading"
 import loader from "@monaco-editor/loader"
 import { useCDN } from "~/hooks"
 import type * as monacoType from "monaco-editor/esm/vs/editor/editor.api"
+import { local } from "~/store"
 
 export interface MonacoEditorProps {
   value: string
@@ -42,6 +43,7 @@ export const MonacoEditor = (props: MonacoEditorProps) => {
     monacoEditor = monaco.editor.create(monacoEditorDiv!, {
       value: props.value,
       theme: props.theme,
+      fontSize: parseInt(local.editor_font_size),
     })
     model = monaco.editor.createModel(
       props.value,
@@ -60,6 +62,13 @@ export const MonacoEditor = (props: MonacoEditorProps) => {
   createEffect(() => {
     monaco.editor.setTheme(props.theme)
   })
+
+  createEffect(() => {
+    monacoEditor?.updateOptions({
+      fontSize: parseInt(local.editor_font_size),
+    })
+  })
+
   onCleanup(() => {
     model && model.dispose()
     monacoEditor && monacoEditor.dispose()
diff --git a/src/pages/home/toolbar/LocalSettings.tsx b/src/pages/home/toolbar/LocalSettings.tsx
index e2993e9..ff12b3f 100644
--- a/src/pages/home/toolbar/LocalSettings.tsx
+++ b/src/pages/home/toolbar/LocalSettings.tsx
@@ -23,8 +23,10 @@ import {
   SelectValue,
   VStack,
   Switch as HopeSwitch,
+  IconButton,
 } from "@hope-ui/solid"
 import { For, Match, onCleanup, Switch } from "solid-js"
+import { FaSolidMinus, FaSolidPlus } from "solid-icons/fa"
 import { SwitchLanguageWhite, SwitchColorMode } from "~/components"
 import { useT } from "~/hooks"
 import { initialLocalSettings, local, LocalSetting, setLocal } from "~/store"
@@ -80,6 +82,40 @@ function LocalSettingEdit(props: LocalSetting) {
             }}
           />
         </Match>
+        <Match when={props.type === "number"}>
+          <HStack>
+            <IconButton
+              aria-label="decrease"
+              icon={<FaSolidMinus />}
+              onClick={() => {
+                setLocal(
+                  props.key,
+                  Math.max(1, parseInt(local[props.key]) - 1).toString(),
+                )
+              }}
+            />
+            <Input
+              type="number"
+              value={local[props.key]}
+              onInput={(e) => {
+                setLocal(props.key, e.currentTarget.value)
+              }}
+              style={{
+                "-moz-appearance": "textfield",
+                "::-webkit-inner-spin-button": { display: "none" },
+                "::-webkit-outer-spin-button": { display: "none" },
+              }}
+              class="hide-spin"
+            />
+            <IconButton
+              aria-label="increase"
+              icon={<FaSolidPlus />}
+              onClick={() => {
+                setLocal(props.key, (parseInt(local[props.key]) + 1).toString())
+              }}
+            />
+          </HStack>
+        </Match>
       </Switch>
     </FormControl>
   )
diff --git a/src/store/local_settings.ts b/src/store/local_settings.ts
index c22d02f..69325c7 100644
--- a/src/store/local_settings.ts
+++ b/src/store/local_settings.ts
@@ -66,6 +66,11 @@ export const initialLocalSettings = [
     options: ["direct", "dblclick", "disable_while_checked"],
     hidden: false,
   },
+  {
+    key: "editor_font_size",
+    default: "14",
+    type: "number",
+  },
 ]
 export type LocalSetting = (typeof initialLocalSettings)[number]
 for (const setting of initialLocalSettings) {