Merge remote-tracking branch 'refs/remotes/origin/dev'

README.md

@@ -39,6 +39,13 @@ Enjoy a simple, yet powerfull html-based templating engine for rendering your re
 For advanced users, more than 150 Handlebars block helpers are available by default within the user defined template. For a list of all block helpers, see [handlebars-helpers](https://github.com/helpers/handlebars-helpers#helpers) 
 <br>
 
+### Built-in template editor
+
+Edit your Handlebars template directly within the toolpane using a built-in [code editor](https://ace.c9.io/) which provides code folding, syntax highlighting, line wrapping, indentation and many more features to the tip of your fingers.
+
+<img src="https://github.com/spplante/react-content-query/blob/master/Misc/editor.gif" />
+<br>
+
 ## Getting Started
 
 ### Adding the WebPart to your page

config/write-manifests.json

@@ -1,3 +1,3 @@
 {
-  "cdnBasePath": "https://publiccdn.sharepointonline.com/spptechnologies.sharepoint.com/110700492eeea162ee5bad0f35b1f0061ded8bf436ce0199efe2a4d24109e1c0df1ec594/react-content-query-1.0.0"
+  "cdnBasePath": "https://publiccdn.sharepointonline.com/spptechnologies.sharepoint.com/110700492eeea162ee5bad0f35b1f0061ded8bf436ce0199efe2a4d24109e1c0df1ec594/react-content-query-1.0.1"
 }

npm-shrinkwrap.json

@@ -1200,6 +1200,11 @@
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-0.6.0.tgz",
       "dev": true
     },
+    "brace": {
+      "version": "0.10.0",
+      "from": "brace@>=0.10.0 <0.11.0",
+      "resolved": "https://registry.npmjs.org/brace/-/brace-0.10.0.tgz"
+    },
     "brace-expansion": {
       "version": "1.1.6",
       "from": "brace-expansion@>=1.0.0 <2.0.0",
@@ -4946,8 +4951,7 @@
     "lodash.isequal": {
       "version": "4.5.0",
       "from": "lodash.isequal@>=4.0.0 <5.0.0",
-      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz"
     },
     "lodash.isobject": {
       "version": "2.4.1",
@@ -6269,6 +6273,11 @@
       "from": "promise@>=7.1.1 <8.0.0",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.1.1.tgz"
     },
+    "prop-types": {
+      "version": "15.5.8",
+      "from": "prop-types@>=15.5.8 <16.0.0",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.5.8.tgz"
+    },
     "proxy-addr": {
       "version": "1.1.3",
       "from": "proxy-addr@>=1.1.3 <1.2.0",
@@ -6381,6 +6390,18 @@
       "from": "react@15.4.2",
       "resolved": "https://registry.npmjs.org/react/-/react-15.4.2.tgz"
     },
+    "react-ace": {
+      "version": "4.2.1",
+      "from": "react-ace@>=4.2.1 <5.0.0",
+      "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-4.2.1.tgz",
+      "dependencies": {
+        "brace": {
+          "version": "0.9.1",
+          "from": "brace@>=0.9.1 <0.10.0",
+          "resolved": "https://registry.npmjs.org/brace/-/brace-0.9.1.tgz"
+        }
+      }
+    },
     "react-dom": {
       "version": "15.4.2",
       "from": "react-dom@15.4.2",
@@ -7842,6 +7863,11 @@
       "from": "void-elements@>=2.0.0 <3.0.0",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz"
     },
+    "w3c-blob": {
+      "version": "0.0.1",
+      "from": "w3c-blob@0.0.1",
+      "resolved": "https://registry.npmjs.org/w3c-blob/-/w3c-blob-0.0.1.tgz"
+    },
     "watchpack": {
       "version": "0.2.9",
       "from": "watchpack@>=0.2.1 <0.3.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-content-query",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "engines": {
     "node": ">=0.10.0"
@@ -16,11 +16,13 @@
     "@types/react-addons-update": "0.14.14",
     "@types/react-dom": "0.14.18",
     "@types/webpack-env": ">=1.12.1 <1.14.0",
+    "brace": "^0.10.0",
     "handlebars": "^4.0.6",
     "handlebars-helpers": "^0.8.2",
     "moment": "^2.18.1",
     "office-ui-fabric-react": "1.14.3",
     "react": "15.4.2",
+    "react-ace": "^4.2.1",
     "react-dom": "15.4.2"
   },
   "devDependencies": {

src/controls/PropertyPaneTextDialog/components/TextDialog/AceEditor.module.scss

@@ -0,0 +1,3 @@
+.ace_editor.ace_autocomplete {
+  z-index: 2000000 !important;
+} 

src/controls/PropertyPaneTextDialog/components/TextDialog/TextDialog.tsx

@@ -4,7 +4,14 @@ import { Button, ButtonType, Label } 			from 'office-ui-fabric-react';
 import { TextField } 							from 'office-ui-fabric-react';
 import { ITextDialogProps }                  	from './ITextDialogProps';
 import { ITextDialogState }                  	from './ITextDialogState';
+import AceEditor 								from 'react-ace';
 import styles                                   from './TextDialog.module.scss';
+import './AceEditor.module.scss';
+
+import 'brace';
+import 'brace/mode/html';
+import 'brace/theme/monokai';
+import 'brace/ext/language_tools';
 
 export class TextDialog extends React.Component<ITextDialogProps, ITextDialogState> {
 
@@ -83,11 +90,16 @@ export class TextDialog extends React.Component<ITextDialogProps, ITextDialogSta
 						isBlocking={ true }
 						containerClassName={ 'ms-dialogMainOverride ' + styles.textDialog }>
 				
-					<TextField placeholder={ this.props.strings.dialogTextBoxPlaceholder }
-							   value={ this.state.dialogText }
-							   multiline rows={ 20 }
-							   resizable={ true }
-							   onChanged={ this.onDialogTextChanged.bind(this) } />
+					<AceEditor
+						width="100%"
+						mode="html"
+						theme="monokai"
+						enableLiveAutocompletion={ true }
+						showPrintMargin={ false }
+						onChange={ this.onDialogTextChanged.bind(this) }
+						value={ this.state.dialogText }
+						name="CodeEditor"
+						editorProps={{$blockScrolling: 0}} />
 
 					<DialogFooter>
 						<Button buttonType={ ButtonType.primary } onClick={ this.saveDialog.bind(this) }>{ this.props.strings.saveButtonText }</Button>

src/webparts/contentQuery/ContentQueryWebPart.manifest.json

@@ -4,7 +4,7 @@
   "id": "46edf08f-95c7-4ca7-9146-6471f9f471be",
   "alias": "ContentQueryWebPart",
   "componentType": "WebPart",
-  "version": "0.0.1",
+  "version": "1.0.1",
   "manifestVersion": 2,
 
   "preconfiguredEntries": [{
@@ -13,7 +13,7 @@
     "title": { "default": "React Content Query WebPart" },
     "description": { 
       "default": "A react content by query WebPart for querying items within a site and easily displaying them using a simple yet powerfull HandleBars templating engine.",
-      "fr-FR": "Un composante React permettant d'effectuer des requêtes sur les items et de facilement afficher les résultat à l'aide de gabarits HandleBars  fournit par l'utilisateur"
+      "fr-FR": "Une composante React permettant d'effectuer des requêtes sur les items et de facilement afficher les résultat à l'aide de gabarits HandleBars fournit par l'utilisateur"
     },
     "officeFabricIconFontName": "Page",
     "properties": {

src/webparts/contentQuery/ContentQueryWebPart.ts

@@ -55,7 +55,7 @@ export default class ContentQueryWebPart extends BaseClientSideWebPart<IContentQ
    * Returns the WebPart's version
    ***************************************************************************/
   protected get dataVersion(): Version {
-    return Version.parse('1.0');
+    return Version.parse('1.0.1');
   }