windmill-components 1.473.1 → 1.493.2

package/package/components/ServiceLogsInner.svelte.d.ts

@@ -1,21 +1,26 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        searchTerm: string;
-        queryParseErrors?: string[] | undefined;
-        getLogFile?: ((hostname: string, path: string) => Promise<void>) | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ServiceLogsInnerProps = typeof __propDef.props;
-export type ServiceLogsInnerEvents = typeof __propDef.events;
-export type ServiceLogsInnerSlots = typeof __propDef.slots;
-export default class ServiceLogsInner extends SvelteComponent<ServiceLogsInnerProps, ServiceLogsInnerEvents, ServiceLogsInnerSlots> {
-    get getLogFile(): (hostname: string, path: string) => Promise<void>;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ServiceLogsInner: $$__sveltets_2_IsomorphicComponent<{
+    searchTerm: string;
+    queryParseErrors?: string[];
+    getLogFile?: (hostname: string, path: string) => Promise<void>;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    getLogFile: (hostname: string, path: string) => Promise<void>;
+}, string>;
+type ServiceLogsInner = InstanceType<typeof ServiceLogsInner>;
+export default ServiceLogsInner;

package/package/components/ShareModal.svelte

@@ -1,4 +1,4 @@
-<script>import TableCustom from './TableCustom.svelte';
+<script lang="ts">import TableCustom from './TableCustom.svelte';
 import { GroupService, UserService, GranularAclService } from '../gen';
 import { createEventDispatcher } from 'svelte';
 import AutoComplete from 'simple-svelte-autocomplete';
@@ -114,8 +114,8 @@ async function addAcl(owner, write) {
 				<TableCustom>
 					<tr slot="header-row">
 						<th>owner</th>
-						<th />
-						<th />
+						<th></th>
+						<th></th>
 					</tr>
 					<tbody slot="body">
 						{#each acls as [owner, write]}

package/package/components/ShareModal.svelte.d.ts

@@ -1,19 +1,24 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        openDrawer?: ((newPath: string, kind_l: "script" | "flow" | "resource" | "schedule" | "app" | "variable" | "group_" | "raw_app" | "http_trigger" | "websocket_trigger" | "kafka_trigger" | "nats_trigger" | "postgres_trigger" | "sqs_trigger") => Promise<void>) | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ShareModalProps = typeof __propDef.props;
-export type ShareModalEvents = typeof __propDef.events;
-export type ShareModalSlots = typeof __propDef.slots;
-export default class ShareModal extends SvelteComponent<ShareModalProps, ShareModalEvents, ShareModalSlots> {
-    get openDrawer(): (newPath: string, kind_l: "script" | "flow" | "resource" | "schedule" | "app" | "variable" | "group_" | "raw_app" | "http_trigger" | "websocket_trigger" | "kafka_trigger" | "nats_trigger" | "postgres_trigger" | "sqs_trigger") => Promise<void>;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ShareModal: $$__sveltets_2_IsomorphicComponent<{
+    openDrawer?: (newPath: string, kind_l: "script" | "flow" | "resource" | "schedule" | "app" | "variable" | "group_" | "raw_app" | "http_trigger" | "websocket_trigger" | "kafka_trigger" | "nats_trigger" | "postgres_trigger" | "mqtt_trigger" | "gcp_trigger" | "sqs_trigger") => Promise<void>;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    openDrawer: (newPath: string, kind_l: "script" | "flow" | "resource" | "schedule" | "app" | "variable" | "group_" | "raw_app" | "http_trigger" | "websocket_trigger" | "kafka_trigger" | "nats_trigger" | "postgres_trigger" | "mqtt_trigger" | "gcp_trigger" | "sqs_trigger") => Promise<void>;
+}, string>;
+type ShareModal = InstanceType<typeof ShareModal>;
+export default ShareModal;

package/package/components/SharedBadge.svelte

@@ -1,4 +1,4 @@
-<script>import { userStore } from '../stores';
+<script lang="ts">import { userStore } from '../stores';
 import { Users } from 'lucide-svelte';
 import Badge from './common/badge/Badge.svelte';
 import Popover from './Popover.svelte';

package/package/components/SharedBadge.svelte.d.ts

@@ -1,17 +1,21 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        extraPerms?: Record<string, boolean> | undefined;
-        canWrite: boolean;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SharedBadgeProps = typeof __propDef.props;
-export type SharedBadgeEvents = typeof __propDef.events;
-export type SharedBadgeSlots = typeof __propDef.slots;
-export default class SharedBadge extends SvelteComponent<SharedBadgeProps, SharedBadgeEvents, SharedBadgeSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const SharedBadge: $$__sveltets_2_IsomorphicComponent<{
+    extraPerms?: Record<string, boolean>;
+    canWrite: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SharedBadge = InstanceType<typeof SharedBadge>;
+export default SharedBadge;

package/package/components/SimpleAgTable.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">import { sendUserToast } from '../toast';
+import { createGrid } from 'ag-grid-community';
+import DarkModeObserver from './DarkModeObserver.svelte';
+let { data, class: className } = $props();
+let api = $state();
+let eGui = $state();
+$effect(() => eGui && mountGrid());
+function mountGrid() {
+    if (eGui) {
+        createGrid(eGui, {
+            onGridReady: (e) => {
+                api = e.api;
+            },
+            autoSizeStrategy: { type: 'fitCellContents' },
+            ...updateGridOptions
+        });
+    }
+}
+let columnDefs = $derived.by(() => {
+    if (!data.length)
+        return [];
+    const defs = [];
+    for (const row of data) {
+        for (const key in row) {
+            if (!defs.some((def) => def.field === key)) {
+                defs.push({ field: key });
+            }
+        }
+    }
+    return defs;
+});
+let updateGridOptions = $derived({
+    rowData: data.map((row) => {
+        const newRow = {};
+        for (const key in row) {
+            newRow[key] = typeof row[key] === 'string' ? row[key].trim() : JSON.stringify(row[key]);
+        }
+        return newRow;
+    }),
+    columnDefs
+});
+$effect(() => {
+    api?.updateGridOptions(updateGridOptions);
+});
+let darkMode = $state(false);
+let [clientHeight, clientWidth] = $state([0, 0]);
+</script>
+
+<DarkModeObserver bind:darkMode />
+
+<div
+	class={'flex flex-col h-full component-wrapper divide-y wm-aggrid-container ' +
+		(api ? '' : 'opacity-0 ') +
+		className}
+	bind:clientHeight
+	bind:clientWidth
+>
+	<div
+		style:height="{clientHeight}px"
+		style:width="{clientWidth}px"
+		class="ag-theme-alpine"
+		class:ag-theme-alpine-dark={darkMode}
+	>
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			bind:this={eGui}
+			style:height="100%"
+			onkeydown={(e) => {
+				if ((e.ctrlKey || e.metaKey) && e.key === 'c') {
+					const selectedCell = api?.getFocusedCell()
+					if (selectedCell) {
+						const rowIndex = selectedCell.rowIndex
+						const colId = selectedCell.column?.getId()
+						const rowNode = api?.getDisplayedRowAtIndex(rowIndex)
+						const selectedValue = rowNode?.data?.[colId]
+						navigator.clipboard.writeText(selectedValue)
+						sendUserToast('Copied cell value to clipboard', false)
+					}
+				}
+			}}
+		>
+		</div>
+	</div>
+</div>

package/package/components/SimpleAgTable.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    data: Record<string, any>[];
+    class?: string;
+};
+declare const SimpleAgTable: import("svelte").Component<Props, {}, "">;
+type SimpleAgTable = ReturnType<typeof SimpleAgTable>;
+export default SimpleAgTable;

package/package/components/SimpleEditor.svelte

@@ -1,11 +1,21 @@
-<script context="module">
-	let cssClassesLoaded = writable(false)
-	let tailwindClassesLoaded = writable(false)
+<script module>
+	let cssClassesLoaded = $state(false)
+	let tailwindClassesLoaded = $state(false)
 
 	import '@codingame/monaco-vscode-standalone-languages'
 	import '@codingame/monaco-vscode-standalone-json-language-features'
 	import '@codingame/monaco-vscode-standalone-css-language-features'
 	import '@codingame/monaco-vscode-standalone-typescript-language-features'
+	import '@codingame/monaco-vscode-standalone-html-language-features'
+	import {
+		editor as meditor,
+		KeyCode,
+		KeyMod,
+		Uri as mUri,
+		languages,
+		type IRange,
+		type IDisposable
+	} from 'monaco-editor'
 
 	languages.typescript.javascriptDefaults.setCompilerOptions({
 		target: languages.typescript.ScriptTarget.Latest,
@@ -14,12 +24,15 @@
 		noLib: true,
 		moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
 	})
-	languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-		noSemanticValidation: false,
-		noSyntaxValidation: false,
-		noSuggestionDiagnostics: false,
-		diagnosticCodesToIgnore: [1108]
-	})
+	function setDiagnosticsOptions() {
+		languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+			noSemanticValidation: false,
+			noSyntaxValidation: false,
+			noSuggestionDiagnostics: false,
+			diagnosticCodesToIgnore: [1108]
+		})
+	}
+	setDiagnosticsOptions()
 	languages.json.jsonDefaults.setDiagnosticsOptions({
 		validate: true,
 		allowComments: false,
@@ -40,44 +53,45 @@
 	})
 </script>
 
