I encourage you to use v13 (although it is still in beta). I need to work on the documentation - but the API documented in README.v13.md is stable and working.
In the tutorial section I wanted to give an example of how to use Yjs. The y-textarea binding does not exist yet - currently we only have Monaco, QuillJS, and ProseMirror support. Next week I will add the missing bindings (the ones I already advertise in the README. I just haven't ported them to the new API).
I also added an undo plugin to y-prosemirror. https://github.com/y-js/yjs-demos/blob/master/prosemirror/index.js
For the quill demo, you can actually just use their history plugin. For Quill, it really doesn't make a difference if you use Quills undo manager or Yjs undo manager. To enable selective undo in Quill, you basically just have to configure the undo plugin with
userOnly: true (see https://github.com/y-js/yjs-demos/blob/master/quill/index.js).
username$ npm i y-websocket
npm WARN y-websockets-client@8.0.16 requires a peer of yjs@^11.0.0 || ^12.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN client@1.0.0 No description
npm WARN client@1.0.0 No repository field.
npm ERR! path /Users/username/Desktop/Projects/YJS/react-yjs-test/node_modules/y-websocket/bin/server.js
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall chmod
npm ERR! enoent ENOENT: no such file or directory, chmod '/Users/username/Desktop/Projects/YJS/react-yjs-test/node_modules/y-websocket/bin/server.js'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
Abstract
Braid is a proposal for a new version of HTTP that transforms it from
a state *transfer* protocol into a state *synchronization* protocol.
Braid puts the power of Operational Transform and CRDTs onto the web,
improving network performance and robustness, and enabling
peer-to-peer web applications.
At the same time, Braid creates an open standard for the dynamic
internal state of websites. Programmers can access state uniformly,
whether local or on another website. This creates a separation of UI
from State, and allows any user to edit or choose their own UI for any
website's state.
@rafeautie If you get issues like this I propose that you have a look at the versions I use in the demos. https://github.com/y-js/yjs-demos Documentation PRs are very welcome.
@kevmegforest_gitlab Yes, the encodeStateAsUpdate is final. Everything in the v13 docs can be seen as final unless there is a good reason to change it before the stable release.
@crazypenguinguy If you look at the y-websocket server implementation you can see that there are comments on where to put the authentication. The yjs-demos repository also gives an example on how you could implement your own server with dedicated authentication. The idea here would be to use cookies. But you could also adapt the implementation to use something else.
@jylopez The awareness instance gives you the number of clients. Users can even propagate state (like user name, email, user-color, etc). The awareneness feature is supported by y-websocket and will be ported to the other connectors as well (v13 only). Documentation https://github.com/y-js/y-protocols
@canadaduane I think they are proposing a different algorithm. IMO this should be not part of the HTTP specification, rather it should be implemented over websockets.
Many of the other questions have been asked in the GitHub issue tracker already.
type and value properties that would indicate whether it was an insert and what was inserted
getInsertedItems and getDeletedItems.
Really cool @WinstonFassett ! I love to see demos here. If you want you can also contribute the demo to yjs-demos repository
The next release (>=v13.0.0-97) attaches a change object to the event that describes what happened during the transaction. I.e.
array.observe(event => {
event.change.delta // similar to the quill delta format but works on all array-like types
// e.g. [{retain: 4}, {delete: 3}, {insert: [1,2,3]}]
event.change.added // Set of added items
event.change.deleted // Set of deleted items
})
map.observe(event => {
event.change.keys // Maps from changed key to { action: 'update'|'delete'|'add', oldValue: any }
})Please note that the API for event changes is not final, hence also not yet in the documentation. But I'd appreciate your feedback
github.com/yjs organization. Please let me know if this brakes anything.
Important: I'm going to move all repositories to the github.com/yjs organization. Please let me know if this breakes anything.
Now that we have a new organization-name, I also decided to move this chat-room to https://gitter.im/Yjs/community
This chat-room moved to https://gitter.im/Yjs/community
Please don't post anything here anymore.
for (const d of event.delta) {
if (d.retain) {
index += d.retain;
} else if (d.insert) {
const start = aceDocument.indexToPosition(index, 0);
aceDocument.insert(start, d.insert);
} else if (d.delete) {
const start = aceDocument.indexToPosition(index, 0);
const end = aceDocument.indexToPosition(index + d.delete, 0);
const range = new Range(start.row, start.column, end.row, end.column);
aceDocument.remove(range);
}
}
const Y = require('yjs')
const { WebsocketProvider } = require('y-websocket')
console.info(Y)
const ydoc = new Y.Doc()
console.info(Y.Doc)
const provider = new WebsocketProvider('wss://demos.yjs.dev', 'prosemirror-demo', ydoc)
