From 872ce801a0565847faed39fa1d51516e7ba75492 Mon Sep 17 00:00:00 2001
From: Noel <buechler.noel@outlook.com>
Date: Wed, 17 Aug 2022 23:04:47 +0200
Subject: [PATCH] revert: "refactor(website): use mantine code blocks" (#8514)

---
 packages/website/package.json                 |  2 --
 .../website/src/components/DocContainer.tsx   | 12 ++++++---
 .../website/src/components/tsdoc/TSDoc.tsx    | 21 ++++++++++-----
 yarn.lock                                     | 26 -------------------
 4 files changed, 23 insertions(+), 38 deletions(-)

diff --git a/packages/website/package.json b/packages/website/package.json
index d032176a8..b4161f693 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -54,7 +54,6 @@
 		"@mantine/hooks": "^5.1.6",
 		"@mantine/next": "^5.1.6",
 		"@mantine/nprogress": "^5.1.6",
-		"@mantine/prism": "^5.1.6",
 		"@mantine/spotlight": "^5.1.6",
 		"@microsoft/api-extractor-model": "^7.23.0",
 		"@microsoft/tsdoc": "0.14.1",
@@ -91,7 +90,6 @@
 		"eslint-plugin-react-hooks": "^4.6.0",
 		"happy-dom": "^6.0.4",
 		"prettier": "^2.7.1",
-		"prism-react-renderer": "^1.3.5",
 		"typescript": "^4.7.4",
 		"unocss": "^0.45.6",
 		"vercel": "^28.0.1",
diff --git a/packages/website/src/components/DocContainer.tsx b/packages/website/src/components/DocContainer.tsx
index df2d3229c..7a868a893 100644
--- a/packages/website/src/components/DocContainer.tsx
+++ b/packages/website/src/components/DocContainer.tsx
@@ -1,8 +1,9 @@
 import { Group, Stack, Title, Text, Box } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
-import { Prism } from '@mantine/prism';
 import type { ReactNode } from 'react';
 import { VscListSelection, VscSymbolParameter } from 'react-icons/vsc';
+import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { HyperlinkedText } from './HyperlinkedText';
 import { Section } from './Section';
 import { TypeParamTable } from './TypeParamTable';
@@ -50,9 +51,14 @@ export function DocContainer({
 			</Section>
 
 			<Box px="xs" pb="xs">
-				<Prism language="typescript" colorScheme="dark">
+				<SyntaxHighlighter
+					wrapLongLines
+					language="typescript"
+					style={vscDarkPlus}
+					codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
+				>
 					{excerpt}
-				</Prism>
+				</SyntaxHighlighter>
 			</Box>
 
 			{extendsTokens?.length ? (
diff --git a/packages/website/src/components/tsdoc/TSDoc.tsx b/packages/website/src/components/tsdoc/TSDoc.tsx
index a9e2170b4..cb705a50e 100644
--- a/packages/website/src/components/tsdoc/TSDoc.tsx
+++ b/packages/website/src/components/tsdoc/TSDoc.tsx
@@ -1,9 +1,9 @@
-import { Anchor, Box, Code, Text } from '@mantine/core';
-import { Prism } from '@mantine/prism';
+import { Anchor, Box, Text } from '@mantine/core';
 import { DocNodeKind, StandardTags } from '@microsoft/tsdoc';
 import Link from 'next/link';
-import type { Language } from 'prism-react-renderer';
 import type { ReactNode } from 'react';
+import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { BlockComment } from './BlockComment';
 import type { DocBlockJSON } from '~/DocModel/comment/CommentBlock';
 import type { AnyDocNodeJSON } from '~/DocModel/comment/CommentNode';
@@ -61,17 +61,24 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 			case DocNodeKind.CodeSpan: {
 				const { code } = node as DocFencedCodeJSON;
 				return (
-					<Code key={idx} className="inline text-sm font-mono">
+					<pre key={idx} className="inline">
 						{code}
-					</Code>
+					</pre>
 				);
 			}
 			case DocNodeKind.FencedCode: {
 				const { language, code } = node as DocFencedCodeJSON;
 				return (
-					<Prism key={idx} language={language as Language} withLineNumbers colorScheme="dark">
+					<SyntaxHighlighter
+						key={idx}
+						wrapLines
+						wrapLongLines
+						language={language}
+						style={vscDarkPlus}
+						codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
+					>
 						{code}
-					</Prism>
+					</SyntaxHighlighter>
 				);
 			}
 			case DocNodeKind.Block: {
diff --git a/yarn.lock b/yarn.lock
index 2f2b991bd..7f03f5385 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1980,7 +1980,6 @@ __metadata:
     "@mantine/hooks": ^5.1.6
     "@mantine/next": ^5.1.6
     "@mantine/nprogress": ^5.1.6
-    "@mantine/prism": ^5.1.6
     "@mantine/spotlight": ^5.1.6
     "@microsoft/api-extractor-model": ^7.23.0
     "@microsoft/tsdoc": 0.14.1
@@ -2010,7 +2009,6 @@ __metadata:
     happy-dom: ^6.0.4
     next: ^12.2.5
     prettier: ^2.7.1
-    prism-react-renderer: ^1.3.5
     react: ^18.2.0
     react-dom: ^18.2.0
     react-icons: ^4.4.0
@@ -2760,21 +2758,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mantine/prism@npm:^5.1.6":
-  version: 5.1.6
-  resolution: "@mantine/prism@npm:5.1.6"
-  dependencies:
-    "@mantine/utils": 5.1.6
-    prism-react-renderer: ^1.2.1
-  peerDependencies:
-    "@mantine/core": 5.1.6
-    "@mantine/hooks": 5.1.6
-    react: ">=16.8.0"
-    react-dom: ">=16.8.0"
-  checksum: 6fc07858c77b9b57a085e6b2b502612cdb5dcb3417f9c044a8974a5e113013dcb88bff4769853abcb830bd18e419d5c088800f634f6acfe0f67229122137e779
-  languageName: node
-  linkType: hard
-
 "@mantine/spotlight@npm:^5.1.6":
   version: 5.1.6
   resolution: "@mantine/spotlight@npm:5.1.6"
@@ -12763,15 +12746,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prism-react-renderer@npm:^1.2.1, prism-react-renderer@npm:^1.3.5":
-  version: 1.3.5
-  resolution: "prism-react-renderer@npm:1.3.5"
-  peerDependencies:
-    react: ">=0.14.9"
-  checksum: c18806dcbc4c0b4fd6fd15bd06b4f7c0a6da98d93af235c3e970854994eb9b59e23315abb6cfc29e69da26d36709a47e25da85ab27fed81b6812f0a52caf6dfa
-  languageName: node
-  linkType: hard
-
 "prismjs@npm:^1.27.0":
   version: 1.28.0
   resolution: "prismjs@npm:1.28.0"