Thanks to @NathanaelA pledge on Patreon we just received a wonderful addition:
:sparkles: Monaco support (the editor that powers VS Code) :sparkles:
Live Demo: https://yjs-demos.now.sh/monaco/
Demo Code: https://github.com/y-js/yjs-demos/tree/master/monaco
Binding repository: https://github.com/y-js/y-monaco
@calibr Yes, I broke encoding. These are my final fixes to create a stable API to Yjs https://github.com/y-js/yjs/blob/master/README.v13.md#Document-Updates
Thanks for your feedback @canadaduane :)
You can absolutely do that in both v13 and v12. Shared types are just data types and of course you can nest them. But it may take some time to get used to the concept of shared data types. You should just start and observe the changes as you are doing them. Here is a template to create a file system using Y.Map as the directory and Y.Text as files. This will work in Yjs version 13 (in beta):
const yMap = doc.getMap('my-directory')
const file = new Y.Text()
yMap.set('index.js', file)
new TextareaBinding(file, document.querySelector('textarea'))yMap.set('index.js', file)
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
