WidgetTextArea render new lines correctly

js/src/lib/components/InferenceWidget/shared/WidgetTextarea/WidgetTextarea.svelte

@@ -9,6 +9,8 @@
 	export let isLoading = false;
 	export let size: "small" | "big" = "small";
 
+	let newValue = "";
+	let isOnFreshLine = true;
 	let containerSpanEl: HTMLSpanElement;
 	const typingEffectSpeedMs = 12;
 	const classNamesInput = "font-normal text-black dark:text-white";
@@ -20,12 +22,13 @@
 		spanEl.className = classNamesOutput;
 		containerSpanEl?.appendChild(spanEl);
 		await tick();
-		for (const char of outputTxt) {
+		// split on whitespace or any other character to correctly render newlines \n
+		for (const char of outputTxt.split(/(\s|.)/g)) {
 			await delay(typingEffectSpeedMs);
 			spanEl.textContent += char;
 			moveCaretToEnd();
 		}
-		value += outputTxt;
+		updateInnerTextValue();
 	}
 
 	function moveCaretToEnd() {
@@ -57,7 +60,51 @@
 			range.insertNode(spanEl);
 		}
 		window.getSelection().collapseToEnd();
-		value = containerSpanEl.textContent;
+		updateInnerTextValue();
+	}
+
+	function updateInnerTextValue() {
+		newValue = "";
+		isOnFreshLine = true;
+		parseChildNodesForValueAndLines(containerSpanEl.childNodes);
+		value = newValue;
+	}
+
+	// from https://stephenhaney.com/2020/get-contenteditable-plaintext-with-correct-linebreaks/
+	// Recursive function to navigate childNodes and build linebreaks with text
+	function parseChildNodesForValueAndLines(childNodes: NodeListOf<ChildNode>) {
+		for (let i = 0; i < childNodes.length; i++) {
+			const childNode = childNodes[i];
+
+			if (childNode.nodeName === "BR") {
+				// BRs are always line breaks which means the next loop is on a fresh line
+				newValue += "\n";
+				isOnFreshLine = true;
+				continue;
+			}
+
+			// We may or may not need to create a new line
+			if (childNode.nodeName === "DIV" && isOnFreshLine === false) {
+				// Divs create new lines for themselves if they aren't already on one
+				newValue += "\n";
+			}
+
+			// Whether we created a new line or not, we'll use it for this content so the next loop will not be on a fresh line:
+			isOnFreshLine = false;
+
+			// Add the text content if this is a text node:
+			if (childNode.nodeType === 3 && childNode.textContent) {
+				newValue += childNode.textContent;
+			}
+
+			// If this node has children, get into them as well:
+			parseChildNodesForValueAndLines(childNode.childNodes);
+		}
+	}
+
+	export function setValue(text: string) {
+		containerSpanEl.textContent = text;
+		updateInnerTextValue();
 	}
 </script>
 
@@ -68,13 +115,14 @@
 				? 'mt-1.5'
 				: ''} block overflow-auto resize-y py-2 px-3 w-full {size === 'small'
 				? 'min-h-[42px]'
-				: 'min-h-[144px]'} max-h-[500px] border border-gray-200 rounded-lg shadow-inner outline-none focus:ring focus:ring-blue-200 focus:shadow-inner dark:bg-gray-925"
+				: 'min-h-[144px]'} max-h-[500px] whitespace-pre-wrap border border-gray-200 rounded-lg shadow-inner outline-none focus:ring focus:ring-blue-200 focus:shadow-inner dark:bg-gray-925"
 			role="textbox"
 			contenteditable
 			style="--placeholder: '{placeholder}'"
-			bind:textContent={value}
+			spellcheck="false"
 			bind:this={containerSpanEl}
 			on:paste|preventDefault={handlePaste}
+			on:keypress={updateInnerTextValue}
 		/>
 	</svelte:fragment>
 </WidgetLabel>

js/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte

@@ -32,15 +32,16 @@
 	let output: Array<{ label: string; score: number }> = [];
 	let outputJson: string;
 	let text = "";
