From 43ba708669577c9c9fa3af81159e6dd73d27aa9e Mon Sep 17 00:00:00 2001
From: Puyodead1 <puyodead@proton.me>
Date: Wed, 20 Sep 2023 16:58:43 -0400
Subject: [PATCH] tweaks and fixes for codeblocks

---
 .../{markdown/plugins => }/Codeblock.tsx      |  59 +++----
 src/components/markdown/Markdown.tsx          |   2 +-
 ...emarkRenderer.tsx => MarkdownRenderer.tsx} |  32 ++--
 src/components/markdown/prism.css             | 140 ----------------
 src/components/markdown/style.ts              | 154 ++++++++++++++++++
 src/components/messaging/Message.tsx          |   2 +-
 6 files changed, 202 insertions(+), 187 deletions(-)
 rename src/components/{markdown/plugins => }/Codeblock.tsx (51%)
 rename src/components/markdown/{RemarkRenderer.tsx => MarkdownRenderer.tsx} (84%)
 delete mode 100644 src/components/markdown/prism.css
 create mode 100644 src/components/markdown/style.ts

diff --git a/src/components/markdown/plugins/Codeblock.tsx b/src/components/Codeblock.tsx
similarity index 51%
rename from src/components/markdown/plugins/Codeblock.tsx
rename to src/components/Codeblock.tsx
index 5f8e717..ce4b790 100644
--- a/src/components/markdown/plugins/Codeblock.tsx
+++ b/src/components/Codeblock.tsx
@@ -3,38 +3,26 @@
 
 import React from "react";
 import styled from "styled-components";
-import Tooltip from "../../Tooltip";
-
-/**
- * Base codeblock styles
- */
-const Base = styled.pre`
-	padding: 1em;
-	overflow-x: scroll;
-	background: var(--background-secondary);
-	border-radius: 4px;
-`;
+import Tooltip from "./Tooltip";
 
 /**
  * Copy codeblock contents button styles
  */
-const Lang = styled.div`
-	width: fit-content;
+const Copy = styled.a`
 	position: absolute;
-	right: 60px;
+	top: 10px;
+	right: 10px;
 
-	a {
-		color: var(--text);
-		cursor: pointer;
-		padding: 2px 6px;
-		font-weight: 600;
-		user-select: none;
-		display: inline-block;
-		background: var(--background-tertiary);
+	color: var(--text);
+	cursor: pointer;
+	padding: 2px 6px;
+	font-weight: 600;
+	user-select: none;
+	display: inline-block;
+	background: var(--background-tertiary);
 
-		font-size: 10px;
-		text-transform: uppercase;
-	}
+	font-size: 10px;
+	text-transform: uppercase;
 `;
 
 interface Props {
@@ -46,7 +34,7 @@ interface Props {
  * Render a codeblock with copy text button
  */
 
-function RenderCodeblock(props: Props) {
+function CodeBlock(props: Props) {
 	const ref = React.useRef<HTMLPreElement>(null);
 
 	let text = "Copy";
@@ -60,15 +48,18 @@ function RenderCodeblock(props: Props) {
 	}, [ref]);
 
 	return (
-		<Base ref={ref}>
-			<Lang>
-				<Tooltip title="Copy to Clipboard" placement="top">
-					<a onClick={onCopy}>{text}</a>
-				</Tooltip>
-			</Lang>
+		<pre
+			ref={ref}
+			style={{
+				position: "relative",
+			}}
+		>
+			<Tooltip title="Copy to Clipboard" placement="top">
+				<Copy onClick={onCopy}>{text}</Copy>
+			</Tooltip>
 			{props.children}
-		</Base>
+		</pre>
 	);
 }
 
-export default RenderCodeblock;
+export default CodeBlock;
diff --git a/src/components/markdown/Markdown.tsx b/src/components/markdown/Markdown.tsx
index f13ca0b..8be3996 100644
--- a/src/components/markdown/Markdown.tsx
+++ b/src/components/markdown/Markdown.tsx
@@ -1,7 +1,7 @@
 import { Suspense, lazy } from "react";
 import { withErrorBoundary } from "react-use-error-boundary";
 
-const Renderer = lazy(() => import("./RemarkRenderer"));
+const Renderer = lazy(() => import("./MarkdownRenderer"));
 
 export interface MarkdownProps {
 	content: string;
diff --git a/src/components/markdown/RemarkRenderer.tsx b/src/components/markdown/MarkdownRenderer.tsx
similarity index 84%
rename from src/components/markdown/RemarkRenderer.tsx
rename to src/components/markdown/MarkdownRenderer.tsx
index 04338c9..0c30751 100644
--- a/src/components/markdown/RemarkRenderer.tsx
+++ b/src/components/markdown/MarkdownRenderer.tsx
@@ -1,11 +1,12 @@
 import React from "react";
 import { ReactMarkdown } from "react-markdown/lib/react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { dracula } from "react-syntax-highlighter/dist/esm/styles/prism";
 import remarkGfm from "remark-gfm";
 import styled from "styled-components";
+import CodeBlock from "../Codeblock";
 import Link from "../Link";
 import { MarkdownProps } from "./Markdown";
+import style from "./style";
 
 const Container = styled.div`
 	// remove the excessive left padding in lists
