Added pre-filled options to email-cta card's button url input

refs https://github.com/TryGhost/Team/issues/992

- swapped input element for `<GhInputWithSelect>`
- added `config.getSiteUrl()` method for generating front-end URLs including subdomain
- added example suggested URLs to email-cta card to pass as options to button url input

ghost/admin/app/services/config.js

@@ -76,5 +76,13 @@ export default Service.extend(_ProxyMixin, {
             return domain.replace(/^(www)\.(?=[^/]*\..{2,5})/, '');
         }
         return domain;
-    })
+    }),
+
+    getSiteUrl(path) {
+        const siteUrl = new URL(this.get('blogUrl'));
+        const subdir = siteUrl.pathname.endsWith('/') ? siteUrl.pathname : `${siteUrl.pathname}/`;
+        const fullPath = `${subdir}${path.replace(/^\//, '')}`;
+
+        return `${siteUrl.origin}${fullPath}`;
+    }
 });

ghost/admin/app/styles/layouts/editor.css

@@ -993,7 +993,9 @@ figure {
 }
 
 .email-cta-button-url-input {
+    width: 100%;
     margin-right: 1.2rem;
+    line-height: normal;
 }
 
 .kg-card-help-labs {

ghost/admin/app/styles/spirit/_koenig.css

@@ -743,6 +743,7 @@
 .kg-link-input {
     min-width: 225px; /* Same width as text toolbar */
     caret-color: auto;
+    background-color: var(--white) !important;
 }
 
 .kg-input-bar-close {

ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.hbs

@@ -69,16 +69,23 @@
             >
 
             <label for="button-url-input" class="sr-only">CTA URL</label>
-            <input
+            <GhInputWithSelect
-                type="text"
+                @value={{@payload.buttonUrl}}
-                class="gh-input email-cta-button-url-input"
+                @options={{this.suggestedUrls}}
-                id="button-url-input"
+                @valueField="url"
-                name="button-url"
+                @searchField="url"
-                value={{@payload.buttonUrl}}
+                @placeholder="https://yoursite.com/#/portal/signup/"
-                placeholder="https://yoursite.com/#/portal/signup/"
+                @searchMessage={{null}}
-                {{on "input" this.setButtonUrl}}
+                @onInput={{this.setButtonUrl}}
-                {{on-key "Enter" this.blurElement}}
+                @openOnFocus={{true}}
+                @closeWhenEmpty={{true}}
+                @triggerClass="email-cta-button-url-input"
+                @renderInPlace={{false}} {{!-- avoid dropdown inheriting editor styles --}}
+                as |suggestion|
             >
+                <span class="db b">{{suggestion.name}}</span>
+                {{suggestion.url}}
+            </GhInputWithSelect>
 
             <div class="gh-btn-group icons">
                 <button type="button" class="gh-btn gh-btn-icon {{if (eq @payload.buttonAlignment "left") "gh-btn-group-selected"}}" {{on "click" (fn this.setButtonAlignment "left")}}><span>{{svg-jar "align-left"}}</span></button>

ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.js

@@ -9,6 +9,7 @@ import {set} from '@ember/object';
 import {tracked} from '@glimmer/tracking';
 
 export default class KoenigCardEmailCtaComponent extends Component {
+    @service config;
     @service ui;
 
     @tracked buttonFocused = false;
@@ -69,6 +70,19 @@ export default class KoenigCardEmailCtaComponent extends Component {
         };
     }
 
+    get suggestedUrls() {
+        return [{
+            name: `Link to ${this.config.get('blogTitle')}`,
+            url: this.config.getSiteUrl('/')
+        }, {
+            name: 'Signup',
+            url: this.config.getSiteUrl('/#/portal/signup')
+        }, {
+            name: 'Upgrade or change plan',
+            url: this.config.getSiteUrl('/#/portal/account/plans')
+        }];
+    }
+
     constructor() {
         super(...arguments);
         this.args.registerComponent(this);
@@ -96,8 +110,8 @@ export default class KoenigCardEmailCtaComponent extends Component {
     }
 
     @action
-    setButtonUrl(event) {
+    setButtonUrl(url) {
-        this._updatePayloadAttr('buttonUrl', event.target.value);
+        this._updatePayloadAttr('buttonUrl', url);
     }
 
     @action