wikijs-fork/client/js/components/editor-codeblock.js

88 lines
2.3 KiB
JavaScript
Raw Normal View History

'use strict'
import $ from 'jquery'
import Vue from 'vue'
import _ from 'lodash'
import * as ace from 'brace'
import 'brace/theme/tomorrow_night'
import 'brace/mode/markdown'
2017-04-02 04:22:52 +00:00
import 'brace-ext-modelist'
2016-09-11 16:03:06 +00:00
2017-02-09 01:52:37 +00:00
let codeEditor = null
2016-09-11 16:03:06 +00:00
2016-10-17 23:52:04 +00:00
// ACE - Mode Loader
2017-02-09 01:52:37 +00:00
let modelistLoaded = []
2016-10-17 23:52:04 +00:00
let loadAceMode = (m) => {
2017-02-09 01:52:37 +00:00
return $.ajax({
url: '/js/ace/mode-' + m + '.js',
dataType: 'script',
cache: true,
beforeSend: () => {
if (_.includes(modelistLoaded, m)) {
return false
}
},
success: () => {
modelistLoaded.push(m)
}
})
}
2016-10-17 23:52:04 +00:00
// Vue Code Block instance
module.exports = (mde, mdeModalOpenState) => {
2017-04-02 04:22:52 +00:00
let modelist = ace.acequire('ace/ext/modelist')
let vueCodeBlock = new Vue({
el: '#modal-editor-codeblock',
data: {
modes: modelist.modesByName,
modeSelected: 'text',
initContent: ''
},
watch: {
modeSelected: (val, oldVal) => {
loadAceMode(val).done(() => {
2017-04-02 04:22:52 +00:00
ace.acequire('ace/mode/' + val)
codeEditor.getSession().setMode('ace/mode/' + val)
})
}
},
methods: {
open: (ev) => {
2017-05-19 00:26:50 +00:00
mdeModalOpenState = true
$('#modal-editor-codeblock').addClass('is-active')
_.delay(() => {
codeEditor = ace.edit('codeblock-editor')
codeEditor.setTheme('ace/theme/tomorrow_night')
codeEditor.getSession().setMode('ace/mode/' + vueCodeBlock.modeSelected)
codeEditor.setOption('fontSize', '14px')
codeEditor.setOption('hScrollBarAlwaysVisible', false)
codeEditor.setOption('wrap', true)
2016-12-04 01:20:06 +00:00
codeEditor.setValue(vueCodeBlock.initContent)
codeEditor.focus()
codeEditor.renderer.updateFull()
}, 300)
},
cancel: (ev) => {
mdeModalOpenState = false // eslint-disable-line no-undef
$('#modal-editor-codeblock').removeClass('is-active')
vueCodeBlock.initContent = ''
},
insertCode: (ev) => {
if (mde.codemirror.doc.somethingSelected()) {
mde.codemirror.execCommand('singleSelection')
}
let codeBlockText = '\n```' + vueCodeBlock.modeSelected + '\n' + codeEditor.getValue() + '\n```\n'
mde.codemirror.doc.replaceSelection(codeBlockText)
vueCodeBlock.cancel()
}
2017-02-09 01:52:37 +00:00
}
})
return vueCodeBlock
}