{"_id":"@ben-procuros/react-monaco-editor","_rev":"2-395f830db5af703e2d7ea861ecdd6dcd","name":"@ben-procuros/react-monaco-editor","dist-tags":{"latest":"0.55.2"},"versions":{"0.55.0":{"name":"@ben-procuros/react-monaco-editor","version":"0.55.0","description":"Monaco Editor for React","main":"lib/index.js","module":"lib/index","types":"lib/index.d.ts","scripts":{"preversion":"npm run lint","build":"tsc","clean":"rimraf lib","format":"eslint --fix '{src,example}/**/*.{ts,tsx}'","lint":"eslint '{src,example}/**/*.{ts,tsx}'","prepublishOnly":"npm run lint && npm run build"},"keywords":["monaco","editor","react","vscode"],"authors":["Daniele Esposti ","Dominik Moritz ","Leon Shi "],"license":"MIT","bugs":{"url":"https://github.com/react-monaco-editor/react-monaco-editor/issues"},"homepage":"https://github.com/react-monaco-editor/react-monaco-editor","repository":{"type":"git","url":"git+https://github.com/react-monaco-editor/react-monaco-editor.git"},"devDependencies":{"@types/react":"^18.2.18","@typescript-eslint/eslint-plugin":"^6.2.1","@typescript-eslint/parser":"^6.2.1","eslint":"^8.46.0","eslint-config-airbnb":"^19.0.4","eslint-config-prettier":"^8.9.0","eslint-plugin-import":"^2.28.0","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-prettier":"^5.0.0","eslint-plugin-react":"^7.33.1","eslint-plugin-react-hooks":"^4.6.0","monaco-editor":"^0.45.0","prettier":"^3.0.0","react":"^18.2.0","rimraf":"^5.0.1","typescript":"^5.1.6"},"peerDependencies":{"@types/react":">=16 <= 18","monaco-editor":"^0.45.0","react":">=16 <= 18"},"dependencies":{"prop-types":"^15.8.1"},"_id":"@ben-procuros/react-monaco-editor@0.55.0","gitHead":"76739dfd3394f8cb3249498d155ec70bb6e8e27d","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-OE6ju+s4pbLYVdFKXJaGdYHrPDfExOU4g2AgyPCFOl6OKQYRaQ96ayLOGuvPyPDJl5ZjFhzMN22h2fo4Tlu8jQ==","shasum":"50754d1ab7e76a2a9e2b42c7ccc99a282555f556","tarball":"https://registry.npmjs.org/@ben-procuros/react-monaco-editor/-/react-monaco-editor-0.55.0.tgz","fileCount":23,"unpackedSize":60114,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID4EJUGekC0veADMe9HLsJoZT6f0Bozxb/DQW/qZaOtuAiEA0Bk16tv+bdvtwUxCy9yscEWAeqQtax2hrQBH6trNdj8="}]},"_npmUser":{"name":"ben-procuros","email":"ben@procuros.io"},"directories":{},"maintainers":[{"name":"ben-procuros","email":"ben@procuros.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-monaco-editor_0.55.0_1706462403271_0.16708200456380218"},"_hasShrinkwrap":false},"0.55.1":{"name":"@ben-procuros/react-monaco-editor","version":"0.55.1","description":"Monaco Editor for React","main":"lib/index.js","module":"lib/index","types":"lib/index.d.ts","scripts":{"preversion":"npm run lint","build":"tsc","clean":"rimraf lib","format":"eslint --fix '{src,example}/**/*.{ts,tsx}'","lint":"eslint '{src,example}/**/*.{ts,tsx}'","prepublishOnly":"npm run lint && npm run build"},"keywords":["monaco","editor","react","vscode"],"authors":["Daniele Esposti ","Dominik Moritz ","Leon Shi "],"license":"MIT","bugs":{"url":"https://github.com/react-monaco-editor/react-monaco-editor/issues"},"homepage":"https://github.com/react-monaco-editor/react-monaco-editor","repository":{"type":"git","url":"git+https://github.com/react-monaco-editor/react-monaco-editor.git"},"devDependencies":{"@types/react":"^18.2.18","@typescript-eslint/eslint-plugin":"^6.2.1","@typescript-eslint/parser":"^6.2.1","eslint":"^8.46.0","eslint-config-airbnb":"^19.0.4","eslint-config-prettier":"^8.9.0","eslint-plugin-import":"^2.28.0","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-prettier":"^5.0.0","eslint-plugin-react":"^7.33.1","eslint-plugin-react-hooks":"^4.6.0","monaco-editor":"^0.45.0","prettier":"^3.0.0","react":"^18.2.0","rimraf":"^5.0.1","typescript":"^5.1.6"},"peerDependencies":{"@types/react":">=16 <= 18","monaco-editor":"^0.45.0","react":">=16 <= 18"},"dependencies":{"prop-types":"^15.8.1"},"_id":"@ben-procuros/react-monaco-editor@0.55.1","gitHead":"76739dfd3394f8cb3249498d155ec70bb6e8e27d","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-W9cDfwZOLlc0TSzsEQyjpTKZYWwINFBCMFD8gU5X/ctXgIOD6iyrgxCD8ZRNyaNAEC8E6L35qyKZViaIe3Jyfg==","shasum":"abe495cb0ededb38dbd51360bf9fb027ddaa4f92","tarball":"https://registry.npmjs.org/@ben-procuros/react-monaco-editor/-/react-monaco-editor-0.55.1.tgz","fileCount":23,"unpackedSize":60332,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTp3FJhOV1PWw8Pc5CxGZPuN9wxGWMwdI95sI3gabRIgIhAPPzxPfLxsPRZTYWs3deTroNMvAR6FLguBZKb/2gDdqX"}]},"_npmUser":{"name":"ben-procuros","email":"ben@procuros.io"},"directories":{},"maintainers":[{"name":"ben-procuros","email":"ben@procuros.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-monaco-editor_0.55.1_1706462600430_0.46783705382644447"},"_hasShrinkwrap":false},"0.55.2":{"name":"@ben-procuros/react-monaco-editor","version":"0.55.2","description":"Monaco Editor for React","main":"lib/index.js","module":"lib/index","types":"lib/index.d.ts","scripts":{"preversion":"npm run lint","build":"tsc","clean":"rimraf lib","format":"eslint --fix '{src,example}/**/*.{ts,tsx}'","lint":"eslint '{src,example}/**/*.{ts,tsx}'","prepublishOnly":"npm run lint && npm run build"},"keywords":["monaco","editor","react","vscode"],"authors":["Daniele Esposti ","Dominik Moritz ","Leon Shi "],"license":"MIT","bugs":{"url":"https://github.com/react-monaco-editor/react-monaco-editor/issues"},"homepage":"https://github.com/react-monaco-editor/react-monaco-editor","repository":{"type":"git","url":"git+https://github.com/react-monaco-editor/react-monaco-editor.git"},"devDependencies":{"@types/react":"^18.2.18","@typescript-eslint/eslint-plugin":"^6.2.1","@typescript-eslint/parser":"^6.2.1","eslint":"^8.46.0","eslint-config-airbnb":"^19.0.4","eslint-config-prettier":"^8.9.0","eslint-plugin-import":"^2.28.0","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-prettier":"^5.0.0","eslint-plugin-react":"^7.33.1","eslint-plugin-react-hooks":"^4.6.0","monaco-editor":"^0.45.0","prettier":"^3.0.0","react":"^18.2.0","rimraf":"^5.0.1","typescript":"^5.1.6"},"peerDependencies":{"@types/react":">=16 <= 18","monaco-editor":"^0.45.0","react":">=16 <= 18"},"dependencies":{"prop-types":"^15.8.1"},"_id":"@ben-procuros/react-monaco-editor@0.55.2","gitHead":"6c06c1bdc03cd85504c8abf57426588a279a881c","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-Xkja0N6uUMMyBYw1qtSuWbAP144srIG1k1DGpvRq0dBd7ck1zCV1jV9GxNOXtN/Zpm4EN0adeO6UVbOyZ25DKw==","shasum":"f47d1c34d098349fcc7dabebddca83a083dae9be","tarball":"https://registry.npmjs.org/@ben-procuros/react-monaco-editor/-/react-monaco-editor-0.55.2.tgz","fileCount":23,"unpackedSize":60332,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJoUaxrPRt9XLkH3GNlZU3IyrT5W5W0WxDFQGCb6mKVwIhAIHdh8ICdCGSUTrCr4KlkqFXUd1nWU2sMhNbz36D/R3O"}]},"_npmUser":{"name":"ben-procuros","email":"ben@procuros.io"},"directories":{},"maintainers":[{"name":"ben-procuros","email":"ben@procuros.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-monaco-editor_0.55.2_1708538927070_0.5079710907101205"},"_hasShrinkwrap":false}},"time":{"created":"2024-01-28T17:20:03.183Z","0.55.0":"2024-01-28T17:20:03.469Z","modified":"2024-02-21T18:08:47.695Z","0.55.1":"2024-01-28T17:23:20.675Z","0.55.2":"2024-02-21T18:08:47.245Z"},"maintainers":[{"name":"ben-procuros","email":"ben@procuros.io"}],"description":"Monaco Editor for React","homepage":"https://github.com/react-monaco-editor/react-monaco-editor","keywords":["monaco","editor","react","vscode"],"repository":{"type":"git","url":"git+https://github.com/react-monaco-editor/react-monaco-editor.git"},"bugs":{"url":"https://github.com/react-monaco-editor/react-monaco-editor/issues"},"license":"MIT","readme":"

\n\n

react-monaco-editor

\n\n
\n\n[Monaco Editor](https://github.com/Microsoft/monaco-editor) for React.\n\n[![NPM version][npm-image]][npm-url]\n[![Downloads][downloads-image]][npm-url]\n![Test](https://github.com/react-monaco-editor/react-monaco-editor/workflows/Test/badge.svg)\n\n[npm-url]: https://npmjs.org/package/react-monaco-editor\n[downloads-image]: http://img.shields.io/npm/dm/react-monaco-editor.svg\n[npm-image]: http://img.shields.io/npm/v/react-monaco-editor.svg\n\n
\n\n## Examples\n\nTo build the examples locally, run:\n\n```bash\nyarn\ncd example\nyarn\nyarn start\n```\n\nThen open `http://localhost:8886` in a browser.\n\n## Installation\n\n```bash\nyarn add react-monaco-editor\n```\n\n## Using with Webpack\n\n```js\nimport React from 'react';\nimport { createRoot } from \"react-dom/client\";\nimport MonacoEditor from 'react-monaco-editor';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n code: '// type your code...',\n }\n }\n editorDidMount(editor, monaco) {\n console.log('editorDidMount', editor);\n editor.focus();\n }\n onChange(newValue, e) {\n console.log('onChange', newValue, e);\n }\n render() {\n const code = this.state.code;\n const options = {\n selectOnLineNumbers: true\n };\n return (\n \n );\n }\n}\n\nconst container = document.getElementById('root');\nconst root = createRoot(container);\nroot.render();\n```\n\nAdd the [Monaco Webpack plugin](https://github.com/Microsoft/monaco-editor-webpack-plugin) `monaco-editor-webpack-plugin` to your `webpack.config.js`:\n\n```js\nconst MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');\nmodule.exports = {\n plugins: [\n new MonacoWebpackPlugin({\n // available options are documented at https://github.com/microsoft/monaco-editor/blob/main/webpack-plugin/README.md#options\n languages: ['json']\n })\n ]\n};\n```\n\nSidenote: Monaco Editor uses CSS imports internally, so if you're using CSS Modules in your project - you're likely to get conflict by default. In order to avoid that - separate css-loader for app and monaco-editor package:\n\n```js\n// Specify separate paths\nconst path = require('path');\nconst APP_DIR = path.resolve(__dirname, './src');\nconst MONACO_DIR = path.resolve(__dirname, './node_modules/monaco-editor');\n\n{\n test: /\\.css$/,\n include: APP_DIR,\n use: [{\n loader: 'style-loader',\n }, {\n loader: 'css-loader',\n options: {\n modules: true,\n namedExport: true,\n },\n }],\n}, {\n test: /\\.css$/,\n include: MONACO_DIR,\n use: ['style-loader', 'css-loader'],\n}\n```\n\n## Properties\n\nAll the properties below are optional.\n\n- `width` width of editor. Defaults to `100%`.\n- `height` height of editor. Defaults to `100%`.\n- `value` value of the auto created model in the editor.\n- `defaultValue` the initial value of the auto created model in the editor.\n- `language` the initial language of the auto created model in the editor.\n- `theme` the theme of the editor\n- `options` refer to [Monaco interface IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneEditorConstructionOptions.html).\n- `overrideServices` refer to [Monaco Interface IEditorOverrideServices](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IEditorOverrideServices.html). It depends on Monaco's internal implementations and may change over time, check github [issue](https://github.com/Microsoft/monaco-editor/issues/935#issuecomment-402174095) for more details.\n\n- `onChange(newValue, event)` an event emitted when the content of the current model has changed.\n- `editorWillMount(monaco)` an event emitted before the editor mounted (similar to `componentWillMount` of React).\n- `editorDidMount(editor, monaco)` an event emitted when the editor has been mounted (similar to `componentDidMount` of React).\n- `editorWillUnmount(editor, monaco)` an event emitted before the editor unmount (similar to `componentWillUnmount` of React).\n\n## Events & Methods\n\nRefer to [Monaco interface IEditor](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditor.html).\n\nThe monaco interfaces available by import\n```js\nimport { monaco } from 'react-monaco-editor';\n```\n\n## Q & A\n\n### I don't get syntax highlighting / autocomplete / validation.\n\nMake sure to use the [Monaco Webpack plugin](https://github.com/Microsoft/monaco-editor-webpack-plugin) or follow the [instructions on how to load the ESM version of Monaco](https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-esm.md).\n\n### How to interact with the MonacoEditor instance\n\nUsing the first parameter of `editorDidMount`, or using a `ref` (e.g. ``) after `editorDidMount` event has fired.\n\nThen you can invoke instance methods via `this.refs.monaco.editor`, e.g. `this.refs.monaco.editor.focus()` to focuses the MonacoEditor instance.\n\n### How to get value of editor\n\nUsing `this.refs.monaco.editor.getValue()` or via method of `Model` instance:\n\n```js\nconst model = this.refs.monaco.editor.getModel();\nconst value = model.getValue();\n```\n\n### Do something before editor mounted\n\nFor example, you may want to configure some JSON schemas before editor mounted, then you can go with `editorWillMount(monaco)`:\n\n```js\nclass App extends React.Component {\n editorWillMount(monaco) {\n monaco.languages.json.jsonDefaults.setDiagnosticsOptions({\n validate: true,\n schemas: [{\n uri: \"http://myserver/foo-schema.json\",\n fileMatch: ['*'],\n schema: {\n type: \"object\",\n properties: {\n p1: {\n enum: [ \"v1\", \"v2\"]\n },\n p2: {\n $ref: \"http://myserver/bar-schema.json\"\n }\n }\n }\n }]\n });\n }\n render() {\n return (\n \n );\n }\n}\n```\n\n### Use multiple themes\n\n[Monaco only supports one theme](https://github.com/Microsoft/monaco-editor/issues/338).\n\n### How to use the diff editor\n\n```js\nimport React from 'react';\nimport { MonacoDiffEditor } from 'react-monaco-editor';\n\nclass App extends React.Component {\n render() {\n const code1 = \"// your original code...\";\n const code2 = \"// a different version...\";\n const options = {\n //renderSideBySide: false\n };\n return (\n \n );\n }\n}\n```\n\n### Usage with `create-react-app`\n\nThe easiest way to use the `react-monaco-editor` with `create-react-app` is to use the [react-app-rewired](https://github.com/timarney/react-app-rewired) project. For setting it up, the following steps are required:\n\n1. Install `react-app-rewired`: `npm install -D react-app-rewired`\n2. Replace `react-scripts` by `react-app-rewired` in the scripts section of your `packages.json`\n2. Create a `config-overrides.js` in the root directory of your project with the following content:\n\n```javascript\nconst MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');\n\nmodule.exports = function override(config, env) {\n config.plugins.push(new MonacoWebpackPlugin({\n languages: ['json']\n }));\n return config;\n}\n```\n\nFor more information checkout the documentation of `react-app-rewired` [here](https://github.com/timarney/react-app-rewired).\n\n# License\n\nMIT, see the [LICENSE](/LICENSE.md) file for detail.\n","readmeFilename":"README.md"}