1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
let codeEditor = ace.edit("codeblock-editor");
codeEditor.setTheme("ace/theme/tomorrow_night");
codeEditor.getSession().setMode("ace/mode/markdown");
codeEditor.setOption('fontSize', '14px');
codeEditor.setOption('hScrollBarAlwaysVisible', false);
codeEditor.setOption('wrap', true);
let modelist = ace.require("ace/ext/modelist");
// ACE - Mode Loader
let modelistLoaded = [];
let loadAceMode = (m) => {
return $.ajax({
url: '/js/ace/mode-' + m + '.js',
dataType: "script",
cache: true,
beforeSend: () => {
if(_.includes(modelistLoaded, m)) {
return false;
}
},
success: () => {
modelistLoaded.push(m);
}
});
};
// Vue Code Block instance
let vueCodeBlock = new Vue({
el: '#modal-editor-codeblock',
data: {
modes: modelist.modesByName,
modeSelected: 'text'
},
watch: {
modeSelected: (val, oldVal) => {
loadAceMode(val).done(() => {
ace.require("ace/mode/" + val);
codeEditor.getSession().setMode("ace/mode/" + val);
});
}
},
methods: {
cancel: (ev) => {
mdeModalOpenState = false;
$('#modal-editor-codeblock').slideUp();
},
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();
}
}
});