You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
1.0 KiB
36 lines
1.0 KiB
import {Component} from '../../vues6.js'
|
|
import {uuid} from '../util.js'
|
|
|
|
const template = `
|
|
<div class="monaco-container" :id="id" style="width: 100%; height: 100%; min-height: 400px">
|
|
</div>
|
|
`
|
|
export class MonacoComponent extends Component {
|
|
static get template() { return template }
|
|
static get selector() { return 'cobalt-monaco' }
|
|
static get props() { return ['initialvalue', 'syntax'] }
|
|
|
|
constructor() {
|
|
super()
|
|
this.id = 'monaco-' + uuid()
|
|
this.value = ''
|
|
}
|
|
|
|
vue_on_create() {
|
|
this.value = this.initialvalue
|
|
this.$nextTick(() => {
|
|
this.el = document.querySelector(`#${this.id}`)
|
|
this.editor = monaco.editor.create(this.el, {
|
|
theme: 'vs-dark',
|
|
value: this.value,
|
|
language: this.syntax,
|
|
})
|
|
|
|
this.editor.onDidChangeModelContent(e => {
|
|
this.value = this.editor.getValue()
|
|
this.$emit('changed', this.value)
|
|
})
|
|
})
|
|
}
|
|
}
|