windmill-components 1.82.4 → 1.82.6

package/components/apps/editor/GridEditor.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext } from 'svelte';
+<script>import { getContext, afterUpdate } from 'svelte';
 import { classNames } from '../../../utils';
 import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils';
 import { twMerge } from 'tailwind-merge';
@@ -6,20 +6,12 @@ import RecomputeAllComponents from './RecomputeAllComponents.svelte';
 import HiddenComponent from '../components/helpers/HiddenComponent.svelte';
 import Component from './component/Component.svelte';
 import { push } from '../../../history';
-import { dfs, expandGriditem, findGridItem } from './appUtils';
+import { expandGriditem, findGridItem } from './appUtils';
 import Grid from '../svelte-grid/Grid.svelte';
-import { selectId } from '../utils';
-import { deepEqual } from 'fast-equals';
+import Toggle from '../../Toggle.svelte';
 export let policy;
-const { selectedComponent, app, mode, connectingInput, runnableComponents, summary, focusedGrid, parentWidth, breakpoint, allIdsInPath } = getContext('AppViewerContext');
+const { selectedComponent, app, mode, connectingInput, runnableComponents, summary, focusedGrid, parentWidth, breakpoint } = getContext('AppViewerContext');
 const { history } = getContext('AppEditorContext');
