Make language selector also search through the languages' filename su…

…ffixes (using the guesslang attribute)

This makes the "cpp" string match C++, and "cs" match C#.

src/components/LanguageSelector.vue

@@ -5,7 +5,8 @@
     const items = LANGUAGES.map(l => {
         return {
             "token": l.token, 
-            "name": l.name
+            "name": l.name,
+            "guesslang": l.guesslang,
         }
     }).sort((a, b) => {
         return a.name.localeCompare(b.name)
@@ -35,12 +36,13 @@
                     return items
                 }
                 const searchResults = fuzzysort.go(this.filter, items, {
-                    keys: ['name'],
+                    keys: ['name', 'guesslang'],
                 })
                 return searchResults.map(result => {
+                    const highlight = result[0].highlight("<b>", "</b>")
                     return {
                         "token": result.obj.token,
-                        "name": result[0].highlight("<b>", "</b>")
+                        "name": highlight || result.obj.name,
                     }
                 })
             },

tests/language-selector.spec.js

@@ -0,0 +1,16 @@
+import { test, expect } from "@playwright/test";
+import { HeynotePage } from "./test-utils.js";
+
+let heynotePage
+
+test.beforeEach(async ({ page }) => {
+    heynotePage = new HeynotePage(page)
+    await heynotePage.goto()
+})
+
+
+test("test language selector search by file ending", async ({ page }) => {
+    await page.locator("body").press(heynotePage.agnosticKey("Mod+L"))
+    await page.locator("body").pressSequentially("cpp")
+    await expect(page.locator("css=.language-selector .items > li.selected")).toHaveText("C++")
+})