feat(CodeEditor): pass additional props to monaco-editor, update read…

…me (#10080)

* feat(CodeEditor): pass through additional props to Editor

* update readme

packages/react-code-editor/README.md

@@ -1,8 +1,8 @@
 # @patternfly/react-code-editor
 
-This package provides a PatternFly wrapper for the Monaco code editor
+This package provides a PatternFly wrapper for the Monaco code editor, using the `@monaco-editor/react` package.
 
-### Prerequisite 
+### Prerequisite
 
 #### Node Environment
 
@@ -44,25 +44,25 @@ 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"
+"react-dom": "^17 || ^18"
 ```
 
-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",
@@ -72,32 +72,20 @@ Next, replace all of the `react-script` references in your `package.json` `scrip
   }
 ```
 
-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:
+
+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. 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';
 
@@ -107,8 +95,16 @@ setDiagnosticsOptions({
   completion: true,
   validate: true,
   format: true,
-  schemas: [],
+  schemas: []
 });
 ```
 
+Finally, to allow the `monaco-yaml` autocomplete to function properly with `@monaco-editor/react`, you should configure your YAML schema in a `beforeMount` call with the `monaco-yaml` `configureMonacoYaml` function. This `beforeMount` function should be passed to `CodeEditor` via the `editorProps` property like so:
+
+```
+editorProps: {
+  beforeMount: yourBeforeMountHandler
+}
+```
+
 The `monaco-yaml` plugin has a lot of options so check out their docs to see what else you may want to add.

packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx

@@ -17,7 +17,7 @@ import {
   TooltipPosition,
   EmptyStateHeader
 } from '@patternfly/react-core';
-import Editor, { Monaco } from '@monaco-editor/react';
+import Editor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
@@ -137,6 +137,8 @@ export interface CodeEditorProps extends Omit<React.HTMLProps<HTMLDivElement>, '
   downloadButtonToolTipText?: string;
   /** Name of the file if user downloads code to local file. */
   downloadFileName?: string;
+  /** Additional props to pass to the monaco editor. */
+  editorProps?: EditorProps;
   /** Content to display in space of the code editor when there is no code to display. */
   emptyState?: React.ReactNode;
   /** Override default empty state body text. */
@@ -499,7 +501,8 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
       shortcutsPopoverProps: shortcutsPopoverPropsProp,
       showEditor,
       options: optionsProp,
-      overrideServices
+      overrideServices,
+      editorProps
     } = this.props;
     const shortcutsPopoverProps: PopoverProps = {
       ...CodeEditor.defaultProps.shortcutsPopoverProps,
@@ -644,6 +647,7 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
                 onChange={this.onChange}
                 onMount={this.editorDidMount}
                 theme={isDarkTheme ? 'vs-dark' : 'vs-light'}
+                {...editorProps}
               />
             </div>
           );