From f149daa29c79cc80258d92d7566839839987c7a3 Mon Sep 17 00:00:00 2001 From: kmcfaul <45077788+kmcfaul@users.noreply.github.com> Date: Thu, 15 Feb 2024 09:28:17 -0500 Subject: [PATCH] feat(CodeEditor): pass additional props to monaco-editor, update readme (#10080) * feat(CodeEditor): pass through additional props to Editor * update readme --- packages/react-code-editor/README.md | 44 +++++++++---------- .../src/components/CodeEditor/CodeEditor.tsx | 8 +++- 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/packages/react-code-editor/README.md b/packages/react-code-editor/README.md index 24c18f4ec32..c1ba2ea1e39 100644 --- a/packages/react-code-editor/README.md +++ b/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. diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx index c99608228fc..669a10af3bb 100644 --- a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx +++ b/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, ' 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 { 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 { onChange={this.onChange} onMount={this.editorDidMount} theme={isDarkTheme ? 'vs-dark' : 'vs-light'} + {...editorProps} /> );