Improve search (make fuzzy again and more robust)

lib/features/popup-menu/PopupMenu.js

@@ -22,6 +22,7 @@ import PopupMenuComponent from './PopupMenuComponent';
 /**
  * @typedef {import('../../core/Canvas').default} Canvas
  * @typedef {import('../../core/EventBus').default} EventBus
+ * @typedef {import('../search/search').default} search
  *
  * @typedef {import('../../util/Types').Point} Point
  *
@@ -59,10 +60,12 @@ var DEFAULT_PRIORITY = 1000;
  * @param {PopupMenuConfig} config
  * @param {EventBus} eventBus
  * @param {Canvas} canvas
+ * @param {search} search
  */
-export default function PopupMenu(config, eventBus, canvas) {
+export default function PopupMenu(config, eventBus, canvas, search) {
   this._eventBus = eventBus;
   this._canvas = canvas;
+  this._search = search;
 
   this._current = null;
 
@@ -94,7 +97,8 @@ export default function PopupMenu(config, eventBus, canvas) {
 PopupMenu.$inject = [
   'config.popupMenu',
   'eventBus',
-  'canvas'
+  'canvas',
+  'search'
 ];
 
 PopupMenu.prototype._render = function() {
@@ -138,6 +142,7 @@ PopupMenu.prototype._render = function() {
         scale=${ scale }
         onOpened=${ this._onOpened.bind(this) }
         onClosed=${ this._onClosed.bind(this) }
+        searchFn=${ this._search }
         ...${{ ...options }}
       />
     `,
@@ -550,7 +555,6 @@ PopupMenu.prototype._getHeaderEntries = function(target, providers) {
 
 
 PopupMenu.prototype._getEmptyPlaceholder = function(providers) {
-
   const provider = providers.find(
     provider => isFunction(provider.getEmptyPlaceholder)
   );

lib/features/popup-menu/PopupMenuComponent.js

@@ -23,6 +23,8 @@ import { isDefined, isFunction } from 'min-dash';
  * @typedef {import('./PopupMenuProvider').PopupMenuHeaderEntry} PopupMenuHeaderEntry
  * @typedef {import('./PopupMenuProvider').PopupMenuEmptyPlaceholderProvider | import('./PopupMenuProvider').PopupMenuEmptyPlaceholder} PopupMenuEmptyPlaceholder
  *
+ * @typedef {import('../search/search').default} search
+ *
  * @typedef {import('../../util/Types').Point} Point
  */
 
@@ -41,6 +43,7 @@ import { isDefined, isFunction } from 'min-dash';
  * @param {boolean} [props.search]
  * @param {PopupMenuEmptyPlaceholder} [props.emptyPlaceholder]
  * @param {number} [props.width]
+ * @param {search} props.searchFn
  */
 export default function PopupMenuComponent(props) {
   const {
@@ -54,6 +57,7 @@ export default function PopupMenuComponent(props) {
     scale,
     search,
     emptyPlaceholder,
+    searchFn,
     entries: originalEntries,
     onOpened,
     onClosed
@@ -75,29 +79,19 @@ export default function PopupMenuComponent(props) {
       return originalEntries;
     }
 
-    const filter = entry => {
-      if (!value) {
-        return (entry.rank || 0) >= 0;
-      }
-
-      if (entry.searchable === false) {
-        return false;
-      }
+    if (!value) {
+      return originalEntries.filter(({ rank = 0 }) => rank >= 0);
+    }
 
-      const searchableFields = [
-        entry.description || '',
-        entry.label || '',
-        entry.search || ''
-      ].map(string => string.toLowerCase());
-
-      // every word of `value` should be included in one of the searchable fields
-      return value
-        .toLowerCase()
-        .split(/\s/g)
-        .every(word => searchableFields.some(field => field.includes(word)));
-    };
+    const searchableEntries = originalEntries.filter(({ searchable }) => searchable !== false);
 
-    return originalEntries.filter(filter);
+    return searchFn(searchableEntries, value, {
+      keys: [
+        'label',
+        'description',
+        'search'
+      ]
+    }).map(({ item }) => item);
   }, [ searchable ]);
 
   const [ entries, setEntries ] = useState(filterEntries(originalEntries, value));

lib/features/popup-menu/index.js

@@ -1,10 +1,13 @@
 import PopupMenu from './PopupMenu';
 
+import Search from '../search';
+
 
 /**
  * @type { import('didi').ModuleDeclaration }
  */
 export default {
+  __depends__: [ Search ],
   __init__: [ 'popupMenu' ],
   popupMenu: [ 'type', PopupMenu ]
 };

lib/features/search-pad/SearchPad.js

@@ -523,10 +523,13 @@ function createHtmlText(tokens) {
   var htmlText = '';
 
   tokens.forEach(function(t) {
-    if (t.matched) {
-      htmlText += '<b class="' + SearchPad.RESULT_HIGHLIGHT_CLASS + '">' + escapeHTML(t.matched) + '</b>';
+    var text = escapeHTML(t.value || t.matched || t.normal);
+    var match = t.match || t.matched;
+
+    if (match) {
+      htmlText += '<b class="' + SearchPad.RESULT_HIGHLIGHT_CLASS + '">' + text + '</b>';
     } else {
-      htmlText += escapeHTML(t.normal);
+      htmlText += text;
     }
   });
 

lib/features/search-pad/SearchPadProvider.ts

@@ -1,10 +1,17 @@
 import type { Element } from '../../model/Types';
 
-export type Token = {
+type LegacyToken = {
   matched?: string;
   normal?: string;
 };
 
+type ModernToken = {
+  match: boolean;
+  value: string;
+};
+
+export type Token = LegacyToken | ModernToken;
+
 export type SearchResult = {
   primaryTokens: Token[];
   secondaryTokens: Token[];

lib/features/search-pad/SearchProvider.spec.ts

@@ -14,12 +14,20 @@ export class FooSearchProvider implements SearchProvider {
           {
             matched: pattern,
             normal: pattern
+          },
+          {
+            match: true,
+            value: 'bar'
           }
         ],
         secondaryTokens: [
           {
             matched: 'bar',
             normal: 'bar'
+          },
+          {
+            match: false,
+            value: 'foo'
           }
         ],
         element: create('shape')