{"id":13808448,"url":"https://github.com/scttcper/ngx-codemirror","last_synced_at":"2025-10-24T07:30:23.242Z","repository":{"id":41099457,"uuid":"118732469","full_name":"scttcper/ngx-codemirror","owner":"scttcper","description":"Codemirror Wrapper for Angular","archived":false,"fork":false,"pushed_at":"2023-05-15T04:07:52.000Z","size":3452,"stargazers_count":282,"open_issues_count":12,"forks_count":47,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-02-02T08:08:58.515Z","etag":null,"topics":["angular","codemirror"],"latest_commit_sha":null,"homepage":"https://ngx-codemirror.vercel.app","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/scttcper.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2018-01-24T07:58:21.000Z","updated_at":"2025-01-14T22:49:09.000Z","dependencies_parsed_at":"2023-07-12T13:54:59.736Z","dependency_job_id":null,"html_url":"https://github.com/scttcper/ngx-codemirror","commit_stats":{"total_commits":305,"total_committers":17,"mean_commits":"17.941176470588236","dds":0.478688524590164,"last_synced_commit":"1c7d51d0945f9313d8aebc0888cf4a8e6a42bbf7"},"previous_names":["typectrl/ngx-codemirror"],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scttcper%2Fngx-codemirror","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scttcper%2Fngx-codemirror/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scttcper%2Fngx-codemirror/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scttcper%2Fngx-codemirror/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scttcper","download_url":"https://codeload.github.com/scttcper/ngx-codemirror/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237926593,"owners_count":19388583,"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":["angular","codemirror"],"created_at":"2024-08-04T01:01:43.125Z","updated_at":"2025-10-24T07:30:23.237Z","avatar_url":"https://github.com/scttcper.png","language":"TypeScript","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"# DEPRECATED Use https://github.com/acrodata/code-editor\n\n# ngx-codemirror [![npm](https://badgen.net/npm/v/@ctrl/ngx-codemirror)](https://www.npmjs.com/package/@ctrl/ngx-codemirror) [![coverage](https://badgen.net/codecov/c/github/scttcper/ngx-codemirror)](https://codecov.io/gh/scttcper/ngx-codemirror)\n\nDEMO: https://ngx-codemirror.vercel.app\n\n## Dependencies\n\nLatest version available for each version of Angular\n\n| @ctrl/ngx-codemirror | Angular   | Codemirror |\n| -------------------- | --------- | ---------- |\n| 1.3.10               | 6.x 7.x   | 5          |\n| 2.2.1                | 8.x       | 5          |\n| 3.1.3                | 9.x       | 5          |\n| 4.1.1                | 10.x 11.x | 5          |\n| 5.1.1                | 12.x-14x  | 5          |\n| 6.1.0                | 15.x      | 5          |\n| current              | \u003e= 16.x   | 5          |\n\nAn Angular component wrapper for [CodeMirror](https://codemirror.net/) that extends ngModel. Based on [JedWatson/react-codemirror](https://github.com/JedWatson/react-codemirror)\n\n##### Used in:\n\ntsquery playground: https://tsquery-playground.firebaseapp.com/\n\n## Install\n\n`codemirror` is a peer dependency and must also be installed\n\n```sh\nnpm install @ctrl/ngx-codemirror codemirror@5\n```\n\n## Use\n\nImport `CodemirrorModule` and `FormsModule` and bring in the [codemirror files for parsing the language](https://codemirror.net/mode/index.html) you wish to use.\n\nIn your `NgModule`:\n\n```ts\nimport { FormsModule } from '@angular/forms';\nimport { NgModule } from '@angular/core';\nimport { CodemirrorModule } from '@ctrl/ngx-codemirror';\n\n  // add to imports:\n  imports: [\n    BrowserModule,\n    FormsModule,\n    CodemirrorModule,\n    ...\n  ]\n```\n\nIn your `main.ts` or at the root of your application, see [documentation](https://codemirror.net/mode/index.html):\n\n```ts\nimport 'codemirror/mode/javascript/javascript';\nimport 'codemirror/mode/markdown/markdown';\n```\n\nImport the base css file and your [theme](https://codemirror.net/demo/theme.html)\n\n```css\n@import '~codemirror/lib/codemirror';\n@import '~codemirror/theme/material';\n```\n\nUse The Component\n\n```html\n\u003cngx-codemirror\n  [(ngModel)]=\"content\"\n  [options]=\"{\n    lineNumbers: true,\n    theme: 'material',\n    mode: 'markdown'\n  }\"\n\u003e\u003c/ngx-codemirror\u003e\n```\n\n## Inputs\n\nAll Inputs of [ngModel](https://angular.io/api/forms/NgModel#inputs) and\n\n- `options` - options passed to the CodeMirror instance see http://codemirror.net/doc/manual.html#config\n- `name` - name applied to the created textarea\n- `autoFocus` - setting applied to the created textarea\n- `preserveScrollPosition` - preserve previous scroll position after updating value\n\n## Outputs\n\nAll outputs of [ngModel](https://angular.io/api/forms/NgModel#outputs) and\n\n- `codeMirrorLoaded` - called when codeMirror instance is initiated\n- `focusChange` - called when the editor is focused or loses focus\n- `scroll` - called when the editor is scrolled (not wrapped inside angular change detection must manually trigger change detection or run inside ngzone)\n- `cursorActivity` - called when the text cursor is moved\n- `drop` - called when file(s) are dropped\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscttcper%2Fngx-codemirror","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscttcper%2Fngx-codemirror","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscttcper%2Fngx-codemirror/lists"}