#1165 Split to onprem+online project.

Upgrade to SPFx v1.10.0, Teams tab support

samples/react-script-editor-onprem/README.md

@@ -54,7 +54,7 @@ As an example add the following scripts to the web part in order to show stock t
 
 The web part works by loading each script in a `<script src>` tag sequentially in the order they are specified, then any other `<script>` block is executed.
 
-![site page header configurator web part](./assets/modern-script-editor-wp.gif)
+![Script Editor web part](./assets/modern-script-editor-wp.gif)
 
 If all you want is to add markup on the page, you can do that as well. Adding the following html would show a headline and a list.
 
@@ -105,7 +105,7 @@ If your scripts rely on the classic _spPageContextInfo, you can enable that in t
 
 Solution|Author(s)
 --------|---------
-react-script-editor | Mikael Svenson ([@mikaelsvenson](http://www.twitter.com/mikaelsvenson), [techmikael.com](techmikael.com))
+react-script-editor-onprem | Mikael Svenson ([@mikaelsvenson](http://www.twitter.com/mikaelsvenson), [techmikael.com](techmikael.com))
 
 ## Version history
 
@@ -126,6 +126,7 @@ Version|Date|Comments
 1.0.0.12|April 15th, 2019|Re-fix for pad removal of web part
 1.0.0.13|July 1th, 2019|Downgrade to SPFx v1.4.1 to support SP2019
 1.0.0.14|Oct 13th, 2019|Added resolve to fix pnpm issue. Updated author info.
+1.0.0.15|Mar 16th, 2020|Renamed package file. Linked to SPO only version.
 
 ## 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-onprem/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.0.14",
+        "version": "1.0.0.15",
         "includeClientSideAssets": true,
         "skipFeatureDeployment": false
     },

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

@@ -1,11 +1,12 @@
 {
     "@microsoft/generator-sharepoint": {
-        "libraryName": "pzl-script-editor",
+        "libraryName": "pnp-script-editor",
-        "framework": "react",
+        "version": "1.10.0",
-        "version": "1.4.1",
+        "environment": "spo",
+        "isDomainIsolated": false,
         "libraryId": "1425175f-3ed8-44d2-8fc4-dd1497191294",
         "isCreatingSolution": true,
         "packageManager": "npm",
         "componentType": "webpart"
     }
-}
+}

samples/react-script-editor/README.md

@@ -1,20 +1,22 @@
----
+---
-page_type: sample
+page_type: sample
-products:
+products:
-- office-sp
+- office-sp
-languages:
+languages:
-- javascript
+- javascript
-- typescript
+- typescript
-extensions:
+extensions:
-  contentType: samples
+  contentType: samples
-  technologies:
+  technologies:
-  - SharePoint Framework
+  - SharePoint Framework
-  platforms:
+  platforms:
-  - react
+  - react
-  createdDate: 3/1/2017 12:00:00 AM
+  createdDate: 3/1/2017 12:00:00 AM
----
+---
 # Script editor web part for modern pages built in React
 
+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).
+
 ## 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
@@ -52,7 +54,7 @@ As an example add the following scripts to the web part in order to show stock t
 
 The web part works by loading each script in a `<script src>` tag sequentially in the order they are specified, then any other `<script>` block is executed.
 
-![site page header configurator web part](./assets/modern-script-editor-wp.gif)
+![Script Editor web part](./assets/modern-script-editor-wp.gif)
 
 If all you want is to add markup on the page, you can do that as well. Adding the following html would show a headline and a list.
 
@@ -88,11 +90,45 @@ You may add CSS via style tags or `link` tags.
 </div>
 ```
 
+## 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**
+```html
+<div class="ms-Fabric">
+    <span class="ms-font-su ms-fontColor-themePrimary">
+        Big text in primary theme color
+    </span>
+</div>
+```
+
 ## Support for classic _spPageContextInfo
 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**
+```html
+<div class="ms-Fabric">
+    <span id="ScriptIt" class="ms-font-xxl ms-fontColor-neutralPrimary">
+    </span>
+</div>
+<script>
+var element = document.getElementById("ScriptIt");
+element.innerHTML = "Team: " + _teamsContexInfo.teamName + "<br\>Channel: " + _teamsContexInfo.channelName;
+</script>
+
+```
+
+![Script Editor web part in Teams](./assets/modern-script-editor-wp-teams.gif)
+
 ## Used SharePoint Framework Version
-![drop](https://img.shields.io/badge/drop-1.4.1-green.svg)
+![drop](https://img.shields.io/badge/drop-1.10.0-green.svg)
 
 ## Applies to
 
@@ -124,6 +160,7 @@ Version|Date|Comments
 1.0.0.12|April 15th, 2019|Re-fix for pad removal of web part
 1.0.0.13|July 1th, 2019|Downgrade to SPFx v1.4.1 to support SP2019
 1.0.0.14|Oct 13th, 2019|Added resolve to fix pnpm issue. Updated author info.
+1.0.0.15|Mar 16th, 2020|Upgrade to SPFx v1.10.0. Add support for Teams tab. Renamed package file.
 
 ## 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

@@ -3,12 +3,13 @@
     "version": "2.0",
     "bundles": {
         "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"
+            }]
-                }
-            ]
         }
+    },
+    "localizedResources": {
+        "PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
     }
 }

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

@@ -2,6 +2,6 @@
     "$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",
+    "container": "pnp-script-editor",
     "accessKey": "<!-- ACCESS KEY -->"
 }

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

@@ -3,11 +3,12 @@
     "solution": {
         "name": "Modern Script Editor web part by mikaelsvenson",
         "id": "1425175f-3ed8-44d2-8fc4-dd1497191294",
-        "version": "1.0.0.14",
+        "version": "1.0.0.15",
         "includeClientSideAssets": true,
-        "skipFeatureDeployment": false
+        "skipFeatureDeployment": false,
+        "isDomainIsolated": false
     },
     "paths": {
-        "zippedPackage": "solution/pzl-script-editor.sppkg"
+        "zippedPackage": "solution/pnp-script-editor.sppkg"
     }
 }

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

@@ -1,46 +0,0 @@
-{
-    "$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
-        }
-    }
-}

samples/react-script-editor/gulpfile.js

@@ -6,20 +6,21 @@ const build = require('@microsoft/sp-build-web');
 const bundleAnalyzer = require('webpack-bundle-analyzer');
 
 build.configureWebpack.mergeConfig({
-  additionalConfiguration: (generatedConfiguration) => {
+    additionalConfiguration: (generatedConfiguration) => {
-    const lastDirName = path.basename(__dirname);
+        const lastDirName = path.basename(__dirname);
-    const dropPath = path.join(__dirname, 'temp', 'stats');
+        const dropPath = path.join(__dirname, 'temp', 'stats');
-    generatedConfiguration.plugins.push(new bundleAnalyzer.BundleAnalyzerPlugin({
+        generatedConfiguration.plugins.push(new bundleAnalyzer.BundleAnalyzerPlugin({
-      openAnalyzer: false,
+            openAnalyzer: false,
-      analyzerMode: 'static',
+            analyzerMode: 'static',
-      reportFilename: path.join(dropPath, `${lastDirName}.stats.html`),
+            reportFilename: path.join(dropPath, `${lastDirName}.stats.html`),
-      generateStatsFile: true,
+            generateStatsFile: true,
-      statsFilename: path.join(dropPath, `${lastDirName}.stats.json`),
+            statsFilename: path.join(dropPath, `${lastDirName}.stats.json`),
-      logLevel: 'error'
+            logLevel: 'error'
-    }));
+        }));
 
-    return generatedConfiguration;
+        return generatedConfiguration;
-  }
+    }
 });
 
-build.initialize(gulp);
+build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
+build.initialize(gulp);

samples/react-script-editor/package.json

@@ -1,37 +1,43 @@
 {
-    "name": "pzl-script-editor",
+    "name": "pnp-script-editor",
     "version": "1.0.0",
     "private": true,
+    "main": "lib/index.js",
     "engines": {
         "node": ">=0.10.0"
     },
     "resolutions": {
-        "natives": "1.1.3",
+        "@types/react": "16.8.8"
-        "@types/react": "15.6.6"
     },
     "dependencies": {
-        "@microsoft/load-themed-styles": "^1.4.1",
+        "@microsoft/sp-core-library": "1.10.0",
-        "@microsoft/sp-core-library": "1.4.1",
+        "@microsoft/sp-loader": "1.10.0",
-        "@microsoft/sp-loader": "^1.4.1",
+        "@microsoft/sp-lodash-subset": "1.10.0",
-        "@microsoft/sp-webpart-base": "1.4.1",
+        "@microsoft/sp-property-pane": "1.10.0",
+        "@microsoft/sp-webpart-base": "1.10.0",
+        "@pnp/spfx-controls-react": "1.16.0",
+        "@pnp/spfx-property-controls": "1.17.0",
         "@types/es6-promise": "0.0.33",
-        "@types/react": "15.6.6",
+        "@types/react": "16.8.8",
-        "@types/react-dom": "15.5.6",
+        "@types/react-dom": "16.8.3",
         "@types/webpack-env": "1.13.1",
-        "office-ui-fabric-react": "^5.118.3",
+        "office-ui-fabric-react": "6.189.2",
-        "react": "15.6.2",
+        "react": "16.8.5",
-        "react-dom": "15.6.2"
+        "react-dom": "16.8.5"
     },
     "devDependencies": {
-        "@microsoft/sp-build-web": "1.4.1",
+        "@microsoft/rush-stack-compiler-3.2": "^0.6.3",
-        "@microsoft/sp-module-interfaces": "1.4.1",
+        "@microsoft/rush-stack-compiler-3.3": "0.3.5",
-        "@microsoft/sp-webpart-workbench": "1.4.1",
+        "@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",
         "@types/chai": "3.4.34",
         "@types/mocha": "2.2.38",
-        "@types/prop-types": "ts2.4",
         "ajv": "~5.2.2",
         "gulp": "~3.9.1",
-        "webpack-bundle-analyzer": "^2.13.1"
+        "tslint-microsoft-contrib": "5.0.0",
+        "webpack-bundle-analyzer": "^3.6.1"
     },
     "scripts": {
         "build": "gulp bundle",

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

@@ -3,4 +3,5 @@ export interface IScriptEditorWebPartProps {
   title: string;
   removePadding: boolean;
   spPageContextInfo: boolean;
+  teamsContext: boolean;
 }

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

@@ -1,8 +1,4 @@
-import {
+import { IPropertyPaneField, PropertyPaneFieldType, IPropertyPaneCustomFieldProps } from "@microsoft/sp-property-pane";
-    IPropertyPaneField,
-    PropertyPaneFieldType,
-    IPropertyPaneCustomFieldProps
-} from '@microsoft/sp-webpart-base';
 
 export class PropertyPaneLogo implements IPropertyPaneField<IPropertyPaneCustomFieldProps> {
     public type: PropertyPaneFieldType = PropertyPaneFieldType.Custom;

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

@@ -6,6 +6,7 @@
     "version": "*",
     "supportsFullBleed": true,
     "manifestVersion": 2,
+    "supportedHosts": ["SharePointWebPart", "SharePointFullPage", "TeamsTab"],
     "requiresCustomScript": true,
     "preconfiguredEntries": [{
         "groupId": "3a328f0a-99c4-4b28-95ab-fe0847f657a3",

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

@@ -2,17 +2,26 @@ import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { Version, DisplayMode } from '@microsoft/sp-core-library';
 import { SPComponentLoader } from '@microsoft/sp-loader';
-import {
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
-    BaseClientSideWebPart,
+import { IPropertyPaneConfiguration, IPropertyPaneField, PropertyPaneTextField, PropertyPaneToggle } from "@microsoft/sp-property-pane";
-    IPropertyPaneConfiguration,
-    PropertyPaneToggle,
-    PropertyPaneTextField
-} from '@microsoft/sp-webpart-base';
 import { IScriptEditorProps } from './components/IScriptEditorProps';
 import { IScriptEditorWebPartProps } from './IScriptEditorWebPartProps';
 import PropertyPaneLogo from './PropertyPaneLogo';
 
 export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEditorWebPartProps> {
+    public _propertyPaneHelper;
+
+    constructor() {
+        super();
+        this.scriptUpdate = this.scriptUpdate.bind(this);
+    }
+
+    public scriptUpdate(_property: string, oldVal: string, newVal: string) {
+        this.properties.script = newVal;
+        this._propertyPaneHelper.initialValue = newVal;
+        // this.render();
+    }
+
     public save: (script: string) => void = (script: string) => {
         this.properties.script = script;
         this.render();
@@ -35,6 +44,8 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
                     element = element.parentElement;
                 }
             }
+
+            ReactDom.unmountComponentAtNode(this.domElement);
             this.domElement.innerHTML = this.properties.script;
             this.executeScript(this.domElement);
         } else {
@@ -42,7 +53,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
         }
     }
 
-    private async renderEditor(){
+    private async renderEditor() {
         // Dynamically load the editor pane to reduce overall bundle size
         const editorPopUp = await import(
             /* webpackChunkName: 'scripteditor' */
@@ -53,7 +64,9 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
             {
                 script: this.properties.script,
                 title: this.properties.title,
-                save: this.save
+                propPaneHandle: this.context.propertyPane,
+                save: this.save,
+                key: "pnp" + new Date().getTime()
             }
         );
         ReactDom.render(element, this.domElement);
@@ -63,31 +76,63 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
         return Version.parse('1.0');
     }
 
+    protected async loadPropertyPaneResources(): Promise<void> {
+        //import { PropertyFieldCodeEditor, PropertyFieldCodeEditorLanguages } from '@pnp/spfx-property-controls/lib/PropertyFieldCodeEditor';
+        const editorProp = await import(
+            /* webpackChunkName: 'scripteditor' */
+            '@pnp/spfx-property-controls/lib/PropertyFieldCodeEditor'
+        );
+
+        this._propertyPaneHelper = editorProp.PropertyFieldCodeEditor('scriptCode', {
+            label: 'Edit HTML Code',
+            panelTitle: 'Edit HTML Code',
+            initialValue: this.properties.script,
+            onPropertyChange: this.scriptUpdate,
+            properties: this.properties,
+            disabled: false,
+            key: 'codeEditorFieldId',
+            language: editorProp.PropertyFieldCodeEditorLanguages.HTML
+        });
+    }
+
     protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+        let webPartOptions: IPropertyPaneField<any>[] = [
+            PropertyPaneTextField("title", {
+                label: "Title to show in edit mode",
+                value: this.properties.title
+            }),
+            PropertyPaneToggle("removePadding", {
+                label: "Remove top/bottom padding of web part container",
+                checked: this.properties.removePadding,
+                onText: "Remove padding",
+                offText: "Keep padding"
+            }),
+            PropertyPaneToggle("spPageContextInfo", {
+                label: "Enable classic _spPageContextInfo",
+                checked: this.properties.spPageContextInfo,
+                onText: "Enabled",
+                offText: "Disabled"
+            }),
+            this._propertyPaneHelper
+        ];
+
+        if (this.context.sdks.microsoftTeams) {
+            let config = PropertyPaneToggle("teamsContext", {
+                label: "Enable teams context as _teamsContexInfo",
+                checked: this.properties.teamsContext,
+                onText: "Enabled",
+                offText: "Disabled"
+            });
+            webPartOptions.push(config);
+        }
+        webPartOptions.push(new PropertyPaneLogo());
+
         return {
             pages: [
                 {
                     groups: [
                         {
-                            groupFields: [
+                            groupFields: webPartOptions
-                                PropertyPaneTextField("title", {
-                                    label: "Title to show in edit mode",
-                                    value: this.properties.title
-                                }),
-                                PropertyPaneToggle("removePadding", {
-                                    label: "Remove top/bottom padding of web part container",
-                                    checked: this.properties.removePadding,
-                                    onText: "Remove padding",
-                                    offText: "Keep padding"
-                                }),
-                                PropertyPaneToggle("spPageContextInfo", {
-                                    label: "Enable classic _spPageContextInfo",
-                                    checked: this.properties.spPageContextInfo,
-                                    onText: "Enabled",
-                                    offText: "Disabled"
-                                }),
-                                new PropertyPaneLogo()
-                            ]
                         }
                     ]
                 }
@@ -136,6 +181,10 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
             window["_spPageContextInfo"] = this.context.pageContext.legacyPageContext;
         }
 
+        if (this.properties.teamsContext && !window["_teamsContexInfo"]) {
+            window["_teamsContexInfo"] = this.context.sdks.microsoftTeams.context;
+        }
+
         (<any>window).ScriptGlobal = {};
 
         // main section of function
@@ -173,7 +222,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
             try {
                 let scriptUrl = urls[i];
                 const prefix = scriptUrl.indexOf('?') === -1 ? '?' : '&';
-                scriptUrl += prefix + 'cow=' + new Date().getTime();
+                scriptUrl += prefix + 'pnp=' + new Date().getTime();
                 await SPComponentLoader.loadScript(scriptUrl, { globalExportsName: "ScriptGlobal" });
             } catch (error) {
                 if (console.error) {

samples/react-script-editor/src/webparts/scriptEditor/components/IScriptEditorProps.ts

@@ -1,5 +1,7 @@
+import { IPropertyPaneAccessor } from "@microsoft/sp-webpart-base";
 export interface IScriptEditorProps {
-  script: string;
+    script: string;
-  title: string;
+    title: string;
-  save(script: string): void;
+    propPaneHandle: IPropertyPaneAccessor;
+    save(script: string): void;
 }

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

@@ -1,13 +1 @@
-@import '~office-ui-fabric-react/dist/sass/References.scss';
+@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 +1,35 @@
 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 { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
-import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
+// const telemetry = PnPTelemetry.getInstance();
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
+// telemetry.optOut();
-import { loadStyles } from '@microsoft/load-themed-styles';
-require('./overrides.css');
 
 export default class ScriptEditor extends React.Component<IScriptEditorProps, any> {
-    constructor() {
+    constructor(props: IScriptEditorProps, state: any) {
-        super();
+        super(props);
 
         this._showDialog = this._showDialog.bind(this);
-        this._closeDialog = this._closeDialog.bind(this);
+        this.state = {};
-        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 });
+        this.props.propPaneHandle.open();
-    }
-
-    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='ms-Fabric'>
-                <div className={styles.scriptEditor}>
+                <Placeholder iconName='JS'
-                    <div className={styles.container}>
+                    iconText={this.props.title}
-                        <div className={`ms-Grid-row pzl-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
+                    description='Please configure the web part'
-                            <div className="ms-Grid-col ms-lg10 ms-xl8 ms-xlPush2 ms-lgPush1">
+                    buttonLabel='Edit markup'
-                                <span className="ms-font-xl ms-fontColor-white">{this.props.title}</span>
+                    onConfigure={this._showDialog} />
-                                <p className="ms-font-l ms-fontColor-white"></p>
+                {viewMode}
-                                <DefaultButton description='Opens the snippet dialog' onClick={this._showDialog}>Edit snippet</DefaultButton>
+            </div>);
-                            </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/tslint.json

@@ -1,3 +1,30 @@
 {
-    "rulesDirectory": "./config"
+    "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
-}
+    "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-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,
+      "variable-name": false,
+      "whitespace": false
+    }
+  }