{"_id":"react-codemirror2-react-17","_rev":"1-9844a36f61a51fab7c21bc4cfb708017","name":"react-codemirror2-react-17","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"react-codemirror2-react-17","version":"1.0.0","description":"a tiny react codemirror component wrapper","main":"index.js","typings":"index.d.ts","scripts":{"prestart":"npm run build","start":"node docs/server.js","prebuild":"npm run transpile","build":"webpack-cli --mode production --display-error-details --optimize-minimize --config docs/webpack.config.js","transpile":"tsc","posttranspile":"gulp ts-scrub","pretest":"npm run transpile","test":"jest"},"jest":{"collectCoverage":true,"collectCoverageFrom":["src/**"],"setupFiles":["@nteract/mockument","raf/polyfill"],"testRegex":"./test/(index|index.server).spec.tsx","transform":{".(ts|tsx)":"ts-jest"},"moduleFileExtensions":["ts","tsx","js"]},"repository":{"type":"git","url":"git+https://github.com/scniro/react-codemirror2.git"},"author":{"name":"scniro"},"license":"MIT","bugs":{"url":"https://github.com/scniro/react-codemirror2/issues"},"homepage":"https://github.com/scniro/react-codemirror2#readme","keywords":["react","react-codemirror","codemirror","editor","syntax","ide","code"],"peerDependencies":{"codemirror":"5.x","react":"^17.0.1"},"devDependencies":{"@babel/preset-env":"7.10.1","@babel/preset-react":"7.10.1","@nteract/mockument":"1.0.4","@types/codemirror":"0.0.x","@types/jest":"25.2.3","@types/react":"16.9.35","babel-core":"6.26.3","babel-loader":"8.1.0","babel-plugin-transform-object-assign":"6.22.0","babel-preset-env":"1.7.0","babel-preset-es2015":"6.24.1","babel-preset-react":"6.24.1","codemirror":"5.x","coveralls":"3.1.0","css-loader":"3.5.3","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","gulp":"4.0.2","gulp-babel":"8.0.0","gulp-beautify":"3.0.0","gulp-replace":"1.0.0","jest":"26.0.1","node-sass":"4.14.1","prismjs":"1.20.0","raf":"3.4.1","react":"16.13.1","react-dom":"16.13.1","react-redux":"7.2.0","react-test-renderer":"16.13.1","redux":"4.0.5","rimraf":"3.0.2","sass-loader":"8.0.2","sinon":"9.0.2","style-loader":"1.2.1","ts-jest":"26.0.0","typescript":"3.9.3","typescript-formatter":"7.2.2","webpack":"4.43.0","webpack-cli":"3.3.11"},"gitHead":"280d01b62247466cc50f1c1fba4c69f5ebcf4bf8","_id":"react-codemirror2-react-17@1.0.0","_nodeVersion":"14.16.1","_npmVersion":"7.6.3","dist":{"integrity":"sha512-IAJozcvfiYo14s7C4KS0roMHHzZpClPuJb7VblhoEE8bOebMGkHj+FnjBX30dqNGL1rCNHr9KPYarFI7CJsjtg==","shasum":"515d5eff01d974d4fcc76086e52ac9dfa839a8cc","tarball":"https://registry.npmjs.org/react-codemirror2-react-17/-/react-codemirror2-react-17-1.0.0.tgz","fileCount":9,"unpackedSize":70844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiU4jCRA9TVsSAnZWagAA+LAP/j8Jzt/pt8rtXWtHGLvN\nAJjz5ZWAjIVuDo09KFVE3FrSm7JpMzankhvSTM62dBIy+Z8fjOtZWZwlwZCb\nGC32ZibqeiD2Aw+1mCcCfdHBXgFXxe04zFBDjpa36AtPazdIYYTjs17CbHiu\nZetp9yJXaK3AAOeG2T75mz0PJLIzZxTMjCGhlDOsPv2rlBrAuLXXo1RtGPs9\nRHY7PIq6H/okInbLt9iGuW3gpETJhoVAH+g1qPNRcYdttQF/RrZ4O3knU4Ut\nkESByyNLw1DXvaqLYk5DYOKXSzZvnhA4itYN+fakQ9kuoQPrUxDa3UC2XgQB\nWSQfCR5Wabx05S+DSGT+95CkUBkUgsHsjXh+sBfeTQaZ50w/odTyte+FRvqp\nC6TCihL07S5+vEia/Dv/j1scGUzW+bYuoC5c0K84EKWoxXViv2UufZ+E+OTp\n7Z9zbwOcN8M5QVGUuNXqToQrTzhOzI6w53F/PW8ZH5c86RAJrPhOfczXqpT2\nVJ87f00sXN26xmIhvU3bQAvmEgIXhABu5BjKZQBwZVdWev/6oMYZH4fy/zMn\ntsMf58u4ncElCa/u/7z/sg2OOIK7/6/E0nIeGO4AqPZVzYJ8ccDClMVX1PXd\nj4e0ywpBocn0O9EY5aV2i8lvmStatvCZ958hSYdT0I8c2m07XV/kQyPnDgBK\n3NEn\r\n=RGoo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDt1N4DoZxssBSIbevIpX8ckGluRAAx8s4w8pOl0F9D9AiEA2y+C3wAtHYtNWCarTR5n/czxkE3SpHwNNA1P6A8igbs="}]},"_npmUser":{"name":"kazeichev","email":"kazeichev@yandex.ru"},"directories":{},"maintainers":[{"name":"kazeichev","email":"kazeichev@yandex.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-codemirror2-react-17_1.0.0_1619611170951_0.27156931664933737"},"_hasShrinkwrap":false}},"time":{"created":"2021-04-28T11:59:30.950Z","1.0.0":"2021-04-28T11:59:31.094Z","modified":"2022-05-14T08:00:34.722Z"},"maintainers":[{"name":"kazeichev","email":"kazeichev@yandex.ru"}],"description":"a tiny react codemirror component wrapper","homepage":"https://github.com/scniro/react-codemirror2#readme","keywords":["react","react-codemirror","codemirror","editor","syntax","ide","code"],"repository":{"type":"git","url":"git+https://github.com/scniro/react-codemirror2.git"},"author":{"name":"scniro"},"bugs":{"url":"https://github.com/scniro/react-codemirror2/issues"},"license":"MIT","readme":"[![Build Status](https://img.shields.io/travis/scniro/react-codemirror2.svg?style=flat-square)](https://travis-ci.org/scniro/react-codemirror2)\n[![Dependency Status](https://img.shields.io/david/scniro/react-codemirror2.svg?label=deps&style=flat-square)](https://david-dm.org/scniro/react-codemirror2)\n[![DevDependency Status](https://img.shields.io/david/dev/scniro/react-codemirror2.svg?label=devDeps&style=flat-square)](https://david-dm.org/scniro/react-codemirror2#info=devDependencies)\n[![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<CodeMirror\n  value='<h1>I ♥ react-codemirror2</h1>'\n  options={{\n    mode: 'xml',\n    theme: 'material',\n    lineNumbers: true\n  }}\n  onChange={(editor, data, value) => {\n  }}\n/>\n```\n\n## controlled usage\n```jsx\nimport {Controlled as CodeMirror} from 'react-codemirror2'\n\n<CodeMirror\n  value={this.state.value}\n  options={options}\n  onBeforeChange={(editor, data, value) => {\n    this.setState({value});\n  }}\n  onChange={(editor, data, value) => {\n  }}\n/>\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> 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&nbsp;*`default`*  | components                        | description                                                                                                           |\n|--------------|------------------------|-----------------------------------|-----------------------------------------------------------------------------------------------------------------------|\n| `autoCursor` | boolean&nbsp;*`true`*  | `Controlled`&nbsp;`UnControlled`  | should component cursor position correct when `value` changed                                                         |                                                                                   |\n| `autoScroll` | boolean&nbsp;*`true`*  | `Controlled`&nbsp;`UnControlled`  | should component scroll cursor position into view when `value` changed                                                |\n| `className`  | string                 | `Controlled`&nbsp;`UnControlled`  | pass through class *`class=\"react-codemirror2 className\"`*                                                            |\n| `defineMode` | object                 | `Controlled`&nbsp;`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`&nbsp;`UnControlled`  | [codemirror configuration](https://codemirror.net/doc/manual.html#config)                                             |\n| `value`      | string                 | *`Controlled`&nbsp;`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> will programmatically set cursor to the position specified\n```jsx\n<CodeMirror\n  [...]\n  cursor={{\n    line: 5,\n    ch: 10\n  }}\n  onCursor={(editor, data) => {}}\n/>\n```\n- `scroll` - *[scrollTo](https://codemirror.net/doc/manual.html#scrollTo)*\n> will programmatically scroll to the specified coordinate\n```jsx\n<CodeMirror\n  [...]\n  scroll={{\n    x: 50,\n    y: 50\n  }}\n  onScroll={(editor, data) => {}}\n/>\n```\n- `selection={{ranges: array<{anchor, head}>, focus?: boolean}` - *[setSelections](https://codemirror.net/doc/manual.html#setSelections)*\n> will programmatically select the ranges specified\n```jsx\n<CodeMirror\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) => {}}\n/>\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`&nbsp;`UnControlled` | component configuration has been set                                                                        |\n| **editorDidDetach(editor)**                                      | `UnControlled`                   | component is now **ignoring** new props                                                                     |\n| **editorDidMount(editor,&nbsp;_[next]_)**                        | `Controlled`&nbsp;`UnControlled` | * invoking optional `next` will trigger `editorDidConfigure`                                                |\n| **editorWillUnmount(editor)**                                    | `Controlled`&nbsp;`UnControlled` | invoked before [`componentWillUnmount`](https://reactjs.org/docs/react-component.html#componentwillunmount) |\n| **onBeforeChange(editor,&nbsp;data,&nbsp;value,&nbsp;_[next]_)** | `Controlled`&nbsp;`UnControlled` | * if used, `next` is returned via `UnControlled` and *must* be invoked to trigger onChange                  |\n| **onChange(editor,&nbsp;data,&nbsp;value)**                      | `Controlled`&nbsp;`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 `navigator`. 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  <CodeMirror editorDidMount={editor => { this.instance = editor }}/>\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 `<Resizable/>'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","readmeFilename":"README.md"}