From bec2ddfbced841a1a6c319552cd0aba362763675 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 3 Nov 2022 10:03:00 +0100
Subject: [PATCH] fix variable editor

---
 frontend/package-lock.json                    | 25 +----
 frontend/package.json                         |  1 -
 frontend/src/lib/components/ArgInput.svelte   | 96 +++++++++++--------
 .../lib/components/AutosizedTextarea.svelte   |  2 +-
 frontend/src/lib/components/Path.svelte       |  2 +
 .../src/lib/components/VariableEditor.svelte  | 18 ++--
 frontend/tailwind.config.cjs                  |  1 -
 7 files changed, 73 insertions(+), 72 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 6edeedb28a..5eba34ac3d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -33,7 +33,6 @@
 				"eslint": "^8.26.0",
 				"eslint-config-prettier": "^8.3.0",
 				"eslint-plugin-svelte3": "^4.0.0",
-				"flowbite": "^1.5.3",
 				"openapi-typescript-codegen": "^0.23.0",
 				"path-browserify": "^1.0.1",
 				"postcss": "^8.4.18",
@@ -397,6 +396,7 @@
 			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
 			"integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
 			"dev": true,
+			"peer": true,
 			"funding": {
 				"type": "opencollective",
 				"url": "https://opencollective.com/popperjs"
@@ -2726,16 +2726,6 @@
 			"integrity": "sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ==",
 			"dev": true
 		},
-		"node_modules/flowbite": {
-			"version": "1.5.3",
-			"resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.5.3.tgz",
-			"integrity": "sha512-e2OHfndxTHtGMqcPqvqwg3gGLg57hmIDVgE/BazMDccgirQ0JEtirKnbZZ4WSOIEhNDgO9pJZuyC8rRlcMm6pQ==",
-			"dev": true,
-			"dependencies": {
-				"@popperjs/core": "^2.9.3",
-				"mini-svg-data-uri": "^1.4.3"
-			}
-		},
 		"node_modules/fraction.js": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
@@ -6840,7 +6830,8 @@
 			"version": "2.11.6",
 			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
 			"integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
-			"dev": true
+			"dev": true,
+			"peer": true
 		},
 		"@rollup/pluginutils": {
 			"version": "4.2.1",
@@ -8426,16 +8417,6 @@
 			"integrity": "sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ==",
 			"dev": true
 		},
-		"flowbite": {
-			"version": "1.5.3",
-			"resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.5.3.tgz",
-			"integrity": "sha512-e2OHfndxTHtGMqcPqvqwg3gGLg57hmIDVgE/BazMDccgirQ0JEtirKnbZZ4WSOIEhNDgO9pJZuyC8rRlcMm6pQ==",
-			"dev": true,
-			"requires": {
-				"@popperjs/core": "^2.9.3",
-				"mini-svg-data-uri": "^1.4.3"
-			}
-		},
 		"fraction.js": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 1096c85817..17aac144d3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,7 +29,6 @@
 		"eslint": "^8.26.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-svelte3": "^4.0.0",
-		"flowbite": "^1.5.3",
 		"openapi-typescript-codegen": "^0.23.0",
 		"path-browserify": "^1.0.1",
 		"postcss": "^8.4.18",
diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index d28f9e1176..132c752adc 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -91,13 +91,6 @@
 		el?.focus()
 	}
 
