Add prettier to 3 pane mode also

src/components/ContentWrap.jsx

@@ -623,6 +623,9 @@ export default class ContentWrap extends Component {
 	editorFocusHandler(editor) {
 		this.props.onEditorFocus(editor);
 	}
+	prettifyBtnClickHandler(codeType) {
+		this.props.onPrettifyBtnClick(codeType);
+	}
 
 	render() {
 		// log('contentwrap update');
@@ -683,6 +686,17 @@ export default class ContentWrap extends Component {
 								</select>
 							</label>
 							<div class="code-wrap__header-right-options">
+								{this.props.currentItem.htmlMode === HtmlModes.HTML ? (
+									<a
+										class="code-wrap__header-btn"
+										title="Format code"
+										onClick={this.prettifyBtnClickHandler.bind(this, 'html')}
+									>
+										<svg>
+											<use xlinkHref="#code-brace-icon" />
+										</svg>
+									</a>
+								) : null}
 								<a
 									class="js-code-collapse-btn  code-wrap__header-btn  code-wrap__collapse-btn"
 									title="Toggle code pane"
@@ -751,6 +765,15 @@ export default class ContentWrap extends Component {
 										<use xlinkHref="#settings-icon" />
 									</svg>
 								</a>
+								<a
+									class="code-wrap__header-btn "
+									title="Format code"
+									onClick={this.prettifyBtnClickHandler.bind(this, 'css')}
+								>
+									<svg>
+										<use xlinkHref="#code-brace-icon" />
+									</svg>
+								</a>
 								<a
 									class="js-code-collapse-btn  code-wrap__header-btn  code-wrap__collapse-btn"
 									title="Toggle code pane"
@@ -807,6 +830,15 @@ export default class ContentWrap extends Component {
 								</select>
 							</label>
 							<div class="code-wrap__header-right-options">
+								<a
+									class="code-wrap__header-btn "
+									title="Format code"
+									onClick={this.prettifyBtnClickHandler.bind(this, 'css')}
+								>
+									<svg>
+										<use xlinkHref="#code-brace-icon" />
+									</svg>
+								</a>
 								<a
 									class="js-code-collapse-btn  code-wrap__header-btn  code-wrap__collapse-btn"
 									title="Toggle code pane"

src/components/Icons.jsx

@@ -103,6 +103,9 @@ export function Icons() {
 						<rect x={69} y={0} width={32} height={100} />
 					</g>
 				</symbol>
+				<symbol id="code-brace-icon" viewBox="0 0 24 24">
+					<path d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z" />
+				</symbol>
 				<symbol id="search" viewBox="0 0 24 24">
 					<path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
 				</symbol>

src/components/app.jsx

@@ -1470,7 +1470,27 @@ export default class App extends Component {
 		return classes.join(' ');
 	}
 
-	prettifyHandler(selectedFile) {
+	prettifyHandler(what) {
+		// 3 pane mode
+		if (typeof what === 'string') {
+			prettify({
+				content: this.state.currentItem[what],
+				type: { html: 'html', js: 'js', css: 'css' }[what]
+			}).then(formattedContent => {
+				if (this.state.currentItem[what] === formattedContent) {
+					return;
+				}
+				this.state.currentItem[what] = formattedContent;
+				this.setState({ currentItem: { ...this.state.currentItem } }, () => {
+					// TODO: This is not right way. Editors should refresh automatically
+					// on state change.
+					this.contentWrap.refreshEditor();
+				});
+				this.incrementUnsavedChanges();
+			});
+			return;
+		}
+		const selectedFile = what;
 		const currentItem = {
 			...this.state.currentItem,
 			files: [...this.state.currentItem.files]
@@ -1536,6 +1556,7 @@ export default class App extends Component {
 								prefs={this.state.prefs}
 								onEditorFocus={this.editorFocusHandler.bind(this)}
 								onSplitUpdate={this.splitUpdateHandler.bind(this)}
+								onPrettifyBtnClick={this.prettifyHandler.bind(this)}
 							/>
 						)}