[HTML] Jump to linked Discord messages

Closes #128
This commit is contained in:
Alexey Golub 2019-09-14 20:28:27 +03:00
parent 60f46bad29
commit a2beb9836b
2 changed files with 22 additions and 2 deletions

View file

@ -4,6 +4,7 @@ using System.Globalization;
using System.IO; using System.IO;
using System.Linq; using System.Linq;
using System.Net; using System.Net;
using System.Text.RegularExpressions;
using System.Threading.Tasks; using System.Threading.Tasks;
using DiscordChatExporter.Core.Markdown; using DiscordChatExporter.Core.Markdown;
using DiscordChatExporter.Core.Markdown.Nodes; using DiscordChatExporter.Core.Markdown.Nodes;
@ -145,7 +146,12 @@ namespace DiscordChatExporter.Core.Rendering
// Link node // Link node
if (node is LinkNode linkNode) 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 // All other nodes - simply return source

View file

@ -15,6 +15,20 @@
{{ ThemeStyleSheet }} {{ ThemeStyleSheet }}
</style> </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 ~}} {{~ # Syntax highlighting ~}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/{{HighlightJsStyleName}}.min.css"> <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> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
@ -78,7 +92,7 @@
{{~ # Messages ~}} {{~ # Messages ~}}
{{~ for message in group.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 ~}} {{~ # Content ~}}
{{~ if message.Content ~}} {{~ if message.Content ~}}
<div class="chatlog__content"> <div class="chatlog__content">