Try to make compatible with latest frontend

Author: pythongosssss

web/js/showText.js

@@ -2,27 +2,36 @@ import { app } from "../../../scripts/app.js";
 import { ComfyWidgets } from "../../../scripts/widgets.js";
 
 // Displays input text on a node
+
+// TODO: This should need to be so complicated. Refactor at some point.
+
 app.registerExtension({
 	name: "pysssss.ShowText",
 	async beforeRegisterNodeDef(nodeType, nodeData, app) {
 		if (nodeData.name === "ShowText|pysssss") {
 			function populate(text) {
 				if (this.widgets) {
-					for (let i = 1; i < this.widgets.length; i++) {
+					// On older frontend versions there is a hidden converted-widget
+					const isConvertedWidget = +!!this.inputs?.[0].widget;
+					for (let i = isConvertedWidget; i < this.widgets.length; i++) {
 						this.widgets[i].onRemove?.();
 					}
-					this.widgets.length = 1;
+					this.widgets.length = isConvertedWidget;
 				}
 
 				const v = [...text];
 				if (!v[0]) {
 					v.shift();
 				}
-				for (const list of v) {
-					const w = ComfyWidgets["STRING"](this, "text2", ["STRING", { multiline: true }], app).widget;
-					w.inputEl.readOnly = true;
-					w.inputEl.style.opacity = 0.6;
-					w.value = list;
+				for (let list of v) {
+					// Force list to be an array, not sure why sometimes it is/isn't
+					if (!(list instanceof Array)) list = [list];
+					for (const l of list) {
+						const w = ComfyWidgets["STRING"](this, "text_" + this.widgets?.length ?? 0, ["STRING", { multiline: true }], app).widget;
+						w.inputEl.readOnly = true;
+						w.inputEl.style.opacity = 0.6;
+						w.value = l;
+					}
 				}
 
 				requestAnimationFrame(() => {
@@ -45,11 +54,23 @@ app.registerExtension({
 				populate.call(this, message.text);
 			};
 
+			const VALUES = Symbol();
+			const configure = nodeType.prototype.configure;
+			nodeType.prototype.configure = function () {
+				// Store unmodified widget values as they get removed on configure by new frontend
+				this[VALUES] = arguments[0]?.widgets_values;
+				return configure?.apply(this, arguments);
+			};
+
 			const onConfigure = nodeType.prototype.onConfigure;
 			nodeType.prototype.onConfigure = function () {
 				onConfigure?.apply(this, arguments);
-				if (this.widgets_values?.length) {
-					populate.call(this, this.widgets_values.slice(+this.widgets_values.length > 1));
+				const widgets_values = this[VALUES];
+				if (widgets_values?.length) {
+					// In newer frontend there seems to be a delay in creating the initial widget
+					requestAnimationFrame(() => {
+						populate.call(this, widgets_values.slice(+(widgets_values.length > 1 && this.inputs?.[0].widget)));
+					});
 				}
 			};
 		}