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.

samples/react-script-editor/.yo-rc.json

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

samples/react-script-editor/README.md

@@ -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.**

samples/react-script-editor/config/config.json

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

samples/react-script-editor/config/copy-assets.json

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

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

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

samples/react-script-editor/config/package-solution.json

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

samples/react-script-editor/config/serve.json

@@ -1,9 +1,10 @@
 {
-  "port": 4321,
+    "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
-  "initialPage": "https://localhost:5432/workbench",
+    "port": 4321,
-  "https": true,
+    "initialPage": "https://localhost:5432/workbench",
-  "api": {
+    "https": true,
-    "port": 5432,
+    "api": {
-    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
+        "port": 5432,
-  }
+        "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
-}
+    }
+}

samples/react-script-editor/config/tslint.json

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

samples/react-script-editor/config/write-manifests.json

@@ -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 -->"
 }

samples/react-script-editor/gulpfile.js

@@ -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.initialize(gulp);
+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);

samples/react-script-editor/package.json

@@ -6,23 +6,25 @@
     "node": ">=0.10.0"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "~1.4.1",
+    "@microsoft/sp-core-library": "1.5.1",
-    "@microsoft/sp-webpart-base": "~1.4.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",
+    "@types/webpack-env": "1.13.1",
-    "office-ui-fabric-react": "^4.40.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-build-web": "1.5.1",
-    "@microsoft/sp-module-interfaces": "~1.4.1",
+    "@microsoft/sp-module-interfaces": "1.5.1",
-    "@microsoft/sp-webpart-workbench": "~1.4.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",
+    "sharepoint-modern-script-editor-propertypane": "^1.0.5",
-    "@types/mocha": ">=2.2.33 <2.6.0",
+    "webpack-bundle-analyzer": "^2.13.1"
-    "ajv": "~5.2.2"
   },
   "scripts": {
     "build": "gulp bundle",

samples/react-script-editor/src/webparts/scriptEditor/PropertyPaneLogo.ts

@@ -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;

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

@@ -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
             }
         }
     ]

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

@@ -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 {
+    public async render(): Promise<void> {
-        const element: React.ReactElement<IScriptEditorProps> = React.createElement(
-            ScriptEditor,
-            {
-                script: this.properties.script,
-                title: this.properties.title,
-                save: this.save
-            }
-        );
-
         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({
+                                new PropertyPaneLogo()
-                                    onRender: this.renderLogo,
-                                    key: "logo"
-                                })
                             ]
                         }
                     ]

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

@@ -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;
-  }
-}

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

@@ -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 >);
-    }
-}

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

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

samples/react-script-editor/tsconfig.json

@@ -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"