Added Indent Guide toggle to the property pane

solutions/ColumnFormatter/CHANGELOG.md

@@ -10,6 +10,7 @@
 - StandardColorsDropdown (for use in wizards)
 - IconsDropdown (for use in wizards)
 - Line Numbers in the editor (toggle in the property pane)
+- Ability to adjust Indent Guides in the editor (toggle in the property pane)
 - Mini Map in the editor (toggle in the property pane)
 
 ### Changed

solutions/ColumnFormatter/src/webparts/columnFormatter/ColumnFormatterWebPart.manifest.json

@@ -25,7 +25,8 @@
       "height": 340,
       "editorTheme": "vs",
       "showLineNumbers": false,
-      "showMiniMap": false
+      "showMiniMap": false,
+      "showIndentGuides": true
     }
   }]
 }

solutions/ColumnFormatter/src/webparts/columnFormatter/ColumnFormatterWebPart.ts

@@ -14,7 +14,7 @@ import { Provider, ProviderProps } from 'react-redux';
 import { createStore, Store } from 'redux';
 
 import { ColumnFormatter } from './components/ColumnFormatter';
-import { chooseTheme, setContext, setHeight, toggleLineNumbers, toggleMiniMap } from './state/Actions';
+import { chooseTheme, setContext, setHeight, toggleIndentGuides, toggleLineNumbers, toggleMiniMap } from './state/Actions';
 import { cfReducer } from './state/Reducers';
 import { IApplicationState } from './state/State';
 
@@ -23,6 +23,7 @@ export interface IColumnFormatterWebPartProps {
   editorTheme: string; //Controls the colors used by the code editor
   showLineNumbers: boolean; //Toggles the visibility of line numbers in the code editor
   showMiniMap: boolean; //Toggles the visibility of the mini map in the code editor
+  showIndentGuides: boolean; //Toggle the visibility of the indent guides in the code editor
 }
 
 export default class ColumnFormatterWebPart extends BaseClientSideWebPart<IColumnFormatterWebPartProps> {
@@ -98,6 +99,9 @@ export default class ColumnFormatterWebPart extends BaseClientSideWebPart<IColum
         case 'showMiniMap':
           this.store.dispatch(toggleMiniMap(newValue));
           break;
+        case 'showIndentGuides':
+          this.store.dispatch(toggleIndentGuides(newValue));
+          break;
       }
     }
   }
@@ -140,6 +144,11 @@ export default class ColumnFormatterWebPart extends BaseClientSideWebPart<IColum
                   onText: strings.PropertyVisibleOn,
                   offText: strings.PropertyVisibleOff
                 }),
