r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

add css and html beautify

Browse source
This commit is contained in:
catarak 2016-09-07 15:05:25 -04:00
parent 506c959f8c
commit d1576bb661
1 changed files with 16 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
client/modules/IDE/components/Editor.js
View file

@ -1,7 +1,9 @@
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import EditorAccessibility from '../components/EditorAccessibility'; import EditorAccessibility from '../components/EditorAccessibility';
import CodeMirror from 'codemirror'; import CodeMirror from 'codemirror';
import beautify from 'js-beautify'; import beautifyJS from 'js-beautify';
const beautifyCSS = beautifyJS.css;
const beautifyHTML = beautifyJS.html;
import 'codemirror/mode/javascript/javascript'; import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css'; import 'codemirror/mode/css/css';
import 'codemirror/mode/htmlmixed/htmlmixed'; import 'codemirror/mode/htmlmixed/htmlmixed';
@ -69,9 +71,19 @@ class Editor extends React.Component {
this._cm.on('keydown', (_cm, e) => { this._cm.on('keydown', (_cm, e) => {
if (e.key === 'Tab' && e.shiftKey) { if (e.key === 'Tab' && e.shiftKey) {
_cm.doc.setValue(beautify(_cm.doc.getValue(), const beautifyOptions = {
{ indent_size: this.props.indentationAmount, indent_size: this.props.indentationAmount,
indent_with_tabs: this.props.isTabIndent })); indent_with_tabs: this.props.isTabIndent
};
const mode = _cm.getOption('mode');
if (mode === 'javascript') {
_cm.doc.setValue(beautifyJS(_cm.doc.getValue(), beautifyOptions));
} else if (mode === 'css') {
_cm.doc.setValue(beautifyCSS(_cm.doc.getValue(), beautifyOptions));
} else if (mode === 'htmlmixed') {
_cm.doc.setValue(beautifyHTML(_cm.doc.getValue(), beautifyOptions));
}
} }
}); });
} }