[backport cloud/1.32] Feat: Show Progress Text on Vue Nodes, Markdown for Preview as Text (#6858)

Backport of #6805 to `cloud/1.32`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6858-backport-cloud-1-32-Feat-Show-Progress-Text-on-Vue-Nodes-Markdown-for-Preview-as-Text-2b46d73d36508139bdd1e2eaf77bf8a9)
by [Unito](https://www.unito.io)

Co-authored-by: Alexander Brown <drjkl@comfy.org>

src/extensions/core/previewAny.ts

@@ -17,10 +17,10 @@ useExtensionService().registerExtension({
       nodeType.prototype.onNodeCreated = function () {
         onNodeCreated ? onNodeCreated.apply(this, []) : undefined
 
-        const showValueWidget = ComfyWidgets['STRING'](
+        const showValueWidget = ComfyWidgets['MARKDOWN'](
           this,
           'preview',
-          ['STRING', { multiline: true }],
+          ['MARKDOWN', {}],
           app
         ).widget as DOMWidget<HTMLTextAreaElement, string>
 

src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue

@@ -57,7 +57,7 @@ const renderedHtml = computed(() => {
 
 // Methods
 const startEditing = async () => {
-  if (isEditing.value) return
+  if (isEditing.value || widget.options?.read_only) return
 
   isEditing.value = true
   await nextTick()

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

@@ -6,6 +6,7 @@ import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
 import type { ComponentWidgetStandardProps } from '@/scripts/domWidget'
 import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 
 type TextPreviewCustomProps = Omit<
   InstanceType<typeof TextPreviewWidget>['$props'],
@@ -14,15 +15,15 @@ type TextPreviewCustomProps = Omit<
 
 const PADDING = 16
 
-export const useTextPreviewWidget = (
+export function useTextPreviewWidget(
   options: {
     minHeight?: number
   } = {}
-) => {
+): ComfyWidgetConstructorV2 {
-  const widgetConstructor: ComfyWidgetConstructorV2 = (
+  function widgetConstructor(
     node: LGraphNode,
     inputSpec: InputSpec
-  ) => {
+  ): IBaseWidget {
     const widgetValue = ref<string>('')
     const widget = new ComponentWidgetImpl<
       string | object,
@@ -41,8 +42,10 @@ export const useTextPreviewWidget = (
           widgetValue.value = typeof value === 'string' ? value : String(value)
         },
         getMinHeight: () => options.minHeight ?? 42 + PADDING,
-        serialize: false
+        serialize: false,
-      }
+        read_only: true
+      },
+      type: inputSpec.type
     })
     addWidget(node, widget)
     return widget

src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts

@@ -134,7 +134,11 @@ const coreWidgetDefinitions: Array<[string, WidgetDefinition]> = [
   ],
   [
     'markdown',
-    { component: WidgetMarkdown, aliases: ['MARKDOWN'], essential: false }
+    {
+      component: WidgetMarkdown,
+      aliases: ['MARKDOWN', 'progressText'],
+      essential: false
+    }
   ],
   ['legacy', { component: WidgetLegacy, aliases: [], essential: true }],
   [

src/scripts/domWidget.ts

@@ -303,10 +303,11 @@ export class ComponentWidgetImpl<
     inputSpec: InputSpec
     props?: P
     options: DOMWidgetOptions<V>
+    type?: string
   }) {
     super({
-      ...obj,
+      type: 'custom',
-      type: 'custom'
+      ...obj
     })
     this.component = obj.component
     this.inputSpec = obj.inputSpec