From 2738d25cc6c0d841099d603dd88e3c189a2f28e3 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Tue, 18 Apr 2023 16:24:02 +0100
Subject: [PATCH] Added autocompletion to Lexical button urls

fixes https://github.com/TryGhost/Team/issues/3031

This implements the fetchAutocompleteLinks method, which is used by the button and email CTA cards to autocomplete urls.
---
 .../app/components/koenig-lexical-editor.js   | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/ghost/admin/app/components/koenig-lexical-editor.js b/ghost/admin/app/components/koenig-lexical-editor.js
index 861974c19b..1100eb0e07 100644
--- a/ghost/admin/app/components/koenig-lexical-editor.js
+++ b/ghost/admin/app/components/koenig-lexical-editor.js
@@ -5,6 +5,7 @@ import ghostPaths from 'ghost-admin/utils/ghost-paths';
 import {action} from '@ember/object';
 import {inject} from 'ghost-admin/decorators/inject';
 import {inject as service} from '@ember/service';
+import {task} from 'ember-concurrency';
 
 export const fileTypes = {
     image: {
@@ -127,8 +128,10 @@ export default class KoenigLexicalEditor extends Component {
     @service feature;
     @service ghostPaths;
     @service session;
+    @service store;
 
     @inject config;
+    offers = null;
 
     @action
     onError(error) {
@@ -146,8 +149,17 @@ export default class KoenigLexicalEditor extends Component {
         // don't rethrow, Lexical will attempt to gracefully recover
     }
 
+    @task({restartable: true})
+    *fetchOffersTask() {
+        if (this.offers) {
+            return this.offers;
+        }
+        this.offers = yield this.store.query('offer', {limit: 'all', filter: 'status:active'});
+        return this.offers;
+    }
+
     ReactComponent = (props) => {
-        const fetchEmbed = async (url, {type}) => {    
+        const fetchEmbed = async (url, {type}) => {
             let oembedEndpoint = this.ghostPaths.url.api('oembed');
             let response = await this.ajax.request(oembedEndpoint, {
                 data: {url, type}
@@ -155,6 +167,23 @@ export default class KoenigLexicalEditor extends Component {
             return response;
         };
 
+        const fetchAutocompleteLinks = async () => {
+            const offers = await this.fetchOffersTask.perform();
+
+            const defaults = [
+                {label: 'Homepage', value: window.location.origin + '/'},
+                {label: 'Free signup', value: window.location.origin + '/#/portal/signup/free'}
+            ];
+
+            const offersLinks = offers.toArray().map((offer) => {
+                return {
+                    label: `Offer - ${offer.name}`,
+                    value: this.config.getSiteUrl(offer.code)
+                };
+            });
+            return [...defaults, ...offersLinks];
+        };
+
         const defaultCardConfig = {
             unsplash: {
                 defaultHeaders: {
@@ -166,7 +195,8 @@ export default class KoenigLexicalEditor extends Component {
                 }
             },
             tenor: this.config.tenor?.googleApiKey ? this.config.tenor : null,
-            fetchEmbed: fetchEmbed
+            fetchEmbed: fetchEmbed,
+            fetchAutocompleteLinks
         };
         const cardConfig = Object.assign({}, defaultCardConfig, props.cardConfig);