fix(client): wrap editor in span with "notranslate" (#38389)

* Update Editor.js

* Fix linting issue

* Working on Preview with .notranslate

* Add "notranslate" for Preview component

client/src/templates/Challenges/classic/Editor.js

@@ -220,16 +220,18 @@ class Editor extends Component {
     const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom';
     return (
       <Suspense fallback={<Loader timeout={600} />}>
-        <MonacoEditor
-          editorDidMount={this.editorDidMount}
-          editorWillMount={this.editorWillMount}
-          key={`${editorTheme}-${fileKey}`}
-          language={modeMap[ext]}
-          onChange={this.onChange}
-          options={this.options}
-          theme={editorTheme}
-          value={contents}
-        />
+        <span className='notranslate'>
+          <MonacoEditor
+            editorDidMount={this.editorDidMount}
+            editorWillMount={this.editorWillMount}
+            key={`${editorTheme}-${fileKey}`}
+            language={modeMap[ext]}
+            onChange={this.onChange}
+            options={this.options}
+            theme={editorTheme}
+            value={contents}
+          />
+        </span>
       </Suspense>
     );
   }

client/src/templates/Challenges/components/Preview.js

@@ -46,7 +46,7 @@ class Preview extends Component {
   render() {
     const iframeToggle = this.state.iframeStatus ? 'disable' : 'enable';
     return (
-      <div className={`challenge-preview ${iframeToggle}-iframe`}>
+      <div className={`notranslate challenge-preview ${iframeToggle}-iframe`}>
         <iframe
           className={'challenge-preview-frame'}
           id={mainId}