From 01bd3e904508c0bcb51f540df980fd9e5d4609db Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Tue, 28 May 2024 10:44:38 +0200
Subject: [PATCH] Highlight search terms in RemoteSelect

Makes it more obvious why a entry is in the list and complies
to the default highlighting that select2 does if there is no
html template rendering function.
---
 .../alchemy_admin/components/attachment_select.js |  5 +++--
 .../alchemy_admin/components/node_select.js       |  5 +++--
 .../alchemy_admin/components/page_select.js       |  5 +++--
 .../alchemy_admin/components/remote_select.js     | 15 ++++++++++++++-
 .../assets/stylesheets/alchemy_admin/select2.scss |  1 +
 5 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/app/javascript/alchemy_admin/components/attachment_select.js b/app/javascript/alchemy_admin/components/attachment_select.js
index 67672c1e88..fea6c7ab1d 100644
--- a/app/javascript/alchemy_admin/components/attachment_select.js
+++ b/app/javascript/alchemy_admin/components/attachment_select.js
@@ -8,14 +8,15 @@ class AttachmentSelect extends RemoteSelect {
   /**
    * html template for each list entry
    * @param {object} page
+   * @param {string} term
    * @returns {string}
    * @private
    */
-  _renderListEntry(attachment) {
+  _renderListEntry(attachment, term) {
     return `
       <div class="attachment-select--attachment">
         <alchemy-icon name="${attachment.icon_css_class}"></alchemy-icon>
-        <span class="attachment-select--attachment-name">${attachment.name}</span>
+        <span class="attachment-select--attachment-name">${this._hightlightTerm(attachment.name, term)}</span>
       </div>
     `
   }
diff --git a/app/javascript/alchemy_admin/components/node_select.js b/app/javascript/alchemy_admin/components/node_select.js
index fbf307c838..cae62551de 100644
--- a/app/javascript/alchemy_admin/components/node_select.js
+++ b/app/javascript/alchemy_admin/components/node_select.js
@@ -18,10 +18,11 @@ class NodeSelect extends RemoteSelect {
   /**
    * html template for each list entry
    * @param {object} node
+   * @param {string} term
    * @returns {string}
    * @private
    */
-  _renderListEntry(node) {
+  _renderListEntry(node, term) {
     const ancestors = node.ancestors.map((a) => a.name)
     const seperator = `<alchemy-icon name="arrow-right-s"></alchemy-icon>`
 
@@ -33,7 +34,7 @@ class NodeSelect extends RemoteSelect {
             ${ancestors.length > 0 ? ancestors.join(seperator) + seperator : ""}
           </span>
           <span class="node-select--node-name">
-            ${node.name}
+            ${this._hightlightTerm(node.name, term)}
           </span>
         </div>
         <div class="node-select--node-url">
diff --git a/app/javascript/alchemy_admin/components/page_select.js b/app/javascript/alchemy_admin/components/page_select.js
index d8a43bd305..e7567ceb04 100644
--- a/app/javascript/alchemy_admin/components/page_select.js
+++ b/app/javascript/alchemy_admin/components/page_select.js
@@ -36,15 +36,16 @@ class PageSelect extends RemoteSelect {
   /**
    * html template for each list entry
    * @param {object} page
+   * @param {string} term
    * @returns {string}
    * @private
    */
-  _renderListEntry(page) {
+  _renderListEntry(page, term) {
     return `
       <div class="page-select--page">
         <div class="page-select--top">
           <alchemy-icon name="file-3"></alchemy-icon>
-          <span class="page-select--page-name">${page.name}</span>
+          <span class="page-select--page-name">${this._hightlightTerm(page.name, term)}</span>
           <span class="page-select--site-name">${page.site.name}</span>
         </div>
         <div class="page-select--bottom">
diff --git a/app/javascript/alchemy_admin/components/remote_select.js b/app/javascript/alchemy_admin/components/remote_select.js
index 2f590c1467..07035e249d 100644
--- a/app/javascript/alchemy_admin/components/remote_select.js
+++ b/app/javascript/alchemy_admin/components/remote_select.js
@@ -62,7 +62,8 @@ export class RemoteSelect extends AlchemyHTMLElement {
       },
       ajax: this.ajaxConfig,
       formatSelection: (item) => this._renderResult(item),
-      formatResult: (item) => this._renderListEntry(item)
+      formatResult: (item, _el, query) =>
+        this._renderListEntry(item, query.term)
     }
   }
 
@@ -126,6 +127,7 @@ export class RemoteSelect extends AlchemyHTMLElement {
   /**
    * html template for each list entry
    * @param {object} item
+   * @param {string} term
    * @returns {string}
    * @private
    */
@@ -134,4 +136,15 @@ export class RemoteSelect extends AlchemyHTMLElement {
       "You need to define a _renderListEntry function on your sub class!"
     )
   }
+
+  /**
+   * hightlighted search term
+   * @param {string} name
+   * @param {string} term
+   * @returns {string}
+   * @private
+   */
+  _hightlightTerm(name, term) {
+    return name.replace(new RegExp(term, "gi"), (match) => `<em>${match}</em>`)
+  }
 }
diff --git a/vendor/assets/stylesheets/alchemy_admin/select2.scss b/vendor/assets/stylesheets/alchemy_admin/select2.scss
index 07d9ea7efc..5241f59deb 100644
--- a/vendor/assets/stylesheets/alchemy_admin/select2.scss
+++ b/vendor/assets/stylesheets/alchemy_admin/select2.scss
@@ -396,6 +396,7 @@ html[dir="rtl"] .select2-results {
 .select2-results li em {
   background: #feffde;
   font-style: normal;
+  text-decoration: underline;
 }
 
 .select2-results .select2-highlighted em {