[WC-1778]: rich text - apply changes on losing focus (#496)

Author: r0b1n

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

@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We fixed an issue when Rich Text widget not saving data when user leaves the page quickly after editing.
+
+### Security
+
+-   Update ckeditor4 to version 4.21.0
+
 ## [2.1.5] - 2023-03-24
 
 ### Fixed

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

@@ -1,7 +1,7 @@
 {
   "name": "rich-text-web",
   "widgetName": "RichText",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "Rich inline or toolbar text editing",
   "copyright": "© Mendix Technology BV 2023. All rights reserved.",
   "repository": {
@@ -81,7 +81,7 @@
   },
   "dependencies": {
     "@types/dompurify": "^2.4.0",
-    "ckeditor4": "^4.20.2",
+    "ckeditor4": "^4.21.0",
     "ckeditor4-react": "^2.1.1",
     "classnames": "^2.3.2",
     "dompurify": "^2.4.5"

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

@@ -34,6 +34,9 @@ export class Editor extends Component<EditorProps> {
     editorScript = "widgets/ckeditor/ckeditor.js";
     element: HTMLElement;
     lastSentValue: string | undefined;
+    applyChangesDebounce: () => void;
+    cancelRAF: (() => void) | undefined;
+    hasFocus: boolean;
 
     constructor(props: EditorProps) {
         super(props);
@@ -42,10 +45,12 @@ export class Editor extends Component<EditorProps> {
         this.element = this.props.element;
         this.editorKey = this.getNewKey();
         this.editorHookProps = this.getNewEditorHookProps();
-        this.onChange = debounce(this.onChange.bind(this), 500);
+        this.onChange = this.onChange.bind(this);
+        this.applyChangesDebounce = debounce(this.applyChangesImmediately.bind(this), 500);
         this.onKeyPress = this.onKeyPress.bind(this);
         this.onPasteContent = this.onPasteContent.bind(this);
         this.onDropContent = this.onDropContent.bind(this);
+        this.hasFocus = false;
     }
 
     setNewRenderProps(): void {
@@ -171,17 +176,21 @@ export class Editor extends Component<EditorProps> {
         }
     }
 
-    // onChange is wrapped in debounce, so, we always need to check
-    // weather we sill have editor.
     onChange(_event: CKEditorEventPayload<"change">): void {
         if (this.editor) {
             const editorData = this.editor.getData();
             const content = this.widgetProps.sanitizeContent ? DOMPurify.sanitize(editorData) : editorData;
             this.lastSentValue = content;
-            this.widgetProps.stringAttribute.setValue(content);
+            this.applyChangesDebounce();
         }
+    }
 
-        this.widgetProps.onChange?.execute();
+    applyChangesImmediately() {
+        // put last seen content to the attribute if it exists
+        if (this.lastSentValue !== undefined) {
+            this.widgetProps.stringAttribute.setValue(this.lastSentValue);
+            this.widgetProps.onChange?.execute();
+        }
     }
 
     addListeners(): void {
@@ -253,6 +262,25 @@ export class Editor extends Component<EditorProps> {
         this.lastSentValue = undefined;
     }
 
+    componentDidMount() {
+        this.cancelRAF = animationLoop(() => {
+            if (this.element && this.element.parentElement) {
+                const newHasFocus = this.element.parentElement.contains(document.activeElement);
+                if (newHasFocus !== this.hasFocus) {
+                    this.hasFocus = newHasFocus;
+                    if (!this.hasFocus) {
+                        // changed from true to false, user left the element, apply changes immediately
+                        this.applyChangesImmediately();
+                    }
+                }
+            }
+        });
+    }
+
+    componentWillUnmount() {
+        this.cancelRAF?.();
+    }
+
     componentDidUpdate(): void {
         const prevAttr = this.widgetProps.stringAttribute;
         const nextAttr = this.props.widgetProps.stringAttribute;
@@ -269,3 +297,18 @@ export class Editor extends Component<EditorProps> {
         return <MainEditor key={key} config={config} />;
     }
 }
+
+function animationLoop(callback: () => void): () => void {
+    let requestId: number;
+
+    const requestFrame = () => {
+        requestId = window.requestAnimationFrame(() => {
+            callback();
+            requestFrame();
+        });
+    };
+
+    requestFrame();
+
+    return () => window.cancelAnimationFrame(requestId);
+}

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.5" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="RichText" version="2.1.6" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="RichText.xml" />
         </widgetFiles>