From 01452ff62fd65bbe4fd88e259dd71a92faeef78b Mon Sep 17 00:00:00 2001
From: G30 <50341825+silentoplayz@users.noreply.github.com>
Date: Mon, 24 Aug 2026 07:34:07 -0400
Subject: [PATCH] fix: mount the code editor in its own container so duplicated
 message renders don't collide (#27740)

---
 src/lib/components/channel/Messages/Message.svelte    | 2 +-
 src/lib/components/channel/PinnedMessagesModal.svelte | 1 +
 src/lib/components/common/CodeEditor.svelte           | 9 +++++++--
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/channel/Messages/Message.svelte b/src/lib/components/channel/Messages/Message.svelte
index b14d79f9ec..2694a124d9 100644
--- a/src/lib/components/channel/Messages/Message.svelte
+++ b/src/lib/components/channel/Messages/Message.svelte
@@ -49,7 +49,7 @@
 
 	export let showUserProfile = true;
 	export let thread = false;
-	export let id = null;
+	export let id: string | null = null;
 
 	export let replyToMessage = false;
 	export let disabled = false;
diff --git a/src/lib/components/channel/PinnedMessagesModal.svelte b/src/lib/components/channel/PinnedMessagesModal.svelte
index 45316c3609..d83fb463d1 100644
--- a/src/lib/components/channel/PinnedMessagesModal.svelte
+++ b/src/lib/components/channel/PinnedMessagesModal.svelte
@@ -103,6 +103,7 @@
 								{:else}
 									{#each pinnedMessages as message, messageIdx (message.id)}
 										<Message
+											id="pinned"
 											className="rounded-xl px-2"
 											{message}
 											{channel}
diff --git a/src/lib/components/common/CodeEditor.svelte b/src/lib/components/common/CodeEditor.svelte
index be81ef10e6..a9078d8b21 100644
--- a/src/lib/components/common/CodeEditor.svelte
+++ b/src/lib/components/common/CodeEditor.svelte
@@ -79,6 +79,7 @@
 	export let lang = '';
 
 	let codeEditor: EditorView | null = null;
+	let codeEditorContainerElement: HTMLDivElement | undefined = undefined;
 
 	export const focus = () => {
 		codeEditor?.focus();
@@ -249,7 +250,7 @@ print("${endTag}")
 				doc: _value,
 				extensions: extensions
 			}),
-			parent: document.getElementById(`code-textarea-${id}`)
+			parent: codeEditorContainerElement
 		});
 
 		if (isDarkMode) {
@@ -319,4 +320,8 @@ print("${endTag}")
 	});
 </script>
 
-<div id="code-textarea-{id}" class="{className} h-full w-full min-w-0 overflow-hidden" />
+<div
+	bind:this={codeEditorContainerElement}
+	id="code-textarea-{id}"
+	class="{className} h-full w-full min-w-0 overflow-hidden"
+/>