Script editor minor change and docs (#414)

* Added property to set a title property visible in Edit mode.

* Updated documentation with settings for non-script sites and tenant wide deployment

samples/react-script-editor/README.md

@@ -69,6 +69,7 @@ Version|Date|Comments
 1.0.0.1|August 8th, 2017|Updated SPFx version and CSS loading
 1.0.0.2|October 4th, 2017|Updated SPFx version, bundle Office UI Fabric and CSS in webpart
 1.0.0.3|January 10th, 2018|Updated SPFx version, added remove padding property and refactoring
+1.0.0.4|February 14th, 2018|Added title property for edit mode and documentation for enabling the web part on Group sites / tenant wide
 
 ## 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.**
@@ -93,6 +94,22 @@ Version|Date|Comments
 	* E.g.: https://<tenant>.sharepoint.com/sites/AppCatalog/AppCatalog
 * Add the web part to a site collection, and test it on a page
 
+### 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 availble. 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 availble to absolutely all sites you need apply the _Deploy to non-script sites / modern team site_ change as well.
+
 ## Features
 This web part illustrates the following concepts on top of the SharePoint Framework:
 

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

@@ -2,7 +2,7 @@
   "solution": {
     "name": "Modern Script Editor web part by Puzzlepart",
     "id": "1425175f-3ed8-44d2-8fc4-dd1497191294",
-    "version": "1.0.0.3",
+    "version": "1.0.0.4",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": false
   },

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

@@ -1,4 +1,5 @@
 export interface IScriptEditorWebPartProps {
   script: string;
+  title: string;
   removePadding: boolean;
 }

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

@@ -21,6 +21,7 @@
             "officeFabricIconFontName": "JS",
             "properties": {
                 "script": "",
+                "title" : "The Modern Script Editor web part!",
                 "removePadding": false
             }
         }

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

@@ -5,12 +5,13 @@ import { SPComponentLoader } from '@microsoft/sp-loader';
 import {
     BaseClientSideWebPart,
     IPropertyPaneConfiguration,
-    PropertyPaneCustomField
+    PropertyPaneCustomField,
+    PropertyPaneToggle,
+    PropertyPaneTextField
 } from '@microsoft/sp-webpart-base';
 import ScriptEditor from './components/ScriptEditor';
 import { IScriptEditorProps } from './components/IScriptEditorProps';
 import { IScriptEditorWebPartProps } from './IScriptEditorWebPartProps';
-import { PropertyPaneToggle } from '@microsoft/sp-webpart-base/lib/propertyPane/propertyPaneFields/propertyPaneToggle/PropertyPaneToggle';
 
 export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEditorWebPartProps> {
     public save: (script: string) => void = (script: string) => {
@@ -23,6 +24,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
             ScriptEditor,
             {
                 script: this.properties.script,
+                title: this.properties.title,
                 save: this.save
             }
         );
@@ -61,6 +63,10 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
                     groups: [
                         {
                             groupFields: [
+                                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,

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

@@ -1,4 +1,5 @@
 export interface IScriptEditorProps {
   script: string;
+  title: string;
   save(script: string): void;
 }

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

@@ -57,7 +57,7 @@ export default class ScriptEditor extends React.Component<IScriptEditorProps, an
                     <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">The Modern Script Editor web part!</span>
+                                <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>