Code Editor [WIP}

package.json

@@ -35,12 +35,16 @@
     "@ffmpeg/ffmpeg": "^0.12.15",
     "@ffmpeg/util": "^0.12.2",
     "@microbit/microbit-universal-hex": "0.2.2",
+    "@monaco-editor/loader": "^1.3.2",
+    "@monaco-editor/react": "^4.5.0",
     "@turbowarp/jszip": "^3.11.1",
     "@turbowarp/nanolog": "^1.0.1",
     "@turbowarp/scratch-l10n": "^3.1001.0-202401241456-994097a5",
     "@turbowarp/scratch-storage": "^0.0.202505311821",
     "@turbowarp/scratch-svg-renderer": "github:OmniBlocks/omniblocks-svg-renderer#develop",
     "@turbowarp/startaudiocontext": "^1.0.0",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/xterm": "^6.0.0",
     "arraybuffer-loader": "^1.0.6",
     "autoprefixer": "^9.0.1",
     "balance-text": "3.3.1",
@@ -73,6 +77,7 @@
     "postcss-loader": "^3.0.0",
     "postcss-simple-vars": "^5.0.1",
     "prop-types": "^15.5.10",
+    "pyodide": "^0.29.0",
     "query-string": "^5.1.1",
     "raw-loader": "^0.5.1",
     "react": "^16.0.0",
@@ -102,7 +107,10 @@
     "text-encoding": "0.7.0",
     "to-style": "1.3.3",
     "wav-encoder": "1.3.0",
-    "xhr": "2.5.0"
+    "xhr": "2.5.0",
+    "xterm": "^5.3.0",
+    "xterm-addon-fit": "^0.8.0",
+    "xterminal": "^2.1.13"
   },
   "peerDependencies": {
     "react": "^16.0.0",
@@ -120,6 +128,7 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.3.0",
+    "baseline-browser-mapping": "^2.9.11",
     "chromedriver": "117.0.3",
     "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "1.15.7",

src/components/code-editor/code-editor.css

@@ -0,0 +1,99 @@
+@import "../../css/units.css";
+@import "../../css/colors.css";
+@import "../../css/z-index.css";
+
+.blocks {
+    height: 100%;
+}
+
+.drag-over:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.75;
+    background-color: $drop-highlight;
+    transition: all 0.25s ease;
+}
+
+.blocks :global(.injectionDiv){
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border: 1px solid $ui-black-transparent;
+    border-top-right-radius: $space;
+    border-bottom-right-radius: $space;
+}
+
+[dir="rtl"] .blocks :global(.injectionDiv) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-top-left-radius: $space;
+    border-bottom-left-radius: $space;
+}
+
+.blocks :global(.blocklyMainBackground) {
+    stroke: none;
+}
+
+.blocks :global(.blocklyToolboxDiv) {
+    border-right: 1px solid $ui-black-transparent;
+    border-bottom: 1px solid $ui-black-transparent;
+    box-sizing: content-box;
+    height: calc(100% - 3.25rem) !important;
+
+    /*
+        For now, the layout cannot support scrollbars in the category menu.
+        The line below works for Edge, the `::-webkit-scrollbar` line
+        below that is for webkit browsers. It isn't possible to do the
+        same for Firefox, so a different solution may be needed for them.
+    */
+    -ms-overflow-style: none;
+}
+
+[dir="rtl"] .blocks :global(.blocklyToolboxDiv) {
+    border-right: none;
+    border-left: 1px solid $ui-black-transparent;
+}
+
+.blocks :global(.blocklyToolboxDiv::-webkit-scrollbar) {
+    display: none;
+}
+
+.blocks :global(.blocklyFlyout) {
+    border-right: 1px solid $ui-black-transparent;
+    box-sizing: content-box;
+}
+
+[dir="rtl"] .blocks :global(.blocklyFlyout) {
+    border-right: none;
+    border-left: 1px solid $ui-black-transparent;
+}
+
+.blocks :global(.blocklyBlockDragSurface) {
+    /*
+        Fix an issue where the drag surface was preventing hover events for
+        sharing blocks.
+        This does not prevent user interaction on the blocks themselves.
+    */
+    pointer-events: none;
+    z-index: $z-index-drag-layer; /* make blocks match gui drag layer */
+}
+
+/*
+    Shrink category font to fit "My Blocks" for now.
+    Probably will need different solutions for language support later, so
+    make the change here instead of in scratch-blocks.
+*/
+.blocks :global(.scratchCategoryMenuItemLabel) {
+    font-size: 0.65rem;
+}
+
+.blocks :global(.blocklyMinimalBody) {
+    min-width: auto;
+    min-height: auto;
+}

