Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-07-20 10:12:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated wysiwyg code-block insert flow to be mouseless

Browse Source 
- 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:
Dan Brown 2020-04-05 21:55:31 +01:00
parent 02f7ffe53c
commit 642db1387e
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
3 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
resources/js/components/wysiwyg-editor.js
View File

@ -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()
});
}

1
resources/js/vues/code-editor.js
View File

@ -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() {

2
resources/views/components/code-editor.blade.php
View File

@ -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>