From 479ca63e3cdacca38dbe99c507df1beb28c2c0e4 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Fri, 16 Aug 2024 10:17:40 -0400
Subject: [PATCH] Add setting to adjust textarea font size (#463)

---
 src/App.vue                | 17 ++++++++++++++++-
 src/assets/css/style.css   |  2 +-
 src/stores/settingStore.ts | 11 +++++++++++
 src/types/apiTypes.ts      |  1 +
 4 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5bcff252a..ba00d55eb 100644
--- a/src/App.vue
+++ b/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)
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 8c338280b..908107d79 100644
--- a/src/assets/css/style.css
+++ b/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 {
diff --git a/src/stores/settingStore.ts b/src/stores/settingStore.ts
index 95fd2b239..44ac9dce8 100644
--- a/src/stores/settingStore.ts
+++ b/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]) {
diff --git a/src/types/apiTypes.ts b/src/types/apiTypes.ts
index b330ac5a8..c350b8da5 100644
--- a/src/types/apiTypes.ts
+++ b/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()
     })