improve autosize + add markdown support for scripts and workflows

frontend/package-lock.json

@@ -39,7 +39,6 @@
 				"monaco-languageclient": "~7.0.1",
 				"openai": "^4.3.0",
 				"quill": "^1.3.7",
-				"svelte-autosize": "^1.0.1",
 				"svelte-carousel": "^1.0.25",
 				"svelte-chartjs": "^3.1.5",
 				"svelte-dnd-action": "^0.9.38",
@@ -2455,11 +2454,6 @@
 				"postcss": "^8.1.0"
 			}
 		},
-		"node_modules/autosize": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/autosize/-/autosize-6.0.1.tgz",
-			"integrity": "sha512-f86EjiUKE6Xvczc4ioP1JBlWG7FKrE13qe/DxBCpe8GCipCq2nFw73aO8QEBKHfSbYGDN5eB9jXWKen7tspDqQ=="
-		},
 		"node_modules/axobject-query": {
 			"version": "3.2.1",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -9015,14 +9009,6 @@
 				"node": ">=16"
 			}
 		},
-		"node_modules/svelte-autosize": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/svelte-autosize/-/svelte-autosize-1.1.0.tgz",
-			"integrity": "sha512-CPHq/K0ssrwuHBxFCCOtpWtXZwk4edjEIZ2mJT4KKzjSBq+CO9nOmstjpOh5TpoOf/4MtDcwAwnWmktqANjU6A==",
-			"dependencies": {
-				"autosize": "*"
-			}
-		},
 		"node_modules/svelte-awesome-color-picker": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/svelte-awesome-color-picker/-/svelte-awesome-color-picker-3.0.4.tgz",

frontend/package.json

@@ -121,7 +121,6 @@
 		"monaco-languageclient": "~7.0.1",
 		"openai": "^4.3.0",
 		"quill": "^1.3.7",
-		"svelte-autosize": "^1.0.1",
 		"svelte-carousel": "^1.0.25",
 		"svelte-chartjs": "^3.1.5",
 		"svelte-dnd-action": "^0.9.38",

frontend/src/lib/autosize.ts

@@ -0,0 +1,86 @@
+export const action = (node) => {
+	/* Constants */
+	const update = new Event('update')
+
+	/* Functions */
+	const init = () => {
+		addStyles()
+		observeElement()
+		addEventListeners()
+		setInitialHeight()
+	}
+
+	const dispatchUpdateEvent = () => {
+		node.dispatchEvent(update)
+	}
+
+	const setInitialHeight = () => {
+		let height = 0
+
+		if (node.value) {
+			height = node.scrollHeight
+		} else {
+			if (node.placeholder) {
+				node.value = node.placeholder
+				height = node.scrollHeight
+				node.value = ''
+			} else {
+				node.value = '|'
+				node.style.height = '0px'
+				height = node.scrollHeight
+				node.value = ''
+			}
+		}
+
+		node.style.height = height + 'px'
+	}
+
+	const setHeight = () => {
+		node.style.height = '0px'
+		node.style.height = Math.max(node.scrollHeight, 40) + 5 + 'px'
+	}
+
+	const addStyles = () => {
+		node.style.boxSizing = 'border-box'
+	}
+
+	const observeElement = () => {
+		let elementPrototype = Object.getPrototypeOf(node)
+		let descriptor = Object.getOwnPropertyDescriptor(elementPrototype, 'value')
+		Object.defineProperty(node, 'value', {
+			get: function () {
+				return descriptor?.get?.apply(this, arguments as any)
+			},
+			set: function () {
+				descriptor?.set?.apply(this, arguments as any)
+				dispatchUpdateEvent()
+			}
+		})
+	}
+
+	const addEventListeners = () => {
+		node.addEventListener('input', (e) => {
+			dispatchUpdateEvent()
+		})
+		node.addEventListener('update', setHeight)
+	}
+
+	const removeEventListeners = () => {
+		node.removeEventListener('input', dispatchUpdateEvent)
+		node.removeEventListener('update', setHeight)
+	}
+
+	if (node.tagName.toLowerCase() !== 'textarea') {
+		throw new Error('svelte-textarea-auto-height can only be used on textarea elements.')
+	} else {
+		init()
+
+		return {
+			destroy() {
+				removeEventListeners()
+			}
+		}
+	}
+}
+
+export default action

frontend/src/lib/components/AppConnect.svelte

@@ -72,12 +72,12 @@
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import ApiConnectForm from './ApiConnectForm.svelte'
 	import SearchItems from './SearchItems.svelte'
-	import autosize from 'svelte-autosize'
 	import WhitelistIp from './WhitelistIp.svelte'
 	import { sendUserToast } from '$lib/toast'
 	import OauthScopes from './OauthScopes.svelte'
 	import DarkModeObserver from './DarkModeObserver.svelte'
 	import Markdown from 'svelte-exmarkdown'
