From 79d9179289b6845d257a96b41d2c9e81a05b101e Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 27 Oct 2020 16:15:58 +0000
Subject: [PATCH] Added scroll-into-view behaviour for slash menu selection

no issue

- when selecting items with arrow keys in the slash menu, scroll the selected item into view if it's not visible
---
 .../addon/components/koenig-menu-content.hbs       |  1 +
 .../addon/components/koenig-menu-content.js        | 14 ++++++++++++++
 2 files changed, 15 insertions(+)
 create mode 100644 ghost/admin/lib/koenig-editor/addon/components/koenig-menu-content.js

diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-menu-content.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-menu-content.hbs
index 0bed119d37..1b5d5be1a9 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-menu-content.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-menu-content.hbs
@@ -12,6 +12,7 @@
                         role="menuitem"
                         title="{{item.label}}"
                         {{on "click" (fn @itemClicked item)}}
+                        {{did-update this.scrollIntoView (eq item @selectedItem)}}
                     >
                         <div class="{{kg-style "cardmenu-icon"}} {{item.iconClass}}" aria-hidden="true">{{svg-jar item.icon class="w7 h7"}}</div>
                         <div class="{{kg-style "cardmenu-label"}}">{{item.label}}</div>
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-menu-content.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-menu-content.js
new file mode 100644
index 0000000000..f468a12adf
--- /dev/null
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-menu-content.js
@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
+
+export default class KoenigMenuContentComponent extends Component {
+    @action
+    scrollIntoView(element, [doScroll]) {
+        if (doScroll) {
+            element.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest'
+            });
+        }
+    }
+}