[docs] Fix copy button not working on first page load

Author: overvi

packages-internal/core-docs/src/CodeCopy/CodeCopy.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useRouter } from 'next/router';
 import clipboardCopy from 'clipboard-copy';
+import { throttle } from 'es-toolkit/function';
 
 const CodeBlockContext = React.createContext<React.MutableRefObject<HTMLDivElement | null>>({
   current: null,
@@ -41,14 +42,40 @@ export function useCodeCopy(): React.HTMLAttributes<HTMLDivElement> {
 function InitCodeCopy() {
   const rootNode = React.useContext(CodeBlockContext);
   const router = useRouter();
+
+  const [lateRootCount, setLateRootCount] = React.useState(0);
+
+  const throttledSetLateRoot = React.useRef(
+    throttle(() => {
+      setLateRootCount((prev) => prev + 1);
+    }, 1000),
+  ).current;
   React.useEffect(() => {
-    let key = 'Ctrl + ';
-    if (typeof window !== 'undefined') {
-      const macOS = window.navigator.platform.toUpperCase().includes('MAC');
-      if (macOS) {
-        key = '⌘';
+    const observer = new MutationObserver((mutationsList, _) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === 'childList') {
+          mutation.addedNodes.forEach((n) => {
+            const node = n as HTMLDivElement;
+            if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('MuiCode-root')) {
+              throttledSetLateRoot();
+            }
+          });
+        }
       }
-    }
+    });
+
+    const observerOptions = {
+      childList: true,
+      subtree: true,
+    };
+
+    observer.observe(document.body, observerOptions);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [throttledSetLateRoot]);
+  React.useEffect(() => {
     const codeRoots = document.getElementsByClassName(
       'MuiCode-root',
     ) as HTMLCollectionOf<HTMLDivElement>;
@@ -115,7 +142,6 @@ function InitCodeCopy() {
             // skip the logic if the btn is not generated from the markdown.
             return;
           }
-          keyNode.textContent = keyNode?.textContent?.replace('$key', key) || null;
           btn.addEventListener('click', handleClick);
           listeners.push(() => btn.removeEventListener('click', handleClick));
         }
@@ -129,7 +155,7 @@ function InitCodeCopy() {
     }
 
     return undefined;
-  }, [rootNode, router.pathname]);
+  }, [rootNode, router.pathname, lateRootCount]);
   return null;
 }
 

packages-internal/markdown/parseMarkdown.mjs

@@ -424,13 +424,21 @@ function createRender(context) {
         return `<pre><code>${escaped ? code : escape(code, true)}</code></pre>\n`;
       }
 
+      let key = 'Ctrl + ';
+      if (typeof window !== 'undefined') {
+        const macOS = window.navigator.platform.toUpperCase().includes('MAC');
+        if (macOS) {
+          key = '⌘';
+        }
+      }
+
       return `<div class="MuiCode-root">${title ? `<div class="MuiCode-title">${title}</div>` : ''}<pre><code class="language-${escape(lang, true)}">${
         escaped ? code : escape(code, true)
       }</code></pre>${[
         '<button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy">',
         '<span class="MuiCode-copy-label">Copy</span>',
         '<span class="MuiCode-copied-label">Copied</span>',
-        '<span class="MuiCode-copyKeypress"><span>(or</span> $keyC<span>)</span></span></button></div>',
+        `<span class="MuiCode-copyKeypress"><span>(or</span> ${key}C<span>)</span></span></button></div>`,
       ].join('')}\n`;
     };