chore: fix onchange action debounce dropped on last trigger

Author: gjulivan

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

@@ -1,6 +1,6 @@
 import { If } from "@mendix/widget-plugin-component-kit/If";
+import { useDebounceWithStatus } from "@mendix/widget-plugin-hooks/useDebounceWithStatus";
 import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
-import { debounce } from "@mendix/widget-plugin-platform/utils/debounce";
 import classNames from "classnames";
 import Quill, { Range } from "quill";
 import "quill/dist/quill.core.css";
@@ -12,7 +12,6 @@ import {
     useCallback,
     useContext,
     useEffect,
-    useMemo,
     useRef,
     useState
 } from "react";
@@ -70,17 +69,17 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
 
     const { isFullscreen } = globalState;
 
-    const [setAttributeValueDebounce] = useMemo(
-        () =>
-            debounce(string => {
-                if (stringAttribute.value !== string) {
-                    stringAttribute.setValue(string);
-                    if (onChangeType === "onDataChange") {
-                        executeAction(onChange);
-                    }
+    const [setAttributeValueDebounce] = useDebounceWithStatus(
+        (string?: string) => {
+            if (stringAttribute.value !== string) {
+                stringAttribute.setValue(string);
+                if (onChangeType === "onDataChange") {
+                    executeAction(onChange);
                 }
-            }, 200),
-        [stringAttribute, onChange, onChangeType]
+            }
+        },
+        200,
+        onChange?.isExecuting ?? false
     );
 
     const calculateCounts = useCallback(
@@ -128,15 +127,15 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
             }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [quillRef.current]);
+    }, [quillRef.current, onChange?.isExecuting]);
 
     const onTextChange = useCallback(() => {
         if (stringAttribute.value !== quillRef?.current?.getSemanticHTML()) {
             setAttributeValueDebounce(quillRef?.current?.getSemanticHTML());
         }
         calculateCounts(quillRef.current);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [quillRef.current, stringAttribute, calculateCounts]);
+    }, [quillRef.current, stringAttribute, calculateCounts, onChange?.isExecuting]);
 
     const onSelectionChange = useCallback(
         (range: Range) => {

packages/shared/widget-plugin-hooks/src/useDebounceWithStatus.ts

@@ -0,0 +1,50 @@
+import { useCallback, useRef } from "react";
+
+// this function will directly trigger function if action is not currently executing.
+// if there are executing actions, it will delay the execution
+// hence debounce based on executing status instead of pure timer.
+export const useDebounceWithStatus = <F extends (...args: any[]) => any>(
+    func: F,
+    waitFor: number,
+    isExecuting: boolean
+): [F] => {
+    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const pendingActions = useRef<Parameters<F>>();
+
+    const abort = useCallback((): void => {
+        if (timeoutRef.current !== null) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    }, []);
+
+    const runPendingActions = useCallback(() => {
+        abort();
+        timeoutRef.current = setTimeout(() => {
+            if (isExecuting) {
+                runPendingActions();
+            } else {
+                // only run the last action
+                const _args = pendingActions.current;
+                if (_args) {
+                    // clear previous actions.
+                    pendingActions.current = undefined;
+                    func(..._args);
+                }
+            }
+        }, waitFor);
+    }, [abort, func, waitFor, isExecuting]);
+
+    const debounced = useCallback(
+        (...args: Parameters<F>): void => {
+            if (isExecuting) {
+                pendingActions.current = args;
+                runPendingActions();
+            } else {
+                func(...args);
+            }
+        },
+        [runPendingActions, func, isExecuting]
+    );
+    return [debounced as F];
+};