rm bug from home

3 years ago · 667e294d70
parent b241f7961d
commit 667e294d70
12 changed files with 31385 additions and 30925 deletions
--- a/apps/remix-ide/src/app/editor/editor.js
+++ b/apps/remix-ide/src/app/editor/editor.js
@ -12,7 +12,7 @@ const profile = {
  name: 'editor',
  description: 'service - editor',
  version: packageJson.version,
-  methods: ['highlight', 'discardHighlight', 'clearAnnotations', 'addAnnotation', 'gotoLine', 'revealRange', 'getCursorPosition', 'open', 'addModel']
+  methods: ['highlight', 'discardHighlight', 'clearAnnotations', 'addAnnotation', 'gotoLine', 'revealRange', 'getCursorPosition', 'open', 'addModel', 'addErrorMarker']
 }

 class Editor extends Plugin {
@ -494,6 +494,10 @@ class Editor extends Plugin {
    this.currentDecorations[typeOfDecoration][filePath].push(...currentDecorations)
  }

+  async addErrorMarker (error){
+    this.api.addErrorMarker(error)
+  }
+
  /**
   * Add an annotation to the current session.
   * An annotation has the following shape:
--- a/apps/remix-ide/src/assets/js/editor/darkTheme.js
+++ b/apps/remix-ide/src/assets/js/editor/darkTheme.js
@ -1,181 +0,0 @@
-/* eslint-disable */
-ace.define("ace/theme/remixDark",["require","exports","module","ace/lib/dom"], function(acequire, exports, module) {
-
-  exports.isDark = true;
-  exports.cssClass = "ace-remixDark";
-  exports.cssText = ".ace-remixDark .ace_gutter {\
-  background: #2a2c3f;\
-  color: #8789a1;\
-  border-right: 1px solid #282828;\
-  }\
-  .ace-remixDark .ace_gutter-cell.ace_warning {\
-  background-image: none;\
-  background: #FC0;\
-  border-left: none;\
-  padding-left: 0;\
-  color: #000;\
-  }\
-  .ace-remixDark .ace_gutter-cell.ace_error {\
-  background-position: -6px center;\
-  background-image: none;\
-  background: #F10;\
-  border-left: none;\
-  padding-left: 0;\
-  color: #000;\
-  }\
-  .ace-remixDark .ace_print-margin {\
-  border-left: 1px solid #555;\
-  right: 0;\
-  background: #1D1D1D;\
-  }\
-  .ace-remixDark {\
-  background-color: #222336;\
-  color: #d5d5e9;\
-  }\
-  .ace-remixDark .ace_cursor {\
-  border-left: 2px solid #FFFFFF;\
-  }\
-  .ace-remixDark .ace_cursor.ace_overwrite {\
-  border-left: 0px;\
-  border-bottom: 1px solid #FFFFFF;\
-  }\
-  .ace-remixDark .ace_marker-layer .ace_selection {\
-  background: #494836;\
-  }\
-  .ace-remixDark .ace_marker-layer .ace_step {\
-  background: rgb(198, 219, 174);\
-  }\
-  .ace-remixDark .ace_marker-layer .ace_bracket {\
-  margin: -1px 0 0 -1px;\
-  border: 1px solid #FCE94F;\
-  }\
-  .ace-remixDark .ace_marker-layer .ace_active-line {\
-  background: #262843;\
-  }\
-  .ace-remixDark .ace_gutter-active-line {\
-  background-color: #363950;\
-  }\
-  .ace-remixDark .ace_invisible {\
-  color: #404040;\
-  }\
-  .ace-remixDark .ace_rparen {\
-    color: #d4d7ed;\
-  }\
-  .ace-remixDark .ace_lparen {\
-    color: #d4d7ed;\
-  }\
-  .ace-remixDark .ace_keyword {\
-  color:#ffa76d;\
-  }\
-  .ace-remixDark .ace_keyword.ace_operator {\
-  color:#eceeff;\
-  }\
-  .ace-remixDark .ace_constant {\
-  color:#1EDAFB;\
-  }\
-  .ace-remixDark .ace_constant.ace_language {\
-  color:#FDC251;\
-  }\
-  .ace-remixDark .ace_constant.ace_library {\
-  color:#8DFF0A;\
-  }\
-  .ace-remixDark .ace_constant.ace_numeric {\
-  color:#eceeff;\
-  }\
-  .ace-remixDark .ace_invalid {\
-  color:#FFFFFF;\
-  background-color:#990000;\
-  }\
-  .ace-remixDark .ace_invalid.ace_deprecated {\
-  color:#FFFFFF;\
-  background-color:#990000;\
-  }\
-  .ace-remixDark .ace_support {\
-  color: #999;\
-  }\
-  .ace-remixDark .ace_support.ace_function {\
-  color:#3fe2a7;\
-  }\
-  .ace-remixDark .ace_function {\
-  color:#3fe2a7;\
-  }\
-  .ace-remixDark .ace_string {\
-  color:#eceeff;\
-  }\
-  .ace-remixDark .ace_comment {\
-  color:#a7a7a7;\
-  font-style:italic;\
-  padding-bottom: 0px;\
-  }\
-  .ace-remixDark .ace_type {\
-  color:#75ceef;\
-  }\
-  .ace-remixDark .ace_visibility {\
-    color:#f7d777;\
-  }\
-  .ace-remixDark .ace_identifier {\
-    color:#bec1dd;\
-  }\
-  .ace-remixDark .ace_modifier {\
-    color:#efff2f;\
-  }\
-  .ace-remixDark .ace-boolean {\
-    color:#ff86ac;\
-  }\
-  .ace-remixDark .ace_statemutability {\
-    color:#FFCC00;\
-  }\
-  .ace-remixDark .ace_variable {\
-  color:#e0bb83;\
-  }\
-  .ace-remixDark .ace_meta.ace_tag {\
-  color:#BE53E6;\
-  }\
-  .ace-remixDark .ace_entity.ace_other.ace_attribute-name {\
-  color:#4aa8fd;\
-  }\
-  .ace-remixDark .ace_markup.ace_underline {\
-  text-decoration: underline;\
-  }\
-  .ace-remixDark .ace_fold-widget {\
-  text-align: center;\
-  }\
-  .ace-remixDark .ace_fold-widget:hover {\
-  color: #777;\
-  }\
-  .ace-remixDark .ace_fold-widget.ace_start,\
-  .ace-remixDark .ace_fold-widget.ace_end,\
-  .ace-remixDark .ace_fold-widget.ace_closed{\
-  background: none;\
-  border: none;\
-  box-shadow: none;\
-  }\
-  .ace-remixDark .ace_fold-widget.ace_start:after {\
-  content: '▾'\
-  }\
-  .ace-remixDark .ace_fold-widget.ace_end:after {\
-  content: '▴'\
-  }\
-  .ace-remixDark .ace_fold-widget.ace_closed:after {\
-  content: '‣'\
-  }\
-  .ace-remixDark .ace_indent-guide {\
-  border-right:1px dotted #333;\
-  margin-right:-1px;\
-  }\
-  .ace-remixDark .ace_fold { \
-  background: #222; \
-  border-radius: 3px; \
-  color: #7AF; \
-  border: none; \
-  }\
-  .ace-remixDark .ace_fold:hover {\
-  background: #CCC; \
-  color: #000;\
-  }\
-  ";
-  
-  var dom = acequire("../lib/dom");
-  dom.importCssString(exports.cssText, exports.cssClass);
-  
-  });
--- a/apps/remix-ide/src/assets/js/parser/index.iife.js
+++ b/apps/remix-ide/src/assets/js/parser/index.iife.js
--- a/apps/remix-ide/src/assets/js/parser/index.iife.js.map
+++ b/apps/remix-ide/src/assets/js/parser/index.iife.js.map
--- a/libs/remix-core-plugin/src/lib/editor-context-listener.ts
+++ b/libs/remix-core-plugin/src/lib/editor-context-listener.ts
@ -5,11 +5,12 @@ import { CompilerAbstract } from '@remix-project/remix-solidity'
 import { Compiler } from '@remix-project/remix-solidity'

 import { helper } from '@remix-project/remix-solidity'
-import type { CompilationError } from '@remix-project/remix-solidity-ts'
+import type { CompilationError, CompilationResult, CompilationSource } from '@remix-project/remix-solidity-ts'
+

 const profile = {
  name: 'contextualListener',
-  methods: ['getBlockName', 'resolveImports', 'getAST', 'nodesWithScope', 'nodesWithName', 'getNodes', 'compile', 'getNodeById', 'getLastCompilationResult', 'positionOfDefinition', 'definitionAtPosition', 'jumpToDefinition', 'referrencesAtPosition', 'nodesAtEditorPosition', 'referencesOf', 'getActiveHighlights', 'gasEstimation', 'declarationOf', 'jumpToPosition'],
+  methods: ['getBlockName', 'getLastNodeInLine', 'resolveImports', 'parseSource', 'getAST', 'nodesWithScope', 'nodesWithName', 'getNodes', 'compile', 'getNodeById', 'getLastCompilationResult', 'positionOfDefinition', 'definitionAtPosition', 'jumpToDefinition', 'referrencesAtPosition', 'nodesAtEditorPosition', 'referencesOf', 'getActiveHighlights', 'gasEstimation', 'declarationOf', 'jumpToPosition'],
  events: [],
  version: '0.0.1'
 }
@ -66,11 +67,17 @@ export class EditorContextListener extends Plugin {
      this._stopHighlighting()
    })

