Koenig - Close (+) menu when pressing Escape

refs TryGhost/Ghost#9311
- close menu and reset the caret position in the editor when <kbd>Esacape</kbd> is pressed whilst the (+) menu is open

lib/koenig-editor/addon/components/koenig-plus-menu.js

@@ -24,6 +24,7 @@ export default Component.extend({
     _lastEditorRange: null,
     _hasCursorButton: false,
     _onMousemoveHandler: null,
+    _onKeydownHandler: null,
 
     // closure actions
     replaceWithCardSection() {},
@@ -69,6 +70,7 @@ export default Component.extend({
         window.removeEventListener('mousedown', this._onWindowMousedownHandler);
         window.removeEventListener('resize', this._onResizeHandler);
         window.removeEventListener('mousemove', this._onMousemoveHandler);
+        window.removeEventListener('keydown', this._onKeydownHandler);
     },
 
     actions: {
@@ -152,10 +154,7 @@ export default Component.extend({
         // gets inserted in the correct place because editorRange will be
         // wherever the cursor currently is if the menu was opened via a
         // mouseover button
-        this.set('editorRange', this._editorRange);
-        this.get('editor').run((postEditor) => {
-            postEditor.setRange(this._editorRange);
-        });
+        this._moveCaretToCachedEditorRange();
 
         // focus the search immediately so that you can filter immediately
         run.schedule('afterRender', this, function () {
@@ -164,19 +163,22 @@ export default Component.extend({
 
         // watch the window for mousedown events so that we can close the menu
         // when we detect a click outside
-        this._onWindowMousedownHandler = run.bind(this, (event) => {
-            this._handleWindowMousedown(event);
-        });
+        this._onWindowMousedownHandler = run.bind(this, this._handleWindowMousedown);
         window.addEventListener('mousedown', this._onWindowMousedownHandler);
+
+        // watch for keydown events so that we can close the mnu on Escape
+        this._onKeydownHandler = run.bind(this, this._handleKeydown);
+        window.addEventListener('keydown', this._onKeydownHandler);
     },
 
     _hideMenu() {
         if (this.get('showMenu')) {
             // reset our cached editorRange
             this._editorRange = null;
 
-            // stop watching the body for clicks
+            // stop watching the body for clicks and keydown
             window.removeEventListener('mousedown', this._onWindowMousedownHandler);
+            window.removeEventListener('keydown', this._onKeydownHandler);
 
             // hide the menu
             this.set('showMenu', false);
@@ -236,10 +238,25 @@ export default Component.extend({
         this._mousemoveTicking = false;
     },
 
+    _handleKeydown(event) {
+        if (event.code === 'Escape') {
+            // reset the caret position so we have a caret after closing
+            this._moveCaretToCachedEditorRange();
+            this._hideMenu();
+        }
+    },
+
     _handleResize() {
         if (this.get('showButton')) {
             this._throttleResize = run.throttle(this, this._positionMenu, 100);
         }
+    },
+
+    _moveCaretToCachedEditorRange() {
+        this.set('editorRange', this._editorRange);
+        this.get('editor').run((postEditor) => {
+            postEditor.setRange(this._editorRange);
+        });
     }
 
 });