src/components/code-editor/code-editor.jsx

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import React from 'react';
+import Box from '../box/box.jsx';
+import styles from './code-editor.css';
+
+const BlocksComponent = props => {
+    const {
+        containerRef,
+        dragOver,
+        ...componentProps
+    } = props;
+    return (
+        <Box
+            className={classNames(styles.blocks, {
+                [styles.dragOver]: dragOver
+            })}
+            {...componentProps}
+            componentRef={containerRef}
+        />
+    );
+};
+BlocksComponent.propTypes = {
+    containerRef: PropTypes.func,
+    dragOver: PropTypes.bool 
+};
+export default BlocksComponent;

src/components/gui/gui.jsx

@@ -8,8 +8,10 @@ import MediaQuery from 'react-responsive';
 import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
 import tabStyles from 'react-tabs/style/react-tabs.css';
 import VM from 'scratch-vm';
-
-import Blocks from '../../containers/blocks.jsx';
+// nanoscript will ebe added tomorrow trust me  
+//67
+import BlockComponent from '../../containers/blocks.jsx';
+import CodeEditor from '../../containers/code-editor.jsx';
 import CostumeTab from '../../containers/costume-tab.jsx';
 import TargetPane from '../../containers/target-pane.jsx';
 import SoundTab from '../../containers/sound-tab.jsx';
@@ -19,7 +21,7 @@ import Box from '../box/box.jsx';
 import MenuBar from '../menu-bar/menu-bar.jsx';
 import CostumeLibrary from '../../containers/costume-library.jsx';
 import BackdropLibrary from '../../containers/backdrop-library.jsx';
-import Watermark from '../../containers/watermark.jsx';
+import Watermark from '../../containers/watermark.jsx'; 
 import SongsTab from '../../containers/songs-tab.jsx';
 import Backpack from '../../containers/backpack.jsx';
 import BrowserModal from '../browser-modal/browser-modal.jsx';
@@ -87,6 +89,7 @@ const GUIComponent = props => {
         blocksId,
         blocksTabVisible,
         cardsVisible,
+        codingStyle = "blocks",
         canChangeLanguage,
         canChangeTheme,
         canCreateNew,
@@ -165,6 +168,8 @@ const GUIComponent = props => {
         vm,
         ...componentProps
     } = omit(props, 'dispatch');
+    const Blocks = codingStyle === "blocks" ? BlockComponent : CodeEditor;
+    console.log(codingStyle);
     if (children) {
         return <Box {...componentProps}>{children}</Box>;
     }
@@ -574,6 +579,7 @@ GUIComponent.defaultProps = {
     canManageFiles: true,
     canRemix: false,
     canSave: false,
+    codingStyle: 'blocks',
     canCreateCopy: false,
     canShare: false,
     canUseCloud: false,

src/components/language-selector/language-selector.jsx

@@ -31,7 +31,7 @@ const LanguageSelector = ({currentLocale, label, onChange}) => (
 
 LanguageSelector.propTypes = {
     currentLocale: PropTypes.string,
-    label: PropTypes.string,
+    label: PropTypes.string,       
     onChange: PropTypes.func
 };
 

src/components/loader/loader.jsx

@@ -84,10 +84,8 @@ const funFacts = [
     "Did you know??? Boxy is a CLANKER.",
     'Preparing emojis...',
     'Herding cats...',
-    'Growing apples...',
     'Removing dangos...',
     'Modifying features...',
-    'Converting legacy lists...',
     'Reticulating splines...',
     'Constructing Boxys...',
     'Breathing air...',

src/containers/blocks.jsx

@@ -10,7 +10,7 @@ import VM from 'scratch-vm';
 
 import log from '../lib/log.js';
 import Prompt from './prompt.jsx';
-import BlocksComponent from '../components/blocks/blocks.jsx';
+import BlockComponent from '../components/blocks/blocks.jsx';
 import ExtensionLibrary from './extension-library.jsx';
 import extensionData from '../lib/libraries/extensions/index.jsx';
 import CustomProcedures from './custom-procedures.jsx';
@@ -84,7 +84,7 @@ const addFunctionListener = (object, property, callback) => {
 
 const DroppableBlocks = DropAreaHOC([
     DragConstants.BACKPACK_CODE
-])(BlocksComponent);
+])(BlockComponent);
 
 class Blocks extends React.Component {
     constructor (props) {