From c09acfcc79bb8456f6bc6d0966ebaa2fdc626256 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Wed, 3 Nov 2021 10:35:27 +0000
Subject: [PATCH] fix(react): do not translate code blocks and error messages
 (#117)

---
 package.json                                          |  3 ++-
 sandpack-react/src/common/ErrorOverlay.tsx            |  2 +-
 .../src/components/CodeEditor/CodeMirror.tsx          | 11 ++++++-----
 sandpack-react/src/components/FileTabs/index.tsx      |  2 +-
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index e56cdd987..567818bac 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,8 @@
     "build": "yarn workspaces run build",
     "prepare": "husky install",
     "clean": "yarn workspaces run clean",
-    "dev:docs": "yarn workspace sandpack-docs start"
+    "dev:docs": "yarn workspace sandpack-docs start",
+    "dev:react": "yarn workspace @codesandbox/sandpack-react storybook"
   },
   "repository": {
     "type": "git",
diff --git a/sandpack-react/src/common/ErrorOverlay.tsx b/sandpack-react/src/common/ErrorOverlay.tsx
index 23f90c757..4fe9674c9 100644
--- a/sandpack-react/src/common/ErrorOverlay.tsx
+++ b/sandpack-react/src/common/ErrorOverlay.tsx
@@ -11,7 +11,7 @@ export const ErrorOverlay: React.FC = () => {
     return null;
   }
   return (
-    <div className={c("overlay", "error")}>
+    <div className={c("overlay", "error")} translate="no">
       <div className={c("error-message")}>{errorMessage}</div>
     </div>
   );
diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
index 4d0849804..862a3e29c 100644
--- a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
+++ b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
@@ -240,10 +240,10 @@ export const CodeMirror = React.forwardRef<HTMLElement, CodeMirrorProps>(
             view?.dispatch({
               // Pass message to clean up inline error
               annotations: [
-                ({
+                {
                   type: "clean-error",
                   value: null,
-                } as unknown) as Annotation<unknown>,
+                } as unknown as Annotation<unknown>,
               ],
 
               // Trigger a doc change to remove inline error
@@ -263,10 +263,10 @@ export const CodeMirror = React.forwardRef<HTMLElement, CodeMirrorProps>(
           ) {
             view?.dispatch({
               annotations: [
-                ({
+                {
                   type: "error",
                   value: message.line,
-                } as unknown) as Annotation<unknown>,
+                } as unknown as Annotation<unknown>,
               ],
             });
           }
@@ -288,7 +288,7 @@ export const CodeMirror = React.forwardRef<HTMLElement, CodeMirrorProps>(
 
     if (readOnly) {
       return (
-        <pre ref={combinedRef} className={c("cm", editorState)}>
+        <pre ref={combinedRef} className={c("cm", editorState)} translate="no">
           <code className={c("pre-placeholder")}>{code}</code>
         </pre>
       );
@@ -307,6 +307,7 @@ export const CodeMirror = React.forwardRef<HTMLElement, CodeMirrorProps>(
         onKeyDown={handleContainerKeyDown}
         role="group"
         tabIndex={0}
+        translate="no"
       >
         <pre
           className={c("pre-placeholder")}
diff --git a/sandpack-react/src/components/FileTabs/index.tsx b/sandpack-react/src/components/FileTabs/index.tsx
index 8f0c7942f..adec01b92 100644
--- a/sandpack-react/src/components/FileTabs/index.tsx
+++ b/sandpack-react/src/components/FileTabs/index.tsx
@@ -28,7 +28,7 @@ export const FileTabs: React.FC<FileTabsProps> = ({ closableTabs }) => {
   };
 
   return (
-    <div className={c("tabs")}>
+    <div className={c("tabs")} translate="no">
       <div
         aria-label="Select active file"
         className={c("tabs-scrollable-container")}