From 52690a0dd7f174ef07cbfcf1c73edf768d9dea73 Mon Sep 17 00:00:00 2001
From: domharrington <domharrington@users.noreply.github.com>
Date: Thu, 4 Jun 2020 11:05:17 -0700
Subject: [PATCH] feat: fixing some ssr issues with the markdown renderer 
 (#705)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: fixing some ssr issues with the markdown renderer

- always render the copy code button, even on the server
Fixes this issue `Warning: Expected server HTML to contain a matching <button> in <code>.`

- Added `suppressHydrationWarning={true}` to the `<code>` element
The rendered content is always going to be different due to one having
syntax highlighting and one not

* fix: add prettier-ignore to line for ie compatibility

Without this, `prettier --write` always updates to an emoji 🤷‍♂️

Co-authored-by: Rafe Goldberg <rafegoldberg@gmail.com>
---
 packages/markdown/components/Code/index.jsx           | 9 +++++++--
 packages/markdown/processor/parse/flavored/callout.js | 5 ++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/markdown/components/Code/index.jsx b/packages/markdown/components/Code/index.jsx
index 4a173d957..1e4433be6 100644
--- a/packages/markdown/components/Code/index.jsx
+++ b/packages/markdown/components/Code/index.jsx
@@ -36,8 +36,13 @@ function Code(props) {
 
   return (
     <React.Fragment>
-      <code className={['rdmd-code', `lang-${language}`].join(' ')} data-lang={language} name={meta}>
-        {!syntaxHighlighter || <CopyCode className="fa" code={children[0]} />}
+      <code
+        className={['rdmd-code', `lang-${language}`].join(' ')}
+        data-lang={language}
+        name={meta}
+        suppressHydrationWarning={true}
+      >
+        <CopyCode className="fa" code={children[0]} />
         {syntaxHighlighter ? syntaxHighlighter(children[0], language, { tokenizeVariables: true }) : children[0]}
       </code>
     </React.Fragment>
diff --git a/packages/markdown/processor/parse/flavored/callout.js b/packages/markdown/processor/parse/flavored/callout.js
index e309e1c16..4f0bfc142 100644
--- a/packages/markdown/processor/parse/flavored/callout.js
+++ b/packages/markdown/processor/parse/flavored/callout.js
@@ -22,9 +22,8 @@ function tokenizer(eat, value) {
     '\uD83D\uDED1': 'error',
     '\u2049\uFE0F': 'error',
     '\u203C\uFE0F': 'error',
-    // NOTE: prettier is desperate to convert this in to an emoji.
-    //       PLEASE DON'T COMMIT THIS OR YOU'LL BREAK README IN IE!
-    '\u2139\uFE0F': 'info', // prettier-ignore
+    // prettier-ignore
+    '\u2139\uFE0F': 'info',
     '\u26A0': 'warn',
   }[icon];