windmill-components 1.623.1 → 1.642.0

package/package/components/TaggedTextInput.svelte

@@ -0,0 +1,449 @@
+<script lang="ts">let { tags, value = $bindable(''), placeholder = '', highlights, onCurrentTagChange, onTextSegmentAtCursorChange, class: className = '' } = $props();
+let contentEditableDiv;
+let isUpdating = false;
+$effect(() => {
+    if (!value.trim() && value !== '')
+        value = '';
+});
+let _preventCursorMoveOnNextSync = false;
+// Update the displayed HTML when value changes externally
+$effect(() => {
+    if (contentEditableDiv && !isUpdating) {
+        const currentText = getTextContent();
+        if (currentText !== value) {
+            updateDisplay(value);
+            if (!_preventCursorMoveOnNextSync) {
+                restoreCursor(value.length);
+                const cursorPos = getCursorPosition();
+                updateCurrentTag(cursorPos);
+            }
+        }
+    }
+    _preventCursorMoveOnNextSync = false;
+});
+export function preventCursorMoveOnNextSync() {
+    _preventCursorMoveOnNextSync = true;
+}
+function getTextContent() {
+    if (!contentEditableDiv)
+        return '';
+    return contentEditableDiv.textContent || '';
+}
+function updateDisplay(text) {
+    if (!contentEditableDiv)
+        return;
+    const html = highlightText(text);
+    contentEditableDiv.innerHTML = html;
+}
+/** Apply secondary highlight spans within a raw-text chunk. Returns HTML. */
+function applyHighlightsToChunk(rawText) {
+    if (!highlights || highlights.length === 0)
+        return escapeHtml(rawText);
+    // Find all highlight matches in the raw text
+    const hlMatches = [];
+    for (const hl of highlights) {
+        const regex = new RegExp(hl.regex, 'g');
+        let m;
+        while ((m = regex.exec(rawText)) !== null) {
+            hlMatches.push({ start: m.index, end: m.index + m[0].length, classes: hl.classes });
+        }
+    }
+    if (hlMatches.length === 0)
+        return escapeHtml(rawText);
+    // Sort and deduplicate (keep first on overlap)
+    hlMatches.sort((a, b) => a.start - b.start);
+    const filtered = [];
+    let lastEnd = -1;
+    for (const m of hlMatches) {
+        if (m.start >= lastEnd) {
+            filtered.push(m);
+            lastEnd = m.end;
+        }
+    }
+    let result = '';
+    let idx = 0;
+    for (const m of filtered) {
+        if (m.start > idx) {
+            result += escapeHtml(rawText.slice(idx, m.start));
+        }
+        result += `<span class="${m.classes}">${escapeHtml(rawText.slice(m.start, m.end))}</span>`;
+        idx = m.end;
+    }
+    if (idx < rawText.length) {
+        result += escapeHtml(rawText.slice(idx));
+    }
+    return result;
+}
+function highlightText(text) {
+    if (!text)
+        return '';
+    // Create a list of all matches with their positions
+    const matches = [];
+    tags.forEach((tag, tagIndex) => {
+        const regex = new RegExp(tag.regex, 'g');
+        let match;
+        while ((match = regex.exec(text)) !== null) {
+            matches.push({
+                start: match.index,
+                end: match.index + match[0].length,
+                tagIndex
+            });
+        }
+    });
+    // Sort matches by start position
+    matches.sort((a, b) => a.start - b.start);
+    // Remove overlapping matches (keep the first one)
+    const filteredMatches = [];
+    let lastEnd = -1;
+    for (const match of matches) {
+        if (match.start >= lastEnd) {
+            filteredMatches.push(match);
+            lastEnd = match.end;
+        }
+    }
+    // Build HTML with highlighted segments
+    let html = '';
+    let lastIndex = 0;
+    for (const match of filteredMatches) {
+        // Add text before the match (apply secondary highlights)
+        if (match.start > lastIndex) {
+            html += applyHighlightsToChunk(text.slice(lastIndex, match.start));
+        }
+        // Add highlighted match (with secondary highlights applied inside)
+        const matchedText = text.slice(match.start, match.end);
+        const tagId = tags[match.tagIndex].id;
+        const hasClear = !!tags[match.tagIndex].onClear;
+        const clearBtn = hasClear
+            ? `<span data-clear-tag="${tagId}" class="inline-flex w-2.5 h-3 ml-1 cursor-pointer opacity-50 hover:opacity-100" style="vertical-align: middle;"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="pointer-events:none"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>`
+            : '';
+        html += `<span class="bg-surface-sunken/50 border border-border-light py-0.5 px-1.5 rounded" data-tag-id="${tagId}">${applyHighlightsToChunk(matchedText)}${clearBtn}</span>`;
+        lastIndex = match.end;
+    }
+    // Add remaining text (apply secondary highlights)
+    if (lastIndex < text.length) {
+        html += applyHighlightsToChunk(text.slice(lastIndex));
+    }
+    return html;
+}
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    let html = div.innerHTML;
+    html = html.replace(/\\(n|r|.)/g, (match, c) => {
+        const display = c === 'n' ? '↵' : c === 'r' ? '↵' : c;
+        return ('<span style="display: inline; width: 0; height: 0; overflow: hidden; position: absolute;">\\</span>' +
+            display);
+    });
+    return html;
+}
+let lastText = '';
+function applyTextUpdate(newText, newCursorPos) {
+    value = newText;
+    updateDisplay(newText);
+    restoreCursor(newCursorPos);
+    updateCurrentTag(newCursorPos);
+    lastText = newText;
+    isUpdating = false;
+}
+function handleInput() {
+    isUpdating = true;
+    const cursorPos = getCursorPosition();
+    let newText = getTextContent();
+    // Remove any "\." sequences that were added by browser smart punctuation
+    // These would only be created by macOS/browser when user double-presses space
+    if (newText.includes('\\.')) {
+        const cleanedText = newText.replace(/\\\./g, '');
+        const removedCount = (newText.length - cleanedText.length) / 2; // Each "\." is 2 chars
+        applyTextUpdate(cleanedText, cursorPos - removedCount * 2);
+        return;
+    }
+    // Escape any literal newlines (e.g. from Shift+Enter or IME input)
+    if (newText.includes('\n') || newText.includes('\r')) {
+        const before = newText.slice(0, cursorPos);
+        const newlinesBefore = (before.match(/[\n\r]/g) || []).length;
+        const cleanedText = newText.replace(/\r\n/g, '\\n').replace(/[\n\r]/g, '\\n');
+        // Each newline becomes 2 chars (\n), so cursor shifts by +1 per newline before it
+        applyTextUpdate(cleanedText, cursorPos + newlinesBefore);
+        return;
+    }
+    // Check if user just typed an escaped character
+    if (newText.length > lastText.length &&
+        (newText[cursorPos - 1] === ' ' ||
+            newText[cursorPos - 1] === '\u00A0' ||
+            newText[cursorPos - 1] === '\\')) {
+        // Check if there's already an escaped space right before the cursor (e.g., "tag\ |")
+        // If user types another space, just remove the backslash instead of adding "\ \"
+        if ((newText[cursorPos - 1] === ' ' || newText[cursorPos - 1] === '\u00A0') &&
+            newText[cursorPos - 3] === '\\' &&
+            (newText[cursorPos - 2] === ' ' || newText[cursorPos - 2] === '\u00A0')) {
+            // Remove the backslash before the existing space
+            newText = newText.slice(0, cursorPos - 3) + newText.slice(cursorPos - 2);
+            applyTextUpdate(newText, cursorPos - 1);
+            return;
+        }
+        // Escape the space/backslash by adding backslash before it
+        newText = newText.slice(0, cursorPos - 1) + '\\' + newText.slice(cursorPos - 1);
+        applyTextUpdate(newText, cursorPos + 1);
+        return;
+    }
+    applyTextUpdate(newText, cursorPos);
+}
+function getTextSegmentAtCursor(cursorPos) {
+    // Find all tag positions
+    const tagPositions = [];
+    for (const tag of tags) {
+        const regex = new RegExp(tag.regex, 'g');
+        let match;
+        while ((match = regex.exec(value)) !== null) {
+            tagPositions.push({
+                start: match.index,
+                end: match.index + match[0].length
+            });
+        }
+    }
+    // Sort by start position
+    tagPositions.sort((a, b) => a.start - b.start);
+    // Find the text segment containing the cursor
+    let segmentStart = 0;
+    let segmentEnd = value.length;
+    for (const tag of tagPositions) {
+        if (cursorPos <= tag.start) {
+            // Cursor is before this tag
+            segmentEnd = tag.start;
+            break;
+        }
+        else if (cursorPos > tag.end) {
+            // Cursor is after this tag
+            segmentStart = tag.end;
+        }
+        else {
+            // Cursor is inside a tag
+            return null;
+        }
+    }
+    return {
+        text: value.slice(segmentStart, segmentEnd).trim(),
+        start: segmentStart,
+        end: segmentEnd
+    };
+}
+function updateCurrentTag(cursorPos) {
+    let currentTag = null;
+    for (const tag of tags) {
+        const regex = new RegExp(tag.regex, 'g');
+        let match;
+        while ((match = regex.exec(value)) !== null) {
+            const start = match.index;
+            const end = match.index + match[0].length;
+            if (cursorPos >= start && cursorPos <= end) {
+                currentTag = { id: tag.id };
+                onCurrentTagChange?.(currentTag);
+                onTextSegmentAtCursorChange?.({ text: '', start: 0, end: 0 });
+                return;
+            }
+        }
+    }
+    onCurrentTagChange?.(null);
+    // Get text segment at cursor when not in a tag
+    const textSegment = getTextSegmentAtCursor(cursorPos);
+    if (textSegment) {
+        onTextSegmentAtCursorChange?.(textSegment);
+    }
+}
+function handleClick(e) {
+    // Check if the click landed on a clear button
+    const target = e.target;
+    const clearTarget = target?.closest('[data-clear-tag]');
+    if (clearTarget) {
+        const tagId = clearTarget.dataset.clearTag;
+        const tag = tags.find((t) => t.id === tagId);
+        tag?.onClear?.();
+        return;
+    }
+    const cursorPos = getCursorPosition();
+    updateCurrentTag(cursorPos);
+}
+function handleKeyup(e) {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter')
+        return;
+    const cursorPos = getCursorPosition();
+    updateCurrentTag(cursorPos);
+}
+function handleKeyDown(e) {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter')
+        return;
+    const cursorPos = getCursorPosition();
+    const text = getTextContent();
+    // Handle Backspace key to remove escape sequences
+    if (e.key === 'Backspace') {
+        // Check if we're right after an escaped character (e.g., "abc\ |def")
+        // We want to remove both the backslash and the escaped character
+        if (cursorPos >= 2 && text[cursorPos - 2] === '\\') {
+            e.preventDefault();
+            isUpdating = true;
+            const newText = text.slice(0, cursorPos - 2) + text.slice(cursorPos);
+            applyTextUpdate(newText, cursorPos - 2);
+            return;
+        }
+    }
+    // Handle Delete key to remove escape sequences
+    if (e.key === 'Delete') {
+        // Check if the character at cursor position is a backslash (escape character)
+        if (cursorPos < text.length && text[cursorPos] === '\\' && cursorPos + 1 < text.length) {
+            e.preventDefault();
+            isUpdating = true;
+            const newText = text.slice(0, cursorPos) + text.slice(cursorPos + 2);
+            applyTextUpdate(newText, cursorPos);
+            return;
+        }
+    }
+    // Handle arrow key navigation to skip escape sequences
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+        if (e.key === 'ArrowLeft' && cursorPos > 0) {
+            // Moving left: check if we're right after an escaped character (e.g., "abc\ |def")
+            // We want to skip over the backslash and the escaped character
+            if (cursorPos >= 2 && text[cursorPos - 2] === '\\') {
+                e.preventDefault();
+                isUpdating = true;
+                restoreCursor(cursorPos - 2);
+                updateCurrentTag(cursorPos - 2);
+                isUpdating = false;
+                return;
+            }
+        }
+        else if (e.key === 'ArrowRight') {
+            // Moving right: check if we're at a backslash (e.g., "abc|\ def")
+            // We want to skip over the backslash and the escaped character
+            if (cursorPos < text.length && text[cursorPos] === '\\' && cursorPos + 1 < text.length) {
+                e.preventDefault();
+                isUpdating = true;
+                restoreCursor(cursorPos + 2);
+                updateCurrentTag(cursorPos + 2);
+                isUpdating = false;
+                return;
+            }
+            // If user pressed right arrow and is at the end, add a space if needed
+            if (cursorPos === text.length &&
+                text.length > 0 &&
+                ((text[text.length - 1] !== ' ' && text[text.length - 1] !== '\u00A0') ||
+                    text[text.length - 2] === '\\')) {
+                e.preventDefault();
+                isUpdating = true;
+                const newText = text + '\u00A0';
+                applyTextUpdate(newText, newText.length);
+                return;
+            }
+        }
+    }
+}
+function getCursorPosition() {
+    if (!contentEditableDiv)
+        return 0;
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0)
+        return 0;
+    const range = selection.getRangeAt(0);
+    const preCaretRange = range.cloneRange();
+    preCaretRange.selectNodeContents(contentEditableDiv);
+    preCaretRange.setEnd(range.endContainer, range.endOffset);
+    return preCaretRange.toString().length;
+}
+function restoreCursor(position) {
+    if (!contentEditableDiv)
+        return;
+    const selection = window.getSelection();
+    if (!selection)
+        return;
+    let currentPos = 0;
+    let node = null;
+    let offset = 0;
+    function traverse(n) {
+        if (n.nodeType === Node.TEXT_NODE) {
+            const textLength = n.textContent?.length || 0;
+            if (currentPos + textLength >= position) {
+                node = n;
+                offset = position - currentPos;
+                return true;
+            }
+            currentPos += textLength;
+        }
+        else {
+            for (let i = 0; i < n.childNodes.length; i++) {
+                if (traverse(n.childNodes[i])) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    traverse(contentEditableDiv);
+    if (node) {
+        const range = document.createRange();
+        range.setStart(node, offset);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        // Ensure cursor is visible by scrolling if needed
+        ensureCursorVisible();
+    }
+}
+function ensureCursorVisible() {
+    if (!contentEditableDiv)
+        return;
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0)
+        return;
+    const range = selection.getRangeAt(0);
+    const rect = range.getBoundingClientRect();
+    const containerRect = contentEditableDiv.getBoundingClientRect();
+    // Check if cursor is outside the visible area horizontally
+    if (rect.left < containerRect.left) {
+        // Cursor is to the left of visible area
+        contentEditableDiv.scrollLeft -= containerRect.left - rect.left + 10;
+    }
+    else if (rect.right > containerRect.right) {
+        // Cursor is to the right of visible area
+        contentEditableDiv.scrollLeft += rect.right - containerRect.right + 10;
+    }
+}
+function handlePaste(e) {
+    e.preventDefault();
+    let text = e.clipboardData?.getData('text/plain') || '';
+    // Escape backslashes, spaces, and newlines
+    text = text
+        .replace(/\\/g, '\\\\')
+        .replace(/ /g, '\\ ')
+        .replace(/\r\n/g, '\\n')
+        .replace(/[\n\r]/g, '\\n');
+    document.execCommand('insertText', false, text);
+}
+export function focusAtEnd() {
+    if (!contentEditableDiv)
+        return;
+    contentEditableDiv.focus();
+    restoreCursor(value.length);
+    updateCurrentTag(value.length);
+    contentEditableDiv.scrollLeft = contentEditableDiv.scrollWidth;
+}
+</script>
+
+<div
+	bind:this={contentEditableDiv}
+	contenteditable="true"
+	oninput={handleInput}
+	onpaste={handlePaste}
+	onclick={handleClick}
+	onkeydown={handleKeyDown}
+	onkeyup={handleKeyup}
+	class="outline-none text-nowrap pt-[0.45rem] {className}"
+	class:text-hint={value === ''}
+	data-placeholder={placeholder}
+	role="textbox"
+	tabindex="0"
+	spellcheck="false"
+></div>
+
+<style>
+	[contenteditable][data-placeholder]:empty::before {
+		content: attr(data-placeholder);
+	}</style>

package/package/components/TaggedTextInput.svelte.d.ts

@@ -0,0 +1,28 @@
+type $$ComponentProps = {
+    tags: {
+        regex: RegExp;
+        id: string;
+        onClear?: () => void;
+    }[];
+    value?: string;
+    placeholder?: string;
+    highlights?: {
+        regex: RegExp;
+        classes: string;
+    }[];
+    onCurrentTagChange?: (tag: {
+        id: string;
+    } | null) => void;
+    onTextSegmentAtCursorChange?: (segment: {
+        text: string;
+        start: number;
+        end: number;
+    }) => void;
+    class?: string;
+};
+declare const TaggedTextInput: import("svelte").Component<$$ComponentProps, {
+    preventCursorMoveOnNextSync: () => void;
+    focusAtEnd: () => void;
+}, "value">;
+type TaggedTextInput = ReturnType<typeof TaggedTextInput>;
+export default TaggedTextInput;

package/package/components/TemplateEditor.svelte

@@ -1,5 +1,9 @@
 <script module>
 	import '@codingame/monaco-vscode-standalone-typescript-language-features'
+	import {
+		javascriptDefaults,
+		getJavaScriptWorker
+	} from '@codingame/monaco-vscode-standalone-typescript-language-features'
 </script>
 
 <script lang="ts">import { BROWSER } from 'esm-env';
@@ -7,7 +11,7 @@ import { convertKind, createDocumentationString, displayPartsToString, editorCon
 import { createHash } from '../editorLangUtils';
 import libStdContent from '../es6.d.ts.txt?raw';
 import { editor as meditor, Uri as mUri, languages, Range, KeyMod, KeyCode } from 'monaco-editor';
-import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte';
+import { createEventDispatcher, getContext, onDestroy, onMount, untrack } from 'svelte';
 import { writable } from 'svelte/store';
 // import '@codingame/monaco-vscode-standalone-languages'
 // import '@codingame/monaco-vscode-standalone-typescript-language-features'
@@ -318,8 +322,8 @@ export const language = {
         ]
     }
 };
-let divEl = null;
-let editor;
+let divEl = $state(null);
+let editor = $state(undefined);
 let model;
 const { componentControl, selectedComponent } = getContext('AppViewerContext') || { componentControl: writable({}), selectedComponent: writable([]) };
 if ($selectedComponent) {
@@ -330,14 +334,7 @@ if ($selectedComponent) {
         }
     };
 }
