Merge pull request #3666 from salascz/feature/script-editor-external-script

samples/react-script-editor/README.md

@@ -1,7 +1,7 @@
 
-# Script editor web part for modern pages built in React
+# Script editor web part for modern pages
 
-This version works only for SharePoint Online. If you want a version for Sharepoint on-premises go to [react-script-editor-onprem](../react-script-editor-onprem).
+This version works only for SharePoint Online. If you want a version for SharePoint on-premises go to [react-script-editor-onprem](../react-script-editor-onprem).
 
 **It's important you read and understand the notes on [deployment](#deploy-to-non-script-sites--modern-team-sites).**
 
@@ -130,7 +130,7 @@ By default this web part is not allowed on no-script sites, as it allows executi
 
 If you however want to allow the web part for non-script sites like Office 365 Group modern team sites you have to edit `ScriptEditorWebPart.manifest.json` with the following change:
 
-```
+```json
 "requiresCustomScript": false
 ```
 
@@ -138,7 +138,7 @@ If you however want to allow the web part for non-script sites like Office 365 G
 
 By default you have to install this web part per site collection where you want it available. If you want it enabled by default on all sites you have to edit `package-solution.json` with the following change:
 
-```
+```json
 "skipFeatureDeployment": true
 ```
 
@@ -171,6 +171,8 @@ This sample is optimally compatible with the following environment configuration
 
 * [Mikael Svenson](https://github.com/wobba) 
 * [Felix Bohnacker](https://github.com/felixbohnackerfelixbohnacker)
+* [salascz](https://github.com/salascz)
+* [Waldek Mastykarz](https://github.com/waldekmastykarz)
 
 ## Version history
 
@@ -198,11 +200,12 @@ 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
 
-### Local testing
+### Testing
 
 * Clone this repository
 * In the command line run:
@@ -236,11 +239,11 @@ You can try looking at [issues related to this sample](https://github.com/pnp/sp
 
 You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-script-editor) and see what the community is saying.
 
-If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected%2Csample%3A%20react-script-editor&template=bug-report.yml&sample=react-script-editor&authors=@wobba&title=react-script-editor%20-%20).
+If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected%2Csample%3A%20react-script-editor&template=bug-report.yml&sample=react-script-editor&authors=@wobba%20@salascz%20@felixbohnacker&title=react-script-editor%20-%20).
 
-For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aquestion%2Csample%3A%20react-script-editor&template=question.yml&sample=react-script-editor&authors=@wobba&title=react-script-editor%20-%20).
+For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aquestion%2Csample%3A%20react-script-editor&template=question.yml&sample=react-script-editor&authors=@wobba%20@salascz%20@felixbohnacker&title=react-script-editor%20-%20).
 
-Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-script-editor&template=question.yml&sample=react-script-editor&authors=@wobba&title=react-script-editor%20-%20).
+Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-script-editor&template=question.yml&sample=react-script-editor&authors=@wobba%20@salascz%20@felixbohnacker&title=react-script-editor%20-%20).
 
 ## Disclaimer
 

samples/react-script-editor/assets/sample.json

@@ -9,7 +9,7 @@
       "Coming from old classic SharePoint pages you might have existing script solutions you want to re-use on a modern page without having to repackage it as a new SharePoint Framework web part."
     ],
     "creationDateTime": "2019-10-13",
-    "updateDateTime": "2023-03-11",
+    "updateDateTime": "2023-04-24",
     "products": [
       "SharePoint"
     ],
@@ -57,7 +57,17 @@
         "gitHubAccount": "felixbohnacker",
         "pictureUrl": "https://github.com/felixbohnacker.png",
         "name": "Felix Bohnacker"
-      }
+      },
+      {
+        "gitHubAccount": "salascz",
+        "name": "salascz",
+        "pictureUrl": "https://github.com/salascz.png"
+      },
+      {
+          "gitHubAccount": "wobba",
+          "name": "Mikael Svenson",
+          "pictureUrl": "https://github.com/wobba.png"
+          }
     ],
     "references": [
       {

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,

samples/react-script-editor/package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "pnp-script-editor",
-    "version": "1.0.21",
+    "version": "1.0.22",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "pnp-script-editor",
-            "version": "1.0.21",
+            "version": "1.0.22",
             "dependencies": {
                 "@microsoft/sp-core-library": "1.16.1",
                 "@microsoft/sp-loader": "1.16.1",

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": {

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;

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++) {