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

74 lines
1.7 KiB
JavaScript
Raw Normal View History

2016-09-11 16:03:06 +00:00
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");
2016-10-17 23:52:04 +00:00
// 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
2016-09-11 16:03:06 +00:00
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: {
2016-12-04 01:20:06 +00:00
open: (ev) => {
$('#modal-editor-codeblock').addClass('is-active');
_.delay(() => {
codeEditor.resize();
codeEditor.focus();
codeEditor.setAutoScrollEditorIntoView(true);
codeEditor.renderer.updateFull();
}, 1000);
},
2016-09-11 16:03:06 +00:00
cancel: (ev) => {
mdeModalOpenState = false;
2016-12-04 01:20:06 +00:00
$('#modal-editor-codeblock').removeClass('is-active');
2016-09-11 16:03:06 +00:00
},
insertCode: (ev) => {
if(mde.codemirror.doc.somethingSelected()) {
mde.codemirror.execCommand('singleSelection');
}
let codeBlockText = '\n```' + vueCodeBlock.modeSelected + '\n' + codeEditor.getValue() + '\n```\n';
2016-09-11 16:03:06 +00:00
mde.codemirror.doc.replaceSelection(codeBlockText);
vueCodeBlock.cancel();
}
}
2016-10-17 23:52:04 +00:00
});