BookStack/resources/assets/js/libs/code.js

233 lines
5.9 KiB
JavaScript
Raw Normal View History

2017-05-28 08:16:21 -04:00
require('codemirror/mode/css/css');
require('codemirror/mode/clike/clike');
require('codemirror/mode/diff/diff');
2017-05-28 08:16:21 -04:00
require('codemirror/mode/go/go');
require('codemirror/mode/htmlmixed/htmlmixed');
require('codemirror/mode/javascript/javascript');
require('codemirror/mode/markdown/markdown');
require('codemirror/mode/nginx/nginx');
require('codemirror/mode/php/php');
require('codemirror/mode/powershell/powershell');
require('codemirror/mode/python/python');
require('codemirror/mode/ruby/ruby');
require('codemirror/mode/shell/shell');
require('codemirror/mode/sql/sql');
require('codemirror/mode/toml/toml');
require('codemirror/mode/xml/xml');
require('codemirror/mode/yaml/yaml');
const CodeMirror = require('codemirror');
2017-06-17 07:41:18 -04:00
const modeMap = {
css: 'css',
c: 'clike',
java: 'clike',
scala: 'clike',
kotlin: 'clike',
'c++': 'clike',
'c#': 'clike',
csharp: 'clike',
diff: 'diff',
2017-06-17 07:41:18 -04:00
go: 'go',
html: 'htmlmixed',
javascript: 'javascript',
json: {name: 'javascript', json: true},
js: 'javascript',
php: 'php',
md: 'markdown',
mdown: 'markdown',
markdown: 'markdown',
nginx: 'nginx',
powershell: 'powershell',
py: 'python',
python: 'python',
ruby: 'ruby',
rb: 'ruby',
shell: 'shell',
sh: 'shell',
2017-06-17 07:41:18 -04:00
bash: 'shell',
toml: 'toml',
sql: 'sql',
xml: 'xml',
yaml: 'yaml',
yml: 'yaml',
};
/**
* Highlight pre elements on a page
*/
function highlight() {
let codeBlocks = document.querySelectorAll('.page-content pre, .comment-box .content pre');
2017-05-28 08:16:21 -04:00
for (let i = 0; i < codeBlocks.length; i++) {
2017-06-17 10:07:55 -04:00
highlightElem(codeBlocks[i]);
}
}
2017-05-28 08:16:21 -04:00
/**
* Add code highlighting to a single element.
* @param {HTMLElement} elem
*/
2017-06-17 10:07:55 -04:00
function highlightElem(elem) {
let innerCodeElem = elem.querySelector('code[class^=language-]');
let mode = '';
if (innerCodeElem !== null) {
let langName = innerCodeElem.className.replace('language-', '');
mode = getMode(langName);
2017-05-28 08:16:21 -04:00
}
2017-06-17 10:07:55 -04:00
elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
let content = elem.textContent.trim();
2017-06-17 10:07:55 -04:00
CodeMirror(function(elt) {
elem.parentNode.replaceChild(elt, elem);
}, {
value: content,
mode: mode,
lineNumbers: true,
theme: getTheme(),
2017-06-17 10:07:55 -04:00
readOnly: true
});
}
/**
* Search for a codemirror code based off a user suggestion
* @param suggestion
* @returns {string}
*/
function getMode(suggestion) {
suggestion = suggestion.trim().replace(/^\./g, '').toLowerCase();
return (typeof modeMap[suggestion] !== 'undefined') ? modeMap[suggestion] : '';
}
/**
* Ge the theme to use for CodeMirror instances.
* @returns {*|string}
*/
function getTheme() {
return window.codeTheme || 'base16-light';
}
2017-05-28 08:16:21 -04:00
/**
* Create a CodeMirror instance for showing inside the WYSIWYG editor.
* Manages a textarea element to hold code content.
* @param {HTMLElement} elem
* @returns {{wrap: Element, editor: *}}
*/
function wysiwygView(elem) {
2017-06-17 10:07:55 -04:00
let doc = elem.ownerDocument;
let codeElem = elem.querySelector('code');
let lang = (elem.className || '').replace('language-', '');
if (lang === '' && codeElem) {
lang = (codeElem.className || '').replace('language-', '')
}
2017-06-17 10:07:55 -04:00
elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
let content = elem.textContent;
let newWrap = doc.createElement('div');
let newTextArea = doc.createElement('textarea');
newWrap.className = 'CodeMirrorContainer';
newWrap.setAttribute('data-lang', lang);
2017-06-17 10:07:55 -04:00
newTextArea.style.display = 'none';
elem.parentNode.replaceChild(newWrap, elem);
newWrap.appendChild(newTextArea);
newWrap.contentEditable = false;
newTextArea.textContent = content;
let cm = CodeMirror(function(elt) {
newWrap.appendChild(elt);
}, {
value: content,
mode: getMode(lang),
2017-06-17 10:07:55 -04:00
lineNumbers: true,
theme: getTheme(),
2017-06-17 10:07:55 -04:00
readOnly: true
});
setTimeout(() => {
cm.refresh();
}, 300);
return {wrap: newWrap, editor: cm};
}
2017-05-28 08:16:21 -04:00
/**
* Create a CodeMirror instance to show in the WYSIWYG pop-up editor
* @param {HTMLElement} elem
* @param {String} modeSuggestion
* @returns {*}
*/
function popupEditor(elem, modeSuggestion) {
let content = elem.textContent;
return CodeMirror(function(elt) {
elem.parentNode.insertBefore(elt, elem);
elem.style.display = 'none';
}, {
value: content,
mode: getMode(modeSuggestion),
lineNumbers: true,
theme: getTheme(),
lineWrapping: true
});
}
/**
* Set the mode of a codemirror instance.
* @param cmInstance
* @param modeSuggestion
*/
function setMode(cmInstance, modeSuggestion) {
cmInstance.setOption('mode', getMode(modeSuggestion));
}
/**
* Set the content of a cm instance.
* @param cmInstance
* @param codeContent
*/
function setContent(cmInstance, codeContent) {
cmInstance.setValue(codeContent);
setTimeout(() => {
cmInstance.refresh();
}, 10);
}
2017-06-17 10:07:55 -04:00
/**
* Get a CodeMirror instace to use for the markdown editor.
* @param {HTMLElement} elem
* @returns {*}
*/
function markdownEditor(elem) {
let content = elem.textContent;
return CodeMirror(function (elt) {
elem.parentNode.insertBefore(elt, elem);
elem.style.display = 'none';
}, {
value: content,
mode: "markdown",
lineNumbers: true,
theme: getTheme(),
lineWrapping: true
});
}
/**
* Get the 'meta' key dependant on the user's system.
* @returns {string}
*/
function getMetaKey() {
let mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
return mac ? "Cmd" : "Ctrl";
}
module.exports = {
highlight: highlight,
highlightElem: highlightElem,
wysiwygView: wysiwygView,
popupEditor: popupEditor,
setMode: setMode,
setContent: setContent,
markdownEditor: markdownEditor,
getMetaKey: getMetaKey,
};