Use distance filter

webapp/app_event.ts

@@ -14,5 +14,5 @@ export type IndexEvent = {
 };
 
 export interface AppEventDispatcher {
-  dispatchAppEvent(name: AppEvent, data?: any): Promise<any[]>;
+  dispatchAppEvent(name: AppEvent, data?: any): Promise<void>;
 }

webapp/components/filter.tsx

@@ -2,11 +2,11 @@ import React, { useEffect, useRef, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 
-export interface Option {
+export type Option = {
   name: string;
   orderId?: number;
   hint?: string;
-}
+};
 
 function magicSorter(a: Option, b: Option): number {
   if (a.orderId && b.orderId) {
@@ -15,6 +15,42 @@ function magicSorter(a: Option, b: Option): number {
   return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
 }
 
+function escapeRegExp(str: string): string {
+  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
+}
+
+function fuzzyFilter(pattern: string, options: Option[]): Option[] {
+  let closeMatchRegex = escapeRegExp(pattern);
+  closeMatchRegex = closeMatchRegex.split(/\s+/).join(".*?");
+  closeMatchRegex = closeMatchRegex.replace(/\\\//g, ".*?\\/.*?");
+  const distantMatchRegex = escapeRegExp(pattern).split("").join(".*?");
+  const r1 = new RegExp(closeMatchRegex, "i");
+  const r2 = new RegExp(distantMatchRegex, "i");
+  let matches = [];
+  if (!pattern) {
+    return options;
+  }
+  for (let option of options) {
+    let m = r1.exec(option.name);
+    if (m) {
+      matches.push({
+        ...option,
+        orderId: 100000 - (options.length - m[0].length - m.index),
+      });
+    } else {
+      // Let's try the distant matcher
+      var m2 = r2.exec(option.name);
+      if (m2) {
+        matches.push({
+          ...option,
+          orderId: 10000 - (options.length - m2[0].length - m2.index),
+        });
+      }
+    }
+  }
+  return matches;
+}
+
 export function FilterList({
   placeholder,
   options,
@@ -51,12 +87,7 @@ export function FilterList({
 
     if (searchPhrase) {
       let foundExactMatch = false;
-      let results = options.filter((option) => {
-        if (option.name.toLowerCase() === searchPhrase) {
-          foundExactMatch = true;
-        }
-        return option.name.toLowerCase().indexOf(searchPhrase) !== -1;
-      });
+      let results = fuzzyFilter(searchPhrase, options);
       results = results.sort(magicSorter);
       if (allowNew && !foundExactMatch) {
         results.push({

webapp/constant.ts

@@ -1 +1 @@
-export const pageLinkRegex = /\[\[([\w\s\/\:,\.@\-]+)\]\]/;
+export const pageLinkRegex = /\[\[([\w\s\/:,\.@\-]+)\]\]/;

webapp/editor.tsx

@@ -1,8 +1,4 @@
-import {
-  autocompletion,
-  completionKeymap,
-  CompletionResult,
-} from "@codemirror/autocomplete";
+import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
 import { closeBrackets, closeBracketsKeymap } from "@codemirror/closebrackets";
 import { indentWithTab, standardKeymap } from "@codemirror/commands";
 import { history, historyKeymap } from "@codemirror/history";
@@ -47,6 +43,7 @@ import { systemSyscalls } from "./syscalls/system";
 import { Panel } from "./components/panel";
 import { CommandHook } from "./hooks/command";
 import { SlashCommandHook } from "./hooks/slash_command";
+import { CompleterHook } from "./hooks/completer";
 
 class PageState {
   scrollTop: number;
@@ -60,15 +57,17 @@ class PageState {
 
 export class Editor implements AppEventDispatcher {
   private system = new System<SilverBulletHooks>("client");
+  readonly commandHook: CommandHook;
+  readonly slashCommandHook: SlashCommandHook;
+  readonly completerHook: CompleterHook;
+
   openPages = new Map<string, PageState>();
-  commandHook: CommandHook;
   editorView?: EditorView;
   viewState: AppViewState;
   viewDispatch: React.Dispatch<Action>;
   space: Space;
   pageNavigator: PathPageNavigator;
   eventHook: EventHook;
-  private slashCommandHook: SlashCommandHook;
 
   constructor(space: Space, parent: Element) {
     this.space = space;
@@ -95,6 +94,10 @@ export class Editor implements AppEventDispatcher {
     this.slashCommandHook = new SlashCommandHook(this);
     this.system.addHook(this.slashCommandHook);
 
+    // Completer hook
+    this.completerHook = new CompleterHook();
+    this.system.addHook(this.completerHook);
+
     this.render(parent);
     this.editorView = new EditorView({
       state: this.createEditorState(
@@ -192,7 +195,7 @@ export class Editor implements AppEventDispatcher {
     }, 2000);
   }
 
-  async dispatchAppEvent(name: AppEvent, data?: any): Promise<any[]> {
+  async dispatchAppEvent(name: AppEvent, data?: any): Promise<void> {
     return this.eventHook.dispatchEvent(name, data);
   }
 
@@ -236,7 +239,7 @@ export class Editor implements AppEventDispatcher {
         }),
         autocompletion({
           override: [
-            this.plugCompleter.bind(this),
+            this.completerHook.plugCompleter.bind(this.completerHook),
             this.slashCommandHook.slashCommandCompleter.bind(
               this.slashCommandHook
             ),
@@ -330,19 +333,6 @@ export class Editor implements AppEventDispatcher {
     });
   }
 
-  async plugCompleter(): Promise<CompletionResult | null> {
-    let allCompletionResults = await this.dispatchAppEvent("editor:complete");
-    if (allCompletionResults.length === 1) {
-      return allCompletionResults[0];
-    } else if (allCompletionResults.length > 1) {
-      console.error(
-        "Got completion results from multiple sources, cannot deal with that",
-        allCompletionResults
-      );
-    }
-    return null;
-  }
-
   focus() {
     this.editorView!.focus();
   }

webapp/hooks/completer.ts

@@ -0,0 +1,46 @@
+import { Hook, Manifest } from "../../plugos/types";
+import { System } from "../../plugos/system";
+import { CompletionResult } from "@codemirror/autocomplete";
+
+export type CompleterHookT = {
+  isCompleter?: boolean;
+};
+
+export class CompleterHook implements Hook<CompleterHookT> {
+  private system?: System<CompleterHookT>;
+
+  public async plugCompleter(): Promise<CompletionResult | null> {
+    let completerPromises = [];
+    // TODO: Can be optimized (cache all functions)
+    for (const plug of this.system!.loadedPlugs.values()) {
+      if (!plug.manifest) {
+        continue;
+      }
+      for (const [functionName, functionDef] of Object.entries(
+        plug.manifest.functions
+      )) {
+        if (functionDef.isCompleter) {
+          completerPromises.push(plug.invoke(functionName, []));
+        }
+      }
+    }
+    let allCompletionResults = await Promise.all(completerPromises);
+    if (allCompletionResults.length === 1) {
+      return allCompletionResults[0];
+    } else if (allCompletionResults.length > 1) {
+      console.error(
+        "Got completion results from multiple sources, cannot deal with that",
+        allCompletionResults
+      );
+    }
+    return null;
+  }
+
+  apply(system: System<CompleterHookT>): void {
+    this.system = system;
+  }
+
+  validateManifest(manifest: Manifest<CompleterHookT>): string[] {
+    return [];
+  }
+}

webapp/util.ts

@@ -1,5 +1,5 @@
 export function countWords(str: string): number {
-  var matches = str.match(/[\w\d\'\'-]+/gi);
+  const matches = str.match(/[\w\d\'-]+/gi);
   return matches ? matches.length : 0;
 }