From a070febae56f08b744079ebf52874fc8c0c51af9 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 8 Feb 2022 15:51:29 +0100
Subject: fix: translate Prism toolbar buttons on MDX code blocks

The translation was only set on page refresh.
---
 src/components/MDX/CodeBlock/CodeBlock.tsx | 42 +++++++++++++++++++++---------
 1 file changed, 29 insertions(+), 13 deletions(-)

(limited to 'src')

diff --git a/src/components/MDX/CodeBlock/CodeBlock.tsx b/src/components/MDX/CodeBlock/CodeBlock.tsx
index 2f9715d..4136772 100644
--- a/src/components/MDX/CodeBlock/CodeBlock.tsx
+++ b/src/components/MDX/CodeBlock/CodeBlock.tsx
@@ -1,8 +1,3 @@
-import { settings } from '@utils/config';
-import {
-  translateCopyButton,
-  translateToggleButton,
-} from '@utils/helpers/prism';
 import { useRouter } from 'next/router';
 import Prism from 'prismjs';
 import { ReactChildren, useEffect } from 'react';
@@ -23,16 +18,10 @@ const CodeBlock = ({
   );
   const intl = useIntl();
   const router = useRouter();
-  const locale = router.locale ? router.locale : settings.locales.defaultLocale;
 
   useEffect(() => {
     Prism.highlightAll();
-  });
-
-  useEffect(() => {
-    translateCopyButton(locale, intl);
-    translateToggleButton(locale, intl);
-  }, [intl, locale]);
+  }, []);
 
   const { setCodeBlocks } = usePrismTheme();
 
@@ -43,8 +32,35 @@ const CodeBlock = ({
     setCodeBlocks(allPre);
   }, [setCodeBlocks, router.asPath]);
 
+  const copyText = intl.formatMessage({
+    defaultMessage: 'Copy',
+    description: 'Prism: copy button text (no clicked)',
+  });
+  const copiedText = intl.formatMessage({
+    defaultMessage: 'Copied!',
+    description: 'Prism: copy button text (clicked)',
+  });
+  const errorText = intl.formatMessage({
+    defaultMessage: 'Use Ctrl+c to copy',
+    description: 'Prism: error text',
+  });
+  const darkTheme = intl.formatMessage({
+    defaultMessage: 'Toggle Dark Theme',
+    description: 'Prism: toggle dark theme button text',
+  });
+  const lightTheme = intl.formatMessage({
+    defaultMessage: 'Toggle Light Theme',
+    description: 'Prism: toggle light theme button text',
+  });
+
   return (
-    <div>
+    <div
+      data-prismjs-copy={copyText}
+      data-prismjs-copy-success={copiedText}
+      data-prismjs-copy-error={errorText}
+      data-prismjs-color-scheme-dark={darkTheme}
+      data-prismjs-color-scheme-light={lightTheme}
+    >
       <pre className={classNames.join(' ')}>
         <code className={languageClass}>{children}</code>
       </pre>
-- 
cgit v1.2.3