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
+    // send plaintext to the clipboard
-    const didCopy = copy(trimNewlines(content));
+    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 {

lib/get-node-text.ts

@@ -1,16 +0,0 @@
-// https://stackoverflow.com/a/60564620/1438024
-const getNodeText = (node) => {
-  if (["string", "number"].includes(typeof node)) {
-    return node;
-  }
-
-  if (node instanceof Array) {
-    return node.map(getNodeText).join("");
-  }
-
-  if (typeof node === "object" && node) {
-    return getNodeText(node.props.children);
-  }
-};
-
-export default getNodeText;

package.json

@@ -54,6 +54,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-gist": "^1.2.4",
+    "react-innertext": "^1.1.5",
     "react-is": "^17.0.2",
     "react-player": "^2.9.0",
     "react-tweet-embed": "^1.3.1",
@@ -62,8 +63,7 @@
     "rehype-highlight": "^5.0.2",
     "rehype-slug": "^5.0.1",
     "styled-jsx": "^4.0.1",
-    "swr": "^1.1.2",
+    "swr": "^1.1.2"
-    "trim-newlines": "^4.0.2"
   },
   "devDependencies": {
     "@jakejarvis/eslint-config": "github:jakejarvis/eslint-config#main",

yarn.lock

@@ -4580,6 +4580,11 @@ react-gist@^1.2.4:
   resolved "https://registry.yarnpkg.com/react-gist/-/react-gist-1.2.4.tgz#4ee71f24cc6f60836354e2ad6e30f6d24e06e0f7"
   integrity sha512-uDgPJ08IJsl/7auK3CS53JKGC1P/X7tNCzo9k0r6D/5l+ilsxE1+SAaylJCh0aeyZoJOoxQikKU+MHsAvA9iFw==
 
+react-innertext@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/react-innertext/-/react-innertext-1.1.5.tgz#8147ac54db3f7067d95f49e2d2c05a720d27d8d0"
+  integrity sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q==
+
 react-is@17.0.2, react-is@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
@@ -5528,11 +5533,6 @@ trim-newlines@^3.0.0:
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.1.tgz#260a5d962d8b752425b32f3a7db0dcacd176c144"
   integrity sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==
 
-trim-newlines@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-4.0.2.tgz#d6aaaf6a0df1b4b536d183879a6b939489808c7c"
-  integrity sha512-GJtWyq9InR/2HRiLZgpIKv+ufIKrVrvjQWEj7PxAXNc5dwbNJkqhAUoAGgzRmULAnoOM5EIpveYd3J2VeSAIew==
-
 trim-trailing-lines@^1.0.0:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz#bd4abbec7cc880462f10b2c8b5ce1d8d1ec7c2c0"