mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 01:36:00 -04: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-', '');
|
let lang = (elem.className || '').replace('language-', '');
|
||||||
if (lang === '' && codeElem) {
|
if (lang === '' && codeElem) {
|
||||||
console.log(codeElem.className);
|
|
||||||
lang = (codeElem.className || '').replace('language-', '')
|
lang = (codeElem.className || '').replace('language-', '')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -74,6 +74,7 @@ function codePlugin() {
|
|||||||
|
|
||||||
function showPopup(editor) {
|
function showPopup(editor) {
|
||||||
let selectedNode = editor.selection.getNode();
|
let selectedNode = editor.selection.getNode();
|
||||||
|
console.log('show ppoe');
|
||||||
|
|
||||||
if (!elemIsCodeBlock(selectedNode)) {
|
if (!elemIsCodeBlock(selectedNode)) {
|
||||||
let providedCode = editor.selection.getNode().textContent;
|
let providedCode = editor.selection.getNode().textContent;
|
||||||
@ -81,6 +82,7 @@ function codePlugin() {
|
|||||||
let wrap = document.createElement('div');
|
let wrap = document.createElement('div');
|
||||||
wrap.innerHTML = `<pre><code class="language-${lang}"></code></pre>`;
|
wrap.innerHTML = `<pre><code class="language-${lang}"></code></pre>`;
|
||||||
wrap.querySelector('code').innerText = code;
|
wrap.querySelector('code').innerText = code;
|
||||||
|
|
||||||
editor.formatter.toggle('pre');
|
editor.formatter.toggle('pre');
|
||||||
let node = editor.selection.getNode();
|
let node = editor.selection.getNode();
|
||||||
editor.dom.setHTML(node, wrap.querySelector('pre').innerHTML);
|
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) => {
|
window.tinymce.PluginManager.add('codeeditor', (editor, url) => {
|
||||||
|
|
||||||
let $ = editor.$;
|
let $ = editor.$;
|
||||||
@ -124,37 +140,37 @@ function codePlugin() {
|
|||||||
$('div.CodeMirrorContainer', e.node).
|
$('div.CodeMirrorContainer', e.node).
|
||||||
each((index, elem) => {
|
each((index, elem) => {
|
||||||
let $elem = $(elem);
|
let $elem = $(elem);
|
||||||
let textArea = elem.querySelector('textarea');
|
codeMirrorContainerToPre($elem);
|
||||||
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);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
editor.on('dblclick', event => {
|
||||||
|
let selectedNode = editor.selection.getNode();
|
||||||
|
if (!elemIsCodeBlock(selectedNode)) return;
|
||||||
|
showPopup(editor);
|
||||||
|
});
|
||||||
|
|
||||||
editor.on('SetContent', function () {
|
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) => {
|
let codeSamples = $('body > pre').filter((index, elem) => {
|
||||||
return elem.contentEditable !== "false";
|
return elem.contentEditable !== "false";
|
||||||
});
|
});
|
||||||
|
|
||||||
if (codeSamples.length) {
|
if (!codeSamples.length) return;
|
||||||
editor.undoManager.transact(function () {
|
editor.undoManager.transact(function () {
|
||||||
codeSamples.each((index, elem) => {
|
codeSamples.each((index, elem) => {
|
||||||
let editDetails = Code.wysiwygView(elem);
|
Code.wysiwygView(elem);
|
||||||
editDetails.wrap.addEventListener('dblclick', () => {
|
|
||||||
showPopup(editor, editDetails.wrap, editDetails.editor);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -178,7 +194,7 @@ module.exports = function() {
|
|||||||
paste_data_images: false,
|
paste_data_images: false,
|
||||||
extended_valid_elements: 'pre[*]',
|
extended_valid_elements: 'pre[*]',
|
||||||
automatic_uploads: false,
|
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",
|
plugins: "image table textcolor paste link autolink fullscreen imagetools code customhr autosave lists codeeditor",
|
||||||
imagetools_toolbar: 'imageoptions',
|
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",
|
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: "Header Tiny", format: "h5"},
|
||||||
{title: "Paragraph", format: "p", exact: true, classes: ''},
|
{title: "Paragraph", format: "p", exact: true, classes: ''},
|
||||||
{title: "Blockquote", format: "blockquote"},
|
{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: "Inline Code", icon: "code", inline: "code"},
|
||||||
{title: "Callouts", items: [
|
{title: "Callouts", items: [
|
||||||
{title: "Success", block: 'p', exact: true, attributes : {'class' : 'callout success'}},
|
{title: "Success", block: 'p', exact: true, attributes : {'class' : 'callout success'}},
|
||||||
@ -201,6 +217,7 @@ module.exports = function() {
|
|||||||
],
|
],
|
||||||
style_formats_merge: false,
|
style_formats_merge: false,
|
||||||
formats: {
|
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'},
|
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'},
|
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'},
|
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