From 233cbce772c01624bc77c58f246777e579ec079e Mon Sep 17 00:00:00 2001
From: biast12 <53872542+biast12@users.noreply.github.com>
Date: Mon, 31 Aug 2026 22:35:50 +0200
Subject: [PATCH] Fix: Tag Message Content preview does not render Markdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The tag editor's Message Content preview rendered the raw string, so `**bold**` showed literal asterisks — even though the bot posts that string to Discord as message content, where Discord does render it. The embed preview directly below it in the same modal already rendered correctly, so the modal contradicted itself.
---
 .../src/components/discord/DiscordEmbed.tsx   | 25 +++++++++++-------
 .../src/components/modals/TagEditorModal.tsx  | 26 ++++++++++++-------
 2 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/discord/DiscordEmbed.tsx b/frontend/src/components/discord/DiscordEmbed.tsx
index 807a6942..86979495 100644
--- a/frontend/src/components/discord/DiscordEmbed.tsx
+++ b/frontend/src/components/discord/DiscordEmbed.tsx
@@ -47,16 +47,19 @@ const DiscordEmbedComponent: FC<DiscordEmbedProps> = ({ embed, entities, classNa
       {embed.title && (
         <div className="mb-2">
           {embed.url && isSafeUrl(embed.url) ? (
-            <a
-              href={embed.url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-blue-400 hover:underline font-semibold text-lg"
-            >
-              {embed.title}
+            <a href={embed.url} target="_blank" rel="noopener noreferrer">
+              <DiscordContent
+                content={embed.title}
+                entities={entities}
+                className="text-blue-400! hover:underline font-semibold text-lg"
+              />
             </a>
           ) : (
-            <h3 className="text-white font-semibold text-lg">{embed.title}</h3>
+            <DiscordContent
+              content={embed.title}
+              entities={entities}
+              className="text-white font-semibold text-lg"
+            />
           )}
         </div>
       )}
@@ -76,7 +79,11 @@ const DiscordEmbedComponent: FC<DiscordEmbedProps> = ({ embed, entities, classNa
               key={index}
               className={field.inline ? "inline-block mr-4 mb-2 min-w-37.5 max-w-50" : "mb-2"}
             >
-              <div className="text-white font-semibold text-sm mb-1">{field.name}</div>
+              <DiscordContent
+                content={field.name}
+                entities={entities}
+                className="text-white font-semibold text-sm mb-1"
+              />
               <DiscordContent
                 content={field.value}
                 entities={entities}
diff --git a/frontend/src/components/modals/TagEditorModal.tsx b/frontend/src/components/modals/TagEditorModal.tsx
index 69fc7e81..145848f3 100644
--- a/frontend/src/components/modals/TagEditorModal.tsx
+++ b/frontend/src/components/modals/TagEditorModal.tsx
@@ -9,6 +9,7 @@ import ColourSelect from "@/components/ColourSelect";
 import Collapsible from "@/components/Collapsible";
 import EmbedFieldsEditor from "@/components/EmbedFieldsEditor";
 import EmbedPreview from "@/components/EmbedPreview";
+import DiscordContent from "@/components/discord/DiscordContent";
 import DateTimePicker from "@/components/DateTimePicker";
 import { useKBArticles } from "@/hooks/queries/useKB";
 import { parseEmbedTimestamp, serializeEmbedTimestamp } from "@/lib/embed-timestamp";
@@ -161,6 +162,9 @@ const TagEditorModal: FC<TagEditorModalProps> = ({
 
   const linkedArticle = kbArticleId != null ? kbArticles?.find((a) => a.id === kbArticleId) : null;
 
+  const hasContentPreview = content.trim().length > 0;
+  const hasArticlePreview = !!linkedArticle?.content?.trim();
+
   const kbArticleOptions = (kbArticles ?? [])
     .filter((a) => a.published)
     .map((a) => ({
@@ -408,12 +412,13 @@ const TagEditorModal: FC<TagEditorModalProps> = ({
             {linkToKB && linkedArticle ? (
               <div className="mt-4">
                 <p className="text-xs text-gray-300 mb-2">Showing linked KB article preview:</p>
-                {linkedArticle.content && (
-                  <p className="text-sm whitespace-pre-wrap bg-[#242429] rounded p-3 text-gray-200">
-                    {linkedArticle.content}
-                  </p>
+                {hasArticlePreview && (
+                  <DiscordContent
+                    content={linkedArticle.content ?? ""}
+                    className="text-sm bg-[#242429] rounded p-3"
+                  />
                 )}
-                {!linkedArticle.content && (
+                {!hasArticlePreview && (
                   <p className="text-gray-300 text-sm">
                     Article has no text content (may use an embed).
                   </p>
@@ -421,13 +426,14 @@ const TagEditorModal: FC<TagEditorModalProps> = ({
               </div>
             ) : (
               <>
-                {content && (
-                  <p className="mt-4 text-sm whitespace-pre-wrap bg-[#242429] rounded p-3">
-                    {content}
-                  </p>
+                {hasContentPreview && (
+                  <DiscordContent
+                    content={content}
+                    className="mt-4 text-sm bg-[#242429] rounded p-3"
+                  />
                 )}
                 {useEmbed && <EmbedPreview embed={embed} />}
-                {!content && !useEmbed && (
+                {!hasContentPreview && !useEmbed && (
                   <p className="mt-4 text-gray-300 text-sm">
                     Add message content or enable an embed to see a preview.
                   </p>