import { defineComponent } from 'vue'
import Editor from '@guolao/vue-monaco-editor'

export default defineComponent(() => {
  return (
    <Editor 
      height="80vh"
      theme='vs-dark'
      defaultLanguage="javascript"
      defaultValue="// some comment"
      onChange={(val, event) => console.log(val, event)}
    />
  )
})

import { defineComponent, ref } from 'vue'
import Editor from '@guolao/vue-monaco-editor'

export default defineComponent(() => {
  const editorRef = ref()

  function handleEditorMount(editor) {
    // 在这里获取 editor instance
    editorRef.value = editor
  }

  return (
    <Editor 
      height="80vh"
      theme='vs-dark'
      defaultLanguage="javascript"
      defaultValue="// some comment"
      onMount={handleEditorMount}
    />
  )
})

import { defineComponent, ref } from 'vue'
import Editor from '@guolao/vue-monaco-editor'

export default defineComponent(() => {
  const monacoRef = ref()

  function handleMonacoBeforeMount(monaco) {
    // 在这里获取 monaco instance
    monacoRef.value = editor
  }

  function handleMonacoMount(editor, monaco) {
    // 在这里获取 monaco instance
    monacoRef.value = editor
  }

  return (
    <Editor 
      height="80vh"
      theme='vs-dark'
      defaultLanguage="javascript"
      defaultValue="// some comment"
      onBeforeMount={handleMonacoBeforeMount}
      onMount={handleEditorMount}
    />
  )
})

import { defineComponent, onUnmounted } from 'vue'
import Editor, { useMonaco } from '@guolao/vue-monaco-editor'

export default defineComponent(() => {
  const { monacoRef, unload } = useMonaco()
  
  // 组件卸载时，
  // monaco instance 没有加载成功的话，
  // 需要手动取消加载。
  onUnmounted(() => !monacoRef.value && unload())

  return (
    <Editor 
      height="80vh"
      theme='vs-dark'
      defaultLanguage="javascript"
      defaultValue="// some comment"
    />
  )
})

import { loader } from "@guolao/vue-monaco-editor"

// CDN 加载
loader.config({ 
  paths: { 
    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs' 
  },
})

//  可以配置语言
loader.config({ "vs/nls": { availableLanguages: { "*": "de" } } })

// or
loader.config({
  paths: {
    vs: "...",
  },
  "vs/nls" : {
    availableLanguages: {
      "*": "de",
    },
  },
})

loader.config({ 
  paths: { 
    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs' 
  },
})

import * as monaco from "monaco-editor"
import { loader } from "@guolao/vue-monaco-editor"

// 配置从 `node_modules` 中加载 monaco-editor
loader.config({ monaco })

import { loader } from "@guolao/vue-monaco-editor"

import * as monaco from "monaco-editor"
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"
import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker"
import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker"
import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker"
import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker"

self.MonacoEnvironment = {
  getWorker(_, label) {
    if (label === "json") {
      return new jsonWorker()
    }
    if (label === "css" || label === "scss" || label === "less") {
      return new cssWorker()
    }
    if (label === "html" || label === "handlebars" || label === "razor") {
      return new htmlWorker()
    }
    if (label === "typescript" || label === "javascript") {
      return new tsWorker()
    }
    return new editorWorker()
  }
}

loader.config({ monaco })