From 503b82ea1387e533bbe9e415ea96c285b052d23d Mon Sep 17 00:00:00 2001
From: Yassine Guedidi <yassine@guedidi.com>
Date: Sat, 1 Mar 2025 01:33:48 +0100
Subject: [PATCH] Extract Highlight controller

---
 assets/controllers/highlight_controller.js | 11 +++++++++++
 assets/index.js                            |  3 ---
 assets/js/highlight.js                     |  8 --------
 templates/Config/otp_app.html.twig         |  8 ++++----
 templates/Developer/howto_app.html.twig    | 12 ++++++------
 templates/Entry/entry.html.twig            |  2 +-
 6 files changed, 22 insertions(+), 22 deletions(-)
 create mode 100644 assets/controllers/highlight_controller.js
 delete mode 100644 assets/js/highlight.js

diff --git a/assets/controllers/highlight_controller.js b/assets/controllers/highlight_controller.js
new file mode 100644
index 000000000..8177b342e
--- /dev/null
+++ b/assets/controllers/highlight_controller.js
@@ -0,0 +1,11 @@
+import { Controller } from '@hotwired/stimulus';
+import 'highlight.js/styles/atom-one-light.css';
+import hljs from 'highlight.js';
+
+export default class extends Controller {
+  connect() {
+    this.element.querySelectorAll('pre code').forEach((element) => {
+      hljs.highlightElement(element);
+    });
+  }
+}
diff --git a/assets/index.js b/assets/index.js
index 6b867cf47..99234c625 100755
--- a/assets/index.js
+++ b/assets/index.js
@@ -21,9 +21,6 @@ import '@fontsource/eb-garamond';
 import '@fontsource/montserrat';
 import '@fontsource/oswald';
 
-/* Highlight */
-import './js/highlight';
-
 /* Tools */
 import {
   savePercent, retrievePercent, initPreviewText,
diff --git a/assets/js/highlight.js b/assets/js/highlight.js
deleted file mode 100644
index f6f8349b4..000000000
--- a/assets/js/highlight.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import 'highlight.js/styles/atom-one-light.css';
-import hljs from 'highlight.js';
-
-window.addEventListener('load', () => {
-  document.querySelectorAll('pre').forEach((element) => {
-    hljs.highlightElement(element);
-  });
-});
diff --git a/templates/Config/otp_app.html.twig b/templates/Config/otp_app.html.twig
index f9b001008..792455d3f 100644
--- a/templates/Config/otp_app.html.twig
+++ b/templates/Config/otp_app.html.twig
@@ -18,14 +18,14 @@
                                 <img data-controller="qrcode" data-qrcode-url-value="{{ qr_code|raw }}" class="hide-on-med-and-down" />
                             </p>
 
-                            <p>
-                                {{ 'config.otp.app.two_factor_code_description_5'|trans }} <pre>{{ secret }}</pre>
-                            </p>
+                            <div data-controller="highlight">
+                                {{ 'config.otp.app.two_factor_code_description_5'|trans }} <pre><code>{{ secret }}</code></pre>
+                            </div>
                         </li>
                         <li>
                             <p>{{ 'config.otp.app.two_factor_code_description_3'|trans }}</p>
 
-                            <p><pre>{{ backupCodes|join("\n") }}</pre></p>
+                            <div data-controller="highlight"><pre><code>{{ backupCodes|join("\n") }}</code></pre></div>
                         </li>
                         <li>
                             <p>{{ 'config.otp.app.two_factor_code_description_4'|trans }}</p>
diff --git a/templates/Developer/howto_app.html.twig b/templates/Developer/howto_app.html.twig
index d4795d5c4..f2d9a6ac2 100644
--- a/templates/Developer/howto_app.html.twig
+++ b/templates/Developer/howto_app.html.twig
@@ -12,16 +12,16 @@
                 <p>{{ 'developer.howto.description.paragraph_2'|trans }}</p>
                 <p>{{ 'developer.howto.description.paragraph_3'|trans({'%link%': path('developer_create_client')})|raw }}</p>
                 <p>{{ 'developer.howto.description.paragraph_4'|trans }}</p>
-                <p>
+                <div data-controller="highlight">
                     <pre><code class="language-bash">http POST {{ wallabag_url }}/oauth/v2/token \
     grant_type=password \
     client_id=12_5um6nz50ceg4088c0840wwc0kgg44g00kk84og044ggkscso0k \
     client_secret=3qd12zpeaxes8cwg8c0404g888co4wo8kc4gcw0occww8cgw4k \
     username=yourUsername \
     password=yourPassw0rd</code></pre>
-                </p>
+                </div>
                 <p>{{ 'developer.howto.description.paragraph_5'|trans }}</p>
-                <p>
+                <div data-controller="highlight">
                     <pre><code class="language-bash">HTTP/1.1 200 OK
 Cache-Control: no-store, private
 Connection: close
@@ -39,12 +39,12 @@ X-Powered-By: PHP/5.5.9-1ubuntu4.13
     "scope": null,
     "token_type": "bearer"
 }</code></pre>
-                </p>
+                </div>
                 <p>{{ 'developer.howto.description.paragraph_6'|trans }}</p>
-                <p>
+                <div data-controller="highlight">
                     <pre><code class="language-bash">http GET {{ wallabag_url }}/api/entries.json \
     "Authorization:Bearer ZWFjNjA3ZWMwYWVmYzRkYTBlMmQ3NTllYmVhOGJiZDE0ZTg1NjE4MjczOTVlNzM0ZTRlMWQ0MmRlMmYwNTk5Mw"</code></pre>
-                </p>
+                </div>
                 <p>{{ 'developer.howto.description.paragraph_7'|trans }}</p>
                 <p>{{ 'developer.howto.description.paragraph_8'|trans({'%link%': path('nelmio_api_doc.swagger_ui')})|raw }}</p>
                 <p><a href="{{ path('developer') }}" class="waves-effect waves-light grey btn">{{ 'developer.howto.back'|trans }}</a></p>
diff --git a/templates/Entry/entry.html.twig b/templates/Entry/entry.html.twig
index 5fa5d8a77..70705d429 100644
--- a/templates/Entry/entry.html.twig
+++ b/templates/Entry/entry.html.twig
@@ -326,7 +326,7 @@
             {% endif %}
 
         </aside>
-        <article{% if entry.language is defined and entry.language is not null %} lang="{{ entry.getHTMLLanguage() }}"{% endif %}>
+        <article{% if entry.language is defined and entry.language is not null %} lang="{{ entry.getHTMLLanguage() }}"{% endif %} data-controller="highlight">
             {{ entry.content|raw }}
         </article>