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

diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js
index daacc7479ab8bd48b2d28c4d5a19da4f931d82b4..1fd859de4f74c36a5f6bacd1f2259654863b4ca6 100644 (file)
--- a/resources/js/components/wysiwyg-editor.js
+++ b/resources/js/components/wysiwyg-editor.js
@@ -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()
         });
     }
 

diff --git a/resources/js/vues/code-editor.js b/resources/js/vues/code-editor.js
index 48b4e1766b9ba0c4a84919a7dc2ee097c25b248f..f888e62277e989da786716ac2660e6bf150124ff 100644 (file)
--- a/resources/js/vues/code-editor.js
+++ b/resources/js/vues/code-editor.js
@@ -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() {

diff --git a/resources/views/components/code-editor.blade.php b/resources/views/components/code-editor.blade.php
index d6046664e7a9a9efa693549b1cd288594012cc4c..15f6ae252fdd09c1331c78e972b76888512018d4 100644 (file)
--- a/resources/views/components/code-editor.blade.php
+++ b/resources/views/components/code-editor.blade.php
@@ -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>