From 32ceee7dc249607d3ec20f109be4f03be1692260 Mon Sep 17 00:00:00 2001 From: Suren Atoyan Date: Fri, 21 Jun 2019 20:36:31 +0400 Subject: [PATCH] rename package --- README.md | 98 ++++++++++++++++++++++ demo/README.md | 2 +- demo/src/sections/DiffEditor/DiffEditor.js | 2 +- demo/src/sections/Editor/Editor.js | 2 +- package.json | 2 +- 5 files changed, 102 insertions(+), 4 deletions(-) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..8f0ca7b --- /dev/null +++ b/README.md @@ -0,0 +1,98 @@ +# monaco-react +Monaco Editor for React + +## Motivation +There is a well-known web technology based code editor called [Monaco Editor](https://microsoft.github.io/monaco-editor/) that powers [VS Code](https://code.visualstudio.com/). [There are also many ways to integrate](https://github.com/Microsoft/monaco-editor-samples/) it provided by monaco creators. But there were tons of problems with integration of monaco with modern technologies; e.g React. + +There also exist solutions for integration with React; e.g [this one](https://github.com/react-monaco-editor/react-monaco-editor) and [this one](https://wangchujiang.com/react-monacoeditor/). But they need some custom webpack (or other module bundler) configuration to make Monaco fully work, which is not the "best" solution for such kind of things like create-react-app - [CRA](https://facebook.github.io/create-react-app/). + +With this solution, you don't need any kind of webpack configuration files and it works great both with React apps created by CRA or created by something else. + +## Installation + +```bash +yarn add @monaco-editor/react # or npm install @monaco-editor/react +``` + +## Usage + +Example +```js +import React, { useState } from 'react'; +import Editor from '@monaco-editor/react'; + +const examples = { python: '# python example', javascript: '// javascript example' }; + +function App() { + const [theme, setTheme] = useState('light'); + const [language, setLanguage] = useState('javascript'); + const [isEditorReady, setIsEditorReady] = useState(false); + + function handleEditorDidMount() { + setIsEditorReady(true); + } + + function toggleTheme() { + setTheme(theme === 'light' ? 'dark' : 'light'); + } + + function toggleLanguage() { + setLanguage(language === 'javascript' ? 'python' : 'javascript'); + } + + return ( + <> + + + + + + ); +} + +export default App; +``` + +## Props + +#### Editor + +| Name | Type | Default | Description | +|:----------|:-------------|:------|:------| +| value | string || The editor value | +| language | enum: ... | | All languages that are [supported](https://github.com/microsoft/monaco-languages) by monaco-editor | +| editorDidMount | func | noop | **Signature: function(getEditorValue: func, monaco: object) => void**
This function will be called right after monaco editor will be mounted and ready to work. It will get the editor instance as a second argument | +| theme | enum: 'light' \| 'dark' | 'light' | Default themes of monaco | +| line | number | | The line to jump on it | +| width | union: number \| string | '100%' | The width of the editor wrapper | +| height | union: number \| string | '100%' | The height of the editor wrapper | +| loading | union: React element \| string | 'Loading...' | The loading screen before the editor will be loaded | +| options | object | {} | [IEditorOptions](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroptions.html) | + +#### DiffEditor + +| Name | Type | Default | Description | +|:----------|:-------------|:------|:------| +| original | string || The original source (left one) value | +| modified | string || The modified source (right one) value | +| language | enum: ... | | All languages that are [supported](https://github.com/microsoft/monaco-languages) by monaco-editor | +| originalLanguage | enum: ... | *language | This prop gives you the opportunity to specify the language of the `original` source separately, otherwise, it will get the value of `language` property. (Possible values are the same as `language`) | +| modifiedLanguage | enum: ... | *language | This prop gives you the opportunity to specify the language of the `modified` source separately, otherwise, it will get the value of `language` property. (Possible values are the same as `language`) | +| editorDidMount | func | noop | **Signature: function(getOriginalEditorValue: func, getModifiedEditorValue: func, monaco: object) => void**
This function will be called right after monaco editor will be mounted and ready to work. It will get the editor instance as a third argument | +| theme | enum: 'light' \| 'dark' | 'light' | Default themes of monaco | +| line | number | | The line to jump on it | +| width | union: number \| string | '100%' | The width of the editor wrapper | +| height | union: number \| string | '100%' | The height of the editor wrapper | +| loading | union: React element \| string | 'Loading...' | The loading screen before the editor will be loaded | +| options | object | {} | [IDiffEditorOptions](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.idiffeditorconstructionoptions.html) | + +## License + +[MIT](./LICENSE) diff --git a/demo/README.md b/demo/README.md index ce9f335..4210844 100644 --- a/demo/README.md +++ b/demo/README.md @@ -1,4 +1,4 @@ ### Monaco-React Demo -This is the demo of [monaco-react](../) library. +This is the demo of [@monaco-editor/react](../) package. It's hosted [here](monaco-react.surenatoyan.com) diff --git a/demo/src/sections/DiffEditor/DiffEditor.js b/demo/src/sections/DiffEditor/DiffEditor.js index f5b83f9..42463d8 100644 --- a/demo/src/sections/DiffEditor/DiffEditor.js +++ b/demo/src/sections/DiffEditor/DiffEditor.js @@ -1,6 +1,6 @@ import React from 'react'; -import { DiffEditor as MonacoDiffEditor } from 'monaco-react'; +import { DiffEditor as MonacoDiffEditor } from '@monaco-editor/react'; import { useStore } from 'store'; import config from 'config'; diff --git a/demo/src/sections/Editor/Editor.js b/demo/src/sections/Editor/Editor.js index cc451a3..7f95ed3 100644 --- a/demo/src/sections/Editor/Editor.js +++ b/demo/src/sections/Editor/Editor.js @@ -1,6 +1,6 @@ import React from 'react'; -import MonacoEditor from 'monaco-react'; +import MonacoEditor from '@monaco-editor/react'; import Settings from './Settings'; import { useStore } from 'store'; diff --git a/package.json b/package.json index 873d2ec..aa71963 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "monaco-react", + "name": "@monaco-react/react", "version": "0.0.1", "description": "Monaco Editor for React", "main": "lib/index.js",