use react-innertext

components/clipboard/CopyButton.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect } from "react";
 import copy from "copy-to-clipboard";
-import trimNewlines from "trim-newlines";
 import { CopyOcticon, CheckOcticon } from "../icons/octicons";
 
 import styles from "./CopyButton.module.scss";
@@ -19,8 +18,8 @@ const CopyButton = ({ content, timeout = 2000 }: Props) => {
     // prevent unintentional double-clicks by unfocusing button
     e.target.blur();
 
-    // trim any surrounding whitespace from target block's content and send it to the clipboard
-    const didCopy = copy(trimNewlines(content));
+    // send plaintext to the clipboard
+    const didCopy = copy(content);
 
     // indicate success
     setCopied(didCopy);

components/mdxComponents.tsx

@@ -1,7 +1,7 @@
 import dynamic from "next/dynamic";
 import Link from "next/link";
 import Image from "next/image";
-import getNodeText from "../lib/get-node-text";
+import innerText from "react-innertext";
 import { OctocatOcticon } from "./icons/octicons";
 
 import type { LinkProps } from "next/link";
@@ -50,7 +50,7 @@ const CustomCode = (props: any) => {
   if (props.className?.split(" ").includes("hljs")) {
     return (
       <div>
-        <CopyButton content={getNodeText(props.children)} />
+        <CopyButton content={innerText(props.children)} />
         <code {...props}>{props.children}</code>
         <style jsx>{`
           div {