@fishx/monacoeditor
Monaco Editor component for React. demo @@fishx/monacoeditor
Installation
npm install @fishx/monacoeditor --save
Using
import React from 'react';
import MonacoEditor from '@fishx/monacoeditor';
<MonacoEditor
language="html"
value="<h1>I ♥ @fishx/monacoeditor</h1>"
options={{
theme: 'vs-dark',
}}
/>
Using with Webpack
import React from 'react';
import { render } from 'react-dom';
import MonacoEditor from '@fishx/monacoeditor';
const code = `import React, { PureComponent } from 'react';
import MonacoEditor from '@fishx/monacoeditor';
export default class App extends PureComponent {
render() {
return (
<MonacoEditor
language="html"
value="<h1>I ♥ @fishx/monacoeditor</h1>"
options={{
selectOnLineNumbers: true,
roundedSelection: false,
cursorStyle: 'line',
automaticLayout: false,
theme: 'vs-dark',
}}
/>
);
}
}
`;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
code: '// type your code...',
}
}
editorDidMount(editor, monaco) {
console.log('editorDidMount', editor, monaco);
editor.focus();
}
onChange(newValue, e) {
console.log('onChange', newValue, e);
}
render() {
const options = {
selectOnLineNumbers: true,
roundedSelection: false,
readOnly: false,
cursorStyle: 'line',
automaticLayout: false,
theme: 'vs-dark',
scrollbar: {
// Subtle shadows to the left & top. Defaults to true.
useShadows: false,
// Render vertical arrows. Defaults to false.
verticalHasArrows: true,
// Render horizontal arrows. Defaults to false.
horizontalHasArrows: true,
// Render vertical scrollbar.
// Accepted values: 'auto', 'visible', 'hidden'.
// Defaults to 'auto'
vertical: 'visible',
// Render horizontal scrollbar.
// Accepted values: 'auto', 'visible', 'hidden'.
// Defaults to 'auto'
horizontal: 'visible',
verticalScrollbarSize: 17,
horizontalScrollbarSize: 17,
arrowSize: 30,
},
};
return (
<MonacoEditor
height="500px"
language="javascript"
editorDidMount={this.editorDidMount.bind(this)}
onChange={this.onChange.bind(this)}
value={code}
options={options}
/>
);
}
}
render(
<App />,
document.getElementById('root')
);
Add the Monaco Webpack plugin monaco-editor-webpack-plugin
to your webpack.config.js
:
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
plugins: [
new MonacoWebpackPlugin()
]
};
Properties
If you specify value
property, the component behaves in controlled mode.
Otherwise, it behaves in uncontrolled mode.
-
width
width of editor. Defaults to100%
. -
height
height of editor. Defaults to100%
. -
value
value of the auto created model in the editor. -
defaultValue
the initial value of the auto created model in the editor. -
language
the initial language of the auto created model in the editor. -
theme
the theme of the editorvs
,vs-dark
,hc-black
-
options
refer to Monaco interface IEditorConstructionOptions. -
editorDidMount(editor, monaco)
an event emitted when the editor has been mounted (similar tocomponentDidMount
of React). -
onChange(newValue, event)
an event emitted when the content of the current model has changed.
Events & Methods
Refer to Monaco interface IEditor.
Contribution
-
npm install
-
npm run build
-
npm publish --access public
License
Licensed under the MIT License.