@bhsd/monaco-editor-es

Monaco-Editor-ES

Installation

npm i @bhsd/monaco-editor-es

Usage

Step 1 - Define where the workers are located

const workersDir = new URL('../node_modules/@bhsd/monaco-editor-es/workers/', import.meta.url)
self.MonacoEnvironment = {
  getWorkerUrl: function (moduleId, label) {
    switch(label) {
      case 'json':
        return `${workersDir}json.worker.js`
      case 'css':
      case 'less':
      case 'scss':
        return `${workersDir}css.worker.js`
      case 'html':
      case 'handlebars':
      case 'razor':
        return `${workersDir}html.worker.js`
      case 'typescript':
      case 'javascript':
        return `${workersDir}ts.worker.js`
      default:
        return `${workersDir}editor.worker.js`
    }
  }
}

Step 2 - Create the MonacoEditor

monaco.editor.create(document.getElementById('#editor'), {
  language: 'javascript',
  theme: 'vs-dark'
})

For more info on Monaco Editor see the Official Documentation