Use a table for the message body instead of pre

This simplifies the highlighting of lines.

Signed-off-by: Max Magorsch <arzano@gentoo.org>

2 files changed, 29 insertions, 8 deletions

diff --git a/public/css/main.css b/public/css/main.css
index 0acabf6..aa81004 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -100,6 +100,10 @@
 .ag-date {
 }
 
+.ag-line:target {
+  background-color:#FFF3CD;
+}
+
 .ag-line-number{
   color: #c1c1c1!important;
 }
diff --git a/views/message.erb b/views/message.erb
index 40c333a..f7e1c89 100644
--- a/views/message.erb
+++ b/views/message.erb
@@ -37,7 +37,30 @@
   </table>
 </div>
 
-<pre class="ag-message-content"><div class="d-flex flex-row"><div class="text-right pr-3"><% strip_email(message['_source']['content']).split("\n").each_with_index do |line, index| %><a id="L<%= index + 1 %>" class="ag-line-number" href="#L<%= index + 1 %>"><%= index + 1 %></a><br/><% end %></div><div id="ag-message-body" class="w-100"><%= linkize(strip_email(message['_source']['content'])) %></div></div></pre>
+<div style="border: 1px solid #ccc;font-size:12px;padding:10px;background-color: #f5f5f5;" class="mb-3 w-100">
+  <table class="w-100">
+    <% inquote = false %>
+    <% linkize(strip_email(message['_source']['content'])).split("\n").each_with_index do |line, index| %>
+      <tr id="L<%= index + 1 %>" class="ag-line">
+        <td class="pr-3 text-right" style="line-height: 1.2;user-select: none;"><a style="font-family: monospace;font-size: 12px;" class="ag-line-number" href="#L<%= index + 1 %>"><%= index + 1 %></a></td>
+        <% if line.start_with?('<div class="ag-quote">') %>
+          <% inquote = true %>
+          <td style="line-height: 1.2;font-family: monospace;font-size: 12px;color:#999"><%= line.sub('<div class="ag-quote">','') %></td>
+        <% elsif line.end_with?('</div>') %>
+          <% inquote = false %>
+          <td style="line-height: 1.2;font-family: monospace;font-size: 12px;color:#999"><%= line.sub('</div>','') %></td>
+        <% else %>
+          <% if inquote %>
+            <td style="line-height: 1.2;font-family: monospace;font-size: 12px;color:#999;"><%= line %></td>
+          <% else %>
+            <td style="line-height: 1.2;font-family: monospace;font-size: 12px;"><%= line %></td>
+          <% end %>
+        <% end %>
+      </tr>
+    <% end %>
+  </table>
+</div>
+
 
 <% if message['_source']['attachments'] and not message['_source']['attachments'].empty? %>
 <h3>Attachments</h3>
@@ -86,10 +109,6 @@
 </div>
 
 <script>
-    // highlight based on the specified reference in url
-    var lineNumber = window.location.hash.substr(1).replace("L", "");
-    highlightLine(lineNumber);
-
     // highlight based on parameter "h"
     var url = new URL(window.location.href);
     var highlights = url.searchParams.get("h");
@@ -112,9 +131,7 @@
 
     function highlightLine(lineNumber) {
         if(isNumeric(lineNumber)){
-            var lines = document.getElementById("ag-message-body").innerHTML.split("\n");
-            lines[parseFloat(lineNumber) - 1] = '<div style="display: inline-block;background-color:#FFF3CD;">' + lines[parseFloat(lineNumber) - 1] + '</div>'
-            document.getElementById("ag-message-body").innerHTML = lines.join("\n");
+            document.querySelectorAll(".ag-line")[parseFloat(lineNumber) - 1].style.backgroundColor = '#FFF3CD';
         }
     }