From a2beb9836bbae236022aed2e65e61c737ad3f851 Mon Sep 17 00:00:00 2001
From: Alexey Golub <Tyrrrrrr@gmail.com>
Date: Sat, 14 Sep 2019 20:28:27 +0300
Subject: [PATCH] [HTML] Jump to linked Discord messages

Closes #128
---
 .../HtmlChatLogRenderer.cs                       |  8 +++++++-
 .../Resources/HtmlShared.html                    | 16 +++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/DiscordChatExporter.Core.Rendering/HtmlChatLogRenderer.cs b/DiscordChatExporter.Core.Rendering/HtmlChatLogRenderer.cs
index c7a5d891..38fbd6e8 100644
--- a/DiscordChatExporter.Core.Rendering/HtmlChatLogRenderer.cs
+++ b/DiscordChatExporter.Core.Rendering/HtmlChatLogRenderer.cs
@@ -4,6 +4,7 @@ using System.Globalization;
 using System.IO;
 using System.Linq;
 using System.Net;
+using System.Text.RegularExpressions;
 using System.Threading.Tasks;
 using DiscordChatExporter.Core.Markdown;
 using DiscordChatExporter.Core.Markdown.Nodes;
@@ -145,7 +146,12 @@ namespace DiscordChatExporter.Core.Rendering
             // Link node
             if (node is LinkNode linkNode)
             {
-                return $"<a href=\"{Uri.EscapeUriString(linkNode.Url)}\">{HtmlEncode(linkNode.Title)}</a>";
+                // Extract message ID if the link points to a Discord message
+                var linkedMessageId = Regex.Match(linkNode.Url, "//discordapp.com/channels/[^/]+/\\d+/(\\d+)").Groups[1].Value;
+
+                return linkedMessageId.IsNullOrWhiteSpace()
+                    ? $"<a href=\"{Uri.EscapeUriString(linkNode.Url)}\">{HtmlEncode(linkNode.Title)}</a>"
+                    : $"<a href=\"{Uri.EscapeUriString(linkNode.Url)}\" onclick=\"scrollToMessage(event, '{linkedMessageId}')\">{HtmlEncode(linkNode.Title)}</a>";
             }
 
             // All other nodes - simply return source
diff --git a/DiscordChatExporter.Core.Rendering/Resources/HtmlShared.html b/DiscordChatExporter.Core.Rendering/Resources/HtmlShared.html
index b639ad2f..d1283ddb 100644
--- a/DiscordChatExporter.Core.Rendering/Resources/HtmlShared.html
+++ b/DiscordChatExporter.Core.Rendering/Resources/HtmlShared.html
@@ -15,6 +15,20 @@
         {{ ThemeStyleSheet }}
     </style>
 
+    {{~ # Local scripts ~}}
+    <script>
+        function scrollToMessage(event, id) {
+            var element = document.getElementById('message-' + id);
+
+            if (element !== null && element !== undefined) {
+                event.preventDefault();
+                element.scrollIntoView({
+                    behavior: 'smooth'
+                });
+            }
+        }
+    </script>
+
     {{~ # Syntax highlighting ~}}
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/{{HighlightJsStyleName}}.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
@@ -78,7 +92,7 @@
 
                 {{~ # Messages ~}}
                 {{~ for message in group.Messages ~}}
-                    <div class="chatlog__message {{if message.IsPinned }}chatlog__message--pinned{{ end }}" data-message-id="{{ message.Id }}">
+                    <div class="chatlog__message {{if message.IsPinned }}chatlog__message--pinned{{ end }}" data-message-id="{{ message.Id }}" id="message-{{ message.Id }}">
                     {{~ # Content ~}}
                     {{~ if message.Content ~}}
                         <div class="chatlog__content">