chore: fix onblur issue and add tab action config

Author: gjulivan

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

@@ -216,6 +216,22 @@
                         <enumerationValue key="characterCountHtml">Character count (including HTML)</enumerationValue>
                     </enumerationValues>
                 </property>
+                <property key="tabAction" type="enumeration" defaultValue="changeFocus">
+                    <caption>Tab key behavior</caption>
+                    <description>Press 'Tab' to indent text or to move focus to the next element.</description>
+                    <enumerationValues>
+                        <enumerationValue key="indent">Indent</enumerationValue>
+                        <enumerationValue key="changeFocus">Focus next</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="ctrlTabAction" type="enumeration" defaultValue="indent">
+                    <caption>Ctrl+Tab key behavior</caption>
+                    <description>Press 'Ctrl+Tab' to indent text or to move focus to the next element.</description>
+                    <enumerationValues>
+                        <enumerationValue key="indent">Indent</enumerationValue>
+                        <enumerationValue key="changeFocus">Focus next</enumerationValue>
+                    </enumerationValues>
+                </property>
             </propertyGroup>
         </propertyGroup>
         <propertyGroup caption="Custom toolbar">

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

@@ -2,12 +2,13 @@ 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 classNames from "classnames";
-import Quill, { Range } from "quill";
+import Quill from "quill";
 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import { CSSProperties, ReactElement, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { RichTextContainerProps } from "typings/RichTextProps";
 import { EditorContext, EditorProvider } from "../store/EditorProvider";
+import { useActionEvents } from "../store/useActionEvents";
 import { updateLegacyQuillFormats } from "../utils/helpers";
 import MendixTheme from "../utils/themes/mxTheme";
 import { createPreset } from "./CustomToolbars/presets";
@@ -50,11 +51,9 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
     } = props;
 
     const globalState = useContext(EditorContext);
-
     const isFirstLoad = useRef<boolean>(false);
     const quillRef = useRef<Quill>(null);
-    const [isFocus, setIsFocus] = useState(false);
-    const editorValueRef = useRef<string>("");
+    const actionEvents = useActionEvents({ onBlur, onFocus, onChange, onChangeType, quill: quillRef?.current });
     const toolbarRef = useRef<HTMLDivElement>(null);
     const [wordCount, setWordCount] = useState(0);
 
@@ -128,34 +127,6 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [quillRef.current, stringAttribute, calculateCounts, onChange?.isExecuting]);
 
-    const onSelectionChange = useCallback(
-        (range: Range) => {
-            if (range) {
-                // User cursor is selecting
-                if (!isFocus) {
-                    setIsFocus(true);
-                    executeAction(onFocus);
-                    editorValueRef.current = quillRef.current?.getText() || "";
-                }
-            } else {
-                // Cursor not in the editor
-                if (isFocus) {
-                    setIsFocus(false);
-                    executeAction(onBlur);
-
-                    if (onChangeType === "onLeave") {
-                        if (editorValueRef.current !== quillRef.current?.getText()) {
-                            executeAction(onChange);
-                        }
-                    }
-                }
-            }
-            (quillRef.current?.theme as MendixTheme).updatePicker(range);
-        },
-
-        [isFocus, onFocus, onBlur, onChange, onChangeType]
-    );
-
     const toolbarId = `widget_${id.replaceAll(".", "_")}_toolbar`;
     const shouldHideToolbar = (stringAttribute.readOnly && readOnlyStyle !== "text") || toolbarLocation === "hide";
     const toolbarPreset = shouldHideToolbar ? [] : createPreset(props);
@@ -183,6 +154,7 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
             }}
             spellCheck={props.spellCheck}
             tabIndex={tabIndex}
+            {...actionEvents}
         >
             <If condition={toolbarLocation === "auto"}>
                 <StickySentinel />
@@ -220,7 +192,7 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
                     }
                     toolbarId={shouldHideToolbar ? undefined : toolbarOptions ? toolbarOptions : toolbarId}
                     onTextChange={onTextChange}
-                    onSelectionChange={onSelectionChange}
+                    // onSelectionChange={onSelectionChange}
                     className={"widget-rich-text-container"}
                     readOnly={stringAttribute.readOnly}
                     key={`${toolbarId}_${stringAttribute.readOnly}`}

