lexgui 8.2.3 → 8.2.5

package/build/lexgui.all.module.js

@@ -12,7 +12,7 @@ const g$2 = globalThis;
 let LX = g$2.LX;
 if (!LX) {
     LX = {
-        version: '8.2.3',
+        version: '8.2.5',
         ready: false,
         extensions: [], // Store extensions used
         extraCommandbarEntries: [], // User specific entries for command bar
@@ -1716,8 +1716,8 @@ class TextInput extends BaseComponent$1 {
             }
             wValue.style.textAlign = options.float ?? '';
             wValue.addEventListener('transitionstart', (e) => {
-                if (e.propertyName === 'background-color' &&
-                    wValue.matches(':-webkit-autofill')) {
+                if (e.propertyName === 'background-color'
+                    && wValue.matches(':-webkit-autofill')) {
                     this.syncFromDOM();
                 }
             });
@@ -2221,10 +2221,10 @@ class Checkbox extends BaseComponent$1 {
             const realNameWidth = this.root.domName?.style.width ?? '0px';
             container.style.width = options.inputWidth ?? `calc( 100% - ${realNameWidth})`;
         };
-        var container = document.createElement('div');
+        let container = document.createElement('div');
         container.className = 'flex items-center gap-2 my-0 mx-auto [&_span]:truncate [&_span]:flex-auto-fill';
         this.root.appendChild(container);
-        let checkbox = LX.makeElement('input', LX.mergeClass('lexcheckbox rounded-xl', options.className ?? 'primary'));
+        let checkbox = LX.makeElement('input', LX.mergeClass('lexcheckbox rounded-xl disabled:pointer-events-none disabled:opacity-50', options.className ?? 'primary'));
         checkbox.type = 'checkbox';
         checkbox.checked = value;
         checkbox.disabled = this.disabled;
@@ -3037,8 +3037,8 @@ class Counter extends BaseComponent$1 {
             if (e.shiftKey)
                 mult *= 10;
             this.set(this.count + mult, false, e);
-        }, { disabled: this.disabled, className: `p-0 ${this.disabled ? '' : 'hover:bg-secondary'} rounded-r-lg`,
-            buttonClass: 'px-0 bg-none h-7', icon: 'Plus' });
+        }, { disabled: this.disabled, className: `p-0 ${this.disabled ? '' : 'hover:bg-secondary'} rounded-r-lg`, buttonClass: 'px-0 bg-none h-7',
+            icon: 'Plus' });
         container.appendChild(addButton.root);
     }
 }
@@ -3797,7 +3797,8 @@ class DatePicker extends BaseComponent$1 {
                 const calendarIcon = LX.makeIcon('Calendar');
                 const calendarButton = new Button(null, d1, () => {
                     this._popover = new Popover(calendarButton.root, [this.calendar]);
-                }, { disabled: this.disabled, buttonClass: `outline flex flex-row px-3 ${emptyDate ? '' : 'text-muted-foreground'} justify-between` });
+                }, { disabled: this.disabled,
+                    buttonClass: `outline flex flex-row px-3 ${emptyDate ? '' : 'text-muted-foreground'} justify-between` });
                 calendarButton.root.querySelector('button').appendChild(calendarIcon);
                 calendarButton.root.style.width = '100%';
                 container.appendChild(calendarButton.root);
