Simplified and improved event reaction behavior

Author: Florian Kroenert

src/web/Xrm.Oss.HtmlTemplating/HTMLWYSIWYGEDITOR/ControlManifest.Input.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <manifest>
-  <control namespace="oss" constructor="HTMLWYSIWYGEDITOR" version="0.0.61" display-name-key="HTMLWYSIWYGEDITOR" description-key="HTMLWYSIWYGEDITOR description" control-type="virtual" >
+  <control namespace="oss" constructor="HTMLWYSIWYGEDITOR" version="0.0.70" display-name-key="HTMLWYSIWYGEDITOR" description-key="HTMLWYSIWYGEDITOR description" control-type="virtual" >
     <!--external-service-usage node declares whether this 3rd party PCF control is using external service or not, if yes, this control will be considered as premium and please also add the external domain it is using.
     If it is not using any external service, please set the enabled="false" and DO NOT add any domain below. The "enabled" will be false by default.
     Example1:

src/web/Xrm.Oss.HtmlTemplating/components/App.tsx

@@ -9,9 +9,10 @@ import { IconButton } from "@fluentui/react";
 import { loadWebResource } from "../domain/WebResourceLoader";
 import { getExternalScript } from "../domain/ScriptCaller";
 import { EditorWrapper } from "./EditorWrapper";
-import { DesignState, DesignStateActionEnum, designStateReducer } from "../domain/DesignState";
+import { DesignState, DesignStateAction, DesignStateActionEnum, designStateReducer } from "../domain/DesignState";
 import { debounce, localHost } from "../domain/Utils";
 import { registerFileUploader } from "../domain/FileUploader";
+import { AppState, SetDefaultDesign, SetEditorProps, SetEditorReady, SetIsFullScreen, appStateReducer } from "../domain/AppState";
 
 export interface AppProps {
   pcfContext: ComponentFramework.Context<IInputs>;
@@ -75,40 +76,37 @@ const reviveXtlExpressionJson = (object: { [key: string]: any }) => {
   }, {} as { [key: string]: any });
 };
 
