Render markdown in frontend

src/lib/nodes/widgets/ComfyMarkdownNode.ts

@@ -0,0 +1,57 @@
+import { BuiltInSlotType, LiteGraph, type ITextWidget, type SlotLayout } from "@litegraph-ts/core";
+
+import MarkdownWidget from "$lib/widgets/MarkdownWidget.svelte";
+import ComfyWidgetNode, { type ComfyWidgetProperties } from "./ComfyWidgetNode";
+
+export interface ComfyMarkdownProperties extends ComfyWidgetProperties {
+}
+
+export default class ComfyMarkdownNode extends ComfyWidgetNode<string> {
+    override properties: ComfyMarkdownProperties = {
+        tags: [],
+        defaultValue: false,
+    }
+
+    static slotLayout: SlotLayout = {
+        inputs: [
+            { name: "store", type: BuiltInSlotType.ACTION }
+        ],
+        outputs: [
+            { name: "value", type: "string" },
+            { name: "changed", type: BuiltInSlotType.EVENT },
+        ]
+    }
+
+    override svelteComponentType = MarkdownWidget;
+    override defaultValue = "";
+
+    constructor(name?: string) {
+        super(name, "")
+    }
+
+    override createDisplayWidget(): ITextWidget {
+        const widget = this.addWidget<ITextWidget>(
+            "text",
+            "Value",
+            "",
+            (v: string) => {
+                if (v == null || v === this.getValue()) {
+                    return;
+                }
+                this.setValue(v);
+            },
+            {
+                multiline: true,
+                inputStyle: { fontFamily: "monospace" }
+            }
+        )
+        return widget;
+    }
+}
+
+LiteGraph.registerNodeType({
+    class: ComfyMarkdownNode,
+    title: "UI.Markdown",
+    desc: "Displays Markdown in the UI",
+    type: "ui/markdown"
+})

src/lib/nodes/widgets/ComfyWidgetNode.ts

@@ -106,13 +106,18 @@ export default abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
         this.value = writable(value)
         this.color ||= color.color
         this.bgColor ||= color.bgColor
-        this.displayWidget = this.addWidget<ITextWidget>(
+        this.displayWidget = this.createDisplayWidget();
+        this.unsubscribe = this.value.subscribe(this.onValueUpdated.bind(this))
+    }
+
+    protected createDisplayWidget(): ITextWidget {
+        const widget = this.addWidget<ITextWidget>(
             "text",
             "Value",
             ""
-        );
-        this.displayWidget.disabled = true; // prevent editing
-        this.unsubscribe = this.value.subscribe(this.onValueUpdated.bind(this))
+        )
+        widget.disabled = true; // prevent editing
+        return widget;
     }
 
     addPropertyAsOutput(propertyName: string, type: string) {

src/lib/nodes/widgets/index.ts

@@ -9,3 +9,4 @@ export { default as ComfyRadioNode } from "./ComfyRadioNode"
 export { default as ComfyNumberNode } from "./ComfyNumberNode"
 export { default as ComfyTextNode } from "./ComfyTextNode"
 export { default as ComfyMultiRegionNode } from "./ComfyMultiRegionNode"
+export { default as ComfyMarkdownNode } from "./ComfyMarkdownNode"