+    this.on('fileManager', 'currentFileChanged', async () => {
+      await this.getAST()
+      await this.compile()
+      this._stopHighlighting()
+    })
+
    this.on('solidity', 'loadingCompiler', async (url) => {
      console.log('loading compiler', url)

      this.compiler.loadVersion(true, url)
-      this.compiler.event.register('compilerLoaded', async () =>{
+      this.compiler.event.register('compilerLoaded', async () => {
        console.log('compiler loaded')
        //await this.compile()
        //await this.getAST()
@ -78,15 +85,15 @@ export class EditorContextListener extends Plugin {
        const ast = (SolidityParser as any).parse(a, { loc: true, range: true, tolerant: true })
        console.log('BAD AST', ast)
      })
-      
+
    })

    this.compiler = new Compiler((url, cb) => this.call('contentImport', 'resolveAndSave', url, undefined, false).then((result) => cb(null, result)).catch((error) => cb(error.message)))



-    this.onAstFinished = async (success, data, source, input, version) => {
-      console.log('compile success', success)
+    this.onAstFinished = async (success, data: CompilationResult, source: CompilationSource, input: any, version) => {
+      console.log('compile success', success, data)
      this.call('editor', 'clearAnnotations')
      let noFatalErrors = true // ie warnings are ok
      const checkIfFatalError = (error: CompilationError) => {
@ -101,16 +108,8 @@ export class EditorContextListener extends Plugin {
      if (data.errors) data.errors.forEach((err) => checkIfFatalError(err))
      if (data.errors) {
        for (const error of data.errors) {
-          let pos = helper.getPositionDetails(error.formattedMessage)
-          if (pos.errFile) {
-            pos = {
-              row: pos.errLine,
-              column: pos.errCol,
-              text: error.formattedMessage,
-              type: error.severity
-            }
-            await this.call('editor', 'addAnnotation', pos, pos.errFile)
-          }
+          console.log('ERROR POS', error)
+          await this.call('editor', 'addErrorMarker', error)
        }
      }
      if (!data.sources) return
@ -136,6 +135,7 @@ export class EditorContextListener extends Plugin {


    setInterval(async () => {
+      return
      const compilationResult = this.lastCompilationResult // await this.call('compilerArtefacts', 'getLastCompilationResult')
      if (compilationResult && compilationResult.languageversion.indexOf('soljson') === 0) {

@ -170,7 +170,7 @@ export class EditorContextListener extends Plugin {
      this.currentFile = await this.call('fileManager', 'file')
      if (!this.currentFile) return
      const content = await this.call('fileManager', 'readFile', this.currentFile)
-      console.log('compile', this.currentFile, content)
+      // console.log('compile', this.currentFile, content)
      const sources = { [this.currentFile]: { content } }
      this.compiler.compile(sources, this.currentFile)
    } catch (e) {
@ -220,8 +220,9 @@ export class EditorContextListener extends Plugin {
    if (!this.currentFile) return
    const fileContent = text || await this.call('fileManager', 'readFile', this.currentFile)
    try {
-      const ast = (SolidityParser as any).parse(fileContent, { loc: true, range: true, tolerant: true })
+      const ast = await this.parseSource(fileContent)
      this.lastAST = ast
+      console.log('AST PARSE SUCCESS', ast)
    } catch (e) {
      console.log(e)
    }
@ -229,6 +230,41 @@ export class EditorContextListener extends Plugin {
    return this.lastAST
  }

+  async parseSource(text: string) {
+    //console.log('PARSING', text)
+    const ast = (SolidityParser as any).parse(text, { loc: true, range: true, tolerant: true })
+    console.log('AST PARSE SUCCESS', ast)
+    return ast
+  }
+
+  async getLastNodeInLine(ast: string) {
+    let lastNode
+    const checkLastNode = (node) => {
+      if (lastNode && lastNode.range && lastNode.range[1]) {
+        if (node.range[1] > lastNode.range[1]) {
+          lastNode = node
+        }
+      } else {
+        lastNode = node
+      }
+    }
+
+    (SolidityParser as any).visit(ast, {
+      MemberAccess: function (node) {
+        checkLastNode(node)
+      },
+      Identifier: function (node) {
+        checkLastNode(node)
+      }
+    })
+    if (lastNode && lastNode.expression) {
+      console.log('lastNode', lastNode.expression)
+      return lastNode.expression
+    }
+    console.log('lastNode', lastNode)
+    return lastNode
+  }
+
  getActiveHighlights() {
    return [...this._activeHighlights]
  }
--- a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
@ -23,7 +23,7 @@ const RemixApp = (props: IRemixAppUi) => {
    async function activateApp () {
      props.app.themeModule.initTheme(() => {
        setAppReady(true)
-        props.app.activate()
+          props.app.activate()
        setListeners()
      })
    }
--- a/libs/remix-ui/editor/src/lib/providers/completionProvider.ts
+++ b/libs/remix-ui/editor/src/lib/providers/completionProvider.ts
@ -60,10 +60,55 @@ export class RemixCompletionProvider implements languages.CompletionItemProvider
        console.log('cursor', cursorPosition)

        if (context.triggerCharacter === '.') {
+            console.clear()
            console.log('TEXT', line)
-
            const textBeforeCursor = line.substring(0, position.column - 1)
            const textAfterCursor = line.substring(position.column - 1)
+            // parse the line witout changing the line
+
+            const wrapLineInFunction = (text: string) => {
+                return `function() {
+                    ${text}
+                }`
+            }
+
+            let lastNode
+            const checkLastNode = (node) => {
+                if (!node) return
+                if (lastNode && lastNode.range && lastNode.range[1]) {
+                    if (node.range[1] > lastNode.range[1]) {
+                        lastNode = node
+                    }
+                } else {
+                    lastNode = node
+                }
+            }
+
+
+            const linesToCheck =
+                [
+                    textBeforeCursor.substring(0, textBeforeCursor.lastIndexOf('.')) + ".lastnode;",
+                    textBeforeCursor.substring(0, textBeforeCursor.lastIndexOf('.')) + ".lastnode;}",
+                    textBeforeCursor.substring(0, textBeforeCursor.lastIndexOf('.')) + ".lastnode);",
+                    wrapLineInFunction(textBeforeCursor.substring(0, textBeforeCursor.lastIndexOf('.')) + ".lastnode;"),
+                    wrapLineInFunction(textBeforeCursor.substring(0, textBeforeCursor.lastIndexOf('.')) + ".lastnode;}"),
+                    wrapLineInFunction(textBeforeCursor.substring(0, textBeforeCursor.lastIndexOf('.')) + ".lastnode;)"),
+                ]
+
+            for (const line of linesToCheck) {
+                try {
+                    const lineAst = await this.props.plugin.call('contextualListener', 'parseSource', line)
+                    const lastNode = await this.props.plugin.call('contextualListener', 'getLastNodeInLine', lineAst)
+                    checkLastNode(lastNode)
+                } catch (e) {
+
+                }
+            }
+
+            console.log('lastNode found', lastNode)
+
+
+
            console.log(textBeforeCursor, textAfterCursor)
            const splits = textBeforeCursor.split('.')

@ -90,7 +135,7 @@ export class RemixCompletionProvider implements languages.CompletionItemProvider
                    console.log('text without edits', textBefore, textAfterCursor)
                    lineWithoutEdits = `${textBefore}${textAfterCursor}`
                }
-                last = lastWord || last
+                last = lastNode.name || lastNode.memberName
                console.log('last', last)

                const lines = model.getLinesContent()
@ -151,7 +196,7 @@ export class RemixCompletionProvider implements languages.CompletionItemProvider


                // brute force search in all nodes with the name
-                //if (!nodes.length) {
+                if (!nodes.length) {
                    const nodesOfScope = await this.props.plugin.call('contextualListener', 'nodesWithName', last)
                    console.log('NODES WITHE NAME ', last, nodesOfScope)
                    for (const nodeOfScope of nodesOfScope) {
@ -160,16 +205,15 @@ export class RemixCompletionProvider implements languages.CompletionItemProvider
                            if (nodeOfScope.typeName && nodeOfScope.typeName.nodeType === 'UserDefinedTypeName') {
                                const declarationOf = await this.props.plugin.call('contextualListener', 'declarationOf', nodeOfScope.typeName)
                                console.log('HAS DECLARATION OF', declarationOf)
-                                nodes = [...nodes,...declarationOf.nodes || declarationOf.members]
+                                // nodes = [...nodes, ...declarationOf.nodes || declarationOf.members]
                                const baseContracts = await getlinearizedBaseContracts(declarationOf)
                                for (const baseContract of baseContracts) {
-                                    nodes = [...nodes, ...baseContract.nodes]
+                                    //nodes = [...nodes, ...baseContract.nodes]
                                }
                            }
                        }
                    }
-
-                //}
+                }
            }
        } else {
            const cursorPosition = this.props.editorAPI.getCursorPosition()
--- a/libs/remix-ui/editor/src/lib/providers/hoverProvider.ts
+++ b/libs/remix-ui/editor/src/lib/providers/hoverProvider.ts
@ -13,6 +13,7 @@ export class RemixHoverProvider implements languages.HoverProvider {

    provideHover = async function (model: editor.ITextModel, position: Position) {
        console.log('HOVERING')
+        return null
        const cursorPosition = this.props.editorAPI.getHoverPosition(position)

        const nodeAtPosition = await this.props.plugin.call('contextualListener', 'definitionAtPosition', cursorPosition)
--- a/libs/remix-ui/editor/src/lib/remix-ui-editor.tsx
+++ b/libs/remix-ui/editor/src/lib/remix-ui-editor.tsx
@ -8,12 +8,13 @@ import { cairoLang, cairoConf } from './cairoSyntax'
 import './remix-ui-editor.css'
 import { loadTypes } from './web-types'
 import monaco from '../types/monaco'
-import { IPosition } from 'monaco-editor'
+import { IPosition, MarkerSeverity } from 'monaco-editor'

 import { RemixHoverProvider } from './providers/hoverProvider'
 import { RemixReferenceProvider } from './providers/referenceProvider'
 import { RemixCompletionProvider } from './providers/completionProvider'
 import { RemixSignatureProvider } from './providers/signatureProvider'
+import { CompilationError } from '@remix-project/remix-solidity-ts'

 type cursorPosition = {
  startLineNumber: number,
@ -76,11 +77,11 @@ export interface EditorUIProps {
    getCursorPosition: () => cursorPosition
    getHoverPosition: (position: IPosition) => number
    addDecoration: (marker: sourceMarker, filePath: string, typeOfDecoration: string) => DecorationsReturn
+    addErrorMarker: (error: CompilationError) => void
    clearDecorationsByPlugin: (filePath: string, plugin: string, typeOfDecoration: string, registeredDecorations: any, currentDecorations: any) => DecorationsReturn
    keepDecorationsFor: (filePath: string, plugin: string, typeOfDecoration: string, registeredDecorations: any, currentDecorations: any) => DecorationsReturn
  }
 }
-
 export const EditorUI = (props: EditorUIProps) => {
  const [, setCurrentBreakpoints] = useState({})
  const defaultEditorValue = `
@ -265,6 +266,7 @@ export const EditorUI = (props: EditorUIProps) => {
    } else if (file.language === 'cairo') {
      monacoRef.current.editor.setModelLanguage(file.model, 'remix-cairo')
    }
+    
  }, [props.currentFile])

  const convertToMonacoDecoration = (decoration: sourceAnnotation | sourceMarker, typeOfDecoration: string) => {
@ -354,6 +356,35 @@ export const EditorUI = (props: EditorUIProps) => {
    return addDecoration(marker, filePath, typeOfDecoration)
  }

+  props.editorAPI.addErrorMarker = async (marker: CompilationError) => {
+
+    console.log(editorModelsState)
+    let filePath = marker.sourceLocation.file
+    console.log(filePath)
+    if (!filePath) return
+    const fileFromUrl = await props.plugin.call('fileManager', 'getPathFromUrl', filePath)
+    filePath = fileFromUrl.file
+    const model = editorModelsState[filePath]?.model
+    if (model) {
+      console.log(model)
+      const markerData: monaco.editor.IMarkerData = {
+        severity: MarkerSeverity.Error,
+        startLineNumber: 1,
+        startColumn: 1,
+        endLineNumber: 1,
+        endColumn: 2,
+        message: marker.message,
+        code: '21ji2j21ij21iji'
+      }
+      console.log(markerData)
+      monacoRef.current.editor.colorizeModelLine(model,1)
+      monacoRef.current.editor.colorizeModelLine(model,2)
+      console.log(monacoRef.current.editor.getModels())
+      monacoRef.current.editor.setModelMarkers(model, 'remix-solidity', [markerData])
+      console.log(monacoRef.current.editor.getModelMarkers({}))
+    }
+  }
+
  props.editorAPI.findMatches = (uri: string, value: string) => {
    if (!editorRef.current) return
    const model = editorModelsState[uri]?.model
@ -436,7 +467,7 @@ export const EditorUI = (props: EditorUIProps) => {
    })
  }

-  function handleEditorWillMount(monaco: Monaco) {
+  function handleEditorWillMount(monaco: Monaco) {   
    console.log('editor will mount', monaco, typeof monaco)
    monacoRef.current = monaco
    // Register a new language
@ -451,20 +482,24 @@ export const EditorUI = (props: EditorUIProps) => {

    // register Definition Provider
    monacoRef.current.languages.registerDefinitionProvider('remix-solidity', {
-      
-      provideDefinition(model:any, position: any, token: any) {
+
+      provideDefinition(model: any, position: any, token: any) {
        const cursorPosition = props.editorAPI.getCursorPosition()
        props.plugin.call('contextualListener', 'jumpToDefinition', cursorPosition)
        return null
      }
    })
+    monacoRef.current.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: false,
+      noSyntaxValidation: false,
+    });

    monacoRef.current.languages.registerReferenceProvider('remix-solidity', new RemixReferenceProvider(props, monaco))
    monacoRef.current.languages.registerHoverProvider('remix-solidity', new RemixHoverProvider(props, monaco))
    monacoRef.current.languages.registerCompletionItemProvider('remix-solidity', new RemixCompletionProvider(props, monaco))
    // monacoRef.current.languages.registerSignatureHelpProvider('remix-solidity', new RemixSignatureProvider(props, monaco))
    loadTypes(monacoRef.current)
-    
+
  }

  return (
--- a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
+++ b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
@ -82,6 +82,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
  const rightPanel = useRef(null)

  useEffect(() => {
+
    plugin.call('theme', 'currentTheme').then((theme) => {
      // update theme quality. To be used for for images
      setState(prevState => {
@ -94,6 +95,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
        return { ...prevState, themeQuality: theme.quality === 'dark' ? themes.dark : themes.light }
      })
    })
+
    window.addEventListener('click', (event) => {
      const target = event.target as Element
      const id = target.id
@ -107,11 +109,13 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
    scriptTwitter.src = 'https://platform.twitter.com/widgets.js'
    scriptTwitter.async = true
    document.body.appendChild(scriptTwitter)
+
    // to retrieve medium publications
    const scriptMedium = document.createElement('script')
    scriptMedium.src = 'https://www.twilik.com/assets/retainable/rss-embed/retainable-rss-embed.js'
    scriptMedium.async = true
-    document.body.appendChild(scriptMedium)
+    // causes bugs in Monaco
+    // document.body.appendChild(scriptMedium)
    return () => {
      document.body.removeChild(scriptTwitter)
      document.body.removeChild(scriptMedium)
@ -188,21 +192,21 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
    <>
      <ModalDialog
        id='homeTab'
-        title={ 'Import from ' + state.modalInfo.title }
+        title={'Import from ' + state.modalInfo.title}
        okLabel='Import'
-        hide={ !state.showModalDialog }
-        handleHide={ () => hideFullMessage() }
-        okFn={ () => processLoading() }
+        hide={!state.showModalDialog}
+        handleHide={() => hideFullMessage()}
+        okFn={() => processLoading()}
      >
        <div className="p-2 user-select-auto">
-          { state.modalInfo.loadItem !== '' && <span>Enter the { state.modalInfo.loadItem } you would like to load.</span> }
-          { state.modalInfo.examples.length !== 0 &&
-          <>
-            <div>e.g</div>
-            <div>
-              { examples }
-            </div>
-          </> }
+          {state.modalInfo.loadItem !== '' && <span>Enter the {state.modalInfo.loadItem} you would like to load.</span>}
+          {state.modalInfo.examples.length !== 0 &&
+            <>
+              <div>e.g</div>
+              <div>
+                {examples}
+              </div>
+            </>}
          <input
            ref={inputValue}
            type='text'
@ -224,10 +228,10 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
        <div className="border-bottom d-flex flex-column mr-4 pb-3 mb-3">
          <div className="d-flex justify-content-between ">
            <div className="mx-4 my-4 d-flex">
-              <label style={ { fontSize: 'xxx-large', height: 'auto', alignSelf: 'flex-end' } }>Remix IDE</label>
+              <label style={{ fontSize: 'xxx-large', height: 'auto', alignSelf: 'flex-end' }}>Remix IDE</label>
            </div>
            <div className="mr-4 d-flex">
-              <img className="mt-4 mb-2 remixui_home_logoImg" src="assets/img/guitarRemiCroped.webp" onClick={ () => playRemi() } alt=""></img>
+              <img className="mt-4 mb-2 remixui_home_logoImg" src="assets/img/guitarRemiCroped.webp" onClick={() => playRemi()} alt=""></img>
              <audio
                id="remiAudio"
                muted={false}
@ -249,7 +253,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
            <div className="mb-3">
              <h4>Featured Plugins</h4>
              <div className="d-flex flex-row pt-2">
-                <ThemeContext.Provider value={ state.themeQuality }>
+                <ThemeContext.Provider value={state.themeQuality}>
                  <PluginButton imgPath="assets/img/solidityLogo.webp" envID="solidityLogo" envText="Solidity" callback={() => startSolidity()} />
                  <PluginButton imgPath="assets/img/starkNetLogo.webp" envID="starkNetLogo" envText="StarkNet" l2={true} callback={() => startStarkNet()} />
                  <PluginButton imgPath="assets/img/solhintLogo.webp" envID="solhintLogo" envText="Solhint linter" callback={() => startSolhint()} />
@ -300,7 +304,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
                  <a className="remixui_home_text" target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a>
                </p>
                <p className="mb-1">
-                  <img id='remixHhomeWebsite' className="mr-2 remixui_home_image" src={ plugin.profile.icon } style={ { filter: state.themeQuality.filter } } alt=''></img>
+                  <img id='remixHhomeWebsite' className="mr-2 remixui_home_image" src={plugin.profile.icon} style={{ filter: state.themeQuality.filter }} alt=''></img>
                  <a className="remixui_home_text" target="__blank" href="https://remix-project.org">Featuring website</a>
                </p>
              </div>
@ -334,12 +338,12 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
          </div>
          <div
            className="mr-3 d-flex bg-light remixui_home_panels"
-            style={ { visibility: state.showMediaPanel === 'none' ? 'hidden' : 'visible' } }
+            style={{ visibility: state.showMediaPanel === 'none' ? 'hidden' : 'visible' }}
            id="remixIDEMediaPanels"
            ref={rightPanel}
          >
-            <div id="remixIDE_MediumBlock" className="p-2 mx-1 mt-3 mb-0 remixui_home_remixHomeMedia" style={ { maxHeight: maxHeight } }>
-              <div id="medium-widget" className="px-3 remixui_home_media" hidden={state.showMediaPanel !== 'medium'} style={ { maxHeight: '10000px' } }>
+            <div id="remixIDE_MediumBlock" className="p-2 mx-1 mt-3 mb-0 remixui_home_remixHomeMedia" style={{ maxHeight: maxHeight }}>
+              <div id="medium-widget" className="px-3 remixui_home_media" hidden={state.showMediaPanel !== 'medium'} style={{ maxHeight: '10000px' }}>
                <div
                  id="retainable-rss-embed"
                  data-rss="https://medium.com/feed/remix-ide"
@ -353,11 +357,11 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
                </div>
              </div>
            </div>
-            <div id="remixIDE_TwitterBlock" className="p-2 mx-1 mt-3 mb-0 remixui_home_remixHomeMedia" hidden={state.showMediaPanel !== 'twitter'} style={ { maxHeight: maxHeight, marginRight: '28px' } } >
-              <div className="remixui_home_media" style={ { minHeight: elHeight } } >
+            <div id="remixIDE_TwitterBlock" className="p-2 mx-1 mt-3 mb-0 remixui_home_remixHomeMedia" hidden={state.showMediaPanel !== 'twitter'} style={{ maxHeight: maxHeight, marginRight: '28px' }} >
+              <div className="remixui_home_media" style={{ minHeight: elHeight }} >
                <a className="twitter-timeline"
                  data-width="375"
-                  data-theme={ state.themeQuality.name }
+                  data-theme={state.themeQuality.name}
                  data-chrome="nofooter noheader transparent"
                  data-tweet-limit="18"
                  href="https://twitter.com/EthereumRemix"
--- a/package.json
+++ b/package.json
@ -152,7 +152,7 @@
    "@ethereumjs/vm": "^5.5.3",
    "@ethersphere/bee-js": "^3.2.0",
    "@isomorphic-git/lightning-fs": "^4.4.1",
-    "@monaco-editor/react": "^4.3.1",
+    "@monaco-editor/react": "4.4.5",
    "@remixproject/engine": "^0.3.28",
    "@remixproject/engine-web": "^0.3.28",
    "@remixproject/plugin": "^0.3.28",
--- a/yarn.lock
+++ b/yarn.lock
@ -3242,19 +3242,19 @@
    npmlog "^4.1.2"
    write-file-atomic "^2.3.0"

-"@monaco-editor/loader@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.2.0.tgz#373fad69973384624e3d9b60eefd786461a76acd"
-  integrity sha512-cJVCG/T/KxXgzYnjKqyAgsKDbH9mGLjcXxN6AmwumBwa2rVFkwvGcUj1RJtD0ko4XqLqJxwqsN/Z/KURB5f1OQ==
+"@monaco-editor/loader@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.3.2.tgz#04effbb87052d19cd7d3c9d81c0635490f9bb6d8"
+  integrity sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==
  dependencies:
    state-local "^1.0.6"

-"@monaco-editor/react@^4.3.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.3.1.tgz#d65bcbf174c39b6d4e7fec43d0cddda82b70a12a"
-  integrity sha512-f+0BK1PP/W5I50hHHmwf11+Ea92E5H1VZXs+wvKplWUWOfyMa1VVwqkJrXjRvbcqHL+XdIGYWhWNdi4McEvnZg==
+"@monaco-editor/react@4.4.5":
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.4.5.tgz#beabe491efeb2457441a00d1c7651c653697f65b"
+  integrity sha512-IImtzU7sRc66OOaQVCG+5PFHkSWnnhrUWGBuH6zNmH2h0YgmAhcjHZQc/6MY9JWEbUtVF1WPBMJ9u1XuFbRrVA==
  dependencies:
-    "@monaco-editor/loader" "^1.2.0"
+    "@monaco-editor/loader" "^1.3.2"
    prop-types "^15.7.2"

 "@mrmlnc/readdir-enhanced@^2.2.1":
@ -14921,7 +14921,7 @@ loader-utils@^1.0.0, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2
    emojis-list "^3.0.0"
    json5 "^1.0.1"

-loader-utils@^2.0.0:
+loader-utils@^2.0.0, loader-utils@^2.0.2:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.2.tgz#d6e3b4fb81870721ae4e0868ab11dd638368c129"
  integrity sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==
@ -16142,6 +16142,13 @@ mold-source-map@~0.4.0:
    convert-source-map "^1.1.0"
    through "~2.2.7"

+monaco-editor-webpack-plugin@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-7.0.1.tgz#ba19c60aba990184e36ad8722b1ed6a564527c7c"
+  integrity sha512-M8qIqizltrPlIbrb73cZdTWfU9sIsUVFvAZkL3KGjAHmVWEJ0hZKa/uad14JuOckc0GwnCaoGHvMoYtJjVyCzw==
+  dependencies:
+    loader-utils "^2.0.2"
+
 monaco-editor@^0.30.1:
  version "0.30.1"
  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.30.1.tgz#47f8d18a0aa2264fc5654581741ab8d7bec01689"
@ -24423,4 +24430,4 @@ yo-yoify@^4.0.0:
 yocto-queue@^0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
-  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==