bsiggel/motia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit with Advoware proxy

Browse Source
This commit is contained in:
root
2025-10-19 14:57:07 +00:00
commit 273aa8b549
45771 changed files with 5534555 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
.npm-cache/_npx/0ebd1cb7ec11dd1f/node_modules/@monaco-editor/react/.github/FUNDING.yml generated vendored Normal file
View File

@@ -0,0 +1,12 @@
# These are supported funding model platforms
github: [suren-atoyan]
patreon: suren_atoyan
open_collective: # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

35
.npm-cache/_npx/0ebd1cb7ec11dd1f/node_modules/@monaco-editor/react/.github/ISSUE_TEMPLATE/bug_report.md generated vendored Normal file
View File

@@ -0,0 +1,35 @@
---
name: Bug report
about: Create a report to help us improve
title: ''
labels: ''
assignees: ''
---
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
Or, please add a minimal code snippet to reproduce the issue, for example in [codesandbox](https://codesandbox.io/).
**Expected behavior**
A clear and concise description of what you expected to happen.
**Screenshots**
If applicable, add screenshots to help to explain your problem.
**Desktop (please complete the following information):**
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
**Additional context**
Add any other context about the problem here.

20
.npm-cache/_npx/0ebd1cb7ec11dd1f/node_modules/@monaco-editor/react/.github/ISSUE_TEMPLATE/feature_request.md generated vendored Normal file
View File

@@ -0,0 +1,20 @@
---
name: Feature request
about: Suggest an idea for this project
title: ''
labels: ''
assignees: ''
---
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
**Additional context**
Add any other context or screenshots about the feature request here.

8
.npm-cache/_npx/0ebd1cb7ec11dd1f/node_modules/@monaco-editor/react/.prettierrc.json generated vendored Normal file
View File

@@ -0,0 +1,8 @@
{
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "all"
}

660
.npm-cache/_npx/0ebd1cb7ec11dd1f/node_modules/@monaco-editor/react/CHANGELOG.md generated vendored Normal file
View File

@@ -0,0 +1,660 @@
### Versions
## 4.7.0
- package: update @monaco-editor/loader to the latest (v1.5.0) version (this uses monaco-editor v0.52.2)
- package: inherit all changes from v4.7.0-rc.0
## 4.7.0-rc.0
- package: add support for react/react-dom v19 as a peer dependency
- playground: update playground's React version to 19
## 4.6.0
###### _Oct 6, 2023_
- Editor/DiffEditor: use `'use client'` on top of `Editor.tsx` and `DiffEditor.tsx`
- loader: update `@monaco-editor/loader` version (1.4.0)
- playground: use createRoot for bootstrapping
## 4.5.2
###### _Aug 23, 2023_
- DiffEditor: apply updated on `originalModelPath` and `modifiedModelPath` before `original` and `modified` props
## 4.5.1
###### _May 5, 2023_
- DiffEditor: track `originalModelPath` and `modifiedModelPath` changes and get or create a new model accordingly
- types: fix typo in comment
- package: replace `prepublish` with `prepublishOnly`
## 4.5.0
###### _Apr 7, 2023_
- Editor: implement `preventTriggerChangeEvent` flag
from `4.5.0-beta.0`
- DiffEditor: add preventCreation flag to diff editor
- project: rewrite with TypeScript
- project: implement prettier
- loader: update `@monaco-editor/loader` version (1.3.2)
## 4.5.0-beta.0
###### _Apr 2, 2023_
- DiffEditor: add preventCreation flag to diff editor
- project: rewrite with TypeScript
- project: implement prettier
- loader: update `@monaco-editor/loader` version (1.3.2)
## 4.4.6
###### _Sep 24, 2022_
- fix onChange: unconditionally call onChange inside onDidChangeModelContent
- add preventCreation flag
- update lock files
## 4.4.5
###### _May 11, 2022_
- loader: update `@monaco-editor/loader` version (1.3.2)
## 4.4.4
###### _Apr 23, 2022_
- package: fix npm prepublish step
## 4.4.3
###### _Apr 23, 2022_
- loader: update `@monaco-editor/loader` version (1.3.1)
## 4.4.2
###### _Apr 12, 2022_
- package: support react/react-dom v18 as a peer dependency
## 4.4.1
###### _Mar 29, 2022_
- types: add missing type `monaco` in `loader.config`
## 4.4.0
###### _Mar 28, 2022_
- loader: update `@monaco-editor/loader` version (1.3.0); using `monaco` from `node_modules` is supported
- playground: update playground packages
## 4.3.1
###### _Oct 3, 2021_
- types: update types according to the new `loader` version and the new `wrapperProps` property
## 4.3.0
###### _Oct 3, 2021_
- Editor/DiffEditor: add `wrapperProps` property
- DiffEditor: allow `DiffEditor` to use existing models
- package.json: update `@monaco-editor/loader` version to `v1.2.0` (monaco version 0.28.1)
## 4.2.2
###### _Aug 9, 2021_
- Editor: `onValidate` integrate `onDidChangeMarkers` (released in `v0.22.0`)
- package.json: after `onDidChangeMarkers` integration `state-local` became redundant; remove it
## 4.2.1
###### _Jun 21, 2021_
- loader: update `@monaco-editor/loader` package version to the latest one (v1.1.1)
- monaco-editor: set `monaco-editor` peerDependency version to `>= 0.25.0 < 1`
- tests: update snapshots
## 4.2.0
###### _Jun 13, 2021_
- loader: update `@monaco-editor/loader` package version to the latest one (v1.1.0)
- demo: update demo examples
- tests: update snapshots
## 4.1.3
###### _Apr 21, 2021_
- types: add `keepCurrentOriginalModel` and `keepCurrentModifiedModel` to type definition
## 4.1.2
###### _Apr 19, 2021_
- DiffEditor: add `keepCurrentOriginalModel` and `keepCurrentModifiedModel` properties; indicator whether to dispose the current original/modified model when the DiffEditor is unmounted or not
- package.json: update monaco-editor peerDependency to the lates one (0.23.0)
## 4.1.1
###### _Apr 2, 2021_
- DiffEditor: update `DiffEditor`'s `modified` value by `executeEdits`
- README: add an example for getting the values of `DiffEditor`
## 4.1.0
###### _Mar 15, 2021_
- loader: update @monaco-editor/loader dependency to version 1.0.1
- types: fix Theme type; vs-dark instead of dark
## 4.0.11
###### _Feb 27, 2021_
- Editor: add an additional check in case if `line` is undefined
## 4.0.10
###### _Feb 16, 2021_
- Editor: use `revealLine` for line update instead of `setScrollPosition`
## 4.0.9
###### _Jan 29, 2021_
- Editor: save and restore current model view state, if `keepCurrentModel` is true
## 4.0.8
###### _Jan 29, 2021_
- Editor: add `keepCurrentModel` property to the `Editor` component; indicator whether to dispose the current model when the Editor is unmounted or not
## 4.0.7
###### _Jan 21, 2021_
- Editor: fire `onValidate` unconditionally, always, with the current model markers
## 4.0.6
###### _Jan 19, 2021_
- DiffEditor: check if `originalModelPath` and `modifiedModelPath` exist in `setModels` function
- DiffEditor: remove `originalModelPath` and `modifiedModelPath` from `defaultProps`
## 4.0.5
###### _Jan 19, 2021_
- utils: check if `path` exists in `createModel` utility function
- Editor: remove `defaultPath` from `defaultProps`
## 4.0.4
###### _Jan 18, 2021_
- package.json: update husky precommit hook to remove lib folder
## 4.0.3
###### _Jan 18, 2021_
- Editor: enable multi-model support
- types: add `path`, `defaultLanguage` and `saveViewState` for multi-model support
## 4.0.2
###### _Jan 18, 2021_
- types: declare and export `useMonaco` type
## 4.0.1
###### _Jan 18, 2021_
- Editor: dispose the current model if the Editor component is unmounted
## 4.0.0
###### _Jan 16, 2021_
- package.json: update dependency (`@monaco-editor/loader`) version to - `v1.0.0`
- hooks: create `useMonaco` hook
- lib: export (named) `useMonaco` from the entry file
- monaco: rename the main utility: monaco -> loader
- Editor/Diff: rename `editorDidMount` to `onMount`
- Editor/Diff: expose monaco instance from `onMount` as a second argument (first is the editor instance)
- Editor/Diff: add `beforeMount` prop: function with a single argument -> monaco instance
- Editor: add `defaultModelPath` prop, use it as a default model path
- Editor: add `defaultValue` prop and use it during default model creation
- Editor: add subscription (`onChange` prop) to listen default model content change
- Editor: remove `_isControlledMode` prop
- Diff: add `originalModelPath` and `modifiedModelPath` props, use them as model paths for original/modified models
- ControlledEditor: remove; the `Editor` component, now, handles both controlled and uncontrolled modes
- package.json: move `prop-types` to dependencies
- types: fix types according to changed
- Editor: add `onValidate` prop: an event emitted when the length of the model markers of the current model isn't 0
## 3.8.3
###### _Jan 8, 2021_
- README: fix DiffEditor `options` prop type name
- types: rename index.d.ts to types.d.ts
## 3.8.2
###### _Jan 7, 2021_
- package.json: add `@monaco-editor/loader` as a dependency
- Editor/Diff Editor components: use `@monaco-editor/loader` instead of `monaco` utility
- utilities: remove utilities that were being replaced by the `@monaco-editor/loader`
- utilities: collect remaining utilities all in the entry file / add some new ones for the next version
- config: remove config as it's already replaced by the `@monaco-editor/loader`
- hooks: create `usePrevious` hook
- cs: coding style fixes
- build: use `Rollup` as a build system; now, we have bundles for `cjs/es/umd`
## 3.7.5
###### _Jan 3, 2021_
- utilities (monaco): fix `state-local` import
## 3.7.4
###### _Dec 16, 2020_
- Editor/Diff Editor components: fix `componentDidMount` call order
- src: (minor) some corrections according to coding style
## 3.7.3
###### _Dec 15, 2020_
- Editor component: set `forceMoveMarkers` `true` in `executeEdits`
## 3.7.2
###### _Dec 5, 2020_
- package: add react/react-dom 17 version as a peer dependency
## 3.7.1
###### _Nov 29, 2020_
- editor: fix - remove unnecessary `value set` before language update
## 3.7.0
###### _Nov 11, 2020_
- monaco: update monaco version to 0.21.2
## 3.6.3
###### _Sep 22, 2020_
- types: add missing props; `className` and `wrapperClassName`
## 3.6.2
###### _Aug 19, 2020_
- eslint: update eslint rules: add 'eslint:recommended' and 'no-unused-vars' -> 'error'
- src: refactor according to new eslint rules
- package.json: update github username, add author email
## 3.6.1
###### _Aug 18, 2020_
- ControlledEditor: store current value in ref instead of making it a dependency of `handleEditorModelChange`
## 3.6.0
###### _Aug 18, 2020_
- ControlledEditor: fix onChange handler issue; dispose prev listener and attach a new one for every new onChange
- ControlledEditor: do not trigger onChange in programmatic changes
## 3.5.7
###### _Aug 9, 2020_
- utilities (monaco): remove intermediate function for injecting scripts
## 3.5.6
###### _Aug 6, 2020_
- dependencies: add `state-local` as a dependency (replace with `local-state` util)
## 3.5.5
###### _Aug 3, 2020_
- dependencies: move `@babel/runtime` from peer dependencies to dependencies
## 3.5.4
###### _Aug 3, 2020_
- dependencies: add `@babel/runtime` as a peer dependency
## 3.5.3
###### _Aug 3, 2020_
- babel: update babel version (v.7.11.0) / activate helpers (decrease bundle size)
- hooks: move out hooks from utils to root
- utilities: remove utils/store to utils/local-state
## 3.5.2
###### _Aug 2, 2020_
- utilities: redesign `store` utility
## 3.5.1
###### _July 30, 2020_
- utilities (monaco): correct config obj name
## 3.5.0
###### _July 30, 2020_
- utilities (monaco): redesign utility `monaco`; get rid of class, make it more fp
- utilities: create `compose` utility
- utilities: create `store` utility; for internal usage (in other utilities)
## 3.4.2
###### _July 15, 2020_
- controlled editor: fix undo/redo issue
## 3.4.1
###### _July 3, 2020_
- editor: improve initialization error handling
## 3.4.0
###### _June 28, 2020_
- editor: fix 'readOnly' option check
- editor: add className and wrapperClassName props
- diffEditor: add className and wrapperClassName props
## 3.3.2
###### _June 20, 2020_
- utils: (monaco) add a possibility to pass src of config script
## 3.3.1
###### _May 30, 2020_
- editor: add overrideServices prop
## 3.2.1
###### _Apr 13, 2020_
- package: update default package version to 0.20.0
## 3.2.1
###### _Mar 31, 2020_
- types: fix monaco.config types
## 3.2.0
###### _Mar 31, 2020_
- fix: check the existence of target[key] in deepMerge
- config: deprecate indirect way of configuration and add deprecation message
- config: create a new structure of the configuration; the passed object will be directly passed to require.config
- readme: redesign the config section according to the new structure
## 3.1.2
###### _Mar 16, 2020_
- diff editor: remove line prop as it's not used (and can't be used)
## 3.1.1
###### _Feb 25, 2020_
- package: update devDependencies
- demo: update all dependencies
## 3.1.0
###### _Feb 6, 2020_
- monaco: update monaco version to 0.19.0
- utils: create new util - makeCancelable (for promises)
- editor/diffEditor: cancel promise before unmount
- demo: make "dark" default theme, update package version
## 3.0.1
###### _Dec 26, 2019_
- readme: update installation section
## 3.0.0
###### _Dec 24, 2019_
- monaco: update monaco version to 0.19.0
## 2.6.1
###### _Dec 23, 2019_
- versions: fix version
## 2.5.1
###### _Dec 23, 2019_
- types: fix type of "loading"
## 2.5.0
###### _Dec 19, 2019_
- types: fix type of theme; user should be able to pass any kind of theme (string)
## 2.4.0
###### _Dec 11, 2019_
- types: add config into namespace monaco
- types: change type of "loading" from React.ElementType to React.ReactNode
## 2.3.5
###### _Dec 10, 2019_
- optimize babel build with runtime transform
## 2.3.4
###### _Dec 10, 2019_
- add xxx.spec.js.snap files to npmignore
## 2.3.2 & 3
###### _Dec 10, 2019_
- fix typo in npmignore
## 2.3.1
###### _Dec 10, 2019_
- add unnecessary files to npmignore
## 2.3.0
###### _Nov 9, 2019_
- prevent onchange in case of undo/redo (controlled editor)
- create separate component for MonacoContainer
## 2.2.0
###### _Nov 9, 2019_
- force additional tokenization in controlled mode to avoid blinking
## 2.1.1
###### _Oct 25, 2019_
- fix "options" types
## 2.1.0
###### _Oct 25, 2019_
- add monaco-editor as peer dependency for proper type definitions
- write more proper types
## 2.0.0
###### _Oct 9, 2019_
- set the default version of monaco to 0.18.1
- set last value by .setValue method before changing the language
## 1.2.3
###### _Oct 7, 2019_
- (TYPES) add "void" to the "ControlledEditorOnChange" return types
## 1.2.2
###### _Oct 3, 2019_
- update dev dependencies
- check editor existence in "removeEditor" function
- replace "jest-dom" with "@testing-library/jest-dom"
## 1.2.1
###### _Aug 20, 2019_
- Set editor value directly in case of read only
## 1.2.0
###### _Aug 16, 2019_
- Add method to modify default config
## 1.1.0
###### _July 26, 2019_
- Apply edit by using `executeEdits` method
- Correct ControlledEditor usage examples in Docs
## 1.0.8
###### _July 24, 2019_
- Export utility 'monaco' to be able to access to the monaco instance
## 1.0.7
###### _July 21, 2019_
- Add controlled version of editor component
## 1.0.5
###### _July 19, 2019_
- Add a possibility to interact with Editor before it is mounted
## 1.0.4
###### _July 13, 2019_
- FIX: add "types" fild to package.json
## 1.0.3
###### _July 13, 2019_
- Add basic support for TypeScript
## 1.0.2
###### _June 26, 2019_
- Update package description
## 1.0.1
###### _June 26, 2019_
- Move from 'unpkg.com' to 'cdn.jsdelivr.net' (NOTE: in the future, it will be configurable)
## 1.0.0
###### _June 25, 2019_
:tada: First stable version :tada:
- Add monaco version to CDN urls to avoid 302 redirects
## 0.0.3
###### _June 22, 2019_
- Remove redundant peer dependency
## 0.0.2
###### _June 22, 2019_
- Make text-align of the wrapper of editors independent from outside
## 0.0.1
###### _June 21, 2019_
First version of the library

