diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte index 673f8d4908..f159ad8526 100644 --- a/frontend/src/lib/components/ArgInput.svelte +++ b/frontend/src/lib/components/ArgInput.svelte @@ -28,7 +28,6 @@ export let required = false export let pattern: undefined | string = undefined export let valid = required ? false : true - export let minRows = 1 export let maxRows = 10 export let enum_: string[] | undefined = undefined export let disabled = false @@ -71,18 +70,6 @@ } } - $: { - defaultValue && recomputeRowSize(JSON.stringify(defaultValue, null, 4)) - } - - function recomputeRowSize(str: string) { - if (type == 'string') { - minRows = str.split('\n').length - } else if (type != 'string') { - minRows = Math.max(minRows, Math.min(str.split(/\r\n|\r|\n/).length + 1, maxRows)) - } - } - export function evalValueToRaw() { if (value) { rawValue = JSON.stringify(value, null, 4) @@ -102,6 +89,17 @@ } } + export function focus() { + 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' @@ -282,11 +280,9 @@ on:focus {disabled} style="max-height: {maxHeight}" - on:input={(e) => { - if (el) { - el.style.height = '5px' - el.style.height = el.scrollHeight + 'px' - } + on:input={() => { + recomputeSize() + dispatch('input', { rawValue: value, isRaw: false }) }} class="col-span-10 {valid ? '' @@ -343,11 +339,8 @@ : 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}" placeholder={defaultValue ?? ''} bind:value - on:input={async () => { - if (el) { - el.style.height = '30px' - el.style.height = el.scrollHeight + 'px' - } + on:input={() => { + recomputeSize() dispatch('input', { rawValue: value, isRaw: false }) }} /> diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte index 5287a53f5e..69d53d5139 100644 --- a/frontend/src/lib/components/InputTransformForm.svelte +++ b/frontend/src/lib/components/InputTransformForm.svelte @@ -23,6 +23,7 @@ export let importPath: string | undefined = undefined export let monaco: SimpleEditor | undefined = undefined + let argInput: ArgInput | undefined = undefined let inputCat: InputCat = 'object' let propertyType = getPropertyType(arg) @@ -73,6 +74,27 @@ $: checked = propertyType == 'javascript' + function onFocus() { + { + if (isStaticTemplate(inputCat)) { + focusProp(argName, 'append', (path) => { + const toAppend = `\$\{${path}}` + arg.value = `${arg.value ?? ''}${toAppend}` + setPropertyType(arg.value) + argInput?.focus() + return false + }) + } else { + focusProp(argName, 'insert', (path) => { + arg.expr = path + arg.type = 'javascript' + propertyType = 'javascript' + return true + }) + } + argInput?.recomputeSize() + } + } const { focusProp } = getContext('PropPickerWrapper') @@ -126,6 +148,7 @@ on:click={() => { focusProp(argName, 'connect', (path) => { connectProperty(path) + return false }) }} > @@ -139,21 +162,8 @@ {#if propertyType === undefined || !checked} { - if (isStaticTemplate(inputCat)) { - focusProp(argName, 'append', (path) => { - const toAppend = `\$\{${path}}` - arg.value = `${arg.value ?? ''}${toAppend}` - setPropertyType(arg.value) - }) - } else { - focusProp(argName, 'insert', (path) => { - arg.expr = path - arg.type = 'javascript' - propertyType = 'javascript' - }) - } - }} + bind:this={argInput} + on:focus={() => onFocus()} label={argName} bind:editor={monaco} bind:description={schema.properties[argName].description} @@ -184,6 +194,7 @@ on:focus={() => { focusProp(argName, 'insert', (path) => { monaco?.insertAtCursor(path) + return false }) }} bind:code={arg.expr} diff --git a/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte b/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte index 4f4358eb0e..f1d98ecbeb 100644 --- a/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte +++ b/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte @@ -1,7 +1,7 @@