chore: update events

Author: gjulivan

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

@@ -1,7 +1,4 @@
 import type { Editor as TipTapEditor } from "@tiptap/core";
-// import { Color } from "@tiptap/extension-color";
-// import { Highlight } from "@tiptap/extension-highlight";
-// import { ListItem } from "@tiptap/extension-list-item";
 import { Link } from "@tiptap/extension-link";
 import { Subscript } from "@tiptap/extension-subscript";
 import { Superscript } from "@tiptap/extension-superscript";
@@ -13,17 +10,12 @@ import { TextStyle } from "@tiptap/extension-text-style";
 import { Underline } from "@tiptap/extension-underline";
 import { EditorContent, useEditor } from "@tiptap/react";
 import { StarterKit } from "@tiptap/starter-kit";
-import { forwardRef, ReactElement, ReactNode, useImperativeHandle } from "react";
+import { forwardRef, ReactElement, useImperativeHandle } from "react";
+import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
 import { EditorContextProvider, useCurrentEditor } from "./EditorContext";
 import { HighlightedCodeEditor } from "./HighlightedCodeEditor";
 import { Toolbar } from "./toolbars";
-import {
-    PresetEnum,
-    ToolbarConfigEnum,
-    AdvancedConfigType,
-    CustomFontsType,
-    RichTextContainerProps
-} from "../../typings/RichTextProps";
+import { RichTextContainerProps } from "../../typings/RichTextProps";
 import { FontFamilyClass } from "../extensions/FontFamilyClass";
 import { FontSize } from "../extensions/FontSize";
 import { Fullscreen } from "../extensions/Fullscreen";
@@ -50,6 +42,11 @@ export interface EditorProps extends Pick<
     | "toolbarLocation"
     | "advancedConfig"
     | "customFonts"
+    | "onFocus"
+    | "onBlur"
+    | "onLoad"
+    | "onChangeType"
+    | "onChange"
 > {
     defaultValue?: string;
     onUpdate?: (html: string) => void;
@@ -66,16 +63,14 @@ export interface EditorHandle {
     getEditor: () => TipTapEditor | null;
 }
 
-interface EditorInnerProps {
+interface EditorInnerProps extends Pick<
+    RichTextContainerProps,
+    "imageSourceContent" | "preset" | "toolbarConfig" | "advancedConfig" | "customFonts"
+> {
     showToolbar: boolean;
     readOnly: boolean;
     className?: string;
-    imageSourceContent?: ReactNode;
-    preset?: PresetEnum;
-    toolbarConfig?: ToolbarConfigEnum;
     toolbarGroups?: ToolbarGroupsConfig;
-    advancedConfig?: AdvancedConfigType[];
-    customFonts?: CustomFontsType[];
 }
 
 function EditorInner({
@@ -151,13 +146,8 @@ const Editor = forwardRef<EditorHandle, EditorProps>((props, ref) => {
         readOnly,
         className,
         styleDataFormat = "inline",
-        imageSourceContent,
-        preset,
-        toolbarConfig,
-        toolbarGroups,
         toolbarLocation,
-        advancedConfig,
-        customFonts
+        ...others
     } = props;
 
     const extensions = [
@@ -247,6 +237,18 @@ const Editor = forwardRef<EditorHandle, EditorProps>((props, ref) => {
         onUpdate: ({ editor }) => {
             const html = editor.getHTML();
             onUpdate?.(html);
+        },
+        onFocus: () => {
+            executeAction(props.onFocus);
+        },
+        onBlur: () => {
+            executeAction(props.onBlur);
+            if (props.onChangeType === "onLeave") {
+                executeAction(props.onChange);
+            }
+        },
+        onCreate: () => {
+            executeAction(props.onLoad);
         }
     });
 
@@ -266,17 +268,7 @@ const Editor = forwardRef<EditorHandle, EditorProps>((props, ref) => {
 
     return (
         <EditorContextProvider editor={editor}>
-            <EditorInner
-                showToolbar={!shouldHideToolbar}
-                readOnly={!!readOnly}
-                className={className}
-                imageSourceContent={imageSourceContent}
-                preset={preset}
-                toolbarConfig={toolbarConfig}
-                toolbarGroups={toolbarGroups}
-                advancedConfig={advancedConfig}
-                customFonts={customFonts}
-            />
+            <EditorInner showToolbar={!shouldHideToolbar} readOnly={!!readOnly} className={className} {...others} />
         </EditorContextProvider>
     );
 });

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

@@ -1,6 +1,7 @@
 import { ReactElement, useRef, useState, useEffect } from "react";
 import { RichTextContainerProps } from "typings/RichTextProps";
 import { useDebounceWithStatus } from "@mendix/widget-plugin-hooks/useDebounceWithStatus";
+import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
 import Editor, { EditorHandle } from "./Editor";
 import { StatusBar, StatusBarMetricType } from "./StatusBar";
 
@@ -34,7 +35,12 @@ function EditorWrapper(props: EditorWrapperProps): ReactElement {
         statusBarContent,
         customFonts,
         toolbarLocation,
-        readOnlyStyle
+        readOnlyStyle,
+        onFocus,
+        onBlur,
+        onLoad,
+        onChangeType,
+        onChange
     } = props;
     const editorRef = useRef<EditorHandle>(null);
     const [editorText, setEditorText] = useState<string>("");
@@ -43,6 +49,10 @@ function EditorWrapper(props: EditorWrapperProps): ReactElement {
         (html?: string) => {
             if (stringAttribute.value !== html) {
                 stringAttribute.setValue(html);
+
+                if (onChangeType === "onDataChange") {
+                    executeAction(onChange);
+                }
             }
         },
         200,
@@ -79,13 +89,12 @@ function EditorWrapper(props: EditorWrapperProps): ReactElement {
     })();
 
     return (
-        <div className={`${className} toolbar-${toolbarLocation}`}>
+        <div className={`${className} toolbar-${toolbarLocation} testing-editor-wrapper`}>
             {stringAttribute.status === "available" && (
                 <>
                     <Editor
                         ref={editorRef}
                         defaultValue={stringAttribute.value}
-                        onUpdate={handleUpdate}
                         readOnly={stringAttribute.readOnly}
                         className="tiptap-editor"
                         styleDataFormat={styleDataFormat}
@@ -112,6 +121,12 @@ function EditorWrapper(props: EditorWrapperProps): ReactElement {
                         toolbarLocation={
                             stringAttribute.readOnly && readOnlyStyle !== "text" ? "hide" : toolbarLocation
                         }
+                        onUpdate={handleUpdate}
+                        onFocus={onFocus}
+                        onBlur={onBlur}
+                        onLoad={onLoad}
+                        onChange={onChange}
+                        onChangeType={onChangeType}
                     />
                     {enableStatusBar && (
                         <StatusBar