+                PropertyPaneToggle('showIndentGuides', {
+                  label: strings.PropertyIndentGuidesLabel,
+                  onText: strings.PropertyVisibleOn,
+                  offText: strings.PropertyVisibleOff
+                }),
                 PropertyPaneToggle('showMiniMap', {
                   label: strings.PropertyMiniMapLabel,
                   onText: strings.PropertyVisibleOn,

solutions/ColumnFormatter/src/webparts/columnFormatter/components/Panels/Code/CodeEditor.tsx

@@ -12,6 +12,7 @@ export interface ICodeEditorProps {
 	readOnly?: boolean;
 	showLineNumbers?: boolean;
 	showMiniMap?: boolean;
+	showIndentGuides?: boolean;
 
 	updateEditorString?: (editorString:string, validationErrors:Array<string>) => void;
 
@@ -41,6 +42,7 @@ class CodeEditor_ extends React.Component<ICodeEditorProps, ICodeEditorState> {
 				onValueChange={this.props.updateEditorString}
 				showLineNumbers={this.props.showLineNumbers}
 				showMiniMap={this.props.showMiniMap}
+				showIndentGuides={this.props.showIndentGuides}
 			/>
 		);
 	}
@@ -55,7 +57,8 @@ function mapStateToProps(state: IApplicationState): ICodeEditorProps{
 		splitPane: state.ui.panes.split,
 		uiHeight: state.ui.height,
 		showLineNumbers: state.code.showLineNumbers,
-		showMiniMap: state.code.showMiniMap
+		showMiniMap: state.code.showMiniMap,
+		showIndentGuides: state.code.showIndentGuides
 	};
 }
 

solutions/ColumnFormatter/src/webparts/columnFormatter/components/Panels/Code/MonacoEditor.tsx

@@ -12,6 +12,7 @@ export interface IMonacoEditorProps {
 	readOnly: boolean;
 	showLineNumbers: boolean;
 	showMiniMap: boolean;
+	showIndentGuides: boolean;
 	onValueChange: (newValue:string, validationErrors:Array<string>) => void;
 }
 
@@ -53,7 +54,7 @@ export class MonacoEditor extends React.Component<IMonacoEditorProps, {}> {
 			theme: this.props.theme,
 			language: 'json',
 			folding: true,
-			renderIndentGuides: true,
+			renderIndentGuides: this.props.showIndentGuides,
 			readOnly: this.props.readOnly,
 			lineNumbers: this.props.showLineNumbers,
 			lineNumbersMinChars: 4,
@@ -76,7 +77,8 @@ export class MonacoEditor extends React.Component<IMonacoEditorProps, {}> {
 			monaco.editor.setTheme(this.props.theme);
 		}
 		if(this.props.showLineNumbers != prevProps.showLineNumbers ||
-			this.props.showMiniMap != prevProps.showMiniMap) {
+			this.props.showMiniMap != prevProps.showMiniMap ||
+			this.props.showIndentGuides != prevProps.showIndentGuides) {
 			this.createEditor();
 		}
 		if(this._editor) {

solutions/ColumnFormatter/src/webparts/columnFormatter/loc/en-us.js

@@ -9,6 +9,7 @@ define([], function() {
     PropertyVisibleOn: "On",
     PropertyVisibleOff: "Off",
     PropertyMiniMapLabel: "Mini Map",
+    PropertyIndentGuidesLabel: 'Indent Guides',
 
     //General
     FeatureUnavailableFromLocalWorkbench: 'This feature is not available from the local workbench',

solutions/ColumnFormatter/src/webparts/columnFormatter/loc/mystrings.d.ts

@@ -8,6 +8,7 @@ declare interface IColumnFormatterWebPartStrings {
   PropertyVisibleOn: string;
   PropertyVisibleOff: string;
   PropertyMiniMapLabel: string;
+  PropertyIndentGuidesLabel: string;
 
   //General
   FeatureUnavailableFromLocalWorkbench: string;

solutions/ColumnFormatter/src/webparts/columnFormatter/state/Actions.ts

@@ -21,6 +21,7 @@ export type ActionTypes =
 	| IChooseThemeAction
 	| IToggleLineNumbersAction
 	| IToggleMiniMapAction
+	| IToggleIndentGuidesAction
 	| IUpdateEditorStringAction
 	| IUpdateFormatterErrorsAction
 	| ILoadedJSOMAction
@@ -48,6 +49,7 @@ export enum typeKeys {
 	CHOOSE_THEME = "CHOOSE_THEME",
 	TOGGLE_LINENUMBERS = "TOGGLE_LINENUMBERS",
 	TOGGLE_MINIMAP = "TOGGLE_MINIMAP",
+	TOGGLE_INDENTGUIDES = "TOGGLE_INDENTGUIDES",
 
 	UPDATE_EDITOR_STRING = "UPDATE_EDITOR_STRING",
 	UPDATE_FORMATTER_ERRORS = "UPDATE_FORMATTER_ERRORS",
@@ -246,6 +248,15 @@ export const toggleMiniMap = (showMiniMap:boolean): IToggleMiniMapAction => ({
 	showMiniMap
 });
 
+export interface IToggleIndentGuidesAction {
+	type: typeKeys.TOGGLE_INDENTGUIDES;
+	showIndentGuides: boolean;
+}
+export const toggleIndentGuides = (showIndentGuides:boolean): IToggleIndentGuidesAction => ({
+	type: typeKeys.TOGGLE_INDENTGUIDES,
+	showIndentGuides
+});
+
 
 export interface IUpdateEditorStringAction {
 	type: typeKeys.UPDATE_EDITOR_STRING;

solutions/ColumnFormatter/src/webparts/columnFormatter/state/Reducers.ts

@@ -51,6 +51,7 @@ export const cfReducer = (state:IApplicationState = initialState, action:ActionT
 			newState.ui.height = action.properties.height;
 			newState.code.editorTheme = action.properties.editorTheme;
 			newState.code.showLineNumbers = action.properties.showLineNumbers;
+			newState.code.showIndentGuides = action.properties.showIndentGuides;
 			break;
 
 		case typeKeys.SET_HEIGHT:
@@ -108,6 +109,9 @@ export const cfReducer = (state:IApplicationState = initialState, action:ActionT
 		case typeKeys.TOGGLE_MINIMAP:
 			newState.code.showMiniMap = action.showMiniMap;
 			break;
+		case typeKeys.TOGGLE_INDENTGUIDES:
+			newState.code.showIndentGuides = action.showIndentGuides;
+			break;
 
 		case typeKeys.UPDATE_EDITOR_STRING:
 			newState.code = UpdateEditorStringReducer(newState.code, action);

solutions/ColumnFormatter/src/webparts/columnFormatter/state/State.ts

@@ -94,6 +94,7 @@ export interface ICode {
 	editorTheme: string;
 	showLineNumbers: boolean;
 	showMiniMap: boolean;
+	showIndentGuides: boolean;
 }
 
 export interface IUserContext {
@@ -150,7 +151,8 @@ export const initialState: IApplicationState = {
 		wizardName: undefined,
 		editorTheme: 'vs',
 		showLineNumbers: false,
-		showMiniMap: false
+		showMiniMap: false,
+		showIndentGuides: false
 	},
 	context: {
 		isOnline: false,