Merge pull request #2777 from felixbohnacker/v1.0.18
react-script-editor: Upgrade to SPFx v1.13.1 + version bump to 1.0.18
This commit is contained in:
Hugo Bernier
GitHub
commit
cb78710419
|
|
@ -30,3 +30,6 @@ obj
|
|||
|
||||
# Styles Generated Code
|
||||
*.scss.ts
|
||||
|
||||
# Release folder
|
||||
release
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"libraryName": "pnp-script-editor",
|
||||
"version": "1.10.0",
|
||||
"version": "1.13.1",
|
||||
"environment": "spo",
|
||||
"isDomainIsolated": false,
|
||||
"libraryId": "1425175f-3ed8-44d2-8fc4-dd1497191294",
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ This version works only for SharePoint Online. If you want a version for Sharepo
|
|||
**It's important you read and understand the notes on [deployment](#deploy-to-non-script-sites--modern-team-sites).**
|
||||
|
||||
## Summary
|
||||
|
||||
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. This web part is similar to the classic
|
||||
Script Editor Web Part, and allows you do drop arbitrary script or html on a modern page.
|
||||
|
|
@ -72,6 +73,7 @@ If all you want is to add markup on the page, you can do that as well. Adding th
|
|||
```
|
||||
|
||||
You may add CSS via style tags or `link` tags.
|
||||
|
||||
```html
|
||||
<!-- Latest compiled and minified CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
||||
|
|
@ -95,9 +97,11 @@ You may add CSS via style tags or `link` tags.
|
|||
```
|
||||
|
||||
## Support for Office UI Fabric styles
|
||||
|
||||
By adding the class name `ms-Fabric` to your top element, you can use use fabric CSS classes directly in the web part. See [Fabric Core](https://developer.microsoft.com/en-us/fabric#/get-started/web#fabric-core) for more information on Fabric classes.
|
||||
|
||||
**Sample**
|
||||
### Sample
|
||||
|
||||
```html
|
||||
<div class="ms-Fabric">
|
||||
<span class="ms-font-su ms-fontColor-themePrimary">
|
||||
|
|
@ -107,16 +111,19 @@ By adding the class name `ms-Fabric` to your top element, you can use use fabric
|
|||
```
|
||||
|
||||
## Support for classic _spPageContextInfo
|
||||
If your scripts rely on the classic _spPageContextInfo, you can enable that in the web part property pane.
|
||||
|
||||
If your scripts rely on the classic_spPageContextInfo, you can enable that in the web part property pane.
|
||||
|
||||
## Support for Teams tabs
|
||||
|
||||
If you want to use the solution as a Teams tab, perform the changes to deploy to [non-script](#deploy-to-non-script-sites--modern-team-sites) sites and [tenant wide deployment](#deploy-tenant-wide).
|
||||
|
||||
Next see the [Teams tab tutorial](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab) for steps needed to deploy the solution as a Teams tab.
|
||||
|
||||
You can get access to the Teams context information via the global variable `_teamsContexInfo`. The available properties are documented at [Teams context interface](https://docs.microsoft.com/en-us/javascript/api/@microsoft/teams-js/microsoftteams.context?view=msteams-client-js-latest).
|
||||
|
||||
**Sample**
|
||||
### Sample
|
||||
|
||||
```html
|
||||
<div class="ms-Fabric">
|
||||
<span id="ScriptIt" class="ms-font-xxl ms-fontColor-neutralPrimary">
|
||||
|
|
@ -132,29 +139,33 @@ element.innerHTML = "Team: " + _teamsContexInfo.teamName + "<br\>Channel: " + _t
|
|||
|
||||
|
||||
### Deploy to non-script sites / modern team sites
|
||||
|
||||
By default this web part is not allowed on no-script sites, as it allows execution of arbitrary script. This is by design as from a security and governance perspective you might not want arbitrary script added to your pages. This is typically something you want control over.
|
||||
|
||||
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:
|
||||
|
||||
```
|
||||
"requiresCustomScript": false
|
||||
```
|
||||
|
||||
### Deploy tenant wide
|
||||
|
||||
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:
|
||||
|
||||
```
|
||||
"skipFeatureDeployment": true
|
||||
```
|
||||
|
||||
In order to make it available to absolutely all sites you need apply the _Deploy to non-script sites / modern team site_ change as well.
|
||||
In order to make it available to absolutely all sites you need apply the *Deploy to non-script sites / modern team site* change as well.
|
||||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -168,6 +179,8 @@ In order to make it available to absolutely all sites you need apply the _Deploy
|
|||
Solution|Author(s)
|
||||
--------|---------
|
||||
react-script-editor | [Mikael Svenson](https://github.com/wobba) ([@mikaelsvenson](http://www.twitter.com/mikaelsvenson), [techmikael.com](techmikael.com))
|
||||
react-script-editor | [Felix Bohnacker](https://github.com/felixbohnackerfelixbohnacker)
|
||||
|
||||
|
||||
## Version history
|
||||
|
||||
|
|
@ -191,29 +204,33 @@ Version|Date|Comments
|
|||
1.0.0.15|Mar 16th, 2020|Upgrade to SPFx v1.10.0. Add support for Teams tab. Renamed package file.
|
||||
1.0.0.16|April 1st, 2020|Improved how script tags are handled and cleaned up on smart page navigation.
|
||||
1.0.17.0|January 29th, 2021|Changed versioning to 3 parts. Updated npm packages, restructured documentation, minor change to webpack analyzer setup.
|
||||
1.0.18.0|June 14, 2022|Upgrade to SPFx v1.13.1
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
### Local testing
|
||||
|
||||
- Clone this repository
|
||||
- In the command line run:
|
||||
- `npm install`
|
||||
- `gulp serve`
|
||||
* Clone this repository
|
||||
* In the command line run:
|
||||
* `npm install`
|
||||
* `gulp serve`
|
||||
|
||||
### Deploy
|
||||
|
||||
* `gulp clean`
|
||||
* `gulp bundle --ship`
|
||||
* `gulp package-solution --ship`
|
||||
* Upload `.sppkg` file from `sharepoint\solution` to your tenant App Catalog
|
||||
* E.g.: https://<tenant>.sharepoint.com/sites/AppCatalog/AppCatalog
|
||||
* E.g.: https://<tenant>.sharepoint.com/sites/AppCatalog/AppCatalog
|
||||
* Add the web part to a site collection, and test it on a page
|
||||
|
||||
## Features
|
||||
|
||||
This web part illustrates the following concepts on top of the SharePoint Framework:
|
||||
|
||||
- Re-use existing JavaScript solutions on a modern page
|
||||
- Office UI Fabric
|
||||
- React
|
||||
|
||||
* Re-use existing JavaScript solutions on a modern page
|
||||
* Office UI Fabric
|
||||
* React
|
||||
|
||||
## Help
|
||||
|
||||
|
|
@ -235,5 +252,4 @@ Finally, if you have an idea for improvement, [make a suggestion](https://github
|
|||
|
||||
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||
|
||||
|
||||
<img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/react-script-editor" />
|
||||
|
|
|
|||
|
|
@ -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": "2019-10-13",
|
||||
"updateDateTime": "2022-06-14",
|
||||
"products": [
|
||||
"SharePoint"
|
||||
],
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
},
|
||||
{
|
||||
"key": "SPFX-VERSION",
|
||||
"value": "1.4.1"
|
||||
"value": "1.13.1"
|
||||
},
|
||||
{
|
||||
"key": "SPFX-FULLPAGEAPP",
|
||||
|
|
@ -52,6 +52,11 @@
|
|||
"pictureUrl": "https://github.com/waldekmastykarz.png",
|
||||
"name": "Waldek Mastykarz",
|
||||
"twitter": "waldekm"
|
||||
},
|
||||
{
|
||||
"gitHubAccount": "felixbohnacker",
|
||||
"pictureUrl": "https://github.com/felixbohnacker.png",
|
||||
"name": "Felix Bohnacker"
|
||||
}
|
||||
],
|
||||
"references": [
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||
"deployCdnPath": "temp/deploy"
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||
"workingDir": "./temp/deploy/",
|
||||
"workingDir": "./release/assets/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "pnp-script-editor",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
|
|
|
|||
|
|
@ -3,10 +3,17 @@
|
|||
"solution": {
|
||||
"name": "Modern Script Editor web part by mikaelsvenson",
|
||||
"id": "1425175f-3ed8-44d2-8fc4-dd1497191294",
|
||||
"version": "1.0.17.0",
|
||||
"version": "1.0.18.0",
|
||||
"includeClientSideAssets": true,
|
||||
"skipFeatureDeployment": false,
|
||||
"isDomainIsolated": false
|
||||
"isDomainIsolated": false,
|
||||
"developer": {
|
||||
"name": "Mikael Svenson",
|
||||
"privacyUrl": "",
|
||||
"termsOfUseUrl": "",
|
||||
"websiteUrl": "https://www.techmikael.com/",
|
||||
"mpnId": ""
|
||||
}
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/pnp-script-editor.sppkg"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||
"port": 4321,
|
||||
"initialPage": "https://localhost:5432/workbench",
|
||||
"https": true,
|
||||
"api": {
|
||||
"port": 5432,
|
||||
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||
}
|
||||
"initialPage": "https://contoso.sharepoint.com/_layouts/workbench.aspx",
|
||||
"https": true
|
||||
}
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
'use strict';
|
||||
|
||||
const gulp = require('gulp');
|
||||
const path = require('path');
|
||||
const build = require('@microsoft/sp-build-web');
|
||||
const bundleAnalyzer = require('webpack-bundle-analyzer');
|
||||
|
|
@ -22,4 +21,14 @@ build.configureWebpack.mergeConfig({
|
|||
});
|
||||
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
|
||||
build.initialize(gulp);
|
||||
|
||||
var getTasks = build.rig.getTasks;
|
||||
build.rig.getTasks = function () {
|
||||
var result = getTasks.call(build.rig);
|
||||
|
||||
result.set('serve', result.get('serve-deprecated'));
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
build.initialize(require('gulp'));
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,41 +1,38 @@
|
|||
{
|
||||
"name": "pnp-script-editor",
|
||||
"version": "1.0.17",
|
||||
"version": "1.0.18",
|
||||
"private": true,
|
||||
"main": "lib/index.js",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"resolutions": {
|
||||
"@types/react": "16.8.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/sp-core-library": "1.10.0",
|
||||
"@microsoft/sp-loader": "1.10.0",
|
||||
"@microsoft/sp-lodash-subset": "1.10.0",
|
||||
"@microsoft/sp-property-pane": "1.10.0",
|
||||
"@microsoft/sp-webpart-base": "1.10.0",
|
||||
"@microsoft/sp-core-library": "1.13.1",
|
||||
"@microsoft/sp-loader": "1.13.1",
|
||||
"@microsoft/sp-lodash-subset": "1.13.1",
|
||||
"@microsoft/sp-property-pane": "1.13.1",
|
||||
"@microsoft/sp-webpart-base": "1.13.1",
|
||||
"@pnp/spfx-controls-react": "2.4.0",
|
||||
"@pnp/spfx-property-controls": "2.3.0",
|
||||
"@types/es6-promise": "0.0.33",
|
||||
"@types/react": "16.8.8",
|
||||
"@types/react-dom": "16.8.3",
|
||||
"@types/webpack-env": "1.13.1",
|
||||
"office-ui-fabric-react": "6.214.0",
|
||||
"react": "16.8.5",
|
||||
"react-dom": "16.8.5"
|
||||
"office-ui-fabric-react": "7.174.1",
|
||||
"react": "16.13.1",
|
||||
"react-dom": "16.13.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/rush-stack-compiler-3.2": "^0.6.3",
|
||||
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
|
||||
"@microsoft/sp-build-web": "1.10.0",
|
||||
"@microsoft/sp-module-interfaces": "1.10.0",
|
||||
"@microsoft/sp-tslint-rules": "1.10.0",
|
||||
"@microsoft/sp-webpart-workbench": "1.10.0",
|
||||
"@microsoft/rush-stack-compiler-3.7": "0.2.3",
|
||||
"@microsoft/rush-stack-compiler-3.9": "0.4.47",
|
||||
"@microsoft/sp-build-web": "1.13.1",
|
||||
"@microsoft/sp-module-interfaces": "1.13.1",
|
||||
"@microsoft/sp-tslint-rules": "1.13.1",
|
||||
"@types/chai": "3.4.34",
|
||||
"@types/mocha": "2.2.38",
|
||||
"@types/react": "16.9.36",
|
||||
"@types/react-dom": "16.9.15",
|
||||
"@types/webpack-env": "1.13.1",
|
||||
"ajv": "~5.2.2",
|
||||
"gulp": "~3.9.1",
|
||||
"gulp": "4.0.2",
|
||||
"tslint-microsoft-contrib": "5.0.0",
|
||||
"webpack-bundle-analyzer": "^4.4.0"
|
||||
},
|
||||
|
|
@ -44,4 +41,4 @@
|
|||
"clean": "gulp clean",
|
||||
"test": "gulp test"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
|
|||
);
|
||||
ReactDom.render(element, this.domElement);
|
||||
}
|
||||
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse('1.0');
|
||||
}
|
||||
|
|
@ -144,7 +144,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
|
|||
for (let i = 0; i < elem.attributes.length; i++) {
|
||||
const attr = elem.attributes[i];
|
||||
// Copies all attributes in case of loaded script relies on the tag attributes
|
||||
if(attr.name.toLowerCase() === "onload" ) continue; // onload handled after loading with SPComponentLoader
|
||||
if (attr.name.toLowerCase() === "onload") continue; // onload handled after loading with SPComponentLoader
|
||||
scriptTag.setAttribute(attr.name, attr.value);
|
||||
}
|
||||
|
||||
|
|
@ -178,9 +178,9 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
|
|||
let scriptTags = headTag.getElementsByTagName("script");
|
||||
for (let i = 0; i < scriptTags.length; i++) {
|
||||
const scriptTag = scriptTags[i];
|
||||
if(scriptTag.hasAttribute("pnpname") && scriptTag.attributes["pnpname"].value == this._unqiueId ) {
|
||||
if (scriptTag.hasAttribute("pnpname") && scriptTag.attributes["pnpname"].value == this._unqiueId) {
|
||||
headTag.removeChild(scriptTag);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.properties.spPageContextInfo && !window["_spPageContextInfo"]) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"extends": "@microsoft/sp-tslint-rules/base-tslint.json",
|
||||
"extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
|
||||
"rules": {
|
||||
"class-name": false,
|
||||
"export-name": false,
|
||||
|
|
|
|||
Loading…
Reference in New Issue