+	let setTextAreaValue: (text: string) => void;
 
 	onMount(() => {
 		const [textParam] = getSearchParams(["text"]);
 		if (textParam) {
-			text = textParam;
+			setTextAreaValue(textParam);
 			getOutput();
 		} else {
 			const [demoText] = getDemoInputs(model, ["text"]);
-			text = (demoText as string) ?? "";
+			setTextAreaValue(demoText ?? "");
 			if (text && callApiOnMount) {
 				getOutput();
 			}
@@ -118,11 +119,11 @@
 	}
 
 	function previewInputSample(sample: Record<string, any>) {
-		text = sample.text;
+		setTextAreaValue(sample.text);
 	}
 
 	function applyInputSample(sample: Record<string, any>) {
-		text = sample.text;
+		setTextAreaValue(sample.text);
 		getOutput();
 	}
 </script>
@@ -146,7 +147,7 @@
 					Mask token: <code>{model.mask_token}</code>
 				</div>
 			{/if}
-			<WidgetTextarea bind:value={text} />
+			<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} />
 			<WidgetSubmitBtn
 				classNames="mt-2"
 				{isLoading}

js/src/lib/components/InferenceWidget/widgets/QuestionAnsweringWidget/QuestionAnsweringWidget.svelte

@@ -32,22 +32,24 @@
 	let output: { answer: string; score: number } | null = null;
 	let outputJson: string;
 	let question = "";
+	let setTextAreaValue: (text: string) => void;
 
 	onMount(() => {
 		const [contextParam, questionParam] = getSearchParams([
 			"context",
 			"question",
 		]);
 		if (contextParam && questionParam) {
-			[context, question] = [contextParam, questionParam];
+			question = questionParam;
+			setTextAreaValue(contextParam);
 			getOutput();
 		} else {
 			const [demoContext, demoQuestion] = getDemoInputs(model, [
 				"context",
 				"text",
 			]);
-			context = (demoContext as string) ?? "";
 			question = (demoQuestion as string) ?? "";
+			setTextAreaValue(demoContext ?? "");
 			if (context && question && callApiOnMount) {
 				getOutput();
 			}
@@ -132,12 +134,12 @@
 
 	function previewInputSample(sample: Record<string, any>) {
 		question = sample.text;
-		context = sample.context;
+		setTextAreaValue(sample.context);
 	}
 
 	function applyInputSample(sample: Record<string, any>) {
 		question = sample.text;
-		context = sample.context;
+		setTextAreaValue(sample.context);
 		getOutput();
 	}
 </script>
@@ -165,6 +167,7 @@
 			/>
 			<WidgetTextarea
 				bind:value={context}
+				bind:setValue={setTextAreaValue}
 				placeholder="Please input some context..."
 				label="Context"
 			/>

js/src/lib/components/InferenceWidget/widgets/SummarizationWidget/SummarizationWidget.svelte

@@ -32,15 +32,16 @@
 	let output = "";
 	let outputJson: string;
 	let text = "";
+	let setTextAreaValue: (text: string) => void;
 
 	onMount(() => {
 		const [textParam] = getSearchParams(["text"]);
 		if (textParam) {
-			text = textParam;
+			setTextAreaValue(textParam);
 			getOutput();
 		} else {
 			const [demoText] = getDemoInputs(model, ["text"]);
-			text = (demoText as string) ?? "";
+			setTextAreaValue(demoText ?? "");
 			if (text && callApiOnMount) {
 				getOutput();
 			}
@@ -109,11 +110,11 @@
 	}
 
 	function previewInputSample(sample: Record<string, any>) {
-		text = sample.text;
+		setTextAreaValue(sample.text);
 	}
 
 	function applyInputSample(sample: Record<string, any>) {
-		text = sample.text;
+		setTextAreaValue(sample.text);
 		getOutput();
 	}
 </script>
@@ -132,7 +133,7 @@
 >
 	<svelte:fragment slot="top">
 		<form class="space-y-2">
-			<WidgetTextarea bind:value={text} />
+			<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} />
 			<WidgetSubmitBtn
 				{isLoading}
 				onClick={() => {

js/src/lib/components/InferenceWidget/widgets/TextGenerationWidget/TextGenerationWidget.svelte

@@ -37,6 +37,7 @@
 	let warning: string = "";
 	let renderTypingEffect: (outputTxt: string) => Promise<void>;
 	let inferenceTimer: any;
+	let setTextAreaValue: (text: string) => void;
 
 	// Deactivate server caching for these two pipeline types
 	// (translation uses this widget too and still needs caching)
@@ -47,11 +48,11 @@
 	onMount(() => {
 		const [textParam] = getSearchParams(["text"]);
 		if (textParam) {
-			text = textParam;
+			setTextAreaValue(textParam);
 			getOutput();
 		} else {
 			const [demoText] = getDemoInputs(model, ["text"]);
-			text = (demoText as string) ?? "";
+			setTextAreaValue(demoText ?? "");
 			if (text && callApiOnMount) {
 				getOutput();
 			}
@@ -137,11 +138,11 @@
 	}
 
 	function previewInputSample(sample: Record<string, any>) {
-		text = sample.text;
+		setTextAreaValue(sample.text);
 	}
 
 	function applyInputSample(sample: Record<string, any>) {
-		text = sample.text;
+		setTextAreaValue(sample.text);
 		getOutput();
 	}
 </script>
@@ -162,6 +163,7 @@
 		<form class="space-y-2">
 			<WidgetTextarea
 				bind:value={text}
+				bind:setValue={setTextAreaValue}
 				{isLoading}
 				size="big"
 				bind:renderTypingEffect

js/src/lib/components/InferenceWidget/widgets/TextToSpeechWidget/TextToSpeechWidget.svelte

@@ -32,15 +32,16 @@
 	let output = "";
 	let outputJson = "";
 	let text = "";
+	let setTextAreaValue: (text: string) => void;
 
 	onMount(() => {
 		const [textParam] = getSearchParams(["text"]);
 		if (textParam) {
-			text = textParam;
+			setTextAreaValue(textParam);
 			getOutput();
 		} else {
 			const [demoText] = getDemoInputs(model, ["text"]);
-			text = (demoText as string) ?? "";
+			setTextAreaValue(demoText ?? "");
 			if (text && callApiOnMount) {
 				getOutput();
 			}
@@ -108,11 +109,11 @@
 	}
 
 	function previewInputSample(sample: Record<string, any>) {
-		text = sample.text;
+		setTextAreaValue(sample.text);
 	}
 
 	function applyInputSample(sample: Record<string, any>) {
-		text = sample.text;
+		setTextAreaValue(sample.text);
 		getOutput();
 	}
 </script>
@@ -131,7 +132,7 @@
 >
 	<svelte:fragment slot="top">
 		<form>
-			<WidgetTextarea bind:value={text} />
+			<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} />
 			<WidgetSubmitBtn
 				classNames="mt-2"
 				{isLoading}

js/src/lib/components/InferenceWidget/widgets/TokenClassificationWidget/TokenClassificationWidget.svelte

@@ -49,15 +49,16 @@
 	let text = "";
 	let outputText = "";
 	let warning: string = "";
+	let setTextAreaValue: (text: string) => void;
 
 	onMount(() => {
 		const [textParam] = getSearchParams(["text"]);
 		if (textParam) {
-			text = textParam;
+			setTextAreaValue(textParam);
 			getOutput();
 		} else {
 			const [demoText] = getDemoInputs(model, ["text"]);
-			text = (demoText as string) ?? "";
+			setTextAreaValue(demoText ?? "");
 			if (text && callApiOnMount) {
 				getOutput();
 			}
@@ -237,11 +238,11 @@
 	}
 
 	function previewInputSample(sample: Record<string, any>) {
-		text = sample.text;
+		setTextAreaValue(sample.text);
 	}
 
 	function applyInputSample(sample: Record<string, any>) {
-		text = sample.text;
+		setTextAreaValue(sample.text);
 		getOutput();
 	}
 </script>
@@ -260,7 +261,7 @@
 >
 	<svelte:fragment slot="top">
 		<form>
-			<WidgetTextarea bind:value={text} />
+			<WidgetTextarea bind:value={text} bind:setValue={setTextAreaValue} />
 			<WidgetSubmitBtn
 				classNames="mt-2"
 				{isLoading}