mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-09-06 01:22:23 +00:00
Updated wysiwyg code-block insert flow to be mouseless
- Can now save a code block with Ctrl+Enter. - Codemirror will be in focus on popup show. - TinyMCE will get back focus on code save. For #1972
This commit is contained in:
parent
02f7ffe53c
commit
642db1387e
@ -139,19 +139,21 @@ function codePlugin() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function showPopup(editor) {
|
function showPopup(editor) {
|
||||||
let selectedNode = editor.selection.getNode();
|
const selectedNode = editor.selection.getNode();
|
||||||
|
|
||||||
if (!elemIsCodeBlock(selectedNode)) {
|
if (!elemIsCodeBlock(selectedNode)) {
|
||||||
let providedCode = editor.selection.getNode().textContent;
|
const providedCode = editor.selection.getNode().textContent;
|
||||||
window.vues['code-editor'].open(providedCode, '', (code, lang) => {
|
window.vues['code-editor'].open(providedCode, '', (code, lang) => {
|
||||||
let wrap = document.createElement('div');
|
const 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();
|
const node = editor.selection.getNode();
|
||||||
editor.dom.setHTML(node, wrap.querySelector('pre').innerHTML);
|
editor.dom.setHTML(node, wrap.querySelector('pre').innerHTML);
|
||||||
editor.fire('SetContent');
|
editor.fire('SetContent');
|
||||||
|
|
||||||
|
editor.focus()
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -160,15 +162,17 @@ function codePlugin() {
|
|||||||
let currentCode = selectedNode.querySelector('textarea').textContent;
|
let currentCode = selectedNode.querySelector('textarea').textContent;
|
||||||
|
|
||||||
window.vues['code-editor'].open(currentCode, lang, (code, lang) => {
|
window.vues['code-editor'].open(currentCode, lang, (code, lang) => {
|
||||||
let editorElem = selectedNode.querySelector('.CodeMirror');
|
const editorElem = selectedNode.querySelector('.CodeMirror');
|
||||||
let cmInstance = editorElem.CodeMirror;
|
const cmInstance = editorElem.CodeMirror;
|
||||||
if (cmInstance) {
|
if (cmInstance) {
|
||||||
Code.setContent(cmInstance, code);
|
Code.setContent(cmInstance, code);
|
||||||
Code.setMode(cmInstance, lang, code);
|
Code.setMode(cmInstance, lang, code);
|
||||||
}
|
}
|
||||||
let textArea = selectedNode.querySelector('textarea');
|
const textArea = selectedNode.querySelector('textarea');
|
||||||
if (textArea) textArea.textContent = code;
|
if (textArea) textArea.textContent = code;
|
||||||
selectedNode.setAttribute('data-lang', lang);
|
selectedNode.setAttribute('data-lang', lang);
|
||||||
|
|
||||||
|
editor.focus()
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -5,6 +5,7 @@ const methods = {
|
|||||||
if (!this.editor) this.editor = codeLib.popupEditor(this.$refs.editor, this.language);
|
if (!this.editor) this.editor = codeLib.popupEditor(this.$refs.editor, this.language);
|
||||||
this.$refs.overlay.components.overlay.show(() => {
|
this.$refs.overlay.components.overlay.show(() => {
|
||||||
codeLib.updateLayout(this.editor);
|
codeLib.updateLayout(this.editor);
|
||||||
|
this.editor.focus();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
hide() {
|
hide() {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<div id="code-editor">
|
<div id="code-editor">
|
||||||
<div overlay ref="overlay" v-cloak @click="hide()">
|
<div overlay ref="overlay" v-cloak @click="hide()">
|
||||||
<div class="popup-body" tabindex="-1" @click.stop>
|
<div class="popup-body" tabindex="-1" @click.stop @keydown.enter.ctrl="save">
|
||||||
|
|
||||||
<div class="popup-header primary-background">
|
<div class="popup-header primary-background">
|
||||||
<div class="popup-title">{{ trans('components.code_editor') }}</div>
|
<div class="popup-title">{{ trans('components.code_editor') }}</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user