fix(react): do not translate code blocks and error messages (#117)

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",

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>
   );

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")}

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")}