From f9d97bdc35b90fb150e599e99ae6b1d508f0c899 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Wed, 8 Sep 2021 09:54:06 +0100
Subject: [PATCH] Added group heading to existing snippets in dropdown

no issue

- wrapped dropdown options in an options group so the heading can provide more context
- fixed styling so there isn't double padding around grouped options
---
 ghost/admin/app/styles/components/power-select.css       | 2 +-
 .../addon/components/koenig-snippet-input.hbs            | 2 +-
 .../addon/components/koenig-snippet-input.js             | 9 +++++++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/ghost/admin/app/styles/components/power-select.css b/ghost/admin/app/styles/components/power-select.css
index 16a6f25388..418403f8b9 100644
--- a/ghost/admin/app/styles/components/power-select.css
+++ b/ghost/admin/app/styles/components/power-select.css
@@ -363,6 +363,6 @@
     border-top: 1px solid var(--input-border-color) !important;
 }
 
-.gh-snippet-dropdown li {
+.gh-snippet-dropdown li:not(.ember-power-select-group) {
     padding: 8px 12px;
 }
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-snippet-input.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-snippet-input.hbs
index 12b52fe4a7..0810b5ae82 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-snippet-input.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-snippet-input.hbs
@@ -3,7 +3,7 @@
         @triggerClass="kg-link-input pa2 pr6 mih-100 ba br3 shadow-2 f8 lh-heading tracked-2 outline-0 h10 nudge-top--8 vertical"
         @dropdownClass="gh-snippet-dropdown"
         @placeholder="Snippet name"
-        @options={{@snippets}}
+        @options={{this.snippetsWithGroup}}
         @showCreate={{true}}
         @searchEnabled={{false}}
         @searchField="name"
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-snippet-input.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-snippet-input.js
index d8ec708fe4..442a08e1ff 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-snippet-input.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-snippet-input.js
@@ -18,6 +18,15 @@ export default class KoenigSnippetInputComponent extends Component {
     @tracked name = '';
     @tracked style = htmlSafe('');
 
+    get snippetsWithGroup() {
+        const snippets = this.args.snippets;
+
+        return [{
+            groupName: 'Replace existing',
+            options: snippets
+        }];
+    }
+
     constructor() {
         super(...arguments);