Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-01 01:36:00 -04: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) { 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()
}); });
} }

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

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

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