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) {
|
||||
let selectedNode = editor.selection.getNode();
|
||||
const selectedNode = editor.selection.getNode();
|
||||
|
||||
if (!elemIsCodeBlock(selectedNode)) {
|
||||
let providedCode = editor.selection.getNode().textContent;
|
||||
const providedCode = editor.selection.getNode().textContent;
|
||||
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.querySelector('code').innerText = code;
|
||||
|
||||
editor.formatter.toggle('pre');
|
||||
let node = editor.selection.getNode();
|
||||
const node = editor.selection.getNode();
|
||||
editor.dom.setHTML(node, wrap.querySelector('pre').innerHTML);
|
||||
editor.fire('SetContent');
|
||||
|
||||
editor.focus()
|
||||
});
|
||||
return;
|
||||
}
|
||||
@ -160,15 +162,17 @@ function codePlugin() {
|
||||
let currentCode = selectedNode.querySelector('textarea').textContent;
|
||||
|
||||
window.vues['code-editor'].open(currentCode, lang, (code, lang) => {
|
||||
let editorElem = selectedNode.querySelector('.CodeMirror');
|
||||
let cmInstance = editorElem.CodeMirror;
|
||||
const editorElem = selectedNode.querySelector('.CodeMirror');
|
||||
const cmInstance = editorElem.CodeMirror;
|
||||
if (cmInstance) {
|
||||
Code.setContent(cmInstance, code);
|
||||
Code.setMode(cmInstance, lang, code);
|
||||
}
|
||||
let textArea = selectedNode.querySelector('textarea');
|
||||
const textArea = selectedNode.querySelector('textarea');
|
||||
if (textArea) textArea.textContent = code;
|
||||
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);
|
||||
this.$refs.overlay.components.overlay.show(() => {
|
||||
codeLib.updateLayout(this.editor);
|
||||
this.editor.focus();
|
||||
});
|
||||
},
|
||||
hide() {
|
||||
|
@ -1,6 +1,6 @@
|
||||
<div id="code-editor">
|
||||
<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-title">{{ trans('components.code_editor') }}</div>
|
||||
|
Loading…
Reference in New Issue
Block a user