From 642db1387ef511046fb60380dd65446d8b43509d Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sun, 5 Apr 2020 21:55:31 +0100
Subject: [PATCH] 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
---
 resources/js/components/wysiwyg-editor.js      | 18 +++++++++++-------
 resources/js/vues/code-editor.js               |  1 +
 .../views/components/code-editor.blade.php     |  2 +-
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js
index daacc7479..1fd859de4 100644
--- 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 48b4e1766..f888e6227 100644
--- 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 d6046664e..15f6ae252 100644
--- 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>