honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Updated script editor webpart (#603) 

* Script editor update (#598)

* Updated to SPFx 1.5.1

* Fix remove padding issue.

* Moving import within container

* Added dynamic loaded edit module

* Made editor pane external and dynamic

* Updated readme message.

* Remove dependency for office ui fabric react

* Use a supported workaround to get the script root.
This commit is contained in:
Mikael Svenson 2018-08-21 12:54:26 +02:00 committed by GitHub
parent 6b6bc905a5
commit 734b83ae59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 5907 additions and 3226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
samples/react-script-editor/.yo-rc.json
View File

@ -1,8 +1,11 @@
{
"@microsoft/generator-sharepoint": {
"libraryName": "pzl-script-editor",
"framework": "react",
"version": "1.0.0",
"libraryId": "1425175f-3ed8-44d2-8fc4-dd1497191294"
}
"@microsoft/generator-sharepoint": {
"libraryName": "pzl-script-editor",
"framework": "react",
"version": "1.5.1",
"libraryId": "1425175f-3ed8-44d2-8fc4-dd1497191294",
"isCreatingSolution": true,
"packageManager": "npm",
"componentType": "webpart"
}
}

1
samples/react-script-editor/README.md
View File

@ -99,6 +99,7 @@ Version|Date|Comments
1.0.0.5|March 8th, 2018|Added support for loading scripts which are AMD/UMD modules. Added support for classic _spPageContextInfo. Refactoring.
1.0.0.6|March 26th, 2018|Fixed so that AMD modules don't detect `define`, and load as non-modules.
1.0.0.7|May 23rd, 2018|Added supportsFullBleed to manifest.
1.0.0.8|May 23rd, 2018|Updated SPFx to v1.5.1, made editor load dynamically to reduce runtime bundle size, fixed white space issue.
## Disclaimer
**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.**

20
samples/react-script-editor/config/config.json
View File

@ -1,14 +1,14 @@
{
"$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
"version": "2.0",
"bundles": {
"script-editor-bundle": {
"components": [
{
"entrypoint": "./lib/webparts/scriptEditor/ScriptEditorWebPart.js",
"manifest": "./src/webparts/scriptEditor/ScriptEditorWebPart.manifest.json"
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
"version": "2.0",
"bundles": {
"script-editor-bundle": {
"components": [
{
"entrypoint": "./lib/webparts/scriptEditor/ScriptEditorWebPart.js",
"manifest": "./src/webparts/scriptEditor/ScriptEditorWebPart.manifest.json"
}
]
}
]
}
}
}

3
samples/react-script-editor/config/copy-assets.json
View File

@ -1,3 +1,4 @@
{
"deployCdnPath": "temp/deploy"
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
"deployCdnPath": "temp/deploy"
}

9
samples/react-script-editor/config/deploy-azure-storage.json
View File

@ -1,6 +1,7 @@
{
"workingDir": "./temp/deploy/",
"account": "<!-- STORAGE ACCOUNT NAME -->",
"container": "pzl-script-editor",
"accessKey": "<!-- ACCESS KEY -->"
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
"workingDir": "./temp/deploy/",
"account": "<!-- STORAGE ACCOUNT NAME -->",
"container": "pzl-script-editor",
"accessKey": "<!-- ACCESS KEY -->"
}

21
samples/react-script-editor/config/package-solution.json
View File

@ -1,12 +1,13 @@
{
"solution": {
"name": "Modern Script Editor web part by Puzzlepart",
"id": "1425175f-3ed8-44d2-8fc4-dd1497191294",
"version": "1.0.0.7",
"includeClientSideAssets": true,
"skipFeatureDeployment": false
},
"paths": {
"zippedPackage": "solution/pzl-script-editor.sppkg"
}
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "Modern Script Editor web part by Puzzlepart",
"id": "1425175f-3ed8-44d2-8fc4-dd1497191294",
"version": "1.0.0.8",
"includeClientSideAssets": true,
"skipFeatureDeployment": false
},
"paths": {
"zippedPackage": "solution/pzl-script-editor.sppkg"
}
}

15
samples/react-script-editor/config/serve.json
View File

@ -1,9 +1,10 @@
{
"port": 4321,
"initialPage": "https://localhost:5432/workbench",
"https": true,
"api": {
"port": 5432,
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
}
"$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/"
}
}

85
samples/react-script-editor/config/tslint.json
View File

@ -1,45 +1,46 @@
{
// Display errors as warnings
"displayAsWarning": true,
// The TSLint task may have been configured with several custom lint rules
// before this config file is read (for example lint rules from the tslint-microsoft-contrib
// project). If true, this flag will deactivate any of these rules.
"removeExistingRules": true,
// When true, the TSLint task is configured with some default TSLint "rules.":
"useDefaultConfigAsBase": false,
// Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
// which are active, other than the list of rules below.
"lintConfig": {
// Opt-in to Lint rules which help to eliminate bugs in JavaScript
"rules": {
"class-name": false,
"export-name": false,
"forin": false,
"label-position": false,
"member-access": true,
"no-arg": false,
"no-console": false,
"no-construct": false,
"no-duplicate-case": true,
"no-duplicate-variable": true,
"no-eval": false,
"no-function-expression": true,
"no-internal-module": true,
"no-shadowed-variable": true,
"no-switch-case-fall-through": true,
"no-unnecessary-semicolons": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-with-statement": true,
"semicolon": true,
"trailing-comma": false,
"typedef": false,
"typedef-whitespace": false,
"use-named-parameter": true,
"valid-typeof": true,
"variable-name": false,
"whitespace": false,
"prefer-const": true
"$schema": "https://developer.microsoft.com/json-schemas/core-build/tslint.schema.json",
// Display errors as warnings
"displayAsWarning": true,
// The TSLint task may have been configured with several custom lint rules
// before this config file is read (for example lint rules from the tslint-microsoft-contrib
// project). If true, this flag will deactivate any of these rules.
"removeExistingRules": true,
// When true, the TSLint task is configured with some default TSLint "rules.":
"useDefaultConfigAsBase": false,
// Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
// which are active, other than the list of rules below.
"lintConfig": {
// Opt-in to Lint rules which help to eliminate bugs in JavaScript
"rules": {
"class-name": false,
"export-name": false,
"forin": false,
"label-position": false,
"member-access": true,
"no-arg": false,
"no-console": false,
"no-construct": false,
"no-duplicate-case": true,
"no-duplicate-variable": true,
"no-eval": false,
"no-function-expression": true,
"no-internal-module": true,
"no-shadowed-variable": true,
"no-switch-case-fall-through": true,
"no-unnecessary-semicolons": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-with-statement": true,
"semicolon": true,
"trailing-comma": false,
"typedef": false,
"typedef-whitespace": false,
"use-named-parameter": true,
"valid-typeof": true,
"variable-name": false,
"whitespace": false,
"prefer-const": true
}
}
}
}

2
samples/react-script-editor/config/write-manifests.json
View File

@ -1,4 +1,4 @@
{
"$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json",
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": "<!-- PATH TO CDN -->"
}

28
samples/react-script-editor/gulpfile.js vendored
View File

@ -1,6 +1,34 @@
'use strict';
const gulp = require('gulp');
const path = require('path');
const build = require('@microsoft/sp-build-web');
const bundleAnalyzer = require('webpack-bundle-analyzer');
build.configureWebpack.mergeConfig({
additionalConfiguration: (generatedConfiguration) => {
const lastDirName = path.basename(__dirname);
const dropPath = path.join(__dirname, 'temp', 'stats');
generatedConfiguration.plugins.push(new bundleAnalyzer.BundleAnalyzerPlugin({
openAnalyzer: false,
analyzerMode: 'static',
reportFilename: path.join(dropPath, `${lastDirName}.stats.html`),
generateStatsFile: true,
statsFilename: path.join(dropPath, `${lastDirName}.stats.json`),
logLevel: 'error'
}));
return generatedConfiguration;
}
});
let copyDynamic = build.subTask('copy-dynamic-load-files', function (gulp, buildOptions, done) {
gulp.src('./node_modules/sharepoint-modern-script-editor-propertypane/bundles/editor-pop-up.min.js')
.pipe(gulp.dest('./temp/deploy'))
.pipe(gulp.dest('./dist'));
done();
});
build.rig.addPostBuildTask(copyDynamic);
build.initialize(gulp);

8721
samples/react-script-editor/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

24
samples/react-script-editor/package.json
View File

@ -6,23 +6,25 @@
"node": ">=0.10.0"
},
"dependencies": {
"@microsoft/sp-core-library": "~1.4.1",
"@microsoft/sp-webpart-base": "~1.4.1",
"@microsoft/sp-core-library": "1.5.1",
"@microsoft/sp-webpart-base": "1.5.1",
"@types/react": "15.6.6",
"@types/react-dom": "15.5.6",
"@types/webpack-env": ">=1.12.1 <1.14.0",
"office-ui-fabric-react": "^4.40.1",
"@types/webpack-env": "1.13.1",
"react": "15.6.2",
"react-dom": "15.6.2"
"react-dom": "15.6.2",
"@types/es6-promise": "0.0.33"
},
"devDependencies": {
"@microsoft/sp-build-web": "~1.4.1",
"@microsoft/sp-module-interfaces": "~1.4.1",
"@microsoft/sp-webpart-workbench": "~1.4.1",
"@microsoft/sp-build-web": "1.5.1",
"@microsoft/sp-module-interfaces": "1.5.1",
"@microsoft/sp-webpart-workbench": "1.5.1",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2",
"gulp": "~3.9.1",
"@types/chai": ">=3.4.34 <3.6.0",
"@types/mocha": ">=2.2.33 <2.6.0",
"ajv": "~5.2.2"
"sharepoint-modern-script-editor-propertypane": "^1.0.5",
"webpack-bundle-analyzer": "^2.13.1"
},
"scripts": {
"build": "gulp bundle",

BIN
samples/react-script-editor/src/webparts/scriptEditor/1x1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 B

27
samples/react-script-editor/src/webparts/scriptEditor/PropertyPaneLogo.ts Normal file
View File

@ -0,0 +1,27 @@
import {
IPropertyPaneField,
PropertyPaneFieldType,
IPropertyPaneCustomFieldProps
} from '@microsoft/sp-webpart-base';
export class PropertyPaneLogo implements IPropertyPaneField<IPropertyPaneCustomFieldProps> {
public type: PropertyPaneFieldType = PropertyPaneFieldType.Custom;
public targetProperty: string;
public properties: IPropertyPaneCustomFieldProps;
constructor() {
this.properties = {
key: "Logo",
onRender: this.onRender.bind(this)
};
}
private onRender(elem: HTMLElement): void {
elem.innerHTML = `
<div style="margin-top: 30px">
<div style="float:right">Author: <a href="mailto:mikael.svenson@puzzlepart.com" tabindex="-1">Mikael Svenson</a></div>
<div style="float:right"><a href="https://www.puzzlepart.com/" target="_blank"><img src="//www.puzzlepart.com/wp-content/uploads/2017/08/Pzl-LogoType-200.png" onerror="this.style.display = \'none\'";"></a></div>
</div>`;
}
}
export default PropertyPaneLogo;

6
samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.manifest.json
View File

@ -1,5 +1,5 @@
{
"$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "3a328f0a-99c4-4b28-95ab-fe0847f657a3",
"alias": "ScriptEditorWebPart",
"componentType": "WebPart",
@ -22,9 +22,9 @@
"officeFabricIconFontName": "JS",
"properties": {
"script": "",
"title" : "The Modern Script Editor web part!",
"title": "The Modern Script Editor web part!",
"removePadding": false,
"spPageContextInfo" : false
"spPageContextInfo": false
}
}
]

43
samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.ts
View File

@ -5,13 +5,12 @@ import { SPComponentLoader } from '@microsoft/sp-loader';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneCustomField,
PropertyPaneToggle,
PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import ScriptEditor from './components/ScriptEditor';
import { IScriptEditorProps } from './components/IScriptEditorProps';
import { IScriptEditorWebPartProps } from './IScriptEditorWebPartProps';
import PropertyPaneLogo from './PropertyPaneLogo';
export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEditorWebPartProps> {
public save: (script: string) => void = (script: string) => {
@ -19,31 +18,46 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
this.render();
}
public render(): void {
const element: React.ReactElement<IScriptEditorProps> = React.createElement(
ScriptEditor,
{
script: this.properties.script,
title: this.properties.title,
save: this.save
}
);
public async render(): Promise<void> {
if (this.displayMode == DisplayMode.Read) {
if (this.properties.removePadding) {
this.domElement.parentElement.parentElement.parentElement.style.paddingTop = "0";
this.domElement.parentElement.parentElement.parentElement.style.paddingBottom = "0";
this.domElement.parentElement.parentElement.parentElement.style.marginTop = "0";
this.domElement.parentElement.parentElement.parentElement.style.marginBottom = "0";
} else {
this.domElement.parentElement.parentElement.parentElement.style.paddingTop = "";
this.domElement.parentElement.parentElement.parentElement.style.paddingBottom = "";
this.domElement.parentElement.parentElement.parentElement.style.marginTop = "";
this.domElement.parentElement.parentElement.parentElement.style.marginBottom = "";
}
this.domElement.innerHTML = this.properties.script;
this.executeScript(this.domElement);
} else {
// Dynamically load the editor pane to reduce overall bundle size
const editorPopUp: any = await SPComponentLoader.loadScript(this.getScriptRoot() + '/editor-pop-up.min.js', { globalExportsName: "EditorPopUp" });
const element: React.ReactElement<IScriptEditorProps> = React.createElement(
editorPopUp.default,
{
script: this.properties.script,
title: this.properties.title,
save: this.save
}
);
ReactDom.render(element, this.domElement);
}
}
/**
* Use a dummy bundled image to get the path from where the bundle is served.
*/
private getScriptRoot(): string {
const runtimePath: string = require('./1x1.png');
const scriptRoot = runtimePath.substr(0, runtimePath.lastIndexOf("/"));
return scriptRoot;
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
@ -79,10 +93,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
onText: "Enabled",
offText: "Disabled"
}),
PropertyPaneCustomField({
onRender: this.renderLogo,
key: "logo"
})
new PropertyPaneLogo()
]
}
]

