Fix: Pass Copied Content as prop

Add prop to fence component called content which will
hold the content contained within the fence component.

Update code snippet component so that it filters the fence components
passed to it as children to only display the fence component that
is same language as the selected language and pass the content prop
of the fence component to the copy code button component on each
render of the snippet component.

src/app/components/CodeSnippet.tsx

@@ -3,12 +3,17 @@
 import React, {
   Children,
   MouseEvent,
+  ReactElement,
   ReactNode,
   useState,
 } from 'react';
 import styles from './CodeSnippet.module.css';
 
-function CodeSnippetCopyButton() {
+function CodeSnippetCopyButton({
+  copyText,
+}: {
+  copyText: string;
+}) {
   const [copyButtonTooltip, setCopyButtonTooltip] =
     useState<boolean>(false);
 
@@ -21,13 +26,7 @@ function CodeSnippetCopyButton() {
       setCopyButtonTooltip(false);
     }, 1000);
 
-    const target = e.currentTarget;
+    navigator.clipboard.writeText(copyText ?? '');
-    const code =
-      target.parentElement?.parentElement?.parentElement?.parentElement?.querySelector(
-        'pre'
-      )?.innerText ?? '';
-
-    navigator.clipboard.writeText(code);
   };
 
   return (
@@ -130,6 +129,17 @@ export default function CodeSnippet({
     setSelectedLanguage(e.target.value);
   };
 
+  const code = Children.toArray(children)
+    .filter(
+      child =>
+        React.isValidElement(child) &&
+        child.props.className ===
+          `language-${selectedLanguage}`
+    )
+    .map(child => {
+      return child as ReactElement;
+    })[0];
+
   const snippetLanguages = Children.toArray(children).map(
     child => {
       if (React.isValidElement(child)) {
@@ -165,22 +175,13 @@ export default function CodeSnippet({
               <div className={styles.spacer} />
             </>
           ) : null}
-          <CodeSnippetCopyButton />
+          <CodeSnippetCopyButton
+            copyText={code.props.content}
+          />
         </div>
       </div>
       <div className={styles.snippetContent}>
-        <pre>
+        <pre>{code}</pre>
-          {Children.toArray(children)
-            .filter(
-              child =>
-                React.isValidElement(child) &&
-                child.props.className ===
-                  `language-${selectedLanguage}`
-            )
-            .map(child => {
-              return child;
-            })}
-        </pre>
       </div>
     </div>
   );

src/app/components/Fence.tsx

@@ -21,6 +21,7 @@ export default function Fence({
     <code
       className={`language-${language}`}
       dangerouslySetInnerHTML={{ __html: html }}
+      content={content}
     ></code>
   );
 }