3 files changed, 25 insertions, 12 deletions
diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx
new file mode 100644
index 0000000..41c5ef0
--- /dev/null
+++ b/src/components/CodeBlock.tsx
@@ -0,0 +1,21 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { findByPropsLazy } from "@webpack";
+import { Parser } from "@webpack/common";
+
+const CodeContainerClasses = findByPropsLazy("markup", "codeContainer");
+
+/**
+ * Renders code in a Discord codeblock
+ */
+export function CodeBlock(props: { content?: string, lang: string; }) {
+    return (
+        <div className={CodeContainerClasses.markup}>
+            {Parser.defaultRules.codeBlock.react(props, null, {})}
+        </div>
+    );
+}
diff --git a/src/components/VencordSettings/PatchHelperTab.tsx b/src/components/VencordSettings/PatchHelperTab.tsx
index d5bd94c..0b869a5 100644
--- a/src/components/VencordSettings/PatchHelperTab.tsx
+++ b/src/components/VencordSettings/PatchHelperTab.tsx
@@ -17,6 +17,7 @@
 */
 
 import { CheckedTextInput } from "@components/CheckedTextInput";
+import { CodeBlock } from "@components/CodeBlock";
 import { debounce } from "@utils/debounce";
 import { Margins } from "@utils/margins";
 import { canonicalizeMatch, canonicalizeReplace } from "@utils/patches";
@@ -299,7 +300,7 @@ function PatchHelper() {
             {!!(find && match && replacement) && (
                 <>
                     <Forms.FormTitle className={Margins.top20}>Code</Forms.FormTitle>
-                    <div style={{ userSelect: "text" }}>{Parser.parse(makeCodeblock(code, "ts"))}</div>
+                    <CodeBlock lang="js" content={code} />
                     <Button onClick={() => Clipboard.copy(code)}>Copy to Clipboard</Button>
                 </>
             )}
diff --git a/src/plugins/viewRaw.tsx b/src/plugins/viewRaw.tsx
index 181865e..d9d1a44 100644
--- a/src/plugins/viewRaw.tsx
+++ b/src/plugins/viewRaw.tsx
@@ -19,6 +19,7 @@
 import { addContextMenuPatch, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
 import { addButton, removeButton } from "@api/MessagePopover";
 import { definePluginSettings } from "@api/Settings";
+import { CodeBlock } from "@components/CodeBlock";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
 import { Devs } from "@utils/constants";
@@ -26,11 +27,9 @@ import { Margins } from "@utils/margins";
 import { copyWithToast } from "@utils/misc";
 import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import definePlugin, { OptionType } from "@utils/types";
-import { findByPropsLazy } from "@webpack";
-import { Button, ChannelStore, Forms, Menu, Parser, Text } from "@webpack/common";
+import { Button, ChannelStore, Forms, Menu, Text } from "@webpack/common";
 import { Message } from "discord-types/general";
 
-const CodeContainerClasses = findByPropsLazy("markup", "codeContainer");
 
 const CopyIcon = () => {
     return <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" width="22" height="22">
@@ -61,14 +60,6 @@ function cleanMessage(msg: Message) {
     return clone;
 }
 
-function CodeBlock(props: { content: string, lang: string; }) {
-    return (
-        <div className={CodeContainerClasses.markup}>
-            {Parser.defaultRules.codeBlock.react(props, null, {})}
-        </div>
-    );
-}
-
 function openViewRawModal(json: string, type: string, msgContent?: string) {
     const key = openModal(props => (
         <ErrorBoundary>