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.
wiki/client/js/components/editor-codeblock.js

78 lines
1.7 KiB

let modelist = ace.require("ace/ext/modelist");
let codeEditor = null;
// 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',
initContent: ''
},
watch: {
modeSelected: (val, oldVal) => {
loadAceMode(val).done(() => {
ace.require("ace/mode/" + val);
codeEditor.getSession().setMode("ace/mode/" + val);
});
}
},
methods: {
open: (ev) => {
$('#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);
codeEditor.setValue(vueCodeBlock.initContent);
codeEditor.focus();
codeEditor.renderer.updateFull();
}, 300);
},
cancel: (ev) => {
mdeModalOpenState = false;
$('#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();
}
}
});