mirror of
https://github.com/chinchang/web-maker.git
synced 2025-07-08 23:53:15 +02:00
get language in monaco and misc fixes
This commit is contained in:
Kushagra Gour
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user