lutra 0.1.12 → 0.1.14

package/dist/components/MenuDropdown.svelte

@@ -171,7 +171,8 @@
         border-radius: var(--menu-border-radius);
         box-shadow: 0 0.5rem 1rem var(--shadow-color);
         background-color: var(--menu-background-color);
-        width: var(--width, 25ch);
+        width: var(--width, fit-content);
+        max-width: var(--max-width, 50ch);
         overflow-x: clip;
         overflow-y: auto;
         scrollbar-width: thin;

package/dist/components/MenuItem.svelte

@@ -109,6 +109,7 @@
         --inset-block: 0.5rem;
         --inset-inline: 1rem;
         border-radius: none;
+        white-space: nowrap;
     }
 
     li.rounded .Item,
@@ -128,10 +129,17 @@
         outline: none;
     }
 
+    li .Item span.Content {
+        display: inline-flex;
+        align-items: center;
+        white-space: nowrap;
+    }
+
     li .Item span.Shortcut {
         font-size: max(0.75em, 9px);
         text-align: right;
         color: var(--menu-text-color-subtle);
+        white-space: nowrap;
     }
 
     li .Item:not(.Custom):active {

package/dist/util/keyboard.svelte.js

@@ -104,7 +104,10 @@ export function matchOnType(el, e) {
         items.forEach((el) => {
             const contentEl = el.querySelector("span.Content") ?? el.querySelector("label");
             if (contentEl) {
-                contentEl.innerHTML = contentEl.textContent;
+                // Remove underlines while preserving other elements (like icons)
+                contentEl.querySelectorAll("u").forEach((u) => {
+                    u.replaceWith(u.textContent);
+                });
             }
         });
     }
@@ -132,13 +135,48 @@ export function matchOnType(el, e) {
         // add underline to the matched text
         matches.forEach((el) => {
             const contentEl = el.querySelector("span.Content, label");
-            const text = contentEl?.textContent?.trim();
-            if (text) {
-                const index = text.toLowerCase().indexOf(keyMemory);
-                const first = text.slice(0, index);
-                const last = text.slice(index + keyMemory.length);
-                const middle = text.slice(index, index + keyMemory.length);
-                contentEl.innerHTML = `${first}<u>${middle}</u>${last}`;
+            if (!contentEl)
+                return;
+            // Find all text nodes within contentEl
+            const walker = document.createTreeWalker(contentEl, NodeFilter.SHOW_TEXT, null);
+            let textNode;
+            let fullText = "";
+            const textNodes = [];
+            while (textNode = walker.nextNode()) {
+                textNodes.push(textNode);
+                fullText += textNode.textContent;
+            }
+            const lowerText = fullText.toLowerCase();
+            const matchIndex = lowerText.indexOf(keyMemory);
+            if (matchIndex === -1)
+                return;
+            // Calculate position across text nodes
+            let currentPos = 0;
+            for (const node of textNodes) {
+                const nodeText = node.textContent || "";
+                const nodeLength = nodeText.length;
+                const nodeStart = currentPos;
+                const nodeEnd = currentPos + nodeLength;
+                // Check if this node contains any part of the match
+                if (matchIndex < nodeEnd && matchIndex + keyMemory.length > nodeStart) {
+                    const relativeStart = Math.max(0, matchIndex - nodeStart);
+                    const relativeEnd = Math.min(nodeLength, matchIndex + keyMemory.length - nodeStart);
+                    const before = nodeText.slice(0, relativeStart);
+                    const match = nodeText.slice(relativeStart, relativeEnd);
+                    const after = nodeText.slice(relativeEnd);
+                    const fragment = document.createDocumentFragment();
+                    if (before)
+                        fragment.appendChild(document.createTextNode(before));
+                    if (match) {
+                        const u = document.createElement("u");
+                        u.textContent = match;
+                        fragment.appendChild(u);
+                    }
+                    if (after)
+                        fragment.appendChild(document.createTextNode(after));
+                    node.replaceWith(fragment);
+                }
+                currentPos = nodeEnd;
             }
         });
         if (keyMemory.length === 1) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lutra",
-	"version": "0.1.12",
+	"version": "0.1.14",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",