-	export async function recomputeSize() {
-		if (el) {
-			el.style.height = '30px'
-			el.style.height = el.scrollHeight + 'px'
-		}
-	}
-
 	function validateInput(pattern: string | undefined, v: any): void {
 		if (required && (v == undefined || v == null || v === '')) {
 			error = 'This field is required'
@@ -273,21 +266,24 @@
 						/>
 					</div>
 				{:else}
-					<textarea
-						bind:this={el}
-						on:focus
-						{disabled}
-						style="max-height: {maxHeight}"
-						on:input={() => {
-							recomputeSize()
-							dispatch('input', { rawValue: value, isRaw: false })
-						}}
-						class="col-span-10 {valid
-							? ''
-							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
-						placeholder={defaultValue ? JSON.stringify(defaultValue, null, 4) : ''}
-						bind:value={rawValue}
-					/>
+					<div class="container">
+						<pre aria-hidden="true" style="min-height: 2.2em; max-height: {maxHeight}"
+							>{rawValue + '\n'}</pre
+						>
+						<textarea
+							on:focus
+							{disabled}
+							style="max-height: {maxHeight}"
+							on:input={() => {
+								dispatch('input', { rawValue: value, isRaw: false })
+							}}
+							class="col-span-10 {valid
+								? ''
+								: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
+							placeholder={defaultValue ? JSON.stringify(defaultValue, null, 4) : ''}
+							bind:value={rawValue}
+						/>
+					</div>
 				{/if}
 			{:else if inputCat == 'enum'}
 				<select {disabled} class="px-6" bind:value>
@@ -326,22 +322,25 @@
 						: undefined}
 				/>
 			{:else if inputCat == 'string'}
-				<textarea
-					bind:this={el}
-					on:focus={() => dispatch('focus')}
-					on:blur={() => dispatch('blur')}
-					{disabled}
-					style="height: 30px; max-height: {maxHeight}"
-					class="col-span-10 {valid
-						? ''
-						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
-					placeholder={defaultValue ?? ''}
-					bind:value
-					on:input={() => {
-						recomputeSize()
-						dispatch('input', { rawValue: value, isRaw: false })
-					}}
-				/>
+				<div class="container">
+					<pre aria-hidden="true" style="min-height: 2.2em; max-height: {maxHeight}"
+						>{value + '\n'}</pre
+					>
+					<textarea
+						on:focus={() => dispatch('focus')}
+						on:blur={() => dispatch('blur')}
+						type="text"
+						{disabled}
+						class="col-span-10 resize {valid
+							? ''
+							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
+						placeholder={defaultValue ?? ''}
+						bind:value
+						on:input={() => {
+							dispatch('input', { rawValue: value, isRaw: false })
+						}}
+					/>
+				</div>
 			{/if}
 			{#if !required && inputCat != 'resource-object'}
 				<!-- <Tooltip placement="bottom" content="Reset to default value">
@@ -363,3 +362,24 @@
 		</div>
 	</div>
 </div>
+
+<style>
+	.container {
+		position: relative;
+	}
+
+	pre,
+	textarea {
+		font-family: inherit;
+		padding: 0.5em;
+		box-sizing: border-box;
+		line-height: 1.2;
+		overflow: hidden;
+	}
+	textarea {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+	}
+</style>
diff --git a/frontend/src/lib/components/AutosizedTextarea.svelte b/frontend/src/lib/components/AutosizedTextarea.svelte
index 942691659a..b1cae4c364 100644
--- a/frontend/src/lib/components/AutosizedTextarea.svelte
+++ b/frontend/src/lib/components/AutosizedTextarea.svelte
@@ -12,7 +12,7 @@
 	<pre aria-hidden="true" style="min-height: {minHeight}; max-height: {maxHeight}">
 		{value + '\n'}
 	</pre>
-	<textarea class="col-span-10 resize" bind:value {placeholder} />
+	<textarea type="text" class="col-span-10 resize" bind:value {placeholder} />
 </div>
 
 <style>
diff --git a/frontend/src/lib/components/Path.svelte b/frontend/src/lib/components/Path.svelte
index b13a59928d..83a232b63c 100644
--- a/frontend/src/lib/components/Path.svelte
+++ b/frontend/src/lib/components/Path.svelte
@@ -194,6 +194,7 @@
 			<label class="block">
 				<span class="text-gray-700 text-sm">Owner</span>
 				<input
+					type="text"
 					bind:value={meta.owner}
 					placeholder={$userStore?.username ?? ''}
 					disabled={!($userStore?.is_admin ?? false)}
@@ -215,6 +216,7 @@
 				<Required required={true} />
 			</span>
 			<input
+				type="text"
 				id="path"
 				autofocus
 				bind:this={inputP}
diff --git a/frontend/src/lib/components/VariableEditor.svelte b/frontend/src/lib/components/VariableEditor.svelte
index f00d870ad9..7b036606b2 100644
--- a/frontend/src/lib/components/VariableEditor.svelte
+++ b/frontend/src/lib/components/VariableEditor.svelte
@@ -147,7 +147,7 @@
 					{/if}
 				</div>
 			</div>
-
+			<!-- 
 			{#if variable.is_secret}
 				<div class="mb-1 col-span-10">
 					<Password
@@ -157,15 +157,15 @@
 							<span class="text-sm text-gray-500">(${variable.value.length}/3000 characters)</span>`}
 					/>
 				</div>
-			{:else}
-				<div>
-					<div class="mb-1">
-						<span class="font-semibold text-gray-700">Variable value</span>
-						<span class="text-sm text-gray-500">({variable.value.length}/3000 characters)</span>
-					</div>
-					<AutosizedTextarea bind:value={variable.value} minRows={5} />
+			{:else} -->
+			<div>
+				<div class="mb-1">
+					<span class="font-semibold text-gray-700">Variable value</span>
+					<span class="text-sm text-gray-500">({variable.value.length}/3000 characters)</span>
 				</div>
-			{/if}
+				<AutosizedTextarea bind:value={variable.value} minRows={5} />
+			</div>
+			<!-- {/if} -->
 
 			<div>
 				<div class="mb-1 font-semibold text-gray-700">
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 6f4364c06b..3f74e695c7 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -134,7 +134,6 @@ const config = {
 	plugins: [
 		require('@tailwindcss/forms'),
 		require('@tailwindcss/typography'),
-		require('flowbite/plugin'),
 		plugin(({ addBase, addComponents, addUtilities, theme }) => {
 			addBase({
 				'html': {