Added ability to override codemirror theme

Also cleaned codemirror file while there.
In referece to #455
This commit is contained in:
Dan Brown 2017-09-02 13:34:37 +01:00
parent 0a402e3c63
commit 1e41ccbc7a
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 78 additions and 20 deletions

View File

@ -53,13 +53,20 @@ const modeMap = {
yml: 'yaml', yml: 'yaml',
}; };
module.exports.highlight = function() { /**
* Highlight pre elements on a page
*/
function highlight() {
let codeBlocks = document.querySelectorAll('.page-content pre'); let codeBlocks = document.querySelectorAll('.page-content pre');
for (let i = 0; i < codeBlocks.length; i++) { for (let i = 0; i < codeBlocks.length; i++) {
highlightElem(codeBlocks[i]); highlightElem(codeBlocks[i]);
} }
}; }
/**
* Add code highlighting to a single element.
* @param {HTMLElement} elem
*/
function highlightElem(elem) { function highlightElem(elem) {
let innerCodeElem = elem.querySelector('code[class^=language-]'); let innerCodeElem = elem.querySelector('code[class^=language-]');
let mode = ''; let mode = '';
@ -76,7 +83,7 @@ function highlightElem(elem) {
value: content, value: content,
mode: mode, mode: mode,
lineNumbers: true, lineNumbers: true,
theme: 'base16-light', theme: getTheme(),
readOnly: true readOnly: true
}); });
} }
@ -91,9 +98,21 @@ function getMode(suggestion) {
return (typeof modeMap[suggestion] !== 'undefined') ? modeMap[suggestion] : ''; return (typeof modeMap[suggestion] !== 'undefined') ? modeMap[suggestion] : '';
} }
module.exports.highlightElem = highlightElem; /**
* Ge the theme to use for CodeMirror instances.
* @returns {*|string}
*/
function getTheme() {
return window.codeTheme || 'base16-light';
}
module.exports.wysiwygView = function(elem) { /**
* 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) {
let doc = elem.ownerDocument; let doc = elem.ownerDocument;
let codeElem = elem.querySelector('code'); let codeElem = elem.querySelector('code');
@ -122,16 +141,22 @@ module.exports.wysiwygView = function(elem) {
value: content, value: content,
mode: getMode(lang), mode: getMode(lang),
lineNumbers: true, lineNumbers: true,
theme: 'base16-light', theme: getTheme(),
readOnly: true readOnly: true
}); });
setTimeout(() => { setTimeout(() => {
cm.refresh(); cm.refresh();
}, 300); }, 300);
return {wrap: newWrap, editor: cm}; return {wrap: newWrap, editor: cm};
}; }
module.exports.popupEditor = function(elem, modeSuggestion) { /**
* 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; let content = elem.textContent;
return CodeMirror(function(elt) { return CodeMirror(function(elt) {
@ -141,22 +166,38 @@ module.exports.popupEditor = function(elem, modeSuggestion) {
value: content, value: content,
mode: getMode(modeSuggestion), mode: getMode(modeSuggestion),
lineNumbers: true, lineNumbers: true,
theme: 'base16-light', theme: getTheme(),
lineWrapping: true lineWrapping: true
}); });
}; }
module.exports.setMode = function(cmInstance, modeSuggestion) { /**
* Set the mode of a codemirror instance.
* @param cmInstance
* @param modeSuggestion
*/
function setMode(cmInstance, modeSuggestion) {
cmInstance.setOption('mode', getMode(modeSuggestion)); cmInstance.setOption('mode', getMode(modeSuggestion));
}; }
module.exports.setContent = function(cmInstance, codeContent) {
/**
* Set the content of a cm instance.
* @param cmInstance
* @param codeContent
*/
function setContent(cmInstance, codeContent) {
cmInstance.setValue(codeContent); cmInstance.setValue(codeContent);
setTimeout(() => { setTimeout(() => {
cmInstance.refresh(); cmInstance.refresh();
}, 10); }, 10);
}; }
module.exports.markdownEditor = function(elem) { /**
* Get a CodeMirror instace to use for the markdown editor.
* @param {HTMLElement} elem
* @returns {*}
*/
function markdownEditor(elem) {
let content = elem.textContent; let content = elem.textContent;
return CodeMirror(function (elt) { return CodeMirror(function (elt) {
@ -166,13 +207,27 @@ module.exports.markdownEditor = function(elem) {
value: content, value: content,
mode: "markdown", mode: "markdown",
lineNumbers: true, lineNumbers: true,
theme: 'base16-light', theme: getTheme(),
lineWrapping: true lineWrapping: true
}); });
}; }
module.exports.getMetaKey = function() { /**
* Get the 'meta' key dependant on the user's system.
* @returns {string}
*/
function getMetaKey() {
let mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault; let mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
return mac ? "Cmd" : "Ctrl"; return mac ? "Cmd" : "Ctrl";
}; }
module.exports = {
highlight: highlight,
highlightElem: highlightElem,
wysiwygView: wysiwygView,
popupEditor: popupEditor,
setMode: setMode,
setContent: setContent,
markdownEditor: markdownEditor,
getMetaKey: getMetaKey,
};

View File

@ -384,7 +384,10 @@ span.CodeMirror-selectedtext { background: none; }
/** /**
* Custom BookStack overrides * Custom BookStack overrides
*/ */
.cm-s-base16-light.CodeMirror { .CodeMirror, .CodeMirror pre {
font-size: 12px;
}
.CodeMirror {
font-size: 12px; font-size: 12px;
height: auto; height: auto;
margin-bottom: $-l; margin-bottom: $-l;