@patternfly/react-code-editor 4.82.61 → 4.82.63
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/README.md +59 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [4.82.63](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@4.82.62...@patternfly/react-code-editor@4.82.63) (2022-11-09)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @patternfly/react-code-editor
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [4.82.62](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@4.82.61...@patternfly/react-code-editor@4.82.62) (2022-11-08)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @patternfly/react-code-editor
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
6
22
|
## [4.82.61](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@4.82.60...@patternfly/react-code-editor@4.82.61) (2022-11-07)
|
|
7
23
|
|
|
8
24
|
**Note:** Version bump only for package @patternfly/react-code-editor
|
package/README.md
CHANGED
|
@@ -53,3 +53,62 @@ Install peer deps
|
|
|
53
53
|
```
|
|
54
54
|
|
|
55
55
|
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)
|
|
56
|
+
|
|
57
|
+
#### With create-react-app Projects
|
|
58
|
+
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`.
|
|
59
|
+
|
|
60
|
+
First, install `react-app-rewired` as a development dependency:
|
|
61
|
+
```sh
|
|
62
|
+
$ npm install -D react-app-rewired
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
Next, replace all of the `react-script` references in your `package.json` `scripts` section with `react-app-required`:
|
|
66
|
+
```json
|
|
67
|
+
"scripts": {
|
|
68
|
+
"start": "react-app-rewired start",
|
|
69
|
+
"build": "react-app-rewired build",
|
|
70
|
+
"test": "react-app-rewired test",
|
|
71
|
+
"eject": "react-app-rewired eject"
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
Next, create a `config-overries.js` file at the root of your project and add the following:
|
|
76
|
+
|
|
77
|
+
```javascript
|
|
78
|
+
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
|
|
79
|
+
|
|
80
|
+
module.exports = function override(config, env) {
|
|
81
|
+
config.plugins.push(new MonacoWebpackPlugin({
|
|
82
|
+
languages: ['json', 'yaml', 'shell']
|
|
83
|
+
}));
|
|
84
|
+
return config;
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
Note: You should change the `languages` array based on your needs.
|
|
89
|
+
|
|
90
|
+
You can now start your app with `npm start` and syntax highlighting should work.
|
|
91
|
+
|
|
92
|
+
#### Enable YAML Syntax Highlighting
|
|
93
|
+
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:
|
|
94
|
+
|
|
95
|
+
First, install `monaco-yaml`:
|
|
96
|
+
```shell
|
|
97
|
+
$ npm install --save monaco-yaml
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
Next, at the entrypoint of your app enable it:
|
|
101
|
+
```javascript
|
|
102
|
+
import { setDiagnosticsOptions } from 'monaco-yaml';
|
|
103
|
+
|
|
104
|
+
setDiagnosticsOptions({
|
|
105
|
+
enableSchemaRequest: true,
|
|
106
|
+
hover: true,
|
|
107
|
+
completion: true,
|
|
108
|
+
validate: true,
|
|
109
|
+
format: true,
|
|
110
|
+
schemas: [],
|
|
111
|
+
});
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
The `monaco-yaml` plugin has a lot of options so check out their docs to see what else you may want to add.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/react-code-editor",
|
|
3
|
-
"version": "4.82.
|
|
3
|
+
"version": "4.82.63",
|
|
4
4
|
"description": "This package provides a PatternFly wrapper for the Monaco code editor\n",
|
|
5
5
|
"main": "dist/js/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"clean": "rimraf dist"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@patternfly/react-core": "^4.
|
|
33
|
+
"@patternfly/react-core": "^4.260.1",
|
|
34
34
|
"@patternfly/react-icons": "^4.92.10",
|
|
35
35
|
"@patternfly/react-styles": "^4.91.10",
|
|
36
36
|
"react-dropzone": "9.0.0",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"rimraf": "^2.6.2",
|
|
46
46
|
"typescript": "^4.7.4"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "246184250fd0b32f33c87a9226b9cd621c30c16e"
|
|
49
49
|
}
|