github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-09 04:26:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Finished off main functionality of custom tinymce code editor

Browse Source
This commit is contained in:
Dan Brown
2017-07-01 13:23:46 +01:00
parent c8be214ee0
commit 968e7b8b72
10 changed files with 204 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
resources/assets/js/code.js
View File

@ -62,7 +62,7 @@ function highlightElem(elem) {
let mode = '';
if (innerCodeElem !== null) {
let langName = innerCodeElem.className.replace('language-', '');
if (typeof modeMap[langName] !== 'undefined') mode = modeMap[langName];
mode = getMode(langName);
}
elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
let content = elem.textContent;
@ -78,16 +78,35 @@ function highlightElem(elem) {
});
}
/**
* 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] : '';
}
module.exports.highlightElem = highlightElem;
module.exports.wysiwygView = function(elem) {
let doc = elem.ownerDocument;
let codeElem = elem.querySelector('code');
let lang = (elem.className || '').replace('language-', '');
if (lang === '' && codeElem) {
console.log(codeElem.className);
lang = (codeElem.className || '').replace('language-', '')
}
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);
newTextArea.style.display = 'none';
elem.parentNode.replaceChild(newWrap, elem);
@ -99,7 +118,7 @@ module.exports.wysiwygView = function(elem) {
newWrap.appendChild(elt);
}, {
value: content,
mode: '',
mode: getMode(lang),
lineNumbers: true,
theme: 'base16-light',
readOnly: true
@ -107,50 +126,47 @@ module.exports.wysiwygView = function(elem) {
setTimeout(() => {
cm.refresh();
}, 300);
return newWrap;
return {wrap: newWrap, editor: cm};
};
// module.exports.wysiwygEditor = function(elem) {
// let doc = elem.ownerDocument;
// let newWrap = doc.createElement('div');
// newWrap.className = 'CodeMirrorContainer';
// let newTextArea = doc.createElement('textarea');
// newTextArea.style.display = 'none';
// elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
// let content = elem.textContent;
// elem.parentNode.replaceChild(newWrap, elem);
// newWrap.appendChild(newTextArea);
// let cm = CodeMirror(function(elt) {
// newWrap.appendChild(elt);
// }, {
// value: content,
// mode: '',
// lineNumbers: true,
// theme: 'base16-light',
// readOnly: true
// });
// cm.on('change', event => {
// newTextArea.innerText = cm.getValue();
// });
// setTimeout(() => {
// cm.refresh();
// }, 300);
// };
module.exports.markdownEditor = function(elem) {
module.exports.popupEditor = function(elem, modeSuggestion) {
let content = elem.textContent;
let cm = CodeMirror(function(elt) {
return CodeMirror(function(elt) {
elem.parentNode.insertBefore(elt, elem);
elem.style.display = 'none';
}, {
value: content,
mode: "markdown",
mode: getMode(modeSuggestion),
lineNumbers: true,
theme: 'base16-light',
lineWrapping: true
});
};
module.exports.setMode = function(cmInstance, modeSuggestion) {
cmInstance.setOption('mode', getMode(modeSuggestion));
};
module.exports.setContent = function(cmInstance, codeContent) {
cmInstance.setValue(codeContent);
setTimeout(() => {
cmInstance.refresh();
}, 10);
};
module.exports.markdownEditor = function(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: 'base16-light',
lineWrapping: true
});
return cm;
};