Using custom language

[ianteohsc]

How do I register a custom language and activate it ?

[imguolao]

You can get a monaco editor instance through the onBeforeMount event.

<template>
  <vue-monaco-editor @beforeMount ="handleBeforeMount" />
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'

const monacoRef = shallowRef()
const handleBeforeMount = monaco => (monacoRef.value = monaco)
</script>

And then, refer to the monaco editor documentation to set up custom languagea and prompts.

You can refer the code in this link.

[DeedsBaron]

Hi, im strugling on enabling comments in json model, how can i get monaco instance?

[imguolao]

Hi, im strugling on enabling comments in json model, how can i get monaco instance?

If you are in vue, you can get a monaco instance via component hooks.

<template>
  <vue-monaco-editor @beforeMount ="handleBeforeMount" @mount="handleMount" />
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'

const monaco= shallowRef()
const editor = shallowRef()

// Both hooks can get the monaco instances
const handleBeforeMount = monacoInstance => (monaco.value = monacoInstance)

const handleMount = (editorInstance, monacoInstance) => {
  editor.value = editorInstance
  monaco.value = monacoInstance
}
</script>

Or this way:

<template>
  <div ref="containerRef"></div>
</template>

<script lang="ts" setup>
import { ref, onUnmounted, watchEffect, nextTick } from 'vue'
import { useMonaco } from '@guolao/vue-monaco-editor'

const containerRef = ref()
const { monacoRef, unload } = useMonaco()

// watch once
const stop = watchEffect(() => {
  if (monacoRef.value && containerRef.value) {
    nextTick(() => stop())
    monacoRef.value.editor.create(containerRef.value, { ... })
  }
})

/*
  When the component will be unmount,
  If the monaco instance is not successfully loaded,
  You need to manually unload.
*/
onUnmounted(() => !monacoRef.value && unload())
</script>

If you are not in a vue component, you can like this way:

import loader from '@monaco-editor/loader'

loader
  .init()
  .then(monacoInstance => {
    // got it
  })
  .catch(error => {
    if (error?.type !== 'cancelation') {
      console.error('Monaco initialization error:', error)
    }
  })