Only search for label match if different from insertText match

and escape HTML label when no query is used

Author: krassowski

packages/jupyterlab-lsp/src/features/completion/model.spec.ts

@@ -35,6 +35,16 @@ describe('LSPCompleterModel', () => {
     model = new LSPCompleterModel();
   });
 
+  it('returns escaped when no query', () => {
+    model.setCompletionItems([jupyter_icon_completion]);
+    model.query = '';
+
+    let markedItems = model.completionItems();
+    expect(markedItems[0].label).to.be.equal(
+      '<i class="jp-icon-jupyter"></i> Jupyter'
+    );
+  });
+
   it('marks html correctly', () => {
     model.setCompletionItems([jupyter_icon_completion]);
     model.query = 'Jup';
@@ -73,4 +83,23 @@ describe('LSPCompleterModel', () => {
     filteredItems = model.completionItems();
     expect(filteredItems.length).to.equal(0);
   });
+
+  it('marks appropriate part of label when filterText matches', () => {
+    model.setCompletionItems([jupyter_icon_completion]);
+    // font is in filterText but not in label
+    model.query = 'font';
+
+    // nothing should get highlighted
+    let markedItems = model.completionItems();
+    expect(markedItems[0].label).to.be.equal(
+      '<i class="jp-icon-jupyter"></i> Jupyter'
+    );
+
+    // i is in both label and filterText
+    model.query = 'i';
+    markedItems = model.completionItems();
+    expect(markedItems[0].label).to.be.equal(
+      '&lt;<mark>i</mark> class="jp-icon-jupyter"&gt;&lt;/i&gt; Jupyter'
+    );
+  });
 });

packages/jupyterlab-lsp/src/features/completion/model.ts

@@ -73,9 +73,12 @@ export class GenericCompleterModel<
 
       let matched: boolean;
 
+      let filterText: string = null;
+      let filterMatch: StringExt.IMatchResult;
+
       if (query) {
-        const filterText = this.getFilterText(item);
-        let filterMatch = StringExt.matchSumOfSquares(filterText, query);
+        filterText = this.getFilterText(item);
+        filterMatch = StringExt.matchSumOfSquares(filterText, query);
         matched = !!filterMatch;
       } else {
         matched = true;
@@ -86,25 +89,32 @@ export class GenericCompleterModel<
         // If the matches are substrings of label, highlight them
         // in this part of the label that can be highlighted (must be a prefix),
         // which is intended to avoid highlighting matches in function arguments etc.
-        const labelPrefix = escapeHTML(this.getHighlightableLabelRegion(item));
+        let labelMatch: StringExt.IMatchResult;
+        if (query) {
+          let labelPrefix = escapeHTML(this.getHighlightableLabelRegion(item));
+          if (labelPrefix == filterText) {
+            labelMatch = filterMatch;
+          } else {
+            labelMatch = StringExt.matchSumOfSquares(labelPrefix, query);
+          }
+        }
 
-        let match = StringExt.matchSumOfSquares(labelPrefix, query);
         let label: string;
         let score: number;
 
-        if (match) {
+        if (labelMatch) {
           // Highlight label text if there's a match
           // there won't be a match if filter text includes additional keywords
           // for easier search that are not a part of the label
           let marked = StringExt.highlight(
             escapeHTML(item.label),
-            match.indices,
+            labelMatch.indices,
             this._markFragment
           );
           label = marked.join('');
-          score = match.score;
+          score = labelMatch.score;
         } else {
-          label = item.label;
+          label = escapeHTML(item.label);
           score = 0;
         }
         // preserve getters (allow for lazily retrieved documentation)