feat: Modernize JavaScript console with tabs and server-side storage of scripts (#2962)

Author: mtrezza

src/components/BrowserMenu/MenuItem.react.js

@@ -8,7 +8,7 @@
 import React from 'react';
 import styles from 'components/BrowserMenu/BrowserMenu.scss';
 
-const MenuItem = ({ text, disabled, active, greenActive, onClick }) => {
+const MenuItem = ({ text, shortcut, disabled, active, greenActive, onClick, disableMouseDown = false }) => {
   const classes = [styles.item];
   if (disabled) {
     classes.push(styles.disabled);
@@ -30,14 +30,29 @@ const MenuItem = ({ text, disabled, active, greenActive, onClick }) => {
     <div
       className={classes.join(' ')}
       onClick={handleClick}
-      onMouseDown={handleClick} // This is needed - onClick alone doesn't work in this context
+      onMouseDown={disableMouseDown ? undefined : handleClick} // This is needed - onClick alone doesn't work in this context
       style={{
         position: 'relative',
         zIndex: 9999,
-        cursor: 'pointer'
+        cursor: 'pointer',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center'
       }}
     >
-      {text}
+      <span>{text}</span>
+      {shortcut && (
+        <span
+          style={{
+            opacity: 0.5,
+            fontSize: '0.85em',
+            marginLeft: '12px',
+            color: 'inherit'
+          }}
+        >
+          {shortcut}
+        </span>
+      )}
     </div>
   );
 };

src/components/CodeEditor/CodeEditor.react.js

@@ -10,10 +10,23 @@ import Editor from 'react-ace';
 import PropTypes from '../../lib/PropTypes';
 
 import 'ace-builds/src-noconflict/mode-javascript';
-import 'ace-builds/src-noconflict/theme-solarized_dark';
+import 'ace-builds/src-noconflict/theme-monokai';
 import 'ace-builds/src-noconflict/snippets/javascript';
 import 'ace-builds/src-noconflict/ext-language_tools';
 
+// Disable web workers to prevent MIME type errors
+import ace from 'ace-builds/src-noconflict/ace';
+
+// Configure ACE to disable workers globally
+ace.config.set('useWorker', false);
+ace.config.set('loadWorkerFromBlob', false);
+ace.config.set('workerPath', false);
+
+// Also set the base path to prevent worker loading attempts
+ace.config.set('basePath', '/bundles');
+ace.config.set('modePath', '/bundles');
+ace.config.set('themePath', '/bundles');
+
 export default class CodeEditor extends React.Component {
   constructor(props) {
     super(props);
@@ -32,13 +45,13 @@ export default class CodeEditor extends React.Component {
   }
 
   render() {
-    const { fontSize = 18 } = this.props;
+    const { fontSize = 18, theme = 'monokai' } = this.props;
     const { code } = this.state;
 
     return (
       <Editor
         mode="javascript"
-        theme="solarized_dark"
+        theme={theme}
         onChange={value => this.setState({ code: value })}
         fontSize={fontSize}
         showPrintMargin={true}
@@ -49,8 +62,25 @@ export default class CodeEditor extends React.Component {
         enableBasicAutocompletion={true}
         enableLiveAutocompletion={true}
         enableSnippets={false}
-        showLineNumbers={true}
         tabSize={2}
+        style={{
+          backgroundColor: '#202020'
+        }}
+        setOptions={{
+          useWorker: false, // Disable web workers to prevent MIME type errors
+          wrap: true,
+          foldStyle: 'markbegin',
+          enableMultiselect: true,
+          // Additional worker-related options
+          enableBasicAutocompletion: true,
+          enableLiveAutocompletion: true,
+          enableSnippets: false,
+        }}
+        editorProps={{
+          $blockScrolling: Infinity, // Disable annoying warning
+          $useWorker: false, // Additional worker disable
+        }}
+        commands={[]} // Disable any commands that might trigger worker loading
       />
     );
   }
@@ -59,4 +89,5 @@ export default class CodeEditor extends React.Component {
 CodeEditor.propTypes = {
   fontSize: PropTypes.number.describe('Font size of the editor'),
   defaultValue: PropTypes.string.describe('Default Code'),
+  theme: PropTypes.string.describe('Theme for the editor'),
 };