New syntax highlighter

package.json

@@ -13,7 +13,9 @@
 	"prepare": "husky",
 	"start": "wp-scripts start",
 	"test:e2e": "wp-scripts test-playwright",
+	"test:e2e:debug": "wp-scripts test-playwright --ui",
 	"test:js": "wp-scripts test-unit-js",
+	"test:js:update": "wp-scripts test-unit-js --updateSnapshot",
 	"test:performance": "wp-scripts test-playwright --config tests/performance/playwright.config.ts",
 	"test:performance:merge-reports": "playwright merge-reports --reporter tests/performance/config/performance-reporter.ts ./blob-report",
 	"test:performance:results": "node tests/performance/cli/results.js",
@@ -29,6 +31,7 @@
   },
   "dependencies": {
 	"@testing-library/user-event": "^14.5.2",
+	"@types/react-highlight": "^0.12.8",
 	"@wordpress/api-fetch": "^6.48.0",
 	"@wordpress/components": "^27.1.0",
 	"@wordpress/data": "^9.23.0",
@@ -39,7 +42,9 @@
 	"dotenv": "^16.4.5",
 	"react": "18.2.0",
 	"react-dom": "18.2.0",
-	"react-syntax-highlighter": "^15.5.0",
+	"react-highlight": "^0.15.0",
+	"react-highlight-syntax": "^1.2.1",
+	"react-syntax-highlighter": "^15.4.3",
 	"react-test-renderer": "^18.2.0",
 	"ts-loader": "^9.5.1",
 	"typescript": "^5.4.2"
@@ -50,7 +55,7 @@
 	"@testing-library/react": "14.2.2",
 	"@types/jest": "^29.5.12",
 	"@types/node": "^20.12.5",
-	"@types/react-syntax-highlighter": "^15.5.11",
+	"@types/react-syntax-highlighter": "15.5.6",
 	"@types/wordpress__components": "^23.0.11",
 	"@wordpress/e2e-test-utils-playwright": "^0.22.0",
 	"@wordpress/env": "^9.7.0",

playwright.config.ts

@@ -17,7 +17,7 @@ export default defineConfig({
 	use: {
 		baseURL: process.env.WP_BASE_URL,
 		trace: 'on-first-retry',
-		permissions: ['clipboard-read'],
+		permissions: ['clipboard-write', 'clipboard-read'],
 	},
 
 	projects: [

src/components/snippets/JsSnippet.tsx

@@ -1,7 +1,6 @@
 import Snippet from './Snippet';
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import Clipboard from '../common/Clipboard';
 
 const JsSnippet = ({ flag }: { flag: string }) => {
 	const jsSnippet = useMemo(() => {
@@ -18,8 +17,7 @@ domReady(function () {
 	return (
 		<div className="mr-feature-flag-js-snippet-container">
 			<h3>{__('JavaScript Snippet', 'codeb-feature-flags')}</h3>
-			<Clipboard text={jsSnippet} />
-			<Snippet data={jsSnippet} language={'typescript'} />
+			<Snippet data={jsSnippet} language="JavaScript" />
 		</div>
 	);
 };

src/components/snippets/PhpSnippet.tsx

@@ -1,7 +1,6 @@
 import Snippet from './Snippet';
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import Clipboard from '../common/Clipboard';
 
 const PhpSnippet = ({ flag }: { flag: string }) => {
 	const phpSnippet = useMemo(() => {
@@ -13,8 +12,7 @@ if ( class_exists( '\\CodeB\\FeatureFlags\\Flag' ) && Flag::is_enabled( '${flag}
 	return (
 		<div className="mr-feature-flag-php-snippet-container">
 			<h3>{__('PHP Snippet', 'codeb-feature-flags')}</h3>
-			<Clipboard text={phpSnippet} />
-			<Snippet data={phpSnippet} language={'php'} />
+			<Snippet data={phpSnippet} language="PHP" />
 		</div>
 	);
 };

src/components/snippets/Snippet.tsx

@@ -1,17 +1,16 @@
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { a11yDark } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
+import ReactHighlightSyntax from 'react-highlight-syntax';
+import type { Language } from 'react-highlight-syntax';
 
-const Snippet = ({
-	data,
-	language,
-}: {
-	data: string;
-	language: string;
-}): JSX.Element => {
+const Snippet = ({ data, language }: { data: string; language: Language }) => {
 	return (
-		<SyntaxHighlighter language={language} style={a11yDark}>
+		<ReactHighlightSyntax
+			theme={'Base16Darcula'}
+			language={language}
+			copy={true}
+			copyBtnTheme={'Dark'}
+		>
 			{data}
-		</SyntaxHighlighter>
+		</ReactHighlightSyntax>
 	);
 };
 

src/components/snippets/TsSupport.tsx

@@ -1,7 +1,5 @@
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import Clipboard from '../common/Clipboard';
-
 import Snippet from './Snippet';
 
 const TsSupport = (): JSX.Element => {
@@ -30,8 +28,7 @@ export {};`;
 				<span className="codeb-feature-flags-slug"> src</span> directory
 				) and add the following declaration.
 			</p>
-			<Clipboard text={tsSnippet} />
-			<Snippet data={tsSnippet} language={'typescript'} />
+			<Snippet data={tsSnippet} language="TypeScript" />
 		</div>
 	);
 };