github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-25 00:00:00 +08:00
Code Issues Actions 12 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;
};

69
resources/assets/js/pages/page-form.js
View File

@ -58,11 +58,14 @@ function registerEditorShortcuts(editor) {
// Other block shortcuts
editor.addShortcut('meta+q', '', ['FormatBlock', false, 'blockquote']);
editor.addShortcut('meta+d', '', ['FormatBlock', false, 'p']);
editor.addShortcut('meta+e', '', ['FormatBlock', false, 'pre']);
editor.addShortcut('meta+e', '', ['codeeditor', false, 'pre']);
editor.addShortcut('meta+shift+E', '', ['FormatBlock', false, 'code']);
}
/**
* Create and enable our custom code plugin
*/
function codePlugin() {
function elemIsCodeBlock(elem) {
@ -71,14 +74,35 @@ function codePlugin() {
function showPopup(editor) {
let selectedNode = editor.selection.getNode();
if (!elemIsCodeBlock(selectedNode)) {
let providedCode = editor.selection.getNode().textContent;
window.vues['code-editor'].open(providedCode, '', (code, lang) => {
let wrap = document.createElement('div');
wrap.innerHTML = `<pre><code class="language-${lang}"></code></pre>`;
wrap.querySelector('code').innerText = code;
editor.formatter.toggle('pre');
let node = editor.selection.getNode();
editor.dom.setHTML(node, wrap.querySelector('pre').innerHTML);
editor.fire('SetContent');
});
return;
}
let lang = selectedNode.hasAttribute('data-language') ? selectedNode.getAttribute('data-language') : '';
let lang = selectedNode.hasAttribute('data-lang') ? selectedNode.getAttribute('data-lang') : '';
let currentCode = selectedNode.querySelector('textarea').textContent;
console.log('SHOW POPUP');
// TODO - Show custom editor
window.vues['code-editor'].open(currentCode, lang, (code, lang) => {
let editorElem = selectedNode.querySelector('.CodeMirror');
let cmInstance = editorElem.CodeMirror;
if (cmInstance) {
Code.setContent(cmInstance, code);
Code.setMode(cmInstance, lang);
}
let textArea = selectedNode.querySelector('textarea');
if (textArea) textArea.textContent = code;
selectedNode.setAttribute('data-lang', lang);
});
}
window.tinymce.PluginManager.add('codeeditor', (editor, url) => {
@ -88,9 +112,11 @@ function codePlugin() {
editor.addButton('codeeditor', {
text: 'Code block',
icon: false,
onclick() {
showPopup(editor);
}
cmd: 'codeeditor'
});
editor.addCommand('codeeditor', () => {
showPopup(editor);
});
// Convert
@ -98,32 +124,33 @@ function codePlugin() {
$('div.CodeMirrorContainer', e.node).
each((index, elem) => {
let $elem = $(elem);
let code = elem.querySelector('textarea').textContent;
let textArea = elem.querySelector('textarea');
let code = textArea.textContent;
let lang = elem.getAttribute('data-lang');
// $elem.attr('class', $.trim($elem.attr('class')));
$elem.removeAttr('contentEditable');
$elem.empty().append('<pre></pre>').find('pre').first().append($('<code></code>').each((index, elem) => {
let $pre = $('<pre></pre>');
$pre.append($('<code></code>').each((index, elem) => {
// Needs to be textContent since innerText produces BR:s
elem.textContent = code;
}).attr('class', $elem.attr('class')));
console.log($elem[0].outerHTML);
}).attr('class', `language-${lang}`));
$elem.replaceWith($pre);
});
});
editor.on('SetContent', function () {
let codeSamples = $('pre').filter((index, elem) => {
let codeSamples = $('body > pre').filter((index, elem) => {
return elem.contentEditable !== "false";
});
if (codeSamples.length) {
editor.undoManager.transact(function () {
codeSamples.each((index, elem) => {
console.log(elem.textContent);
let outerWrap = Code.wysiwygView(elem);
outerWrap.addEventListener('dblclick', () => {
showPopup(editor);
})
let editDetails = Code.wysiwygView(elem);
editDetails.wrap.addEventListener('dblclick', () => {
showPopup(editor, editDetails.wrap, editDetails.editor);
});
});
});
}
@ -154,7 +181,7 @@ module.exports = function() {
valid_children: "-div[p|pre|h1|h2|h3|h4|h5|h6|blockquote]",
plugins: "image table textcolor paste link autolink fullscreen imagetools code customhr autosave lists codeeditor",
imagetools_toolbar: 'imageoptions',
toolbar: "undo redo | styleselect | bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image-insert link hr | removeformat code fullscreen codeeditor",
toolbar: "undo redo | styleselect | bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image-insert link hr | removeformat code fullscreen",
content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}",
style_formats: [
{title: "Header Large", format: "h2"},
@ -163,14 +190,14 @@ module.exports = function() {
{title: "Header Tiny", format: "h5"},
{title: "Paragraph", format: "p", exact: true, classes: ''},
{title: "Blockquote", format: "blockquote"},
{title: "Code Block", icon: "code", format: "pre"},
{title: "Code Block", icon: "code", cmd: 'codeeditor'},
{title: "Inline Code", icon: "code", inline: "code"},
{title: "Callouts", items: [
{title: "Success", block: 'p', exact: true, attributes : {'class' : 'callout success'}},
{title: "Info", block: 'p', exact: true, attributes : {'class' : 'callout info'}},
{title: "Warning", block: 'p', exact: true, attributes : {'class' : 'callout warning'}},
{title: "Danger", block: 'p', exact: true, attributes : {'class' : 'callout danger'}}
]}
]},
],
style_formats_merge: false,
formats: {

39
resources/assets/js/vues/code-editor.js Normal file
View File

@ -0,0 +1,39 @@
const codeLib = require('../code');
const methods = {
show() {
if (!this.editor) this.editor = codeLib.popupEditor(this.$refs.editor, this.language);
this.$refs.overlay.style.display = 'flex';
},
hide() {
this.$refs.overlay.style.display = 'none';
},
updateEditorMode(language) {
codeLib.setMode(this.editor, language);
},
open(code, language, callback) {
this.show();
this.updateEditorMode(language);
this.language = language;
codeLib.setContent(this.editor, code);
this.code = code;
this.callback = callback;
},
save() {
if (!this.callback) return;
this.callback(this.editor.getValue(), this.language);
this.hide();
}
};
const data = {
editor: null,
language: '',
code: '',
callback: null
};
module.exports = {
methods,
data
};

5
resources/assets/js/vues/vues.js
View File

@ -7,12 +7,15 @@ function exists(id) {
let vueMapping = {
'search-system': require('./search'),
'entity-dashboard': require('./entity-search'),
'code-editor': require('./code-editor')
};
window.vues = {};
Object.keys(vueMapping).forEach(id => {
if (exists(id)) {
let config = vueMapping[id];
config.el = '#' + id;
new Vue(config);
window.vues[id] = new Vue(config);
}
});