Add textarea widget spell check setting (#627)

Comfy-Org · Aug 25, 2024 · a1e40b1 · a1e40b1
1 parent b863c11
commit a1e40b1
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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()