diff --git a/frontend/package-lock.json b/frontend/package-lock.json index cec3179ddc..c1d5518d82 100644 --- a/frontend/package-lock.json +++ b/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", diff --git a/frontend/package.json b/frontend/package.json index e60151243c..63d3bc5f55 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/lib/autosize.ts b/frontend/src/lib/autosize.ts new file mode 100644 index 0000000000..cdf560bd80 --- /dev/null +++ b/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 diff --git a/frontend/src/lib/components/AppConnect.svelte b/frontend/src/lib/components/AppConnect.svelte index 0b25bb16ae..a38d992f3c 100644 --- a/frontend/src/lib/components/AppConnect.svelte +++ b/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 @@

Description

-