+	import autosize from '$lib/autosize'
 
 	export let newPageOAuth = false
 
@@ -543,7 +543,7 @@
 			</div>
 
 			<h2 class="mt-4 mb-2">Description</h2>
-			<textarea type="text" autocomplete="off" use:autosize bind:value={description} />
+			<textarea autocomplete="off" use:autosize bind:value={description} />
 		{:else}
 			<Path
 				initialPath=""

frontend/src/lib/components/ArgInput.svelte

@@ -3,7 +3,6 @@
 	import { setInputCat as computeInputCat, emptyString } from '$lib/utils'
 	import { ChevronDown, DollarSign, Pipette, Plus, X } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
-	import autosize from 'svelte-autosize'
 	import Multiselect from 'svelte-multiselect'
 	import { fade } from 'svelte/transition'
 	import JsonEditor from './apps/editor/settingsPanel/inputEditor/JsonEditor.svelte'
@@ -28,6 +27,7 @@
 	import S3FilePicker from './S3FilePicker.svelte'
 	import CurrencyInput from './apps/components/inputs/currency/CurrencyInput.svelte'
 	import FileUpload from './common/fileUpload/FileUpload.svelte'
+	import autosize from '$lib/autosize'
 
 	export let label: string = ''
 	export let value: any
@@ -638,7 +638,6 @@
 									}}
 									use:autosize
 									on:keydown={onKeyDown}
-									type="text"
 									{disabled}
 									class={twMerge(
 										'w-full',

frontend/src/lib/components/ContextualVariableEditor.svelte

@@ -5,10 +5,10 @@
 	import { Button } from './common'
 	import Drawer from './common/drawer/Drawer.svelte'
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
-	import autosize from 'svelte-autosize'
 	import { sendUserToast } from '$lib/toast'
 	import Section from './Section.svelte'
 	import { Save } from 'lucide-svelte'
+	import autosize from '$lib/autosize'
 
 	const dispatch = createEventDispatcher()
 
@@ -58,7 +58,7 @@
 				</Section>
 			{/if}
 			<Section label="Value">
-				<textarea rows="4" type="text" use:autosize bind:value placeholder="Variable value" />
+				<textarea rows="4" use:autosize bind:value placeholder="Variable value" />
 			</Section>
 		</div>
 		<svelte:fragment slot="actions">

frontend/src/lib/components/GfmMarkdown.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import Markdown from 'svelte-exmarkdown'
+	import { gfmPlugin } from 'svelte-exmarkdown/gfm'
+
+	export let md: string
+</script>
+
+<Markdown {md} plugins={[gfmPlugin()]} />

frontend/src/lib/components/GroupEditor.svelte

@@ -9,7 +9,7 @@
 	import { userStore, workspaceStore } from '$lib/stores'
 	import AutoComplete from 'simple-svelte-autocomplete'
 	import { createEventDispatcher } from 'svelte'
-	import autosize from 'svelte-autosize'
+	import autosize from '$lib/autosize'
 	import { Button } from './common'
 	import Skeleton from './common/skeleton/Skeleton.svelte'
 	import TableCustom from './TableCustom.svelte'
@@ -108,7 +108,6 @@
 			<textarea
 				disabled={!can_write}
 				rows="2"
-				type="text"
 				use:autosize
 				bind:value={group.summary}
 				placeholder="Summary of the group"

frontend/src/lib/components/InstanceGroupEditor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { GroupService, type InstanceGroup } from '$lib/gen'
 	import { createEventDispatcher } from 'svelte'
-	import autosize from 'svelte-autosize'
+	import autosize from '$lib/autosize'
 	import { Button } from './common'
 	import Skeleton from './common/skeleton/Skeleton.svelte'
 	import TableCustom from './TableCustom.svelte'
@@ -39,7 +39,6 @@
 		<div class="flex flex-col gap-1">
 			<textarea
 				rows="2"
-				type="text"
 				use:autosize
 				bind:value={instance_group.summary}
 				placeholder="Summary of the group"

frontend/src/lib/components/LightweightArgInput.svelte

@@ -4,7 +4,7 @@
 	import { createEventDispatcher } from 'svelte'
 	import FieldHeader from './FieldHeader.svelte'
 	import type { SchemaProperty } from '$lib/common'
-	import autosize from 'svelte-autosize'
+	import autosize from '$lib/autosize'
 	import Toggle from './Toggle.svelte'
 	import Range from './Range.svelte'
 	import LightweightSchemaForm from './LightweightSchemaForm.svelte'
@@ -425,7 +425,6 @@
 									dispatch('focus')
 								}}
 								use:autosize
-								type="text"
 								class="col-span-10 {valid && error == ''
 									? ''
 									: 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30'}"

frontend/src/lib/components/ResourceEditor.svelte