@@ -4299,6 +4300,8 @@ class Form extends BaseComponent$1 {
         }
         // This is basically the "submit" button
         this.primaryButton = new Button(null, options.primaryActionName ?? 'Submit', (value, event) => {
+            // Force sync before testing text patterns
+            this.syncInputs();
             const errors = [];
             for (let entry in data) {
                 let entryData = data[entry];
@@ -4381,7 +4384,8 @@ class Layers extends BaseComponent$1 {
             }
             for (let bit = 0; bit < maxBits; ++bit) {
                 let layer = document.createElement('button');
-                layer.className = `lexlayer size-6 text-secondary-foreground text-center content-center place-self-center cursor-pointer font-semibold text-xs rounded-lg select-none 
+                layer.className =
+                    `lexlayer size-6 text-secondary-foreground text-center content-center place-self-center cursor-pointer font-semibold text-xs rounded-lg select-none 
                     disabled:pointer-events-none disabled:opacity-50`;
                 layer.disabled = this.disabled;
                 if (val != undefined) {
@@ -4978,6 +4982,7 @@ class NodeTree {
         item.id = LX.getSupportedDOMName(node.id);
         item.tabIndex = '0';
         item.treeData = node;
+        node.treeEl = item;
         // Select hierarchy icon
         let icon = (this.options.skipDefaultIcon ?? true) ? null : 'Dot'; // Default: no childs
         if (isParent) {
@@ -5460,21 +5465,45 @@ class NodeTree {
             el.focus();
         }
     }
-    select(id) {
+    /* 'path' here helps to identity the correct item based on its parent path, for same 'id' issues */
+    select(id, path) {
         const nodeFilter = this.domEl.querySelector('.lexnodetreefilter');
         if (nodeFilter) {
             nodeFilter.value = '';
         }
         this.refresh(null, id);
         this.domEl.querySelectorAll('.selected').forEach((i) => i.classList.remove('selected'));
-        // Unselect
-        if (!id) {
-            this.selected.length = 0;
-            return;
+        if (id === undefined) {
+            // if no id, try with the path
+            if (path !== undefined) {
+                id = path.at(-1);
+            }
+            else {
+                // Unselect
+                this.selected.length = 0;
+                return;
+            }
+        }
+        let el = null;
+        if (path !== undefined) {
+            let sourceData = this.data;
+            for (const p of path) {
+                const pItem = sourceData.children.find((item) => item.id === p);
+                if (!pItem)
+                    break;
+                sourceData = pItem;
+            }
+            el = sourceData.treeEl;
+            console.assert(el, 'NodeTree: No domEl in item ' + id);
+        }
+        else if (id !== undefined) {
+            // Element should exist, since tree was refreshed to show it
+            el = this.domEl.querySelector('#' + LX.getSupportedDOMName(id));
+            console.assert(el, "NodeTree: Can't select node " + id);
+        }
+        if (!el) {
+            console.assert(el, "NodeTree: Can't select node " + id);
         }
-        // Element should exist, since tree was refreshed to show it
-        const el = this.domEl.querySelector('#' + LX.getSupportedDOMName(id));
-        console.assert(el, "NodeTree: Can't select node " + id);
         el.classList.add('selected');
         this.selected = [el.treeData];
         el.focus();
@@ -7276,7 +7305,8 @@ class Tags extends BaseComponent$1 {
             tagsContainer.innerHTML = '';
             for (let i = 0; i < value.length; ++i) {
                 const tagName = value[i];
-                const tag = LX.makeElement('span', 'lextag bg-primary px-2 py-1 rounded-xl min-w-2 justify-center text-primary-foreground gap-1 text-sm select-none', tagName);
+                const tagClass = LX.mergeClass('lextag bg-primary px-2 py-1 rounded-xl min-w-2 justify-center text-primary-foreground gap-1 text-sm select-none', options.tagClass);
+                const tag = LX.makeElement('span', tagClass, tagName);
                 if (!this.disabled) {
                     const removeButton = LX.makeIcon('X', { svgClass: 'sm' });
                     tag.appendChild(removeButton);
@@ -7339,7 +7369,7 @@ class TextArea extends BaseComponent$1 {
         container.className = 'lextextarea';
         container.style.display = 'flex';
         this.root.appendChild(container);
-        let wValue = LX.makeElement('textarea', options.inputClass ?? '');
+        let wValue = LX.makeElement('textarea', LX.mergeClass('w-full text-sm text-foreground bg-card border-color disabled:pointer-events-none disabled:opacity-50 rounded-lg outline-none pad-md', options.inputClass ?? ''));
         wValue.value = value ?? '';
         wValue.style.textAlign = options.float ?? '';
         wValue.disabled = this.disabled;
@@ -7355,9 +7385,18 @@ class TextArea extends BaseComponent$1 {
             wValue.setAttribute('placeholder', options.placeholder);
         }
         const trigger = options.trigger ?? 'default';
+        const submitOnEnterKey = options.submitOnEnterKey ?? true;
         if (trigger == 'default') {
+            wValue.addEventListener('keydown', function (e) {
+                if (submitOnEnterKey && e.key == 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    return false;
+                }
+            });
             wValue.addEventListener('keyup', function (e) {
-                if (e.key == 'Enter') {
+                if ((submitOnEnterKey && e.key == 'Enter' && !e.shiftKey)
+                    || e.key == 'Escape') {
+                    e.preventDefault();
                     wValue.blur();
                 }
             });
@@ -7446,7 +7485,7 @@ class Toggle extends BaseComponent$1 {
         var container = document.createElement('div');
         container.className = 'flex flex-row gap-2 items-center';
         this.root.appendChild(container);
-        let toggle = LX.makeElement('input', LX.mergeClass('lextoggle relative inline-grid place-content-center cursor-pointer shrink-0 select-none', options.className));
+        let toggle = LX.makeElement('input', LX.mergeClass('lextoggle relative inline-grid place-content-center cursor-pointer shrink-0 select-none disabled:pointer-events-none disabled:opacity-50', options.className));
         toggle.type = 'checkbox';
         toggle.checked = value;
         toggle.iValue = value;
@@ -10841,29 +10880,37 @@ function prompt(text, title, callback, options = {}) {
     options.modal = true;
     options.className = 'prompt';
     let value = '';
+    const _submitFn = () => {
+        if (options.required && value === '') {
+            text += text.includes('You must fill the input text.') ? '' : '\nYou must fill the input text.';
+            dialog.close();
+            prompt(text, title, callback, options);
+        }
+        else {
+            if (callback)
+                callback.call(LX, value);
+            dialog.close();
+        }
+    };
     const dialog = new LX.Dialog(title, (p) => {
-        p.addTextArea(null, text, null, { disabled: true, fitHeight: true });
+        LX.makeElement('p', 'max-h-64 p-2 break-word overflow-scroll', text, p);
         if (options.input ?? true) {
-            p.addText(null, options.input || value, (v) => value = v, { placeholder: '...' });
+            p.addText(null, options.input || value, (v, e) => {
+                value = v;
+                if (e?.constructor === KeyboardEvent) {
+                    _submitFn();
+                }
+            }, { placeholder: '...' });
         }
         p.sameLine(2);
         p.addButton(null, 'Cancel', () => {
             if (options.on_cancel)
                 options.on_cancel();
             dialog.close();
-        });
+        }, { width: '50%', buttonClass: 'destructive' });
         p.addButton(null, options.accept || 'Continue', () => {
-            if (options.required && value === '') {
-                text += text.includes('You must fill the input text.') ? '' : '\nYou must fill the input text.';
-                dialog.close();
-                prompt(text, title, callback, options);
-            }
-            else {
-                if (callback)
-                    callback.call(LX, value);
-                dialog.close();
-            }
-        }, { buttonClass: 'primary' });
+            _submitFn();
+        }, { width: '50%', buttonClass: 'primary' });
     }, options);
     // Focus text prompt
     if (options.input ?? true) {
@@ -11705,7 +11752,7 @@ class AlertDialog extends Dialog$1 {
         options.modal = true;
         super(undefined, (p) => {
             p.root.className = LX.mergeClass(p.root.className, 'pad-2xl flex flex-col gap-2');
-            LX.makeContainer(['100%', '100%'], 'text-lg font-medium text-foreground', title, p);
+            LX.makeContainer(['100%', '100%'], 'text-lg font-medium text-foreground px-2', title, p);
             p.addTextArea(null, message, null, { disabled: true, fitHeight: true, inputClass: 'bg-none text-sm text-muted-foreground' });
             p.sameLine(2, 'justify-end');
             p.addButton(null, options.cancelText ?? 'Cancel', () => this.destroy(), {
@@ -14015,7 +14062,7 @@ class AssetView {
     rootItem;
     path = [];
     rootPath = '';
-    selectedItem = undefined;
+    selectedItems = [];
     allowedTypes;
     searchValue = '';
     filter = 'None';
@@ -14027,7 +14074,8 @@ class AssetView {
     skipPreview = false;
     useNativeTitle = false;
     onlyFolders = true;
-    allowMultipleSelection = false;
+    allowMultipleSelection = true;
+    allowItemCheck = false;
     previewActions = [];
     contextMenu = [];
     itemContextMenuOptions = null;
@@ -14067,6 +14115,7 @@ class AssetView {
         this.useNativeTitle = options.useNativeTitle ?? this.useNativeTitle;
         this.onlyFolders = options.onlyFolders ?? this.onlyFolders;
         this.allowMultipleSelection = options.allowMultipleSelection ?? this.allowMultipleSelection;
+        this.allowItemCheck = options.allowItemCheck ?? this.allowItemCheck;
         this.previewActions = options.previewActions ?? [];
         this.itemContextMenuOptions = options.itemContextMenuOptions;
         this.gridScale = options.gridScale ?? this.gridScale;
@@ -14163,9 +14212,9 @@ class AssetView {
         if (!this.useNativeTitle) {
             let desc = document.createElement('span');
             desc.className = 'lexitemdesc';
-            desc.id = `floatingTitle_${metadata.uid}`;
+            desc.id = LX.getSupportedDOMName(`floatingTitle_${metadata.uid}`);
             desc.innerHTML = `File: ${item.id}<br>Type: ${type}`;
-            LX.insertChildAtIndex(this.content, desc, childIndex ? childIndex + 1 : undefined);
+            LX.insertChildAtIndex(this.content, desc, childIndex !== undefined ? childIndex + 1 : undefined);
             itemEl.addEventListener('mousemove', (e) => {
                 if (!isGridLayout) {
                     return;
@@ -14191,7 +14240,7 @@ class AssetView {
         else {
             itemEl.title = type + ': ' + item.id;
         }
-        if (this.allowMultipleSelection) {
+        if (this.allowItemCheck) {
             let checkbox = document.createElement('input');
             checkbox.type = 'checkbox';
             checkbox.className = 'lexcheckbox';
@@ -14280,11 +14329,12 @@ class AssetView {
             e.stopPropagation();
             const isDoubleClick = e.detail == LX.MOUSE_DOUBLE_CLICK;
             if (!isDoubleClick) {
-                if (!e.shiftKey) {
+                if (!e.shiftKey || !that.allowMultipleSelection) {
                     that.content.querySelectorAll('.lexassetitem').forEach((i) => i.classList.remove('selected'));
+                    that.selectedItems.length = 0;
                 }
                 this.classList.add('selected');
-                that.selectedItem = item;
+                that.selectedItems.push(item);
                 if (!that.skipPreview) {
                     that._previewAsset(item);
                 }
@@ -14316,36 +14366,44 @@ class AssetView {
             e.preventDefault();
             e.stopImmediatePropagation();
             e.stopPropagation();
-            const multiple = that.content.querySelectorAll('.selected').length;
+            const multipleSelection = that.selectedItems.length > 1;
             const options = [
                 {
-                    name: (multiple > 1) ? (multiple + ' selected') : item.id,
+                    name: multipleSelection ? (`${that.selectedItems.length} selected`) : item.id,
                     icon: LX.makeIcon('CircleSmall', { svgClass: `fill-current text-${typeColor}` }),
                     className: 'text-sm',
                     disabled: true
                 },
                 null
             ];
-            if (multiple <= 1) {
+            // By now, allow with none/single selected items
+            if (!multipleSelection) {
                 options.push({ name: 'Rename', icon: 'TextCursor', callback: that._renameItemPopover.bind(that, item) });
             }
-            if (!isFolder) {
+            // By now, allow with none/single selected items
+            if (!isFolder && !multipleSelection) {
                 options.push({ name: 'Clone', icon: 'Copy', callback: that._requestCloneItem.bind(that, item) });
             }
-            options.push({ name: 'Move', icon: 'FolderInput', callback: () => that._moveItem(item) });
-            if (type == 'Script' && LX.has('CodeEditor')) {
+            // By now, allow with none/single selected items
+            if (!multipleSelection) {
+                options.push({ name: 'Move', icon: 'FolderInput', callback: () => that._moveItem(item) });
+            }
+            // By now, allow with none/single selected items
+            if (!multipleSelection && type == 'Script' && LX.has('CodeEditor')) {
                 options.push({ name: 'Open in Editor', icon: 'Code', callback: that._openScriptInEditor.bind(that, item) });
             }
             if (that.itemContextMenuOptions) {
-                options.push(null);
+                if (options.length > 2)
+                    options.push(null);
                 for (let o of that.itemContextMenuOptions) {
                     if (!o.name || !o.callback)
                         continue;
-                    options.push({ name: o.name, icon: o.icon, callback: o.callback?.bind(that, item) });
+                    options.push({ name: o.name, icon: o.icon,
+                        callback: o.callback?.bind(that, multipleSelection ? that.selectedItems : [item]) });
                 }
             }
             options.push(null, { name: 'Delete', icon: 'Trash2', className: 'destructive',
-                callback: that._requestDeleteItem.bind(that, item) });
+                callback: that._requestDeleteItem.bind(that, multipleSelection ? that.selectedItems : [item]) });
             LX.addClass(that.contentPanel.root, 'pointer-events-none');
             LX.addDropdownMenu(e.target, options, { side: 'right', align: 'start', event: e, onBlur: () => {
                     LX.removeClass(that.contentPanel.root, 'pointer-events-none');
@@ -14376,7 +14434,8 @@ class AssetView {
                 e.dataTransfer.setDragImage(img, 0, 0);
                 e.dataTransfer.effectAllowed = 'move';
             }
-            const desc = that.content.querySelector(`#floatingTitle_${metadata.uid}`);
+            const domName = LX.getSupportedDOMName(`floatingTitle_${metadata.uid}`);
+            const desc = that.content.querySelector(`#${domName}`);
             if (desc)
                 desc.style.display = 'none';
         }, false);
@@ -14411,7 +14470,8 @@ class AssetView {
         });
         itemEl.addEventListener('mouseenter', (e) => {
             if (!that.useNativeTitle && isGridLayout) {
-                const desc = that.content.querySelector(`#floatingTitle_${metadata.uid}`);
+                const domName = LX.getSupportedDOMName(`floatingTitle_${metadata.uid}`);
+                const desc = that.content.querySelector(`#${domName}`);
                 if (desc)
                     desc.style.display = 'unset';
             }
@@ -14425,7 +14485,8 @@ class AssetView {
         itemEl.addEventListener('mouseleave', (e) => {
             if (!that.useNativeTitle && isGridLayout) {
                 setTimeout(() => {
-                    const desc = that.content.querySelector(`#floatingTitle_${metadata.uid}`);
+                    const domName = LX.getSupportedDOMName(`floatingTitle_${metadata.uid}`);
+                    const desc = that.content.querySelector(`#${domName}`);
                     if (desc)
                         desc.style.display = 'none';
                 }, 100);
@@ -14554,7 +14615,7 @@ class AssetView {
                     const dom = node.domEl;
                     dom?.classList.add('selected');
                 }
-                this.selectedItem = node;
+                this.selectedItems = [node];
             }
         });
         tree.on('beforeMove', (event, resolve) => {
@@ -14705,6 +14766,7 @@ class AssetView {
         });
         this.content.addEventListener('click', function () {
             this.querySelectorAll('.lexassetitem').forEach((i) => i.classList.remove('selected'));
+            that.selectedItems.length = 0;
         });
         this.content.addEventListener('contextmenu', function (e) {
             e.preventDefault();
@@ -14923,7 +14985,7 @@ class AssetView {
             return;
         }
         const child = this.currentData[0];
-        const sameFolder = child?.parent?.id === folderItem.id;
+        const sameFolder = child?.parent?.metadata?.uid === folderItem.metadata?.uid;
         if (storeCurrent) {
             this.prevData.push(this.currentFolder ?? {
                 id: '/',
@@ -14949,7 +15011,15 @@ class AssetView {
         if (mustRefresh) {
             this._processData(this.data);
             this._refreshContent();
-            this.tree?.select(this.currentFolder.id);
+            // Get path to avoid same id issues
+            let path = `${this.currentFolder.id}/`;
+            let parent = this.currentFolder.parent;
+            while (parent && parent.id !== '/') {
+                path += `${parent.id}/`;
+                parent = parent.parent;
+            }
+            const parentsPath = path.split('/').filter(Boolean).reverse();
+            this.tree?.select(undefined, parentsPath);
         }
         this._updatePath();
     }
@@ -14974,14 +15044,14 @@ class AssetView {
         }
         return true;
     }
-    _requestDeleteItem(item) {
+    _requestDeleteItem(items) {
         const onBeforeDelete = this._callbacks['beforeDelete'];
         const onDelete = this._callbacks['delete'];
         const resolve = (...args) => {
-            this._deleteItem(item);
+            items.forEach((item) => this._deleteItem(item));
             const event = {
                 type: 'delete',
-                items: [item],
+                items,
                 userInitiated: true
             };
             if (onDelete)
@@ -14990,7 +15060,7 @@ class AssetView {
         if (onBeforeDelete) {
             const event = {
                 type: 'delete',
-                items: [item],
+                items,
                 userInitiated: true
             };
             onBeforeDelete(event, resolve);
@@ -15099,7 +15169,7 @@ class AssetView {
             }
             bcContainer.innerHTML = '';
             bcContainer.appendChild(LX.makeBreadcrumb(path.reverse().map((p) => {
-                return { title: p };
+                return { name: p };
             }), {
                 maxItems: 4,
                 separatorIcon: 'ChevronRight'
@@ -15269,16 +15339,21 @@ class AssetView {
         // It could be a Tree event, so maybe the elements is not created yet
         if (item.domEl) {
             const wasSelected = LX.hasClass(item.domEl, 'selected');
-            const hoverTitle = this.content.querySelector(`#floatingTitle_${item.id.replace(/\s/g, '_').replaceAll('.', '_')}`);
+            const hoverTitleDomName = LX.getSupportedDOMName(`floatingTitle_${item.metadata.uid}`);
+            const hoverTitle = this.content.querySelector(`#${hoverTitleDomName}`);
             if (hoverTitle)
                 hoverTitle.remove();
             item.domEl?.remove();
+            // Update new name
+            item.id = newName;
             item.domEl = this.addItem(item, idx * 2);
             if (wasSelected) {
                 this._previewAsset(item);
             }
         }
-        item.id = newName;
+        else {
+            item.id = newName;
+        }
         this.tree?.refresh();
         this._processData(this.data);
     }
@@ -15557,7 +15632,7 @@ function swapArrayElements(array, id0, id1) {
     [array[id0], array[id1]] = [array[id1], array[id0]];
 }
 function sliceChars(str, idx, n = 1) {
-    return str.substr(0, idx) + str.substr(idx + n);
+    return str.substring(0, idx) + str.substring(idx + n);
 }
 function firstNonspaceIndex(str) {
     const index = str.search(/\S|$/);
@@ -15802,7 +15877,7 @@ const HighlightRules = {
     common: [
         { test: (ctx) => ctx.inBlockComment, className: 'cm-com' },
         { test: (ctx) => ctx.inString, action: (ctx, editor) => editor._appendStringToken(ctx.token), discard: true },
-        { test: (ctx) => ctx.token.substr(0, ctx.singleLineCommentToken.length) == ctx.singleLineCommentToken, className: 'cm-com' },
+        { test: (ctx) => ctx.token.substring(0, ctx.singleLineCommentToken.length) == ctx.singleLineCommentToken, className: 'cm-com' },
         { test: (ctx, editor) => editor._isKeyword(ctx), className: 'cm-kwd' },
         {
             test: (ctx, editor) => editor._mustHightlightWord(ctx.token, CE.builtIn, ctx.lang) && (ctx.lang.tags ?? false
@@ -16568,8 +16643,8 @@ class CodeEditor {
                 var _c0 = this.getCharAtPos(cursor, -1);
                 var _c1 = this.getCharAtPos(cursor);
                 this.code.lines.splice(cursor.line + 1, 0, '');
-                this.code.lines[cursor.line + 1] = this.code.lines[ln].substr(cursor.position); // new line (below)
-                this.code.lines[ln] = this.code.lines[ln].substr(0, cursor.position); // line above
+                this.code.lines[cursor.line + 1] = this.code.lines[ln].substring(cursor.position); // new line (below)
+                this.code.lines[ln] = this.code.lines[ln].substring(0, cursor.position); // line above
                 this.lineDown(cursor, true);
                 // Check indentation
                 var spaces = firstNonspaceIndex(this.code.lines[ln]);
@@ -16661,7 +16736,7 @@ class CodeEditor {
                         e.keepSelection = kS;
                     }
                     var diff = Math.max(cursor.position - from, 1);
-                    var substr = word.substr(0, diff);
+                    var substr = word.substring(0, diff);
                     // Selections...
                     if (e.shiftKey) {
                         if (!cursor.selection) {
@@ -16731,7 +16806,7 @@ class CodeEditor {
                     if (!word.length)
                         this.lineDown(cursor, true);
                     var diff = cursor.position - from;
-                    var substr = word.substr(diff);
+                    var substr = word.substring(diff);
                     // Selections...
                     if (e.shiftKey) {
                         if (!cursor.selection) {
@@ -17115,6 +17190,7 @@ class CodeEditor {
         this._addRedoStep(cursor);
         // Extract info from the last code state
         const step = this.code.undoSteps.pop();
+        debugger;
         // Set old state lines
         this.code.lines = step.lines;
         this.processLines();
@@ -17730,13 +17806,13 @@ class CodeEditor {
                         index += i == cursor.selection.fromY ? cursor.selection.fromX : this.code.lines[i].length;
                     }
                     index += cursor.selection.fromY * separator.length;
-                    const num_chars = cursor.selection.chars
+                    const numChars = cursor.selection.chars
                         + (cursor.selection.toY - cursor.selection.fromY) * separator.length;
-                    const text = code.substr(index, num_chars);
+                    const text = code.substring(index, index + numChars);
                     content = text.split(separator).join('\n');
                 }
                 const options = this.onContextMenu(this, content, e);
-                if (options.length) {
+                if (options?.length) {
                     m.add('');
                     for (const o of options) {
                         m.add(o.path, { disabled: o.disabled, callback: o.callback });
@@ -17877,7 +17953,7 @@ class CodeEditor {
                             : this.code.lines[i].substring(toX, fromX);
                     }
                     else
-                        string = this.code.lines[i].substr(fromX);
+                        string = this.code.lines[i].substring(fromX);
                     const pixels = (reverse && deltaY == 0 ? toX : fromX) * this.charWidth;
                     if (isVisible)
                         domEl.style.left = `calc(${pixels}px + ${this.xPadding})`;
@@ -17917,7 +17993,7 @@ class CodeEditor {
                 // Compute new width and selection margins
                 let string;
                 if (sId == 0) {
-                    string = this.code.lines[i].substr(toX);
+                    string = this.code.lines[i].substring(toX);
                     const pixels = toX * this.charWidth;
                     if (isVisible)
                         domEl.style.left = 'calc(' + pixels + 'px + ' + this.xPadding + ')';
@@ -18244,9 +18320,9 @@ class CodeEditor {
                 index += i == cursor.selection.fromY ? cursor.selection.fromX : this.code.lines[i].length;
             }
             index += cursor.selection.fromY * separator.length;
-            const num_chars = cursor.selection.chars
+            const numChars = cursor.selection.chars
                 + (cursor.selection.toY - cursor.selection.fromY) * separator.length;
-            const text = code.substr(index, num_chars);
+            const text = code.substring(index, index + numChars);
             const lines = text.split(separator);
             textToCopy = lines.join('\n');
         }
@@ -18280,7 +18356,7 @@ class CodeEditor {
             index += cursor.selection.fromY * separator.length;
             const numChars = cursor.selection.chars
                 + (cursor.selection.toY - cursor.selection.fromY) * separator.length;
-            const text = code.substr(index, numChars);
+            const text = code.substring(index, index + numChars);
             const lines = text.split(separator);
             textToCut = lines.join('\n');
             this.deleteSelection(cursor);
@@ -18540,7 +18616,7 @@ class CodeEditor {
             const tokenIndex = i;
             const tokenStartIndex = this._currentTokenPositions[tokenIndex];
             if (blockComments) {
-                if (token.substr(0, blockCommentsTokens[0].length) == blockCommentsTokens[0]) {
+                if (token.substring(0, blockCommentsTokens[0].length) == blockCommentsTokens[0]) {
                     this._buildingBlockComment = [lineNumber, tokenStartIndex];
                 }
             }
@@ -18561,7 +18637,7 @@ class CodeEditor {
                 tokens: tokensToEvaluate
             });
             if (blockComments && this._buildingBlockComment != undefined
-                && token.substr(0, blockCommentsTokens[1].length) == blockCommentsTokens[1]) {
+                && token.substring(0, blockCommentsTokens[1].length) == blockCommentsTokens[1]) {
                 const [commentLineNumber, tokenPos] = this._buildingBlockComment;
                 this._blockCommentCache.push([new LX.vec2(commentLineNumber, lineNumber), new LX.vec2(tokenPos, tokenStartIndex)]);
                 delete this._buildingBlockComment;
@@ -18584,10 +18660,10 @@ class CodeEditor {
                     const openIdx = kLineString.lastIndexOf('{');
                     const closeIdx = kLineString.lastIndexOf('}');
                     if (openIdx > -1) {
-                        kLineString = kLineString.substr(openIdx);
+                        kLineString = kLineString.substring(openIdx);
                     }
                     else if (closeIdx > -1) {
-                        kLineString = kLineString.substr(closeIdx);
+                        kLineString = kLineString.substring(closeIdx);
                     }
                     contextTokens = [...this._getTokensFromLine(kLineString), ...contextTokens];
                     if (kLineString.length !== this.code.lines[lineNumber - k]) {
@@ -18650,7 +18726,7 @@ class CodeEditor {
             until reaching new delimiters
         */
         if (lineOpensBlock) {
-            const r = tokens.filter((t) => t.substr(0, blockCommentsTokens[0].length) == blockCommentsTokens[0]);
+            const r = tokens.filter((t) => t.substring(0, blockCommentsTokens[0].length) == blockCommentsTokens[0]);
             if (!r.length) {
                 this._buildingBlockComment = [lineNumber - 1, 0];
                 this.mustProcessPreviousLine = (tokens) => {
@@ -18672,7 +18748,7 @@ class CodeEditor {
             }
         }
         else if (lineClosesBlock) {
-            const r = tokens.filter((t) => t.substr(0, blockCommentsTokens[1].length) == blockCommentsTokens[1]);
+            const r = tokens.filter((t) => t.substring(0, blockCommentsTokens[1].length) == blockCommentsTokens[1]);
             if (!r.length) {
                 this._buildingBlockComment = [section[0].x, section[1].x];
                 this.mustProcessNextLine = (tokens) => {
@@ -18949,18 +19025,19 @@ class CodeEditor {
             lineString = ogLine.substring(0, hasCommentIdx);
         }
         let tokensToEvaluate = []; // store in a temp array so we know prev and next tokens...
-        let charCounterList = [];
         let charCounter = 0;
         const pushToken = function (t) {
             if ((skipNonWords && (t.includes('"') || t.length < 3))) {
                 return;
             }
-            tokensToEvaluate.push(t);
-            charCounterList.push(charCounter);
+            tokensToEvaluate.push({
+                text: t,
+                pos: charCounter
+            });
             // Update positions
             charCounter += t.length;
         };
-        let iter = lineString.matchAll(/(<!--|-->|\*\/|\/\*|::|[\[\](){}<>.,;:*"'`%@$!/= ])/g);
+        let iter = lineString.matchAll(/(<!--|-->|\*\/|\/\*|::|[\[\](){}<>.,;:*"'`%@$!/=+\- ])/g);
         let subtokens = iter.next();
         if (subtokens.value) {
             let idx = 0;
@@ -18983,8 +19060,40 @@ class CodeEditor {
         if (hasCommentIdx != undefined) {
             pushToken(ogLine.substring(hasCommentIdx));
         }
-        this._currentTokenPositions = charCounterList;
-        return this._processTokens(tokensToEvaluate);
+        // Apply step to merge numeric tokens, since they might be separated by '.'
+        const mergedTokens = this._mergeNumericTokens(tokensToEvaluate);
+        this._currentTokenPositions = mergedTokens.map((t) => t.pos);
+        return this._processTokens(mergedTokens.map((t) => t.text));
+    }
+    _mergeNumericTokens(tokens) {
+        const result = [];
+        for (let i = 0; i < tokens.length; i++) {
+            const t = tokens[i];
+            const prev = result[result.length - 1];
+            const next = tokens[i + 1];
+            // number . number
+            if (prev && t.text === '.' && /^\d+$/.test(prev.text) && next && /^\d+$/.test(next.text)) {
+                prev.text += '.' + next.text;
+                i++;
+                continue;
+            }
+            // . number
+            if (t.text === '.' && next && /^\d+$/.test(next.text)) {
+                result.push({
+                    text: '.' + next.text,
+                    pos: t.pos
+                });
+                i++;
+                continue;
+            }
+            // number .
+            if (prev && t.text === '.' && /^\d+$/.test(prev.text)) {
+                prev.text += '.';
+                continue;
+            }
+            result.push({ ...t });
+        }
+        return result;
     }
     _processTokens(tokens, offset = 0) {
         if (this.highlight == 'C++' || this.highlight == 'CSS') {
@@ -19414,9 +19523,9 @@ class CodeEditor {
             index += i == selection.fromY ? selection.fromX : this.code.lines[i].length;
         }
         index += selection.fromY * separator.length;
-        const num_chars = selection.chars + (selection.toY - selection.fromY) * separator.length;
+        const numChars = selection.chars + (selection.toY - selection.fromY) * separator.length;
         const pre = code.slice(0, index);
-        const post = code.slice(index + num_chars);
+        const post = code.slice(index + numChars);
         this.code.lines = (pre + post).split(separator);
         this.cursorToLine(cursor, selection.fromY, true);
         this.cursorToPosition(cursor, selection.fromX);
@@ -20062,7 +20171,7 @@ class CodeEditor {
             preWord.innerHTML = currSuggestion.substring(0, index);
             pre.appendChild(preWord);
             var actualWord = document.createElement('span');
-            actualWord.innerHTML = currSuggestion.substr(index, word.length);
+            actualWord.innerHTML = currSuggestion.substring(index, index + word.length);
             actualWord.classList.add('word-highlight');
             pre.appendChild(actualWord);
             var postWord = document.createElement('span');
@@ -20203,13 +20312,13 @@ class CodeEditor {
         const getIndex = (l) => {
             var string = this.code.lines[l];
             if (reverse) {
-                string = string.substr(0, l == cursorData.y ? cursorData.x : string.length);
+                string = string.substring(0, l == cursorData.y ? cursorData.x : string.length);
                 var reversed = strReverse(string);
                 var reversedIdx = reversed.indexOf(strReverse(text));
                 return reversedIdx == -1 ? -1 : string.length - reversedIdx - text.length;
             }
             else {
-                return string.substr(l == cursorData.y ? cursorData.x : 0).indexOf(text);
+                return string.substring(l == cursorData.y ? cursorData.x : 0).indexOf(text);
             }
         };
         if (reverse) {
@@ -20592,11 +20701,17 @@ if (!LX) {
     throw ('Missing LX namespace!');
 }
 LX.extensions.push('DocMaker');
+const CLASS_WORDS = ['uint32_t', 'uint64_t', 'uint8_t'];
 const CPP_KEY_WORDS = ['int', 'float', 'double', 'bool', 'char', 'wchar_t', 'const', 'static_cast', 'dynamic_cast', 'new', 'delete', 'void', 'true',
     'false', 'auto', 'struct', 'typedef', 'nullptr', 'NULL', 'unsigned', 'namespace', 'auto'];
-const CLASS_WORDS = ['uint32_t', 'uint64_t', 'uint8_t'];
-const STATEMENT_WORDS = ['for', 'if', 'else', 'return', 'continue', 'break', 'case', 'switch', 'while', 'import', 'from', 'await'];
 const JS_KEY_WORDS = ['var', 'let', 'const', 'static', 'function', 'null', 'undefined', 'new', 'delete', 'true', 'false', 'NaN', 'this'];
+const WGSL_KEY_WORDS = ['var', 'let', 'const', 'override', 'fn', 'struct', 'alias', 'true', 'false', 'bool', 'f16', 'f32', 'i32', 'u32', 'vec2',
+    'vec3', 'vec4', 'mat2x2', 'mat2x3', 'mat2x4', 'mat3x2', 'mat3x3', 'mat3x4', 'mat4x2', 'mat4x3', 'mat4x4' // 'atomic', 'array', 'ptr', 'sampler', 'sampler_comparison', 'texture_1d', 'texture_2d', 'texture_2d_array', 'texture_3d', 'texture_cube', 'texture_cube_array',
+    // 'texture_multisampled_2d', 'texture_external', 'texture_storage_1d', 'texture_storage_2d', 'texture_storage_2d_array', 'texture_storage_3d', 'texture_depth_2d',
+    // 'texture_depth_2d_array', 'texture_depth_cube', 'texture_depth_cube_array', 'texture_depth_multisampled_2d', 'function', 'private', 'workgroup', 'uniform',
+    // 'storage', 'read', 'write', 'read_write', 'binding', 'builtin', 'group', 'id', 'interpolate', 'invariant', 'location',  'size', 'align', 'stride', 'vertex', 'fragment', 'compute', 'workgroup_size',
+];
+const STATEMENT_WORDS = ['for', 'if', 'else', 'return', 'continue', 'break', 'case', 'switch', 'while', 'import', 'from', 'await'];
 const HTML_ATTRIBUTES = ['html', 'charset', 'rel', 'src', 'href', 'crossorigin', 'type', 'lang'];
 const HTML_TAGS = ['DOCTYPE', 'html', 'head', 'body', 'title', 'base', 'link', 'meta', 'style', 'main', 'section', 'nav', 'article', 'aside',
     'header', 'footer', 'address', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'hr', 'pre', 'blockquote', 'ol', 'ul', 'li', 'dl', 'dt', 'dd', 'figure',
@@ -20624,7 +20739,7 @@ class DocMaker {
         if (options.collapsable) {
             const collapsible = LX.makeElement('div', LX.mergeClass('my-4 px-6 cursor-pointer', options.className), `<${type} id="${id ?? ''}">${string}</${type}>`, this.root);
             const collapsibleContent = LX.makeContainer(['100%', 'auto'], 'px-4', '', this.root);
-            LX.listen(collapsible, "click", () => collapsible.querySelector('a.collapser').click());
+            LX.listen(collapsible, 'click', () => collapsible.querySelector('a.collapser').click());
             this._lastDomTarget = this.root;
             this.setDomTarget(collapsibleContent);
             if (options.collapsableContentCallback) {
@@ -20705,6 +20820,9 @@ class DocMaker {
                     else if (language == 'js' && JS_KEY_WORDS.includes(content)) {
                         highlight = 'kwd';
                     }
+                    else if (language == 'wgsl' && WGSL_KEY_WORDS.includes(content)) {
+                        highlight = 'kwd';
+                    }
                     else if (CLASS_WORDS.includes(content)) {
                         highlight = 'cls';
                     }
@@ -20726,8 +20844,8 @@ class DocMaker {
                         highlight = 'dec';
                     }
                     else {
-                        console.error('ERROR[Code Parsing]: Unknown highlight type: ' + content);
-                        return;
+                        highlight = '';
+                        console.error('WARNING[Code Parsing]: Unknown highlight type: ' + content);
                     }
                     html = getHTML(highlight, content);
                     text = text.replace(`@${content}@`, html);