13
samples/react-script-editor/src/webparts/scriptEditor/components/ScriptEditor.module.scss
View File

@ -1,13 +0,0 @@
@import '~office-ui-fabric-react/dist/sass/References.scss';
.scriptEditor {
.container {
max-width: 700px;
margin: 0px auto;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.row {
padding: 20px;
}
}

85
samples/react-script-editor/src/webparts/scriptEditor/components/ScriptEditor.tsx
View File

@ -1,85 +0,0 @@
import * as React from 'react';
import styles from './ScriptEditor.module.scss';
import { IScriptEditorProps } from './IScriptEditorProps';
import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { loadStyles } from '@microsoft/load-themed-styles';
require('./overrides.css');
export default class ScriptEditor extends React.Component<IScriptEditorProps, any> {
constructor() {
super();
this._showDialog = this._showDialog.bind(this);
this._closeDialog = this._closeDialog.bind(this);
this._cancelDialog = this._cancelDialog.bind(this);
this._onScriptEditorTextChanged = this._onScriptEditorTextChanged.bind(this);
const uiFabricCSS: string = `
.pzl-bgColor-themeDark, .pzl-bgColor-themeDark--hover:hover {
background-color: "[theme:themeDark, default:#005a9e]";
}
`;
loadStyles(uiFabricCSS);
this.state = {
showDialog: false
};
}
public componentDidMount(): void {
this.setState({ script: this.props.script, loaded: this.props.script });
}
private _showDialog() {
this.setState({ showDialog: true });
}
private _closeDialog() {
this.setState({ showDialog: false });
this.props.save(this.state.script);
}
private _cancelDialog() {
this.props.save(this.state.loaded);
this.setState({ showDialog: false, script: this.state.loaded });
}
private _onScriptEditorTextChanged(text: string) {
this.setState({ script: text });
}
public render(): React.ReactElement<IScriptEditorProps> {
const viewMode = <span dangerouslySetInnerHTML={{ __html: this.state.script }}></span>;
return (
<div >
<div className={styles.scriptEditor}>
<div className={styles.container}>
<div className={`ms-Grid-row pzl-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
<div className="ms-Grid-col ms-lg10 ms-xl8 ms-xlPush2 ms-lgPush1">
<span className="ms-font-xl ms-fontColor-white">{this.props.title}</span>
<p className="ms-font-l ms-fontColor-white"></p>
<DefaultButton description='Opens the snippet dialog' onClick={this._showDialog}>Edit snippet</DefaultButton>
</div>
</div>
</div>
</div>
<Dialog
isOpen={this.state.showDialog}
type={DialogType.normal}
onDismiss={this._closeDialog}
title='Embed'
subText='Paste your script, markup or embed code below. Note that scripts will only run in view mode.'
isBlocking={true}
className={'ScriptPart'}
>
<TextField multiline rows={15} onChanged={this._onScriptEditorTextChanged} value={this.state.script} />
<DialogFooter>
<PrimaryButton onClick={this._closeDialog}>Save</PrimaryButton>
<DefaultButton onClick={this._cancelDialog}>Cancel</DefaultButton>
</DialogFooter>
{viewMode}
</Dialog>
</div >);
}
}

4
samples/react-script-editor/src/webparts/scriptEditor/components/overrides.css
View File

@ -1,4 +0,0 @@
.ScriptPart .ms-Dialog-main {
width: 65%;
max-width: 65%;
}

3
samples/react-script-editor/tsconfig.json
View File

@ -2,12 +2,13 @@
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
"module": "commonjs",
"module": "esnext",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"moduleResolution": "node",
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"

BIN
samples/react-script-editor/upgrade-report.md Normal file
View File

Binary file not shown.