From 7c9285492cc767b438b889ef276e23a23482b531 Mon Sep 17 00:00:00 2001
From: Maxime Cannoodt <Maxime.Cannoodt@UGent.be>
Date: Tue, 16 Aug 2022 18:07:24 +0200
Subject: [PATCH] fix: :bug: fix highlight rendering with mixed formatting

---
 plugin                                           | 2 +-
 webapp/CHANGELOG.md                              | 4 ++++
 webapp/src/lib/marked/extensions.ts              | 7 +++++--
 webapp/src/lib/marked/renderers/Highlight.svelte | 2 +-
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/plugin b/plugin
index c727d49..699b2b9 160000
--- a/plugin
+++ b/plugin
@@ -1 +1 @@
-Subproject commit c727d49dd50eaf0a1acb9c8e4fe08c2a4cfcb9d5
+Subproject commit 699b2b93a6c31fb4e2bffebe33af97774e3a5c99
diff --git a/webapp/CHANGELOG.md b/webapp/CHANGELOG.md
index 5f9fad8..921ef72 100644
--- a/webapp/CHANGELOG.md
+++ b/webapp/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## [2022-08-16]
+
+- fix: 🐛 Fix highlights not rendering correctly when mixed with other formatting.
+
 ## [2022-08-11]
 
 - feat: ✨ Users receive a unique error page when opening expired notes vs. wrong URL. 
diff --git a/webapp/src/lib/marked/extensions.ts b/webapp/src/lib/marked/extensions.ts
index 883877f..bd8ac31 100644
--- a/webapp/src/lib/marked/extensions.ts
+++ b/webapp/src/lib/marked/extensions.ts
@@ -61,13 +61,16 @@ const HighlightExtension = {
 	start(src: string) {
 		return src.match(/==/)?.index;
 	},
-	tokenizer(src: string) {
+	tokenizer(src: string): any {
 		const match = src.match(/^==(.+)==/);
+		const text = match ? match[1].trim() : '';
 		if (match) {
 			return {
 				type: 'highlight',
 				raw: match[0].trim(),
-				text: match[1].trim()
+				text: text,
+				// @ts-expect-error - marked types are wrong
+				tokens: this.lexer.inlineTokens(text, [])
 			};
 		}
 		return false;
diff --git a/webapp/src/lib/marked/renderers/Highlight.svelte b/webapp/src/lib/marked/renderers/Highlight.svelte
index ed0095c..757f837 100644
--- a/webapp/src/lib/marked/renderers/Highlight.svelte
+++ b/webapp/src/lib/marked/renderers/Highlight.svelte
@@ -2,4 +2,4 @@
 	export let text: string;
 </script>
 
-<span class="bg-[#ffff00]/[0.4]">{text}</span>
+<span class="bg-[#ffff00]/[0.4]"><slot /></span>