mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-28 21:22:30 +00:00
Fixed code block selection and drag/drop issues
This commit is contained in:
parent
968e7b8b72
commit
a94844b6b7
@ -96,7 +96,6 @@ module.exports.wysiwygView = function(elem) {
|
||||
|
||||
let lang = (elem.className || '').replace('language-', '');
|
||||
if (lang === '' && codeElem) {
|
||||
console.log(codeElem.className);
|
||||
lang = (codeElem.className || '').replace('language-', '')
|
||||
}
|
||||
|
||||
|
@ -74,6 +74,7 @@ function codePlugin() {
|
||||
|
||||
function showPopup(editor) {
|
||||
let selectedNode = editor.selection.getNode();
|
||||
console.log('show ppoe');
|
||||
|
||||
if (!elemIsCodeBlock(selectedNode)) {
|
||||
let providedCode = editor.selection.getNode().textContent;
|
||||
@ -81,6 +82,7 @@ function codePlugin() {
|
||||
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);
|
||||
@ -105,6 +107,20 @@ function codePlugin() {
|
||||
});
|
||||
}
|
||||
|
||||
function codeMirrorContainerToPre($codeMirrorContainer) {
|
||||
let textArea = $codeMirrorContainer[0].querySelector('textarea');
|
||||
let code = textArea.textContent;
|
||||
let lang = $codeMirrorContainer[0].getAttribute('data-lang');
|
||||
|
||||
$codeMirrorContainer.removeAttr('contentEditable');
|
||||
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', `language-${lang}`));
|
||||
$codeMirrorContainer.replaceWith($pre);
|
||||
}
|
||||
|
||||
window.tinymce.PluginManager.add('codeeditor', (editor, url) => {
|
||||
|
||||
let $ = editor.$;
|
||||
@ -124,37 +140,37 @@ function codePlugin() {
|
||||
$('div.CodeMirrorContainer', e.node).
|
||||
each((index, elem) => {
|
||||
let $elem = $(elem);
|
||||
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');
|
||||
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', `language-${lang}`));
|
||||
$elem.replaceWith($pre);
|
||||
codeMirrorContainerToPre($elem);
|
||||
});
|
||||
});
|
||||
|
||||
editor.on('dblclick', event => {
|
||||
let selectedNode = editor.selection.getNode();
|
||||
if (!elemIsCodeBlock(selectedNode)) return;
|
||||
showPopup(editor);
|
||||
});
|
||||
|
||||
editor.on('SetContent', function () {
|
||||
|
||||
// Recover broken codemirror instances
|
||||
$('.CodeMirrorContainer').filter((index ,elem) => {
|
||||
return typeof elem.querySelector('.CodeMirror').CodeMirror === 'undefined';
|
||||
}).each((index, elem) => {
|
||||
console.log('COVERT');
|
||||
codeMirrorContainerToPre($(elem));
|
||||
});
|
||||
|
||||
let codeSamples = $('body > pre').filter((index, elem) => {
|
||||
return elem.contentEditable !== "false";
|
||||
});
|
||||
|
||||
if (codeSamples.length) {
|
||||
if (!codeSamples.length) return;
|
||||
editor.undoManager.transact(function () {
|
||||
codeSamples.each((index, elem) => {
|
||||
let editDetails = Code.wysiwygView(elem);
|
||||
editDetails.wrap.addEventListener('dblclick', () => {
|
||||
showPopup(editor, editDetails.wrap, editDetails.editor);
|
||||
Code.wysiwygView(elem);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
@ -178,7 +194,7 @@ module.exports = function() {
|
||||
paste_data_images: false,
|
||||
extended_valid_elements: 'pre[*]',
|
||||
automatic_uploads: false,
|
||||
valid_children: "-div[p|pre|h1|h2|h3|h4|h5|h6|blockquote]",
|
||||
valid_children: "-div[p|h1|h2|h3|h4|h5|h6|blockquote],+div[pre]",
|
||||
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",
|
||||
@ -190,7 +206,7 @@ module.exports = function() {
|
||||
{title: "Header Tiny", format: "h5"},
|
||||
{title: "Paragraph", format: "p", exact: true, classes: ''},
|
||||
{title: "Blockquote", format: "blockquote"},
|
||||
{title: "Code Block", icon: "code", cmd: 'codeeditor'},
|
||||
{title: "Code Block", icon: "code", cmd: 'codeeditor', format: 'codeeditor'},
|
||||
{title: "Inline Code", icon: "code", inline: "code"},
|
||||
{title: "Callouts", items: [
|
||||
{title: "Success", block: 'p', exact: true, attributes : {'class' : 'callout success'}},
|
||||
@ -201,6 +217,7 @@ module.exports = function() {
|
||||
],
|
||||
style_formats_merge: false,
|
||||
formats: {
|
||||
codeeditor: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div'},
|
||||
alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-left'},
|
||||
aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-center'},
|
||||
alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-right'},
|
||||
|
Loading…
Reference in New Issue
Block a user