Use fuzzysort to filter languages

src/components/LanguageSelector.vue

@@ -1,4 +1,5 @@
 <script>
+    import fuzzysort from 'fuzzysort'
     import { LANGUAGES } from '../editor/languages.js'
 
     const items = LANGUAGES.map(l => {
@@ -11,6 +12,10 @@
     })
     items.unshift({token: "auto", name:"Auto-detect"})
 
+    items.forEach((item, idx) => {
+        item.preparedName = fuzzysort.prepare(item.name)
+    })
+
     export default {
         data() {
             return {
@@ -26,8 +31,17 @@
 
         computed: {
             filteredItems() {
-                return items.filter((lang) => {
+                if (this.filter === "") {
-                    return lang.name.toLowerCase().indexOf(this.filter.toLowerCase()) !== -1
+                    return items
+                }
+                const searchResults = fuzzysort.go(this.filter, items, {
+                    keys: ['name'],
+                })
+                return searchResults.map(result => {
+                    return {
+                        "token": result.obj.token,
+                        "name": result[0].highlight("<b>", "</b>")
+                    }
                 })
             },
         },
@@ -96,9 +110,8 @@
                     :class="idx === selected ? 'selected' : ''"
                     @click="selectItem(item.token)"
                     ref="item"
-                >
+                    v-html="item.name"
-                    {{ item.name }}
+                />
-                </li>
             </ul>
         </form>
     </div>
@@ -173,4 +186,6 @@
                     &.selected
                         background: #1b6540
                         color: rgba(255,255,255, 0.87)
+                ::v-deep b
+                    font-weight: 700
 </style>