I took a month vacation from my daytime job to work on the v13 release. v13 will be released very soon. I'll be hacking and documenting Yjs for the whole month of June. You can contribute by working with me on the website, documentation, testing, additional demos, or Yjs integrations (e.g. to other editors / frameworks). In exchange I'll be available for daily group meetings and answer any questions you have. The background is that I want more people involved in the project. Ping me directly if you are interested.
import React, {Component} from 'react';
import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'
const doc = Y.Doc()
const provider = new WebsocketProvider('http://localhost:1234', 'roomname')
provider.sync('doc')
const ytext = doc.getText('my resume')
class App extends Component {
render() {
return (<div>test</div>);
}
}
export default App;Thanks @crazypenguinguy I made some mistakes i the documentation. For example the url must be a ws:// or wss:// url. I corrected it. Let me know if something else is unclear.
Here is the fixed code for your demo:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import * as Y from "yjs";
import { WebsocketProvider } from "y-websocket";
const doc = new Y.Doc();
//const doc = new Y.Doc()
const provider = new WebsocketProvider("ws://localhost:1234", "roomname", doc);
const ytext = doc.getText("my resume");
class App extends Component {
render() {
return <div>test</div>;
}
}
export default App;
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Good questions.
Comparing Yjs and Automerge:
• Both projects provide easy access to manipulating the shared data. Automerge's design philosophy is that state is immutable. In Yjs, state is mutable and observable.
• Automerge has more demo apps where state is shared to build some kind of application. But in theory, you could implement shared text editing with Automerge.
• Yjs is more focused on shared editing (on text, rich text, and structured content). It has lots of demos for different editors (quill, ProseMirror, Ace, CodeMirror, Monaco, ..).
• I spent a lot of time to optimize Yjs to work on large documents. While Automerge works fine on small documents, it has serious performance problems as the document grows in size. https://github.com/dmonad/crdt-benchmarks
• Yes, Automerge has support for hypermerge/DAT. I am also looking into it, as it seems like a really cool idea. I'm currently exploring multifeed[https://github.com/kappa-db/multifeed) for that. On the other hand Yjs has support for IPFS.
Yjs & Electron:
No problem here in general. You'll need to polyfill WebSocket / WebRTC support in electron. There is ws for WebSocket support and node-webrtc for WebRTC.
Query Index:
There is nothing like that to my knowledge. But maybe you could have a look at GUN
need some engine that will store that index. For example, in our project to provide full-text search feature, we extract all the texts from a document once it gets updated and put them into the full-text engine.
@calibr I have no experience with document indexing. Thanks for sharing your experience.
@canadaduane Thanks for your appreciation :) I was referring to the frontend of the shared editing framework. Yjs exposes mutable types (e.g. Y.Array). Automerge exposes immutable json-like objects.
In Yjs, the operation log is not immutable. I.e. it may decrease in size when you delete content. I describe some optimizations I do in the v13 log, but let me know if you want to know more.
About P2P electron apps: DAT is a very ambitious project that wants to share many, large files in a distributed network. Compared to WebRTC, UDP connections are initialized much faster and are better suited for their use-case (e.g. walking through peers of the DHT). However, If you only want to share a single document, WebRTC will work just fine and are also supported in the browser.
@/all
The Quill Editor binding was just added for v13 including shared cursors and many additional consistency tests.
Demo: https://yjs-demos.now.sh/quill/
y-quill: http://github.com/y-js/y-quill
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