Version 1.0
This commit is contained in:
Alexander R.
+5
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"presets": [
|
||||
"@babel/preset-env"
|
||||
]
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
npm test && npm run lint
|
||||
+103
@@ -0,0 +1,103 @@
|
||||
## 1.7.0
|
||||
###### *Nov 21, 2025*
|
||||
|
||||
- loader: merged #61 - add backward compatibility for 0.53 and 0.54 versions
|
||||
- monaco-editor: update to the latest version (0.55.1)
|
||||
|
||||
## 1.6.1
|
||||
###### *Oct 14, 2025*
|
||||
|
||||
- eslint: use mjs for eslint config file
|
||||
- package: remove type field
|
||||
|
||||
## 1.6.0
|
||||
###### *Oct 12, 2025*
|
||||
|
||||
- monaco-editor: update to the latest version (0.54.0)
|
||||
- package: update all dependencies to the latest version
|
||||
- playground: update all dependencies to the latest version
|
||||
|
||||
## 1.5.0
|
||||
###### *Feb 13, 2025*
|
||||
|
||||
- monaco-editor: update to the latest version (0.52.2)
|
||||
- package: remove monaco-editor from peerDependencies
|
||||
|
||||
## 1.4.0
|
||||
###### *Oct 1, 2023*
|
||||
|
||||
- monaco-editor: update to the latest version (0.43.0)
|
||||
|
||||
## 1.3.3
|
||||
###### *Apr 2, 2023*
|
||||
|
||||
- monaco-editor: update to the latest version (0.36.1)
|
||||
|
||||
## 1.3.2
|
||||
###### *May 11, 2022*
|
||||
|
||||
- utility: resolve monaco instance in case of provided monaco instance and global availability
|
||||
|
||||
## 1.3.1
|
||||
###### *Apr 23, 2022*
|
||||
|
||||
- utility: implement isInitialized flag
|
||||
|
||||
## 1.3.0
|
||||
###### *Mar 20, 2022*
|
||||
|
||||
- types: add optional monaco type into config params
|
||||
- utility: implement optional monaco param for config
|
||||
- test: fix a test case according to the new changes
|
||||
- playground: create a playground for testing the library
|
||||
- monaco-editor: update to the latest version (0.33.0)
|
||||
|
||||
## 1.2.0
|
||||
###### *Oct 3, 2021*
|
||||
|
||||
- monaco-editor: update to the latest version (0.28.1)
|
||||
- types: fix CancelablePromise type
|
||||
|
||||
## 1.1.1
|
||||
###### *Jun 21, 2021*
|
||||
|
||||
- monaco-editor: update to the latest version (0.25.2)
|
||||
|
||||
## 1.1.0
|
||||
###### *Jun 12, 2021*
|
||||
|
||||
- monaco-editor: update to the latest version (0.25.0)
|
||||
|
||||
## 1.0.1
|
||||
###### *Mar 18, 2021*
|
||||
|
||||
- monaco-editor: update to the latest version (0.23.0)
|
||||
|
||||
## 1.0.0
|
||||
###### *Jan 15, 2021*
|
||||
|
||||
🎉 First stable release
|
||||
|
||||
- utility: rename the main utility: monaco -> loader
|
||||
- helpers: create (+ named export) `__getMonacoInstance` internal helper
|
||||
|
||||
## 0.1.3
|
||||
###### *Jan 8, 2021*
|
||||
|
||||
- build: in `cjs` and `es` bundles `state-local` is marked as externam lib
|
||||
- build: in `cjs` and `es` modules structure is preserved - `output.preserveModules = true`
|
||||
|
||||
## 0.1.2
|
||||
###### *Jan 7, 2021*
|
||||
|
||||
- package: add jsdelivr source path
|
||||
|
||||
## 0.1.1
|
||||
###### *Jan 7, 2021*
|
||||
|
||||
- lib: rename scripts name (from 'core' to 'loader')
|
||||
|
||||
## 0.1.0
|
||||
###### *Jan 6, 2021*
|
||||
|
||||
🎉 First release
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021 Suren Atoyan
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
+201
@@ -0,0 +1,201 @@
|
||||
# @monaco-editor/loader · [](https://www.npmjs.com/package/@monaco-editor/loader) [](https://github.com/suren-atoyan/monaco-loader/blob/master/LICENSE) [](https://www.npmjs.com/package/@monaco-editor/loader) [](https://github.com/suren-atoyan/monaco-loader/pulls)
|
||||
|
||||
The utility to easy setup `monaco-editor` into your browser
|
||||
|
||||
## Synopsis
|
||||
|
||||
Configure and download monaco sources via its loader script, without needing to use webpack's (or any other module bundler's) configuration files
|
||||
|
||||
## Motivation
|
||||
|
||||
It's been a while we are working with `monaco editor`. It's a great library and provides a powerful editor out of the box. Anyway, there were couple of problems related to the setup process. The main problem is the need to do some additional `webpack` configuration; that's not bad, but some quite useful tools, like `CRA`, aren't happy with that fact. The library [`@monaco-editor/react`](https://github.com/suren-atoyan/monaco-react) was being created to solve that problem - `monaco editor wrapper for easy/one-line integration with React applications without needing to use webpack's (or any other module bundler's) configuration files`. In that library, there was a utility that cares about the initialization process of monaco and overcomes the additional use of webpack configuration. That utility grows over time and now it's a separate library. Now, you can easily setup monaco into your browser, create your own editors, wrappers for React/Vue/Angular of whatever you want.
|
||||
|
||||
## How it works
|
||||
|
||||
Monaco editor provides a script called `loader`, which itself provides tooling to download monaco sources. The library, under the hood, handles the configuration and loading part and gives us an easy-to-use API to interact with it
|
||||
|
||||
## Documentation
|
||||
|
||||
#### Contents
|
||||
|
||||
* [Installation](#installation)
|
||||
* [Introduction](#introduction)
|
||||
* [Usage](#usage)
|
||||
* [.config](#config)
|
||||
* [.init](#init)
|
||||
* [Notes](#notes)
|
||||
* [For `electron` users](#for-electron-users)
|
||||
* [For `Next.js` users](#for-nextjs-users)
|
||||
|
||||
### Installation
|
||||
|
||||
```bash
|
||||
npm install @monaco-editor/loader
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```bash
|
||||
yarn add @monaco-editor/loader
|
||||
```
|
||||
|
||||
NOTE: For TypeScript type definitions, this package uses the [monaco-editor](https://www.npmjs.com/package/monaco-editor) package as a peer dependency. So, if you need types and don't already have the [monaco-editor](https://www.npmjs.com/package/monaco-editor) package installed, you will need to do so.
|
||||
|
||||
### Introduction
|
||||
|
||||
The library exports types and the utility called `loader`, the last one has two methods
|
||||
|
||||
* [.config](#config)
|
||||
* [.init](#init)
|
||||
|
||||
### Usage
|
||||
|
||||
```javascript
|
||||
import loader from '@monaco-editor/loader';
|
||||
|
||||
loader.init().then(monaco => {
|
||||
monaco.editor.create(/* editor container, e.g. document.body */, {
|
||||
value: '// some comment',
|
||||
language: 'javascript',
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
[codesandbox](https://codesandbox.io/s/simple-usage-os49p)
|
||||
|
||||
#### .config
|
||||
|
||||
By using the `.config` method we can configure the monaco loader. By default all sources come from CDN, you can change that behavior and load them from wherever you want
|
||||
|
||||
```javascript
|
||||
import loader from '@monaco-editor/loader';
|
||||
|
||||
// you can change the source of the monaco files
|
||||
loader.config({ paths: { vs: '...' } });
|
||||
|
||||
// you can configure the locales
|
||||
loader.config({ 'vs/nls': { availableLanguages: { '*': 'de' } } });
|
||||
|
||||
// or
|
||||
loader.config({
|
||||
paths: {
|
||||
vs: '...',
|
||||
},
|
||||
'vs/nls' : {
|
||||
availableLanguages: {
|
||||
'*': 'de',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
loader.init().then(monaco => { /* ... */ });
|
||||
```
|
||||
|
||||
[codesandbox](https://codesandbox.io/s/config-o6zn6)
|
||||
|
||||
#### Configure the loader to load the monaco as an npm package
|
||||
|
||||
```javascript
|
||||
import loader from '@monaco-editor/loader';
|
||||
import * as monaco from 'monaco-editor';
|
||||
|
||||
loader.config({ monaco });
|
||||
|
||||
loader.init().then(monacoInstance => { /* ... */ });
|
||||
```
|
||||
|
||||
[codesandbox](https://codesandbox.io/s/npm-gswrvh)
|
||||
|
||||
#### .init
|
||||
|
||||
The `.init` method handles the initialization process. It returns the monaco instance, wrapped with cancelable promise
|
||||
|
||||
```javascript
|
||||
import loader from '@monaco-editor/loader';
|
||||
|
||||
loader.init().then(monaco => {
|
||||
console.log('Here is the monaco instance', monaco);
|
||||
});
|
||||
```
|
||||
|
||||
[codesandbox](https://codesandbox.io/s/init-q2ipt)
|
||||
|
||||
```javascript
|
||||
import loader from '@monaco-editor/loader';
|
||||
|
||||
const cancelable = loader.init();
|
||||
|
||||
cancelable.then(monaco => {
|
||||
console.log('You will not see it, as it is canceled');
|
||||
});
|
||||
|
||||
cancelable.cancel();
|
||||
```
|
||||
|
||||
[codesandbox](https://codesandbox.io/s/init-cancelable-9o42y)
|
||||
|
||||
#### Notes
|
||||
|
||||
##### For `electron` users
|
||||
|
||||
In general it works fine with electron, but there are several cases that developers usually face to and sometimes it can be confusing. Here they are:
|
||||
|
||||
1) **Download process fails** or if you use @monaco-editor/react **You see loading screen stuck**
|
||||
Usually, it's because your environment doesn't allow you to load external sources. By default, it loads monaco sources from CDN. You can see the [default configuration](https://github.com/suren-atoyan/monaco-loader/blob/master/src/config/index.js#L3). But sure you can change that behavior; the library is fully configurable. Read about it [here](https://github.com/suren-atoyan/monaco-loader#config). So, if you want to download it from your local files, you can do it like this:
|
||||
|
||||
```javascript
|
||||
import loader from '@monaco-editor/loader';
|
||||
|
||||
loader.config({ paths: { vs: '../path-to-monaco' } });
|
||||
```
|
||||
|
||||
or, if you want to use it as an npm package, you can do it like this:
|
||||
|
||||
```javascript
|
||||
import loader from '@monaco-editor/loader';
|
||||
import * as monaco from 'monaco-editor';
|
||||
|
||||
loader.config({ monaco });
|
||||
|
||||
loader.init().then(monacoInstance => { /* ... */ });
|
||||
```
|
||||
|
||||
2) **Based on your electron environment it can be required to have an absolute URL**
|
||||
The utility function taken from [here](https://github.com/microsoft/monaco-editor-samples/blob/master/electron-amd-nodeIntegration/electron-index.html) can help you to achieve that. Let's imagine you have `monaco-editor` package installed and you want to load monaco from the `node_modules` rather than from CDN: in that case, you can write something like this:
|
||||
|
||||
```javascript
|
||||
function ensureFirstBackSlash(str) {
|
||||
return str.length > 0 && str.charAt(0) !== '/'
|
||||
? '/' + str
|
||||
: str;
|
||||
}
|
||||
|
||||
function uriFromPath(_path) {
|
||||
const pathName = path.resolve(_path).replace(/\\/g, '/');
|
||||
return encodeURI('file://' + ensureFirstBackSlash(pathName));
|
||||
}
|
||||
|
||||
loader.config({
|
||||
paths: {
|
||||
vs: uriFromPath(
|
||||
path.join(__dirname, '../node_modules/monaco-editor/min/vs')
|
||||
)
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
or, just use it as an npm package.
|
||||
|
||||
There were several issues about this topic that can be helpful too - [1](https://github.com/suren-atoyan/monaco-react/issues/48) [2](https://github.com/suren-atoyan/monaco-react/issues/12) [3](https://github.com/suren-atoyan/monaco-react/issues/58) [4](https://github.com/suren-atoyan/monaco-react/issues/87)
|
||||
|
||||
And if you use `electron` with `monaco` and have faced an issue different than the above-discribed ones, please let us know to make this section more helpful.
|
||||
|
||||
##### For `Next.js` users
|
||||
|
||||
The part of the source that should be pre-parsed is optimized for server-side rendering, so, in usual cases, it will work fine, but if you want to have access, for example, to [`monacoInstance`](#config) you should be aware that it wants to access the `document` object, and it requires browser environment. Basically you just need to avoid running that part out of browser environment, there are several ways to do that. One of them is described [here](https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr).
|
||||
|
||||
And if you use `monaco` with `Next.js` and have faced an issue different than the above-described one, please let us know to make this section more helpful.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE)
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
import js from '@eslint/js';
|
||||
|
||||
export default [
|
||||
js.configs.recommended,
|
||||
{
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
sourceType: 'module',
|
||||
globals: {
|
||||
// Browser globals
|
||||
window: 'readonly',
|
||||
document: 'readonly',
|
||||
navigator: 'readonly',
|
||||
console: 'readonly',
|
||||
setTimeout: 'readonly',
|
||||
clearTimeout: 'readonly',
|
||||
setInterval: 'readonly',
|
||||
clearInterval: 'readonly',
|
||||
fetch: 'readonly',
|
||||
Promise: 'readonly',
|
||||
// ES2020 globals
|
||||
globalThis: 'readonly',
|
||||
},
|
||||
},
|
||||
rules: {},
|
||||
},
|
||||
{
|
||||
ignores: ['**/spec.js', '**/*.spec.js', 'node_modules/**', 'lib/**'],
|
||||
},
|
||||
];
|
||||
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
{
|
||||
"name": "@monaco-editor/loader",
|
||||
"version": "1.7.0",
|
||||
"description": "the library aims to setup monaco editor into your browser",
|
||||
"main": "lib/cjs/index.js",
|
||||
"module": "lib/es/index.js",
|
||||
"unpkg": "lib/umd/monaco-loader.min.js",
|
||||
"jsdelivr": "lib/umd/monaco-loader.min.js",
|
||||
"types": "lib/types.d.ts",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/suren-atoyan/monaco-loader.git"
|
||||
},
|
||||
"homepage": "https://github.com/suren-atoyan/monaco-loader.git",
|
||||
"author": "Suren Atoyan <contact@surenatoyan.com>",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"test": "jest",
|
||||
"test-watch": "npm run build && jest --watch",
|
||||
"coverage": "jest --collect-coverage",
|
||||
"lint": "npx eslint src",
|
||||
"prepublishOnly": "npm test && npm run lint && npm run build",
|
||||
"build": "rollup -c && cp ./src/types.d.ts ./lib/",
|
||||
"prepare": "husky"
|
||||
},
|
||||
"keywords": [
|
||||
"monaco",
|
||||
"editor",
|
||||
"loader",
|
||||
"monaco-editor",
|
||||
"monaco editor"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.25.0",
|
||||
"@babel/preset-env": "^7.25.0",
|
||||
"@rollup/plugin-babel": "^6.0.4",
|
||||
"@rollup/plugin-commonjs": "^28.0.0",
|
||||
"@rollup/plugin-node-resolve": "^15.3.0",
|
||||
"@rollup/plugin-replace": "^6.0.1",
|
||||
"@rollup/plugin-terser": "^0.4.4",
|
||||
"babel-jest": "^29.7.0",
|
||||
"babel-loader": "^9.2.1",
|
||||
"eslint": "^9.14.0",
|
||||
"husky": "^9.1.6",
|
||||
"jest": "^29.7.0",
|
||||
"rollup": "^4.24.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"state-local": "^1.0.6"
|
||||
}
|
||||
}
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Monaco Loader: Playground</title>
|
||||
</head>
|
||||
<body style="height: 100vh">
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
import loader from '../src'
|
||||
|
||||
// import * as monaco from 'monaco-editor';
|
||||
// import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
|
||||
// import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
|
||||
// import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
|
||||
// import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
|
||||
// import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
|
||||
|
||||
// self.MonacoEnvironment = {
|
||||
// getWorker(_, label) {
|
||||
// if (label === 'json') {
|
||||
// return new jsonWorker()
|
||||
// }
|
||||
// if (label === 'css' || label === 'scss' || label === 'less') {
|
||||
// return new cssWorker()
|
||||
// }
|
||||
// if (label === 'html' || label === 'handlebars' || label === 'razor') {
|
||||
// return new htmlWorker()
|
||||
// }
|
||||
// if (label === 'typescript' || label === 'javascript') {
|
||||
// return new tsWorker()
|
||||
// }
|
||||
// return new editorWorker()
|
||||
// }
|
||||
// }
|
||||
|
||||
// loader.config({ monaco });
|
||||
loader.config({ paths: {
|
||||
vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.47.0/min/vs',
|
||||
} });
|
||||
loader.init().then(monaco => monaco.editor.create(document.body, {
|
||||
value: '// some comment',
|
||||
language: 'javascript',
|
||||
}));
|
||||
+1100
File diff suppressed because it is too large
Load Diff
+16
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "monaco-loader",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^6.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"monaco-editor": "^0.55.1"
|
||||
}
|
||||
}
|
||||
+78
@@ -0,0 +1,78 @@
|
||||
import nodeResolve from '@rollup/plugin-node-resolve';
|
||||
import terser from '@rollup/plugin-terser';
|
||||
import replace from '@rollup/plugin-replace';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import babel from '@rollup/plugin-babel';
|
||||
|
||||
const defaultNodeResolveConfig = {};
|
||||
const nodeResolvePlugin = nodeResolve(defaultNodeResolveConfig);
|
||||
|
||||
const commonPlugins = [
|
||||
nodeResolvePlugin,
|
||||
babel({
|
||||
presets: ['@babel/preset-env'],
|
||||
babelHelpers: 'bundled',
|
||||
}),
|
||||
commonjs(),
|
||||
];
|
||||
|
||||
const developmentPlugins = [
|
||||
...commonPlugins,
|
||||
replace({
|
||||
'process.env.NODE_ENV': JSON.stringify('development'),
|
||||
preventAssignment: true,
|
||||
}),
|
||||
];
|
||||
|
||||
const productionPlugins = [
|
||||
...commonPlugins,
|
||||
replace({
|
||||
'process.env.NODE_ENV': JSON.stringify('production'),
|
||||
preventAssignment: true,
|
||||
}),
|
||||
terser({ mangle: false }),
|
||||
];
|
||||
|
||||
const external = ['state-local'];
|
||||
|
||||
export default [
|
||||
{
|
||||
input: 'src/index.js',
|
||||
external,
|
||||
output: {
|
||||
dir: 'lib/cjs/',
|
||||
format: 'cjs',
|
||||
exports: 'named',
|
||||
preserveModules: true,
|
||||
},
|
||||
plugins: commonPlugins,
|
||||
},
|
||||
{
|
||||
input: 'src/index.js',
|
||||
external,
|
||||
output: {
|
||||
dir: 'lib/es/',
|
||||
format: 'es',
|
||||
preserveModules: true,
|
||||
},
|
||||
plugins: commonPlugins,
|
||||
},
|
||||
{
|
||||
input: 'src/index.js',
|
||||
output: {
|
||||
file: 'lib/umd/monaco-loader.js',
|
||||
format: 'umd',
|
||||
name: 'monaco_loader',
|
||||
},
|
||||
plugins: developmentPlugins,
|
||||
},
|
||||
{
|
||||
input: 'src/index.js',
|
||||
output: {
|
||||
file: 'lib/umd/monaco-loader.min.js',
|
||||
format: 'umd',
|
||||
name: 'monaco_loader',
|
||||
},
|
||||
plugins: productionPlugins,
|
||||
},
|
||||
];
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
# https://tea.xyz/what-is-this-file
|
||||
---
|
||||
version: 1.0.0
|
||||
codeOwners:
|
||||
- '0x8958579fcDE99f81808e6c89aCFeEc3DF93Ad9bb'
|
||||
quorum: 1
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
# These are supported funding model platforms
|
||||
|
||||
github: [suren-atoyan]
|
||||
patreon: suren_atoyan
|
||||
open_collective: # Replace with a single Open Collective username
|
||||
ko_fi: # Replace with a single Ko-fi username
|
||||
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
|
||||
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
|
||||
liberapay: # Replace with a single Liberapay username
|
||||
issuehunt: # Replace with a single IssueHunt username
|
||||
otechie: # Replace with a single Otechie username
|
||||
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
---
|
||||
name: Bug report
|
||||
about: Create a report to help us improve
|
||||
title: ''
|
||||
labels: ''
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
**Describe the bug**
|
||||
A clear and concise description of what the bug is.
|
||||
|
||||
**To Reproduce**
|
||||
|
||||
Steps to reproduce the behavior:
|
||||
1. Go to '...'
|
||||
2. Click on '....'
|
||||
3. Scroll down to '....'
|
||||
4. See error
|
||||
|
||||
Or, please add a minimal code snippet to reproduce the issue, for example in [codesandbox](https://codesandbox.io/).
|
||||
|
||||
**Expected behavior**
|
||||
A clear and concise description of what you expected to happen.
|
||||
|
||||
**Screenshots**
|
||||
If applicable, add screenshots to help to explain your problem.
|
||||
|
||||
**Desktop (please complete the following information):**
|
||||
- OS: [e.g. iOS]
|
||||
- Browser [e.g. chrome, safari]
|
||||
- Version [e.g. 22]
|
||||
|
||||
**Additional context**
|
||||
Add any other context about the problem here.
|
||||
Generated
Vendored
+20
@@ -0,0 +1,20 @@
|
||||
---
|
||||
name: Feature request
|
||||
about: Suggest an idea for this project
|
||||
title: ''
|
||||
labels: ''
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
**Is your feature request related to a problem? Please describe.**
|
||||
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
|
||||
|
||||
**Describe the solution you'd like**
|
||||
A clear and concise description of what you want to happen.
|
||||
|
||||
**Describe alternatives you've considered**
|
||||
A clear and concise description of any alternative solutions or features you've considered.
|
||||
|
||||
**Additional context**
|
||||
Add any other context or screenshots about the feature request here.
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"printWidth": 100,
|
||||
"trailingComma": "all"
|
||||
}
|
||||
+660
@@ -0,0 +1,660 @@
|
||||
### Versions
|
||||
|
||||
## 4.7.0
|
||||
|
||||
- package: update @monaco-editor/loader to the latest (v1.5.0) version (this uses monaco-editor v0.52.2)
|
||||
- package: inherit all changes from v4.7.0-rc.0
|
||||
|
||||
## 4.7.0-rc.0
|
||||
|
||||
- package: add support for react/react-dom v19 as a peer dependency
|
||||
- playground: update playground's React version to 19
|
||||
|
||||
## 4.6.0
|
||||
|
||||
###### _Oct 6, 2023_
|
||||
|
||||
- Editor/DiffEditor: use `'use client'` on top of `Editor.tsx` and `DiffEditor.tsx`
|
||||
- loader: update `@monaco-editor/loader` version (1.4.0)
|
||||
- playground: use createRoot for bootstrapping
|
||||
|
||||
## 4.5.2
|
||||
|
||||
###### _Aug 23, 2023_
|
||||
|
||||
- DiffEditor: apply updated on `originalModelPath` and `modifiedModelPath` before `original` and `modified` props
|
||||
|
||||
## 4.5.1
|
||||
|
||||
###### _May 5, 2023_
|
||||
|
||||
- DiffEditor: track `originalModelPath` and `modifiedModelPath` changes and get or create a new model accordingly
|
||||
- types: fix typo in comment
|
||||
- package: replace `prepublish` with `prepublishOnly`
|
||||
|
||||
## 4.5.0
|
||||
|
||||
###### _Apr 7, 2023_
|
||||
|
||||
- Editor: implement `preventTriggerChangeEvent` flag
|
||||
|
||||
from `4.5.0-beta.0`
|
||||
|
||||
- DiffEditor: add preventCreation flag to diff editor
|
||||
- project: rewrite with TypeScript
|
||||
- project: implement prettier
|
||||
- loader: update `@monaco-editor/loader` version (1.3.2)
|
||||
|
||||
## 4.5.0-beta.0
|
||||
|
||||
###### _Apr 2, 2023_
|
||||
|
||||
- DiffEditor: add preventCreation flag to diff editor
|
||||
- project: rewrite with TypeScript
|
||||
- project: implement prettier
|
||||
- loader: update `@monaco-editor/loader` version (1.3.2)
|
||||
|
||||
## 4.4.6
|
||||
|
||||
###### _Sep 24, 2022_
|
||||
|
||||
- fix onChange: unconditionally call onChange inside onDidChangeModelContent
|
||||
- add preventCreation flag
|
||||
- update lock files
|
||||
|
||||
## 4.4.5
|
||||
|
||||
###### _May 11, 2022_
|
||||
|
||||
- loader: update `@monaco-editor/loader` version (1.3.2)
|
||||
|
||||
## 4.4.4
|
||||
|
||||
###### _Apr 23, 2022_
|
||||
|
||||
- package: fix npm prepublish step
|
||||
|
||||
## 4.4.3
|
||||
|
||||
###### _Apr 23, 2022_
|
||||
|
||||
- loader: update `@monaco-editor/loader` version (1.3.1)
|
||||
|
||||
## 4.4.2
|
||||
|
||||
###### _Apr 12, 2022_
|
||||
|
||||
- package: support react/react-dom v18 as a peer dependency
|
||||
|
||||
## 4.4.1
|
||||
|
||||
###### _Mar 29, 2022_
|
||||
|
||||
- types: add missing type `monaco` in `loader.config`
|
||||
|
||||
## 4.4.0
|
||||
|
||||
###### _Mar 28, 2022_
|
||||
|
||||
- loader: update `@monaco-editor/loader` version (1.3.0); using `monaco` from `node_modules` is supported
|
||||
- playground: update playground packages
|
||||
|
||||
## 4.3.1
|
||||
|
||||
###### _Oct 3, 2021_
|
||||
|
||||
- types: update types according to the new `loader` version and the new `wrapperProps` property
|
||||
|
||||
## 4.3.0
|
||||
|
||||
###### _Oct 3, 2021_
|
||||
|
||||
- Editor/DiffEditor: add `wrapperProps` property
|
||||
- DiffEditor: allow `DiffEditor` to use existing models
|
||||
- package.json: update `@monaco-editor/loader` version to `v1.2.0` (monaco version 0.28.1)
|
||||
|
||||
## 4.2.2
|
||||
|
||||
###### _Aug 9, 2021_
|
||||
|
||||
- Editor: `onValidate` integrate `onDidChangeMarkers` (released in `v0.22.0`)
|
||||
- package.json: after `onDidChangeMarkers` integration `state-local` became redundant; remove it
|
||||
|
||||
## 4.2.1
|
||||
|
||||
###### _Jun 21, 2021_
|
||||
|
||||
- loader: update `@monaco-editor/loader` package version to the latest one (v1.1.1)
|
||||
- monaco-editor: set `monaco-editor` peerDependency version to `>= 0.25.0 < 1`
|
||||
- tests: update snapshots
|
||||
|
||||
## 4.2.0
|
||||
|
||||
###### _Jun 13, 2021_
|
||||
|
||||
- loader: update `@monaco-editor/loader` package version to the latest one (v1.1.0)
|
||||
- demo: update demo examples
|
||||
- tests: update snapshots
|
||||
|
||||
## 4.1.3
|
||||
|
||||
###### _Apr 21, 2021_
|
||||
|
||||
- types: add `keepCurrentOriginalModel` and `keepCurrentModifiedModel` to type definition
|
||||
|
||||
## 4.1.2
|
||||
|
||||
###### _Apr 19, 2021_
|
||||
|
||||
- DiffEditor: add `keepCurrentOriginalModel` and `keepCurrentModifiedModel` properties; indicator whether to dispose the current original/modified model when the DiffEditor is unmounted or not
|
||||
- package.json: update monaco-editor peerDependency to the lates one (0.23.0)
|
||||
|
||||
## 4.1.1
|
||||
|
||||
###### _Apr 2, 2021_
|
||||
|
||||
- DiffEditor: update `DiffEditor`'s `modified` value by `executeEdits`
|
||||
- README: add an example for getting the values of `DiffEditor`
|
||||
|
||||
## 4.1.0
|
||||
|
||||
###### _Mar 15, 2021_
|
||||
|
||||
- loader: update @monaco-editor/loader dependency to version 1.0.1
|
||||
- types: fix Theme type; vs-dark instead of dark
|
||||
|
||||
## 4.0.11
|
||||
|
||||
###### _Feb 27, 2021_
|
||||
|
||||
- Editor: add an additional check in case if `line` is undefined
|
||||
|
||||
## 4.0.10
|
||||
|
||||
###### _Feb 16, 2021_
|
||||
|
||||
- Editor: use `revealLine` for line update instead of `setScrollPosition`
|
||||
|
||||
## 4.0.9
|
||||
|
||||
###### _Jan 29, 2021_
|
||||
|
||||
- Editor: save and restore current model view state, if `keepCurrentModel` is true
|
||||
|
||||
## 4.0.8
|
||||
|
||||
###### _Jan 29, 2021_
|
||||
|
||||
- Editor: add `keepCurrentModel` property to the `Editor` component; indicator whether to dispose the current model when the Editor is unmounted or not
|
||||
|
||||
## 4.0.7
|
||||
|
||||
###### _Jan 21, 2021_
|
||||
|
||||
- Editor: fire `onValidate` unconditionally, always, with the current model markers
|
||||
|
||||
## 4.0.6
|
||||
|
||||
###### _Jan 19, 2021_
|
||||
|
||||
- DiffEditor: check if `originalModelPath` and `modifiedModelPath` exist in `setModels` function
|
||||
- DiffEditor: remove `originalModelPath` and `modifiedModelPath` from `defaultProps`
|
||||
|
||||
## 4.0.5
|
||||
|
||||
###### _Jan 19, 2021_
|
||||
|
||||
- utils: check if `path` exists in `createModel` utility function
|
||||
- Editor: remove `defaultPath` from `defaultProps`
|
||||
|
||||
## 4.0.4
|
||||
|
||||
###### _Jan 18, 2021_
|
||||
|
||||
- package.json: update husky precommit hook to remove lib folder
|
||||
|
||||
## 4.0.3
|
||||
|
||||
###### _Jan 18, 2021_
|
||||
|
||||
- Editor: enable multi-model support
|
||||
- types: add `path`, `defaultLanguage` and `saveViewState` for multi-model support
|
||||
|
||||
## 4.0.2
|
||||
|
||||
###### _Jan 18, 2021_
|
||||
|
||||
- types: declare and export `useMonaco` type
|
||||
|
||||
## 4.0.1
|
||||
|
||||
###### _Jan 18, 2021_
|
||||
|
||||
- Editor: dispose the current model if the Editor component is unmounted
|
||||
|
||||
## 4.0.0
|
||||
|
||||
###### _Jan 16, 2021_
|
||||
|
||||
- package.json: update dependency (`@monaco-editor/loader`) version to - `v1.0.0`
|
||||
- hooks: create `useMonaco` hook
|
||||
- lib: export (named) `useMonaco` from the entry file
|
||||
- monaco: rename the main utility: monaco -> loader
|
||||
- Editor/Diff: rename `editorDidMount` to `onMount`
|
||||
- Editor/Diff: expose monaco instance from `onMount` as a second argument (first is the editor instance)
|
||||
- Editor/Diff: add `beforeMount` prop: function with a single argument -> monaco instance
|
||||
- Editor: add `defaultModelPath` prop, use it as a default model path
|
||||
- Editor: add `defaultValue` prop and use it during default model creation
|
||||
- Editor: add subscription (`onChange` prop) to listen default model content change
|
||||
- Editor: remove `_isControlledMode` prop
|
||||
- Diff: add `originalModelPath` and `modifiedModelPath` props, use them as model paths for original/modified models
|
||||
- ControlledEditor: remove; the `Editor` component, now, handles both controlled and uncontrolled modes
|
||||
- package.json: move `prop-types` to dependencies
|
||||
- types: fix types according to changed
|
||||
- Editor: add `onValidate` prop: an event emitted when the length of the model markers of the current model isn't 0
|
||||
|
||||
## 3.8.3
|
||||
|
||||
###### _Jan 8, 2021_
|
||||
|
||||
- README: fix DiffEditor `options` prop type name
|
||||
- types: rename index.d.ts to types.d.ts
|
||||
|
||||
## 3.8.2
|
||||
|
||||
###### _Jan 7, 2021_
|
||||
|
||||
- package.json: add `@monaco-editor/loader` as a dependency
|
||||
- Editor/Diff Editor components: use `@monaco-editor/loader` instead of `monaco` utility
|
||||
- utilities: remove utilities that were being replaced by the `@monaco-editor/loader`
|
||||
- utilities: collect remaining utilities all in the entry file / add some new ones for the next version
|
||||
- config: remove config as it's already replaced by the `@monaco-editor/loader`
|
||||
- hooks: create `usePrevious` hook
|
||||
- cs: coding style fixes
|
||||
- build: use `Rollup` as a build system; now, we have bundles for `cjs/es/umd`
|
||||
|
||||
## 3.7.5
|
||||
|
||||
###### _Jan 3, 2021_
|
||||
|
||||
- utilities (monaco): fix `state-local` import
|
||||
|
||||
## 3.7.4
|
||||
|
||||
###### _Dec 16, 2020_
|
||||
|
||||
- Editor/Diff Editor components: fix `componentDidMount` call order
|
||||
- src: (minor) some corrections according to coding style
|
||||
|
||||
## 3.7.3
|
||||
|
||||
###### _Dec 15, 2020_
|
||||
|
||||
- Editor component: set `forceMoveMarkers` `true` in `executeEdits`
|
||||
|
||||
## 3.7.2
|
||||
|
||||
###### _Dec 5, 2020_
|
||||
|
||||
- package: add react/react-dom 17 version as a peer dependency
|
||||
|
||||
## 3.7.1
|
||||
|
||||
###### _Nov 29, 2020_
|
||||
|
||||
- editor: fix - remove unnecessary `value set` before language update
|
||||
|
||||
## 3.7.0
|
||||
|
||||
###### _Nov 11, 2020_
|
||||
|
||||
- monaco: update monaco version to 0.21.2
|
||||
|
||||
## 3.6.3
|
||||
|
||||
###### _Sep 22, 2020_
|
||||
|
||||
- types: add missing props; `className` and `wrapperClassName`
|
||||
|
||||
## 3.6.2
|
||||
|
||||
###### _Aug 19, 2020_
|
||||
|
||||
- eslint: update eslint rules: add 'eslint:recommended' and 'no-unused-vars' -> 'error'
|
||||
- src: refactor according to new eslint rules
|
||||
- package.json: update github username, add author email
|
||||
|
||||
## 3.6.1
|
||||
|
||||
###### _Aug 18, 2020_
|
||||
|
||||
- ControlledEditor: store current value in ref instead of making it a dependency of `handleEditorModelChange`
|
||||
|
||||
## 3.6.0
|
||||
|
||||
###### _Aug 18, 2020_
|
||||
|
||||
- ControlledEditor: fix onChange handler issue; dispose prev listener and attach a new one for every new onChange
|
||||
- ControlledEditor: do not trigger onChange in programmatic changes
|
||||
|
||||
## 3.5.7
|
||||
|
||||
###### _Aug 9, 2020_
|
||||
|
||||
- utilities (monaco): remove intermediate function for injecting scripts
|
||||
|
||||
## 3.5.6
|
||||
|
||||
###### _Aug 6, 2020_
|
||||
|
||||
- dependencies: add `state-local` as a dependency (replace with `local-state` util)
|
||||
|
||||
## 3.5.5
|
||||
|
||||
###### _Aug 3, 2020_
|
||||
|
||||
- dependencies: move `@babel/runtime` from peer dependencies to dependencies
|
||||
|
||||
## 3.5.4
|
||||
|
||||
###### _Aug 3, 2020_
|
||||
|
||||
- dependencies: add `@babel/runtime` as a peer dependency
|
||||
|
||||
## 3.5.3
|
||||
|
||||
###### _Aug 3, 2020_
|
||||
|
||||
- babel: update babel version (v.7.11.0) / activate helpers (decrease bundle size)
|
||||
- hooks: move out hooks from utils to root
|
||||
- utilities: remove utils/store to utils/local-state
|
||||
|
||||
## 3.5.2
|
||||
|
||||
###### _Aug 2, 2020_
|
||||
|
||||
- utilities: redesign `store` utility
|
||||
|
||||
## 3.5.1
|
||||
|
||||
###### _July 30, 2020_
|
||||
|
||||
- utilities (monaco): correct config obj name
|
||||
|
||||
## 3.5.0
|
||||
|
||||
###### _July 30, 2020_
|
||||
|
||||
- utilities (monaco): redesign utility `monaco`; get rid of class, make it more fp
|
||||
- utilities: create `compose` utility
|
||||
- utilities: create `store` utility; for internal usage (in other utilities)
|
||||
|
||||
## 3.4.2
|
||||
|
||||
###### _July 15, 2020_
|
||||
|
||||
- controlled editor: fix undo/redo issue
|
||||
|
||||
## 3.4.1
|
||||
|
||||
###### _July 3, 2020_
|
||||
|
||||
- editor: improve initialization error handling
|
||||
|
||||
## 3.4.0
|
||||
|
||||
###### _June 28, 2020_
|
||||
|
||||
- editor: fix 'readOnly' option check
|
||||
- editor: add className and wrapperClassName props
|
||||
- diffEditor: add className and wrapperClassName props
|
||||
|
||||
## 3.3.2
|
||||
|
||||
###### _June 20, 2020_
|
||||
|
||||
- utils: (monaco) add a possibility to pass src of config script
|
||||
|
||||
## 3.3.1
|
||||
|
||||
###### _May 30, 2020_
|
||||
|
||||
- editor: add overrideServices prop
|
||||
|
||||
## 3.2.1
|
||||
|
||||
###### _Apr 13, 2020_
|
||||
|
||||
- package: update default package version to 0.20.0
|
||||
|
||||
## 3.2.1
|
||||
|
||||
###### _Mar 31, 2020_
|
||||
|
||||
- types: fix monaco.config types
|
||||
|
||||
## 3.2.0
|
||||
|
||||
###### _Mar 31, 2020_
|
||||
|
||||
- fix: check the existence of target[key] in deepMerge
|
||||
- config: deprecate indirect way of configuration and add deprecation message
|
||||
- config: create a new structure of the configuration; the passed object will be directly passed to require.config
|
||||
- readme: redesign the config section according to the new structure
|
||||
|
||||
## 3.1.2
|
||||
|
||||
###### _Mar 16, 2020_
|
||||
|
||||
- diff editor: remove line prop as it's not used (and can't be used)
|
||||
|
||||
## 3.1.1
|
||||
|
||||
###### _Feb 25, 2020_
|
||||
|
||||
- package: update devDependencies
|
||||
- demo: update all dependencies
|
||||
|
||||
## 3.1.0
|
||||
|
||||
###### _Feb 6, 2020_
|
||||
|
||||
- monaco: update monaco version to 0.19.0
|
||||
- utils: create new util - makeCancelable (for promises)
|
||||
- editor/diffEditor: cancel promise before unmount
|
||||
- demo: make "dark" default theme, update package version
|
||||
|
||||
## 3.0.1
|
||||
|
||||
###### _Dec 26, 2019_
|
||||
|
||||
- readme: update installation section
|
||||
|
||||
## 3.0.0
|
||||
|
||||
###### _Dec 24, 2019_
|
||||
|
||||
- monaco: update monaco version to 0.19.0
|
||||
|
||||
## 2.6.1
|
||||
|
||||
###### _Dec 23, 2019_
|
||||
|
||||
- versions: fix version
|
||||
|
||||
## 2.5.1
|
||||
|
||||
###### _Dec 23, 2019_
|
||||
|
||||
- types: fix type of "loading"
|
||||
|
||||
## 2.5.0
|
||||
|
||||
###### _Dec 19, 2019_
|
||||
|
||||
- types: fix type of theme; user should be able to pass any kind of theme (string)
|
||||
|
||||
## 2.4.0
|
||||
|
||||
###### _Dec 11, 2019_
|
||||
|
||||
- types: add config into namespace monaco
|
||||
- types: change type of "loading" from React.ElementType to React.ReactNode
|
||||
|
||||
## 2.3.5
|
||||
|
||||
###### _Dec 10, 2019_
|
||||
|
||||
- optimize babel build with runtime transform
|
||||
|
||||
## 2.3.4
|
||||
|
||||
###### _Dec 10, 2019_
|
||||
|
||||
- add xxx.spec.js.snap files to npmignore
|
||||
|
||||
## 2.3.2 & 3
|
||||
|
||||
###### _Dec 10, 2019_
|
||||
|
||||
- fix typo in npmignore
|
||||
|
||||
## 2.3.1
|
||||
|
||||
###### _Dec 10, 2019_
|
||||
|
||||
- add unnecessary files to npmignore
|
||||
|
||||
## 2.3.0
|
||||
|
||||
###### _Nov 9, 2019_
|
||||
|
||||
- prevent onchange in case of undo/redo (controlled editor)
|
||||
- create separate component for MonacoContainer
|
||||
|
||||
## 2.2.0
|
||||
|
||||
###### _Nov 9, 2019_
|
||||
|
||||
- force additional tokenization in controlled mode to avoid blinking
|
||||
|
||||
## 2.1.1
|
||||
|
||||
###### _Oct 25, 2019_
|
||||
|
||||
- fix "options" types
|
||||
|
||||
## 2.1.0
|
||||
|
||||
###### _Oct 25, 2019_
|
||||
|
||||
- add monaco-editor as peer dependency for proper type definitions
|
||||
- write more proper types
|
||||
|
||||
## 2.0.0
|
||||
|
||||
###### _Oct 9, 2019_
|
||||
|
||||
- set the default version of monaco to 0.18.1
|
||||
- set last value by .setValue method before changing the language
|
||||
|
||||
## 1.2.3
|
||||
|
||||
###### _Oct 7, 2019_
|
||||
|
||||
- (TYPES) add "void" to the "ControlledEditorOnChange" return types
|
||||
|
||||
## 1.2.2
|
||||
|
||||
###### _Oct 3, 2019_
|
||||
|
||||
- update dev dependencies
|
||||
- check editor existence in "removeEditor" function
|
||||
- replace "jest-dom" with "@testing-library/jest-dom"
|
||||
|
||||
## 1.2.1
|
||||
|
||||
###### _Aug 20, 2019_
|
||||
|
||||
- Set editor value directly in case of read only
|
||||
|
||||
## 1.2.0
|
||||
|
||||
###### _Aug 16, 2019_
|
||||
|
||||
- Add method to modify default config
|
||||
|
||||
## 1.1.0
|
||||
|
||||
###### _July 26, 2019_
|
||||
|
||||
- Apply edit by using `executeEdits` method
|
||||
- Correct ControlledEditor usage examples in Docs
|
||||
|
||||
## 1.0.8
|
||||
|
||||
###### _July 24, 2019_
|
||||
|
||||
- Export utility 'monaco' to be able to access to the monaco instance
|
||||
|
||||
## 1.0.7
|
||||
|
||||
###### _July 21, 2019_
|
||||
|
||||
- Add controlled version of editor component
|
||||
|
||||
## 1.0.5
|
||||
|
||||
###### _July 19, 2019_
|
||||
|
||||
- Add a possibility to interact with Editor before it is mounted
|
||||
|
||||
## 1.0.4
|
||||
|
||||
###### _July 13, 2019_
|
||||
|
||||
- FIX: add "types" fild to package.json
|
||||
|
||||
## 1.0.3
|
||||
|
||||
###### _July 13, 2019_
|
||||
|
||||
- Add basic support for TypeScript
|
||||
|
||||
## 1.0.2
|
||||
|
||||
###### _June 26, 2019_
|
||||
|
||||
- Update package description
|
||||
|
||||
## 1.0.1
|
||||
|
||||
###### _June 26, 2019_
|
||||
|
||||
- Move from 'unpkg.com' to 'cdn.jsdelivr.net' (NOTE: in the future, it will be configurable)
|
||||
|
||||
## 1.0.0
|
||||
|
||||
###### _June 25, 2019_
|
||||
|
||||
:tada: First stable version :tada:
|
||||
|
||||
- Add monaco version to CDN urls to avoid 302 redirects
|
||||
|
||||
## 0.0.3
|
||||
|
||||
###### _June 22, 2019_
|
||||
|
||||
- Remove redundant peer dependency
|
||||
|
||||
## 0.0.2
|
||||
|
||||
###### _June 22, 2019_
|
||||
|
||||
- Make text-align of the wrapper of editors independent from outside
|
||||
|
||||
## 0.0.1
|
||||
|
||||
###### _June 21, 2019_
|
||||
|
||||
First version of the library
|
||||
+76
@@ -0,0 +1,76 @@
|
||||
# Contributor Covenant Code of Conduct
|
||||
|
||||
## Our Pledge
|
||||
|
||||
In the interest of fostering an open and welcoming environment, we as
|
||||
contributors and maintainers pledge to making participation in our project and
|
||||
our community a harassment-free experience for everyone, regardless of age, body
|
||||
size, disability, ethnicity, sex characteristics, gender identity and expression,
|
||||
level of experience, education, socio-economic status, nationality, personal
|
||||
appearance, race, religion, or sexual identity and orientation.
|
||||
|
||||
## Our Standards
|
||||
|
||||
Examples of behavior that contributes to creating a positive environment
|
||||
include:
|
||||
|
||||
* Using welcoming and inclusive language
|
||||
* Being respectful of differing viewpoints and experiences
|
||||
* Gracefully accepting constructive criticism
|
||||
* Focusing on what is best for the community
|
||||
* Showing empathy towards other community members
|
||||
|
||||
Examples of unacceptable behavior by participants include:
|
||||
|
||||
* The use of sexualized language or imagery and unwelcome sexual attention or
|
||||
advances
|
||||
* Trolling, insulting/derogatory comments, and personal or political attacks
|
||||
* Public or private harassment
|
||||
* Publishing others' private information, such as a physical or electronic
|
||||
address, without explicit permission
|
||||
* Other conduct which could reasonably be considered inappropriate in a
|
||||
professional setting
|
||||
|
||||
## Our Responsibilities
|
||||
|
||||
Project maintainers are responsible for clarifying the standards of acceptable
|
||||
behavior and are expected to take appropriate and fair corrective action in
|
||||
response to any instances of unacceptable behavior.
|
||||
|
||||
Project maintainers have the right and responsibility to remove, edit, or
|
||||
reject comments, commits, code, wiki edits, issues, and other contributions
|
||||
that are not aligned to this Code of Conduct, or to ban temporarily or
|
||||
permanently any contributor for other behaviors that they deem inappropriate,
|
||||
threatening, offensive, or harmful.
|
||||
|
||||
## Scope
|
||||
|
||||
This Code of Conduct applies both within project spaces and in public spaces
|
||||
when an individual is representing the project or its community. Examples of
|
||||
representing a project or community include using an official project e-mail
|
||||
address, posting via an official social media account, or acting as an appointed
|
||||
representative at an online or offline event. Representation of a project may be
|
||||
further defined and clarified by project maintainers.
|
||||
|
||||
## Enforcement
|
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
||||
reported by contacting the project team at contact@surenatoyan.com. All
|
||||
complaints will be reviewed and investigated and will result in a response that
|
||||
is deemed necessary and appropriate to the circumstances. The project team is
|
||||
obligated to maintain confidentiality with regard to the reporter of an incident.
|
||||
Further details of specific enforcement policies may be posted separately.
|
||||
|
||||
Project maintainers who do not follow or enforce the Code of Conduct in good
|
||||
faith may face temporary or permanent repercussions as determined by other
|
||||
members of the project's leadership.
|
||||
|
||||
## Attribution
|
||||
|
||||
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
|
||||
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
|
||||
|
||||
[homepage]: https://www.contributor-covenant.org
|
||||
|
||||
For answers to common questions about this code of conduct, see
|
||||
https://www.contributor-covenant.org/faq
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2018 Suren Atoyan
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
+829
@@ -0,0 +1,829 @@
|
||||
# @monaco-editor/react · [](https://www.npmjs.com/package/@monaco-editor/react) [](https://github.com/suren-atoyan/monaco-react/blob/master/LICENSE) [](https://www.npmjs.com/package/@monaco-editor/react) [](https://github.com/suren-atoyan/monaco-react/pulls)
|
||||
|
||||
<a href="http://monaco-react.surenatoyan.com/" target="_blank" rel="noreferrer">
|
||||
<img align="center" width="100%" height="auto" src="./playground/logo.svg" style="margin-bottom: 10px">
|
||||
</a>
|
||||
|
||||
<p />
|
||||
|
||||
Monaco Editor for React · use the [monaco-editor](https://microsoft.github.io/monaco-editor/) in **any** [React](https://reactjs.org/) application without needing to use `webpack` (or `rollup`/`parcel`/etc) configuration files / plugins
|
||||
|
||||
<hr />
|
||||
|
||||
- :loudspeaker: for React `v19` users: check out the `v4.7.0-rc.0` version (use `npm install @monaco-editor/react@next` or `yarn add @monaco-editor/react@next`) and let us know if you face any issues
|
||||
- :keyboard: rewritten with `TypeScript` :fire:
|
||||
- :zap: [multi-model editor](#multi-model-editor) is already supported; enjoy it :tada:
|
||||
- :tada: version `v4` is here - to see what's new in the new version and how to migrate from `v3`, please read this [doc](./v4.changes.md) (also, if you need the old version `README`, it's [here](https://github.com/suren-atoyan/monaco-react/blob/v3.8.3/README.md))
|
||||
- :video_game: the new section [Development / Playground](#development-playground) has been created - now you can run the playground and play with the internals of the library
|
||||
- :dizzy: it's already integrated with [@monaco-editor/loader](https://github.com/suren-atoyan/monaco-loader)
|
||||
|
||||
<hr />
|
||||
|
||||
## Synopsis
|
||||
|
||||
`Monaco` editor wrapper for easy/one-line integration with any `React` application without needing to use `webpack` (or any other module bundler) configuration files / plugins. It can be used with apps generated by `create-react-app`, `create-snowpack-app`, `vite`, `Next.js` or any other app generators - **you don't need to eject or rewire them**.
|
||||
|
||||
## Motivation
|
||||
|
||||
The [monaco-editor](https://microsoft.github.io/monaco-editor/) is a well-known web technology based code editor that powers [VS Code](https://code.visualstudio.com/). This library handles the setup process of the `monaco-editor` and provides a clean `API` to interact with `monaco` from any `React` environment
|
||||
|
||||
#### Demo
|
||||
|
||||
[Check it out!](https://monaco-react.surenatoyan.com/)
|
||||
|
||||
## Documentation
|
||||
|
||||
- [Installation](#installation)
|
||||
- [Introduction](#introduction)
|
||||
- [Usage](#usage)
|
||||
- [Simple usage](#simple-usage)
|
||||
- [Get value](#get-value)
|
||||
- [`editor instance`](#editor-instance)
|
||||
- [`monaco instance`](#monaco-instance)
|
||||
- [`useMonaco`](#usemonaco)
|
||||
- [`loader/config`](#loader-config)
|
||||
- [Multi-model editor](#multi-model-editor)
|
||||
- [`onValidate`](#onvalidate)
|
||||
- [Notes](#notes)
|
||||
- [For `electron` users](#for-electron-users)
|
||||
- [For `Next.js` users](#for-nextjs-users)
|
||||
- [Create your own editor!](#create-your-own-editor)
|
||||
- [Development / Playground](#development-playground)
|
||||
- [Props](#props)
|
||||
- [`Editor`](#editor)
|
||||
- [`Diff Editor`](#diffeditor)
|
||||
|
||||
### Installation
|
||||
|
||||
```bash
|
||||
npm install @monaco-editor/react # or @monaco-editor/react@next for React v19
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```bash
|
||||
yarn add @monaco-editor/react
|
||||
```
|
||||
|
||||
or you can use `CDN`. [Here is an example](https://codesandbox.io/s/cdn-example-fnhfr?file=/index.html)
|
||||
|
||||
**NOTE**: For `TypeScript` type definitions, this package uses the [monaco-editor](https://www.npmjs.com/package/monaco-editor) package as a peer dependency. So, if you need types and don't already have the [monaco-editor](https://www.npmjs.com/package/monaco-editor) package installed, you will need to do so
|
||||
|
||||
## Ask AI
|
||||
|
||||
[Monaco-React](https://codeparrot.ai/oracle?owner=suren-atoyan&repo=monaco-react) AI will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.
|
||||
|
||||
|
||||
### Introduction
|
||||
|
||||
Besides types, the library exports `Editor`and `DiffEditor` components, as well as the `loader` utility and the `useMonaco` hook:
|
||||
|
||||
```javascript
|
||||
import Editor, { DiffEditor, useMonaco, loader } from '@monaco-editor/react';
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Simple usage
|
||||
|
||||
Here is an example of a simple integration of `monaco` editor with a `React` project.
|
||||
<br />
|
||||
You just need to import and render the `Editor` component:
|
||||
|
||||
```javascript
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import Editor from '@monaco-editor/react';
|
||||
|
||||
function App() {
|
||||
return <Editor height="90vh" defaultLanguage="javascript" defaultValue="// some comment" />;
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
ReactDOM.render(<App />, rootElement);
|
||||
```
|
||||
|
||||
[codesandbox](https://codesandbox.io/s/simple-usage-uyf5n?file=/src/App.js)
|
||||
|
||||
<details><summary>Extended example</summary>
|
||||
|
||||
```javascript
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import Editor from '@monaco-editor/react';
|
||||
|
||||
function App() {
|
||||
function handleEditorChange(value, event) {
|
||||
// here is the current value
|
||||
}
|
||||
|
||||
function handleEditorDidMount(editor, monaco) {
|
||||
console.log('onMount: the editor instance:', editor);
|
||||
console.log('onMount: the monaco instance:', monaco);
|
||||
}
|
||||
|
||||
function handleEditorWillMount(monaco) {
|
||||
console.log('beforeMount: the monaco instance:', monaco);
|
||||
}
|
||||
|
||||
function handleEditorValidation(markers) {
|
||||
// model markers
|
||||
// markers.forEach(marker => console.log('onValidate:', marker.message));
|
||||
}
|
||||
|
||||
return (
|
||||
<Editor
|
||||
height="90vh"
|
||||
defaultLanguage="javascript"
|
||||
defaultValue="// some comment"
|
||||
onChange={handleEditorChange}
|
||||
onMount={handleEditorDidMount}
|
||||
beforeMount={handleEditorWillMount}
|
||||
onValidate={handleEditorValidation}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
ReactDOM.render(<App />, rootElement);
|
||||
```
|
||||
|
||||
[codesandbox](https://codesandbox.io/s/simple-usage-extended-3ivw2?file=/src/App.js)
|
||||
|
||||
</details>
|
||||
|
||||
#### Get value
|
||||
|
||||
There are two options to get the current value:
|
||||
|
||||
1. get the current model value from the `editor` instance
|
||||
|
||||
```javascript
|
||||
import React, { useRef } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import Editor from '@monaco-editor/react';
|
||||
|
||||
function App() {
|
||||
const editorRef = useRef(null);
|
||||
|
||||
function handleEditorDidMount(editor, monaco) {
|
||||
editorRef.current = editor;
|
||||
}
|
||||
|
||||
function showValue() {
|
||||
alert(editorRef.current.getValue());
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<button onClick={showValue}>Show value</button>
|
||||
<Editor
|
||||
height="90vh"
|
||||
defaultLanguage="javascript"
|
||||
defaultValue="// some comment"
|
||||
onMount={handleEditorDidMount}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
ReactDOM.render(<App />, rootElement);
|
||||
```
|
||||
|
||||
[codesandbox](https://codesandbox.io/s/get-value-r9be5?file=/src/App.js)
|
||||
|
||||
2. get the current model value via `onChange` prop
|
||||
|
||||
```javascript
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import Editor from '@monaco-editor/react';
|
||||
|
||||
function App() {
|
||||
function handleEditorChange(value, event) {
|
||||
console.log('here is the current model value:', value);
|
||||
}
|
||||
|
||||
return (
|
||||
<Editor
|
||||
height="90vh"
|
||||
defaultLanguage="javascript"
|
||||
defaultValue="// some comment"
|
||||
onChange={handleEditorChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
ReactDOM.render(<App />, rootElement);
|
||||
```
|
||||
|
||||
[codesandbox](https://codesandbox.io/s/onchange-4nf6g?file=/src/App.js)
|
||||
|
||||
<details><summary>(get the `DiffEditor` values via `editor` instance)</summary>
|
||||
|
||||
```javascript
|
||||
import React, { useRef } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import { DiffEditor } from '@monaco-editor/react';
|
||||
|
||||
function App() {
|
||||
const diffEditorRef = useRef(null);
|
||||
|
||||
function handleEditorDidMount(editor, monaco) {
|
||||
diffEditorRef.current = editor;
|
||||
}
|
||||
|
||||
function showOriginalValue() {
|
||||
alert(diffEditorRef.current.getOriginalEditor().getValue());
|
||||
}
|
||||
|
||||
function showModifiedValue() {
|
||||
alert(diffEditorRef.current.getModifiedEditor().getValue());
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<button onClick={showOriginalValue}>show original value</button>
|
||||
<button onClick={showModifiedValue}>show modified value</button>
|
||||
<DiffEditor
|
||||
height="90vh"
|
||||
language="javascript"
|
||||
original="// the original code"
|
||||
modified="// the modified code"
|
||||
onMount={handleEditorDidMount}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
ReactDOM.render(<App />, rootElement);
|
||||
```
|
||||
|
||||
[codesandbox](https://codesandbox.io/s/get-values-diffeditor-c6xrg?file=/src/App.js)
|
||||
|
||||
</details>
|
||||
|
||||
#### `editor instance`
|
||||
|
||||
The `editor` instance is exposed from the `onMount` prop as a first parameter, the second is the `monaco` instance
|
||||
|
||||
```javascript
|
||||
import React, { useRef } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import Editor from '@monaco-editor/react';
|
||||
|
||||
function App() {
|
||||
const editorRef = useRef(null);
|
||||
|
||||
function handleEditorDidMount(editor, monaco) {
|
||||
// here is the editor instance
|
||||
// you can store it in `useRef` for further usage
|
||||
editorRef.current = editor;
|
||||
}
|
||||
|
||||
return (
|
||||
<Editor
|
||||
height="90vh"
|
||||
defaultLanguage="javascript"
|
||||
defaultValue="// some comment"
|
||||
onMount={handleEditorDidMount}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
ReactDOM.render(<App />, rootElement);
|
||||
```
|
||||
|
||||
[codesandbox](https://codesandbox.io/s/editor-instance-354cr?file=/src/App.js)
|
||||
|
||||
#### `monaco instance`
|
||||
|
||||
There are three options to get the `monaco` instance:
|
||||
|
||||
1. via `onMount/beforeMount`
|
||||
|
||||
```javascript
|
||||
import React, { useRef } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import Editor from '@monaco-editor/react';
|
||||
|
||||
function App() {
|
||||
const monacoRef = useRef(null);
|
||||
|
||||
function handleEditorWillMount(monaco) {
|
||||
// here is the monaco instance
|
||||
// do something before editor is mounted
|
||||
monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true);
|
||||
}
|
||||
|
||||
function handleEditorDidMount(editor, monaco) {
|
||||
// here is another way to get monaco instance
|
||||
// you can also store it in `useRef` for further usage
|
||||
monacoRef.current = monaco;
|
||||
}
|
||||
|
||||
return (
|
||||
<Editor
|
||||
height="90vh"
|
||||
defaultLanguage="javascript"
|
||||
defaultValue="// some comment"
|
||||
beforeMount={handleEditorWillMount}
|
||||
onMount={handleEditorDidMount}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
ReactDOM.render(<App />, rootElement);
|
||||
```
|
||||
|
||||
[codesandbox](https://codesandbox.io/s/simple-usage-forked-il8kt?file=/src/App.js)
|
||||
|
||||
2. via `loader` utility
|
||||
|
||||
```javascript
|
||||
import { loader } from '@monaco-editor/react';
|
||||
|
||||
loader.init().then((monaco) => console.log('here is the monaco instance:', monaco));
|
||||
```
|
||||
|
||||
[codesandbox](https://codesandbox.io/s/monaco-instance-loader-ndzu9?file=/src/App.js)
|
||||
|
||||
3. via `useMonaco` hook
|
||||
|
||||
```javascript
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import Editor, { useMonaco } from '@monaco-editor/react';
|
||||
|
||||
function App() {
|
||||
const monaco = useMonaco();
|
||||
|
||||
useEffect(() => {
|
||||
if (monaco) {
|
||||
console.log('here is the monaco instance:', monaco);
|
||||
}
|
||||
}, [monaco]);
|
||||
|
||||
return <Editor height="90vh" defaultValue="// some comment" defaultLanguage="javascript" />;
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
ReactDOM.render(<App />, rootElement);
|
||||
```
|
||||
|
||||
[codesandbox](https://codesandbox.io/s/monaco-instance-usemonaco-88eml?file=/src/App.js)
|
||||
|
||||
#### `useMonaco`
|
||||
|
||||
`useMonaco` is a `React` hook that returns the instance of the `monaco`. But there is an important note that should be considered: the initialization process is being handled by the `loader` utility (the reference of [@monaco-editor/loader](https://github.com/suren-atoyan/monaco-loader)): that process is being done asynchronously and only once. So, if the first initiator of the initialization is `useMonaco` hook, the first returned value will be null, due to its asynchronous installation. Just check the returned value of `useMonaco`
|
||||
|
||||
```javascript
|
||||
import React, { useEffect } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import Editor, { useMonaco } from '@monaco-editor/react';
|
||||
|
||||
function App() {
|
||||
const monaco = useMonaco();
|
||||
|
||||
useEffect(() => {
|
||||
// do conditional chaining
|
||||
monaco?.languages.typescript.javascriptDefaults.setEagerModelSync(true);
|
||||
// or make sure that it exists by other ways
|
||||
if (monaco) {
|
||||
console.log('here is the monaco instance:', monaco);
|
||||
}
|
||||
}, [monaco]);
|
||||
|
||||
return <Editor height="90vh" defaultValue="// some comment" defaultLanguage="javascript" />;
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
ReactDOM.render(<App />, rootElement);
|
||||
```
|
||||
|
||||
[codesandbox](https://codesandbox.io/s/usemonaco-9rpc4)
|
||||
|
||||
#### `loader-config`
|
||||
|
||||
The library exports (named) the utility called `loader`. Basically, it's the reference of [@monaco-editor/loader](https://github.com/suren-atoyan/monaco-loader). By default, `monaco` files are being downloaded from `CDN`. There is an ability to change this behavior, and other things concerning the `AMD` loader of `monaco`. We have a default [config file](https://github.com/suren-atoyan/monaco-loader/blob/master/src/config/index.js) that you can modify by the way shown below:
|
||||
|
||||
```js
|
||||
import { loader } from '@monaco-editor/react';
|
||||
|
||||
// you can change the source of the monaco files
|
||||
loader.config({ paths: { vs: '...' } });
|
||||
|
||||
// you can configure the locales
|
||||
loader.config({ 'vs/nls': { availableLanguages: { '*': 'de' } } });
|
||||
|
||||
// or
|
||||
loader.config({
|
||||
paths: {
|
||||
vs: '...',
|
||||
},
|
||||
'vs/nls': {
|
||||
availableLanguages: {
|
||||
'*': 'de',
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
##### use `monaco-editor` as an npm package
|
||||
|
||||
Starting from version `v4.4.0` it's possible to use `monaco-editor` as an `npm` package; import it from `node_modules` and include `monaco` sources into your bundle (instead of using CDN). To make it work you can do the following:
|
||||
|
||||
```javascript
|
||||
import * as monaco from 'monaco-editor';
|
||||
import { loader } from '@monaco-editor/react';
|
||||
|
||||
loader.config({ monaco });
|
||||
|
||||
// ...
|
||||
```
|
||||
|
||||
NOTE: you should be aware that this may require additional `webpack` plugins, like [monaco-editor-webpack-plugin](https://www.npmjs.com/package/monaco-editor-webpack-plugin) or it may be impossible to use in apps generated by [CRA](https://reactjs.org/) without ejecting them.
|
||||
|
||||
If you use [Vite](https://vitejs.dev/), you need to do this:
|
||||
|
||||
```javascript
|
||||
import { loader } from '@monaco-editor/react';
|
||||
|
||||
import * as monaco from 'monaco-editor';
|
||||
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
|
||||
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
|
||||
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
|
||||
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
|
||||
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
|
||||
|
||||
self.MonacoEnvironment = {
|
||||
getWorker(_, label) {
|
||||
if (label === 'json') {
|
||||
return new jsonWorker();
|
||||
}
|
||||
if (label === 'css' || label === 'scss' || label === 'less') {
|
||||
return new cssWorker();
|
||||
}
|
||||
if (label === 'html' || label === 'handlebars' || label === 'razor') {
|
||||
return new htmlWorker();
|
||||
}
|
||||
if (label === 'typescript' || label === 'javascript') {
|
||||
return new tsWorker();
|
||||
}
|
||||
return new editorWorker();
|
||||
},
|
||||
};
|
||||
|
||||
loader.config({ monaco });
|
||||
|
||||
loader.init().then(/* ... */);
|
||||
```
|
||||
|
||||
[codesandbox](https://codesandbox.io/s/loader-ry1bb?file=/src/App.js)
|
||||
|
||||
**NOTE**: your passed object will be deeply merged with the [default one](https://github.com/suren-atoyan/monaco-loader/blob/master/src/config/index.js)
|
||||
|
||||
#### Multi-model editor
|
||||
|
||||
When you render the `Editor` component, a default model is being created. It's important to mention that when you change the `language` or `value` props, they affect the same model that has been auto-created at the mount of the component. In most cases it's okay, but the developers face problems when they want to implement a multi-model editor to support tabs/files like in `IDE`s. And previously to handle multiple models they had to do it manually and out of the component. Now, the multi-model `API` is supported :tada: Let's check how it works. There are three parameters to create a model - `value`, `language` and `path` (`monaco.editor.createModel(value, language, monaco.Uri.parse(path))`). You can consider last one (`path`) as an identifier for the model. The `Editor` component, now, has a `path` prop. When you specify a `path` prop, the `Editor` component checks if it has a model by that path or not. If yes, the existing model will be shown, otherwise, a new one will be created (and stored). Using this technique you can correspond your files with paths, and create a fully multi-model editor. You can open your file, do some changes, choose another file, and when you come back to the first one the previous model will be shown with the whole view state, text selection, undo stack, scroll position, etc. ([simple demo](https://codesandbox.io/s/multi-model-editor-kugi6?file=/src/App.js))
|
||||
|
||||
Here is a simple example: let's imagine we have a `JSON` like representation of some file structure, something like this:
|
||||
|
||||
```javascript
|
||||
const files = {
|
||||
'script.js': {
|
||||
name: 'script.js',
|
||||
language: 'javascript',
|
||||
value: someJSCodeExample,
|
||||
},
|
||||
'style.css': {
|
||||
name: 'style.css',
|
||||
language: 'css',
|
||||
value: someCSSCodeExample,
|
||||
},
|
||||
'index.html': {
|
||||
name: 'index.html',
|
||||
language: 'html',
|
||||
value: someHTMLCodeExample,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
And here is our simple multi-model editor implementation:
|
||||
|
||||
```javascript
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import Editor from '@monaco-editor/react';
|
||||
|
||||
function App() {
|
||||
const [fileName, setFileName] = useState('script.js');
|
||||
|
||||
const file = files[fileName];
|
||||
|
||||
return (
|
||||
<>
|
||||
<button disabled={fileName === 'script.js'} onClick={() => setFileName('script.js')}>
|
||||
script.js
|
||||
</button>
|
||||
<button disabled={fileName === 'style.css'} onClick={() => setFileName('style.css')}>
|
||||
style.css
|
||||
</button>
|
||||
<button disabled={fileName === 'index.html'} onClick={() => setFileName('index.html')}>
|
||||
index.html
|
||||
</button>
|
||||
<Editor
|
||||
height="80vh"
|
||||
theme="vs-dark"
|
||||
path={file.name}
|
||||
defaultLanguage={file.language}
|
||||
defaultValue={file.value}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
ReactDOM.render(<App />, rootElement);
|
||||
```
|
||||
|
||||
The properties:
|
||||
|
||||
- `defaultValue`
|
||||
- `defaultLanguage`
|
||||
- `defaultPath`
|
||||
- `value`
|
||||
- `language`
|
||||
- `path`
|
||||
- `saveViewState`
|
||||
|
||||
will give you more flexibility in working with a multi-model editor.
|
||||
|
||||
**NOTE**
|
||||
|
||||
`defaultValue`, `defaultLanguage`, and `defaultPath` are being considered **only** during a new model creation
|
||||
<br />
|
||||
`value`, `language`, and `path` are being tracked the **whole time**
|
||||
<br />
|
||||
`saveViewState` is an indicator whether to save the models' view states between model changes or not
|
||||
|
||||
[codesandbox](https://codesandbox.io/s/multi-model-editor-kugi6?file=/src/App.js)
|
||||
|
||||
#### `onValidate`
|
||||
|
||||
`onValidate` is an additional property. An event is emitted when the content of the current model is changed and the current model markers are ready. It will be fired with the current model markers
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import Editor from '@monaco-editor/react';
|
||||
|
||||
function App() {
|
||||
function handleEditorValidation(markers) {
|
||||
// model markers
|
||||
markers.forEach((marker) => console.log('onValidate:', marker.message));
|
||||
}
|
||||
|
||||
return (
|
||||
<Editor
|
||||
height="90vh"
|
||||
defaultLanguage="javascript"
|
||||
defaultValue="// let's write some broken code 😈"
|
||||
onValidate={handleEditorValidation}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
ReactDOM.render(<App />, rootElement);
|
||||
```
|
||||
|
||||
[codesandbox](https://codesandbox.io/s/onvalidate-4t5c2?file=/src/App.js)
|
||||
|
||||
It's important to mention that according to [monaco-editor](https://microsoft.github.io/monaco-editor/), the whole supported languages are divided into two groups:
|
||||
|
||||
1. languages that have rich `IntelliSense` and validation
|
||||
|
||||
- `TypeScript`
|
||||
- `JavaScript`
|
||||
- `CSS`
|
||||
- `LESS`
|
||||
- `SCSS`
|
||||
- `JSON`
|
||||
- `HTML`
|
||||
|
||||
2. languages with only basic syntax colorization
|
||||
|
||||
- `XML`
|
||||
- `PHP`
|
||||
- `C#`
|
||||
- `C++`
|
||||
- `Razor`
|
||||
- `Markdown`
|
||||
- `Diff`
|
||||
- `Java`
|
||||
- `VB`
|
||||
- `CoffeeScript`
|
||||
- `Handlebars`
|
||||
- `Batch`
|
||||
- `Pug`
|
||||
- `F#`
|
||||
- `Lua`
|
||||
- `Powershell`
|
||||
- `Python`
|
||||
- `Ruby`
|
||||
- `SASS`
|
||||
- `R`
|
||||
- `Objective-C`
|
||||
|
||||
**As you can guess, `onValidate` prop will work only with the languages from the first group**
|
||||
|
||||
#### Notes
|
||||
|
||||
##### For `electron` users
|
||||
|
||||
As a usual `React` component, this one also works fine with an electron-react environment, without need to have a `webpack` configuration or other extra things. But there are several cases that developers usually face to and sometimes it can be confusing. Here they are:
|
||||
|
||||
1. **You see loading screen stuck**
|
||||
Usually, it's because your environment doesn't allow you to load external sources. By default, it loads `monaco` sources from `CDN`. You can see the [default configuration](https://github.com/suren-atoyan/monaco-loader/blob/master/src/config/index.js). But sure you can change that behavior; the library is fully configurable. Read about it [here](https://github.com/suren-atoyan/monaco-react#loader-config). So, if you want to download it from your local files, you can do it like this:
|
||||
|
||||
```javascript
|
||||
import { loader } from '@monaco-editor/react';
|
||||
|
||||
loader.config({ paths: { vs: '../path-to-monaco' } });
|
||||
```
|
||||
|
||||
2. **Based on your electron environment it can be required to have an absolute URL**
|
||||
The utility function taken from [here](https://github.com/microsoft/monaco-editor-samples/blob/master/electron-amd-nodeIntegration/electron-index.html) can help you to achieve that. Let's imagine you have `monaco-editor` package installed and you want to load monaco from the `node_modules` rather than from CDN: in that case, you can write something like this:
|
||||
|
||||
```javascript
|
||||
function ensureFirstBackSlash(str) {
|
||||
return str.length > 0 && str.charAt(0) !== '/' ? '/' + str : str;
|
||||
}
|
||||
|
||||
function uriFromPath(_path) {
|
||||
const pathName = path.resolve(_path).replace(/\\/g, '/');
|
||||
return encodeURI('file://' + ensureFirstBackSlash(pathName));
|
||||
}
|
||||
|
||||
loader.config({
|
||||
paths: {
|
||||
vs: uriFromPath(path.join(__dirname, '../node_modules/monaco-editor/min/vs')),
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
There were several issues about this topic that can be helpful too - [1](https://github.com/suren-atoyan/monaco-react/issues/48) [2](https://github.com/suren-atoyan/monaco-react/issues/12) [3](https://github.com/suren-atoyan/monaco-react/issues/58) [4](https://github.com/suren-atoyan/monaco-react/issues/87)
|
||||
|
||||
Also, there is a [blog post](https://www.jameskerr.blog/posts/offline-monaco-editor-in-electron/) about using `@monaco-editor/react` in `Electron` in offline mode. You may find it helpful.
|
||||
|
||||
And if you use `electron` with `monaco` and `react` and have faced an issue different than the above-discribed ones, please let us know to make this section more helpful
|
||||
|
||||
##### For `Next.js` users
|
||||
|
||||
Like other React components, this one also works with `Next.js` without a hitch. The part of the source that should be pre-parsed is optimized for server-side rendering, so, in usual cases, it will work fine, but if you want to have access, for example, to [`monaco instance`](https://github.com/suren-atoyan/monaco-react#monaco-instance) you should be aware that it wants to access the `document` object, and it requires browser environment. Basically you just need to avoid running that part out of browser environment, there are several ways to do that. The one is described [here](https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr)
|
||||
|
||||
And if you use `monaco` with `Next.js` and have faced an issue different than the above-described one, please let us know to make this section more helpful
|
||||
|
||||
#### Create your own editor
|
||||
|
||||
Under the hood this library uses [@monaco-editor/loader](https://github.com/suren-atoyan/monaco-loader) that provides a utility called `loader`. The `loader` utility is a collection of functions that are being used to setup `monaco` editor into your browser. `loader.init()` handles the whole initialization process and returns the instance of the `monaco` - `loader.init().then(monaco => console.log("here is the monaco instance:", monaco))`. The `Editor` component uses this utility, gains access to `monaco instance` and creates the editor. [Here](https://github.com/suren-atoyan/monaco-react/blob/master/src/Editor/Editor.tsx) is the implementation of the `Editor` component. You can use the same technique to create your own `Editor`. You can just import the `loader` utility, access to `monaco instance`, and create your own editor with your own custom logic. The shortest way to do it:
|
||||
|
||||
```javascript
|
||||
import loader from '@monaco-editor/loader';
|
||||
|
||||
loader.init().then((monaco) => {
|
||||
const wrapper = document.getElementById('root');
|
||||
wrapper.style.height = '100vh';
|
||||
const properties = {
|
||||
value: 'function hello() {\n\talert("Hello world!");\n}',
|
||||
language: 'javascript',
|
||||
};
|
||||
|
||||
monaco.editor.create(wrapper, properties);
|
||||
});
|
||||
```
|
||||
|
||||
That's all. You can wrap it into a `React` component, or `Vue`, or `Angular` or leave it as vanilla one or whatever you want; it's written in pure `js`
|
||||
|
||||
[codesandbox](https://codesandbox.io/s/create-your-own-editor-pd01u?file=/src/index.js)
|
||||
|
||||
### Development-Playground
|
||||
|
||||
It's always important to have a place, where you can play with the internals of the library. The `playground` is a minimal `React` app that directly uses the sources of the library. So, if you are going to open a `PR`, or want to check something, or just want to try the freshest state of the library, you can run the playground and enjoy it
|
||||
|
||||
- clone the repository
|
||||
|
||||
```bash
|
||||
git clone https://github.com/suren-atoyan/monaco-react.git
|
||||
```
|
||||
|
||||
- go to the library folder
|
||||
|
||||
```bash
|
||||
cd monaco-react
|
||||
```
|
||||
|
||||
- install the library's dependencies
|
||||
|
||||
```bash
|
||||
npm install # yarn
|
||||
```
|
||||
|
||||
- go to the playground
|
||||
|
||||
```bash
|
||||
cd playground
|
||||
```
|
||||
|
||||
- install the playground's dependencies
|
||||
|
||||
```bash
|
||||
npm install # yarn
|
||||
```
|
||||
|
||||
- and run the playground
|
||||
|
||||
```bash
|
||||
npm run dev # yarn dev
|
||||
```
|
||||
|
||||
monaco-react
|
||||
├── playground
|
||||
│ ├── src/ # playground sources
|
||||
├── src/ # library sources
|
||||
└── ...
|
||||
|
||||
If you want to change something in the library, go to `monaco-react/src/...`, the library will be automatically re-built and the playground will use the latest build
|
||||
|
||||
### Props
|
||||
|
||||
#### `Editor`
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| :--------------- | :------------------------- | :----------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| defaultValue | string | | Default value of the current model |
|
||||
| defaultLanguage | string | | Default language of the current model |
|
||||
| defaultPath | string | | Default path of the current model. Will be passed as the third argument to `.createModel` method - `monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))` |
|
||||
| value | string | | Value of the current model |
|
||||
| language | enum: ... | | Language of the current model (all languages that are [supported](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages) by monaco-editor) |
|
||||
| path | string | | Path of the current model. Will be passed as the third argument to `.createModel` method - `monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))` |
|
||||
| theme | enum: "light" \| "vs-dark" | "light" | The theme for the monaco. Available options "vs-dark" \| "light". Define new themes by `monaco.editor.defineTheme` |
|
||||
| line | number | | The line to jump on it |
|
||||
| loading | React Node | "Loading..." | The loading screen before the editor will be mounted |
|
||||
| options | object | {} | [IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html) |
|
||||
| overrideServices | object | {} | [IEditorOverrideServices ](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOverrideServices.html) |
|
||||
| saveViewState | boolean | true | Indicator whether to save the models' view states between model changes or not |
|
||||
| keepCurrentModel | boolean | false | Indicator whether to dispose the current model when the Editor is unmounted or not |
|
||||
| width | union: number \| string | "100%" | Width of the editor wrapper |
|
||||
| height | union: number \| string | "100%" | Height of the editor wrapper |
|
||||
| className | string | | Class name for the editor container |
|
||||
| wrapperProps | object | {} | Props applied to the wrapper element |
|
||||
| beforeMount | func | noop | **Signature: function(monaco: Monaco) => void** <br/> An event is emitted before the editor is mounted. It gets the `monaco` instance as a first argument |
|
||||
| onMount | func | noop | **Signature: function(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void** <br/> An event is emitted when the editor is mounted. It gets the `editor` instance as a first argument and the `monaco` instance as a second |
|
||||
| onChange | func | | **Signature: function(value: string \| undefined, ev: monaco.editor.IModelContentChangedEvent) => void** <br/> An event is emitted when the content of the current model is changed |
|
||||
| onValidate | func | noop | **Signature: function(markers: monaco.editor.IMarker[]) => void** <br/> An event is emitted when the content of the current model is changed and the current model markers are ready |
|
||||
|
||||
#### `DiffEditor`
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| :----------------------- | :------------------------- | :----------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| original | string | | The original source (left one) value |
|
||||
| modified | string | | The modified source (right one) value |
|
||||
| language | enum: ... | | Language for the both models - original and modified (all languages that are [supported](https://github.com/microsoft/monaco-languages) by monaco-editor) |
|
||||
| originalLanguage | enum: ... | | This prop gives you the opportunity to specify the language of the original source separately, otherwise, it will get the value of the language property |
|
||||
| modifiedLanguage | enum: ... | | This prop gives you the opportunity to specify the language of the modified source separately, otherwise, it will get the value of language property |
|
||||
| originalModelPath | string | | Path for the "original" model. Will be passed as a third argument to `.createModel` method - `monaco.editor.createModel(..., ..., monaco.Uri.parse(originalModelPath))` |
|
||||
| modifiedModelPath | string | | Path for the "modified" model. Will be passed as a third argument to `.createModel` method - `monaco.editor.createModel(..., ..., monaco.Uri.parse(modifiedModelPath))` |
|
||||
| keepCurrentOriginalModel | boolean | false | Indicator whether to dispose the current original model when the DiffEditor is unmounted or not |
|
||||
| keepCurrentModifiedModel | boolean | false | Indicator whether to dispose the current modified model when the DiffEditor is unmounted or not |
|
||||
| theme | enum: "light" \| "vs-dark" | "light" | The theme for the monaco. Available options "vs-dark" \| "light". Define new themes by `monaco.editor.defineTheme` |
|
||||
| line | number | | The line to jump on it |
|
||||
| loading | React Node | "Loading..." | The loading screen before the editor will be mounted |
|
||||
| options | object | {} | [IDiffEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IDiffEditorConstructionOptions.html) |
|
||||
| width | union: number \| string | "100%" | Width of the editor wrapper |
|
||||
| height | union: number \| string | "100%" | Height of the editor wrapper |
|
||||
| className | string | | Class name for the editor container |
|
||||
| wrapperProps | object | {} | Props applied to the wrapper element |
|
||||
| beforeMount | func | noop | **Signature: function(monaco: Monaco) => void** <br/> An event is emitted before the editor mounted. It gets the `monaco` instance as a first argument |
|
||||
| onMount | func | noop | **Signature: function(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void** <br/> An event is emitted when the editor is mounted. It gets the `editor` instance as a first argument and the `monaco` instance as a second |
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE)
|
||||
+64
@@ -0,0 +1,64 @@
|
||||
{
|
||||
"name": "@monaco-editor/react",
|
||||
"version": "4.7.0",
|
||||
"description": "Monaco Editor for React - use the monaco-editor in any React application without needing to use webpack (or rollup/parcel/etc) configuration files / plugins",
|
||||
"author": "Suren Atoyan <contact@surenatoyan.com>",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"lint": "eslint src",
|
||||
"build": "tsup",
|
||||
"dev": "tsup --watch",
|
||||
"prepublishOnly": "npm test && npm run lint && npm run build",
|
||||
"test": "vitest run"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/suren-atoyan/monaco-react.git"
|
||||
},
|
||||
"keywords": [
|
||||
"monaco",
|
||||
"editor",
|
||||
"react",
|
||||
"vscode",
|
||||
"code",
|
||||
"text"
|
||||
],
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/suren-atoyan/monaco-react/issues"
|
||||
},
|
||||
"homepage": "https://github.com/suren-atoyan/monaco-react#readme",
|
||||
"peerDependencies": {
|
||||
"monaco-editor": ">= 0.25.0 < 1",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^14.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.54.0",
|
||||
"@typescript-eslint/parser": "^5.54.0",
|
||||
"eslint": "^8.35.0",
|
||||
"eslint-plugin-import": "^2.27.5",
|
||||
"eslint-plugin-jsx-a11y": "6.7.1",
|
||||
"eslint-plugin-react": "7.32.2",
|
||||
"eslint-plugin-react-hooks": "4.6.0",
|
||||
"husky": "^4.2.3",
|
||||
"prettier": "^2.8.7",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"tsup": "^6.7.0",
|
||||
"typescript": "^4.9.5",
|
||||
"vitest": "^0.29.2"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "rm -rf ./lib && npm test && npm run lint"
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@monaco-editor/loader": "^1.5.0"
|
||||
}
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
import "@testing-library/jest-dom";
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
# https://tea.xyz/what-is-this-file
|
||||
---
|
||||
version: 1.0.0
|
||||
codeOwners:
|
||||
- '0x8958579fcDE99f81808e6c89aCFeEc3DF93Ad9bb'
|
||||
quorum: 1
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "esnext",
|
||||
"lib": ["esnext", "dom", "dom.iterable"],
|
||||
"target": "es2020",
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
"outDir": "./dist",
|
||||
"strict": true,
|
||||
"skipLibCheck": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedIndexedAccess": true,
|
||||
"moduleResolution": "node",
|
||||
"jsx": "react",
|
||||
"esModuleInterop": true
|
||||
},
|
||||
"include": ["src", "tsup.config.ts", "setupTests.ts", "vitest.config.ts"]
|
||||
}
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
import { defineConfig } from 'tsup';
|
||||
|
||||
export default defineConfig((opts) => ({
|
||||
clean: true,
|
||||
dts: true,
|
||||
entry: ['src/index.ts'],
|
||||
format: ['cjs', 'esm'],
|
||||
minify: !opts.watch,
|
||||
sourcemap: true,
|
||||
target: 'esnext',
|
||||
outDir: 'dist',
|
||||
}));
|
||||
+59
@@ -0,0 +1,59 @@
|
||||
## v4 changes
|
||||
|
||||
See also the [CHANGELOG](https://github.com/suren-atoyan/monaco-react/blob/master/CHANGELOG.md)
|
||||
|
||||
`v4` brings lots of new features and some breaking changes. First, let's see what's broken comparing with the `v3`
|
||||
|
||||
1) `editorDidMount` - **removed**
|
||||
|
||||
In the new version there is no `editorDidMount` property. Now it can be replaced by `onMount`. If you happen to remember, the signature of `editorDidMount` was `function(getEditorValue: () => string, editor: monaco.editor.IStandaloneCodeEditor) => void`
|
||||
|
||||
The `onMount` prop is a little bit different, the signature is `function(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void`. As you can see it also exposes the `monaco` instance as a second parameter. There is no `getEditorValue`. To get the current model value you can use `editor` instance (`editor.getValue()`) or `onChange` prop. [Read more](https://github.com/suren-atoyan/monaco-react#get-value)
|
||||
|
||||
2) `beforeMount` - **new** (`onMount` - **new**)
|
||||
|
||||
In addition to `onMount` now there is also `beforeMount` that exposes the `monaco` instance as a first parameter. Here you can do something before the editor is mounted. [Read more](https://github.com/suren-atoyan/monaco-react#monaco-instance)
|
||||
|
||||
3) `ControlledEditor` - **removed**
|
||||
|
||||
`ControlledEditor` component is removed. Now there is one `Editor` component that behaves in `controlled` mode or `uncontrolled` mode based on the usage of `value` property. [Read more](https://github.com/suren-atoyan/monaco-react#uncontrolled-controlled-modes)
|
||||
|
||||
4) `multi-model editor` - **new**
|
||||
|
||||
multi-model editor is supported now. Check [this](https://codesandbox.io/s/multi-model-editor-kugi6?file=/src/App.js) for simple demo. [Read more](https://github.com/suren-atoyan/monaco-react#multi-model-editor)
|
||||
|
||||
5) `defaultPath ` - **new**
|
||||
|
||||
Default path of the current model. Will be passed as the third argument to `.createModel` method `monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`
|
||||
|
||||
For `DiffEditor` there are `originalModelPath` and `modifiedModelPath`
|
||||
|
||||
6) `path` - **new**
|
||||
|
||||
Path of the current model. Will be passed as the third argument to `.createModel` method `monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`
|
||||
|
||||
7) `defaultLanguage` - **new**
|
||||
|
||||
Default language of the current model
|
||||
|
||||
8) `useMonaco` - **new**
|
||||
|
||||
`useMonaco` is a `React` hook that returns the instance of the `monaco`. [Read more](https://github.com/suren-atoyan/monaco-react#usemonaco)
|
||||
|
||||
9) `onValidate` - **new**
|
||||
|
||||
`onValidate` is an additional property. An event is emitted when the length of the model markers of the current model isn't 0. [Read more](https://github.com/suren-atoyan/monaco-react#onvalidate)
|
||||
|
||||
10) `defaultProp` - **new**
|
||||
|
||||
The initial value of the default (auto created) model
|
||||
|
||||
11) `monaco` utility - **renamed**
|
||||
|
||||
now, it's called `loader`. [Read more](https://github.com/suren-atoyan/monaco-react#loader-config)
|
||||
|
||||
12) `onChange` - **signature change**
|
||||
|
||||
old - `function(ev: any, value: string | undefined) => string | undefined`
|
||||
<br />
|
||||
new - `function(value: string | undefined, ev: monaco.editor.IModelContentChangedEvent) => void`
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
import { defineConfig } from "vitest/config";
|
||||
|
||||
export default defineConfig({
|
||||
test: {
|
||||
environment: "jsdom",
|
||||
globals: true,
|
||||
snapshotFormat: {
|
||||
printBasicPrototype: true,
|
||||
},
|
||||
setupFiles: ["./setupTests.ts"],
|
||||
exclude: ["**/node_modules/**", "**/demo/**", "**/playground/**"],
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user