From 81102604f59bbc949a14dbd857aa8202193311c1 Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Mon, 24 Feb 2025 08:32:43 -0700
Subject: [PATCH] Type addDOMWidget (#2705)

---
 src/scripts/domWidget.ts              |  6 ++++++
 src/services/litegraphService.ts      |  5 ++++-
 src/types/litegraph-augmentation.d.ts | 13 ++++++++-----
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/scripts/domWidget.ts b/src/scripts/domWidget.ts
index 92b4e1b512..be59be189e 100644
--- a/src/scripts/domWidget.ts
+++ b/src/scripts/domWidget.ts
@@ -28,6 +28,12 @@ export interface DOMWidget<T extends HTMLElement, V extends object | string>
   options: DOMWidgetOptions<T, V>
   value: V
   y?: number
+  /**
+   * @deprecated Legacy property used by some extensions for customtext
+   * (textarea) widgets. Use `element` instead as it provides the same
+   * functionality and works for all DOMWidget types.
+   */
+  inputEl?: T
   callback?: (value: V) => void
   /**
    * Draw the widget on the canvas.
diff --git a/src/services/litegraphService.ts b/src/services/litegraphService.ts
index 7a95d13daa..8ca54b5f78 100644
--- a/src/services/litegraphService.ts
+++ b/src/services/litegraphService.ts
@@ -432,11 +432,14 @@ export const useLitegraphService = () => {
             host.el,
             {
               host,
+              // @ts-expect-error `getHeight` of image host returns void instead of number.
               getHeight: host.getHeight,
               onDraw: host.onDraw,
               hideOnZoom: false
             }
-          )
+          ) as IWidget & {
+            options: { host: ReturnType<typeof createImageHost> }
+          }
           widget.serializeValue = () => undefined
           widget.options.host.updateImages(this.imgs)
         }
diff --git a/src/types/litegraph-augmentation.d.ts b/src/types/litegraph-augmentation.d.ts
index e995b47858..966b2d95db 100644
--- a/src/types/litegraph-augmentation.d.ts
+++ b/src/types/litegraph-augmentation.d.ts
@@ -1,7 +1,7 @@
 import '@comfyorg/litegraph'
 import type { LLink, Size } from '@comfyorg/litegraph'
 
-import type { DOMWidget } from '@/scripts/domWidget'
+import type { DOMWidget, DOMWidgetOptions } from '@/scripts/domWidget'
 import type { ComfyNodeDef } from '@/types/apiTypes'
 
 import type { NodeId } from './comfyWorkflow'
@@ -112,12 +112,15 @@ declare module '@comfyorg/litegraph' {
      */
     isVirtualNode?: boolean
 
-    addDOMWidget(
+    addDOMWidget<
+      T extends HTMLElement = HTMLElement,
+      V extends object | string = string
+    >(
       name: string,
       type: string,
-      element: HTMLElement,
-      options?: Record<string, any>
-    ): DOMWidget
+      element: T,
+      options?: DOMWidgetOptions<T, V>
+    ): DOMWidget<T, V>
 
     animatedImages?: boolean
     imgs?: HTMLImageElement[]