Fixed fullscreen bugs

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.41" display-name-key="HTMLWYSIWYGEDITOR" description-key="HTMLWYSIWYGEDITOR description" control-type="virtual" >
+  <control namespace="oss" constructor="HTMLWYSIWYGEDITOR" version="0.0.46" 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/HTMLWYSIWYGEDITOR/index.ts

@@ -54,7 +54,8 @@ export class HTMLWYSIWYGEDITOR implements ComponentFramework.ReactControl<IInput
             jsonInput: context.parameters.jsonInputField.raw,
             updateOutputs: this.updateOutputs,
             allocatedHeight: context.mode.allocatedHeight,
-            allocatedWidth: context.mode.allocatedWidth
+            allocatedWidth: context.mode.allocatedWidth,
+            updatedProperties: context.updatedProperties
         };
 
         return React.createElement(

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

@@ -18,6 +18,7 @@ export interface AppProps {
   updateOutputs: (jsonInput: string, htmlOutput: string) => void;
   allocatedHeight: number;
   allocatedWidth: number;
+  updatedProperties: string[];
 }
 
 const asciiArmorRegex = /xtl_ascii_armor__(.*)?(?=__xtl_ascii_armor)__xtl_ascii_armor/gm;
@@ -66,8 +67,8 @@ export const App: React.FC<AppProps> = React.memo((props) => {
   const [designContext, dispatchDesign] = React.useReducer(designStateReducer, { design: { json: "", html: "" }, isLocked: false } as DesignState);
   const [isFullScreen, setIsFullScreen] = React.useState(false);
 
-  // Init once
-  React.useEffect(() => { init(); }, []);
+  // Init once initially and every time fullscreen activates / deactivates
+  React.useEffect(() => { init(); }, [ isFullScreen ]);
 
   // Load design on external update
   React.useEffect(() => {
@@ -83,7 +84,7 @@ export const App: React.FC<AppProps> = React.memo((props) => {
       },
       type: DesignStateActionEnum.SET
     });
-  }, [ props.jsonInput, editorReady ]);
+  }, [ props.jsonInput, editorReady, isFullScreen ]);
 
   const retrieveMergeTags = (): Promise<Array<MergeTag>> => {
     if (window.location.hostname === localHost) {
@@ -237,6 +238,17 @@ export const App: React.FC<AppProps> = React.memo((props) => {
 
   React.useEffect(() => { handleDesignChange(); }, [ designContext.design ]);
 
+  React.useEffect(() => {
+    if (props.updatedProperties && props.updatedProperties.includes("fullscreen_open")) {
+      editorReadyFired = false;
+      setIsFullScreen(true);
+    }
+    else if (props.updatedProperties && props.updatedProperties.includes("fullscreen_close")) {
+      editorReadyFired = false;
+      setIsFullScreen(false);
+    }
+  }, [props.updatedProperties]);
+
   const getEditorContent = (): Promise<[string, string]> => {
     return new Promise((resolve, reject) => {
       editorRef.current!.exportHtml(({ design, html }: { design: { [key: string]: any }, html: string }) => {
@@ -249,15 +261,12 @@ export const App: React.FC<AppProps> = React.memo((props) => {
   }
 
   const onMaximize = () => {
-    const newFullScreenSetting = !isFullScreen;
-
-    setIsFullScreen(newFullScreenSetting);
-    props.pcfContext.mode.setFullScreen(newFullScreenSetting);
+    props.pcfContext.mode.setFullScreen(true);
   };
 
   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` }}>
-      <IconButton iconProps={{ iconName: "MiniExpand" }} title="Maximize / Minimize" styles={{ root: { position: "absolute", backgroundColor: "#efefef", borderRadius: "5px", right: "10px", bottom: "10px" }}} onClick={onMaximize} />
+      { !isFullScreen && <IconButton iconProps={{ iconName: "MiniExpand" }} title="Maximize / Minimize" styles={{ root: { position: "absolute", backgroundColor: "#efefef", borderRadius: "5px", right: "10px", bottom: "10px" }}} onClick={onMaximize} /> }
       { editorProps &&
         <EditorWrapper editorProps={editorProps} refCallBack={refCallBack}  />
       }