Merge pull request #1813 from ethereum/monacolocal

run monaco from assets

apps/remix-ide/webpack.config.js

@@ -1,5 +1,7 @@
 const nxWebpack = require('@nrwl/react/plugins/webpack')
 const TerserPlugin = require('terser-webpack-plugin')
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+
 
 module.exports = config => {
   const nxWebpackConfig = nxWebpack(config)
@@ -12,7 +14,15 @@ module.exports = config => {
       net: 'empty',
       module: 'empty',
       child_process: 'empty'
-    }
+    },
+    plugins: [
+      ...nxWebpackConfig.plugins,
+      new CopyWebpackPlugin({
+        patterns: [
+          { from: "../../../node_modules/monaco-editor/dev/vs/", to: "assets/js/monaco-editor/dev/vs" },
+        ].filter(Boolean)
+      })
+    ]
   }
 
   if (process.env.NODE_ENV === 'production') {

libs/remix-ui/editor/src/lib/remix-ui-editor.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useReducer } from 'react' // eslint-disable-line
-import Editor from '@monaco-editor/react'
+import Editor, { loader } from '@monaco-editor/react'
 import { reducerActions, reducerListener, initialState } from './actions/editor'
 import { language, conf } from './syntax'
 
@@ -44,6 +44,8 @@ type sourceMarkerMap = {
   [key: string]: [sourceMarker];
 }
 
+loader.config({ paths: { vs: 'assets/js/monaco-editor/dev/vs' } })
+
 /* eslint-disable-next-line */
 export interface EditorUIProps {
   activated: boolean
@@ -288,7 +290,7 @@ export const EditorUI = (props: EditorUIProps) => {
 
   props.editorAPI.getFontSize = () => {
     if (!editorRef.current) return
-    return editorRef.current.getOption(42).fontSize
+    return editorRef.current.getOption(43).fontSize
   }
 
   (window as any).addRemixBreakpoint = (position) => { // make it available from e2e testing...
@@ -329,10 +331,10 @@ export const EditorUI = (props: EditorUIProps) => {
       }
     })
     editor.addCommand(monacoRef.current.KeyMod.CtrlCmd | monacoRef.current.KeyCode.US_EQUAL, () => {
-      editor.updateOptions({ fontSize: editor.getOption(42).fontSize + 1 })
+      editor.updateOptions({ fontSize: editor.getOption(43).fontSize + 1 })
     })
     editor.addCommand(monacoRef.current.KeyMod.CtrlCmd | monacoRef.current.KeyCode.US_MINUS, () => {
-      editor.updateOptions({ fontSize: editor.getOption(42).fontSize - 1 })
+      editor.updateOptions({ fontSize: editor.getOption(43).fontSize - 1 })
     })
   }
 

package-lock.json

@@ -30329,6 +30329,11 @@
         }
       }
     },
+    "monaco-editor": {
+      "version": "0.30.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.30.1.tgz",
+      "integrity": "sha512-B/y4+b2O5G2gjuxIFtCE2EkM17R2NM7/3F8x0qcPsqy4V83bitJTIO4TIeZpYlzu/xy6INiY/+84BEm6+7Cmzg=="
+    },
     "morphdom": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.6.1.tgz",

package.json

@@ -179,6 +179,7 @@
     "jszip": "^3.6.0",
     "latest-version": "^5.1.0",
     "merge": "^2.1.1",
+    "monaco-editor": "^0.30.1",
     "npm-install-version": "^6.0.2",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.0",