-<script>import { BROWSER } from 'esm-env';
+<script lang="ts">import { BROWSER } from 'esm-env';
 import { createHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
-import { editor as meditor, KeyCode, KeyMod, Uri as mUri, languages } from 'monaco-editor';
+// import {
+// 	editor as meditor,
+// 	KeyCode,
+// 	KeyMod,
+// 	Uri as mUri,
+// 	languages,
+// 	type IRange,
+// 	type IDisposable
+// } from 'monaco-editor'
 import { allClasses } from './apps/editor/componentsPanel/cssUtils';
 import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import libStdContent from '../es6.d.ts.txt?raw';
 import domContent from '../dom.d.ts.txt?raw';
-import { initializeVscode } from './vscode';
+import { initializeVscode, keepModelAroundToAvoidDisposalOfWorkers } from './vscode';
 import EditorTheme from './EditorTheme.svelte';
-import { writable } from 'svelte/store';
 import { vimMode } from '../stores';
 import { initVim } from './monaco_keybindings';
-import { buildWorkerDefinition } from '../monaco_workers/build_workers';
+import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte';
 // import { createConfiguredEditor } from 'vscode/monaco'
 // import type { IStandaloneCodeEditor } from 'vscode/vscode/vs/editor/standalone/browser/standaloneCodeEditor'
 let divEl = null;
-let editor;
+let editor = $state(null);
 let model;
-export let lang;
-export let code = '';
-export let hash = createHash();
-export let cmdEnterAction = undefined;
-export let formatAction = undefined;
-export let automaticLayout = true;
-export let extraLib = '';
-export let placeholder = '';
-export let shouldBindKey = true;
-export let autoHeight = false;
-export let fixedOverflowWidgets = true;
-export let small = false;
-export let domLib = false;
-export let autofocus = false;
-export let allowVim = false;
-export let tailwindClasses = [];
+let statusDiv = $state(null);
+let width = $state(0);
+let initialized = $state(false);
+let suggestion = $state('');
+let placeholderVisible = $state(false);
+let mounted = $state(false);
+let valueAfterDispose = undefined;
+let { lang, code = $bindable(), hash = createHash(), cmdEnterAction, formatAction, automaticLayout = true, extraLib = '', placeholder = '', disableSuggestions = false, disableLinting = false, hideLineNumbers = false, shouldBindKey = true, autoHeight = false, fixedOverflowWidgets = true, small = false, domLib = false, autofocus = false, allowVim = false, tailwindClasses = [], class: className = '', loadAsync = false } = $props();
 const dispatch = createEventDispatcher();
 const uri = `file:///${hash}.${langToExt(lang)}`;
-buildWorkerDefinition();
 export function getCode() {
+    if (valueAfterDispose != undefined) {
+        return valueAfterDispose;
+    }
     return editor?.getValue() ?? '';
 }
 export function insertAtCursor(code) {
@@ -87,11 +101,8 @@ export function insertAtCursor(code) {
 }
 export function setCode(ncode) {
     code = ncode;
-    if (editor) {
-        editor.setValue(ncode);
-    }
+    editor?.setValue(ncode);
 }
-let placeholderVisible = false;
 function updatePlaceholderVisibility(value) {
     if (!value) {
         placeholderVisible = true;
@@ -137,18 +148,24 @@ export function show() {
 export function hide() {
     divEl?.classList.add('hidden');
 }
-let suggestion = '';
 export function setSuggestion(value) {
     suggestion = value;
 }
-let width = 0;
-let initialized = false;
 let disableTabCond;
-$: disableTabCond?.set(!code && !!suggestion);
-let statusDiv = null;
+$effect(() => {
+    disableTabCond?.set(!code && !!suggestion);
+});
 let vimDisposable = undefined;
-$: allowVim && editor && $vimMode && statusDiv && onVimMode();
-$: !$vimMode && vimDisposable && onVimDisable();
+$effect(() => {
+    if (allowVim && editor !== null && $vimMode && statusDiv) {
+        onVimMode();
+    }
+});
+$effect(() => {
+    if (!$vimMode && vimDisposable) {
+        onVimDisable();
+    }
+});
 function onVimDisable() {
     vimDisposable?.dispose();
 }
@@ -159,6 +176,51 @@ function onVimMode() {
         });
     }
 }
+function updateModelAndOptions() {
+    const model = editor?.getModel();
+    if (model) {
+        // Switch language if it changed
+        if (model.getLanguageId() !== lang) {
+            const currentCode = model.getValue();
+            const uri = `file:///${hash}.${langToExt(lang)}`;
+            const oldModel = model;
+            const newModel = meditor.createModel(currentCode, lang, mUri.parse(uri));
+            editor?.setModel(newModel);
+            oldModel.dispose();
+        }
+        // Update editor options for suggestions, validation decorations, and line numbers
+        editor?.updateOptions({
+            quickSuggestions: disableSuggestions
+                ? { other: false, comments: false, strings: false }
+                : { other: true, comments: true, strings: true },
+            suggestOnTriggerCharacters: !disableSuggestions,
+            wordBasedSuggestions: disableSuggestions ? 'off' : 'matchingDocuments',
+            parameterHints: { enabled: !disableSuggestions },
+            suggest: {
+                showIcons: !disableSuggestions,
+                showSnippets: !disableSuggestions,
+                showKeywords: !disableSuggestions,
+                showWords: !disableSuggestions,
+                snippetsPreventQuickSuggestions: disableSuggestions
+            },
+            lineNumbers: hideLineNumbers ? 'off' : 'on',
+            lineDecorationsWidth: hideLineNumbers ? 0 : 6,
+            lineNumbersMinChars: hideLineNumbers ? 0 : 2,
+            // Hide validation squiggles and decorations
+            renderValidationDecorations: disableLinting ? 'off' : 'on',
+            // Hide the validation margin indicators
+            hideCursorInOverviewRuler: disableLinting,
+            overviewRulerBorder: !disableLinting,
+            overviewRulerLanes: disableLinting ? 0 : 3
+        });
+    }
+}
+$effect(() => {
+    if (editor !== null && (lang || disableLinting || disableSuggestions || hideLineNumbers)) {
+        updateModelAndOptions();
+    }
+});
+let fontSize = $derived(small ? 12 : 14);
 async function loadMonaco() {
     await initializeVscode();
     initialized = true;
@@ -206,9 +268,22 @@ async function loadMonaco() {
         model,
         lineDecorationsWidth: 6,
         lineNumbersMinChars: 2,
-        // overflowWidgetsDomNode: widgets,
-        fontSize: small ? 12 : 14
+        fontSize: fontSize,
+        quickSuggestions: disableSuggestions
+            ? { other: false, comments: false, strings: false }
+            : { other: true, comments: true, strings: true },
+        suggestOnTriggerCharacters: !disableSuggestions,
+        wordBasedSuggestions: disableSuggestions ? 'off' : 'matchingDocuments',
+        parameterHints: { enabled: !disableSuggestions },
+        suggest: {
+            showIcons: !disableSuggestions,
+            showSnippets: !disableSuggestions,
+            showKeywords: !disableSuggestions,
+            showWords: !disableSuggestions,
+            snippetsPreventQuickSuggestions: disableSuggestions
+        }
     });
+    keepModelAroundToAvoidDisposalOfWorkers();
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {
         suggestion = '';
@@ -219,6 +294,8 @@ async function loadMonaco() {
         }, 200);
     });
     editor.onDidFocusEditorText(() => {
+        if (!editor)
+            return;
         dispatch('focus');
         loadExtraLib();
         editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () {
@@ -234,6 +311,8 @@ async function loadMonaco() {
     });
     if (autoHeight) {
         const updateHeight = () => {
+            if (!editor)
+                return;
             const contentHeight = Math.min(1000, editor.getContentHeight());
             if (divEl) {
                 divEl.style.height = `${contentHeight}px`;
@@ -248,6 +327,8 @@ async function loadMonaco() {
         updateHeight();
     }
     editor.onDidFocusEditorText(() => {
+        if (!editor)
+            return;
         editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () {
             code = getCode();
             shouldBindKey && format && format();
@@ -262,17 +343,19 @@ async function loadMonaco() {
         dispatch('blur');
         code = getCode();
     });
-    if (lang === 'css' && !$cssClassesLoaded) {
-        $cssClassesLoaded = true;
+    if (lang === 'css' && !cssClassesLoaded) {
+        cssClassesLoaded = true;
         addCSSClassCompletions();
     }
-    if (lang === 'tailwindcss' && !$tailwindClassesLoaded) {
+    if (lang === 'tailwindcss' && !tailwindClassesLoaded) {
         languages.register({ id: 'tailwindcss' });
-        $tailwindClassesLoaded = true;
+        tailwindClassesLoaded = true;
         addTailwindClassCompletions();
     }
     if (placeholder) {
         editor.onDidChangeModelContent(() => {
+            if (!editor)
+                return;
             const value = editor.getValue();
             updatePlaceholderVisibility(value);
         });
@@ -306,32 +389,44 @@ function addCSSClassCompletions() {
     });
 }
 function addTailwindClassCompletions() {
+    // Define a custom word definition for Tailwind classes
+    languages.setMonarchTokensProvider('tailwindcss', {
+        tokenizer: {
+            root: [[/[a-zA-Z0-9-]+/, 'tailwind-class']]
+        }
+    });
     languages.registerCompletionItemProvider('tailwindcss', {
+        triggerCharacters: ['-'],
         provideCompletionItems: function (model, position, context, token) {
-            const word = model.getWordUntilPosition(position);
+            const wordUntilPosition = model.getWordUntilPosition(position);
+            const lineContent = model.getLineContent(position.lineNumber);
+            // Get the text from the start of the line to the cursor
+            const textUntilPosition = lineContent.substring(0, position.column - 1);
+            // Find the last space before the cursor
+            const lastSpaceIndex = textUntilPosition.lastIndexOf(' ');
+            const startColumn = lastSpaceIndex === -1 ? 1 : lastSpaceIndex + 2;
             const range = {
                 startLineNumber: position.lineNumber,
-                startColumn: word.startColumn,
+                startColumn: startColumn,
                 endLineNumber: position.lineNumber,
-                endColumn: word.endColumn
+                endColumn: position.column
             };
-            if (word && word.word) {
-                const currentWord = word.word;
-                const suggestions = tailwindClasses
-                    .filter((className) => className.includes(currentWord))
-                    .map((className) => ({
-                    label: className,
-                    kind: languages.CompletionItemKind.Class,
-                    insertText: className,
-                    documentation: 'Custom CSS class',
-                    range: range
-                }));
-                return { suggestions };
-            }
-            return { suggestions: [] };
+            const currentWord = wordUntilPosition.word;
+            const suggestions = tailwindClasses
+                .filter((className) => className.includes(currentWord))
+                .map((className) => ({
+                label: className,
+                kind: languages.CompletionItemKind.Class,
+                insertText: className,
+                documentation: 'Tailwind CSS class',
+                range: range,
+                preselect: true
+            }));
+            return { suggestions };
         }
     });
 }
+let previousExtraLib = undefined;
 function loadExtraLib() {
     if (lang == 'javascript') {
         const stdLib = { content: libStdContent, filePath: 'es6.d.ts' };
@@ -345,25 +440,40 @@ function loadExtraLib() {
                 content: extraLib,
                 filePath: 'windmill.d.ts'
             });
+            if (previousExtraLib == extraLib) {
+                return;
+            }
+            previousExtraLib = extraLib;
         }
         languages.typescript.javascriptDefaults.setExtraLibs(libs);
     }
 }
-let mounted = false;
 onMount(async () => {
     if (BROWSER) {
-        mounted = true;
-        await loadMonaco();
-        if (autofocus) {
-            setTimeout(() => {
-                focus();
+        if (loadAsync) {
+            setTimeout(async () => {
+                await loadMonaco();
+                mounted = true;
+                if (autofocus)
+                    setTimeout(() => focus(), 0);
             }, 0);
         }
+        else {
+            await loadMonaco();
+            mounted = true;
+            if (autofocus)
+                setTimeout(() => focus(), 0);
+        }
+    }
+});
+$effect(() => {
+    if (mounted && extraLib && initialized) {
+        loadExtraLib();
     }
 });
-$: mounted && extraLib && initialized && loadExtraLib();
 onDestroy(() => {
     try {
+        valueAfterDispose = getCode();
         vimDisposable?.dispose();
         model && model.dispose();
         editor && editor.dispose();
@@ -390,9 +500,22 @@ updatePlaceholderVisibility(code);
 		{suggestion}
 	</div>
 {/if}
+
+{#if !editor}
+	<FakeMonacoPlaceHolder
+		{code}
+		autoheight
+		lineNumbersWidth={(23 * fontSize) / 14}
+		lineNumbersOffset={fontSize == 14 ? -8 : -11}
+		{fontSize}
+	/>
+{/if}
+
 <div
 	bind:this={divEl}
-	class="relative {$$props.class ?? ''} editor simple-editor {!allowVim ? 'nonmain-editor' : ''}"
+	class="relative {className} {!editor ? 'hidden' : ''} editor simple-editor {!allowVim
+		? 'nonmain-editor'
+		: ''}"
 	bind:clientWidth={width}
 >
 	{#if placeholder}
@@ -406,8 +529,8 @@ updatePlaceholderVisibility(code);
 		</div>
 	{/if}
 </div>
-{#if allowVim && $vimMode}
-	<div class="fixed bottom-0 z-30" bind:this={statusDiv} />
+{#if allowVim && vimMode}
+	<div class="fixed bottom-0 z-30" bind:this={statusDiv}></div>
 {/if}
 
 <style>