Integrated image editor for staff and tag admin pages (#16755)

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

- includes image editing for generic upload image components to extend
image editing capabilities to other areas in Admin
- allows image editing for tag images and staff user images

ghost/admin/app/components/gh-image-uploader-with-preview.hbs

@@ -1,6 +1,12 @@
 {{#if @image}}
     <div class="gh-image-uploader -with-image">
         <div><img src={{@image}}></div>
+        {{#if (feature 'imageEditor')}}
+            <KoenigImageEditor
+                @imageSrc={{@image}}
+                @saveUrl={{@update}}
+            />
+        {{/if}}
         <a class="image-action image-delete" title="Delete" {{on "click" (fn @remove "")}}>
             {{svg-jar "trash"}}
             <span class="hidden">Delete</span>

ghost/admin/app/components/koenig-image-editor.hbs

@@ -1,5 +1,15 @@
 {{#if this.isEditorEnabled}}
-    <button type="button" class="{{if @className @className "image-action image-edit"}}" title="Edit image" {{on "click" this.handleClick}}>
-        {{svg-jar "pen"}}
-    </button>
+    <GhUploader
+        @onComplete={{this.onUploadComplete}}
+        as |uploader|
+    >
+        <button
+            type="button"
+            class="{{if @className @className "image-action image-edit"}}"
+            title="Edit image"
+            {{on "click" (fn this.handleClick uploader)}}
+        >
+            {{svg-jar "pen"}}
+        </button>
+    </GhUploader>
 {{/if}}

ghost/admin/app/components/koenig-image-editor.js

@@ -128,7 +128,15 @@ export default class KoenigImageEditor extends Component {
     }
 
     @action
-    async handleClick() {
+    async onUploadComplete(urlList) {
+        if (this.args.saveUrl) {
+            const url = urlList[0].url;
+            this.args.saveUrl(url);
+        }
+    }
+
+    @action
+    async handleClick(uploader) {
         if (this.isEditorEnabled && this.args.imageSrc) {
             // add a timestamp to the image src to bypass cache
             // avoids cors issues with cached images
@@ -199,7 +207,16 @@ export default class KoenigImageEditor extends Component {
 
             editor.on('process', (result) => {
                 // save edited image
-                this.args.saveImage(result.dest);
+                try {
+                    if (this.args.saveImage) {
+                        this.args.saveImage(result.dest);
+                    }
+                    if (this.args.saveUrl) {
+                        uploader.setFiles([result.dest]);
+                    }
+                } catch (e) {
+                    // Failed to save edited image
+                }
             });
         }
     }

ghost/admin/app/components/settings/staff/modals/upload-image.hbs

@@ -3,6 +3,12 @@
         {{#if this.url}}
             <div class="gh-image-uploader -with-image">
                 <div><img src={{this.url}} alt="" role="presentation"></div>
+                {{#if (feature 'imageEditor')}}
+                    <KoenigImageEditor
+                        @imageSrc={{this.url}}
+                        @saveUrl={{this.fileUploaded}}
+                    />
+                {{/if}}
                 <button type="button" class="image-action image-delete" title="Delete" {{on "click" this.removeImage}}>
                     {{svg-jar "trash"}}
                     <span class="hidden">Delete</span>

ghost/admin/app/services/modals.js

@@ -57,7 +57,7 @@ export default class ModalsService extends EPMModalsService {
         let shouldClose = true;
 
         for (const elem of (event.path || event.composedPath())) {
-            if (elem.matches?.('.modal-content, .fullscreen-modal-total-overlay, .ember-basic-dropdown-content, a[download]')) {
+            if (elem.matches?.('.modal-content, .fullscreen-modal-total-overlay, .ember-basic-dropdown-content, a[download], .pintura-editor')) {
                 shouldClose = false;
                 break;
             }