fix(libs): add S3Upload adapter to ckeditor5-custom-build

clients/libs/ckeditor5-custom-build/src/ckeditor.ts

@@ -32,7 +32,7 @@ import { SpecialCharacters } from '@ckeditor/ckeditor5-special-characters';
 import { Style } from '@ckeditor/ckeditor5-style';
 import { Table, TableCaption } from '@ckeditor/ckeditor5-table';
 import { Undo } from '@ckeditor/ckeditor5-undo';
-import { SimpleUploadAdapter } from '@ckeditor/ckeditor5-upload';
+import { S3Upload } from './s3upload';
 
 // You can read more about extending the build with additional plugins in the "Installing plugins" guide.
 // See https://ckeditor.com/docs/ckeditor5/latest/installation/plugins/installing-plugins.html for details.
@@ -65,7 +65,7 @@ class Editor extends ClassicEditor {
 		MediaEmbed,
 		MediaEmbedToolbar,
 		Paragraph,
-		SimpleUploadAdapter,
+		S3Upload,
 		SpecialCharacters,
 		Style,
 		Table,

clients/libs/ckeditor5-custom-build/src/s3upload.ts

@@ -0,0 +1,107 @@
+import { Plugin } from '@ckeditor/ckeditor5-core';
+import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
+
+
+class Adapter {
+    loader: any;
+    url: any;
+    xhr: any;
+
+    constructor(loader: any, url: any) {
+        this.loader = loader;
+        this.url = url;
+    }
+
+    upload(): Promise<any> {
+        return this.getCredentials().then(this.uploadImage.bind(this));
+    }
+
+    abort() {
+        if (this.xhr) this.xhr.abort();
+    }
+
+    getCredentials() {
+        return new Promise((resolve, reject) => {
+            this.loader.file.then((file: any) => {
+                var filename = file.name;
+                var contentType = file.type
+
+                if (!filename) return reject('No filename found');
+
+                const queryString = '?objectName=' + filename + '&contentType=' + encodeURIComponent(contentType);
+
+                this.xhr = new XMLHttpRequest();
+                var xhr = this.xhr;
+
+                this.xhr.withCredentials = false;
+                this.xhr.open('GET', this.url + queryString, true);
+                this.xhr.responseType = 'json';
+                this.xhr.setRequestHeader('Content-Type', 'application/json');
+                this.xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
+
+                this.xhr.addEventListener('error', (err: any) => reject('crederr'));
+                this.xhr.addEventListener('abort', (err: any) => reject('credabort'));
+                this.xhr.addEventListener('load', function () {
+                    var res = xhr.response;
+
+                    if (!res) return reject('No response from s3 creds url');
+
+                    resolve(res);
+                });
+
+                this.xhr.send();
+            })
+        });
+    }
+
+    uploadImage(s3creds: any) {
+        return new Promise((resolve, reject) => {
+
+            this.loader.file.then((file: any) => {
+                var xhr = this.xhr = new XMLHttpRequest();
+
+                xhr.addEventListener('error', err => reject('s3err'));
+                xhr.addEventListener('abort', err => reject('s3abort'));
+                xhr.addEventListener('load', () => {
+                    if (xhr.status !== 200) {
+                        console.log("S3Upload Error ---->", { xhr });
+                        return reject(`Error ${xhr.status}: ${xhr.statusText}`);
+                    }
+
+                    const imgUrl = xhr.responseURL.split("?")[0];
+                    console.log("S3Upload Success ---->", { url: imgUrl });
+                    return resolve({
+                        url: imgUrl
+                    });
+                });
+
+                xhr.open('PUT', s3creds.signedUrl, true);
+                xhr.setRequestHeader("X-Amz-Acl", "public-read")
+                xhr.send(file);
+            });
+        });
+    }
+}
+
+
+export class S3Upload extends Plugin {
+
+    static get requires() {
+        return [FileRepository];
+    }
+
+    static get pluginName() {
+        return 'S3Upload';
+    }
+
+    init() {
+        const url = this.editor.config.get('s3Upload.signingUrl');
+
+        if (!url) {
+            console.warn('s3Upload.signingUrl is not configured')
+            return;
+        }
+
+        this.editor.plugins.get('FileRepository').createUploadAdapter = (loader: any) => new Adapter(loader, url);
+    }
+}

clients/packages/canary-client/package.json

@@ -9,7 +9,9 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^1.6.6",
+    "@ckeditor/ckeditor5-core": "41.4.2",
     "@ckeditor/ckeditor5-react": "^7.0.0",
+    "@ckeditor/ckeditor5-upload": "41.4.2",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "@fnando/cnpj": "^1.0.2",

clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/index.tsx

@@ -30,6 +30,7 @@ const Styles = styled.div`
   }
 `
 
+
 type Props = {
   widget: Widget;
   updateCache: any;
@@ -94,12 +95,8 @@ const AutofireForm = ({ widget, updateCache }: Props): React.ReactElement => {
                       data={editorData}
                       editor={ClassicEditor}
                       config={{
-                        simpleUpload: {
-                          uploadUrl: process.env.REACT_APP_UPLOADS_URL,
-                          withCredentials: false,
-                          headers: {
-                            "Access-Control-Allow-Origin": "*",
-                          }
+                        s3Upload: {
+                          signingUrl: process.env.REACT_APP_UPLOADS_URL
                         }
                       }}
                       onChange={(event, editor) => {