{"id":13445530,"url":"https://github.com/scniro/react-codemirror2","last_synced_at":"2025-05-14T01:11:16.031Z","repository":{"id":21492996,"uuid":"93083679","full_name":"scniro/react-codemirror2","owner":"scniro","description":"Codemirror integrated components for React","archived":false,"fork":false,"pushed_at":"2024-08-31T04:12:11.000Z","size":4355,"stargazers_count":1662,"open_issues_count":89,"forks_count":193,"subscribers_count":21,"default_branch":"master","last_synced_at":"2024-10-29T15:10:48.350Z","etag":null,"topics":["codemirror","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scniro.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-01T17:41:42.000Z","updated_at":"2024-10-23T04:27:46.000Z","dependencies_parsed_at":"2023-01-13T21:31:05.773Z","dependency_job_id":"5fe74503-5ad7-4479-a33b-5d170c6a37ed","html_url":"https://github.com/scniro/react-codemirror2","commit_stats":{"total_commits":181,"total_committers":15,"mean_commits":"12.066666666666666","dds":"0.22651933701657456","last_synced_commit":"b4039e449dbeac0e59ca80e38827698c3c2395c3"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scniro%2Freact-codemirror2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scniro%2Freact-codemirror2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scniro%2Freact-codemirror2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scniro%2Freact-codemirror2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scniro","download_url":"https://codeload.github.com/scniro/react-codemirror2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247934841,"owners_count":21020729,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codemirror","react","typescript"],"created_at":"2024-07-31T05:00:35.591Z","updated_at":"2025-04-08T22:19:22.450Z","avatar_url":"https://github.com/scniro.png","language":"TypeScript","readme":"[![Coverage](https://img.shields.io/coveralls/scniro/react-codemirror2.svg?style=flat-square)](https://coveralls.io/github/scniro/react-codemirror2)\n[![Downloads](https://img.shields.io/npm/dm/react-codemirror2.svg?style=flat-square)](https://www.npmjs.com/package/react-codemirror2)\n[![NPM Version](https://img.shields.io/npm/v/react-codemirror2.svg?style=flat-square)](https://www.npmjs.com/package/react-codemirror2)\n\n### react-codemirror2\n\ndemo @ [scniro.github.io/react-codemirror2](https://scniro.github.io/react-codemirror2/)\n\n\n## Install\n\n```bash\nnpm install react-codemirror2 codemirror --save\n```\n\n`react-codemirror2` ships with the notion of an [uncontrolled](https://reactjs.org/docs/uncontrolled-components.html) and [controlled](https://reactjs.org/docs/forms.html#controlled-components) component. `UnControlled` consists of a simple wrapper largely powered by the inner workings of `codemirror` itself, while `Controlled` will demand state management from the user, preventing codemirror changes unless properly handled via `value`. The latter will offer more control and likely be more appropriate with [redux](http://redux.js.org/) heavy apps.\n\n## uncontrolled usage\n```jsx\nimport {UnControlled as CodeMirror} from 'react-codemirror2'\n\n\u003cCodeMirror\n  value='\u003ch1\u003eI ♥ react-codemirror2\u003c/h1\u003e'\n  options={{\n    mode: 'xml',\n    theme: 'material',\n    lineNumbers: true\n  }}\n  onChange={(editor, data, value) =\u003e {\n  }}\n/\u003e\n```\n\n## controlled usage\n```jsx\nimport {Controlled as CodeMirror} from 'react-codemirror2'\n\n\u003cCodeMirror\n  value={this.state.value}\n  options={options}\n  onBeforeChange={(editor, data, value) =\u003e {\n    this.setState({value});\n  }}\n  onChange={(editor, data, value) =\u003e {\n  }}\n/\u003e\n```\n\n## requiring codemirror resources\n\n- [codemirror](https://www.npmjs.com/package/codemirror)\n\n`codemirror` comes as a [peer dependency](https://nodejs.org/en/blog/npm/peer-dependencies/), meaning you'll need to require it in your project _in addition to_ `react-codemirror2`. This prevents any versioning conflicts that would arise if `codemirror` came as a dependency through this wrapper. It's been observed that version mismatches can cause difficult to trace issues such as syntax highlighting disappearing without any explicit errors/warnings\n\n- additional\n\nSince codemirror ships mostly unconfigured, the user is left with the responsibility for requiring any additional resources should they be necessary. This is often the case when specifying certain [language modes]() and [themes](). How to import/require these assets will vary according to the specifics of your development environment. Below is a sample to include the assets necessary to specify a mode of `xml` (HTML) and a `material` theme.\n\n\u003e note that the base codemirror.css file is required in all use cases\n\n```css\n@import 'codemirror/lib/codemirror.css';\n@import 'codemirror/theme/material.css';\n```\n\n```jsx\nimport CodeMirror from 'react-codemirror2';\nrequire('codemirror/mode/xml/xml');\nrequire('codemirror/mode/javascript/javascript');\n```\n\n## props\n\n| prop         | type\u0026nbsp;*`default`*  | components                        | description                                                                                                           |\n|--------------|------------------------|-----------------------------------|-----------------------------------------------------------------------------------------------------------------------|\n| `autoCursor` | boolean\u0026nbsp;*`true`*  | `Controlled`\u0026nbsp;`UnControlled`  | should component cursor position correct when `value` changed                                                         |                                                                                   |\n| `autoScroll` | boolean\u0026nbsp;*`true`*  | `Controlled`\u0026nbsp;`UnControlled`  | should component scroll cursor position into view when `value` changed                                                |\n| `className`  | string                 | `Controlled`\u0026nbsp;`UnControlled`  | pass through class *`class=\"react-codemirror2 className\"`*                                                            |\n| `defineMode` | object                 | `Controlled`\u0026nbsp;`UnControlled`  | pass a [custom mode](http://marijnhaverbeke.nl/blog/codemirror-mode-system.html) via `{name: 'custom', fn: myModeFn}` |\n| `detach`     | boolean                | `UnControlled`                    | should component ignore new props                                                                                     |\n| `options`    | object                 | `Controlled`\u0026nbsp;`UnControlled`  | [codemirror configuration](https://codemirror.net/doc/manual.html#config)                                             |\n| `value`      | string                 | *`Controlled`\u0026nbsp;`UnControlled` | * component value _**must be managed for controlled components**_                                                     |\n\n## props cont. (wrapped codemirror [programming api](https://codemirror.net/doc/manual.html#api))\n\n- `cursor` - *[setCursor](https://codemirror.net/doc/manual.html#setCursor)*\n\u003e will programmatically set cursor to the position specified\n```jsx\n\u003cCodeMirror\n  [...]\n  cursor={{\n    line: 5,\n    ch: 10\n  }}\n  onCursor={(editor, data) =\u003e {}}\n/\u003e\n```\n- `scroll` - *[scrollTo](https://codemirror.net/doc/manual.html#scrollTo)*\n\u003e will programmatically scroll to the specified coordinate\n```jsx\n\u003cCodeMirror\n  [...]\n  scroll={{\n    x: 50,\n    y: 50\n  }}\n  onScroll={(editor, data) =\u003e {}}\n/\u003e\n```\n- `selection={{ranges: array\u003c{anchor, head}\u003e, focus?: boolean}` - *[setSelections](https://codemirror.net/doc/manual.html#setSelections)*\n\u003e will programmatically select the ranges specified\n```jsx\n\u003cCodeMirror\n  [...]\n  selection={{\n    ranges: [{\n      anchor: {ch: 8, line: 5},\n      head: {ch: 37, line: 5}\n    }],\n    focus: true // defaults false if not specified\n  }}\n  onSelection={(editor, data) =\u003e {}}\n/\u003e\n```\n\n## events\n\n| event                                                            | components                       | description                                                                                                 |\n|------------------------------------------------------------------|----------------------------------|-------------------------------------------------------------------------------------------------------------|\n| **editorDidAttach(editor)**                                      | `UnControlled`                   | component is now **responding** to new props                                                                |\n| **editorDidConfigure(editor)**                                   | `Controlled`\u0026nbsp;`UnControlled` | component configuration has been set                                                                        |\n| **editorDidDetach(editor)**                                      | `UnControlled`                   | component is now **ignoring** new props                                                                     |\n| **editorDidMount(editor,\u0026nbsp;_[next]_)**                        | `Controlled`\u0026nbsp;`UnControlled` | * invoking optional `next` will trigger `editorDidConfigure`                                                |\n| **editorWillUnmount(editor)**                                    | `Controlled`\u0026nbsp;`UnControlled` | invoked before [`componentWillUnmount`](https://reactjs.org/docs/react-component.html#componentwillunmount) |\n| **onBeforeChange(editor,\u0026nbsp;data,\u0026nbsp;value,\u0026nbsp;_[next]_)** | `Controlled`\u0026nbsp;`UnControlled` | * if used, `next` is returned via `UnControlled` and *must* be invoked to trigger onChange                  |\n| **onChange(editor,\u0026nbsp;data,\u0026nbsp;value)**                      | `Controlled`\u0026nbsp;`UnControlled` | the component value has been changed                                                                        |\n\n## events cont. [wrapped codemirror events](https://codemirror.net/doc/manual.html#events)\n\n- `onBlur(editor, event)` - *[blur](https://codemirror.net/doc/manual.html#event_blur)*\n- `onContextMenu(editor, event)` - *[contextmenu](https://codemirror.net/doc/manual.html#event_dom)*\n- `onCopy(editor)` - *[copy](https://codemirror.net/doc/manual.html#event_dom)*\n- `onCursor(editor, data)`- *[cursorActivity](https://codemirror.net/doc/manual.html#event_doc_cursorActivity)*\n- `onCursorActivity(editor)` - *[cursorActivity](https://codemirror.net/doc/manual.html#event_cursorActivity)*\n- `onCut(editor)` - *[cut](https://codemirror.net/doc/manual.html#event_dom)*\n- `onDblClick(editor, event)` - *[dblclick](https://codemirror.net/doc/manual.html#event_dom)*\n- `onDragEnter(editor, event)` - *[dragenter](https://codemirror.net/doc/manual.html#event_dom)*\n- `onDragOver(editor, event)` - *[dragover](https://codemirror.net/doc/manual.html#event_dom)*\n- `onDragLeave(editor, event)` - *[dragleave](https://codemirror.net/doc/manual.html#event_dom)*\n- `onDragStart(editor, event)` - *[dragstart](https://codemirror.net/doc/manual.html#event_dom)*\n- `onDrop(editor, event)` - *[drop](https://codemirror.net/doc/manual.html#event_dom)*\n- `onFocus(editor, event)` - *[focus](https://codemirror.net/doc/manual.html#event_focus)*\n- `onGutterClick(editor, lineNumber, gutter, event)` - *[gutterClick](https://codemirror.net/doc/manual.html#event_gutterClick)*\n- `onInputRead(editor, changeObj)` - *[gutterClick](https://codemirror.net/doc/manual.html#events)*\n- `onKeyDown(editor, event)` - *[keydown](https://codemirror.net/doc/manual.html#event_dom)*\n- `onKeyHandled(editor, key, event)` - *[keyhandled](https://codemirror.net/doc/manual.html#events)*\n- `onKeyPress(editor, event)` - *[keypress](https://codemirror.net/doc/manual.html#event_dom)*\n- `onKeyUp(editor, event)` - *[keyup](https://codemirror.net/doc/manual.html#event_dom)*\n- `onMouseDown(editor, event)` - *[mousedown](https://codemirror.net/doc/manual.html#event_dom)*\n- `onPaste(editor)` - *[paste](https://codemirror.net/doc/manual.html#event_dom)*\n- `onScroll(editor, data)` - *[scroll](https://codemirror.net/doc/manual.html#event_scroll)*\n- `onSelection(editor, data)` - *[beforeSelectionChange](https://codemirror.net/doc/manual.html#event_doc_beforeSelectionChange)*\n- `onTouchStart(editor, event)` - *[touchstart](https://codemirror.net/doc/manual.html#event_dom)*\n- `onUpdate(editor, event)` - *[update](https://codemirror.net/doc/manual.html#event_update)*\n- `onViewportChange(editor, from, to)` - *[viewportChange](https://codemirror.net/doc/manual.html#event_viewportChange)*\n\n## FAQ\n\n- Is server side rendering supported?\n\nYes. react-codemirror2 will prevent rendering in absence of `window`. You can also force the component to not render via a `PREVENT_CODEMIRROR_RENDER` global.\n\n- How can I get the instance?\n\nThe recommended technique to get the instance is to persist the `editor` returned via event callbacks. There is no static method to get it on demand, e.g. `CodeMirror.getInstance()`. Example...\n\n```jsx\nconstructor() {\n  this.instance = null;\n}\n\nrender() {\n  \u003cCodeMirror editorDidMount={editor =\u003e { this.instance = editor }}/\u003e\n}\n```\n\n- How can I have a resizable editor?\n\nCheck out [bokuweb/re-resizable](https://github.com/bokuweb/re-resizable). Wrapping your component with `\u003cResizable/\u003e's` works well\n\n## Contributing\n\nPull Requests are welcome. Be mindful of the available scripts below to help submitting a well-received contribution.\n\n- `npm run start` to run the app on `localhost:8000`\n- `npm run test` to ensure tests continue to pass\n- `npm run build` to generate the demo bundle\n\nnote that it's necessary to bump the [package.json](https://github.com/scniro/react-codemirror2/blob/master/package.json#L3) version prior to final `npm run build` so we can grab the proposed new version as seen in the demo header. Also note, the core changes are to be made in `src/index.tsx` as `./index.js` and `./index.d.ts` are _generated_\n\n[MIT](./LICENSE) © 2020 [scniro](https://github.com/scniro)\n","funding_links":[],"categories":["UI Components","TypeScript","UI components"],"sub_categories":["Form Components","Rich text and code editing"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscniro%2Freact-codemirror2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscniro%2Freact-codemirror2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscniro%2Freact-codemirror2/lists"}