fix: ctrl+c on examples copies the whole text (#74)

* fixes to ctrl+c issue on code snippet * fixes to ctrl+c issue and line highlighting * fixes to ctrl+c issue and line highlighting * line highlighting changes * Update app/components/CodeSnippet/CodeSnippet.tsx * Update app/components/CodeSnippet/CodeSnippet.tsx --------- Co-authored-by: Zeel Rajodiya <[email protected]>
json-schema-org · Sep 22, 2024 · 9c7836f · 9c7836f
1 parent 6c6829c
commit 9c7836f
Showing 1 changed file with 6 additions and 11 deletions.
diff --git a/app/components/CodeSnippet/CodeSnippet.tsx b/app/components/CodeSnippet/CodeSnippet.tsx
@@ -2,9 +2,7 @@
 import SyntaxHighlighter from "react-syntax-highlighter";
 import {
   nightOwl,
-  atelierCaveLight,
   arduinoLight,
-  atelierEstuaryLight,
 } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import styles from "./CodeSnippet.module.css";
 import { CSSProperties, useState } from "react";
@@ -38,13 +36,7 @@ export default function CodeSnippet({
   }
 
   return (
-    <div
-      className={styles.codeSnippetContainer}
-      onCopy={(e) => {
-        e.preventDefault();
-        e.clipboardData.setData("text/plain", children);
-      }}
-    >
+    <div className={styles.codeSnippetContainer}>
       <div
         className={styles.copyButton}
         onClick={() => {
@@ -73,7 +65,7 @@ export default function CodeSnippet({
           paddingBlock: "10px",
         }}
         wrapLines={true}
-        wrapLongLines={true}
+        wrapLongLines={false}
         lineNumberStyle={{
           color: "hsl(var(--text) / 0.6)",
           paddingRight: "12px",
@@ -82,10 +74,12 @@ export default function CodeSnippet({
         startingLineNumber={startingLineNumber}
         lineProps={(lineNumber) => {
           let style: CSSProperties = {
-            opacity: colorMode === "dark" ? 0.9 : 1,
+            display: "block",
             paddingRight: "16px",
             paddingLeft: "4px",
+            opacity: colorMode === "dark" ? 0.9 : 1,
           };
+
           if (
             highlightLineStart &&
             highlightLineEnd &&
@@ -101,6 +95,7 @@ export default function CodeSnippet({
               }`,
             };
           }
+
           return { style };
         }}
       >