feat: Add copy button to highlighted code lines (#12983)

* feat: Add copy button to highlighted code lines

* more subtle copying

* fix key error

* remove unused variables

* [getsentry/action-github-commit] Auto commit

* cleanup

* remove class name

* check icon, remove leftovers

* remove global css class

* revert accidental color change

* [getsentry/action-github-commit] Auto commit

---------

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

Author: Lms24

src/components/codeBlock/code-blocks.module.scss

@@ -74,11 +74,6 @@
     }
   }
 
-  :global(.highlight-line) {
-    background-color: rgba(239, 239, 239, 0.06);
-    /* Set highlight bg color */
-    border-left: 4px solid var(--brandPink);
-  }
 
   /* Diff highlighting, classes provided by rehype-prism-plus */
   /* Set inserted line (+) color */

src/components/codeBlock/index.tsx

@@ -5,6 +5,7 @@ import {Clipboard} from 'react-feather';
 
 import styles from './code-blocks.module.scss';
 
+import {makeHighlightBlocks} from '../codeHighlights';
 import {makeKeywordsClickable} from '../codeKeywords';
 
 export interface CodeBlockProps {
@@ -57,7 +58,9 @@ export function CodeBlock({filename, language, children}: CodeBlockProps) {
       <div className={styles.copied} style={{opacity: showCopied ? 1 : 0}}>
         Copied
       </div>
-      <div ref={codeRef}>{makeKeywordsClickable(children)}</div>
+      <div ref={codeRef}>
+        {makeKeywordsClickable(makeHighlightBlocks(children, language))}
+      </div>
     </div>
   );
 }

src/components/codeHighlights/codeHighlights.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import {Children, cloneElement, ReactElement, useEffect, useRef, useState} from 'react';
+import {Check, Clipboard} from 'react-feather';
+import styled from '@emotion/styled';
+import * as Sentry from '@sentry/nextjs';
+
+import {cleanCodeSnippet, useCleanSnippetInClipboard} from '../codeBlock';
+
+type ChildrenItem = ReturnType<typeof Children.toArray>[number] | React.ReactNode;
+
+export function makeHighlightBlocks(
+  children: React.ReactNode,
+  language: string | undefined
+) {
+  const items = Children.toArray(children);
+
+  let highlightedLineElements: ReactElement[] = [];
+  let highlightElementGroupCounter = 0;
+
+  return items.reduce((arr: ChildrenItem[], child) => {
+    if (typeof child !== 'object') {
+      arr.push(child);
+      return arr;
+    }
+
+    const element = child as ReactElement;
+    const classes = element.props.className;
+
+    const isCodeLine = classes && classes.includes('code-line');
+    if (!isCodeLine) {
+      const updatedChild = cloneElement(
+        child as ReactElement,
+        element.props,
+        makeHighlightBlocks((child as ReactElement).props.children, language)
+      );
+      arr.push(updatedChild);
+      return arr;
+    }
+
+    const isHighlightedLine = isCodeLine && classes.includes('highlight-line');
+
+    if (isHighlightedLine) {
+      highlightedLineElements.push(element);
+    } else {
+      if (highlightedLineElements.length > 0) {
+        arr.push(
+          <HighlightBlock key={highlightElementGroupCounter} language={language}>
+            {...highlightedLineElements}
+          </HighlightBlock>
+        );
+        highlightedLineElements = [];
+        ++highlightElementGroupCounter;
+      }
+      arr.push(child);
+    }
+
+    return arr;
+  }, [] as ChildrenItem[]);
+}
+
+export function HighlightBlock({
+  children,
+  language,
+}: {
+  children: React.ReactNode;
+  language: string | undefined;
+}) {
+  const codeRef = useRef<HTMLDivElement>(null);
+
+  useCleanSnippetInClipboard(codeRef, {language});
+
+  // Show the copy button after js has loaded
+  // otherwise the copy button will not work
+  const [showCopyButton, setShowCopyButton] = useState(false);
+  useEffect(() => {
+    setShowCopyButton(true);
+  }, []);
+
+  const [copied, setCopied] = useState(false);
+
+  async function copyCodeOnClick() {
+    if (codeRef.current === null) {
+      return;
+    }
+
+    const code = cleanCodeSnippet(codeRef.current.innerText, {language});
+
+    try {
+      setCopied(false);
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    } catch (error) {
+      Sentry.captureException(error);
+      setCopied(false);
+    }
+  }
+
+  return (
+    <HighlightBlockContainer>
+      <CodeLinesContainer ref={codeRef}>{children}</CodeLinesContainer>
+      <ClipBoardContainer onClick={copyCodeOnClick}>
+        {showCopyButton && !copied && (
+          <Clipboard size={16} opacity={0.15} stroke={'white'} />
+        )}
+        {showCopyButton && copied && <Check size={16} stroke={'green'} />}
+      </ClipBoardContainer>
+    </HighlightBlockContainer>
+  );
+}
+
+const HighlightBlockContainer = styled('div')`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: stretch;
+  float: left;
+  min-width: 100%;
+  box-sizing: border-box;
+  background-color: rgba(239, 239, 239, 0.06);
+  position: relative;
+
+  border-left: 4px solid var(--brandPink);
+
+  :hover svg {
+    opacity: 1;
+  }
+  svg {
+    transition: all 150ms linear;
+  }
+`;
+
+const CodeLinesContainer = styled('div')`
+  padding: 8px 0;
+  width: calc(100% - 48px);
+`;
+
+const ClipBoardContainer = styled('div')`
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+`;

src/components/codeHighlights/index.ts

@@ -0,0 +1 @@
+export {makeHighlightBlocks} from './codeHighlights';