{"id":20564610,"url":"https://github.com/yjs/y-codemirror","last_synced_at":"2025-04-04T12:08:40.683Z","repository":{"id":46082081,"uuid":"169238315","full_name":"yjs/y-codemirror","owner":"yjs","description":"Yjs CodeMirror Binding","archived":false,"fork":false,"pushed_at":"2022-11-08T14:53:25.000Z","size":328,"stargazers_count":84,"open_issues_count":6,"forks_count":18,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-04-14T09:06:58.237Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/yjs.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}},"created_at":"2019-02-05T12:34:42.000Z","updated_at":"2024-04-14T08:01:10.000Z","dependencies_parsed_at":"2023-01-21T16:02:39.718Z","dependency_job_id":null,"html_url":"https://github.com/yjs/y-codemirror","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yjs%2Fy-codemirror","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yjs%2Fy-codemirror/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yjs%2Fy-codemirror/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yjs%2Fy-codemirror/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yjs","download_url":"https://codeload.github.com/yjs/y-codemirror/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247174423,"owners_count":20896078,"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":[],"created_at":"2024-11-16T04:28:07.777Z","updated_at":"2025-04-04T12:08:40.653Z","avatar_url":"https://github.com/yjs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# y-codemirror\n\n\u003e [CodeMirror](https://codemirror.net/5/) Binding for [Yjs](https://github.com/yjs/yjs) - [Demo](https://demos.yjs.dev/codemirror/codemirror.html)\n\nThis binding binds a [Y.Text](https://github.com/yjs/yjs#Shared-Types) to a CodeMirror editor.\n\n\u003e For [CodeMirror 6](https://codemirror.net)+, go to [yjs/y-codemirror.next](https://github.com/yjs/y-codemirror.next)\n\n## Features\n\n* Sync CodeMirror editor\n* Shared Cursors\n* Shared Undo / Redo (each client has its own undo-/redo-history)\n* Successfully recovers when concurrents edit result in an invalid document schema\n\n![CodeMirror Yjs Demo](https://user-images.githubusercontent.com/5553757/79250004-5ed1ac80-7e7e-11ea-81b8-9f833e2d8e66.gif)\n\n### Example\n\n```js\nimport * as Y from 'yjs'\nimport { CodemirrorBinding } from 'y-codemirror'\nimport { WebrtcProvider } from 'y-webrtc'\nimport CodeMirror from 'codemirror'\n\nconst ydoc = new Y.Doc()\nconst provider = new WebrtcProvider('codemirror-demo-room', ydoc)\nconst yText = ydoc.getText('codemirror')\nconst yUndoManager = new Y.UndoManager(yText)\n\nconst editor = CodeMirror(editorDiv, {\n  mode: 'javascript',\n  lineNumbers: true\n})\n\nconst binding = new CodemirrorBinding(yText, editor, provider.awareness, { yUndoManager })\n```\n\nAlso look [here](https://github.com/yjs/yjs-demos/tree/master/codemirror) for a working example.\n\n## API\n\n```js\nconst binding = new CodemirrorBinding(yText: Y.Text, editor: CodeMirror.Editor, [ awareness: y-protocols.Awareness|null, [ { yUndoManager: Y.UndoManager } ]])\n```\n\nBinds a Y.Text type to the CodeMirror document that is currently in use. You can \u003ccode\u003eswapDoc\u003c/code\u003e the CodeMirror document while a binding is active. Make sure to destroy a binding when it is no longer needed.\n\nWhen `Y.UndoManager` is defined, y-codemirror will use a custom collaborative undo manager instead of CodeMirror's UndoManager. The collaboration-aware Y.UndoManager tracks only local changes by default and doesn't track changes from remote users. You should undo/redo changes using `yUndoManager.undo()` / `yUndoManager.redo()` instead of using CodeMirror's history manager. See the extensive documentation on [`Y.UndoManager`](https://docs.yjs.dev/api/undo-manager) for documentation on how to filter specific changes.\n\n\u003cdl\u003e\n  \u003cb\u003e\u003ccode\u003edestroy()\u003c/code\u003e\u003c/b\u003e\n  \u003cdd\u003e\nDestroy the CodemirrorBinding, remove all event listeners from the editor and the Yjs document, and destroy the UndoManager.\n  \u003c/dd\u003e\n  \u003cb\u003e\u003ccode\u003ecm: CodeMirror.Editor\u003c/code\u003e\u003c/b\u003e\n  \u003cdd\u003e\nReference to the CodeMirror editor.\n  \u003c/dd\u003e\n  \u003cb\u003e\u003ccode\u003ecmDoc: CodeMirror.Doc\u003c/code\u003e\u003c/b\u003e\n  \u003cdd\u003e\nReference to the CodeMirror document.\n  \u003c/dd\u003e\n  \u003cb\u003e\u003ccode\u003etype: Y.Text\u003c/code\u003e\u003c/b\u003e\n  \u003cdd\u003e\nReference to the Y.Text type that this binding binds to.\n  \u003c/dd\u003e\n  \u003cb\u003e\u003ccode\u003edoc: Y.Doc\u003c/code\u003e\u003c/b\u003e\n  \u003cdd\u003e\nReference to the Yjs document.\n  \u003c/dd\u003e\n  \u003cb\u003e\u003ccode\u003eawareness: y-protocols.Awareness\u003c/code\u003e\u003c/b\u003e\n  \u003cdd\u003e\nReference to the Awareness instance, if defined.\n  \u003c/dd\u003e\n  \u003cb\u003e\u003ccode\u003eon('cursorActivity', (editor: CodeMirror) =\u003e void)\u003c/code\u003e\u003c/b\u003e\n  \u003cdd\u003e\nThis event is similar to CodeMirror's 'cursorActivity' event, but is fired\nafter all changes have been applied to the editor and to the Y.Text instance.\n  \u003c/dd\u003e\n\u003c/dl\u003e\n\nThe shared cursors depend on the Awareness instance that is exported by most providers. The Awareness protocol handles non-permanent data like the number of users, their user names, their cursor location, and their colors. You can change the name and color of the user like this:\n\n```js\nexample.binding.awareness.setLocalStateField('user', { color: '#008833', name: 'My real name' })\n```\n\nIn order to render cursor information you need to embed custom CSS for the user icon. This is a template that you can use for styling cursor information.\n\n```css\n.remote-caret {\n  position: absolute;\n  border-left: black;\n  border-left-style: solid;\n  border-left-width: 2px;\n  height: 1em;\n}\n.remote-caret \u003e div {\n  position: relative;\n  top: -1.05em;\n  font-size: 13px;\n  background-color: rgb(250, 129, 0);\n  font-family: serif;\n  font-style: normal;\n  font-weight: normal;\n  line-height: normal;\n  user-select: none;\n  color: white;\n  padding-left: 2px;\n  padding-right: 2px;\n  z-index: 3;\n}\n```\n\n## License\n\n[The MIT License](./LICENSE) © Kevin Jahns\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyjs%2Fy-codemirror","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyjs%2Fy-codemirror","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyjs%2Fy-codemirror/lists"}