@lsky/react-monaco-editor

react-monaco-editor

Monaco Editor for React

Installing

$ yarn add @lsky/react-monaco-editor

Example

Editor

import React from 'react';
import examples from '@src/examples'
// component
import MonacoEditor from '@lsky/react-monaco-editor'


class Index extends React.Component {
  render() {
    return (
      <div style={{ padding: '20px' }}>
        <h2>Monaco Editor base example</h2>
        <MonacoEditor
          width={800}
          height={500}
          language="javascript"
          value={examples['javascript']}
          onChange={(value) => {
            console.log('editor value: ', value)
          }}
          editorDidMount={(editor, monaco) => {
            console.log("editor instance: ", editor)
            console.log("monaco: ", monaco)
          }}
        />
      </div>
    )
  }
}


export default Index

Diff

import React from 'react'
import { DiffEditor } from '@lsky/react-monaco-editor'
import { diffExamples } from '@src/example'


class Index extends React.PureComponent {
  render() {
    return (
      <DiffEditor
        width={600}
        height={400}
        original={diffExamples.original}
        modified={diffExamples.modified}
        language="markdown"
      />
    )
  }
}


export default Index

monaco Instance

import { monaco } from '@lsky/react-monaco-editor'

monaco.init()
  .then(monacoInstance => {
    // then
  })

Development

To build the example locally, run:

git clone https://github.com/lsky-walt/react-monaco-editor.git

cd react-monaco-editor

yarn install

yarn start

Monaco Editor

Props

Name	Type	Default	Description
value	string	null	editor value
width	number	null	editor width
height	number	null	editor height
language	string	null	editor language
theme	string	vs	vs, vs-dark, active4d, clouds, chrome, monokai, solarized-dark, solarized-light, MonacoTheme
options	object	null	IEditorOptions
loading	React.ReactNode	null	loading ??
line	number	null	line number
modelOptions	Array	null	monaco.editor.createModel(value, language, ...modelOptions)
bordered	boolean	true	need bordered ?
style	object	null	editor outer container style
onChange	func	(value) => void	triggered when the editor value changes
monacoWillMount	func	(monaco) => void	triggered when the monaco will mounted
editorDidMount	func	(editor, monaco) => void	triggered when the editor did mounted
cdnConfig	{ monaco: string, monacoLoader: string }	{ monaco: "https://unpkg.com/monaco-editor@0.24.0/min/vs", monacoLoader: "https://unpkg.com/monaco-editor@0.24.0/min/vs/loader.js" }	custom cdn

Diff Editor

Props

Name	Type	Default	Description
original	string	null	diff editor original value
modified	string	null	diff editor modified value
width	number	null	diff editor width
height	number	null	diff editor height
language	string	null	diff editor language
originalLanguage	string	null	diff editor original language
modifiedLanguage	string	null	diff editor modified language
theme	string	vs	vs, vs-dark, active4d, clouds, chrome, monokai, solarized-dark, solarized-light, MonacoTheme
options	object	null	IDiffEditorOptions
style	object	null	diff editor outer container style
monacoWillMount	func	(monaco) => void	triggered when the monaco will mounted
editorDidMount	func	(original: MonacoEditor.editor.ITextModel, modified: MonacoEditor.editor.ITextModel, editor: MonacoEditor.editor) => void	triggered when the diff editor did mounted
onChange	(value: string) => void	null	modified model content change
cdnConfig	{ monaco: string, monacoLoader: string }	{ monaco: "https://unpkg.com/monaco-editor@0.24.0/min/vs", monacoLoader: "https://unpkg.com/monaco-editor@0.24.0/min/vs/loader.js" }	custom cdn