fix: update string attribute also update rte content

Author: gjulivan

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

@@ -1,13 +1,12 @@
-import { ValidationAlert } from "@mendix/widget-plugin-component-kit/Alert";
 import classNames from "classnames";
 import { Fragment, ReactElement } from "react";
+import { ValidationAlert } from "@mendix/widget-plugin-component-kit/Alert";
 import { RichTextContainerProps } from "../typings/RichTextProps";
 import EditorWrapper from "./components/EditorWrapper";
 import "./ui/RichText.scss";
 
 export default function RichText(props: RichTextContainerProps): ReactElement {
     const { stringAttribute } = props;
-
     return (
         <Fragment>
             {stringAttribute.status === "loading" ? (

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

@@ -8,7 +8,7 @@ import { TaskList } from "@tiptap/extension-task-list";
 import { TextStyle } from "@tiptap/extension-text-style";
 import { EditorContent, useEditor } from "@tiptap/react";
 import { StarterKit } from "@tiptap/starter-kit";
-import { forwardRef, ReactElement, useImperativeHandle, useMemo } from "react";
+import { forwardRef, ReactElement, useEffect, useImperativeHandle, useMemo } from "react";
 import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
 import { EditorContextProvider, useCurrentEditor } from "./EditorContext";
 import { HighlightedCodeEditor } from "./HighlightedCodeEditor";
@@ -275,6 +275,18 @@ const Editor = forwardRef<EditorHandle, EditorProps>((props, ref) => {
         getEditor: () => editor
     }));
 
+    // update quills content on value change.
+    useEffect(() => {
+        // if there is an update comes from external element (default value sudden change)
+        // only do update if editor not focused, otherwise it will override the user input.
+        if (!editor.isFocused) {
+            const newContent = editor.getHTML();
+            if (newContent && newContent !== defaultValue) {
+                editor.commands.setContent(defaultValue || "");
+            }
+        }
+    }, [editor, defaultValue]);
+
     if (!editor) {
         return null;
     }