76
.npm-cache/_npx/0ebd1cb7ec11dd1f/node_modules/@monaco-editor/react/CODE_OF_CONDUCT.md generated vendored Normal file
View File

@@ -0,0 +1,76 @@
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, sex characteristics, gender identity and expression,
level of experience, education, socio-economic status, nationality, personal
appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at contact@surenatoyan.com. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq

21
.npm-cache/_npx/0ebd1cb7ec11dd1f/node_modules/@monaco-editor/react/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2018 Suren Atoyan
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

829
.npm-cache/_npx/0ebd1cb7ec11dd1f/node_modules/@monaco-editor/react/README.md generated vendored Normal file
View File

@@ -0,0 +1,829 @@
# @monaco-editor/react &middot; [![monthly downloads](https://img.shields.io/npm/dm/@monaco-editor/react)](https://www.npmjs.com/package/@monaco-editor/react) [![gitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/suren-atoyan/monaco-react/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/@monaco-editor/react.svg?style=flat)](https://www.npmjs.com/package/@monaco-editor/react) [![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/suren-atoyan/monaco-react/pulls)
<a href="http://monaco-react.surenatoyan.com/" target="_blank" rel="noreferrer">
<img align="center" width="100%" height="auto" src="./playground/logo.svg" style="margin-bottom: 10px">
</a>
<p />
Monaco Editor for React &middot; use the [monaco-editor](https://microsoft.github.io/monaco-editor/) in **any** [React](https://reactjs.org/) application without needing to use `webpack` (or `rollup`/`parcel`/etc) configuration files / plugins
<hr />
- :loudspeaker: for React `v19` users: check out the `v4.7.0-rc.0` version (use `npm install @monaco-editor/react@next` or `yarn add @monaco-editor/react@next`) and let us know if you face any issues
- :keyboard: rewritten with `TypeScript` :fire:
- :zap: [multi-model editor](#multi-model-editor) is already supported; enjoy it :tada:
- :tada: version `v4` is here - to see what's new in the new version and how to migrate from `v3`, please read this [doc](./v4.changes.md) (also, if you need the old version `README`, it's [here](https://github.com/suren-atoyan/monaco-react/blob/v3.8.3/README.md))
- :video_game: the new section [Development / Playground](#development-playground) has been created - now you can run the playground and play with the internals of the library
- :dizzy: it's already integrated with [@monaco-editor/loader](https://github.com/suren-atoyan/monaco-loader)
<hr />
## Synopsis
`Monaco` editor wrapper for easy/one-line integration with any `React` application without needing to use `webpack` (or any other module bundler) configuration files / plugins. It can be used with apps generated by `create-react-app`, `create-snowpack-app`, `vite`, `Next.js` or any other app generators - **you don't need to eject or rewire them**.
## Motivation
The [monaco-editor](https://microsoft.github.io/monaco-editor/) is a well-known web technology based code editor that powers [VS Code](https://code.visualstudio.com/). This library handles the setup process of the `monaco-editor` and provides a clean `API` to interact with `monaco` from any `React` environment
#### Demo
[Check it out!](https://monaco-react.surenatoyan.com/)
## Documentation
- [Installation](#installation)
- [Introduction](#introduction)
- [Usage](#usage)
- [Simple usage](#simple-usage)
- [Get value](#get-value)
- [`editor instance`](#editor-instance)
- [`monaco instance`](#monaco-instance)
- [`useMonaco`](#usemonaco)
- [`loader/config`](#loader-config)
- [Multi-model editor](#multi-model-editor)
- [`onValidate`](#onvalidate)
- [Notes](#notes)
- [For `electron` users](#for-electron-users)
- [For `Next.js` users](#for-nextjs-users)
- [Create your own editor!](#create-your-own-editor)
- [Development / Playground](#development-playground)
- [Props](#props)
- [`Editor`](#editor)
- [`Diff Editor`](#diffeditor)
### Installation
```bash
npm install @monaco-editor/react # or @monaco-editor/react@next for React v19
```
or
```bash
yarn add @monaco-editor/react
```
or you can use `CDN`. [Here is an example](https://codesandbox.io/s/cdn-example-fnhfr?file=/index.html)
**NOTE**: For `TypeScript` type definitions, this package uses the [monaco-editor](https://www.npmjs.com/package/monaco-editor) package as a peer dependency. So, if you need types and don't already have the [monaco-editor](https://www.npmjs.com/package/monaco-editor) package installed, you will need to do so
## Ask AI
[Monaco-React](https://codeparrot.ai/oracle?owner=suren-atoyan&repo=monaco-react) AI will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.
### Introduction
Besides types, the library exports `Editor`and `DiffEditor` components, as well as the `loader` utility and the `useMonaco` hook:
```javascript
import Editor, { DiffEditor, useMonaco, loader } from '@monaco-editor/react';
```
### Usage
#### Simple usage
Here is an example of a simple integration of `monaco` editor with a `React` project.
<br />
You just need to import and render the `Editor` component:
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import Editor from '@monaco-editor/react';
function App() {
return <Editor height="90vh" defaultLanguage="javascript" defaultValue="// some comment" />;
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
```
[codesandbox](https://codesandbox.io/s/simple-usage-uyf5n?file=/src/App.js)
<details><summary>Extended example</summary>
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import Editor from '@monaco-editor/react';
function App() {
function handleEditorChange(value, event) {
// here is the current value
}
function handleEditorDidMount(editor, monaco) {
console.log('onMount: the editor instance:', editor);
console.log('onMount: the monaco instance:', monaco);
}
function handleEditorWillMount(monaco) {
console.log('beforeMount: the monaco instance:', monaco);
}
function handleEditorValidation(markers) {
// model markers
// markers.forEach(marker => console.log('onValidate:', marker.message));
}
return (
<Editor
height="90vh"
defaultLanguage="javascript"
defaultValue="// some comment"
onChange={handleEditorChange}
onMount={handleEditorDidMount}
beforeMount={handleEditorWillMount}
onValidate={handleEditorValidation}
/>
);
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
```
[codesandbox](https://codesandbox.io/s/simple-usage-extended-3ivw2?file=/src/App.js)
</details>
#### Get value
There are two options to get the current value:
1. get the current model value from the `editor` instance
```javascript
import React, { useRef } from 'react';
import ReactDOM from 'react-dom';
import Editor from '@monaco-editor/react';
function App() {
const editorRef = useRef(null);
function handleEditorDidMount(editor, monaco) {
editorRef.current = editor;
}
function showValue() {
alert(editorRef.current.getValue());
}
return (
<>
<button onClick={showValue}>Show value</button>
<Editor
height="90vh"
defaultLanguage="javascript"
defaultValue="// some comment"
onMount={handleEditorDidMount}
/>
</>
);
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
```
[codesandbox](https://codesandbox.io/s/get-value-r9be5?file=/src/App.js)
2. get the current model value via `onChange` prop
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import Editor from '@monaco-editor/react';
function App() {
function handleEditorChange(value, event) {
console.log('here is the current model value:', value);
}
return (
<Editor
height="90vh"
defaultLanguage="javascript"
defaultValue="// some comment"
onChange={handleEditorChange}
/>
);
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
```
[codesandbox](https://codesandbox.io/s/onchange-4nf6g?file=/src/App.js)
<details><summary>(get the `DiffEditor` values via `editor` instance)</summary>
```javascript
import React, { useRef } from 'react';
import ReactDOM from 'react-dom';
import { DiffEditor } from '@monaco-editor/react';
function App() {
const diffEditorRef = useRef(null);
function handleEditorDidMount(editor, monaco) {
diffEditorRef.current = editor;
}
function showOriginalValue() {
alert(diffEditorRef.current.getOriginalEditor().getValue());
}
function showModifiedValue() {
alert(diffEditorRef.current.getModifiedEditor().getValue());
}
return (
<>
<button onClick={showOriginalValue}>show original value</button>
<button onClick={showModifiedValue}>show modified value</button>
<DiffEditor
height="90vh"
language="javascript"
original="// the original code"
modified="// the modified code"
onMount={handleEditorDidMount}
/>
</>
);
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
```
[codesandbox](https://codesandbox.io/s/get-values-diffeditor-c6xrg?file=/src/App.js)
</details>
#### `editor instance`
The `editor` instance is exposed from the `onMount` prop as a first parameter, the second is the `monaco` instance
```javascript
import React, { useRef } from 'react';
import ReactDOM from 'react-dom';
import Editor from '@monaco-editor/react';
function App() {
const editorRef = useRef(null);
function handleEditorDidMount(editor, monaco) {
// here is the editor instance
// you can store it in `useRef` for further usage
editorRef.current = editor;
}
return (
<Editor
height="90vh"
defaultLanguage="javascript"
defaultValue="// some comment"
onMount={handleEditorDidMount}
/>
);
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
```
[codesandbox](https://codesandbox.io/s/editor-instance-354cr?file=/src/App.js)
#### `monaco instance`
There are three options to get the `monaco` instance:
1. via `onMount/beforeMount`
```javascript
import React, { useRef } from 'react';
import ReactDOM from 'react-dom';
import Editor from '@monaco-editor/react';
function App() {
const monacoRef = useRef(null);
function handleEditorWillMount(monaco) {
// here is the monaco instance
// do something before editor is mounted
monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true);
}
function handleEditorDidMount(editor, monaco) {
// here is another way to get monaco instance
// you can also store it in `useRef` for further usage
monacoRef.current = monaco;
}
return (
<Editor
height="90vh"
defaultLanguage="javascript"
defaultValue="// some comment"
beforeMount={handleEditorWillMount}
onMount={handleEditorDidMount}
/>
);
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
```
[codesandbox](https://codesandbox.io/s/simple-usage-forked-il8kt?file=/src/App.js)
2. via `loader` utility
```javascript
import { loader } from '@monaco-editor/react';
loader.init().then((monaco) => console.log('here is the monaco instance:', monaco));
```
[codesandbox](https://codesandbox.io/s/monaco-instance-loader-ndzu9?file=/src/App.js)
3. via `useMonaco` hook
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import Editor, { useMonaco } from '@monaco-editor/react';
function App() {
const monaco = useMonaco();
useEffect(() => {
if (monaco) {
console.log('here is the monaco instance:', monaco);
}
}, [monaco]);
return <Editor height="90vh" defaultValue="// some comment" defaultLanguage="javascript" />;
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
```
[codesandbox](https://codesandbox.io/s/monaco-instance-usemonaco-88eml?file=/src/App.js)
#### `useMonaco`
`useMonaco` is a `React` hook that returns the instance of the `monaco`. But there is an important note that should be considered: the initialization process is being handled by the `loader` utility (the reference of [@monaco-editor/loader](https://github.com/suren-atoyan/monaco-loader)): that process is being done asynchronously and only once. So, if the first initiator of the initialization is `useMonaco` hook, the first returned value will be null, due to its asynchronous installation. Just check the returned value of `useMonaco`
```javascript
import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import Editor, { useMonaco } from '@monaco-editor/react';
function App() {
const monaco = useMonaco();
useEffect(() => {
// do conditional chaining
monaco?.languages.typescript.javascriptDefaults.setEagerModelSync(true);
// or make sure that it exists by other ways
if (monaco) {
console.log('here is the monaco instance:', monaco);
}
}, [monaco]);
return <Editor height="90vh" defaultValue="// some comment" defaultLanguage="javascript" />;
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
```
[codesandbox](https://codesandbox.io/s/usemonaco-9rpc4)
#### `loader-config`
The library exports (named) the utility called `loader`. Basically, it's the reference of [@monaco-editor/loader](https://github.com/suren-atoyan/monaco-loader). By default, `monaco` files are being downloaded from `CDN`. There is an ability to change this behavior, and other things concerning the `AMD` loader of `monaco`. We have a default [config file](https://github.com/suren-atoyan/monaco-loader/blob/master/src/config/index.js) that you can modify by the way shown below:
```js
import { loader } from '@monaco-editor/react';
// you can change the source of the monaco files
loader.config({ paths: { vs: '...' } });
// you can configure the locales
loader.config({ 'vs/nls': { availableLanguages: { '*': 'de' } } });
// or
loader.config({
paths: {
vs: '...',
},
'vs/nls': {
availableLanguages: {
'*': 'de',
},
},
});
```
##### use `monaco-editor` as an npm package
Starting from version `v4.4.0` it's possible to use `monaco-editor` as an `npm` package; import it from `node_modules` and include `monaco` sources into your bundle (instead of using CDN). To make it work you can do the following:
```javascript
import * as monaco from 'monaco-editor';
import { loader } from '@monaco-editor/react';
loader.config({ monaco });
// ...
```
NOTE: you should be aware that this may require additional `webpack` plugins, like [monaco-editor-webpack-plugin](https://www.npmjs.com/package/monaco-editor-webpack-plugin) or it may be impossible to use in apps generated by [CRA](https://reactjs.org/) without ejecting them.
If you use [Vite](https://vitejs.dev/), you need to do this:
```javascript
import { loader } from '@monaco-editor/react';
import * as monaco from 'monaco-editor';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
self.MonacoEnvironment = {
getWorker(_, label) {
if (label === 'json') {
return new jsonWorker();
}
if (label === 'css' || label === 'scss' || label === 'less') {
return new cssWorker();
}
if (label === 'html' || label === 'handlebars' || label === 'razor') {
return new htmlWorker();
}
if (label === 'typescript' || label === 'javascript') {
return new tsWorker();
}
return new editorWorker();
},
};
loader.config({ monaco });
loader.init().then(/* ... */);
```
[codesandbox](https://codesandbox.io/s/loader-ry1bb?file=/src/App.js)
**NOTE**: your passed object will be deeply merged with the [default one](https://github.com/suren-atoyan/monaco-loader/blob/master/src/config/index.js)
#### Multi-model editor
When you render the `Editor` component, a default model is being created. It's important to mention that when you change the `language` or `value` props, they affect the same model that has been auto-created at the mount of the component. In most cases it's okay, but the developers face problems when they want to implement a multi-model editor to support tabs/files like in `IDE`s. And previously to handle multiple models they had to do it manually and out of the component. Now, the multi-model `API` is supported :tada: Let's check how it works. There are three parameters to create a model - `value`, `language` and `path` (`monaco.editor.createModel(value, language, monaco.Uri.parse(path))`). You can consider last one (`path`) as an identifier for the model. The `Editor` component, now, has a `path` prop. When you specify a `path` prop, the `Editor` component checks if it has a model by that path or not. If yes, the existing model will be shown, otherwise, a new one will be created (and stored). Using this technique you can correspond your files with paths, and create a fully multi-model editor. You can open your file, do some changes, choose another file, and when you come back to the first one the previous model will be shown with the whole view state, text selection, undo stack, scroll position, etc. ([simple demo](https://codesandbox.io/s/multi-model-editor-kugi6?file=/src/App.js))
Here is a simple example: let's imagine we have a `JSON` like representation of some file structure, something like this:
```javascript
const files = {
'script.js': {
name: 'script.js',
language: 'javascript',
value: someJSCodeExample,
},
'style.css': {
name: 'style.css',
language: 'css',
value: someCSSCodeExample,
},
'index.html': {
name: 'index.html',
language: 'html',
value: someHTMLCodeExample,
},
};
```
And here is our simple multi-model editor implementation:
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import Editor from '@monaco-editor/react';
function App() {
const [fileName, setFileName] = useState('script.js');
const file = files[fileName];
return (
<>
<button disabled={fileName === 'script.js'} onClick={() => setFileName('script.js')}>
script.js
</button>
<button disabled={fileName === 'style.css'} onClick={() => setFileName('style.css')}>
style.css
</button>
<button disabled={fileName === 'index.html'} onClick={() => setFileName('index.html')}>
index.html
</button>
<Editor
height="80vh"
theme="vs-dark"
path={file.name}
defaultLanguage={file.language}
defaultValue={file.value}
/>
</>
);
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
```
The properties:
- `defaultValue`
- `defaultLanguage`
- `defaultPath`
- `value`
- `language`
- `path`
- `saveViewState`
will give you more flexibility in working with a multi-model editor.
**NOTE**
`defaultValue`, `defaultLanguage`, and `defaultPath` are being considered **only** during a new model creation
<br />
`value`, `language`, and `path` are being tracked the **whole time**
<br />
`saveViewState` is an indicator whether to save the models' view states between model changes or not
[codesandbox](https://codesandbox.io/s/multi-model-editor-kugi6?file=/src/App.js)
#### `onValidate`
`onValidate` is an additional property. An event is emitted when the content of the current model is changed and the current model markers are ready. It will be fired with the current model markers
```js
import React from 'react';
import ReactDOM from 'react-dom';
import Editor from '@monaco-editor/react';
function App() {
function handleEditorValidation(markers) {
// model markers
markers.forEach((marker) => console.log('onValidate:', marker.message));
}
return (
<Editor
height="90vh"
defaultLanguage="javascript"
defaultValue="// let's write some broken code 😈"
onValidate={handleEditorValidation}
/>
);
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
```
[codesandbox](https://codesandbox.io/s/onvalidate-4t5c2?file=/src/App.js)
It's important to mention that according to [monaco-editor](https://microsoft.github.io/monaco-editor/), the whole supported languages are divided into two groups:
1. languages that have rich `IntelliSense` and validation
- `TypeScript`
- `JavaScript`
- `CSS`
- `LESS`
- `SCSS`
- `JSON`
- `HTML`
2. languages with only basic syntax colorization
- `XML`
- `PHP`
- `C#`
- `C++`
- `Razor`
- `Markdown`
- `Diff`
- `Java`
- `VB`
- `CoffeeScript`
- `Handlebars`
- `Batch`
- `Pug`
- `F#`
- `Lua`
- `Powershell`
- `Python`
- `Ruby`
- `SASS`
- `R`
- `Objective-C`
**As you can guess, `onValidate` prop will work only with the languages from the first group**
#### Notes
##### For `electron` users
As a usual `React` component, this one also works fine with an electron-react environment, without need to have a `webpack` configuration or other extra things. But there are several cases that developers usually face to and sometimes it can be confusing. Here they are:
1. **You see loading screen stuck**
Usually, it's because your environment doesn't allow you to load external sources. By default, it loads `monaco` sources from `CDN`. You can see the [default configuration](https://github.com/suren-atoyan/monaco-loader/blob/master/src/config/index.js). But sure you can change that behavior; the library is fully configurable. Read about it [here](https://github.com/suren-atoyan/monaco-react#loader-config). So, if you want to download it from your local files, you can do it like this:
```javascript
import { loader } from '@monaco-editor/react';
loader.config({ paths: { vs: '../path-to-monaco' } });
```
2. **Based on your electron environment it can be required to have an absolute URL**
The utility function taken from [here](https://github.com/microsoft/monaco-editor-samples/blob/master/electron-amd-nodeIntegration/electron-index.html) can help you to achieve that. Let's imagine you have `monaco-editor` package installed and you want to load monaco from the `node_modules` rather than from CDN: in that case, you can write something like this:
```javascript
function ensureFirstBackSlash(str) {
return str.length > 0 && str.charAt(0) !== '/' ? '/' + str : str;
}
function uriFromPath(_path) {
const pathName = path.resolve(_path).replace(/\\/g, '/');
return encodeURI('file://' + ensureFirstBackSlash(pathName));
}
loader.config({
paths: {
vs: uriFromPath(path.join(__dirname, '../node_modules/monaco-editor/min/vs')),
},
});
```
There were several issues about this topic that can be helpful too - [1](https://github.com/suren-atoyan/monaco-react/issues/48) [2](https://github.com/suren-atoyan/monaco-react/issues/12) [3](https://github.com/suren-atoyan/monaco-react/issues/58) [4](https://github.com/suren-atoyan/monaco-react/issues/87)
Also, there is a [blog post](https://www.jameskerr.blog/posts/offline-monaco-editor-in-electron/) about using `@monaco-editor/react` in `Electron` in offline mode. You may find it helpful.
And if you use `electron` with `monaco` and `react` and have faced an issue different than the above-discribed ones, please let us know to make this section more helpful
##### For `Next.js` users
Like other React components, this one also works with `Next.js` without a hitch. The part of the source that should be pre-parsed is optimized for server-side rendering, so, in usual cases, it will work fine, but if you want to have access, for example, to [`monaco instance`](https://github.com/suren-atoyan/monaco-react#monaco-instance) you should be aware that it wants to access the `document` object, and it requires browser environment. Basically you just need to avoid running that part out of browser environment, there are several ways to do that. The one is described [here](https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr)
And if you use `monaco` with `Next.js` and have faced an issue different than the above-described one, please let us know to make this section more helpful
#### Create your own editor
Under the hood this library uses [@monaco-editor/loader](https://github.com/suren-atoyan/monaco-loader) that provides a utility called `loader`. The `loader` utility is a collection of functions that are being used to setup `monaco` editor into your browser. `loader.init()` handles the whole initialization process and returns the instance of the `monaco` - `loader.init().then(monaco => console.log("here is the monaco instance:", monaco))`. The `Editor` component uses this utility, gains access to `monaco instance` and creates the editor. [Here](https://github.com/suren-atoyan/monaco-react/blob/master/src/Editor/Editor.tsx) is the implementation of the `Editor` component. You can use the same technique to create your own `Editor`. You can just import the `loader` utility, access to `monaco instance`, and create your own editor with your own custom logic. The shortest way to do it:
```javascript
import loader from '@monaco-editor/loader';
loader.init().then((monaco) => {
const wrapper = document.getElementById('root');
wrapper.style.height = '100vh';
const properties = {
value: 'function hello() {\n\talert("Hello world!");\n}',
language: 'javascript',
};
monaco.editor.create(wrapper, properties);
});
```
That's all. You can wrap it into a `React` component, or `Vue`, or `Angular` or leave it as vanilla one or whatever you want; it's written in pure `js`
[codesandbox](https://codesandbox.io/s/create-your-own-editor-pd01u?file=/src/index.js)
### Development-Playground
It's always important to have a place, where you can play with the internals of the library. The `playground` is a minimal `React` app that directly uses the sources of the library. So, if you are going to open a `PR`, or want to check something, or just want to try the freshest state of the library, you can run the playground and enjoy it
- clone the repository
```bash
git clone https://github.com/suren-atoyan/monaco-react.git
```
- go to the library folder
```bash
cd monaco-react
```
- install the library's dependencies
```bash
npm install # yarn
```
- go to the playground
```bash
cd playground
```
- install the playground's dependencies
```bash
npm install # yarn
```
- and run the playground
```bash
npm run dev # yarn dev
```
monaco-react
├── playground
│ ├── src/ # playground sources
├── src/ # library sources
└── ...
If you want to change something in the library, go to `monaco-react/src/...`, the library will be automatically re-built and the playground will use the latest build
### Props
#### `Editor`
| Name | Type | Default | Description |
| :--------------- | :------------------------- | :----------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| defaultValue | string | | Default value of the current model |
| defaultLanguage | string | | Default language of the current model |
| defaultPath | string | | Default path of the current model. Will be passed as the third argument to `.createModel` method - `monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))` |
| value | string | | Value of the current model |
| language | enum: ... | | Language of the current model (all languages that are [supported](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages) by monaco-editor) |
| path | string | | Path of the current model. Will be passed as the third argument to `.createModel` method - `monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))` |
| theme | enum: "light" \| "vs-dark" | "light" | The theme for the monaco. Available options "vs-dark" \| "light". Define new themes by `monaco.editor.defineTheme` |
| line | number | | The line to jump on it |
| loading | React Node | "Loading..." | The loading screen before the editor will be mounted |
| options | object | {} | [IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html) |
| overrideServices | object | {} | [IEditorOverrideServices ](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOverrideServices.html) |
| saveViewState | boolean | true | Indicator whether to save the models' view states between model changes or not |
| keepCurrentModel | boolean | false | Indicator whether to dispose the current model when the Editor is unmounted or not |
| width | union: number \| string | "100%" | Width of the editor wrapper |
| height | union: number \| string | "100%" | Height of the editor wrapper |
| className | string | | Class name for the editor container |
| wrapperProps | object | {} | Props applied to the wrapper element |
| beforeMount | func | noop | **Signature: function(monaco: Monaco) => void** <br/> An event is emitted before the editor is mounted. It gets the `monaco` instance as a first argument |
| onMount | func | noop | **Signature: function(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void** <br/> An event is emitted when the editor is mounted. It gets the `editor` instance as a first argument and the `monaco` instance as a second |
| onChange | func | | **Signature: function(value: string \| undefined, ev: monaco.editor.IModelContentChangedEvent) => void** <br/> An event is emitted when the content of the current model is changed |
| onValidate | func | noop | **Signature: function(markers: monaco.editor.IMarker[]) => void** <br/> An event is emitted when the content of the current model is changed and the current model markers are ready |
#### `DiffEditor`
| Name | Type | Default | Description |
| :----------------------- | :------------------------- | :----------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| original | string | | The original source (left one) value |
| modified | string | | The modified source (right one) value |
| language | enum: ... | | Language for the both models - original and modified (all languages that are [supported](https://github.com/microsoft/monaco-languages) by monaco-editor) |
| originalLanguage | enum: ... | | This prop gives you the opportunity to specify the language of the original source separately, otherwise, it will get the value of the language property |
| modifiedLanguage | enum: ... | | This prop gives you the opportunity to specify the language of the modified source separately, otherwise, it will get the value of language property |
| originalModelPath | string | | Path for the "original" model. Will be passed as a third argument to `.createModel` method - `monaco.editor.createModel(..., ..., monaco.Uri.parse(originalModelPath))` |
| modifiedModelPath | string | | Path for the "modified" model. Will be passed as a third argument to `.createModel` method - `monaco.editor.createModel(..., ..., monaco.Uri.parse(modifiedModelPath))` |
| keepCurrentOriginalModel | boolean | false | Indicator whether to dispose the current original model when the DiffEditor is unmounted or not |
| keepCurrentModifiedModel | boolean | false | Indicator whether to dispose the current modified model when the DiffEditor is unmounted or not |
| theme | enum: "light" \| "vs-dark" | "light" | The theme for the monaco. Available options "vs-dark" \| "light". Define new themes by `monaco.editor.defineTheme` |
| line | number | | The line to jump on it |
| loading | React Node | "Loading..." | The loading screen before the editor will be mounted |
| options | object | {} | [IDiffEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IDiffEditorConstructionOptions.html) |
| width | union: number \| string | "100%" | Width of the editor wrapper |
| height | union: number \| string | "100%" | Height of the editor wrapper |
| className | string | | Class name for the editor container |
| wrapperProps | object | {} | Props applied to the wrapper element |
| beforeMount | func | noop | **Signature: function(monaco: Monaco) => void** <br/> An event is emitted before the editor mounted. It gets the `monaco` instance as a first argument |
| onMount | func | noop | **Signature: function(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void** <br/> An event is emitted when the editor is mounted. It gets the `editor` instance as a first argument and the `monaco` instance as a second |
## License
[MIT](./LICENSE)

232
.npm-cache/_npx/0ebd1cb7ec11dd1f/node_modules/@monaco-editor/react/dist/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,232 @@
export { default as loader } from '@monaco-editor/loader';
import * as react from 'react';
import { ReactNode } from 'react';
import * as monaco_editor from 'monaco-editor';
import { editor } from 'monaco-editor';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
type MonacoDiffEditor = editor.IStandaloneDiffEditor;
type DiffOnMount = (editor: MonacoDiffEditor, monaco: Monaco) => void;
type DiffBeforeMount = (monaco: Monaco) => void;
type DiffEditorProps = {
/**
* The original source (left one) value
*/
original?: string;
/**
* The modified source (right one) value
*/
modified?: string;
/**
* Language for the both models - original and modified
*/
language?: string;
/**
* This prop gives you the opportunity to specify the language of the
* original source separately, otherwise, it will get the value of the language property
*/
originalLanguage?: string;
/**
* This prop gives you the opportunity to specify the language of the
* modified source separately, otherwise, it will get the value of language property
*/
modifiedLanguage?: string;
/**
* Path for the "original" model
* Will be passed as a third argument to `.createModel` method
* `monaco.editor.createModel(..., ..., monaco.Uri.parse(originalModelPath))`
*/
originalModelPath?: string;
/**
* Path for the "modified" model
* Will be passed as a third argument to `.createModel` method
* `monaco.editor.createModel(..., ..., monaco.Uri.parse(modifiedModelPath))`
*/
modifiedModelPath?: string;
/**
* Indicator whether to dispose the current original model when the DiffEditor is unmounted or not
* @default false
*/
keepCurrentOriginalModel?: boolean;
/**
* Indicator whether to dispose the current modified model when the DiffEditor is unmounted or not
* @default false
*/
keepCurrentModifiedModel?: boolean;
/**
* The theme for the monaco
* Available options "vs-dark" | "light"
* Define new themes by `monaco.editor.defineTheme`
* @default "light"
*/
theme?: Theme | string;
/**
* The loading screen before the editor will be mounted
* @default "loading..."
*/
loading?: ReactNode;
/**
* IDiffEditorConstructionOptions
*/
options?: editor.IDiffEditorConstructionOptions;
/**
* Width of the editor wrapper
* @default "100%"
*/
width?: number | string;
/**
* Height of the editor wrapper
* @default "100%"
*/
height?: number | string;
/**
* Class name for the editor container
*/
className?: string;
/**
* Props applied to the wrapper element
*/
wrapperProps?: object;
/**
* Signature: function(monaco: Monaco) => void
* An event is emitted before the editor is mounted
* It gets the monaco instance as a first argument
* Defaults to "noop"
*/
beforeMount?: DiffBeforeMount;
/**
* Signature: function(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void
* An event is emitted when the editor is mounted
* It gets the editor instance as a first argument and the monaco instance as a second
* Defaults to "noop"
*/
onMount?: DiffOnMount;
};
declare function DiffEditor({ original, modified, language, originalLanguage, modifiedLanguage, originalModelPath, modifiedModelPath, keepCurrentOriginalModel, keepCurrentModifiedModel, theme, loading, options, height, width, className, wrapperProps, beforeMount, onMount, }: DiffEditorProps): JSX.Element;
declare const _default$1: react.MemoExoticComponent<typeof DiffEditor>;
declare function useMonaco(): typeof monaco_editor | null;
type OnMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void;
type BeforeMount = (monaco: Monaco) => void;
type OnChange = (value: string | undefined, ev: editor.IModelContentChangedEvent) => void;
type OnValidate = (markers: editor.IMarker[]) => void;
type EditorProps = {
/**
* Default value of the current model
*/
defaultValue?: string;
/**
* Default language of the current model
*/
defaultLanguage?: string;
/**
* Default path of the current model
* Will be passed as the third argument to `.createModel` method
* `monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`
*/
defaultPath?: string;
/**
* Value of the current model
*/
value?: string;
/**
* Language of the current model
*/
language?: string;
/**
* Path of the current model
* Will be passed as the third argument to `.createModel` method
* `monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`
*/
path?: string;
/**
* The theme for the monaco
* Available options "vs-dark" | "light"
* Define new themes by `monaco.editor.defineTheme`
* @default "light"
*/
theme?: Theme | string;
/**
* The line to jump on it
*/
line?: number;
/**
* The loading screen before the editor will be mounted
* @default "Loading..."
*/
loading?: ReactNode;
/**
* IStandaloneEditorConstructionOptions
*/
options?: editor.IStandaloneEditorConstructionOptions;
/**
* IEditorOverrideServices
*/
overrideServices?: editor.IEditorOverrideServices;
/**
* Indicator whether to save the models' view states between model changes or not
* Defaults to true
*/
saveViewState?: boolean;
/**
* Indicator whether to dispose the current model when the Editor is unmounted or not
* @default false
*/
keepCurrentModel?: boolean;
/**
* Width of the editor wrapper
* @default "100%"
*/
width?: number | string;
/**
* Height of the editor wrapper
* @default "100%"
*/
height?: number | string;
/**
* Class name for the editor container
*/
className?: string;
/**
* Props applied to the wrapper element
*/
wrapperProps?: object;
/**
* Signature: function(monaco: Monaco) => void
* An event is emitted before the editor is mounted
* It gets the monaco instance as a first argument
* Defaults to "noop"
*/
beforeMount?: BeforeMount;
/**
* Signature: function(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void
* An event is emitted when the editor is mounted
* It gets the editor instance as a first argument and the monaco instance as a second
* Defaults to "noop"
*/
onMount?: OnMount;
/**
* Signature: function(value: string | undefined, ev: monaco.editor.IModelContentChangedEvent) => void
* An event is emitted when the content of the current model is changed
*/
onChange?: OnChange;
/**
* Signature: function(markers: monaco.editor.IMarker[]) => void
* An event is emitted when the content of the current model is changed
* and the current model markers are ready
* Defaults to "noop"
*/
onValidate?: OnValidate;
};
declare function Editor({ defaultValue, defaultLanguage, defaultPath, value, language, path, theme, line, loading, options, overrideServices, saveViewState, keepCurrentModel, width, height, className, wrapperProps, beforeMount, onMount, onChange, onValidate, }: EditorProps): JSX.Element;
declare const _default: react.MemoExoticComponent<typeof Editor>;
type Monaco = typeof monaco;
type Theme = 'vs-dark' | 'light';
export { BeforeMount, DiffBeforeMount, _default$1 as DiffEditor, DiffEditorProps, DiffOnMount, _default as Editor, EditorProps, Monaco, MonacoDiffEditor, OnChange, OnMount, OnValidate, Theme, _default as default, useMonaco };

2
.npm-cache/_npx/0ebd1cb7ec11dd1f/node_modules/@monaco-editor/react/dist/index.js generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
.npm-cache/_npx/0ebd1cb7ec11dd1f/node_modules/@monaco-editor/react/dist/index.js.map generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
.npm-cache/_npx/0ebd1cb7ec11dd1f/node_modules/@monaco-editor/react/dist/index.mjs generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
.npm-cache/_npx/0ebd1cb7ec11dd1f/node_modules/@monaco-editor/react/dist/index.mjs.map generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

64
.npm-cache/_npx/0ebd1cb7ec11dd1f/node_modules/@monaco-editor/react/package.json generated vendored Normal file
View File

@@ -0,0 +1,64 @@
{
"name": "@monaco-editor/react",
"version": "4.7.0",
"description": "Monaco Editor for React - use the monaco-editor in any React application without needing to use webpack (or rollup/parcel/etc) configuration files / plugins",
"author": "Suren Atoyan <contact@surenatoyan.com>",
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
"scripts": {
"lint": "eslint src",
"build": "tsup",
"dev": "tsup --watch",
"prepublishOnly": "npm test && npm run lint && npm run build",
"test": "vitest run"
},
"repository": {
"type": "git",
"url": "git+https://github.com/suren-atoyan/monaco-react.git"
},
"keywords": [
"monaco",
"editor",
"react",
"vscode",
"code",
"text"
],
"license": "MIT",
"bugs": {
"url": "https://github.com/suren-atoyan/monaco-react/issues"
},
"homepage": "https://github.com/suren-atoyan/monaco-react#readme",
"peerDependencies": {
"monaco-editor": ">= 0.25.0 < 1",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@typescript-eslint/eslint-plugin": "^5.54.0",
"@typescript-eslint/parser": "^5.54.0",
"eslint": "^8.35.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "6.7.1",
"eslint-plugin-react": "7.32.2",
"eslint-plugin-react-hooks": "4.6.0",
"husky": "^4.2.3",
"prettier": "^2.8.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tsup": "^6.7.0",
"typescript": "^4.9.5",
"vitest": "^0.29.2"
},
"husky": {
"hooks": {
"pre-commit": "rm -rf ./lib && npm test && npm run lint"
}
},
"dependencies": {
"@monaco-editor/loader": "^1.5.0"
}
}

1
.npm-cache/_npx/0ebd1cb7ec11dd1f/node_modules/@monaco-editor/react/setupTests.ts generated vendored Normal file
View File

@@ -0,0 +1 @@
import "@testing-library/jest-dom";

6
.npm-cache/_npx/0ebd1cb7ec11dd1f/node_modules/@monaco-editor/react/tea.yaml generated vendored Normal file
View File

@@ -0,0 +1,6 @@
# https://tea.xyz/what-is-this-file
---
version: 1.0.0
codeOwners:
- '0x8958579fcDE99f81808e6c89aCFeEc3DF93Ad9bb'
quorum: 1

21
.npm-cache/_npx/0ebd1cb7ec11dd1f/node_modules/@monaco-editor/react/tsconfig.json generated vendored Normal file
View File

@@ -0,0 +1,21 @@
{
"compilerOptions": {
"module": "esnext",
"lib": ["esnext", "dom", "dom.iterable"],
"target": "es2020",
"declaration": true,
"declarationMap": true,
"outDir": "./dist",
"strict": true,
"skipLibCheck": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedIndexedAccess": true,
"moduleResolution": "node",
"jsx": "react",
"esModuleInterop": true
},
"include": ["src", "tsup.config.ts", "setupTests.ts", "vitest.config.ts"]
}

12
.npm-cache/_npx/0ebd1cb7ec11dd1f/node_modules/@monaco-editor/react/tsup.config.ts generated vendored Normal file
View File

@@ -0,0 +1,12 @@
import { defineConfig } from 'tsup';
export default defineConfig((opts) => ({
clean: true,
dts: true,
entry: ['src/index.ts'],
format: ['cjs', 'esm'],
minify: !opts.watch,
sourcemap: true,
target: 'esnext',
outDir: 'dist',
}));

59
.npm-cache/_npx/0ebd1cb7ec11dd1f/node_modules/@monaco-editor/react/v4.changes.md generated vendored Normal file
View File

@@ -0,0 +1,59 @@
## v4 changes
See also the [CHANGELOG](https://github.com/suren-atoyan/monaco-react/blob/master/CHANGELOG.md)
`v4` brings lots of new features and some breaking changes. First, let's see what's broken comparing with the `v3`
1) `editorDidMount` - **removed**
In the new version there is no `editorDidMount` property. Now it can be replaced by `onMount`. If you happen to remember, the signature of `editorDidMount` was `function(getEditorValue: () => string, editor: monaco.editor.IStandaloneCodeEditor) => void`
The `onMount` prop is a little bit different, the signature is `function(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void`. As you can see it also exposes the `monaco` instance as a second parameter. There is no `getEditorValue`. To get the current model value you can use `editor` instance (`editor.getValue()`) or `onChange` prop. [Read more](https://github.com/suren-atoyan/monaco-react#get-value)
2) `beforeMount` - **new** (`onMount` - **new**)
In addition to `onMount` now there is also `beforeMount` that exposes the `monaco` instance as a first parameter. Here you can do something before the editor is mounted. [Read more](https://github.com/suren-atoyan/monaco-react#monaco-instance)
3) `ControlledEditor` - **removed**
`ControlledEditor` component is removed. Now there is one `Editor` component that behaves in `controlled` mode or `uncontrolled` mode based on the usage of `value` property. [Read more](https://github.com/suren-atoyan/monaco-react#uncontrolled-controlled-modes)
4) `multi-model editor` - **new**
multi-model editor is supported now. Check [this](https://codesandbox.io/s/multi-model-editor-kugi6?file=/src/App.js) for simple demo. [Read more](https://github.com/suren-atoyan/monaco-react#multi-model-editor)
5) `defaultPath ` - **new**
Default path of the current model. Will be passed as the third argument to `.createModel` method `monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`
For `DiffEditor` there are `originalModelPath` and `modifiedModelPath`
6) `path` - **new**
Path of the current model. Will be passed as the third argument to `.createModel` method `monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`
7) `defaultLanguage` - **new**
Default language of the current model
8) `useMonaco` - **new**
`useMonaco` is a `React` hook that returns the instance of the `monaco`. [Read more](https://github.com/suren-atoyan/monaco-react#usemonaco)
9) `onValidate` - **new**
`onValidate` is an additional property. An event is emitted when the length of the model markers of the current model isn't 0. [Read more](https://github.com/suren-atoyan/monaco-react#onvalidate)
10) `defaultProp` - **new**
The initial value of the default (auto created) model
11) `monaco` utility - **renamed**
now, it's called `loader`. [Read more](https://github.com/suren-atoyan/monaco-react#loader-config)
12) `onChange` - **signature change**
old - `function(ev: any, value: string | undefined) => string | undefined`
<br />
new - `function(value: string | undefined, ev: monaco.editor.IModelContentChangedEvent) => void`

13
.npm-cache/_npx/0ebd1cb7ec11dd1f/node_modules/@monaco-editor/react/vitest.config.ts generated vendored Normal file
View File

@@ -0,0 +1,13 @@
import { defineConfig } from "vitest/config";
export default defineConfig({
test: {
environment: "jsdom",
globals: true,
snapshotFormat: {
printBasicPrototype: true,
},
setupFiles: ["./setupTests.ts"],
exclude: ["**/node_modules/**", "**/demo/**", "**/playground/**"],
},
});