Sort LaTeX symbol search results based on the matching letters' cases

Also bring the EcmaScript version a bit more up to date, thereby allowing the use of `Object.entries`.

Author: nchilada

src/extension.ts

@@ -4,24 +4,108 @@ import {LatexCompletionItemProvider} from './completion'
 
 const RE_LATEX_NAME = /(\\\S+)/g;
 
-let latexItems: vscode.QuickPickItem[] = [];
-let pickOptions: vscode.QuickPickOptions = {
-    matchOnDescription: true,
-};
+function hammingDistance(query: string, latexName: string): number {
+    // Count the number of case-toggling "edits" needed to equate:
+    // - the query string
+    // - the substring of the LaTeX name beginning at `indexOfFirstCaseInsensitiveMatch`
+    //
+    // Note that the LaTeX name includes its leading "\",
+    // which might be convenient for users who habitually type "\" directly into the picker as part of the query string,
+    // especially if the user has not bound the `insertMathSymbol` command to a keybinding that happens to include a backslash.
+    // (A backslash case-folds to itself, so it contributes neither a mismatch nor a phantom match either way, FWIW.)
+    const indexOfFirstCaseInsensitiveMatch = latexName.toLowerCase().indexOf(query.toLowerCase());
+    if (indexOfFirstCaseInsensitiveMatch < 0) {
+        return Infinity;
+    }
+
+    let distance = 0;
+    for (let i = 0; i < query.length; i++) {
+        if (query[i] !== latexName[indexOfFirstCaseInsensitiveMatch + i]) {
+            distance++;
+        }
+    }
+    return distance;
+}
 
 export function activate(context: vscode.ExtensionContext) {
 
-    latexItems = [];
-    for (let name in latexSymbols) {
-        latexItems.push({
-            description: name,
-            label: latexSymbols[name],
+    const insertion = vscode.commands.registerCommand('unicode-latex.insertMathSymbol', function showQuickPickForLatexSymbols() {
+        /*
+         * Similar to `vscode.window.showQuickPick`,
+         * but in addition to filtering items (based on case-_insensitive_ substring search),
+         * this can also dynamically sort the results based on how closely they case-_sensitively_ match the search query
+         * rather than naively preserving the order in which items were provided when first opening the picker.
+         * (Compared to LaTeX symbol names, other VS Code functionality that uses the picker
+         * presumably doesn't have as strong a need for case-sensitivity.)
+         * Note that the various case-independent equivalence classes, themselves,
+         * are still arranged in the order in which their first entries appeared in `latex.ts`.
+         */
+
+        const quickPick = vscode.window.createQuickPick();
+        quickPick.matchOnDescription = true;
+
+        // Pre-populate the picker with (the first) symbols visible, even before the user starts typing a query,
+        // thus matching the behavior of VS Code's file opener and command palette
+        // (rather than starting with an empty dropdown menu).
+        quickPick.items = Object.entries(latexSymbols).map(([description, label]) => ({ description, label }));
+
+        quickPick.onDidChangeValue((query: string) => {
+            const canonicalQuery = query.toLowerCase();
+
+            // Contiguous, case-insensitive substring search is what QuickPick itself uses for filtering the provided items that it's been given
+            // (see https://github.com/microsoft/vscode/blob/0ebc49192dd9e2004396003d7590cd6340daec04/src/vs/base/common/filters.ts#L67-L75).
+            // Here, we pre-filter by the same criterion while giving ourselves the opportunity to dynamically _reorder_
+            // those filtered results based on the casing in the user's query, before handing off the items to `QuickPick`.
+            const latexSymbolsByCanonicalForm = new Map<string, string[]>();
+            for (const latexName in latexSymbols) {
+                const canonicalName = latexName.toLowerCase();
+                if (!canonicalName.includes(canonicalQuery)) {
+                    continue;
+                }
+
+                let matchingLatexSymbols = latexSymbolsByCanonicalForm.get(canonicalName);
+                if (!matchingLatexSymbols) {
+                    matchingLatexSymbols = [];
+                    latexSymbolsByCanonicalForm.set(canonicalName, matchingLatexSymbols);
+                }
+                matchingLatexSymbols.push(latexName);
+            }
+
+            const sortedLatexItems: vscode.QuickPickItem[] = [];
+            // Walk between equivalence classes in the order in which their first entries appeared in `latex.ts`,
+            // deliberately preserving (at least some of) that source ordering in the displayed list.
+            // This relies on `Map.prototype.values()` iterating in insertion order (per ES spec)
+            // as well as `for...in` iterating over a string-keyed object literal in insertion order (also per ES spec).
+            for (const matchingLatexSymbols of latexSymbolsByCanonicalForm.values()) {
+                // Decorate–sort–undecorate (computing each member's `hammingDistance` exactly once)
+                // allows us to avoid the O(n log n) re-evaluations that a bare
+                // ```
+                //     (a, b) => hammingDistance(a, query) - hammingDistance(b, query)
+                // ```
+                // would otherwise incur.
+                const sortedLatexSymbols = matchingLatexSymbols
+                    .map((latexName) => ({ latexName, distance: hammingDistance(query, latexName) }))
+                    .sort((a, b) => a.distance - b.distance);
+                for (const { latexName } of sortedLatexSymbols) {
+                    sortedLatexItems.push({ description: latexName, label: latexSymbols[latexName] });
+                }
+            }
+            quickPick.items = sortedLatexItems;
+        });
+
+        quickPick.onDidAccept(() => {
+            const item = quickPick.selectedItems[0];
+            quickPick.hide();
+            insertSymbol(item);
+        });
+
+        quickPick.onDidHide(() => {
+            quickPick.dispose();
         });
-    }
 
-    let insertion = vscode.commands.registerCommand('unicode-latex.insertMathSymbol', () => {
-        vscode.window.showQuickPick(latexItems, pickOptions).then(insertSymbol);
+        quickPick.show();
     });
+
     let replacement = vscode.commands.registerCommand('unicode-latex.replaceLatexNames', () => {
         replaceWithUnicode(vscode.window.activeTextEditor);
     });

tsconfig.json

@@ -1,9 +1,11 @@
 {
     "compilerOptions": {
         "module": "commonjs",
-        "target": "es6",
+        "target": "ES2022",
+        "lib": [
+            "ES2022"
+        ],
         "outDir": "out",
-        "lib": ["es6"],
         "sourceMap": true,
         "rootDir": "."
     },