-export let code = '';
-export let hash = createHash();
-export let automaticLayout = true;
-export let extraLib = '';
-export let autoHeight = true;
-export let fixedOverflowWidgets = true;
-export let fontSize = 12;
-export let loadAsync = false;
+let { code = $bindable(), hash = createHash(), automaticLayout = true, extraLib = '', autoHeight = true, fixedOverflowWidgets = true, fontSize = 12, loadAsync = false, class: clazz = '' } = $props();
 let yPadding = MONACO_Y_PADDING;
 if (typeof code != 'string') {
     code = '';
@@ -365,9 +362,9 @@ export function getCode() {
 }
 let cip;
 let extraModel;
-let width = 0;
+let width = $state(0);
 // let widgets: HTMLElement | undefined = document.getElementById('monaco-widgets-root') ?? undefined
-let initialized = false;
+let initialized = $state(false);
 let jsLoader = undefined;
 let timeoutModel = undefined;
 async function loadMonaco() {
@@ -380,11 +377,11 @@ async function loadMonaco() {
         create: () => language
     });
     languages.setLanguageConfiguration('template', conf);
-    model = meditor.createModel(code, lang, mUri.parse(uri));
+    model = meditor.createModel(code ?? '', lang, mUri.parse(uri));
     model.updateOptions(updateOptions);
     try {
         editor = meditor.create(divEl, {
-            ...editorConfig(code, lang, automaticLayout, fixedOverflowWidgets, false),
+            ...editorConfig(code ?? '', lang, automaticLayout, fixedOverflowWidgets, false),
             model,
             // overflowWidgetsDomNode: widgets,
             // lineNumbers: 'on',
@@ -401,10 +398,40 @@ async function loadMonaco() {
         console.error('Error loading monaco:', e);
         return;
     }
+    // In VSCode webview (iframe), clipboard operations need special handling
+    // because the webview has restricted clipboard API access
+    if (window.parent !== window) {
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyC, function () {
+            document.execCommand('copy');
+        });
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyX, function () {
+            document.execCommand('cut');
+        });
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyV, async function () {
+            try {
+                const text = await navigator.clipboard.readText();
+                if (text && editor) {
+                    const selection = editor.getSelection();
+                    if (selection) {
+                        editor.executeEdits('paste', [
+                            {
+                                range: selection,
+                                text: text,
+                                forceMoveMarkers: true
+                            }
+                        ]);
+                    }
+                }
+            }
+            catch (e) {
+                document.execCommand('paste');
+            }
+        });
+    }
     editor.onDidFocusEditorText(() => {
         dispatch('focus');
-        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () { });
-        editor.addCommand(KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.Digit7, function () { });
+        editor?.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () { });
+        editor?.addCommand(KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.Digit7, function () { });
     });
     function updateCode() {
         const ncode = getCode();
@@ -423,12 +450,12 @@ async function loadMonaco() {
     extraModel = meditor.createModel('`' + model.getValue() + '`', 'javascript');
     if (autoHeight) {
         const updateHeight = () => {
-            const contentHeight = Math.min(1000, editor.getContentHeight());
+            const contentHeight = Math.min(1000, editor?.getContentHeight() ?? 0);
             if (divEl) {
                 divEl.style.height = `${contentHeight}px`;
             }
             try {
-                editor.layout({ width, height: contentHeight });
+                editor?.layout({ width, height: contentHeight });
             }
             catch { }
         };
@@ -447,7 +474,7 @@ async function loadMonaco() {
     jsLoader = setTimeout(async () => {
         jsLoader = undefined;
         try {
-            const worker = await languages.typescript.getJavaScriptWorker();
+            const worker = await getJavaScriptWorker();
             const client = await worker(extraModel.uri);
             cip = languages.registerCompletionItemProvider('template', {
                 triggerCharacters: ['.'],
@@ -517,8 +544,8 @@ async function loadMonaco() {
 export function focus() {
     editor?.focus();
 }
-let isFocus = false;
-let mounted = false;
+let isFocus = $state(false);
+let mounted = $state(false);
 let loadTimeout = undefined;
 onMount(async () => {
     try {
@@ -539,7 +566,6 @@ onMount(async () => {
         console.error('Error loading monaco:', e);
     }
 });
-$: mounted && extraLib && initialized && loadExtraLib();
 function loadExtraLib() {
     const stdLib = { content: libStdContent, filePath: 'es6.d.ts' };
     const libs = [stdLib];
@@ -549,7 +575,7 @@ function loadExtraLib() {
             filePath: 'windmill.d.ts'
         });
     }
-    languages.typescript.javascriptDefaults.setExtraLibs(libs);
+    javascriptDefaults.setExtraLibs(libs);
 }
 onDestroy(() => {
     try {
@@ -564,16 +590,15 @@ onDestroy(() => {
     }
     catch (err) { }
 });
+$effect(() => {
+    mounted && extraLib && initialized && untrack(() => loadExtraLib());
+});
 </script>
 
 <EditorTheme />
 
 <div
-	class={twMerge(
-		inputBorderClass({ forceFocus: isFocus }),
-		'rounded-md overflow-auto pl-2',
-		$$props.class
-	)}
+	class={twMerge(inputBorderClass({ forceFocus: isFocus }), 'rounded-md overflow-auto pl-2', clazz)}
 >
 	{#if !editor}
 		<FakeMonacoPlaceHolder autoheight showNumbers={false} {code} {fontSize} />