From 67ed3c3e5fbc63286a206c1eafafcf1936f295f1 Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Sun, 25 Aug 2024 10:16:31 -0400
Subject: [PATCH] Add textarea widget spell check setting

---
 src/components/graph/GraphCanvas.vue | 12 ++++++++++++
 src/scripts/widgets.ts               |  9 +++++++--
 src/stores/settingStore.ts           |  8 ++++++++
 src/types/apiTypes.ts                |  4 ++--
 4 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 5a2b0d4d..a5319747 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -83,6 +83,18 @@ watchEffect(() => {
   )
 })
 
+watchEffect(() => {
+  const spellcheckEnabled = settingStore.get('Comfy.TextareaWidget.Spellcheck')
+  const textareas = document.querySelectorAll('textarea.comfy-multiline-input')
+
+  textareas.forEach((textarea: HTMLTextAreaElement) => {
+    textarea.spellcheck = spellcheckEnabled
+    // Force recheck to ensure visual update
+    textarea.focus()
+    textarea.blur()
+  })
+})
+
 let dropTargetCleanup = () => {}
 
 onMounted(async () => {
diff --git a/src/scripts/widgets.ts b/src/scripts/widgets.ts
index 548e393b..6bee0039 100644
--- a/src/scripts/widgets.ts
+++ b/src/scripts/widgets.ts
@@ -3,6 +3,7 @@ import './domWidget'
 import type { ComfyApp } from './app'
 import type { IWidget, LGraphNode } from '@comfyorg/litegraph'
 import { ComfyNodeDef } from '@/types/apiTypes'
+import { useSettingStore } from '@/stores/settingStore'
 
 export type ComfyWidgetConstructor = (
   node: LGraphNode,
@@ -312,12 +313,16 @@ function createIntWidget(
   }
 }
 
-function addMultilineWidget(node, name, opts, app) {
+function addMultilineWidget(node, name: string, opts, app: ComfyApp) {
   const inputEl = document.createElement('textarea')
   inputEl.className = 'comfy-multiline-input'
   inputEl.value = opts.defaultVal
   inputEl.placeholder = opts.placeholder || name
-  inputEl.spellcheck = opts.spellcheck || false
+  if (app.vueAppReady) {
+    inputEl.spellcheck = useSettingStore().get(
+      'Comfy.TextareaWidget.Spellcheck'
+    )
+  }
 
   const widget = node.addDOMWidget(name, 'customtext', inputEl, {
     getValue() {
diff --git a/src/stores/settingStore.ts b/src/stores/settingStore.ts
index b2dc17b9..b4d9bbb3 100644
--- a/src/stores/settingStore.ts
+++ b/src/stores/settingStore.ts
@@ -134,6 +134,14 @@ export const useSettingStore = defineStore('setting', {
         }
       })
 
+      app.ui.settings.addSetting({
+        id: 'Comfy.TextareaWidget.Spellcheck',
+        category: ['Comfy', 'Node Widget', 'TextareaWidget', 'Spellcheck'],
+        name: 'Textarea widget spellcheck',
+        type: 'boolean',
+        defaultValue: false
+      })
+
       app.ui.settings.addSetting({
         id: 'Comfy.Workflow.SortNodeIdOnSave',
         name: 'Sort node IDs when saving workflow',
diff --git a/src/types/apiTypes.ts b/src/types/apiTypes.ts
index 0846b00a..5ddcaada 100644
--- a/src/types/apiTypes.ts
+++ b/src/types/apiTypes.ts
@@ -291,8 +291,7 @@ const zStringInputSpec = inputSpec([
 
     // Multiline-only fields
     defaultVal: z.string().optional(),
-    placeholder: z.string().optional(),
-    spellcheck: z.boolean().optional()
+    placeholder: z.string().optional()
   })
 ])
 
@@ -448,6 +447,7 @@ const zSettings = z.record(z.any()).and(
       'Comfy.SwitchUser': z.any(),
       'Comfy.SnapToGrid.GridSize': z.number(),
       'Comfy.TextareaWidget.FontSize': z.number(),
+      'Comfy.TextareaWidget.Spellcheck': z.boolean(),
       'Comfy.UseNewMenu': z.any(),
       'Comfy.Validation.Workflows': z.boolean(),
       'Comfy.Workflow.SortNodeIdOnSave': z.boolean()