{"_id":"@ashlkv/y-prosemirror","name":"@ashlkv/y-prosemirror","dist-tags":{"latest":"1.2.4"},"versions":{"1.2.4":{"name":"@ashlkv/y-prosemirror","version":"1.2.4","description":"Prosemirror bindings for Yjs","main":"./dist/y-prosemirror.cjs","module":"./src/y-prosemirror.js","type":"module","types":"./dist/src/y-prosemirror.d.ts","sideEffects":false,"funding":{"type":"GitHub Sponsors ❤","url":"https://github.com/sponsors/dmonad"},"scripts":{"dist":"rm -rf dist && rollup -c && tsc","publish:npm":"npm publish ./ --access public","test":"npm run lint && rollup -c && node dist/test.cjs","lint":"standard && tsc","watch":"rollup -wc","debug":"concurrently 'http-server -o test.html' 'npm run watch'","preversion":"npm run lint && npm run dist && npm run test","start":"concurrently 'http-server -o demo/prosemirror.html' 'npm run watch'"},"exports":{".":{"types":"./dist/src/y-prosemirror.d.ts","import":"./src/y-prosemirror.js","require":"./dist/y-prosemirror.cjs"}},"repository":{"type":"git","url":"git+https://github.com/yjs/y-prosemirror.git"},"keywords":["Yjs"],"author":{"name":"Kevin Jahns","email":"kevin.jahns@protonmail.com"},"license":"MIT","standard":{"ignore":["/dist","/node_modules","/docs"]},"bugs":{"url":"https://github.com/yjs/y-prosemirror/issues"},"homepage":"https://github.com/yjs/y-prosemirror#readme","dependencies":{"lib0":"^0.2.42"},"peerDependencies":{"prosemirror-model":"^1.7.1","prosemirror-state":"^1.2.3","prosemirror-view":"^1.9.10","y-protocols":"^1.0.1","yjs":"^13.5.38"},"devDependencies":{"@rollup/plugin-commonjs":"^21.0.1","@rollup/plugin-node-resolve":"^13.0.6","concurrently":"^4.1.0","http-server":"^0.12.3","jsdom":"^15.1.1","prosemirror-example-setup":"^1.2.1","prosemirror-model":"^1.18.1","prosemirror-schema-basic":"^1.2.0","prosemirror-state":"^1.4.1","prosemirror-transform":"^1.6.0","prosemirror-view":"^1.26.2","rollup":"^2.59.0","standard":"^17.0.0","typescript":"^4.8.4","y-protocols":"^1.0.5","y-webrtc":"^10.2.0","yjs":"^13.5.38"},"engines":{"npm":">=8.0.0","node":">=16.0.0"},"_id":"@ashlkv/y-prosemirror@1.2.4","gitHead":"1ae488528242390978add6eddeda61697f79509a","_nodeVersion":"16.14.1","_npmVersion":"9.8.0","dist":{"integrity":"sha512-H4X7g1ARQCZKMZ0VorV73LM+2KCYV8JtivRhioT8665YBs39Js2jlwXLP4PIsjcPXcAsEUo0KRhdkb9gwnh+hA==","shasum":"0df60a9605335ce33472a5c704264ca3f3e28c9b","tarball":"https://registry.npmjs.org/@ashlkv/y-prosemirror/-/y-prosemirror-1.2.4.tgz","fileCount":17,"unpackedSize":256669,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDatLgwj7WQuKsJjqM1zMq+8AN6f4CqvaeEowOmrdJfBQIhAMX3+6X8Ull/HeBbkJj7j/bIWua/OIFzS3+vaEWyoNL2"}]},"_npmUser":{"name":"ashlkv","email":"anna.shishlyakova@gmail.com"},"directories":{},"maintainers":[{"name":"ashlkv","email":"anna.shishlyakova@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/y-prosemirror_1.2.4_1711797606504_0.048949438871649154"},"_hasShrinkwrap":false}},"time":{"created":"2024-03-30T11:20:06.441Z","1.2.4":"2024-03-30T11:20:06.771Z","modified":"2024-03-30T11:20:07.017Z"},"maintainers":[{"name":"ashlkv","email":"anna.shishlyakova@gmail.com"}],"description":"Prosemirror bindings for Yjs","homepage":"https://github.com/yjs/y-prosemirror#readme","keywords":["Yjs"],"repository":{"type":"git","url":"git+https://github.com/yjs/y-prosemirror.git"},"author":{"name":"Kevin Jahns","email":"kevin.jahns@protonmail.com"},"bugs":{"url":"https://github.com/yjs/y-prosemirror/issues"},"license":"MIT","readme":"# y-prosemirror [![Build Status](https://travis-ci.com/yjs/y-prosemirror.svg?branch=master)](https://travis-ci.com/yjs/y-prosemirror)\n\n> [ProseMirror](http://prosemirror.net/) Binding for [Yjs](https://github.com/yjs/yjs) - [Demo](https://demos.yjs.dev/prosemirror/prosemirror.html)\n\nThis binding maps a Y.XmlFragment to the ProseMirror state.\n\n## Features\n\n* Sync ProseMirror state\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### Example\n\n```js\nimport { ySyncPlugin, yCursorPlugin, yUndoPlugin, undo, redo } from 'y-prosemirror'\nimport { exampleSetup } from 'prosemirror-example-setup'\nimport { keymap } from 'prosemirror-keymap'\n..\n\nconst type = ydocument.get('prosemirror', Y.XmlFragment)\n\nconst prosemirrorView = new EditorView(document.querySelector('#editor'), {\n  state: EditorState.create({\n    schema,\n    plugins: [\n        ySyncPlugin(type),\n        yCursorPlugin(provider.awareness),\n        yUndoPlugin(),\n        keymap({\n          'Mod-z': undo,\n          'Mod-y': redo,\n          'Mod-Shift-z': redo\n        })\n      ].concat(exampleSetup({ schema }))\n  })\n})\n```\n\nAlso look [here](https://github.com/yjs/yjs-demos/tree/master/prosemirror) for a working example.\n\n#### Remote Cursors\n\nThe shared cursors depend on the Awareness instance that is exported by most providers. The [Awareness protocol](https://github.com/yjs/y-protocols#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/* this is a rough fix for the first cursor position when the first paragraph is empty */\n.ProseMirror > .ProseMirror-yjs-cursor:first-child {\n  margin-top: 16px;\n}\n.ProseMirror p:first-child, .ProseMirror h1:first-child, .ProseMirror h2:first-child, .ProseMirror h3:first-child, .ProseMirror h4:first-child, .ProseMirror h5:first-child, .ProseMirror h6:first-child {\n  margin-top: 16px\n}\n/* This gives the remote user caret. The colors are automatically overwritten*/\n.ProseMirror-yjs-cursor {\n  position: relative;\n  margin-left: -1px;\n  margin-right: -1px;\n  border-left: 1px solid black;\n  border-right: 1px solid black;\n  border-color: orange;\n  word-break: normal;\n  pointer-events: none;\n}\n/* This renders the username above the caret */\n.ProseMirror-yjs-cursor > div {\n  position: absolute;\n  top: -1.05em;\n  left: -1px;\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  white-space: nowrap;\n}\n```\n\nYou can also overwrite the default Widget dom by specifying a cursor builder in the yCursorPlugin\n\n```js\n/**\n * This function receives the remote users \"user\" awareness state.\n */\nexport const myCursorBuilder = user => {\n  const cursor = document.createElement('span')\n  cursor.classList.add('ProseMirror-yjs-cursor')\n  cursor.setAttribute('style', `border-color: ${user.color}`)\n  const userDiv = document.createElement('div')\n  userDiv.setAttribute('style', `background-color: ${user.color}`)\n  userDiv.insertBefore(document.createTextNode(user.name), null)\n  cursor.insertBefore(userDiv, null)\n  return cursor\n}\n\nconst prosemirrorView = new EditorView(document.querySelector('#editor'), {\n  state: EditorState.create({\n    schema,\n    plugins: [\n        ySyncPlugin(type),\n        yCursorPlugin(provider.awareness, { cursorBuilder: myCursorBuilder }),\n        yUndoPlugin(),\n        keymap({\n          'Mod-z': undo,\n          'Mod-y': redo,\n          'Mod-Shift-z': redo\n        })\n      ].concat(exampleSetup({ schema }))\n  })\n})\n```\n\n#### Utilities\n\nThe package includes a number of utility methods for converting back and forth between\na Y.Doc and Prosemirror compatible data structures. These can be useful for persisting\nto a datastore or for importing existing documents.\n\n> _Note_: Serializing and deserializing to JSON will not store collaboration history\n> steps and as such should not be used as the primary storage. You will still need\n> to store the Y.Doc binary update format.\n\n```js\nimport { prosemirrorToYDoc } from 'y-prosemirror'\n\n// Pass JSON previously output from Prosemirror\nconst doc = Node.fromJSON(schema, {\n  type: \"doc\",\n  content: [...]\n})\nconst ydoc = prosemirrorToYDoc(doc)\n```\n\nBecause JSON is a common usecase there is an equivalent method that skips the need\nto create a Prosemirror Node.\n\n```js\nimport { prosemirrorJSONToYDoc } from 'y-prosemirror'\n\n// Pass JSON previously output from Prosemirror\nconst ydoc = prosemirrorJSONToYDoc(schema, {\n  type: \"doc\",\n  content: [...]\n})\n```\n\n```js\nimport { yDocToProsemirror } from 'y-prosemirror'\n\n// apply binary updates from elsewhere\nconst ydoc = new Y.Doc()\nydoc.applyUpdate(update)\n\nconst node = yDocToProsemirror(schema, ydoc)\n```\n\nBecause JSON is a common usecase there is an equivalent method that outputs JSON\ndirectly, this method does not require the Prosemirror schema.\n\n```js\nimport { yDocToProsemirrorJSON } from 'y-prosemirror'\n\n// apply binary updates from elsewhere\nconst ydoc = new Y.Doc()\nydoc.applyUpdate(update)\n\nconst node = yDocToProsemirrorJSON(ydoc)\n```\n\n### Undo/Redo\n\nThe package exports `undo` and `redo` commands which can be used in place of\n[prosemirror-history](https://prosemirror.net/docs/ref/#history) by mapping the\nmod-Z/Y keys - see [ProseMirror](https://github.com/yjs/yjs-demos/blob/main/prosemirror/prosemirror.js#L29)\nand [Tiptap](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration/src/collaboration.ts)\nexamples.\n\nUndo and redo are be scoped to the local client, so one peer won't undo another's\nchanges. See [Y.UndoManager](https://docs.yjs.dev/api/undo-manager) for more details.\n\nJust like prosemirror-history, you can set a transaction's `addToHistory` meta property\nto false to prevent that transaction from being rolled back by undo. This can be helpful for programmatic\ndocument changes that aren't initiated by the user.\n\n```js\ntr.setMeta(\"addToHistory\", false);\n```\n\n### License\n\n[The MIT License](./LICENSE) © Kevin Jahns\n","readmeFilename":"README.md"}