-
Notifications
You must be signed in to change notification settings - Fork 351
/
README.md
114 lines (83 loc) · 3.38 KB
/
README.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
# @patternfly/react-code-editor
This package provides a PatternFly wrapper for the Monaco code editor
### Prerequisite
#### Node Environment
This project currently supports Node [Active LTS](https://github.com/nodejs/Release#release-schedule) releases. Please stay current with Node Active LTS when developing patternfly-react.
For example, to develop with Node 18, use the following:
```
nvm install 18
nvm use 18
```
This project also requires a Yarn version of >=1.6.0. The latest version can be installed [here](https://yarnpkg.com/).
### Installing
```
yarn add @patternfly/react-code-editor
```
or
```
npm install @patternfly/react-code-editor --save
```
### Usage
#### Pre-requisites
It's strongly advised to use the PatternFly Base CSS in your whole project, or some components may diverge in appearance:
```js
import '@patternfly/react-core/dist/styles/base.css';
```
```js
import { CodeEditor } from '@patternfly/react-code-editor';
```
Install peer deps
```json
"monaco-editor": "^0.21.3",
"monaco-editor-webpack-plugin": "^2.1.0",
"react": "^17 || ^18",
"react-dom": "^17 || ^18",
"react-monaco-editor": "^0.51.0"
```
To properly install the library `monaco-editor-webpack-plugin` be sure to follow the [plugin instructions](https://github.com/microsoft/monaco-editor/tree/main/webpack-plugin)
#### With create-react-app Projects
If you created your project with `create-react-app` you'll have some extra work to do, or you wont have syntax highlighting. Using the webpack plugin requires updating your webpack config, which `create-react-app` abstracts away. You can `npm eject` your project, but you may not want to do that. To keep your app set up in the `create-react-app` style but to get access to your webpack config you can use `react-app-rewired`.
First, install `react-app-rewired` as a development dependency:
```sh
$ npm install -D react-app-rewired
```
Next, replace all of the `react-script` references in your `package.json` `scripts` section with `react-app-required`:
```json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
}
```
Next, create a `config-overrides.js` file at the root of your project and add the following:
```javascript
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = function override(config, env) {
config.plugins.push(new MonacoWebpackPlugin({
languages: ['json', 'yaml', 'shell']
}));
return config;
}
```
Note: You should change the `languages` array based on your needs.
You can now start your app with `npm start` and syntax highlighting should work.
#### Enable YAML Syntax Highlighting
The Monaco editor doesn't ship with full YAML support. You can configure your code editor with `Languages.yaml` but there will be no highlighting, even i you have the webpack plugin working correctly. To enable YAML support you need to do the following:
First, install `monaco-yaml`:
```shell
$ npm install --save monaco-yaml
```
Next, at the entrypoint of your app enable it:
```javascript
import { setDiagnosticsOptions } from 'monaco-yaml';
setDiagnosticsOptions({
enableSchemaRequest: true,
hover: true,
completion: true,
validate: true,
format: true,
schemas: [],
});
```
The `monaco-yaml` plugin has a lot of options so check out their docs to see what else you may want to add.