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.

Author: outlook84

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()

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>
   )

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) {