feat(search-pad): recognize modern tokens

Tokens returned by `search` are now recognized by the component, this makes conversion simpler.
bpmn-io · Nov 1, 2024 · 688cc11 · 688cc11
1 parent 73d2bd8
commit 688cc11
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 4 deletions.
diff --git a/lib/features/search-pad/SearchPad.js b/lib/features/search-pad/SearchPad.js
@@ -521,10 +521,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.matched || t.value);
+    var match = t.match || t.matched;
+
+    if (match) {
+      htmlText += '<b class="' + SearchPad.RESULT_HIGHLIGHT_CLASS + '">' + text + '</b>';
     } else {
-      htmlText += escapeHTML(t.normal);
+      htmlText += text;
     }
   });
 

diff --git a/lib/features/search-pad/SearchPadProvider.ts b/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[];

diff --git a/lib/features/search-pad/SearchProvider.spec.ts b/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')

diff --git a/test/spec/features/search-pad/SearchPadSpec.js b/test/spec/features/search-pad/SearchPadSpec.js
@@ -139,6 +139,17 @@ describe('features/searchPad', function() {
           } ];
         }
 
+        if (pattern === 'modern') {
+          return [ {
+            primaryTokens: [
+              { match: true, value: 'foo' }
+            ],
+            secondaryTokens: [
+              { match: false, value: 'bar' }
+            ],
+            element: elements.one.a
+          } ];
+        }
         return [];
       };
     }
@@ -362,6 +373,27 @@ describe('features/searchPad', function() {
     }));
 
 
+    it('should recognize modern <search> tokens', inject(function(canvas) {
+
+      // when
+      typeText(input_node, 'modern');
+
+      // then
+      var result_nodes = domQueryAll(SearchPad.RESULT_SELECTOR, canvas.getContainer());
+
+      expect(result_nodes).to.have.length(1);
+
+      var primaryHTML = domQuery('.djs-search-result-primary', result_nodes[0]).innerHTML;
+      var secondaryHTML = domQuery('.djs-search-result-secondary', result_nodes[0]).innerHTML;
+
+      expect(primaryHTML).to.eql(
+        '<b class="djs-search-highlight">foo</b>'
+      );
+
+      expect(secondaryHTML).to.eql('bar');
+    }));
+
+
     it('should preselect first result', inject(function(canvas, selection) {
 
       // when