mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-05-05 18:15:58 +02:00
Code Issues Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Kushagra Gour 2018-11-21 20:34:08 +05:30
parent 6ed2d0981a
commit d9d1643b22
3 changed files with 119 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/ContentWrapFiles.jsx
View File

@ -638,6 +638,7 @@ export default class ContentWrapFiles extends Component {
</div>
</div>
<UserCodeMirror
mode={'monaco'}
value={
this.state.selectedFile ? this.state.selectedFile.content : ''
}

205
src/components/UserCodeMirror.jsx
View File

@ -66,100 +66,123 @@ export default class UserCodeMirror extends Component {
initEditor() {
const { options, prefs } = this.props;
this.cm = CodeMirror.fromTextArea(this.textarea, {
mode: options.mode,
lineNumbers: true,
lineWrapping: !!prefs.lineWrap,
autofocus: options.autofocus || false,
autoCloseBrackets: true,
autoCloseTags: !!prefs.autoCloseTags,
matchBrackets: true,
matchTags: options.matchTags || false,
tabMode: 'indent',
keyMap: prefs.keyMap || 'sublime',
theme: prefs.editorTheme || 'monokai',
lint: !!options.lint,
tabSize: +prefs.indentSize || 2,
indentWithTabs: prefs.indentWith !== 'spaces',
indentUnit: +prefs.indentSize,
foldGutter: true,
styleActiveLine: true,
gutters: options.gutters || [],
// cursorScrollMargin: '20', has issue with scrolling
profile: options.profile || '',
extraKeys: {
Up: function(editor) {
// Stop up/down keys default behavior when saveditempane is open
// if (isSavedItemsPaneOpen) {
// return;
// }
CodeMirror.commands.goLineUp(editor);
if (this.props.mode === 'monaco') {
this.instance = monaco.editor.create(el, {
language: options.language,
roundedSelection: false,
scrollBeyondLastLine: false,
theme: 'vs-dark',
fontSize: 16,
minimap: {
enabled: false
},
Down: function(editor) {
// if (isSavedItemsPaneOpen) {
// return;
// }
CodeMirror.commands.goLineDown(editor);
},
'Shift-Tab': function(editor) {
CodeMirror.commands.indentAuto(editor);
},
'Shift-Ctrl-F': function(editor) {
if (options.prettier) {
prettify({
content: editor.getValue(),
type: options.prettierParser
}).then(formattedCode => editor.setValue(formattedCode));
}
},
Tab: function(editor) {
if (options.emmet) {
const didEmmetWork = editor.execCommand('emmetExpandAbbreviation');
if (didEmmetWork === true) {
return;
wordWrap: 'on',
fontLigatures: true
});
this.instance.onDidChangeModelContent(onChange);
} else {
this.instance = CodeMirror.fromTextArea(this.textarea, {
mode: options.mode,
lineNumbers: true,
lineWrapping: !!prefs.lineWrap,
autofocus: options.autofocus || false,
autoCloseBrackets: true,
autoCloseTags: !!prefs.autoCloseTags,
matchBrackets: true,
matchTags: options.matchTags || false,
tabMode: 'indent',
keyMap: prefs.keyMap || 'sublime',
theme: prefs.editorTheme || 'monokai',
lint: !!options.lint,
tabSize: +prefs.indentSize || 2,
indentWithTabs: prefs.indentWith !== 'spaces',
indentUnit: +prefs.indentSize,
foldGutter: true,
styleActiveLine: true,
gutters: options.gutters || [],
// cursorScrollMargin: '20', has issue with scrolling
profile: options.profile || '',
extraKeys: {
Up: function(editor) {
// Stop up/down keys default behavior when saveditempane is open
// if (isSavedItemsPaneOpen) {
// return;
// }
CodeMirror.commands.goLineUp(editor);
},
Down: function(editor) {
// if (isSavedItemsPaneOpen) {
// return;
// }
CodeMirror.commands.goLineDown(editor);
},
'Shift-Tab': function(editor) {
CodeMirror.commands.indentAuto(editor);
},
'Shift-Ctrl-F': function(editor) {
if (options.prettier) {
prettify({
content: editor.getValue(),
type: options.prettierParser
}).then(formattedCode => editor.setValue(formattedCode));
}
}
const input = $('[data-setting=indentWith]:checked');
if (
!editor.somethingSelected() &&
(!prefs.indentWith || prefs.indentWith === 'spaces')
) {
// softtabs adds spaces. This is required because by default tab key will put tab, but we want
// to indent with spaces if `spaces` is preferred mode of indentation.
// `somethingSelected` needs to be checked otherwise, all selected code is replaced with softtab.
CodeMirror.commands.insertSoftTab(editor);
} else {
CodeMirror.commands.defaultTab(editor);
}
},
Enter: 'emmetInsertLineBreak'
}
});
this.cm.on('focus', editor => {
if (typeof this.props.onFocus === 'function') this.props.onFocus(editor);
});
this.cm.on('change', this.props.onChange);
this.cm.addKeyMap({
'Ctrl-Space': 'autocomplete'
});
this.cm.on('inputRead', (editor, input) => {
// Process further If this has autocompletition on and also the global
// autocomplete setting is on.
if (!this.props.options.noAutocomplete && this.props.prefs.autoComplete) {
if (
input.origin !== '+input' ||
input.text[0] === ';' ||
input.text[0] === ',' ||
input.text[0] === ' '
) {
return;
},
Tab: function(editor) {
if (options.emmet) {
const didEmmetWork = editor.execCommand(
'emmetExpandAbbreviation'
);
if (didEmmetWork === true) {
return;
}
const input = $('[data-setting=indentWith]:checked');
if (
!editor.somethingSelected() &&
(!prefs.indentWith || prefs.indentWith === 'spaces')
) {
// softtabs adds spaces. This is required because by default tab key will put tab, but we want
// to indent with spaces if `spaces` is preferred mode of indentation.
// `somethingSelected` needs to be checked otherwise, all selected code is replaced with softtab.
CodeMirror.commands.insertSoftTab(editor);
} else {
CodeMirror.commands.defaultTab(editor);
}
}
},
Enter: 'emmetInsertLineBreak'
}
CodeMirror.commands.autocomplete(this.cm, null, {
completeSingle: false
});
}
});
this.props.onCreation(this.cm);
});
this.instance.on('focus', editor => {
if (typeof this.props.onFocus === 'function')
this.props.onFocus(editor);
});
this.instance.on('change', this.props.onChange);
this.instance.addKeyMap({
'Ctrl-Space': 'autocomplete'
});
this.instance.on('inputRead', (editor, input) => {
// Process further If this has autocompletition on and also the global
// autocomplete setting is on.
if (
!this.props.options.noAutocomplete &&
this.props.prefs.autoComplete
) {
if (
input.origin !== '+input' ||
input.text[0] === ';' ||
input.text[0] === ',' ||
input.text[0] === ' '
) {
return;
}
CodeMirror.commands.autocomplete(editor, null, {
completeSingle: false
});
}
});
}
this.props.onCreation(this.instance);
}
render() {

4
src/style.css
View File

@ -1931,6 +1931,10 @@ while the theme CSS file is loading */
.tabs__tabpanel-wrap {
flex: 1;
}
.monaco-editor {
width: 100%;
height: 300px !important; /* 25px for header */
}
@media screen and (max-width: 600px) {
body {