From f6696d80c3bcff0a33208050ebf1599ccd8e36c8 Mon Sep 17 00:00:00 2001
From: "Cevela, Jiri" <jiri.cevela@merck.com>
Date: Mon, 24 Apr 2023 13:29:15 +0200
Subject: [PATCH] Added support for script in external template

---
 samples/react-script-editor/README.md         |  1 +
 .../config/package-solution.json              |  2 +-
 samples/react-script-editor/package.json      |  2 +-
 .../scriptEditor/IScriptEditorWebPartProps.ts |  2 ++
 .../scriptEditor/ScriptEditorWebPart.ts       | 34 ++++++++++++++++---
 5 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/samples/react-script-editor/README.md b/samples/react-script-editor/README.md
index 4399a0b1c..66da527c1 100644
--- a/samples/react-script-editor/README.md
+++ b/samples/react-script-editor/README.md
@@ -198,6 +198,7 @@ Version|Date|Comments
 1.0.19.0|August 31, 2022|Added support for section background color
 1.0.20.0|October 10, 2022|Added sample html/script with self-executing function
 1.0.21.0|March 11, 2023|Bump dependencies to allow react-script-editor to build under SPFx 1.16.1
+1.0.22.0|April 24, 2023|Added support for script in external template 
 
 
 ## Minimal Path to Awesome
diff --git a/samples/react-script-editor/config/package-solution.json b/samples/react-script-editor/config/package-solution.json
index b82587f1f..165b328f8 100644
--- a/samples/react-script-editor/config/package-solution.json
+++ b/samples/react-script-editor/config/package-solution.json
@@ -3,7 +3,7 @@
     "solution": {
         "name": "Modern Script Editor web part by mikaelsvenson",
         "id": "1425175f-3ed8-44d2-8fc4-dd1497191294",
-        "version": "1.0.21.0",
+        "version": "1.0.22.0",
         "includeClientSideAssets": true,
         "skipFeatureDeployment": false,
         "isDomainIsolated": false,
diff --git a/samples/react-script-editor/package.json b/samples/react-script-editor/package.json
index c7f666b4c..1d33e05a6 100644
--- a/samples/react-script-editor/package.json
+++ b/samples/react-script-editor/package.json
@@ -1,6 +1,6 @@
 {
     "name": "pnp-script-editor",
-    "version": "1.0.21",
+    "version": "1.0.22",
     "private": true,
     "main": "lib/index.js",
     "resolutions": {
diff --git a/samples/react-script-editor/src/webparts/scriptEditor/IScriptEditorWebPartProps.ts b/samples/react-script-editor/src/webparts/scriptEditor/IScriptEditorWebPartProps.ts
index 3b557f38b..6df6c01af 100644
--- a/samples/react-script-editor/src/webparts/scriptEditor/IScriptEditorWebPartProps.ts
+++ b/samples/react-script-editor/src/webparts/scriptEditor/IScriptEditorWebPartProps.ts
@@ -1,5 +1,7 @@
 export interface IScriptEditorWebPartProps {
   script: string;
+  useExternalScript: boolean;
+  externalScript?: string;
   title: string;
   removePadding: boolean;
   spPageContextInfo: boolean;
diff --git a/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.ts b/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.ts
index 7a2ae6a67..f85e2acb8 100644
--- a/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.ts
+++ b/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.ts
@@ -11,6 +11,7 @@ import PropertyPaneLogo from './PropertyPaneLogo';
 export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEditorWebPartProps> {
     public _propertyPaneHelper;
     private _unqiueId;
+    private _externalScriptContent;
 
     constructor() {
         super();
@@ -22,6 +23,18 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
         this._propertyPaneHelper.initialValue = newVal;
     }
 
+    protected async onInit(): Promise<void> {
+        if (this.properties.useExternalScript) {
+            try {
+                const prefix = this.properties.externalScript.indexOf('?') === -1 ? '?' : '&';
+                const response = await fetch(`${this.properties.externalScript}${prefix}pnp=${new Date().getTime()}`);
+                this._externalScriptContent = await response.text();
+            } catch (e) {
+                this._externalScriptContent = 'Failed to load external script.';
+            }
+        }
+    }
+
     public render(): void {
         this._unqiueId = this.context.instanceId;
         if (this.displayMode == DisplayMode.Read) {
@@ -42,7 +55,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
             }
 
             ReactDom.unmountComponentAtNode(this.domElement);
-            this.domElement.innerHTML = this.properties.script;
+            this.domElement.innerHTML = this.properties.useExternalScript ? this._externalScriptContent : this.properties.script;
             this.executeScript(this.domElement);
         } else {
             this.renderEditor();
@@ -66,7 +79,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
         );
         ReactDom.render(element, this.domElement);
     }
-    
+
     protected get dataVersion(): Version {
         return Version.parse('1.0');
     }
@@ -108,9 +121,22 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
                 onText: "Enabled",
                 offText: "Disabled"
             }),
-            this._propertyPaneHelper
+            PropertyPaneToggle('useExternalScript', {
+                label: 'Use an external HTML Code instead of inline script',
+                onText: "Use external HTML Code",
+                offText: "Use inline script"
+            }),
         ];
 
+        if (this.properties.useExternalScript) {
+            webPartOptions.push(PropertyPaneTextField("externalScript", {
+                label: "External HTML Code URL",
+                value: this.properties.externalScript,
+            }));
+        } else {
+            webPartOptions.push(this._propertyPaneHelper);
+        }
+
         if (this.context.sdks.microsoftTeams) {
             let config = PropertyPaneToggle("teamsContext", {
                 label: "Enable teams context as _teamsContexInfo",
@@ -173,7 +199,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
     //
     // Argument element is an element in the dom.
     private async executeScript(element: HTMLElement) {
-        // clean up added script tags in case of smart re-load        
+        // clean up added script tags in case of smart re-load
         const headTag = document.getElementsByTagName("head")[0] || document.documentElement;
         let scriptTags = headTag.getElementsByTagName("script");
         for (let i = 0; i < scriptTags.length; i++) {