-let previousSelectedIds = undefined;
-$: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
-    previousSelectedIds = $selectedComponent;
-    $allIdsInPath = ($selectedComponent ?? [])
-        .flatMap((id) => dfs($app.grid, id, $app.subgrids ?? {}))
-        .filter((x) => x != undefined);
-}
 function removeGridElement(component) {
     if (component) {
         $app.grid = $app.grid.filter((gridComponent) => {
@@ -45,9 +37,9 @@ function removeGridElement(component) {
         $selectedComponent = undefined;
     }
 }
-function selectComponent(e, id) {
+function selectComponent(id) {
     if (!$connectingInput.opened) {
-        selectId(e, id, selectedComponent, $app);
+        $selectedComponent = id;
         if ($focusedGrid?.parentComponentId != id) {
             $focusedGrid = undefined;
         }
@@ -89,8 +81,7 @@ function selectComponent(e, id) {
 	>
 		<div class={!$focusedGrid && $mode !== 'preview' ? 'border-gray-400 border border-dashed' : ''}>
 			<Grid
-				allIdsInPath={$allIdsInPath}
-				selectedIds={$selectedComponent}
+				onTopId={$selectedComponent}
 				items={$app.grid}
 				on:redraw={(e) => {
 					push(history, $app)
@@ -118,16 +109,16 @@ function selectComponent(e, id) {
 				{/if}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<div
-					on:pointerdown={(e) => selectComponent(e, dataItem.id)}
+					on:pointerdown={() => selectComponent(dataItem.id)}
 					class={classNames(
 						'h-full w-full center-center',
-						Boolean($selectedComponent?.includes(dataItem.id)) ? 'active-grid-item' : ''
+						$selectedComponent === dataItem.id ? 'active-grid-item' : ''
 					)}
 				>
 					<Component
 						render={true}
 						component={dataItem.data}
-						selected={Boolean($selectedComponent?.includes(dataItem.id))}
+						selected={$selectedComponent === dataItem.id}
 						locked={isFixed(dataItem)}
 						on:delete={() => removeGridElement(dataItem.data)}
 						on:lock={() => {
@@ -139,7 +130,7 @@ function selectComponent(e, id) {
 						}}
 						on:expand={() => {
 							push(history, $app)
-							$selectedComponent = [dataItem.id]
+							$selectedComponent = dataItem.id
 							expandGriditem($app.grid, dataItem.id, $breakpoint)
 							$app = $app
 						}}
@@ -158,8 +149,7 @@ function selectComponent(e, id) {
 				inlineScript={script.inlineScript}
 				name={script.name}
 				fields={script.fields}
-				doNotRecomputeOnInputChanged={script.doNotRecomputeOnInputChanged ?? false}
-				recomputableByRefreshButton={script.autoRefresh ?? false}
+				doNotRecomputeOnInputChanged={script.doNotRecomputeOnInputChanged}
 			/>
 		{/if}
 	{/each}

package/components/apps/editor/GridViewer.svelte

@@ -8,7 +8,7 @@ export let rowHeight;
 export let cols;
 export let gap = [10, 10];
 export let throttleUpdate = 100;
-export let allIdsInPath = undefined;
+export let onTopId = undefined;
 export let containerWidth = undefined;
 export let parentWidth = undefined;
 let getComputedCols;
@@ -56,7 +56,7 @@ onMount(() => {
 <div class="svlt-grid-container" style="height: {containerHeight}px" bind:this={container}>
 	{#if xPerPx}
 		{#each items as item (item.id)}
-			{@const onTop = allIdsInPath?.includes(item.id)}
+			{@const onTop = item.id == onTopId}
 			{@const width =
 				Math.min(getComputedCols, item[getComputedCols] && item[getComputedCols].w) * xPerPx -
 				gapX * 2}

package/components/apps/editor/GridViewer.svelte.d.ts

@@ -7,7 +7,7 @@ declare class __sveltets_Render<T> {
         cols: [number, number][];
         gap?: number[] | undefined;
         throttleUpdate?: number | undefined;
-        allIdsInPath?: string[] | undefined;
+        onTopId?: string | undefined;
         containerWidth?: number | undefined;
         parentWidth?: number | undefined;
     };

package/components/apps/editor/RecomputeAllComponents.svelte

@@ -13,7 +13,7 @@ $: !firstLoad &&
     $worldStore.initializedOutputs ==
         allItems($app.grid, $app.subgrids).length + $app.hiddenInlineScripts.length &&
     refresh();
-$: componentNumber = Object.values($runnableComponents).filter((x) => x.autoRefresh).length;
+$: componentNumber = Object.keys($runnableComponents).length;
 function onClick(stopAfterClear = true) {
     if (timeout) {
         clearInterval(timeout);
@@ -39,10 +39,13 @@ function refresh() {
     }
     loading = true;
     Promise.all(Object.keys($runnableComponents).map((id) => {
-        if (!$runnableComponents?.[id]?.autoRefresh) {
-            return;
+        if (id.startsWith('bg_')) {
+            let index = parseInt(id.split('_')[1]);
+            if (!$app.hiddenInlineScripts[index]?.autoRefresh) {
+                return;
+            }
         }
-        return $runnableComponents?.[id]?.cb?.();
+        return $runnableComponents?.[id]?.();
     })).finally(() => {
         loading = false;
     });
@@ -71,7 +74,6 @@ onMount(() => {
 
 <div class="flex items-center">
 	<Button
-		disabled={componentNumber == 0}
 		on:click={() => onClick()}
 		color={timeout ? 'blue' : 'light'}
 		variant={timeout ? 'contained' : 'border'}

package/components/apps/editor/SettingsPanel.svelte

@@ -10,9 +10,9 @@ import BackgroundScriptTriggerList from './settingsPanel/triggerLists/Background
 const { selectedComponent, app, stateId } = getContext('AppViewerContext');
 $: hiddenInlineScript = $app?.hiddenInlineScripts
     ?.map((x, i) => ({ script: x, index: i }))
-    .find(({ script, index }) => $selectedComponent?.includes(`bg_${index}`));
-$: componentSettings = findComponentSettings($app, $selectedComponent?.[0]);
-$: tableActionSettings = findTableActionSettings($app, $selectedComponent?.[0]);
+    .find(({ script, index }) => `bg_${index}` === $selectedComponent);
+$: componentSettings = findComponentSettings($app, $selectedComponent);
+$: tableActionSettings = findTableActionSettings($app, $selectedComponent);
 function findTableActionSettings(app, id) {
     return allItems(app.grid, app.subgrids)
         .map((x) => {
@@ -29,7 +29,7 @@ function findTableActionSettings(app, id) {
 }
 function findComponentSettings(app, id) {
     if (!id)
-        return undefined;
+        return;
     if (app?.grid) {
         const gridItem = app.grid.find((x) => x.data?.id === id);
         if (gridItem) {

package/components/apps/editor/SubGridEditor.svelte

@@ -7,7 +7,6 @@ import { expandGriditem, findGridItem } from './appUtils';
 import { push } from '../../../history';
 import Grid from '../svelte-grid/Grid.svelte';
 import GridViewer from './GridViewer.svelte';
-import { selectId } from '../utils';
 export let containerHeight = undefined;
 export let containerWidth = undefined;
 let classes = '';
@@ -20,15 +19,16 @@ export let visible = true;
 export let id;
 export let shouldHighlight = true;
 const dispatch = createEventDispatcher();
-const { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth, breakpoint, allIdsInPath } = getContext('AppViewerContext');
+const { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth, breakpoint } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
 $: highlight = id === $focusedGrid?.parentComponentId && shouldHighlight;
 const onpointerdown = (e) => {
     dispatch('focus');
 };
-function selectComponent(e, id) {
+function selectComponent(id) {
     if (!$connectingInput.opened) {
-        selectId(e, id, selectedComponent, $app);
+        dispatch('focus');
+        $selectedComponent = id;
     }
 }
 function lock(dataItem) {
@@ -60,7 +60,6 @@ let container = undefined;
 		{#if $mode !== 'preview'}
 			<div class={highlight ? 'border-gray-400  border border-dashed min-h-full' : ''}>
 				<Grid
-					allIdsInPath={$allIdsInPath}
 					items={$app.subgrids?.[subGridId] ?? []}
 					on:redraw={(e) => {
 						push(editorContext?.history, $app)
@@ -68,7 +67,7 @@ let container = undefined;
 							$app.subgrids[subGridId] = e.detail
 						}
 					}}
-					selectedIds={$selectedComponent}
+					onTopId={$selectedComponent}
 					let:dataItem
 					rowHeight={36}
 					cols={columnConfiguration}
@@ -95,17 +94,17 @@ let container = undefined;
 
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<div
-						on:pointerdown={(e) => selectComponent(e, dataItem.id)}
+						on:pointerdown={() => selectComponent(dataItem.id)}
 						class={classNames(
 							'h-full w-full center-center',
-							$selectedComponent?.includes(dataItem.id) ? 'active-grid-item' : '',
+							$selectedComponent === dataItem.id ? 'active-grid-item' : '',
 							'top-0'
 						)}
 					>
 						<Component
 							render={visible}
 							component={dataItem.data}
-							selected={Boolean($selectedComponent?.includes(dataItem.id))}
+							selected={$selectedComponent === dataItem.id}
 							locked={isFixed(dataItem)}
 							on:lock={() => lock(dataItem)}
 							on:expand={() => {
@@ -114,7 +113,7 @@ let container = undefined;
 								if (!parentGridItem) {
 									return
 								}
-								$selectedComponent = [dataItem.id]
+								$selectedComponent = dataItem.id
 								push(editorContext?.history, $app)
 
 								expandGriditem(
@@ -131,7 +130,7 @@ let container = undefined;
 			</div>
 		{:else}
 			<GridViewer
-				allIdsInPath={$allIdsInPath}
+				onTopId={$selectedComponent}
 				items={$app.subgrids?.[subGridId] ?? []}
 				let:dataItem
 				rowHeight={36}
@@ -142,13 +141,13 @@ let container = undefined;
 			>
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<div
-					on:pointerdown|stopPropagation={(e) => selectComponent(e, dataItem.id)}
+					on:pointerdown={() => selectComponent(dataItem.id)}
 					class={classNames('h-full w-full center-center', 'top-0')}
 				>
 					<Component
 						render={visible}
 						component={dataItem.data}
-						selected={Boolean($selectedComponent?.includes(dataItem.id))}
+						selected={$selectedComponent === dataItem.id}
 						locked={isFixed(dataItem)}
 					/>
 				</div>

package/components/apps/editor/appUtils.d.ts

@@ -3,7 +3,6 @@ import { components, type AppComponent, type BaseComponent } from './component';
 import type { Output, World } from '../rx';
 import type { FilledItem } from '../svelte-grid/types';
 import type { EvalAppInput, StaticAppInput } from '../inputType';
-export declare function dfs(grid: GridItem[], id: string, subgrids: Record<string, GridItem[]>): string[] | undefined;
 export declare function findGridItemParentGrid(app: App, id: string): string | undefined;
 export declare function allsubIds(app: App, parentId: string): string[];
 export declare function findGridItem(app: App, id: string): GridItem | undefined;

package/components/apps/editor/appUtils.js

@@ -3,25 +3,6 @@ import { ccomponents, components, getRecommendedDimensionsByComponent } from './
 import { gridColumns } from '../gridUtils';
 import { allItems } from '../utils';
 import gridHelp from '../svelte-grid/utils/helper';
-export function dfs(grid, id, subgrids) {
-    for (const item of grid) {
-        if (item.id === id) {
-            return [id];
-        }
-        else if (item.data.type == 'tablecomponent' && item.data.actionButtons.find((x) => x.id)) {
-            return [item.id, id];
-        }
-        else {
-            for (let i = 0; i < (item.data.numberOfSubgrids ?? 0); i++) {
-                const res = dfs(subgrids[`${item.id}-${i}`], id, subgrids);
-                if (res) {
-                    return [item.id, ...res];
-                }
-            }
-        }
-    }
-    return undefined;
-}
 function findGridItemById(root, subGrids, id) {
     for (const gridItem of allItems(root, subGrids)) {
         if (gridItem.id === id) {

package/components/apps/editor/component/Component.svelte

@@ -1,6 +1,8 @@
 <script>import { getContext } from 'svelte';
+import { Loader2 } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import ComponentHeader from '../ComponentHeader.svelte';
+import { ccomponents, components } from './components';
 import { AppBarChart, AppDisplayComponent, AppTable, AppText, AppButton, AppPieChart, AppSelect, AppCheckbox, AppTextInput, AppNumberInput, AppDateInput, AppForm, AppScatterChart, AppTimeseries, AppHtml, AppSliderInputs, AppFormButton, VegaLiteHtml, PlotlyHtml, AppRangeInput, AppTabs, AppIcon, AppCurrencyInput, AppDivider, AppFileInput, AppImage, AppContainer, AppAggridTable, AppDrawer, AppMap, AppSplitpanes, AppPdf } from '../../components';
 import AppMultiSelect from '../../components/inputs/AppMultiSelect.svelte';
 export let component;
@@ -9,9 +11,8 @@ export let locked = false;
 export let render;
 const { mode, app, errorByComponent, hoverStore } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
-const movingcomponents = editorContext?.movingcomponents;
-$: ismoving =
-    movingcomponents != undefined && $mode == 'dnd' && $movingcomponents?.includes(component.id);
+const movingcomponent = editorContext?.movingcomponent;
+$: ismoving = movingcomponent != undefined && $mode == 'dnd' && $movingcomponent === component.id;
 let initializing = undefined;
 let componentContainerHeight = 0;
 $: componentWithErrors = Object.values($errorByComponent).map((e) => e.componentId);
@@ -49,11 +50,9 @@ $: hasError = componentWithErrors.includes(component.id);
 			<button
 				class="border p-0.5 text-xs"
 				on:click={() => {
-					$movingcomponents = undefined
-				}}
+					$movingcomponent = undefined
+				}}>Cancel move</button
 			>
-				Cancel move
-			</button>
 		</div>
 	{/if}
 	<div
@@ -61,6 +60,7 @@ $: hasError = componentWithErrors.includes(component.id);
 			'h-full bg-white/40 outline-1',
 			$hoverStore === component.id && $mode !== 'preview' ? 'outline outline-blue-600' : '',
 			selected && $mode !== 'preview' ? 'outline outline-indigo-600' : '',
+			ccomponents[component.type].softWrap || hasError ? '' : 'overflow-auto',
 			$mode != 'preview' ? 'cursor-pointer' : '',
 			'relative z-auto',
 			$app.css?.['app']?.['component']?.class,
@@ -114,7 +114,6 @@ $: hasError = componentWithErrors.includes(component.id);
 		{:else if component.type === 'plotlycomponent'}
 			<PlotlyHtml
 				id={component.id}
-				configuration={component.configuration}
 				bind:initializing
 				componentInput={component.componentInput}
 				{render}
@@ -144,7 +143,7 @@ $: hasError = componentWithErrors.includes(component.id);
 				customCss={component.customCss}
 				bind:initializing
 				componentInput={component.componentInput}
-				actionButtons={component.actionButtons}
+				bind:actionButtons={component.actionButtons}
 				{render}
 			/>
 		{:else if component.type === 'aggridcomponent'}
@@ -234,16 +233,6 @@ $: hasError = componentWithErrors.includes(component.id);
 				customCss={component.customCss}
 				{render}
 			/>
-		{:else if component.type === 'textareainputcomponent'}
-			<AppTextInput
-				id={component.id}
-				verticalAlignment={component.verticalAlignment}
-				configuration={component.configuration}
-				customCss={component.customCss}
-				inputType="textarea"
-				appCssKey="textareainputcomponent"
-				{render}
-			/>
 		{:else if component.type === 'emailinputcomponent'}
 			<AppTextInput
 				verticalAlignment={component.verticalAlignment}

package/components/apps/editor/component/Component.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppComponent } from './components';
+import { type AppComponent } from './components';
 declare const __propDef: {
     props: {
         component: AppComponent;

package/components/apps/editor/component/ComponentNavigation.svelte

@@ -4,9 +4,9 @@ import { push } from '../../../../history';
 import { sendUserToast } from '../../../../utils';
 import { gridColumns } from '../../gridUtils';
 const { app, selectedComponent, worldStore, focusedGrid, componentControl } = getContext('AppViewerContext');
-const { history, movingcomponents } = getContext('AppEditorContext');
-let tempGridItems = undefined;
-let copiedGridItems = undefined;
+const { history, movingcomponent } = getContext('AppEditorContext');
+let tempGridItem = undefined;
+let copiedGridItem = undefined;
 function getSortedGridItemsOfChildren() {
     if (!$focusedGrid) {
         return $app.grid;
@@ -17,48 +17,48 @@ function getSortedGridItemsOfChildren() {
     return $app.subgrids[`${$focusedGrid.parentComponentId}-${$focusedGrid.subGridIndex}`] ?? [];
 }
 function getGridItems() {
-    if ($app.grid.find((item) => item.id === $selectedComponent?.[0])) {
+    if ($app.grid.find((item) => item.id === $selectedComponent)) {
         return $app.grid;
     }
     if (!$app.subgrids) {
         return [];
     }
-    return (Object.values($app.subgrids ?? {}).find((grid) => grid.find((item) => item.id === $selectedComponent?.[0])) ?? []);
+    return (Object.values($app.subgrids ?? {}).find((grid) => grid.find((item) => item.id === $selectedComponent)) ?? []);
 }
 function left(event) {
-    if (!$componentControl[$selectedComponent?.[0] ?? '']?.left?.()) {
+    if (!$componentControl[$selectedComponent]?.left?.()) {
         const sortedGridItems = getGridItems();
-        const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent?.[0] ?? '');
+        const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent);
         if (currentIndex !== -1 && currentIndex > 0) {
             const left = sortedGridItems[currentIndex - 1];
             if (left.data.type === 'tablecomponent' && left.data.actionButtons.length >= 1) {
-                $selectedComponent = [left.data.actionButtons[left.data.actionButtons.length - 1].id];
+                $selectedComponent = left.data.actionButtons[left.data.actionButtons.length - 1].id;
             }
             else {
-                $selectedComponent = [left.id];
+                $selectedComponent = left.id;
             }
         }
     }
     event.preventDefault();
 }
 function right(event) {
-    let r = $componentControl[$selectedComponent?.[0] ?? '']?.right?.();
+    let r = $componentControl[$selectedComponent]?.right?.();
     if (typeof r === 'string') {
-        $selectedComponent = [r];
+        $selectedComponent = r;
         r = $componentControl[r]?.right?.(true);
     }
     if (!r) {
         const sortedGridItems = getGridItems();
-        const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent?.[0] ?? '');
+        const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent);
         if (currentIndex !== -1 && currentIndex < sortedGridItems.length - 1) {
-            $selectedComponent = [sortedGridItems[currentIndex + 1].id];
+            $selectedComponent = sortedGridItems[currentIndex + 1].id;
         }
     }
     event.preventDefault();
 }
 function down(event) {
     if (!$focusedGrid) {
-        $selectedComponent = [getSortedGridItemsOfChildren()[0]?.id];
+        $selectedComponent = getSortedGridItemsOfChildren()[0]?.id;
         event.preventDefault();
     }
     else if ($app.subgrids) {
@@ -68,7 +68,7 @@ function down(event) {
             return;
         }
         if (subgrid) {
-            $selectedComponent = [subgrid[0].id];
+            $selectedComponent = subgrid[0].id;
         }
         event.preventDefault();
     }
@@ -81,9 +81,9 @@ function handleEscape(event) {
 function handleArrowUp(event) {
     if (!$selectedComponent)
         return;
-    let parentId = findGridItemParentGrid($app, $selectedComponent?.[0])?.split('-')[0];
+    let parentId = findGridItemParentGrid($app, $selectedComponent)?.split('-')[0];
     if (parentId) {
-        $selectedComponent = [parentId];
+        $selectedComponent = parentId;
     }
     else {
         $selectedComponent = undefined;
@@ -94,58 +94,49 @@ function handleCopy(event) {
     if (!$selectedComponent) {
         return;
     }
-    tempGridItems = undefined;
-    copiedGridItems = $selectedComponent
-        .map((x) => findGridItem($app, x))
-        .filter((x) => x != undefined);
+    tempGridItem = undefined;
+    copiedGridItem = findGridItem($app, $selectedComponent);
 }
 function handleCut(event) {
     if (!$selectedComponent) {
         return;
     }
-    $movingcomponents = JSON.parse(JSON.stringify($selectedComponent));
+    $movingcomponent = $selectedComponent;
     push(history, $app);
-    let gridItems = $selectedComponent
-        .map((x) => findGridItem($app, x))
-        .filter((x) => x != undefined);
-    copiedGridItems = gridItems;
-    if (!gridItems) {
+    const gridItem = findGridItem($app, $selectedComponent);
+    copiedGridItem = gridItem;
+    if (!gridItem) {
         return;
     }
     // Store the grid item in a temp variable so we can paste it later
-    tempGridItems = gridItems;
+    tempGridItem = gridItem;
 }
 function handlePaste(event) {
     push(history, $app);
-    $movingcomponents = undefined;
-    if (tempGridItems != undefined) {
-        for (let tempGridItem of tempGridItems) {
-            if ($focusedGrid &&
-                getAllSubgridsAndComponentIds($app, tempGridItem.data)[0].includes(`${$focusedGrid.parentComponentId}-${$focusedGrid.subGridIndex}`)) {
-                sendUserToast('Cannot paste a component into itself', true);
-                return;
-            }
-            let parentGrid = findGridItemParentGrid($app, tempGridItem.id);
-            if (parentGrid) {
-                $app.subgrids &&
-                    ($app.subgrids[parentGrid] = $app.subgrids[parentGrid].filter((item) => item.id !== tempGridItem?.id));
-            }
-            else {
-                $app.grid = $app.grid.filter((item) => item.id !== tempGridItem?.id);
-            }
-            const gridItem = tempGridItem;
-            insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), $focusedGrid, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])), tempGridItem.id);
+    $movingcomponent = undefined;
+    if (tempGridItem != undefined) {
+        if ($focusedGrid &&
+            getAllSubgridsAndComponentIds($app, tempGridItem.data)[0].includes(`${$focusedGrid.parentComponentId}-${$focusedGrid.subGridIndex}`)) {
+            sendUserToast('Cannot paste a component into itself', true);
+            return;
+        }
+        let parentGrid = findGridItemParentGrid($app, tempGridItem.id);
+        if (parentGrid) {
+            $app.subgrids &&
+                ($app.subgrids[parentGrid] = $app.subgrids[parentGrid].filter((item) => item.id !== tempGridItem?.id));
         }
-        copiedGridItems = tempGridItems;
-        $selectedComponent = tempGridItems.map((x) => x.id);
-        tempGridItems = undefined;
-    }
-    else if (copiedGridItems) {
-        let nitems = [];
-        for (let copiedGridItem of copiedGridItems) {
-            nitems.push(insertNewGridItem($app, (id) => ({ ...copiedGridItem.data, id }), $focusedGrid, Object.fromEntries(gridColumns.map((column) => [column, copiedGridItem[column]]))));
+        else {
+            $app.grid = $app.grid.filter((item) => item.id !== tempGridItem?.id);
         }
-        $selectedComponent = nitems.map((x) => x);
+        const gridItem = tempGridItem;
+        insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), $focusedGrid, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])), tempGridItem.id);
+        copiedGridItem = tempGridItem;
+        $selectedComponent = tempGridItem.id;
+        tempGridItem = undefined;
+    }
+    else if (copiedGridItem) {
+        const gridItem = copiedGridItem;
+        $selectedComponent = insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), $focusedGrid, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])));
     }
     $worldStore = $worldStore;
     $app = $app;
@@ -153,8 +144,7 @@ function handlePaste(event) {
 function keydown(event) {
     // Ignore keydown events if the user is typing in monaco
     let classes = event.target?.['className'];
-    if ((typeof classes === 'string' && classes.includes('inputarea')) ||
-        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
+    if (typeof classes === 'string' && classes.includes('inputarea')) {
         return;
     }
     switch (event.key) {

package/components/apps/editor/component/README.md

@@ -8,10 +8,6 @@
    1. Add the component to one of the component sets: `layout`, `buttons`,
       `inputs` or `display` _(this controls which group the component will be
       placed in in the **Insert** menu)_
-1. [**`quickStyleProperties.ts`**](../componentsPanel/quickStyleProperties.ts):
-   1. Add the component to the `quickStyleProperties` record
-   1. _(optional)_ Add the CSS properties that could be applied to the component
-      parts
 1. [**`Component.svelte`**](./Component.svelte):
    1. Add the new component in the Svelte `if` statement
 1. [**`default-codes.ts`**](./default-codes.ts):