Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rohitghatol/react-monaco-editor-example
This is a example of how to use Microsoft Monaco Editor for coding Typescript functions using react-monaco library
https://github.com/rohitghatol/react-monaco-editor-example
editor ide monaco-editor react typescript webbased
Last synced: 2 months ago
JSON representation
This is a example of how to use Microsoft Monaco Editor for coding Typescript functions using react-monaco library
- Host: GitHub
- URL: https://github.com/rohitghatol/react-monaco-editor-example
- Owner: rohitghatol
- License: apache-2.0
- Created: 2019-03-27T05:59:36.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-03-27T08:21:43.000Z (almost 6 years ago)
- Last Synced: 2024-04-10T14:15:45.594Z (9 months ago)
- Topics: editor, ide, monaco-editor, react, typescript, webbased
- Language: JavaScript
- Size: 6.88 MB
- Stars: 25
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Microsoft Monaco Editor using react-monaco
This is a example of how to use Microsoft Monaco Editor for coding Typescript functions using react-monaco library
Demo - https://rohitghatol.github.io/react-monaco-editor-example/
# Setup
1. Install CRA
```
$> npm i create-react-app
```
2. Create React Project
```
$> create-react-app react-monaco-example
```
3. Eject React Scripts
```
$> cd react-monaco-editor
$> npm run eject
```
4. Install React Monaco Editor and make changes to webpack
```
$> npm i react-monaco-editor -S
$> npm i monaco-editor-webpack-plugin -D
```
Edit react-monaco-example/config/webpack.config.js file
* Add Import at the top
```
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
```
* Add Plugin in the plugin space
```
new MonacoWebpackPlugin(),
```
5. Create a React Component for Monaco Editor
```
components/SimpleTypescriptEditor.jsx
```
```
import React,{Component} from 'react';
import MonacoEditor from 'react-monaco-editor'
const code =
`
// Define Typescript Interface Employee
interface Employee {
firstName: String;
lastName: String;
contractor?: Boolean;
}
// Use Typescript Interface Employee.
// This should show you an error on john
// as required attribute lastName is missing
const john:Employee = {
firstName:"John",
// lastName:"Smith"
// contractor:true
}
`
export class SimpleTypescriptEditor extends Component {
constructor(props){
super(props);
this.state = {
code
}
}
onChange(newValue, e) {
// console.log('onChange', newValue, e);
}
render() {
return (
)
}
}
```
---
```
// types/index.js
import {content as modelContent} from './models';
import {content as lambdaContent} from './lambda';
import {content as ramdaContent} from './ramda';
export const files = {
"models/index.d.ts": modelContent,
"ramda/index.d.ts": ramdaContent,
"lambda/index.d.ts": lambdaContent,
};
```
```
// types/models.js
export const content =
`
export interface Item {
id: String;
name: String;
value: String;
}
export interface Result {
id: String;
name: String;
value: String;
}
`
```
```
// types/lambda.js
export const content =
`
import {Item} from 'models';
export interface Event {
input: Item[]
}
export interface Context {
}
`
```
```
components/AdvancedTypescriptEditor.jsx
```
```
import React,{Component} from 'react';
import MonacoEditor from 'react-monaco-editor'
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import {Uri} from 'monaco-editor/esm/vs/editor/editor.api';
import {files} from './typings';
const code =
`
//--------------------------
// Contents of "models"
//--------------------------
//
// export interface Item {
// id: String;
// name: String;
// value: String;
// }
//
// export interface Result {
// id: String;
// name: String;
// value: String;
// }
//--------------------------
// Contents of "lambda"
//--------------------------
//
// import {Item} from 'models';
//
// export interface Event {
// input: Item[]
// }
//
// export interface Context {
//
// }
import {Event, Context} from "lambda";
import {Item, Result} from "models"
import * as R from "ramda";
export const lambda = async (event:Event, context:Context): Promise => {
const result:Result[] = R.map((input:Item) => ({
id: input.id,
name: input.name,
value: input.value
}),event.input);
return result;
}
`
export class AdvancedTypescriptEditor extends Component {
constructor(props){
super(props);
this.state = {
code
}
}
onChange(newValue, e) {
// console.log('onChange', newValue, e);
}
editorWillMount(monaco) {
// validation settings
monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
noSemanticValidation: false,
noSyntaxValidation: false
});
// compiler options
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.ES6,
allowNonTsExtensions: true
});
for (const fileName in files) {
const fakePath = `file:///node_modules/@types/${fileName}`;
monaco.languages.typescript.typescriptDefaults.addExtraLib(
files[fileName],
fakePath
);
}
}
editorDidMount(editor, monaco) {
editor.focus();
}
render() {
const options = {
selectOnLineNumbers: true,
model: monaco.editor.getModel(Uri.parse("file:///main.tsx"))
||
monaco.editor.createModel(code, "typescript", monaco.Uri.parse("file:///main.tsx"))
}
return (
)
}
}
```