@@ -8,7 +8,6 @@
 	import Required from './Required.svelte'
 
 	import { userStore, workspaceStore } from '$lib/stores'
-	import autosize from 'svelte-autosize'
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import SchemaForm from './SchemaForm.svelte'
 	import SimpleEditor from './SimpleEditor.svelte'
@@ -17,6 +16,7 @@
 	import TestConnection from './TestConnection.svelte'
 	import { Save } from 'lucide-svelte'
 	import Markdown from 'svelte-exmarkdown'
+	import autosize from '$lib/autosize'
 
 	let path = ''
 	let initialPath = ''
@@ -206,7 +206,6 @@
 				</div>
 				<h3 class="mt-4">Description <Required required={false} /> </h3>
 				<textarea
-					type="text"
 					disabled={!can_write}
 					use:autosize
 					bind:value={description}

frontend/src/lib/components/SupabaseConnect.svelte

@@ -8,7 +8,7 @@
 	import { Highlight } from 'svelte-highlight'
 	import { json } from 'svelte-highlight/languages'
 
-	import autosize from 'svelte-autosize'
+	import autosize from '$lib/autosize'
 	import { ResourceService, VariableService } from '$lib/gen'
 	import { oauthStore, workspaceStore } from '$lib/stores'
 	import Password from './Password.svelte'
@@ -163,7 +163,7 @@
 			<Password required bind:password />
 
 			<h3 class="mt-6 mb-2">Description</h3>
-			<textarea type="text" autocomplete="off" use:autosize bind:value={description} />
+			<textarea autocomplete="off" use:autosize bind:value={description} />
 
 			<div class="mt-12" />
 			<p class="my-1 text-sm text-secondary"

frontend/src/lib/components/VariableEditor.svelte

@@ -8,7 +8,6 @@
 	import Drawer from './common/drawer/Drawer.svelte'
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import Alert from './common/alert/Alert.svelte'
-	import autosize from 'svelte-autosize'
 	import Toggle from './Toggle.svelte'
 	import SimpleEditor from './SimpleEditor.svelte'
 	import { sendUserToast } from '$lib/toast'
@@ -17,6 +16,7 @@
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import Section from './Section.svelte'
 	import { Save } from 'lucide-svelte'
+	import autosize from '$lib/autosize'
 
 	const dispatch = createEventDispatcher()
 
@@ -191,7 +191,6 @@
 							<textarea
 								disabled={!can_write}
 								rows="4"
-								type="text"
 								use:autosize
 								bind:value={variable.value}
 								placeholder="Update variable value"
@@ -223,7 +222,6 @@
 			<Section label="Description">
 				<textarea
 					rows="4"
-					type="text"
 					use:autosize
 					bind:value={variable.description}
 					placeholder="Used for X"

frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -10,7 +10,7 @@
 	import TabSelectInput from './TabSelectInput.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import SchemaEditor from '$lib/components/SchemaEditor.svelte'
-	import autosize from 'svelte-autosize'
+	import autosize from '$lib/autosize'
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { Settings } from 'lucide-svelte'
 	import AgGridWizard from '$lib/components/wizards/AgGridWizard.svelte'

frontend/src/lib/components/copilot/MetadataGen.svelte

@@ -6,7 +6,7 @@
 	import { createEventDispatcher, onDestroy } from 'svelte'
 	import { sendUserToast } from '$lib/toast'
 	import { twMerge } from 'tailwind-merge'
-	import autosize from 'svelte-autosize'
+	import autosize from '$lib/autosize'
 	import type { FlowValue } from '$lib/gen'
 	import { yamlStringifyExceptKeys } from './utils'
 	import type { ChatCompletionMessageParam } from 'openai/resources/index.mjs'

frontend/src/routes/(root)/(logged)/resources/+page.svelte

@@ -49,7 +49,7 @@
 		Trash
 	} from 'lucide-svelte'
 	import { onMount } from 'svelte'
-	import autosize from 'svelte-autosize'
+	import autosize from '$lib/autosize'
 	import Portal from 'svelte-portal'
 
 	type ResourceW = ListableResource & { canWrite: boolean; marked?: string }
@@ -415,7 +415,6 @@
 			<label>
 				<div class="mb-1 font-semibold text-secondary">Description</div>
 				<textarea
-					type="text"
 					use:autosize
 					autocomplete="off"
 					bind:value={editResourceType.description}
@@ -471,12 +470,7 @@
 			</label>
 			<label>
 				<div class="mb-1 font-semibold text-secondary">Description</div>
-				<textarea
-					type="text"
-					use:autosize
-					autocomplete="off"
-					bind:value={newResourceType.description}
-				/></label
+				<textarea use:autosize autocomplete="off" bind:value={newResourceType.description} /></label
 			>
 			<div>
 				<div class="flex justify-between w-full items-center">