fix: update unsplash url and readme doc

README.md

@@ -13,8 +13,14 @@ It helps you to search for images on Unsplash and Giphy, import it to your media
 
 ## Get Started
 ### Option 1, with React based wysiwyg strapi plugin installed
-- e.g [strapi-plugin-wysiwsg-react-md-editor](https://github.com/kwinyyyc/strapi-plugin-wysiwsg-react-md-editor)
-
+
+Tested supported plugin
+
+[strapi-plugin-wysiwsg-react-md-editor](https://github.com/kwinyyyc/strapi-plugin-wysiwsg-react-md-editor)
+
+[strapi-plugin-ckeditor](https://github.com/TechQuery/strapi-plugin-ckeditor)
+
+[strapi-plugin-ckeditor5](https://github.com/Roslovets-Inc/strapi-plugin-ckeditor5)
 
 1. Install the package
 
@@ -35,24 +41,9 @@ With npm:
    2. Create an API app on Giphy, take a note on your `API Key`, it will be used later. <i>Note: there would be a rate limited to a maximum of 42 search requests an hour and 1000 search requests a day for a beta key.</i>
 
 
-4. Generate a config file at the path `/extensions/image-api/config/config.json` with below content
+4. Generate a config file at `config/plugins.js`
 
-   ```json
-   {
-     "providerOptions": {
-       "unsplash": {
-         "appName": "YOUR_UNSPLASH_APP_NAME",
-         "accessKey": "YOUR_UNSPLASH_ACCESS_KEY"
-       },
-        "giphy": {
-          "accessKey": "YOUR_GIPHY_API_KEY"
-        }
-     }
-   }
-   ```
-Or with strapi 3.xxx add in config/plugins.js
-
-```
+```js
 module.exports = ({ env }) => {
   return {
     'zeasy-image-api': {
@@ -67,14 +58,15 @@ module.exports = ({ env }) => {
       },
     },
   };
-};```
+};
+```
 Then make sure you have below variables in your .env file
+
+```sh
 UNSPLASH_APP_NAME=XXXXXXX
 UNSPLASH_ACCESS_KEY=XXXXXX
 GIPHY_API_KEY=XXXXXX
-
-
-
+```
 
 ### Option 2, without React based wysiwyg strapi plugin installed
 

controllers/image-api.js

@@ -249,7 +249,7 @@ module.exports = {
       return ctx;
     }
     const platform = constants.config.unsplash;
-    const { isValid, message, accessKey, isHtmlEditor, appName } = getProviderConfigByPlatform({ platform });
+    const { isValid, message, accessKey, isHtmlEditor, appName = '' } = getProviderConfigByPlatform({ platform });
     if (!isValid) {
       ctx.response.status = 500;
       ctx.response.message = message;
@@ -282,17 +282,17 @@ module.exports = {
     const { url } = result;
     const imageAbsUrl = generateAbsoluteUrl(url);
     let imageContent = '';
-    const gtmPrepend = '?utm_source=${appName}&utm_medium=referral';
+    const gtmPrepend = `?utm_source=${appName}&utm_medium=referral`;
     if (isHtmlEditor) {
       imageContent = `
         <div class="${pluginId}-image-container">
           <img src="${imageAbsUrl}" />
-          <p>Photo by <a href="${targetImage.authorUrl}/?${gtmPrepend}" target="_blank">${targetImage.authorName}</a> on <a href="https://unsplash.com/${gtmPrepend}">Unsplash</a></p>
+          <p>Photo by <a href="${targetImage.authorUrl}/${gtmPrepend}" target="_blank">${targetImage.authorName}</a> on <a href="https://unsplash.com/${gtmPrepend}">Unsplash</a></p>
         </div>
         `;
     } else {
       imageContent = `![](${imageAbsUrl})
-Photo by [${targetImage.authorName}](${targetImage.authorUrl}/?${gtmPrepend}) on [Unsplash](https://unsplash.com/${gtmPrepend})`;
+Photo by [${targetImage.authorName}](${targetImage.authorUrl}/${gtmPrepend}) on [Unsplash](https://unsplash.com/${gtmPrepend})`;
     }
 
     ctx.send({