From e42535b1ff906013dc09f1c4e6fa482c63366d1c Mon Sep 17 00:00:00 2001
From: Eugen Ciur <eugen@papermerge.com>
Date: Sun, 28 Aug 2022 09:57:54 +0200
Subject: [PATCH] highlight autocomplete results

highlight autocomplete results
---
 .../search/autocomplete-item/index.hbs        | 15 ++++--
 .../search_results/document/index.hbs         |  4 +-
 app/modifiers/text_to_dom.js                  | 49 +++++++++++++++++++
 app/styles/search.scss                        |  7 +++
 4 files changed, 67 insertions(+), 8 deletions(-)
 create mode 100644 app/modifiers/text_to_dom.js

diff --git a/app/components/search/autocomplete-item/index.hbs b/app/components/search/autocomplete-item/index.hbs
index 894dfd0..250cc99 100644
--- a/app/components/search/autocomplete-item/index.hbs
+++ b/app/components/search/autocomplete-item/index.hbs
@@ -1,5 +1,10 @@
-<li {{on "click" this.onClick}}>
-  <div class="icon {{@item.type}}"></div>
-  <div class="title">{{@item.title}}</div>
-  <div class="path text-muted">{{@item.path}}</div>
-</li>
\ No newline at end of file
+<li
+  {{on "click" this.onClick}}>
+  <div class="d-flex flex-row">
+    <div class="icon {{@item.type}}"></div>
+    <div class="title">{{@item.title}}</div>
+    <div class="path text-muted">{{@item.path}}</div>
+  </div>
+</li>
+<div class="text-muted px-3 pb-3" {{textToDom @item.highlight}}>
+</div>
diff --git a/app/components/search_results/document/index.hbs b/app/components/search_results/document/index.hbs
index 55a8872..2a1bea0 100644
--- a/app/components/search_results/document/index.hbs
+++ b/app/components/search_results/document/index.hbs
@@ -6,9 +6,7 @@
       {{@result_node.title}}
     </LinkTo>
   </div>
-
   <Node::Tags
     @tags={{this.tags}}
     @more_than_max_visible_tags={{this.more_than_max_visible_tags}} />
-
-</div>
\ No newline at end of file
+</div>
diff --git a/app/modifiers/text_to_dom.js b/app/modifiers/text_to_dom.js
new file mode 100644
index 0000000..6641329
--- /dev/null
+++ b/app/modifiers/text_to_dom.js
@@ -0,0 +1,49 @@
+import Modifier from 'ember-modifier';
+
+
+export default class TextToDom extends Modifier {
+  /*
+  Converts plain text to HTML DOM elements and inserts them
+  as children to `this.element`
+
+  Autocomplete receives text matching highlights as plain text e.g.
+
+    "This is <em>great</em> match".
+
+  Besides the fact that you cannot style plain text, it is also
+  rendered with <em> tag.
+  To fix this problem hightlight text is converted to DOM nodes.
+  */
+  didReceiveArguments() {
+
+    let text = this.args.positional[0],
+      template,
+      nodes,
+      that = this,
+      em_element,
+      text_element;
+
+    // inspired from https://stackoverflow.com/a/35385518
+    // HTML5's <template> tag can be used to convinently convert
+    // text into DOM nodes
+    template = document.createElement('template');
+    template.innerHTML = text;
+
+    // voila!
+    nodes = template.content.childNodes;
+
+    nodes.forEach(node => {
+      // is it <em>some match</em> ?
+      if (node.nodeName == 'EM') {
+        em_element = document.createElement('em');
+        em_element.textContent = node.firstChild.textContent;
+        that.element.appendChild(em_element);
+      } else {
+        // otherwise node is a plain text
+        text_element = document.createTextNode(node.textContent);
+        that.element.appendChild(text_element);
+      }
+    });
+  }
+
+}
diff --git a/app/styles/search.scss b/app/styles/search.scss
index e8488c0..b2a5688 100644
--- a/app/styles/search.scss
+++ b/app/styles/search.scss
@@ -20,6 +20,13 @@
     padding: 0;
     z-index: 1;
 
+    .text-muted {
+      em {
+        color: green;
+        font-weight: bold;
+      }
+    }
+
     li:hover {
       background-color: #e9e9e9;
       border-left: 1px solid #0d6efd;