Add setting to adjust textarea font size (#463)

Author: huchenlei

src/App.vue

@@ -6,7 +6,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, markRaw, onMounted, onUnmounted, watch } from 'vue'
+import {
+  computed,
+  markRaw,
+  onMounted,
+  onUnmounted,
+  watch,
+  watchEffect
+} from 'vue'
 import BlockUI from 'primevue/blockui'
 import ProgressSpinner from 'primevue/progressspinner'
 import GraphCanvas from '@/components/graph/GraphCanvas.vue'
@@ -39,6 +46,14 @@ watch(
   { immediate: true }
 )
 
+watchEffect(() => {
+  const fontSize = useSettingStore().get('Comfy.TextareaWidget.FontSize')
+  document.documentElement.style.setProperty(
+    '--comfy-textarea-font-size',
+    `${fontSize}px`
+  )
+})
+
 const { t } = useI18n()
 const init = () => {
   useSettingStore().addSettings(app.ui.settings)

src/assets/css/style.css

@@ -131,7 +131,7 @@ body {
   resize: none;
   border: none;
   box-sizing: border-box;
-  font-size: 10px;
+  font-size: var(--comfy-textarea-font-size);
 }
 
 .comfy-modal {

src/stores/settingStore.ts

@@ -106,6 +106,17 @@ export const useSettingStore = defineStore('setting', {
         options: ['normal', 'small'],
         defaultValue: window.innerWidth < 1600 ? 'small' : 'normal'
       })
+
+      app.ui.settings.addSetting({
+        id: 'Comfy.TextareaWidget.FontSize',
+        name: 'Textarea widget font size',
+        type: 'slider',
+        defaultValue: 10,
+        attrs: {
+          min: 8,
+          max: 24
+        }
+      })
     },
 
     set<K extends keyof Settings>(key: K, value: Settings[K]) {

src/types/apiTypes.ts

@@ -424,6 +424,7 @@ const zSettings = z.record(z.any()).and(
       'Comfy.Sidebar.Size': z.number(),
       'Comfy.SwitchUser': z.any(),
       'Comfy.SnapToGrid.GridSize': z.number(),
+      'Comfy.TextareaWidget.FontSize': z.number(),
       'Comfy.UseNewMenu': z.any(),
       'Comfy.Validation.Workflows': z.boolean()
     })