mirror of
https://github.com/chinchang/web-maker.git
synced 2025-05-05 01:58:21 +02:00
get language in monaco and misc fixes
This commit is contained in:
Kushagra Gour
parent
932bbe43dc
commit
afbcd0a559
@ -33,6 +33,7 @@ import 'code-blast-codemirror/code-blast.js';
|
||||
|
||||
import emmet from '@emmetio/codemirror-plugin';
|
||||
import { prettify } from '../utils';
|
||||
import { modes } from '../codeModes';
|
||||
|
||||
import '../lib/monaco/monaco.bundle';
|
||||
import '../lib/monaco/monaco.css';
|
||||
@ -40,14 +41,14 @@ import '../lib/monaco/monaco.css';
|
||||
emmet(CodeMirror);
|
||||
window.MonacoEnvironment = {
|
||||
getWorkerUrl(moduleId, label) {
|
||||
let MonacoWorker;
|
||||
|
||||
switch (label) {
|
||||
case 'html':
|
||||
return 'lib/monaco/workers/html.worker.bundle.js';
|
||||
case 'json':
|
||||
return 'lib/monaco/workers/json.worker.bundle.js';
|
||||
case 'css':
|
||||
case 'scss':
|
||||
case 'less':
|
||||
return 'lib/monaco/workers/css.worker.bundle.js';
|
||||
case 'typescript':
|
||||
case 'javascript':
|
||||
@ -66,7 +67,7 @@ export default class CodeEditor extends Component {
|
||||
if (nextProps.prefs !== this.props.prefs) {
|
||||
const { prefs } = nextProps;
|
||||
|
||||
if (this.props.mode === 'monaco') {
|
||||
if (this.props.type === 'monaco') {
|
||||
this.instance.updateOptions({ fontSize: prefs.fontSize });
|
||||
} else {
|
||||
this.instance.setOption(
|
||||
@ -90,8 +91,26 @@ export default class CodeEditor extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
if (nextProps.type !== this.props.type) {
|
||||
// debugger;
|
||||
if (
|
||||
this.node.parentElement.querySelector('.monaco-editor, .CodeMirror')
|
||||
) {
|
||||
this.node.parentElement
|
||||
.querySelector('.monaco-editor, .CodeMirror')
|
||||
.remove();
|
||||
}
|
||||
console.log('CODEEDITOR SHOULD UPDATE');
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
componentDidUpdate(prevProps) {
|
||||
console.log('CODEEDITOR UPDATED');
|
||||
this.initEditor();
|
||||
}
|
||||
setModel(model) {
|
||||
this.instance.swapDoc
|
||||
? this.instance.swapDoc(model)
|
||||
@ -106,15 +125,33 @@ export default class CodeEditor extends Component {
|
||||
return this.instance.getValue();
|
||||
}
|
||||
saveViewState() {
|
||||
if (this.props.mode === 'monaco') {
|
||||
if (this.props.type === 'monaco') {
|
||||
return this.instance.saveViewState();
|
||||
}
|
||||
}
|
||||
restoreViewState(state) {
|
||||
if (this.props.mode === 'monaco') {
|
||||
if (this.props.type === 'monaco') {
|
||||
this.instance.restoreViewState(state);
|
||||
}
|
||||
}
|
||||
setOption(option, value) {}
|
||||
setLanguage(value) {
|
||||
console.log('setting', this.props.type, modes[value].cmMode);
|
||||
if (this.props.type === 'monaco') {
|
||||
monaco.editor.setModelLanguage(
|
||||
this.instance.getModel(),
|
||||
this.getMonacoLanguageFromMode(modes[value].cmMode)
|
||||
);
|
||||
} else {
|
||||
this.instance.setOption('mode', modes[value].cmMode);
|
||||
CodeMirror.autoLoadMode(
|
||||
this.instance,
|
||||
modes[value].cmPath || modes[value].cmMode
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
clearGutter(gutterName) {}
|
||||
|
||||
refresh() {
|
||||
this.instance.refresh ? this.instance.refresh() : this.instance.layout();
|
||||
@ -123,11 +160,25 @@ export default class CodeEditor extends Component {
|
||||
this.instance.focus();
|
||||
}
|
||||
|
||||
getMonacoLanguageFromMode(mode) {
|
||||
if (['htmlmixed'].includes(mode)) {
|
||||
return 'html';
|
||||
}
|
||||
if (['css', 'sass', 'scss', 'less', 'stylus'].includes(mode)) {
|
||||
return 'css';
|
||||
}
|
||||
if (['javascript', 'text/typescript-jsx', 'jsx'].includes(mode)) {
|
||||
return 'javascript';
|
||||
}
|
||||
return mode;
|
||||
}
|
||||
|
||||
initEditor() {
|
||||
const { options, prefs } = this.props;
|
||||
if (this.props.mode === 'monaco') {
|
||||
this.instance = monaco.editor.create(this.textarea, {
|
||||
language: 'javascript',
|
||||
console.log(this.props.type);
|
||||
if (this.props.type === 'monaco') {
|
||||
this.instance = monaco.editor.create(this.node, {
|
||||
language: this.getMonacoLanguageFromMode(options.mode),
|
||||
roundedSelection: false,
|
||||
scrollBeyondLastLine: false,
|
||||
theme: 'vs-dark',
|
||||
@ -141,85 +192,92 @@ export default class CodeEditor extends Component {
|
||||
automaticLayout: true
|
||||
});
|
||||
window.monacoInstance = this.instance;
|
||||
this.instance.onDidChangeModelContent(this.props.onChange);
|
||||
setTimeout(() => {
|
||||
// this.instance.layout();
|
||||
}, 1000);
|
||||
} else {
|
||||
this.instance = CodeMirror.fromTextArea(
|
||||
this.textarea.querySelector('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));
|
||||
}
|
||||
},
|
||||
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'
|
||||
this.instance.onDidChangeModelContent(change => {
|
||||
this.props.onChange(this.instance, { ...change, origin: '+input' });
|
||||
});
|
||||
this.instance.addCommand(
|
||||
monaco.KeyMod.WinCtrl | monaco.KeyMod.Shift | monaco.KeyCode.KEY_F,
|
||||
() => {
|
||||
if (options.prettier) {
|
||||
prettify({
|
||||
content: this.instance.getValue(),
|
||||
type: options.prettierParser
|
||||
}).then(formattedCode => this.instance.setValue(formattedCode));
|
||||
}
|
||||
}
|
||||
);
|
||||
} else {
|
||||
this.instance = CodeMirror.fromTextArea(this.node, {
|
||||
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));
|
||||
}
|
||||
},
|
||||
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'
|
||||
}
|
||||
});
|
||||
this.instance.on('focus', editor => {
|
||||
if (typeof this.props.onFocus === 'function')
|
||||
this.props.onFocus(editor);
|
||||
@ -254,10 +312,12 @@ export default class CodeEditor extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div ref={el => (this.textarea = el)} style="width:100%;height:100%;">
|
||||
{this.props.mode === 'monaco' ? null : <textarea />}
|
||||
</div>
|
||||
);
|
||||
const node =
|
||||
this.props.type === 'monaco' ? (
|
||||
<div ref={el => (this.node = el)} style="width:100%;height:100%;" />
|
||||
) : (
|
||||
<textarea ref={el => (this.node = el)} />
|
||||
);
|
||||
return node;
|
||||
}
|
||||
}
|
||||
|
||||
@ -488,35 +488,23 @@ export default class ContentWrap extends Component {
|
||||
updateHtmlMode(value) {
|
||||
this.props.onCodeModeChange('html', value);
|
||||
this.props.currentItem.htmlMode = value;
|
||||
this.cm.html.setOption('mode', modes[value].cmMode);
|
||||
CodeMirror.autoLoadMode(
|
||||
this.cm.html,
|
||||
modes[value].cmPath || modes[value].cmMode
|
||||
);
|
||||
this.cm.html.setLanguage(value);
|
||||
return this.handleModeRequirements(value);
|
||||
}
|
||||
updateCssMode(value) {
|
||||
this.props.onCodeModeChange('css', value);
|
||||
this.props.currentItem.cssMode = value;
|
||||
this.cm.css.setOption('mode', modes[value].cmMode);
|
||||
this.cm.css.setOption('readOnly', modes[value].cmDisable);
|
||||
window.cssSettingsBtn.classList[
|
||||
modes[value].hasSettings ? 'remove' : 'add'
|
||||
]('hide');
|
||||
CodeMirror.autoLoadMode(
|
||||
this.cm.css,
|
||||
modes[value].cmPath || modes[value].cmMode
|
||||
);
|
||||
this.cm.css.setLanguage(value);
|
||||
return this.handleModeRequirements(value);
|
||||
}
|
||||
updateJsMode(value) {
|
||||
this.props.onCodeModeChange('js', value);
|
||||
this.props.currentItem.jsMode = value;
|
||||
this.cm.js.setOption('mode', modes[value].cmMode);
|
||||
CodeMirror.autoLoadMode(
|
||||
this.cm.js,
|
||||
modes[value].cmPath || modes[value].cmMode
|
||||
);
|
||||
this.cm.js.setLanguage(value);
|
||||
return this.handleModeRequirements(value);
|
||||
}
|
||||
codeModeChangeHandler(e) {
|
||||
@ -709,6 +697,7 @@ export default class ContentWrap extends Component {
|
||||
</div>
|
||||
</div>
|
||||
<CodeEditor
|
||||
type={this.props.prefs.isMonacoEditorOn ? 'monaco' : 'codemirror'}
|
||||
options={{
|
||||
mode: 'htmlmixed',
|
||||
profile: 'xhtml',
|
||||
@ -721,7 +710,7 @@ export default class ContentWrap extends Component {
|
||||
}}
|
||||
prefs={this.props.prefs}
|
||||
onChange={this.onHtmlCodeChange.bind(this)}
|
||||
onCreation={el => (this.cm.html = el)}
|
||||
ref={editor => (this.cm.html = editor)}
|
||||
onFocus={this.editorFocusHandler.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
@ -776,6 +765,7 @@ export default class ContentWrap extends Component {
|
||||
</div>
|
||||
</div>
|
||||
<CodeEditor
|
||||
type={this.props.prefs.isMonacoEditorOn ? 'monaco' : 'codemirror'}
|
||||
options={{
|
||||
mode: 'css',
|
||||
gutters: [
|
||||
@ -789,7 +779,7 @@ export default class ContentWrap extends Component {
|
||||
}}
|
||||
prefs={this.props.prefs}
|
||||
onChange={this.onCssCodeChange.bind(this)}
|
||||
onCreation={el => (this.cm.css = el)}
|
||||
ref={editor => (this.cm.css = editor)}
|
||||
onFocus={this.editorFocusHandler.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
@ -831,6 +821,7 @@ export default class ContentWrap extends Component {
|
||||
</div>
|
||||
</div>
|
||||
<CodeEditor
|
||||
type={this.props.prefs.isMonacoEditorOn ? 'monaco' : 'codemirror'}
|
||||
options={{
|
||||
mode: 'javascript',
|
||||
gutters: [
|
||||
@ -844,7 +835,7 @@ export default class ContentWrap extends Component {
|
||||
prefs={this.props.prefs}
|
||||
autoComplete={this.props.prefs.autoComplete}
|
||||
onChange={this.onJsCodeChange.bind(this)}
|
||||
onCreation={el => (this.cm.js = el)}
|
||||
ref={editor => (this.cm.js = editor)}
|
||||
onFocus={this.editorFocusHandler.bind(this)}
|
||||
/>
|
||||
{/* Inlet(scope.cm.js); */}
|
||||
|
||||
@ -188,7 +188,7 @@ export default class ContentWrapFiles extends Component {
|
||||
}
|
||||
|
||||
onHtmlCodeChange(editor, change) {
|
||||
this.cmCodes.html = this.editor.getValue();
|
||||
this.cmCodes.html = editor.getValue();
|
||||
|
||||
this.props.onCodeChange(
|
||||
this.state.selectedFile,
|
||||
@ -663,7 +663,7 @@ export default class ContentWrapFiles extends Component {
|
||||
</div>
|
||||
</div>
|
||||
<CodeEditor
|
||||
mode={this.props.prefs.isMonacoEditorOn ? 'monaco' : 'codemirror'}
|
||||
type={this.props.prefs.isMonacoEditorOn ? 'monaco' : 'codemirror'}
|
||||
value={
|
||||
this.state.selectedFile ? this.state.selectedFile.content : ''
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user