mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-02-22 06:03:22 +01:00
Code Issues Releases Wiki Activity

Add prettier to 3 pane mode also

Browse Source
This commit is contained in:
Kushagra Gour 2019-03-18 09:55:13 +05:30
parent cd9d3dd686
commit 1b00f87002
3 changed files with 57 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/ContentWrap.jsx
View File

@ -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"

3
src/components/Icons.jsx
View File

@ -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>

23
src/components/app.jsx
View File

@ -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)}
/>
)}