-let editorReadyFired = false;
-
 export const App: React.FC<AppProps> = React.memo((props) => {
   const editorRef = React.useRef<EditorRef>();
-  const [editorReady, setEditorReady] = React.useState(false);
-  const [editorProps, setEditorProps] = React.useState<EmailEditorProps>();
-  const [defaultDesign, setDefaultDesign] = React.useState(_defaultDesign);
 
-  const [designContext, dispatchDesign] = React.useReducer(designStateReducer, { design: { json: "", html: "" }, isLocked: false } as DesignState);
-  const [isFullScreen, setIsFullScreen] = React.useState(false);
+  const [designContext, dispatchDesign] = React.useReducer(designStateReducer, { design: { json: props.jsonInput ?? ""} } as DesignState);
+  const [appState, dispatchAppState] = React.useReducer(appStateReducer, { defaultDesign: undefined, editorProps: undefined, editorReady: false, isFullScreen: false } as AppState)
 
   const getFormContext: () => FormContext = () => ({
     entityId: (props.pcfContext.mode as any).contextInfo.entityId,
     entity: (props.pcfContext.mode as any).contextInfo.entityTypeName
   });
 
   // Init once initially and every time fullscreen activates / deactivates
-  React.useEffect(() => { init(); }, [ isFullScreen ]);
+  React.useEffect(() => { init(); }, [ appState.isFullScreen ]);
 
-  // Load design on external update
   React.useEffect(() => {
-    if (!editorReady) {
-      return;
+    if (appState.editorReady) {
+      editorBootstrap();
+      dispatchDesign({
+        origin: 'external',
+        payload: {
+          json: designContext?.design?.json,
+          html: ""
+        },
+        type: DesignStateActionEnum.SET
+      });
     }
+  }, [ appState.editorReady ]);
 
-    dispatchDesign({
-      origin: 'external',
-      payload: {
-        json: props.jsonInput ?? "",
-        html: ""
-      },
-      type: DesignStateActionEnum.SET
-    });
-  }, [ props.jsonInput, editorReady, isFullScreen ]);
+  const delayedDesignDispatch = debounce((design: DesignStateAction) => {
+    dispatchDesign(design);
+  }, 1000);
 
   const retrieveMergeTags = (): Promise<Array<MergeTag>> => {
     if (window.location.hostname === localHost) {
@@ -149,7 +147,7 @@ export const App: React.FC<AppProps> = React.memo((props) => {
   const onEditorUpdate = React.useCallback(async () => {
     const [designOutput, htmlOutput] = await getEditorContent();
 
-    dispatchDesign({
+    delayedDesignDispatch({
       origin: 'internal',
       payload: {
         json: designOutput,
@@ -159,42 +157,42 @@ export const App: React.FC<AppProps> = React.memo((props) => {
     });
   }, []);
 
-  const onEditorReady = async () => {
-    // Run only once. MS wires up a middleware in UCI "windowEventListenerBootTask", which interfers with unlayer and makes it post the ready event on every change...
-    if (!editorReadyFired) {
-      editorReadyFired = true;
-      setEditorReady(true);
+  const onEditorReady = () => {
+    dispatchAppState(SetEditorReady(true));
+  };
 
-      editorRef.current!.addEventListener("design:updated", onEditorUpdate);
+  const editorBootstrap = async () => {
+    console.log("[WYSIWYG_PCF] Bootstrapping unlayer editor");
 
-      const functionContext: FunctionContext = {
-        editorRef: editorRef.current!,
-        getFormContext: getFormContext,
-        webApiClient: WebApiClient
-      };
+    editorRef.current!.addEventListener("design:updated", onEditorUpdate);
 
-      if (window.location.hostname !== localHost && props.pcfContext.parameters.customScriptOnReadyFunc.raw) {
-        try {
-          const funcRef = getExternalScript(props.pcfContext.parameters.customScriptOnReadyFunc.raw);
-          
-          await funcRef(functionContext);
-        }
-        catch(ex: any) {
-          alert(`Error in your custom onReady func. Error message: ${ex.message || ex}`);
-        }
-      }
+    const functionContext: FunctionContext = {
+      editorRef: editorRef.current!,
+      getFormContext: getFormContext,
+      webApiClient: WebApiClient
+    };
 
-      if (props.pcfContext.parameters.imageUploadEntity.raw && props.pcfContext.parameters.imageUploadEntityBodyField.raw) {
-        const imageUploadSettings: ImageUploadSettings = {
-          uploadEntity: props.pcfContext.parameters.imageUploadEntity.raw,
-          uploadEntityFileNameField: props.pcfContext.parameters.imageUploadEntityFileNameField.raw,
-          uploadEntityBodyField: props.pcfContext.parameters.imageUploadEntityBodyField.raw,
-          parentLookupName: props.pcfContext.parameters.imageUploadEntityParentLookupName.raw
-        };
+    if (window.location.hostname !== localHost && props.pcfContext.parameters.customScriptOnReadyFunc.raw) {
+      try {
+        const funcRef = getExternalScript(props.pcfContext.parameters.customScriptOnReadyFunc.raw);
 
-        registerFileUploader(imageUploadSettings, functionContext);
+        await funcRef(functionContext);
+      }
+      catch (ex: any) {
+        alert(`Error in your custom onReady func. Error message: ${ex.message || ex}`);
       }
     }
+
+    if (props.pcfContext.parameters.imageUploadEntity.raw && props.pcfContext.parameters.imageUploadEntityBodyField.raw) {
+      const imageUploadSettings: ImageUploadSettings = {
+        uploadEntity: props.pcfContext.parameters.imageUploadEntity.raw,
+        uploadEntityFileNameField: props.pcfContext.parameters.imageUploadEntityFileNameField.raw,
+        uploadEntityBodyField: props.pcfContext.parameters.imageUploadEntityBodyField.raw,
+        parentLookupName: props.pcfContext.parameters.imageUploadEntityParentLookupName.raw
+      };
+
+      registerFileUploader(imageUploadSettings, functionContext);
+    }
   };
 
   const refCallBack = (editor: EditorRef) => {
@@ -224,7 +222,6 @@ export const App: React.FC<AppProps> = React.memo((props) => {
 
     let propertiesToSet = properties;
     let defaultDesign = _defaultDesign;
-    let appSettings = {};
 
     if (window.location.hostname !== localHost && props.pcfContext.parameters.customScriptInitFunc.raw) {
       try {
@@ -245,15 +242,22 @@ export const App: React.FC<AppProps> = React.memo((props) => {
       }
     }
 
-    setEditorProps(propertiesToSet);
-    setDefaultDesign(defaultDesign);
+    dispatchAppState(SetEditorProps(propertiesToSet));
+    dispatchAppState(SetDefaultDesign(defaultDesign));
   };
 
-  const unlockEditor = debounce(() => {
-    dispatchDesign({
-      type: DesignStateActionEnum.UNLOCK
-    });
-  }, 500);
+  const processExternalUpdate = () => {
+    if (props.jsonInput !== designContext.design.json) {
+      delayedDesignDispatch({
+        origin: 'external',
+        payload: {
+          json: props.jsonInput ?? "",
+          html: ""
+        },
+        type: DesignStateActionEnum.SET
+      });
+    }
+  };
 
   const handleDesignChange = async () => {
     if (!designContext.lastOrigin) {
@@ -262,28 +266,26 @@ export const App: React.FC<AppProps> = React.memo((props) => {
 
     if (designContext.lastOrigin === 'external') {
       const design = designContext.design;
-      editorRef.current!.loadDesign((design && design.json && JSON.parse(design.json)) || defaultDesign);
+      editorRef.current!.loadDesign((design && design.json && JSON.parse(design.json)) || appState.defaultDesign);
     }
 
     const [json, html] = await getEditorContent();
-
-    if (designContext.lastOrigin === 'internal') {
-      unlockEditor();
-    }
-
     props.updateOutputs(json, html);
   };
 
   React.useEffect(() => { handleDesignChange(); }, [ designContext.design ]);
 
   React.useEffect(() => {
     if (props.updatedProperties && props.updatedProperties.includes("fullscreen_open")) {
-      editorReadyFired = false;
-      setIsFullScreen(true);
+      dispatchAppState(SetIsFullScreen(true));
     }
     else if (props.updatedProperties && props.updatedProperties.includes("fullscreen_close")) {
-      editorReadyFired = false;
-      setIsFullScreen(false);
+      dispatchAppState(SetIsFullScreen(false));
+    }
+    else if (props.updatedProperties && props.updatedProperties.includes("jsonInputField")) {
+      if (appState.editorReady) {
+        processExternalUpdate();
+      }
     }
   }, [props.updatedProperties]);
 
@@ -298,15 +300,15 @@ export const App: React.FC<AppProps> = React.memo((props) => {
     });
   }
 
-  const onMaximize = () => {
+  const onMaximize = debounce(() => {
     props.pcfContext.mode.setFullScreen(true);
-  };
+  }, 1000);
 
   return (
     <div id='oss_htmlroot' style={{ display: "flex", flexDirection: "column", minWidth: "1024px", minHeight: "500px", position: "relative", height: `${props.allocatedHeight > 0 ? props.pcfContext.mode.allocatedHeight : 800}px`, width: `${props.allocatedWidth > 0 ? props.pcfContext.mode.allocatedWidth : 1024}px` }}>
-      { !isFullScreen && <IconButton iconProps={{ iconName: "MiniExpand" }} title="Maximize / Minimize" styles={{ root: { position: "absolute", backgroundColor: "#efefef", borderRadius: "5px", right: "10px", bottom: "10px" }}} onClick={onMaximize} /> }
-      { editorProps && defaultDesign &&
-        <EditorWrapper editorProps={{...editorProps, onReady: onEditorReady}} refCallBack={refCallBack}  />
+      { !appState.isFullScreen && <IconButton iconProps={{ iconName: "MiniExpand" }} title="Maximize / Minimize" styles={{ root: { position: "absolute", backgroundColor: "#efefef", borderRadius: "5px", right: "10px", bottom: "10px" }}} onClick={onMaximize} /> }
+      { appState.editorProps && appState.defaultDesign &&
+        <EditorWrapper editorProps={{...appState.editorProps, onReady: onEditorReady}} refCallBack={refCallBack}  />
       }
     </div>
   );

src/web/Xrm.Oss.HtmlTemplating/domain/AppState.ts

@@ -0,0 +1,70 @@
+import { EmailEditorProps } from "react-email-editor";
+
+export interface AppStateAction<T, P> {
+    type: T;
+    payload: P;
+}
+
+type SetEditorReadyType = "SET_EDITOR_READY";
+type SetEditorReadyPayload = { editorReady: boolean };
+type SetEditorReadyAction = AppStateAction<SetEditorReadyType, SetEditorReadyPayload>;
+export const SetEditorReady = (editorReady: boolean): SetEditorReadyAction => ({ type: "SET_EDITOR_READY", payload: { editorReady } });
+
+type SetEditorPropsType = "SET_EDITOR_PROPS";
+type SetEditorPropsPayload = { props: EmailEditorProps };
+type SetEditorPropsAction = AppStateAction<SetEditorPropsType, SetEditorPropsPayload>;
+export const SetEditorProps = (props: EmailEditorProps): SetEditorPropsAction => ({ type: "SET_EDITOR_PROPS", payload: { props } });
+
+type SetDefaultDesignType = "SET_DEFAULT_DESIGN";
+type SetDefaultDesignPayload = { defaultDesign: { [key: string]: any } };
+type SetDefaultDesignAction = AppStateAction<SetDefaultDesignType, SetDefaultDesignPayload>;
+export const SetDefaultDesign = (defaultDesign: {[key: string]: any}): SetDefaultDesignAction => ({ type: "SET_DEFAULT_DESIGN", payload: { defaultDesign } });
+
+
+type SetIsFullScreenType = "SET_IS_FULLSCREEN";
+type SetIsFullScreenPayload = { isFullscreen: boolean };
+type SetIsFullScreenAction = AppStateAction<SetIsFullScreenType, SetIsFullScreenPayload>;
+export const SetIsFullScreen = (isFullscreen: boolean): SetIsFullScreenAction => ({ type: "SET_IS_FULLSCREEN", payload: { isFullscreen } });
+
+
+export interface DesignDefinition {
+    json: string;
+    html: string;
+}
+
+export interface AppState {
+    editorReady: boolean;
+    editorProps?: EmailEditorProps;
+    defaultDesign?: {[key: string]: any};
+    isFullScreen: boolean;
+}
+
+export function appStateReducer(designState: AppState, action: SetEditorReadyAction | SetEditorPropsAction | SetDefaultDesignAction | SetIsFullScreenAction) {
+    const { type, payload } = action;
+
+    switch (type) {
+        case "SET_DEFAULT_DESIGN":
+            return {
+                ...designState,
+                defaultDesign: payload.defaultDesign
+            } as AppState;
+        case "SET_EDITOR_PROPS":
+            return {
+                ...designState,
+                editorProps: payload.props
+            } as AppState;
+        case "SET_EDITOR_READY":
+            return {
+                ...designState,
+                editorReady: payload.editorReady
+            } as AppState;
+        case "SET_IS_FULLSCREEN":
+            return {
+                ...designState,
+                isFullScreen: payload.isFullscreen,
+                editorReady: false
+            } as AppState;
+        default:
+            return designState;
+    }
+}

src/web/Xrm.Oss.HtmlTemplating/domain/DesignState.ts

@@ -1,6 +1,5 @@
 export enum DesignStateActionEnum {
-    SET = 'SET',
-    UNLOCK = 'UNLOCK'
+    SET = 'SET'
 }
 
 export type Origin = 'internal' | 'external';
@@ -18,7 +17,6 @@ export interface DesignDefinition {
 
 export interface DesignState {
     design: DesignDefinition;
-    isLocked: boolean;
     lastOrigin?: Origin 
 }
 
@@ -27,20 +25,12 @@ export function designStateReducer(designState: DesignState, action: DesignState
 
     switch (type) {
         case DesignStateActionEnum.SET:
-            if (designState.isLocked && origin !== 'internal') {
-                return designState;
-            }
+            console.log(`[WYSIWYG_PCF] Editor received event from ${origin}`);
 
             return {
                 ...designState,
                 design: payload,
-                lastOrigin: origin,
-                isLocked: origin === 'internal'
-            } as DesignState;
-        case DesignStateActionEnum.UNLOCK:
-            return {
-                ...designState,
-                isLocked: false
+                lastOrigin: origin
             } as DesignState;
         default:
             return designState;

src/web/Xrm.Oss.HtmlTemplating/domain/FileUploader.ts

@@ -44,8 +44,8 @@ export const registerFileUploader = ({uploadEntity, uploadEntityFileNameField, u
             await webApiClient.SendRequest("PATCH", url, img, { headers: headers, apiVersion: "9.2" });
             done({ progress: 100, url: `${url}/$value` });
         }
-        catch (error) {
-            console.log(error);
+        catch (error: any) {
+            console.log(`[WYSIWYG_PCF] Encountered error: ${error?.message ?? error}`);
             throw error;
         }
     });