From f6696d80c3bcff0a33208050ebf1599ccd8e36c8 Mon Sep 17 00:00:00 2001 From: "Cevela, Jiri" Date: Mon, 24 Apr 2023 13:29:15 +0200 Subject: [PATCH 1/2] 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 { public _propertyPaneHelper; private _unqiueId; + private _externalScriptContent; constructor() { super(); @@ -22,6 +23,18 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart { + 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 Date: Sat, 13 May 2023 14:48:17 -0400 Subject: [PATCH 2/2] Updated readme and sample.json --- samples/react-script-editor/README.md | 18 ++++++++++-------- samples/react-script-editor/assets/sample.json | 14 ++++++++++++-- samples/react-script-editor/package-lock.json | 4 ++-- 3 files changed, 24 insertions(+), 12 deletions(-) diff --git a/samples/react-script-editor/README.md b/samples/react-script-editor/README.md index 66da527c1..56d336f61 100644 --- a/samples/react-script-editor/README.md +++ b/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 @@ -203,7 +205,7 @@ Version|Date|Comments ## Minimal Path to Awesome -### Local testing +### Testing * Clone this repository * In the command line run: @@ -237,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 diff --git a/samples/react-script-editor/assets/sample.json b/samples/react-script-editor/assets/sample.json index 3f0ff81ce..f3a6bde07 100644 --- a/samples/react-script-editor/assets/sample.json +++ b/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": [ { diff --git a/samples/react-script-editor/package-lock.json b/samples/react-script-editor/package-lock.json index aec5e684d..3eebbb43c 100644 --- a/samples/react-script-editor/package-lock.json +++ b/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",