lexgui 8.3.0 → 8.3.1

package/build/lexgui.all.module.js

@@ -12,7 +12,7 @@ const g$2 = globalThis;
 let LX = g$2.LX;
 if (!LX) {
     LX = {
-        version: '8.3.0',
+        version: '8.3.1',
         ready: false,
         extensions: [], // Store extensions used
         extraCommandbarEntries: [], // User specific entries for command bar
@@ -9795,9 +9795,25 @@ LX.toTitleCase = toTitleCase;
  * @param {String} str
  */
 function toKebabCase(str) {
-    return str.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
+    return str
+        .replace(/([A-Z])/g, '-$1')
+        .replace(/[\s_]+/g, '-')
+        .replace(/^-/, '')
+        .toLowerCase();
 }
 LX.toKebabCase = toKebabCase;
+/**
+ * @method toSnakeCase
+ * @param {String} str
+ */
+function toSnakeCase(str) {
+    return str
+        .replace(/([a-z])([A-Z])/g, '$1_$2')
+        .replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2')
+        .replace(/[\s\-]+/g, '_')
+        .toLowerCase();
+}
+LX.toSnakeCase = toSnakeCase;
 /**
  * @method getSupportedDOMName
  * @description Convert a text string to a valid DOM name
@@ -15591,6 +15607,21 @@ class CodeEditor {
         this._inputArea.addEventListener('blur', () => this._setFocused(false));
         this.codeArea.root.addEventListener('mousedown', this._onMouseDown.bind(this));
         this.codeArea.root.addEventListener('contextmenu', this._onMouseDown.bind(this));
+        this.codeArea.root.addEventListener('mouseover', (e) => {
+            const link = e.target.closest('.code-link');
+            if (link && e.ctrlKey)
+                link.classList.add('hovered');
+        });
+        this.codeArea.root.addEventListener('mouseout', (e) => {
+            const link = e.target.closest('.code-link');
+            if (link)
+                link.classList.remove('hovered');
+        });
+        this.codeArea.root.addEventListener('mousemove', (e) => {
+            const link = e.target.closest('.code-link');
+            if (link)
+                link.classList.toggle('hovered', e.ctrlKey);
+        });
         // Bottom status panel
         this.statusPanel = this._createStatusPanel(options);
         if (this.statusPanel) {
@@ -15678,18 +15709,148 @@ class CodeEditor {
         }
     }
     ;
-    setText(text) {
+    setText(text, language, detectLang = false) {
         if (!this.currentTab)
             return;
         this.doc.setText(text);
         this.cursorSet.set(0, 0);
         this.undoManager.clear();
         this._lineStates = [];
+        if (language) {
+            this.setLanguage(language);
+        }
+        else if (detectLang) {
+            const detected = this._detectLanguage(text);
+            if (detected)
+                this.setLanguage(detected);
+        }
         this._renderAllLines();
         this._renderCursors();
         this._renderSelections();
         this.resize(true);
     }
+    _detectLanguage(text) {
+        const scores = {};
+        const add = (lang, pts) => { scores[lang] = (scores[lang] ?? 0) + pts; };
+        // Score using reservedWords from each registered language
+        const textWords = new Set(text.match(/\b\w+\b/g) ?? []);
+        const totalWords = Math.max(textWords.size, 1);
+        for (const langName of Tokenizer.getRegisteredLanguages()) {
+            const langDef = Tokenizer.getLanguage(langName);
+            if (!langDef?.reservedWords?.length)
+                continue;
+            let hits = 0;
+            for (const word of langDef.reservedWords) {
+                if (textWords.has(word))
+                    hits++;
+            }
+            if (hits > 0) {
+                const vocabRatio = hits / langDef.reservedWords.length;
+                const textRatio = hits / totalWords;
+                add(langName, Math.round((vocabRatio + textRatio) * 40));
+            }
+        }
+        // Add scores based on "important" structural words only
+        // HTML
+        if (/<!DOCTYPE\s+html/i.test(text))
+            add('HTML', 20);
+        if (/<html[\s>]/i.test(text))
+            add('HTML', 15);
+        if (/<\/?(div|span|body|head|script|style|meta)\b/i.test(text))
+            add('HTML', 8);
+        // JSON — must come before JS checks (starts with { or [)
+        if (/^\s*[\[{]/.test(text) && /"\s*:\s*/.test(text) && !/function|=>|const|var|let/.test(text))
+            add('JSON', 15);
+        // CSS
+        if (/[\w-]+\s*:\s*[\w#\d"'(]+.*;/.test(text) && /[{}]/.test(text) && !/<\w+/.test(text))
+            add('CSS', 10);
+        if (/@(media|keyframes|import|charset|font-face)\b/.test(text))
+            add('CSS', 15);
+        // WGSL
+        if (/@(vertex|fragment|compute|group|binding|builtin)\b/.test(text))
+            add('WGSL', 20);
+        if (/\bfn\s+\w+\s*\(/.test(text) && /\bvar\b/.test(text))
+            add('WGSL', 10);
+        if (/\b(vec2f|vec3f|vec4f|mat4x4f|f32|u32|i32)\b/.test(text))
+            add('WGSL', 12);
+        // GLSL
+        if (/\b(gl_Position|gl_FragColor|gl_FragCoord)\b/.test(text))
+            add('GLSL', 20);
+        if (/\b(uniform|varying|attribute)\s+\w/.test(text))
+            add('GLSL', 10);
+        if (/\b(vec2|vec3|vec4|mat4|sampler2D)\b/.test(text) && !/vec2f|vec3f/.test(text))
+            add('GLSL', 8);
+        // HLSL
+        if (/\b(SV_Position|SV_Target|SV_Depth)\b/.test(text))
+            add('HLSL', 20);
+        if (/\b(cbuffer|tbuffer|float4|float3|float2|Texture2D)\b/.test(text))
+            add('HLSL', 12);
+        // Python
+        if (/^\s*def\s+\w+\s*\(/m.test(text))
+            add('Python', 15);
+        if (/^\s*import\s+\w/m.test(text) && !/\bfrom\s+['"]/.test(text))
+            add('Python', 8);
+        if (/^\s*class\s+\w+(\s*\(.*\))?:/m.test(text))
+            add('Python', 10);
+        if (/\bprint\s*\(/.test(text) && /:\s*$/.test(text))
+            add('Python', 5);
+        if (/elif\b|lambda\b|self\.\w/.test(text))
+            add('Python', 8);
+        // Rust
+        if (/\bfn\s+\w+\s*\(/.test(text) && /\blet\s+mut\b/.test(text))
+            add('Rust', 15);
+        if (/\b(impl|trait|enum|struct)\s+\w+/.test(text) && /\bfn\b/.test(text))
+            add('Rust', 12);
+        if (/use\s+std::|use\s+\w+::\w+/.test(text))
+            add('Rust', 10);
+        if (/println!\s*\(/.test(text))
+            add('Rust', 8);
+        // C++
+        if (/#include\s*<[\w./]+>/.test(text))
+            add('C++', 15);
+        if (/\bstd::\w+/.test(text))
+            add('C++', 12);
+        if (/\b(class|template|namespace|nullptr|new\s+\w)\b/.test(text))
+            add('C++', 8);
+        if (/(::|->)\w+/.test(text))
+            add('C++', 6);
+        // C
+        if (/#include\s*<[\w.]+\.h>/.test(text))
+            add('C', 12);
+        if (/\bint\s+main\s*\(/.test(text))
+            add('C', 15);
+        if (/\b(printf|scanf|malloc|free|sizeof)\s*\(/.test(text))
+            add('C', 10);
+        // TypeScript — before JS (is a superset)
+        if (/:\s*(string|number|boolean|void|any|never|unknown)\b/.test(text))
+            add('TypeScript', 12);
+        if (/\binterface\s+\w+/.test(text))
+            add('TypeScript', 12);
+        if (/\btype\s+\w+\s*=/.test(text))
+            add('TypeScript', 10);
+        if (/\bas\s+(string|number|any|unknown)\b/.test(text))
+            add('TypeScript', 8);
+        if (/\benum\s+\w+\s*\{/.test(text))
+            add('TypeScript', 8);
+        // JavaScript
+        if (/\b(const|let|var)\s+\w+\s*=/.test(text))
+            add('JavaScript', 8);
+        if (/=>\s*[\w{(]/.test(text))
+            add('JavaScript', 6);
+        if (/\b(import|export)\s+(default|{|\*)/.test(text))
+            add('JavaScript', 8);
+        if (/\bconsole\.(log|warn|error)\b/.test(text))
+            add('JavaScript', 6);
+        // Markdown
+        if (/^#{1,6}\s+\S/m.test(text))
+            add('Markdown', 12);
+        if (/\*\*\w.*?\*\*/.test(text) || /\[.+\]\(.+\)/.test(text))
+            add('Markdown', 8);
+        if (/^```\w*/m.test(text))
+            add('Markdown', 10);
+        const best = Object.entries(scores).sort((a, b) => b[1] - a[1])[0];
+        return best && best[1] >= 8 ? best[0] : null;
+    }
     appendText(text) {
         const cursor = this.cursorSet.getPrimary();
         const { line, col } = cursor.head;
@@ -16188,8 +16349,8 @@ class CodeEditor {
             : Tokenizer.initialState();
         const lineText = this.doc.getLine(lineIndex);
         const result = Tokenizer.tokenizeLine(lineText, this.language, prevState);
-        // Build HTML
         const langClass = this.language.name.toLowerCase().replace(/[^a-z]/g, '');
+        const URL_REGEX = /(https?:\/\/[^\s"'<>)\]]+)/g;
         let html = '';
         for (const token of result.tokens) {
             const cls = TOKEN_CLASS_MAP[token.type];
@@ -16197,11 +16358,15 @@ class CodeEditor {
                 .replace(/&/g, '&amp;')
                 .replace(/</g, '&lt;')
                 .replace(/>/g, '&gt;');
+            // Wrap URLs in comment tokens with a clickable span
+            const content = (token.type === 'comment')
+                ? escaped.replace(URL_REGEX, `<span class="code-link" data-url="$1">$1</span>`)
+                : escaped;
             if (cls) {
-                html += `<span class="${cls} ${langClass}">${escaped}</span>`;
+                html += `<span class="${cls} ${langClass}">${content}</span>`;
             }
             else {
-                html += escaped;
+                html += content;
             }
         }
         return { html: html || '&nbsp;', endState: result.state, tokens: result.tokens };
@@ -17031,11 +17196,25 @@ class CodeEditor {
             const { line, col } = cursor.head;
             const indent = this.doc.getIndent(line);
             const spaces = ' '.repeat(indent);
-            const op = this.doc.insert(line, col, '\n' + spaces);
-            this.undoManager.record(op, this.cursorSet.getCursorPositions());
-            cursor.head = { line: line + 1, col: indent };
-            cursor.anchor = { ...cursor.head };
-            this.cursorSet.adjustOthers(idx, line, col, 0, 1);
+            const charBefore = this.doc.getCharAt(line, col - 1);
+            const charAfter = this.doc.getCharAt(line, col);
+            const OPEN_CLOSE = { '{': '}', '[': ']', '(': ')' };
+            if (charBefore && charAfter && OPEN_CLOSE[charBefore] === charAfter) {
+                const innerSpaces = ' '.repeat(indent + this.tabSize);
+                const insertion = '\n' + innerSpaces + '\n' + spaces;
+                const op = this.doc.insert(line, col, insertion);
+                this.undoManager.record(op, this.cursorSet.getCursorPositions());
+                cursor.head = { line: line + 1, col: indent + this.tabSize };
+                cursor.anchor = { ...cursor.head };
+                this.cursorSet.adjustOthers(idx, line, col, 0, 2);
+            }
+            else {
+                const op = this.doc.insert(line, col, '\n' + spaces);
+                this.undoManager.record(op, this.cursorSet.getCursorPositions());
+                cursor.head = { line: line + 1, col: indent };
+                cursor.anchor = { ...cursor.head };
+                this.cursorSet.adjustOthers(idx, line, col, 0, 1);
+            }
         }
         this._rebuildLines();
         this._afterCursorMove();
@@ -17049,8 +17228,36 @@ class CodeEditor {
         for (const idx of this.cursorSet.sortedIndicesBottomUp()) {
             const cursor = this.cursorSet.cursors[idx];
             const { line, col } = cursor.head;
-            if (shift) {
-                // Dedent: remove up to tabSize spaces from start
+            const anchorLine = cursor.anchor.line;
+            // Multiline selection: indent/dedent all lines in the selection
+            const startLine = Math.min(line, anchorLine);
+            const endLine = Math.max(line, anchorLine);
+            const isMultiline = startLine !== endLine;
+            if (isMultiline) {
+                for (let i = startLine; i <= endLine; i++) {
+                    if (shift) {
+                        const lineText = this.doc.getLine(i);
+                        let spacesToRemove = 0;
+                        while (spacesToRemove < this.tabSize && spacesToRemove < lineText.length && lineText[spacesToRemove] === ' ') {
+                            spacesToRemove++;
+                        }
+                        if (spacesToRemove > 0) {
+                            const op = this.doc.delete(i, 0, spacesToRemove);
+                            this.undoManager.record(op, this.cursorSet.getCursorPositions());
+                        }
+                    }
+                    else {
+                        const spaces = ' '.repeat(this.tabSize);
+                        const op = this.doc.insert(i, 0, spaces);
+                        this.undoManager.record(op, this.cursorSet.getCursorPositions());
+                    }
+                }
+                const delta = shift ? -this.tabSize : this.tabSize;
+                cursor.head = { line, col: Math.max(0, col + delta) };
+                cursor.anchor = { line: anchorLine, col: Math.max(0, cursor.anchor.col + delta) };
+            }
+            else if (shift) {
+                // Single line dedent: remove up to tabSize spaces from start
                 const lineText = this.doc.getLine(line);
                 let spacesToRemove = 0;
                 while (spacesToRemove < this.tabSize && spacesToRemove < lineText.length && lineText[spacesToRemove] === ' ') {
@@ -17065,6 +17272,7 @@ class CodeEditor {
                 }
             }
             else {
+                // Single line indent: insert spaces at cursor
                 const spacesToAdd = this.tabSize - (col % this.tabSize);
                 const spaces = ' '.repeat(spacesToAdd);
                 const op = this.doc.insert(line, col, spaces);
@@ -17098,8 +17306,10 @@ class CodeEditor {
             this.cursorSet.adjustOthers(idx, start.line, start.col, -colDelta, -linesRemoved);
             anyDeleted = true;
         }
-        if (anyDeleted)
+        if (anyDeleted) {
             this._rebuildLines();
+            this._doHideAutocomplete();
+        }
     }
     // Clipboard helpers:
     _doCopy() {
@@ -17213,6 +17423,15 @@ class CodeEditor {
             return;
         if (this.autocomplete && this.autocomplete.contains(e.target))
             return;
+        // Ctrl+click: open link if cursor is over a code-link span
+        if (e.ctrlKey && e.button === 0) {
+            const target = e.target;
+            const link = target.closest('.code-link');
+            if (link?.dataset.url) {
+                window.open(link.dataset.url, '_blank');
+                return;
+            }
+        }
         e.preventDefault(); // Prevent browser from stealing focus from _inputArea
         this._wasPaired = false;
         // Calculate line and column from click position
@@ -17330,9 +17549,9 @@ class CodeEditor {
         }
         const suggestions = [];
         const added = new Set();
-        const addSuggestion = (label, kind, scope, detail) => {
+        const addSuggestion = (label, kind, scope, detail, insertText) => {
             if (!added.has(label)) {
-                suggestions.push({ label, kind, scope, detail });
+                suggestions.push({ label, kind, scope, detail, insertText });
                 added.add(label);
             }
         };
@@ -17354,8 +17573,9 @@ class CodeEditor {
             const label = typeof suggestion === 'string' ? suggestion : suggestion.label;
             const kind = typeof suggestion === 'object' ? suggestion.kind : undefined;
             const detail = typeof suggestion === 'object' ? suggestion.detail : undefined;
+            const insertText = typeof suggestion === 'object' ? suggestion.insertText : suggestion;
             if (label.toLowerCase().startsWith(word.toLowerCase())) {
-                addSuggestion(label, kind, undefined, detail);
+                addSuggestion(label, kind, undefined, detail, insertText);
             }
         }
         // Close autocomplete if no suggestions
@@ -17375,6 +17595,7 @@ class CodeEditor {
         // Render suggestions
         suggestions.forEach((suggestion, index) => {
             const item = document.createElement('pre');
+            item.insertText = suggestion.insertText ?? suggestion.label;
             if (index === this._selectedAutocompleteIndex)
                 item.classList.add('selected');
             const currSuggestion = suggestion.label;
@@ -17493,8 +17714,8 @@ class CodeEditor {
      * Insert the selected autocomplete word at cursor.
      */
     _doAutocompleteWord() {
-        const word = this._getSelectedAutoCompleteWord();
-        if (!word)
+        const text = this._getSelectedAutoCompleteWord();
+        if (!text)
             return;
         const cursor = this.cursorSet.getPrimary().head;
         const { start, end } = this._getWordAtCursor();
@@ -17504,8 +17725,14 @@ class CodeEditor {
             const deleteOp = this.doc.delete(line, start, end - start);
             this.undoManager.record(deleteOp, cursorsBefore);
         }
-        const insertOp = this.doc.insert(line, start, word);
-        this.cursorSet.set(line, start + word.length);
+        const insertOp = this.doc.insert(line, start, text);
+        const insertedLines = text.split(/\r?\n/);
+        if (insertedLines.length === 1) {
+            this.cursorSet.set(line, start + text.length);
+        }
+        else {
+            this.cursorSet.set(line + insertedLines.length - 1, insertedLines[insertedLines.length - 1].length);
+        }
         const cursorsAfter = this.cursorSet.getCursorPositions();
         this.undoManager.record(insertOp, cursorsAfter);
         this._rebuildLines();
@@ -17516,15 +17743,7 @@ class CodeEditor {
         if (!this.autocomplete || !this._isAutoCompleteActive)
             return null;
         const pre = this.autocomplete.childNodes[this._selectedAutocompleteIndex];
-        var word = '';
-        for (let childSpan of pre.childNodes) {
-            const span = childSpan;
-            if (span.constructor != HTMLSpanElement || span.classList.contains('kind')) {
-                continue;
-            }
-            word += span.textContent;
-        }
-        return word;
+        return pre.insertText;
     }
     _afterCursorMove() {
         this._renderCursors();
@@ -17557,7 +17776,8 @@ class CodeEditor {
     _resetGutter() {
         // Use cached value or compute if not available (e.g., on initial load)
         const tabsHeight = this._cachedTabsHeight || (this.tabs?.root.getBoundingClientRect().height ?? 0);
-        this.lineGutter.style.height = `calc(100% - ${tabsHeight}px)`;
+        const statusPanelHeight = this._cachedStatusPanelHeight || (this.statusPanel?.root.getBoundingClientRect().height ?? 0);
+        this.lineGutter.style.height = `calc(100% - ${tabsHeight + statusPanelHeight}px)`;
     }
     getMaxLineLength() {
         if (!this.currentTab)
@@ -27585,8 +27805,7 @@ class VideoEditor {
         }
         else {
             [videoArea, controlsArea] = area.split({ type: 'vertical',
-                sizes: [controlsOptions.height ? `calc(100% - ${controlsOptions.height})` : '85%', null], minimizable: false,
-                resize: false });
+                sizes: [controlsOptions.height ? `calc(100% - ${controlsOptions.height})` : '85%', null], minimizable: false, resize: false });
         }
         controlsArea.root.classList.add('lexconstrolsarea');
         this.cropArea = document.createElement('div');