@@ -22,6 +23,14 @@ const Container = styled.div`
 		border-radius: 4px;
 		border-inline-start: 4px solid var(--background-tertiary);
 	}
+
+	code.inline {
+		background-color: var(--background-secondary);
+		padding: 2px 4px;
+		border-radius: 4px;
+		font-size: 80%;
+		font-family: var(--font-family-code);
+	}
 `;
 
 /**
@@ -92,17 +101,18 @@ export default React.memo(({ content }: MarkdownProps) => {
 				components={{
 					code({ node, inline, className, children, ...props }) {
 						const match = /language-(\w+)/.exec(className || "");
-						return !inline && match ? (
-							<SyntaxHighlighter
-								children={String(children).replace(/\n$/, "")}
-								language={match[1]}
-								// @ts-expect-error oh fk off typescript, dark is ok for you but not dracula? ok
-								style={dracula}
-								PreTag="section" // parent tag
-								{...props}
-							/>
+						return !inline ? (
+							<CodeBlock>
+								<SyntaxHighlighter
+									children={String(children).replace(/\n$/, "")}
+									language={match ? match[1] : undefined}
+									// @ts-expect-error types are broken
+									style={style}
+									{...props}
+								/>
+							</CodeBlock>
 						) : (
-							<code className={className} {...props}>
+							<code className="inline" {...props}>
 								{children}
 							</code>
 						);
diff --git a/src/components/markdown/prism.css b/src/components/markdown/prism.css
deleted file mode 100644
index 2861b57..0000000
--- a/src/components/markdown/prism.css
+++ /dev/null
@@ -1,140 +0,0 @@
-/*
- * Synthwave '84 Theme originally by Robb Owen [@Robb0wen] for Visual Studio Code
- * Demo: https://marc.dev/demo/prism-synthwave84
- *
- * Ported for PrismJS by Marc Backes [@themarcba]
- */
-
-code[class*="language-"],
-pre[class*="language-"] {
-	color: #f92aad;
-	text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3;
-	background: none;
-	font-family: var(--font-family-code);
-	font-size: 1em;
-	text-align: left;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-	word-wrap: normal;
-	line-height: 1.5;
-
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
-	tab-size: 4;
-
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-	padding: 1em;
-	margin: 0.5em 0;
-	overflow: auto;
-}
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-	background-color: transparent !important;
-	background-image: linear-gradient(to bottom, #2a2139 75%, #34294f);
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-	padding: 0.1em;
-	border-radius: 0.3em;
-	white-space: normal;
-}
-
-.token.comment,
-.token.block-comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-	color: #8e8e8e;
-}
-
-.token.punctuation {
-	color: #ccc;
-}
-
-.token.tag,
-.token.attr-name,
-.token.namespace,
-.token.number,
-.token.unit,
-.token.hexcode,
-.token.deleted {
-	color: #e2777a;
-}
-
-.token.property,
-.token.selector {
-	color: #72f1b8;
-	text-shadow: 0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475;
-}
-
-.token.function-name {
-	color: #6196cc;
-}
-
-.token.boolean,
-.token.selector .token.id,
-.token.function {
-	color: #fdfdfd;
-	text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975;
-}
-
-.token.class-name {
-	color: #fff5f6;
-	text-shadow: 0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75;
-}
-
-.token.constant,
-.token.symbol {
-	color: #f92aad;
-	text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3;
-}
-
-.token.important,
-.token.atrule,
-.token.keyword,
-.token.selector .token.class,
-.token.builtin {
-	color: #f4eee4;
-	text-shadow: 0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575;
-}
-
-.token.string,
-.token.char,
-.token.attr-value,
-.token.regex,
-.token.variable {
-	color: #f87c32;
-}
-
-.token.operator,
-.token.entity,
-.token.url {
-	color: #67cdcc;
-}
-
-.token.important,
-.token.bold {
-	font-weight: bold;
-}
-
-.token.italic {
-	font-style: italic;
-}
-
-.token.entity {
-	cursor: help;
-}
-
-.token.inserted {
-	color: green;
-}
diff --git a/src/components/markdown/style.ts b/src/components/markdown/style.ts
new file mode 100644
index 0000000..7b2c830
--- /dev/null
+++ b/src/components/markdown/style.ts
@@ -0,0 +1,154 @@
+// @flow
+// Converted automatically using ./tools/themeFromVsCode
+export default {
+	'code[class*="language-"]': {
+		color: "#c5c8c6",
+		textShadow: "0 1px rgba(0, 0, 0, 0.3)",
+		fontFamily: "var(--font-family-code)",
+		direction: "ltr",
+		textAlign: "left",
+		whiteSpace: "pre",
+		wordSpacing: "normal",
+		wordBreak: "normal",
+		lineHeight: "1.5",
+		MozTabSize: "4",
+		OTabSize: "4",
+		tabSize: "4",
+		WebkitHyphens: "none",
+		MozHyphens: "none",
+		msHyphens: "none",
+		hyphens: "none",
+	},
+	'pre[class*="language-"]': {
+		color: "#c5c8c6",
+		textShadow: "0 1px rgba(0, 0, 0, 0.3)",
+		fontFamily: "var(--font-family-code)",
+		direction: "ltr",
+		textAlign: "left",
+		whiteSpace: "pre",
+		wordSpacing: "normal",
+		wordBreak: "normal",
+		lineHeight: "1.5",
+		MozTabSize: "4",
+		OTabSize: "4",
+		tabSize: "4",
+		WebkitHyphens: "none",
+		MozHyphens: "none",
+		msHyphens: "none",
+		hyphens: "none",
+		padding: "1em",
+		margin: ".5em 0",
+		overflow: "auto",
+		borderRadius: "0.3em",
+		background: "#1e1e1e",
+	},
+	':not(pre) > code[class*="language-"]': {
+		background: "#1e1e1e",
+		padding: ".1em",
+		borderRadius: ".3em",
+	},
+	comment: {
+		color: "#6a9955",
+	},
+	prolog: {
+		color: "#6a9955",
+	},
+	doctype: {
+		color: "#6a9955",
+	},
+	cdata: {
+		color: "#6a9955",
+	},
+	punctuation: {
+		color: "#569cd6",
+	},
+	".namespace": {
+		Opacity: ".7",
+	},
+	property: {
+		color: "#ce9178",
+	},
+	keyword: {
+		color: "#569cd6",
+	},
+	tag: {
+		color: "#569cd6",
+	},
+	"class-name": {
+		color: "#FFFFB6",
+	},
+	boolean: {
+		color: "#99CC99",
+	},
+	constant: {
+		color: "#99CC99",
+	},
+	symbol: {
+		color: "#f92672",
+	},
+	deleted: {
+		color: "#ce9178",
+	},
+	number: {
+		color: "#FF73FD",
+	},
+	selector: {
+		color: "#A8FF60",
+	},
+	"attr-name": {
+		color: "@",
+	},
+	string: {
+		color: "#ce9178",
+	},
+	char: {
+		color: "#A8FF60",
+	},
+	builtin: {
+		color: "#569cd6",
+	},
+	inserted: {
+		color: "#A8FF60",
+	},
+	variable: {
+		color: "#C6C5FE",
+	},
+	operator: {
+		color: "##ce9178",
+	},
+	entity: {
+		color: "#FFFFB6",
+		cursor: "help",
+	},
+	url: {
+		color: "#96CBFE",
+	},
+	".language-css .token.string": {
+		color: "#99CC99",
+	},
+	".style .token.string": {
+		color: "#99CC99",
+	},
+	atrule: {
+		color: "#F9EE98",
+	},
+	"attr-value": {
+		color: "#F9EE98",
+	},
+	function: {
+		color: "#569cd6",
+	},
+	regex: {
+		color: "#E9C062",
+	},
+	important: {
+		color: "#fd971f",
+		fontWeight: "bold",
+	},
+	bold: {
+		fontWeight: "bold",
+	},
+	italic: {
+		fontStyle: "italic",
+	},
+};
diff --git a/src/components/messaging/Message.tsx b/src/components/messaging/Message.tsx
index 5423ac5..006ff6a 100644
--- a/src/components/messaging/Message.tsx
+++ b/src/components/messaging/Message.tsx
@@ -3,7 +3,7 @@ import { memo } from "react";
 import { MessageLike } from "../../stores/objects/Message";
 import { QueuedMessageStatus } from "../../stores/objects/QueuedMessage";
 import Avatar from "../Avatar";
-import Markdown from "../markdown/RemarkRenderer";
+import Markdown from "../markdown/MarkdownRenderer";
 import MessageAttachment from "./MessageAttachment";
 import MessageAuthor from "./MessageAuthor";
 import MessageBase, { MessageContent, MessageDetails, MessageInfo } from "./MessageBase";