packages/pluggableWidgets/rich-text-web/src/store/useActionEvents.ts

@@ -0,0 +1,57 @@
+import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
+import Quill from "quill";
+import { FocusEvent, useMemo, useRef } from "react";
+import { RichTextContainerProps } from "typings/RichTextProps";
+
+type UseActionEventsReturnValue = {
+    onFocus: (e: FocusEvent) => void;
+    onBlur: (e: FocusEvent) => void;
+};
+
+interface useActionEventsProps
+    extends Pick<RichTextContainerProps, "onFocus" | "onBlur" | "onChange" | "onChangeType"> {
+    quill?: Quill | null;
+}
+
+function isInternalTarget(
+    currentTarget: EventTarget & Element,
+    relatedTarget: (EventTarget & Element) | null
+): boolean | undefined {
+    return (
+        currentTarget?.contains(relatedTarget) ||
+        currentTarget?.ownerDocument.querySelector(".widget-rich-text-modal-body")?.contains(relatedTarget)
+    );
+}
+
+export function useActionEvents(props: useActionEventsProps): UseActionEventsReturnValue {
+    const editorValueRef = useRef<string>("");
+    return useMemo(() => {
+        return {
+            onFocus: (e: FocusEvent): void => {
+                const { relatedTarget, currentTarget } = e;
+                if (!isInternalTarget(currentTarget, relatedTarget)) {
+                    executeAction(props.onFocus);
+                    editorValueRef.current = props.quill?.getText() || "";
+                }
+            },
+            onBlur: (e: FocusEvent): void => {
+                const { relatedTarget, currentTarget } = e;
+                if (!isInternalTarget(currentTarget, relatedTarget)) {
+                    executeAction(props.onBlur);
+                    if (props.onChangeType === "onLeave") {
+                        if (props.quill) {
+                            // validate if the text really changed
+                            const currentText = props.quill.getText();
+                            if (currentText !== editorValueRef.current) {
+                                executeAction(props.onChange);
+                                editorValueRef.current = currentText;
+                            }
+                        } else {
+                            executeAction(props.onChange);
+                        }
+                    }
+                }
+            }
+        };
+    }, [props.onFocus, props.quill, props.onBlur, props.onChangeType, props.onChange]);
+}

packages/pluggableWidgets/rich-text-web/typings/RichTextProps.d.ts

@@ -33,6 +33,10 @@ export interface CustomFontsType {
 
 export type StatusBarContentEnum = "wordCount" | "characterCount" | "characterCountHtml";
 
+export type TabActionEnum = "indent" | "changeFocus";
+
+export type CtrlTabActionEnum = "indent" | "changeFocus";
+
 export type ToolbarConfigEnum = "basic" | "advanced";
 
 export type CtItemTypeEnum = "separator" | "undo" | "redo" | "bold" | "italic" | "underline" | "strike" | "superScript" | "subScript" | "orderedList" | "bulletList" | "lowerAlphaList" | "checkList" | "minIndent" | "plusIndent" | "direction" | "link" | "image" | "video" | "formula" | "blockquote" | "code" | "codeBlock" | "viewCode" | "align" | "centerAlign" | "rightAlign" | "font" | "size" | "color" | "background" | "header" | "fullscreen" | "clean" | "tableBetter";
@@ -82,6 +86,8 @@ export interface RichTextContainerProps {
     imageSourceContent?: ReactNode;
     enableDefaultUpload: boolean;
     statusBarContent: StatusBarContentEnum;
+    tabAction: TabActionEnum;
+    ctrlTabAction: CtrlTabActionEnum;
     toolbarConfig: ToolbarConfigEnum;
     history: boolean;
     fontStyle: boolean;
@@ -131,6 +137,8 @@ export interface RichTextPreviewProps {
     imageSourceContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
     enableDefaultUpload: boolean;
     statusBarContent: StatusBarContentEnum;
+    tabAction: TabActionEnum;
+    ctrlTabAction: CtrlTabActionEnum;
     toolbarConfig: ToolbarConfigEnum;
     history: boolean;
     fontStyle: boolean;