[WC-1621]: Rich Text image upload performance drop (#313)

Author: rahmanunver

packages/pluggableWidgets/rich-text-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   Added 1MB file size limit for pasted and dropped images.
+
 ## [2.1.2] - 2023-01-25
 
 ### Fixed

packages/pluggableWidgets/rich-text-web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rich-text-web",
   "widgetName": "RichText",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "Rich inline or toolbar text editing",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "repository": {

packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx

@@ -6,13 +6,26 @@ import { getCKEditorConfig } from "../utils/ckeditorConfigs";
 import { MainEditor } from "./MainEditor";
 import DOMPurify from "dompurify";
 
+const FILE_SIZE_LIMIT = 1048576; // Binary bytes for 1MB
+
 interface EditorProps {
     element: HTMLElement;
     widgetProps: RichTextContainerProps;
 }
 
 type EditorHookProps = CKEditorHookProps<never>;
 
+interface CKEditorEvent {
+    data: any;
+    listenerData: any;
+    name: string;
+    sender: { [key: string]: any };
+
+    cancel(): void;
+    removeListener(): void;
+    stop(): void;
+}
+
 export class Editor extends Component<EditorProps> {
     widgetProps: RichTextContainerProps;
     editor: CKEditorInstance | null;
@@ -31,6 +44,8 @@ export class Editor extends Component<EditorProps> {
         this.editorHookProps = this.getNewEditorHookProps();
         this.onChange = debounce(this.onChange.bind(this), 500);
         this.onKeyPress = this.onKeyPress.bind(this);
+        this.onPasteContent = this.onPasteContent.bind(this);
+        this.onDropContent = this.onDropContent.bind(this);
     }
 
     setNewRenderProps(): void {
@@ -115,6 +130,39 @@ export class Editor extends Component<EditorProps> {
         this.widgetProps.onKeyPress?.execute();
     }
 
+    onPasteContent(event: CKEditorEvent): void {
+        if (event.data.dataTransfer.isFileTransfer()) {
+            for (let i = 0; i < event.data.dataTransfer.getFilesCount(); i++) {
+                if (event.data.dataTransfer.getFile(i).size > FILE_SIZE_LIMIT) {
+                    this.editor.showNotification(
+                        `The image ${
+                            event.data.dataTransfer.getFile(i).name
+                        } is larger than the 1MB limit. Please choose a smaller image and try again.`,
+                        "warning"
+                    );
+                    event.cancel();
+                    break;
+                }
+            }
+        }
+    }
+    onDropContent(event: CKEditorEvent): void {
+        if (event.data.dataTransfer.isFileTransfer()) {
+            for (let i = 0; i < event.data.dataTransfer.getFilesCount(); i++) {
+                if (event.data.dataTransfer.getFile(i).size > FILE_SIZE_LIMIT) {
+                    this.editor.showNotification(
+                        `The image ${
+                            event.data.dataTransfer.getFile(i).name
+                        } is larger than the 1MB limit. Please choose a smaller image and try again.`,
+                        "warning"
+                    );
+                    event.cancel();
+                    break;
+                }
+            }
+        }
+    }
+
     // onChange is wrapped in debounce, so, we always need to check
     // weather we sill have editor.
     onChange(_event: CKEditorEventPayload<"change">): void {
@@ -132,12 +180,16 @@ export class Editor extends Component<EditorProps> {
         if (this.editor && !this.editor.readOnly) {
             this.editor.on("change", this.onChange);
             this.editor.on("key", this.onKeyPress);
+            this.editor.on("paste", this.onPasteContent);
+            this.editor.on("drop", this.onDropContent);
         }
     }
 
     removeListeners(): void {
         this.editor?.removeListener("change", this.onChange);
         this.editor?.removeListener("key", this.onKeyPress);
+        this.editor?.removeListener("paste", this.onPasteContent);
+        this.editor?.removeListener("drop", this.onDropContent);
     }
 
     updateEditorState(

packages/pluggableWidgets/rich-text-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="RichText" version="2.1.2" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="RichText" version="2.1.3" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="RichText.xml" />
         </widgetFiles>