From 7a0c6de2d7626cbcb86a120fb5ffc28e8a1fa091 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Mon, 17 Oct 2022 15:31:55 +0700
Subject: [PATCH] Added imageUpload function to Lexical Editor (#15634)

no issue

- A basic image upload function for testing the image card of the new Lexical Koenig Editor.
---
 .../app/components/koenig-lexical-editor.js   | 36 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/ghost/admin/app/components/koenig-lexical-editor.js b/ghost/admin/app/components/koenig-lexical-editor.js
index 4aa23059f9..05a6660a20 100644
--- a/ghost/admin/app/components/koenig-lexical-editor.js
+++ b/ghost/admin/app/components/koenig-lexical-editor.js
@@ -1,6 +1,7 @@
 import * as Sentry from '@sentry/ember';
 import Component from '@glimmer/component';
 import React, {Suspense} from 'react';
+import ghostPaths from 'ghost-admin/utils/ghost-paths';
 import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
 
@@ -108,11 +109,44 @@ export default class KoenigLexicalEditor extends Component {
     }
 
     ReactComponent = () => {
+        const [uploadProgressPercentage] = React.useState(0); // not in use right now, but will need to decide how to handle the percentage state and pass to the Image Cards
+
+        // const uploadProgress = (event) => {
+        //     const percentComplete = (event.loaded / event.total) * 100;
+        //     setUploadProgressPercentage(percentComplete);
+        // };
+
+        async function imageUploader(files) {
+            function uploadToUrl(formData, url) {
+                return new Promise((resolve, reject) => {
+                    const xhr = new XMLHttpRequest();
+                    xhr.open('POST', url);
+                    // xhr.upload.onprogress = (event) => {
+                    //     uploadProgress(event);
+                    // };
+                    xhr.onload = () => resolve(xhr.response);
+                    xhr.onerror = () => reject(xhr.statusText);
+                    xhr.send(formData);
+                });
+            }
+            const formData = new FormData();
+            formData.append('file', files[0]);
+            const url = `${ghostPaths().apiRoot}/images/upload/`;
+            const response = await uploadToUrl(formData, url);
+            const dataset = JSON.parse(response);
+            const imageUrl = dataset?.images?.[0].url;
+            return {
+                src: imageUrl
+            };
+        }
         return (
             <div className={['koenig-react-editor', this.args.className].filter(Boolean).join(' ')}>
                 <ErrorHandler>
                     <Suspense fallback={<p className="koenig-react-editor-loading">Loading editor...</p>}>
-                        <KoenigComposer initialEditorState={this.args.lexical} onError={this.onError}>
+                        <KoenigComposer 
+                            initialEditorState={this.args.lexical} 
+                            onError={this.onError} 
+                            imageUploadFunction={{imageUploader, uploadProgressPercentage}} >
                             <KoenigEditor onChange={this.args.onChange} />
                         </KoenigComposer>
                     </Suspense>