Merge branch 'next'

Author: kellyjosephprice

__tests__/browser/__image_snapshots__/markdown-test-js-visual-regression-tests-rdmd-syntax-renders-callout-tests-without-surprises-2-snap.png

@@ -5,10 +5,16 @@ const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 
 describe('visual regression tests', () => {
   describe('rdmd syntax', () => {
+    beforeAll(async () => {
+      // try warming up the browser???
+      const uri = 'http://localhost:9966/#/callouts?ci=true&darkModeDataAttribute=true';
+      await page.goto(uri, { waitUntil: 'networkidle0' });
+    });
+
     beforeEach(async () => {
       // The ToC disappears somewhere below 1200, 1175-ish?
       await page.setViewport({ width: 1400, height: 800 });
-    });
+    }, 10000);
 
     const docs = [
       'callouts',

__tests__/browser/__image_snapshots__/markdown-test-js-visual-regression-tests-rdmd-syntax-renders-code-blocks-without-surprises-2-snap.png

@@ -3,6 +3,7 @@ import React, { createRef, useContext } from 'react';
 
 import CodeOptsContext from '../../contexts/CodeOpts';
 import ThemeContext from '../../contexts/Theme';
+import useHydrated from '../../hooks/useHydrated';
 
 // Only load CodeMirror in the browser, for SSR
 // apps. Necessary because of people like this:
@@ -57,8 +58,9 @@ const Code = (props: CodeProps) => {
   const { children, lang, value } = props;
   const theme = useContext(ThemeContext);
   const copyButtons = useContext(CodeOptsContext) || props.copyButtons;
+  const isHydrated = useHydrated();
 
-  const language = canonicalLanguage(lang);
+  const language = isHydrated ? canonicalLanguage(lang) : '';
 
   const codeRef = createRef<HTMLElement>();
 
@@ -71,7 +73,7 @@ const Code = (props: CodeProps) => {
   const code = value ?? (Array.isArray(children) ? children[0] : children) ?? '';
 
   const highlightedCode =
-    syntaxHighlighter && typeof syntaxHighlighter === 'function' && code
+    syntaxHighlighter && typeof syntaxHighlighter === 'function' && code && isHydrated
       ? syntaxHighlighter(code, language, codeOpts, { mdx: true })
       : code;
 
@@ -86,7 +88,6 @@ const Code = (props: CodeProps) => {
         ref={codeRef}
         className={['rdmd-code', `lang-${language}`, `theme-${theme}`].join(' ')}
         data-lang={language}
-        suppressHydrationWarning={true}
       >
         {highlightedCode}
       </code>

__tests__/browser/markdown.test.js

@@ -22,9 +22,12 @@ const CodeTabs = (props: Props) => {
       import('mermaid').then(module => {
         mermaid = module.default;
         mermaid.initialize({
+          startOnLoad: false,
           theme: theme === 'dark' ? 'dark' : 'default',
         });
-        mermaid.contentLoaded();
+        mermaid.run({
+          nodes: document.querySelectorAll('.mermaid-render'),
+        });
       });
     }
   }, [hasMermaid, theme]);
@@ -44,7 +47,7 @@ const CodeTabs = (props: Props) => {
   // render single Mermaid diagram
   if (hasMermaid) {
     const value = children.props.children.props.value;
-    return <pre className="mermaid mermaid_single">{value}</pre>;
+    return <pre className="mermaid-render mermaid_single">{value}</pre>;
   }
 
   return (

components/Code/index.tsx

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * A hook that returns whether or not the component has been hydrated.
+ * Useful for components that should only render in the browser, and not during SSR.
+ * Waiting to render until after hydration avoids React hydration mismatches.
+ */
+export default function useHydrated(): boolean {
+  const [isHydrated, setIsHydrated] = useState(false);
+  useEffect(() => setIsHydrated(true), []);
+  return isHydrated;
+}