Fix vue sandboxes

Author: Ives van Hoorne

packages/app/src/app/components/CodeEditor/Monaco/index.js

@@ -1053,7 +1053,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
   updateLintWarnings = async (markers: Array<Object>) => {
     const currentModule = this.currentModule;
 
-    const mode = await getMode(currentModule.title);
+    const mode = await getMode(currentModule.title, this.monaco);
     if (mode === 'javascript' || mode === 'vue') {
       this.monaco.editor.setModelMarkers(
         this.editor.getModel(),
@@ -1140,7 +1140,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
   }
 
   syntaxHighlight = async (code: string, title: string, version: string) => {
-    const mode = await getMode(title);
+    const mode = await getMode(title, this.monaco);
     if (mode === 'typescript' || mode === 'javascript') {
       if (this.syntaxWorker) {
         this.syntaxWorker.postMessage({
@@ -1153,7 +1153,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
   };
 
   lint = async (code: string, title: string, version: number) => {
-    const mode = await getMode(title);
+    const mode = await getMode(title, this.monaco);
     if (this.settings.lintEnabled) {
       if (mode === 'javascript' || mode === 'vue') {
         if (this.lintWorker) {
@@ -1337,7 +1337,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
       // Related issue: https://github.com/Microsoft/monaco-editor/issues/461
       const lib = this.addLib(module.code || '', path);
 
-      const mode = await getMode(module.title);
+      const mode = await getMode(module.title, this.monaco);
 
       const model = this.monaco.editor.createModel(
         module.code || '',

packages/app/src/app/components/CodeEditor/Monaco/mode.js

@@ -1,4 +1,4 @@
-const requireAMDModule = paths =>
+const requireAMDModule = (paths, monaco) =>
   new Promise(resolve => window.require(paths, () => resolve()));
 export default async (title: string) => {
   if (title == null) return 'javascript';
@@ -11,7 +11,7 @@ export default async (title: string) => {
     if (kind[1] === 'json') return 'json';
     if (kind[1] === 'html') return 'html';
     if (kind[1] === 'vue') {
-      if (!this.monaco.languages.getLanguages().find(l => l.id === 'vue')) {
+      if (!monaco.languages.getLanguages().find(l => l.id === 'vue')) {
         await requireAMDModule(['vs/language/vue/monaco.contribution']);
       }
       return 'vue';

packages/app/src/app/components/CodeEditor/MonacoDiff/index.js

@@ -59,7 +59,7 @@ export default class MonacoDiff extends React.Component<Props>
     modifiedCode: string,
     title: string
   ) => {
-    const mode = await getMode(title);
+    const mode = await getMode(title, this.monaco);
     const originalModel = this.monaco.editor.createModel(originalCode, mode);
     const modifiedModel = this.monaco.editor.createModel(modifiedCode, mode);