fix: sync DOM widget values with WidgetValueStore

DOM widgets were bypassing value/state management in BaseWidget.

- useStringWidget: read from store first, sync setValue to store

- useMarkdownWidget: same pattern applied

- uploadAudio: replace closure variable with store integration

Amp-Thread-ID: https://ampcode.com/threads/T-019c2a03-f6b7-70cc-9ccb-7e534dbbbd54
Co-authored-by: Amp <amp@ampcode.com>

src/extensions/core/uploadAudio.ts

@@ -23,6 +23,7 @@ import { getNodeByLocatorId } from '@/utils/graphTraversalUtil'
 
 import { api } from '../../scripts/api'
 import { app } from '../../scripts/app'
+import { useWidgetValueStore } from '@/stores/widgetValueStore'
 
 function updateUIWidget(
   audioUIWidget: DOMWidget<HTMLAudioElement, string>,
@@ -137,9 +138,16 @@ app.registerExtension({
           }
         }
 
-        let value = ''
-        audioUIWidget.options.getValue = () => value
-        audioUIWidget.options.setValue = (v) => (value = v)
+        audioUIWidget.options.getValue = () =>
+          (useWidgetValueStore().getWidget(node.id, inputName)
+            ?.value as string) ?? ''
+        audioUIWidget.options.setValue = (v) => {
+          const widgetState = useWidgetValueStore().getWidget(
+            node.id,
+            inputName
+          )
+          if (widgetState) widgetState.value = v
+        }
 
         return { widget: audioUIWidget }
       }

src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

@@ -11,6 +11,7 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { app } from '@/scripts/app'
 import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import { useWidgetValueStore } from '@/stores/widgetValueStore'
 
 function addMarkdownWidget(
   node: LGraphNode,
@@ -43,14 +44,19 @@ function addMarkdownWidget(
 
   const widget = node.addDOMWidget(name, 'MARKDOWN', inputEl, {
     getValue(): string {
-      return textarea.value
+      return (
+        (useWidgetValueStore().getWidget(node.id, name)?.value as string) ??
+        textarea.value
+      )
     },
     setValue(v: string) {
       textarea.value = v
       editor.commands.setContent(v)
+      const widgetState = useWidgetValueStore().getWidget(node.id, name)
+      if (widgetState) widgetState.value = v
     }
   })
-  widget.inputEl = inputEl
+  widget.element = inputEl
   widget.options.minNodeSize = [400, 200]
 
   inputEl.addEventListener('dblclick', () => {

src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts

@@ -4,6 +4,7 @@ import { isStringInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { app } from '@/scripts/app'
 import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import { useWidgetValueStore } from '@/stores/widgetValueStore'
 
 const TRACKPAD_DETECTION_THRESHOLD = 50
 
@@ -20,14 +21,19 @@ function addMultilineWidget(
 
   const widget = node.addDOMWidget(name, 'customtext', inputEl, {
     getValue(): string {
-      return inputEl.value
+      return (
+        (useWidgetValueStore().getWidget(node.id, name)?.value as string) ??
+        inputEl.value
+      )
     },
     setValue(v: string) {
       inputEl.value = v
+      const widgetState = useWidgetValueStore().getWidget(node.id, name)
+      if (widgetState) widgetState.value = v
     }
   })
 
-  widget.inputEl = inputEl
+  widget.element = inputEl
   widget.options.minNodeSize = [400, 200]
 
   inputEl.addEventListener('input', () => {