13.0.0-77

updating YArray's iterator to iterate Types correctly

.babelrc

@@ -1,12 +0,0 @@
-{
-  "presets": [
-    ["latest", {
-      "es2015": {
-        "modules": false
-      }
-    }]
-  ],
-  "plugins": [
-    "external-helpers"
-  ]
-}

.esdoc.json

@@ -0,0 +1,11 @@
+{
+  "source": ".",
+  "destination": "./docs",
+  "excludes": ["build", "node_modules", "tests-lib", "test"],
+  "plugins": [{
+    "name": "esdoc-standard-plugin",
+    "option": {
+      "accessor": {"access": ["public"], "autoPrivate": true}
+    }
+  }]
+}

.flowconfig

@@ -1,12 +0,0 @@
-[ignore]
-.*/node_modules/.*
-.*/dist/.*
-.*/build/.*
-
-[include]
-./src/
-
-[libs]
-./declarations/
-
-[options]

.gitignore

@@ -1,4 +1,8 @@
 node_modules
 bower_components
+docs
 /y.*
-/examples/yjs-dist.js*
+/examples_all/*/index.dist.*
+.vscode
+.yjsPersisted
+build

.jsdoc.json

@@ -0,0 +1,50 @@
+{
+  "sourceType": "module",
+  "tags": {
+    "allowUnknownTags": true,
+    "dictionaries": ["jsdoc"]
+  },
+  "source": {
+    "include": ["./structs/Type.js", "./types", "./utils/UndoManager.js", "./utils/YEvent.js", "./utils/Y.js", "./provider", "./bindings"],
+    "includePattern": ".js$"
+  },
+  "plugins": [
+    "plugins/markdown"
+  ],
+  "templates": {
+    "referenceTitle": "Yjs",
+    "disableSort": false,
+    "useCollapsibles": true,
+    "collapse": true,
+    "resources": {
+      "y-js.org": "yjs.website"
+    },
+    "logo": {
+      "url": "https://user-images.githubusercontent.com/5553757/48975307-61efb100-f06d-11e8-9177-ee895e5916e5.png",
+      "width": "162px",
+      "height": "162px",
+      "link": "/"
+    },
+    "tabNames": {
+      "api": "API",
+      "tutorials": "Examples"
+    },
+    "footerText": "Shared Editing",
+    "css": [
+      "./style.css"
+    ],
+    "default": {
+      "staticFiles": {
+          "include": ["examples/"]
+      }
+    }
+  },
+  "opts": {
+    "destination": "./docs/",
+    "encoding": "utf8",
+    "private": false,
+    "recurse": true,
+    "template": "./node_modules/tui-jsdoc-template",
+    "tutorials": "./examples"
+  }
+}

README.md

@@ -1,5 +1,5 @@
 
-# ![Yjs](http://y-js.org/images/yjs.png)
+# ![Yjs](https://user-images.githubusercontent.com/5553757/48975307-61efb100-f06d-11e8-9177-ee895e5916e5.png)
 
 Yjs is a framework for offline-first p2p shared editing on structured data like
 text, richtext, json, or XML. It is fairly easy to get started, as Yjs hides
@@ -64,6 +64,18 @@ missing modules.
 <script src="./bower_components/yjs/y.js"></script>
 ```
 
+### CDN
+```
+<script src="https://cdn.jsdelivr.net/npm/yjs@12/dist/y.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/y-array@10/dist/y-array.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/y-websockets-client@8/dist/y-websockets-client.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/y-memory@8/dist/y-memory.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/y-map@10/dist/y-map.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/y-text@9/dist/y-text.js"></script>
+// ..
+// do the same for all modules you want to use
+```
+
 ### Npm
 ```
 npm install --save yjs % add all y-* modules you want to use
@@ -76,7 +88,6 @@ var Y = require('yjs')
 require('y-array')(Y) // add the y-array type to Yjs
 require('y-websockets-client')(Y)
 require('y-memory')(Y)
-require('y-array')(Y)
 require('y-map')(Y)
 require('y-text')(Y)
 // ..
@@ -89,7 +100,6 @@ import Y from 'yjs'
 import yArray from 'y-array'
 import yWebsocketsClient from 'y-webrtc'
 import yMemory from 'y-memory'
-import yArray from 'y-array'
 import yMap from 'y-map'
 import yText from 'y-text'
 // ..
@@ -238,7 +248,7 @@ The promise returns an instance of Y. We denote it with a lower case `y`.
   * y-websockets-client aways waits to sync with the server
 * y.connector.disconnect()
   * Force to disconnect this instance from the other instances
-* y.connector.reconnect()
+* y.connector.connect()
   * Try to reconnect to the other instances (needs to be supported by the
     connector)
   * Not supported by y-xmpp

README.v13.md

@@ -0,0 +1,367 @@
+# ![Yjs](https://user-images.githubusercontent.com/5553757/48975307-61efb100-f06d-11e8-9177-ee895e5916e5.png)
+> A CRDT library with a powerful abstraction of shared data
+
+Yjs is a CRDT implementatation that exposes its internal structure as actual data types that can be manipulated and fire changes when remote or local changes happen. While Yjs can be used for all kinds of state management, we lay a special focus on shared editing.
+
+* Chat: [https://gitter.im/y-js/yjs](https://gitter.im/y-js/yjs)
+* Demos: [https://yjs.website/tutorial-prosemirror.html](https://yjs.website/tutorial-prosemirror.html)
+* API Docs: [https://yjs.website/](https://yjs.website/)
+
+### Supported Editors:
+
+| Name                                                   | Cursors |  Demo |
+|---|:-:|---|
+| [ProseMirror](https://prosemirror.net/) | ✔ | [link](https://yjs.website/tutorial-prosemirror.html) |
+| [Quill](https://quilljs.com/) |  | [link](https://yjs.website/tutorial-quill.html) |
+| [CodeMirror](https://codemirror.net/) | ✔ | [link](https://yjs.website/tutorial-codemirror.html) |
+| [Ace](https://ace.c9.io/) | | [link]() |
+| [Monaco](https://microsoft.github.io/monaco-editor/) | | [link]() |
+
+### Distinguishing Features
+
+* **Binary Encoding:**
+* **Undo/Redo:**
+* **Types:**
+* **Offline:** Yjs is designed to support offline editing. Read [this section](#Offline) about the limitations of offline editing in Yjs. The only provider supporting full offline editing is Ydb.
+* **Network-agnostic:** Yjs ships with many providers that handle connection and distribution of updates to other peers. Yjs itself is network-agnostic and does not depend on a central source of truth that distributes updates to other peers. Check [this section](#Create-a-Custom-Provider) to find out how the sync mechanism works and how to implement your custom provider.
+
+# Table of Contents
+
+* [Getting Started](#Getting-Started)
+  * [Tutorial](#Short-Tutorial)
+* [Providers](#Providers)
+  * [Websocket](#Websocket)
+  * [Ydb](#Ydb)
+  * [Create a Custom Provider](#Create-a-Custom-Provider)
+* [Shared Types](#Shared-Types)
+  * [YArray](#Yarray)
+  * [YMap](#YMap)
+  * [YText](#YText)
+  * [YXmlFragment and YXmlElement](#YXmlFragment-and-YXmlElement)
+  * [Create a Custom Type](#Create-a-Custom-Type)
+* [Bindings](#Bindings)
+  * [PromeMirror](#ProseMirror)
+  * [Quill](#Quill)
+  * [CodeMirror](#CodeMirror)
+  * [Ace](#Ace)
+  * [Monaco](#Monace)
+  * [DOM](#DOM)
+  * [Textarea](#Textarea)
+  * [Create a Custom Binding](#Create-a-Custom-Binding)
+* [Transaction](#Transaction)
+* [Offline Editing](#Offline-Editing)
+* [Awareness](#Awareness)
+* [Working with Yjs](#Working-with-Yjs)
+  * [Typescript Declarations](#Typescript-Declarations)
+* [Binary Protocols](#Binary-Protocols)
+  * [Sync Protocol](#Sync-Protocols)
+  * [Awareness Protocol](#Awareness-Protocols)
+  * [Auth Protocol](#Auth-Protocol)
+* [Yjs CRDT Algorithm](#Yjs-CRDT-Algorithm)
+* [Evaluation](#Evaluation)
+  * [Existing shared editing libraries](#Exisisting-Javascript-Products)
+  * [CRDT Algorithms](#CRDT-Algorithms)
+  * [Comparison of CRDT with OT](#Comparing-CRDT-with-OT)
+  * [Comparison of CRDT Algorithms](#Comparing-CRDT-Algorithms)
+  * [Comparison of Yjs with other Implementations](#Comparing-Yjs-with-other-Implementations)
+* [License and Author](#License-and-Author)
+
+## Getting Started
+
+Yjs does not hava any dependencies. Install this package with your favorite package manager, or just copy the files into your project.
+
+```sh
+npm i yjs
+```
+
+##### Tutorial
+
+In this *short* tutorial I will give an overview of the basic concepts in Yjs.
+
+Yjs itself only knows how to do conflict resolution. You need to choose a provider, that handles how document updates are distributed over the network.
+
+We will start by running a websocket server (part of the [websocket provider](#Websocket-Provider)):
+
+```sh
+PORT=1234 node ./node_modules/yjs/provider/websocket/server.js
+```
+
+The following client-side code connects to the websocket server and opens a shared document.
+
+```js
+import * as Y from 'yjs'
+import { WebsocketProvider } from 'yjs/provider/websocket.js'
+
+const provider = new WebsocketProvider('http://localhost:1234')
+const sharedDocument = provider.get('my-favourites')
+```
+
+All content created in a shared document is shared among all peers that request the same document. Now we define types on the shared document:
+
+```js
+sharedDocument.define('movie-ratings', Y.Map)
+sharedDocument.define('favourite-food', Y.Array)
+```
+
+All clients that define `'movie-ratings'` as `Y.Map` on the shared document named `'my-favourites'` have access to the same shared type. Example:
+
+**Client 1:**
+
+```js
+sharedDocument.define('movie-ratings', Y.Map)
+sharedDocument.define('favourite-food', Y.Array)
+
+const movies = sharedDocument.get('movie-ratings')
+const food = sharedDocument.get('fovourite-food')
+
+movies.set('deadpool', 10)
+food.insert(0, ['burger'])
+```
+
+**Client 2:**
+
+```js
+sharedDocument.define('movie-ratings', Y.Map)
+sharedDocument.define('favourite-food', Y.Map) // <- note that this definition differs from client1
+
+const movies = sharedDocument.get('movie-ratings')
+const food = sharedDocument.get('fovourite-food')
+
+movies.set('yt rewind', -10)
+food.set('pancake', 10)
+
+// after some time, when client1 and client2 synced, the movie list will be merged:
+movies.toJSON() // => { 'deadpool': 10, 'yt rewind': -10 }
+
+// But since client1 and client2 defined the types differently,
+// they do not have access to each others food list.
+food.toJSON() // => { pancake: 10 }
+```
+
+Now you understand how types are defined on a shared document. Next you can jump to one of the [tutorials on our website](https://yjs.website/tutorial-prosemirror.html) or continue reading about [Providers](#Providers), [Shared Types](#Shared-Types), and [Bindings](#Bindings).
+
+## Providers
+
+In Yjs, a provider handles the communication channel to *authenticate*, *authorize*, and *exchange document updates*. Yjs ships with some existing providers. 
+
+### Websocket Provider
+
+The websocket provider implements a classical client server model. Clients connect to a single endpoint over websocket. The server distributes awareness information and document updates among clients.
+
+The Websocket Provider is a solid choice if you want a central source that handles authentication and authorization. Websockets also send header information and cookies, so you can use existing authentication mechanisms with this server. I recommend that you slightly adapt the server in `./provider/websocket/server.js` to your needs.
+
+* Supports cross-tab communication. When you open the same document in the same browser, changes on the document are exchanged via cross-tab communication ([Broadcast Channel](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API) and [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) as fallback).
+* Supports exange of awareness information (e.g. cursors)
+
+##### Start a Websocket Server:
+
+```sh
+PORT=1234 node ./node_modules/yjs/provider/websocket/server.js
+```
+
+**Websocket Server with Persistence**
+
+Persist document updates in a LevelDB database.
+
+See [LevelDB Persistence](#LevelDB Persistence) for more info.
+
+```sh
+PORT=1234 YPERSISTENCE=./dbDir node ./node_modules/yjs/provider/websocket/server.js
+```
+
+##### Client Code:
+
+```js
+import * as Y from 'yjs'
+import { WebsocketProvider } from 'yjs/provider/websocket.js'
+
+const provider = new WebsocketProvider('http://localhost:1234')
+
+// open a websocket connection to http://localhost:1234/my-document-name
+const sharedDocument = provider.get('my-document-name')
+
+sharedDocument.on('status', event => {
+  console.log(event.status) // logs "connected" or "disconnected"
+})
+```
+
+#### Scaling
+
+These are mere suggestions how you could scale your server environment.
+
+**Option 1:** Websocket servers communicate with each other via a PubSub server. A room is represented by a PubSub channel. The downside of this approach is that the same shared document may be handled by many servers. But the upside is that this approach is fault tolerant, does not have a single point of failure, and is perfectly fit for route balancing.
+
+**Option 2:** Sharding with *consistent hashing*. Each document is handled by a unique server. This patterns requires an entity, like etcd, that performs regular health checks and manages servers. Based on the list of available servers (which is managed by etcd) a proxy calculates which server is responsible for each requested document. The disadvantage of this approach is that it is that load distribution may not be fair. Still, this approach may be the preferred solution if you want to store the shared document in a database - e.g. for indexing.
+
+### Ydb Provider
+
+TODO
+
+### Create Custom Provider
+
+A provider is only a concept. I encourage you to implement the same provider interface found above. This makes it easy to exchange communication protocols.
+
+Since providers handle the communication channel, they will necessarily interact with the [binary protocols](#Binary-Protocols). I suggest that you build upon the existing protocols. But you may also implement a custom communication protocol.
+
+Read section [Sync Protocol](#Sync-Protocol) to learn how syncing works.
+
+## Shared Types
+
+A shared type is just a normal data type like [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) or [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array). But a shared type may also be modified by a remote client. Conflicts are automatically resolved by the rules described in this section - but please note that this is only a rough overview of how conflict resolution works. Please read the [Yjs CRDT Algorithm](#Yjs-CRDT-Algorithm) section for an in-depth description of the conflict resolution approach.
+
+As explained in [Tutorial](#Tutorial), a shared type is shared among all peers when they are defined with the same name on the same shared document. I.e.
+
+```js
+sharedDocument.define('my-array', Y.Array)
+
+const myArray = sharedDocument.get('my-array')
+```
+
+You may define a shared types several times, as long as you don't change the type definition.
+
+```js
+sharedDocument.define('my-array', Y.Array)
+
+const myArray = sharedDocument.get('my-array')
+
+const alsoMyArray = sharedDocument.define('my-array', Y.Array)
+
+console.log(myArray === alsoMyArray) // => true
+```
+
+All shared types have an `type.observe(event => ..)` method that allows you to observe any changes. You may also observe all changes on a type and any of its children with the `type.observeDeep(events => ..)` method. Here, `events` is the [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) of events that were fired on type, or any of its children.
+
+All Events inherit from [YEvent](https://yjs.website/module-utils.YEvent.html).
+
+### YMap
+> Complete API docs: [https://yjs.website/module-types.ymap](https://yjs.website/module-types.ymap)
+
+The YMap type is very similar to the JavaScript [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map). 
+
+YMap fires [YMapEvents](https://yjs.website/module-types.YMapEvent.html).
+
+```js
+import * as Y from 'yjs'
+
+const ymap = new Y.Map()
+
+ymap.observe(event => {
+  console.log('ymap keys changed:', event.keysChanged, event.remote)
+})
+
+ymap.set('key', 'value') // => ymap keys changed: Set{ 'key' } false
+ymap.delete('key') // => ymap keys changed: Set{ 'key' }
+
+const ymap2 = new YMap()
+ymap2.set(1, 'two')
+
+ymap.set('type', ymap2) // => ymap keys changed: Set{ 'type' }
+```
+
+##### Concurrent YMap changes
+
+* Concurrent edits on different keys do not affect each other. E.g. if client1 does `ymap.set('a', 1)` and client2 does `ymap.set('b', 2)`, both clients will end up with `YMap{ a: 1, b: 2 }`
+* If client1 and client2 `set` the same property at the same time, the edit from the client with the smaller userID will prevail (`sharedDocument.userID`)
+* If client1 sets a property `ymap.set('a', 1)` and client2 deletes a property `ymap.delete('a')`, the set operation always prevails.
+
+### YArray
+> Complete API docs: [https://yjs.website/module-types.yarray](https://yjs.website/module-types.yarray)
+
+YArray fires [YArrayEvents](https://yjs.website/module-types.YMapEvent.html).
+
+
+```js
+import * as Y from 'yjs'
+
+const yarray = new Y.Array()
+
+yarray.observe(event => {
+  console.log('yarray changed:', event.addedElements, event.removedElements, event.remote)
+})
+
+// insert two elements at position 0
+yarray.insert(0, ['a', 1]) // => yarray changed: Set{Item{'a'}, Item{1}}, Set{}, false 
+console.log(yarray.toArray()) // => ['a', 1]
+yarray.delete(1, 1) // yarray changed: Set{}, Set{Item{1}}, false
+
+yarray.insert(1, new Y.Map()) // => yarray changed: Set{YMap{}}, Set{}, false
+
+// The difference between .toArray and .toJSON:
+console.log(yarray.toArray()) // => ['a', YMap{}]
+console.log(yarray.toJSON()) // => ['a', {}]
+```
+
+As you can see from the above example, primitive data is wrapped into an Item. This makes it possible to find the exact location of the change.
+
+##### Concurrent YArray changes
+
+* YArray internally represents the data as a doubly linked list. The Array `['a', YMap{}, 1]` is internally represented as `Item{'a'} <-> YMap{} <-> Item{1}`. Accordingly, the insert operation `yarray.insert(1, ['b'])` is internally transformed to `insert Item{'b'} between Item{'a'} and YMap{}`.
+* When an Item is deleted, it is only marked as deleted. Only its content is garbage collected and freed from memory.
+* Therefore, the remote operation `insert x between a and b` can still be fulfilled when item `a` or item `b` are deleted.
+* In case that two clients insert content between the same items (a concurrent insertion), the order of the insertions is decided based on the `sharedDocument.userID`.
+
+### YText
+> Complete API docs: [https://yjs.website/module-types.ytext](https://yjs.website/module-types.ytext)
+
+A YText is basically a [YArray](#YArray) that is optimized for text content. 
+
+### YXmlFragment and YXmlElement
+> Complete API docs: [https://yjs.website/module-types.yxmlfragment](https://yjs.website/module-types.yxmlfragment) and [https://yjs.website/module-types.yxmlelement](https://yjs.website/module-types.yxmlelement)
+
+### Custom Types
+
+## Bindings
+
+## Transaction
+
+
+
+## Binary Protocols
+
+### Sync Protocol
+
+Sync steps
+
+### Awareness Protocol
+
+### Auth Protocol
+
+## Offline Editing
+
+It is trivial with Yjs to persist the local state to indexeddb, so it is always available when working offline. But there are two non-trivial questions that need to answered when implementing a professional offline editing app:
+
+1. How does a client sync down all rooms that were modified while offline?
+2. How does a client sync up all rooms that were modified while offline?
+
+Assuming 5000 documents are stored on each client for offline usage. How do we sync up/down each of those documents after a client comes online? It would be inefficient to sync each of those rooms separately. The only provider that currently supports syncing many rooms efficiently is Ydb, because its database layer is optimized to sync many rooms with each client.
+
+If you do not care about 1. and 2. you can use `/persistences/indexeddb.js` to mirror the local state to indexeddb.
+
+## Working with Yjs
+
+### Typescript Declarations
+
+Until [this](https://github.com/Microsoft/TypeScript/issues/7546) is fixed, the only way to get type declarations is by adding Yjs to the list of checked files:
+
+```json
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    ..
+  },
+  "include": [
+    "./node_modules/yjs/"
+  ]
+}
+```
+
+## CRDT Algorithm
+
+## License and Author
+
+Yjs and all related projects are [**MIT licensed**](./LICENSE). Some files also contain an additional copyright notice that allows you to copy and modify the code without shipping the copyright notice (e.g. `./provider/websocket/WebsocketProvider.js` and `./provider/websocket/server.js`)
+
+Yjs is based on the research I did as a student at the RWTH i5. I am working on Yjs in my spare time. Please help me by donating or hiring me for consulting, so I can continue to work on this project.
+
+kevin.jahns@protonmail.com

bindings/codemirror.js

@@ -0,0 +1,180 @@
+/**
+ * @module bindings/textarea
+ */
+
+import { createMutex } from '../lib/mutex.js'
+import * as math from '../lib/math.js'
+import * as ypos from '../utils/relativePosition.js'
+
+const typeObserver = (binding, event) => {
+  binding._mux(() => {
+    const cm = binding.target
+    cm.operation(() => {
+      const delta = event.delta
+      let index = 0
+      for (let i = 0; i < event.delta.length; i++) {
+        const d = delta[i]
+        if (d.retain) {
+          index += d.retain
+        } else if (d.insert) {
+          const pos = cm.posFromIndex(index)
+          cm.replaceRange(d.insert, pos, pos, 'prosemirror-binding')
+          index += d.insert.length
+        } else if (d.delete) {
+          const start = cm.posFromIndex(index)
+          const end = cm.posFromIndex(index + d.delete)
+          cm.replaceRange('', start, end, 'prosemirror-binding')
+        }
+      }
+    })
+  })
+}
+
+const targetObserver = (binding, change) => {
+  binding._mux(() => {
+    const start = binding.target.indexFromPos(change.from)
+    const delLen = change.removed.map(s => s.length).reduce(math.add) + change.removed.length - 1
+    if (delLen > 0) {
+      binding.type.delete(start, delLen)
+    }
+    if (change.text.length > 0) {
+      binding.type.insert(start, change.text.join('\n'))
+    }
+  })
+}
+
+const createRemoteCaret = (username, color) => {
+  const caret = document.createElement('span')
+  caret.classList.add('remote-caret')
+  caret.setAttribute('style', `border-color: ${color}`)
+  const userDiv = document.createElement('div')
+  userDiv.setAttribute('style', `background-color: ${color}`)
+  userDiv.insertBefore(document.createTextNode(username), null)
+  caret.insertBefore(userDiv, null)
+  return caret
+}
+
+const updateRemoteSelection = (y, cm, type, cursors, clientId) => {
+  // destroy current text mark
+  const m = cursors.get(clientId)
+  if (m !== undefined) {
+    m.caret.clear()
+    if (m.sel !== null) {
+      m.sel.clear()
+    }
+    cursors.delete(clientId)
+  }
+  // redraw caret and selection for clientId
+  const aw = y.awareness.get(clientId)
+  if (aw === undefined) {
+    return
+  }
+  const user = aw.user || {}
+  if (user.color == null) {
+    user.color = '#ffa500'
+  }
+  if (user.name == null) {
+    user.name = `User: ${clientId}`
+  }
+  const cursor = aw.cursor
+  if (cursor == null || cursor.anchor == null || cursor.head == null) {
+    return
+  }
+  const anchor = ypos.fromRelativePosition(y, cursor.anchor || null)
+  const head = ypos.fromRelativePosition(y, cursor.head || null)
+  if (anchor !== null && head !== null && anchor.type === type && head.type === type) {
+    const headpos = cm.posFromIndex(head.offset)
+    const anchorpos = cm.posFromIndex(anchor.offset)
+    let from, to
+    if (head.offset < anchor.offset) {
+      from = headpos
+      to = anchorpos
+    } else {
+      from = anchorpos
+      to = headpos
+    }
+    const caretEl = createRemoteCaret(user.name, user.color)
+    const caret = cm.setBookmark(headpos, { widget: caretEl, insertLeft: true })
+    let sel = null
+    if (head.offset !== anchor.offset) {
+      sel = cm.markText(from, to, { css: `background-color: ${user.color}70`, inclusiveRight: true, inclusiveLeft: false })
+    }
+    cursors.set(clientId, { caret, sel })
+  }
+}
+
+const prosemirrorCursorActivity = (y, cm, type) => {
+  if (!cm.hasFocus()) {
+    return
+  }
+  const aw = y.getLocalAwarenessInfo()
+  const anchor = ypos.getRelativePosition(type, cm.indexFromPos(cm.getCursor('anchor')))
+  const head = ypos.getRelativePosition(type, cm.indexFromPos(cm.getCursor('head')))
+  if (aw.cursor == null || !ypos.equal(aw.cursor.anchor, anchor) || !ypos.equal(aw.cursor.head, head)) {
+    y.setAwarenessField('cursor', {
+      anchor, head
+    })
+  }
+}
+
+/**
+ * A binding that binds a YText to a CodeMirror editor.
+ *
+ * @example
+ *   const ytext = ydocument.define('codemirror', Y.Text)
+ *   const editor = new CodeMirror(document.querySelector('#container'), {
+ *     mode: 'javascript',
+ *     lineNumbers: true
+ *   })
+ *   const binding = new CodeMirrorBinding(editor)
+ *
+ */
+export class CodeMirrorBinding {
+  /**
+   * @param {YText} textType
+   * @param {CodeMirror} codeMirror
+   * @param {Object} [options={cursors: true}]
+   */
+  constructor (textType, codeMirror, { cursors = true } = {}) {
+    const y = textType._y
+    this.type = textType
+    this.target = codeMirror
+    /**
+     * @private
+     */
+    this._mux = createMutex()
+    // set initial value
+    codeMirror.setValue(textType.toString())
+    // observe type and target
+    this._typeObserver = event => typeObserver(this, event)
+    this._targetObserver = (_, change) => targetObserver(this, change)
+    this._cursors = new Map()
+    this._awarenessListener = event => {
+      const f = clientId => updateRemoteSelection(y, codeMirror, textType, this._cursors, clientId)
+      event.added.forEach(f)
+      event.removed.forEach(f)
+      event.updated.forEach(f)
+    }
+    this._cursorListener = () => prosemirrorCursorActivity(y, codeMirror, textType)
+    this._blurListeer = () =>
+      y.setAwarenessField('cursor', null)
+    textType.observe(this._typeObserver)
+    codeMirror.on('change', this._targetObserver)
+    if (cursors) {
+      y.on('awareness', this._awarenessListener)
+      codeMirror.on('cursorActivity', this._cursorListener)
+      codeMirror.on('blur', this._blurListeer)
+      codeMirror.on('focus', this._cursorListener)
+    }
+  }
+  destroy () {
+    this.type.unobserve(this._typeObserver)
+    this.target.off('change', this._targetObserver)
+    this.type.off('awareness', this._awarenessListener)
+    this.target.off('cursorActivity', this._cursorListener)
+    this.target.off('focus', this._cursorListener)
+    this.target.off('blur', this._blurListeer)
+    this.type = null
+    this.target = null
+  }
+}

bindings/dom.js

@@ -0,0 +1 @@
+export * from './dom/DomBinding.js'

bindings/dom/DomBinding.js

@@ -0,0 +1,248 @@
+/**
+ * @module bindings/dom
+ */
+
+/* global MutationObserver, getSelection */
+
+import { fromRelativePosition } from '../../utils/relativePosition.js'
+import { createMutex } from '../../lib/mutex.js'
+import { createAssociation, removeAssociation } from './util.js'
+import { beforeTransactionSelectionFixer, afterTransactionSelectionFixer, getCurrentRelativeSelection } from './selection.js'
+import { defaultFilter, applyFilterOnType } from './filter.js'
+import { typeObserver } from './typeObserver.js'
+import { domObserver } from './domObserver.js'
+import { YXmlFragment } from '../../types/YXmlElement.js' // eslint-disable-line
+
+/**
+ * @callback DomFilter
+ * @param {string} nodeName
+ * @param {Map<string, string>} attrs
+ * @return {Map | null}
+ */
+
+/**
+ * A binding that binds the children of a YXmlFragment to a DOM element.
+ *
+ * This binding is automatically destroyed when its parent is deleted.
+ *
+ * @example
+ * const div = document.createElement('div')
+ * const type = y.define('xml', Y.XmlFragment)
+ * const binding = new Y.QuillBinding(type, div)
+ *
+ * @class
+ */
+export class DomBinding {
+  /**
+   * @param {YXmlFragment} type The bind source. This is the ultimate source of
+   *                            truth.
+   * @param {Element} target The bind target. Mirrors the target.
+   * @param {Object} [opts] Optional configurations
+
+   * @param {DomFilter} [opts.filter=defaultFilter] The filter function to use.
+   * @param {Document} [opts.document=document] The filter function to use.
+   * @param {Object} [opts.hooks] The filter function to use.
+   * @param {Element} [opts.scrollingElement=null] The filter function to use.
+   */
+  constructor (type, target, opts = {}) {
+    // Binding handles textType as this.type and domTextarea as this.target
+    /**
+     * The Yjs type that is bound to `target`
+     * @type {YXmlFragment}
+     */
+    this.type = type
+    /**
+     * The target that `type` is bound to.
+     * @type {Element}
+     */
+    this.target = target
+    /**
+     * @private
+     */
+    this._mutualExclude = createMutex()
+    this.opts = opts
+    opts.document = opts.document || document
+    opts.hooks = opts.hooks || {}
+    this.scrollingElement = opts.scrollingElement || null
+    /**
+     * Maps each DOM element to the type that it is associated with.
+     * @type {Map}
+     */
+    this.domToType = new Map()
+    /**
+     * Maps each YXml type to the DOM element that it is associated with.
+     * @type {Map}
+     */
+    this.typeToDom = new Map()
+    /**
+     * Defines which DOM attributes and elements to filter out.
+     * Also filters remote changes.
+     * @type {DomFilter}
+     */
+    this.filter = opts.filter || defaultFilter
+    // set initial value
+    target.innerHTML = ''
+    type.forEach(child => {
+      target.insertBefore(child.toDom(opts.document, opts.hooks, this), null)
+    })
+    this._typeObserver = typeObserver.bind(this)
+    this._domObserver = mutations => {
+      domObserver.call(this, mutations, opts.document)
+    }
+    type.observeDeep(this._typeObserver)
+    this._mutationObserver = new MutationObserver(this._domObserver)
+    this._mutationObserver.observe(target, {
+      childList: true,
+      attributes: true,
+      characterData: true,
+      subtree: true
+    })
+    this._currentSel = null
+    this._selectionchange = () => {
+      this._currentSel = getCurrentRelativeSelection(this)
+    }
+    document.addEventListener('selectionchange', this._selectionchange)
+    const y = type._y
+    this.y = y
+    // Force flush dom changes before Type changes are applied (they might
+    // modify the dom)
+    this._beforeTransactionHandler = y => {
+      this._domObserver(this._mutationObserver.takeRecords())
+      this._mutualExclude(() => {
+        beforeTransactionSelectionFixer(this)
+      })
+    }
+    y.on('beforeTransaction', this._beforeTransactionHandler)
+    this._afterTransactionHandler = (y, transaction) => {
+      this._mutualExclude(() => {
+        afterTransactionSelectionFixer(this)
+      })
+      // remove associations
+      // TODO: this could be done more efficiently
+      // e.g. Always delete using the following approach, or removeAssociation
+      // in dom/type-observer..
+      transaction.deletedStructs.forEach(type => {
+        const dom = this.typeToDom.get(type)
+        if (dom !== undefined) {
+          removeAssociation(this, dom, type)
+        }
+      })
+    }
+    y.on('afterTransaction', this._afterTransactionHandler)
+    // Before calling observers, apply dom filter to all changed and new types.
+    this._beforeObserverCallsHandler = (y, transaction) => {
+      // Apply dom filter to new and changed types
+      transaction.changedTypes.forEach((subs, type) => {
+        // Only check attributes. New types are filtered below.
+        if ((subs.size > 1 || (subs.size === 1 && subs.has(null) === false))) {
+          applyFilterOnType(y, this, type)
+        }
+      })
+      transaction.newTypes.forEach(type => {
+        applyFilterOnType(y, this, type)
+      })
+    }
+    y.on('beforeObserverCalls', this._beforeObserverCallsHandler)
+    createAssociation(this, target, type)
+  }
+
+  flushDomChanges () {
+    this._domObserver(this._mutationObserver.takeRecords())
+  }
+
+  /**
+   * NOTE:
+   * * does not apply filter to existing elements!
+   * * only guarantees that changes are filtered locally. Remote sites may see different content.
+   *
+   * @param {DomFilter} filter The filter function to use from now on.
+   */
+  setFilter (filter) {
+    this.filter = filter
+    // TODO: apply filter to all elements
+  }
+
+  _getUndoStackInfo () {
+    return this.getSelection()
+  }
+
+  _restoreUndoStackInfo (info) {
+    this.restoreSelection(info)
+  }
+
+  getSelection () {
+    return this._currentSel
+  }
+
+  restoreSelection (selection) {
+    if (selection !== null) {
+      const { to, from } = selection
+      /**
+       * There is little information on the difference between anchor/focus and base/extent.
+       * MDN doesn't even mention base/extent anymore.. though you still have to call
+       * setBaseAndExtent to change the selection..
+       * I can observe that base/extend refer to notes higher up in the xml hierachy.
+       * Espesially for undo/redo this is preferred. If this becomes a problem in the future,
+       * we should probably go back to anchor/focus.
+       */
+      const browserSelection = getSelection()
+      let { baseNode, baseOffset, extentNode, extentOffset } = browserSelection
+      if (from !== null) {
+        let sel = fromRelativePosition(this.y, from)
+        if (sel !== null) {
+          let node = this.typeToDom.get(sel.type)
+          let offset = sel.offset
+          if (node !== baseNode || offset !== baseOffset) {
+            baseNode = node
+            baseOffset = offset
+          }
+        }
+      }
+      if (to !== null) {
+        let sel = fromRelativePosition(this.y, to)
+        if (sel !== null) {
+          let node = this.typeToDom.get(sel.type)
+          let offset = sel.offset
+          if (node !== extentNode || offset !== extentOffset) {
+            extentNode = node
+            extentOffset = offset
+          }
+        }
+      }
+      browserSelection.setBaseAndExtent(
+        baseNode,
+        baseOffset,
+        extentNode,
+        extentOffset
+      )
+    }
+  }
+
+  /**
+   * Remove all properties that are handled by this class.
+   */
+  destroy () {
+    this.domToType = null
+    this.typeToDom = null
+    this.type.unobserveDeep(this._typeObserver)
+    this._mutationObserver.disconnect()
+    const y = this.type._y
+    y.off('beforeTransaction', this._beforeTransactionHandler)
+    y.off('beforeObserverCalls', this._beforeObserverCallsHandler)
+    y.off('afterTransaction', this._afterTransactionHandler)
+    document.removeEventListener('selectionchange', this._selectionchange)
+    this.type = null
+    this.target = null
+  }
+}
+
+/**
+ * A filter defines which elements and attributes to share.
+ * Return null if the node should be filtered. Otherwise return the Map of
+ * accepted attributes.
+ *
+ * @callback FilterFunction
+ * @param {string} nodeName
+ * @param {Map} attrs
+ * @return {Map|null}
+ */

bindings/dom/domObserver.js

@@ -0,0 +1,150 @@
+/**
+ * @module bindings/dom
+ */
+
+import { YXmlHook } from '../../types/YXmlHook.js'
+import {
+  iterateUntilUndeleted,
+  removeAssociation,
+  insertNodeHelper } from './util.js'
+import { simpleDiff } from '../../lib/diff.js'
+import { YXmlFragment } from '../../types/YXmlElement.js'
+
+/**
+ * 1. Check if any of the nodes was deleted
+ * 2. Iterate over the children.
+ *    2.1 If a node exists that is not yet bound to a type, insert a new node
+ *    2.2 If _contents.length < dom.childNodes.length, fill the
+ *        rest of _content with childNodes
+ *    2.3 If a node was moved, delete it and
+ *       recreate a new yxml element that is bound to that node.
+ *       You can detect that a node was moved because expectedId
+ *       !== actualId in the list
+ *
+ * @function
+ * @private
+ */
+const applyChangesFromDom = (binding, dom, yxml, _document) => {
+  if (yxml == null || yxml === false || yxml.constructor === YXmlHook) {
+    return
+  }
+  const y = yxml._y
+  const knownChildren = new Set()
+  for (let i = dom.childNodes.length - 1; i >= 0; i--) {
+    const type = binding.domToType.get(dom.childNodes[i])
+    if (type !== undefined && type !== false) {
+      knownChildren.add(type)
+    }
+  }
+  // 1. Check if any of the nodes was deleted
+  yxml.forEach(childType => {
+    if (knownChildren.has(childType) === false) {
+      childType._delete(y)
+      removeAssociation(binding, binding.typeToDom.get(childType), childType)
+    }
+  })
+  // 2. iterate
+  const childNodes = dom.childNodes
+  const len = childNodes.length
+  let prevExpectedType = null
+  let expectedType = iterateUntilUndeleted(yxml._start)
+  for (let domCnt = 0; domCnt < len; domCnt++) {
+    const childNode = childNodes[domCnt]
+    const childType = binding.domToType.get(childNode)
+    if (childType !== undefined) {
+      if (childType === false) {
+        // should be ignored or is going to be deleted
+        continue
+      }
+      if (expectedType !== null) {
+        if (expectedType !== childType) {
+          // 2.3 Not expected node
+          if (childType._parent !== yxml) {
+            // child was moved from another parent
+            // childType is going to be deleted by its previous parent
+            removeAssociation(binding, childNode, childType)
+          } else {
+            // child was moved to a different position.
+            removeAssociation(binding, childNode, childType)
+            childType._delete(y)
+          }
+          prevExpectedType = insertNodeHelper(yxml, prevExpectedType, childNode, _document, binding)
+        } else {
+          // Found expected node. Continue.
+          prevExpectedType = expectedType
+          expectedType = iterateUntilUndeleted(expectedType._right)
+        }
+      } else {
+        // 2.2 Fill _content with child nodes
+        prevExpectedType = insertNodeHelper(yxml, prevExpectedType, childNode, _document, binding)
+      }
+    } else {
+      // 2.1 A new node was found
+      prevExpectedType = insertNodeHelper(yxml, prevExpectedType, childNode, _document, binding)
+    }
+  }
+}
+
+/**
+ * @private
+ * @function
+ */
+export function domObserver (mutations, _document) {
+  this._mutualExclude(() => {
+    this.type._y.transact(() => {
+      let diffChildren = new Set()
+      mutations.forEach(mutation => {
+        const dom = mutation.target
+        const yxml = this.domToType.get(dom)
+        if (yxml === undefined) { // In case yxml is undefined, we double check if we forgot to bind the dom
+          let parent = dom
+          let yParent
+          do {
+            parent = parent.parentElement
+            yParent = this.domToType.get(parent)
+          } while (yParent === undefined && parent !== null)
+          if (yParent !== false && yParent !== undefined && yParent.constructor !== YXmlHook) {
+            diffChildren.add(parent)
+          }
+          return
+        } else if (yxml === false || yxml.constructor === YXmlHook) {
+          // dom element is filtered / a dom hook
+          return
+        }
+        switch (mutation.type) {
+          case 'characterData':
+            var change = simpleDiff(yxml.toString(), dom.nodeValue)
+            yxml.delete(change.pos, change.remove)
+            yxml.insert(change.pos, change.insert)
+            break
+          case 'attributes':
+            if (yxml.constructor === YXmlFragment) {
+              break
+            }
+            let name = mutation.attributeName
+            let val = dom.getAttribute(name)
+            // check if filter accepts attribute
+            let attributes = new Map()
+            attributes.set(name, val)
+            if (yxml.constructor !== YXmlFragment && this.filter(dom.nodeName, attributes).size > 0) {
+              if (yxml.getAttribute(name) !== val) {
+                if (val == null) {
+                  yxml.removeAttribute(name)
+                } else {
+                  yxml.setAttribute(name, val)
+                }
+              }
+            }
+            break
+          case 'childList':
+            diffChildren.add(mutation.target)
+            break
+        }
+      })
+      for (let dom of diffChildren) {
+        const yxml = this.domToType.get(dom)
+        applyChangesFromDom(this, dom, yxml, _document)
+      }
+    })
+  })
+}

bindings/dom/domToType.js

@@ -0,0 +1,74 @@
+/**
+ * @module bindings/dom
+ */
+
+/* eslint-env browser */
+import { YXmlText } from '../../types/YXmlText.js'
+import { YXmlHook } from '../../types/YXmlHook.js'
+import { YXmlElement } from '../../types/YXmlElement.js'
+import { createAssociation, domsToTypes } from './util.js'
+import { filterDomAttributes, defaultFilter } from './filter.js'
+import { DomBinding } from './DomBinding.js' // eslint-disable-line
+
+/**
+ * @callback DomFilter
+ * @param {string} nodeName
+ * @param {Map<string, string>} attrs
+ * @return {Map | null}
+ */
+
+/**
+ * Creates a Yjs type (YXml) based on the contents of a DOM Element.
+ *
+ * @function
+ * @param {Element|Text} element The DOM Element
+ * @param {?Document} _document Optional. Provide the global document object
+ * @param {Object<string, any>} [hooks = {}] Optional. Set of Yjs Hooks
+ * @param {DomFilter} [filter=defaultFilter] Optional. Dom element filter
+ * @param {?DomBinding} binding Warning: This property is for internal use only!
+ * @return {YXmlElement | YXmlText | false}
+ */
+export const domToType = (element, _document = document, hooks = {}, filter = defaultFilter, binding) => {
+  /**
+   * @type {any}
+   */
+  let type = null
+  if (element instanceof Element) {
+    let hookName = null
+    let hook
+    // configure `hookName !== undefined` if element is a hook.
+    if (element.hasAttribute('data-yjs-hook')) {
+      hookName = element.getAttribute('data-yjs-hook')
+      hook = hooks[hookName]
+      if (hook === undefined) {
+        console.error(`Unknown hook "${hookName}". Deleting yjsHook dataset property.`)
+        element.removeAttribute('data-yjs-hook')
+        hookName = null
+      }
+    }
+    if (hookName === null) {
+      // Not a hook
+      const attrs = filterDomAttributes(element, filter)
+      if (attrs === null) {
+        type = false
+      } else {
+        type = new YXmlElement(element.nodeName)
+        attrs.forEach((val, key) => {
+          type.setAttribute(key, val)
+        })
+        type.insert(0, domsToTypes(element.childNodes, document, hooks, filter, binding))
+      }
+    } else {
+      // Is a hook
+      type = new YXmlHook(hookName)
+      hook.fillType(element, type)
+    }
+  } else if (element instanceof Text) {
+    type = new YXmlText()
+    type.insert(0, element.nodeValue)
+  } else {
+    throw new Error('Can\'t transform this node type to a YXml type!')
+  }
+  createAssociation(binding, element, type)
+  return type
+}

bindings/dom/filter.js

@@ -0,0 +1,71 @@
+/**
+ * @module bindings/dom
+ */
+
+import { Y } from '../../utils/Y.js' // eslint-disable-line
+import { YXmlElement, YXmlFragment } from '../../types/YXmlElement.js' // eslint-disable-line
+import { isParentOf } from '../../utils/isParentOf.js'
+import { DomBinding } from './DomBinding.js' // eslint-disable-line
+
+/**
+ * Default filter method (does nothing).
+ *
+ * @function
+ * @param {String} nodeName The nodeName of the element
+ * @param {Map} attrs Map of key-value pairs that are attributes of the node.
+ * @return {Map | null} The allowed attributes or null, if the element should be
+ *                      filtered.
+ */
+export const defaultFilter = (nodeName, attrs) => {
+  // TODO: implement basic filter that filters out dangerous properties!
+  return attrs
+}
+
+/**
+ * @private
+ * @function
+ * @param {Element} dom
+ * @param {Function} filter
+ */
+export const filterDomAttributes = (dom, filter) => {
+  const attrs = new Map()
+  for (let i = dom.attributes.length - 1; i >= 0; i--) {
+    const attr = dom.attributes[i]
+    attrs.set(attr.name, attr.value)
+  }
+  return filter(dom.nodeName, attrs)
+}
+
+/**
+ * Applies a filter on a type.
+ *
+ * @private
+ * @function
+ * @param {Y} y The Yjs instance.
+ * @param {DomBinding} binding The DOM binding instance that has the dom filter.
+ * @param {YXmlElement | YXmlFragment } type The type to apply the filter to.
+ */
+export const applyFilterOnType = (y, binding, type) => {
+  if (isParentOf(binding.type, type) && type instanceof YXmlElement) {
+    const nodeName = type.nodeName
+    let attributes = new Map()
+    if (type.getAttributes !== undefined) {
+      let attrs = type.getAttributes()
+      for (let key in attrs) {
+        attributes.set(key, attrs[key])
+      }
+    }
+    const filteredAttributes = binding.filter(nodeName, new Map(attributes))
+    if (filteredAttributes === null) {
+      type._delete(y, true)
+    } else {
+      // iterate original attributes
+      attributes.forEach((value, key) => {
+        // delete all attributes that are not in filteredAttributes
+        if (filteredAttributes.has(key) === false) {
+          type.removeAttribute(key)
+        }
+      })
+    }
+  }
+}

bindings/dom/selection.js

@@ -0,0 +1,49 @@
+/**
+ * @module bindings/dom
+ */
+
+/* globals getSelection */
+
+import { getRelativePosition } from '../../utils/relativePosition.js'
+
+let relativeSelection = null
+
+/**
+ * @private
+ */
+const _getCurrentRelativeSelection = domBinding => {
+  const { baseNode, baseOffset, extentNode, extentOffset } = getSelection()
+  const baseNodeType = domBinding.domToType.get(baseNode)
+  const extentNodeType = domBinding.domToType.get(extentNode)
+  if (baseNodeType !== undefined && extentNodeType !== undefined) {
+    return {
+      from: getRelativePosition(baseNodeType, baseOffset),
+      to: getRelativePosition(extentNodeType, extentOffset)
+    }
+  }
+  return null
+}
+
+/**
+ * @private
+ */
+export const getCurrentRelativeSelection = typeof getSelection !== 'undefined' ? _getCurrentRelativeSelection : domBinding => null
+
+/**
+ * @private
+ */
+export const beforeTransactionSelectionFixer = domBinding => {
+  relativeSelection = getCurrentRelativeSelection(domBinding)
+}
+
+/**
+ * Reset the browser range after every transaction.
+ * This prevents any collapsing issues with the local selection.
+ *
+ * @private
+ */
+export const afterTransactionSelectionFixer = domBinding => {
+  if (relativeSelection !== null) {
+    domBinding.restoreSelection(relativeSelection)
+  }
+}

bindings/dom/typeObserver.js

@@ -0,0 +1,110 @@
+/**
+ * @module bindings/dom
+ */
+
+/* eslint-env browser */
+/* global getSelection */
+
+import { YXmlText } from '../../types/YXmlText.js'
+import { YXmlHook } from '../../types/YXmlHook.js'
+import { removeDomChildrenUntilElementFound } from './util.js'
+
+const findScrollReference = scrollingElement => {
+  if (scrollingElement !== null) {
+    let anchor = getSelection().anchorNode
+    if (anchor == null) {
+      let children = scrollingElement.children // only iterate through non-text nodes
+      for (let i = 0; i < children.length; i++) {
+        const elem = children[i]
+        const rect = elem.getBoundingClientRect()
+        if (rect.top >= 0) {
+          return { elem, top: rect.top }
+        }
+      }
+    } else {
+      /**
+       * @type {Element}
+       */
+      let elem = anchor.parentElement
+      if (anchor instanceof Element) {
+        elem = anchor
+      }
+      return {
+        elem,
+        top: elem.getBoundingClientRect().top
+      }
+    }
+  }
+  return null
+}
+
+const fixScroll = (scrollingElement, ref) => {
+  if (ref !== null) {
+    const { elem, top } = ref
+    const currentTop = elem.getBoundingClientRect().top
+    const newScroll = scrollingElement.scrollTop + currentTop - top
+    if (newScroll >= 0) {
+      scrollingElement.scrollTop = newScroll
+    }
+  }
+}
+
+/**
+ * @private
+ */
+export const typeObserver = function (events) {
+  this._mutualExclude(() => {
+    const scrollRef = findScrollReference(this.scrollingElement)
+    events.forEach(event => {
+      const yxml = event.target
+      const dom = this.typeToDom.get(yxml)
+      if (dom !== undefined && dom !== false) {
+        if (yxml.constructor === YXmlText) {
+          dom.nodeValue = yxml.toString()
+        } else if (event.attributesChanged !== undefined) {
+          // update attributes
+          event.attributesChanged.forEach(attributeName => {
+            const value = yxml.getAttribute(attributeName)
+            if (value === undefined) {
+              dom.removeAttribute(attributeName)
+            } else {
+              dom.setAttribute(attributeName, value)
+            }
+          })
+          /*
+           * TODO: instead of hard-checking the types, it would be best to
+           *       specify the type's features. E.g.
+           *         - _yxmlHasAttributes
+           *         - _yxmlHasChildren
+           *       Furthermore, the features shouldn't be encoded in the types,
+           *       only in the attributes (above)
+           */
+          if (event.childListChanged && yxml.constructor !== YXmlHook) {
+            let currentChild = dom.firstChild
+            yxml.forEach(childType => {
+              const childNode = this.typeToDom.get(childType)
+              switch (childNode) {
+                case undefined:
+                  // Does not exist. Create it.
+                  const node = childType.toDom(this.opts.document, this.opts.hooks, this)
+                  dom.insertBefore(node, currentChild)
+                  break
+                case false:
+                  // nop
+                  break
+                default:
+                  // Is already attached to the dom.
+                  // Find it and remove all dom nodes in-between.
+                  removeDomChildrenUntilElementFound(dom, currentChild, childNode)
+                  currentChild = childNode.nextSibling
+                  break
+              }
+            })
+            removeDomChildrenUntilElementFound(dom, currentChild, null)
+          }
+        }
+      }
+    })
+    fixScroll(this.scrollingElement, scrollRef)
+  })
+}

bindings/dom/util.js

@@ -0,0 +1,135 @@
+/**
+ * @module bindings/dom
+ */
+
+import { domToType } from './domToType.js'
+import { DomBinding } from './DomBinding.js' // eslint-disable-line
+
+/**
+ * Iterates items until an undeleted item is found.
+ *
+ * @private
+ */
+export const iterateUntilUndeleted = item => {
+  while (item !== null && item._deleted) {
+    item = item._right
+  }
+  return item
+}
+
+/**
+ * Removes an association (the information that a DOM element belongs to a
+ * type).
+ *
+ * @private
+ * @function
+ * @param {DomBinding} domBinding The binding object
+ * @param {Element} dom The dom that is to be associated with type
+ * @param {YXmlElement|YXmlHook} type The type that is to be associated with dom
+ *
+ */
+export const removeAssociation = (domBinding, dom, type) => {
+  domBinding.domToType.delete(dom)
+  domBinding.typeToDom.delete(type)
+}
+
+/**
+ * Creates an association (the information that a DOM element belongs to a
+ * type).
+ *
+ * @private
+ * @function
+ * @param {DomBinding} domBinding The binding object
+ * @param {DocumentFragment|Element|Text} dom The dom that is to be associated with type
+ * @param {YXmlFragment|YXmlElement|YXmlHook|YXmlText} type The type that is to be associated with dom
+ *
+ */
+export const createAssociation = (domBinding, dom, type) => {
+  if (domBinding !== undefined) {
+    domBinding.domToType.set(dom, type)
+    domBinding.typeToDom.set(type, dom)
+  }
+}
+
+/**
+ * If oldDom is associated with a type, associate newDom with the type and
+ * forget about oldDom. If oldDom is not associated with any type, nothing happens.
+ *
+ * @private
+ * @function
+ * @param {DomBinding} domBinding The binding object
+ * @param {Element} oldDom The existing dom
+ * @param {Element} newDom The new dom object
+ */
+export const switchAssociation = (domBinding, oldDom, newDom) => {
+  if (domBinding !== undefined) {
+    const type = domBinding.domToType.get(oldDom)
+    if (type !== undefined) {
+      removeAssociation(domBinding, oldDom, type)
+      createAssociation(domBinding, newDom, type)
+    }
+  }
+}
+
+/**
+ * Insert Dom Elements after one of the children of this YXmlFragment.
+ * The Dom elements will be bound to a new YXmlElement and inserted at the
+ * specified position.
+ *
+ * @private
+ * @function
+ * @param {YXmlElement} type The type in which to insert DOM elements.
+ * @param {YXmlElement|null} prev The reference node. New YxmlElements are
+ *                           inserted after this node. Set null to insert at
+ *                           the beginning.
+ * @param {Array<Element>} doms The Dom elements to insert.
+ * @param {?Document} _document Optional. Provide the global document object.
+ * @param {DomBinding} binding The dom binding
+ * @return {Array<YXmlElement>} The YxmlElements that are inserted.
+ */
+export const insertDomElementsAfter = (type, prev, doms, _document, binding) => {
+  const types = domsToTypes(doms, _document, binding.opts.hooks, binding.filter, binding)
+  return type.insertAfter(prev, types)
+}
+
+export const domsToTypes = (doms, _document, hooks, filter, binding) => {
+  const types = []
+  for (let dom of doms) {
+    const t = domToType(dom, _document, hooks, filter, binding)
+    if (t !== false) {
+      types.push(t)
+    }
+  }
+  return types
+}
+
+/**
+ * @private
+ * @function
+ */
+export const insertNodeHelper = (yxml, prevExpectedNode, child, _document, binding) => {
+  let insertedNodes = insertDomElementsAfter(yxml, prevExpectedNode, [child], _document, binding)
+  if (insertedNodes.length > 0) {
+    return insertedNodes[0]
+  } else {
+    return prevExpectedNode
+  }
+}
+
+/**
+ * Remove children until `elem` is found.
+ *
+ * @private
+ * @function
+ * @param {Element} parent The parent of `elem` and `currentChild`.
+ * @param {Node} currentChild Start removing elements with `currentChild`. If
+ *                               `currentChild` is `elem` it won't be removed.
+ * @param {Element|null} elem The elemnt to look for.
+ */
+export const removeDomChildrenUntilElementFound = (parent, currentChild, elem) => {
+  while (currentChild !== elem) {
+    const del = currentChild
+    currentChild = currentChild.nextSibling
+    parent.removeChild(del)
+  }
+}

bindings/prosemirror.js

@@ -0,0 +1,752 @@
+/**
+ * @module bindings/prosemirror
+ */
+
+import { YText } from '../types/YText.js' // eslint-disable-line
+import { YXmlElement, YXmlFragment } from '../types/YXmlElement.js' // eslint-disable-line
+import { createMutex } from '../lib/mutex.js'
+import * as PModel from 'prosemirror-model'
+import { EditorView,  Decoration, DecorationSet } from 'prosemirror-view' // eslint-disable-line
+import { Plugin, PluginKey, EditorState, TextSelection } from 'prosemirror-state' // eslint-disable-line
+import * as math from '../lib/math.js'
+import * as object from '../lib/object.js'
+import * as YPos from '../utils/relativePosition.js'
+import { isVisible } from '../utils/snapshot.js'
+import { simpleDiff } from '../lib/diff.js'
+
+/**
+ * @typedef {Map<YText | YXmlElement | YXmlFragment, PModel.Node>} ProsemirrorMapping
+ */
+
+/**
+ * The unique prosemirror plugin key for prosemirrorPlugin.
+ *
+ * @public
+ */
+export const prosemirrorPluginKey = new PluginKey('yjs')
+
+/**
+ * This plugin listens to changes in prosemirror view and keeps yXmlState and view in sync.
+ *
+ * This plugin also keeps references to the type and the shared document so other plugins can access it.
+ * @param {YXmlFragment} yXmlFragment
+ * @return {Plugin} Returns a prosemirror plugin that binds to this type
+ */
+export const prosemirrorPlugin = yXmlFragment => {
+  let changedInitialContent = false
+  const plugin = new Plugin({
+    props: {
+      editable: (state) => prosemirrorPluginKey.getState(state).snapshot == null
+    },
+    key: prosemirrorPluginKey,
+    state: {
+      init: (initargs, state) => {
+        return {
+          type: yXmlFragment,
+          y: yXmlFragment._y,
+          binding: null,
+          snapshot: null
+        }
+      },
+      apply: (tr, pluginState) => {
+        const change = tr.getMeta(prosemirrorPluginKey)
+        if (change !== undefined) {
+          pluginState = Object.assign({}, pluginState)
+          for (let key in change) {
+            pluginState[key] = change[key]
+          }
+        }
+        if (pluginState.binding !== null) {
+          if (change !== undefined && change.snapshot !== undefined) {
+            // snapshot changed, rerender next
+            setTimeout(() => {
+              if (change.restore == null) {
+                pluginState.binding._renderSnapshot(change.snapshot, change.prevSnapshot)
+              } else {
+                pluginState.binding._renderSnapshot(change.snapshot, change.snapshot)
+                // reset to current prosemirror state
+                delete pluginState.restore
+                delete pluginState.snapshot
+                delete pluginState.prevSnapshot
+                pluginState.binding._prosemirrorChanged(pluginState.binding.prosemirrorView.state.doc)
+              }
+            }, 0)
+          } else if (pluginState.snapshot == null) {
+            // only apply if no snapshot active
+            // update Yjs state when apply is called. We need to do this here to compute the correct cursor decorations with the cursor plugin
+            if (changedInitialContent || tr.doc.content.size > 4) {
+              changedInitialContent = true
+              pluginState.binding._prosemirrorChanged(tr.doc)
+            }
+          }
+        }
+        return pluginState
+      }
+    },
+    view: view => {
+      const binding = new ProsemirrorBinding(yXmlFragment, view)
+      view.dispatch(view.state.tr.setMeta(prosemirrorPluginKey, { binding }))
+      return {
+        update: () => {
+          const pluginState = plugin.getState(view.state)
+          if (pluginState.snapshot == null) {
+            if (changedInitialContent || view.state.doc.content.size > 4) {
+              changedInitialContent = true
+              binding._prosemirrorChanged(view.state.doc)
+            }
+          }
+        },
+        destroy: () => {
+          binding.destroy()
+        }
+      }
+    }
+  })
+  return plugin
+}
+
+/**
+ * The unique prosemirror plugin key for cursorPlugin.type
+ *
+ * @public
+ */
+export const cursorPluginKey = new PluginKey('yjs-cursor')
+
+/**
+ * A prosemirror plugin that listens to awareness information on Yjs.
+ * This requires that a `prosemirrorPlugin` is also bound to the prosemirror.
+ *
+ * @public
+ */
+export const cursorPlugin = new Plugin({
+  key: cursorPluginKey,
+  props: {
+    decorations: state => {
+      const ystate = prosemirrorPluginKey.getState(state)
+      const y = ystate.y
+      const awareness = y.getAwarenessInfo()
+      const decorations = []
+      if (ystate.snapshot != null) {
+        // do not render cursors while snapshot is active
+        return
+      }
+      awareness.forEach((aw, userID) => {
+        if (userID === y.userID) {
+          return
+        }
+        if (aw.cursor != null) {
+          let user = aw.user || {}
+          if (user.color == null) {
+            user.color = '#ffa500'
+          }
+          if (user.name == null) {
+            user.name = `User: ${userID}`
+          }
+          let anchor = relativePositionToAbsolutePosition(ystate.type, aw.cursor.anchor || null, ystate.binding.mapping)
+          let head = relativePositionToAbsolutePosition(ystate.type, aw.cursor.head || null, ystate.binding.mapping)
+          if (anchor !== null && head !== null) {
+            let maxsize = math.max(state.doc.content.size - 1, 0)
+            anchor = math.min(anchor, maxsize)
+            head = math.min(head, maxsize)
+            decorations.push(Decoration.widget(head, () => {
+              const cursor = document.createElement('span')
+              cursor.classList.add('ProseMirror-yjs-cursor')
+              cursor.setAttribute('style', `border-color: ${user.color}`)
+              const userDiv = document.createElement('div')
+              userDiv.setAttribute('style', `background-color: ${user.color}`)
+              userDiv.insertBefore(document.createTextNode(user.name), null)
+              cursor.insertBefore(userDiv, null)
+              return cursor
+            }, { key: userID + '' }))
+            const from = math.min(anchor, head)
+            const to = math.max(anchor, head)
+            decorations.push(Decoration.inline(from, to, { style: `background-color: ${user.color}70` }))
+          }
+        }
+      })
+      return DecorationSet.create(state.doc, decorations)
+    }
+  },
+  view: view => {
+    const ystate = prosemirrorPluginKey.getState(view.state)
+    const y = ystate.y
+    const awarenessListener = () => {
+      view.updateState(view.state)
+    }
+    const updateCursorInfo = () => {
+      const current = y.getLocalAwarenessInfo()
+      if (view.hasFocus() && ystate.binding !== null) {
+        const anchor = absolutePositionToRelativePosition(view.state.selection.anchor, ystate.type, ystate.binding.mapping)
+        const head = absolutePositionToRelativePosition(view.state.selection.head, ystate.type, ystate.binding.mapping)
+        if (current.cursor == null || !YPos.equal(current.cursor.anchor, anchor) || !YPos.equal(current.cursor.head, head)) {
+          y.setAwarenessField('cursor', {
+            anchor, head
+          })
+        }
+      } else if (current.cursor !== null) {
+        y.setAwarenessField('cursor', null)
+      }
+    }
+    y.on('awareness', awarenessListener)
+    view.dom.addEventListener('focusin', updateCursorInfo)
+    view.dom.addEventListener('focusout', updateCursorInfo)
+    return {
+      update: updateCursorInfo,
+      destroy: () => {
+        const y = prosemirrorPluginKey.getState(view.state).y
+        y.setAwarenessField('cursor', null)
+        y.off('awareness', awarenessListener)
+      }
+    }
+  }
+})
+
+/**
+ * Transforms a Prosemirror based absolute position to a Yjs based relative position.
+ *
+ * @param {number} pos
+ * @param {YXmlFragment} type
+ * @param {ProsemirrorMapping} mapping
+ * @return {any} relative position
+ */
+export const absolutePositionToRelativePosition = (pos, type, mapping) => {
+  if (pos === 0) {
+    return YPos.getRelativePosition(type, 0)
+  }
+  let n = type._first
+  if (n !== null) {
+    while (type !== n) {
+      const pNodeSize = (mapping.get(n) || { nodeSize: 0 }).nodeSize
+      if (n.constructor === YText) {
+        if (n.length >= pos) {
+          return YPos.getRelativePosition(n, pos)
+        } else {
+          pos -= n.length
+        }
+        if (n._next !== null) {
+          n = n._next
+        } else {
+          do {
+            n = n._parent
+            pos--
+          } while (n._next === null && n !== type)
+          if (n !== type) {
+            n = n._next
+          }
+        }
+      } else if (n._first !== null && pos < pNodeSize) {
+        n = n._first
+        pos--
+      } else {
+        if (pos === 1 && n.length === 0 && pNodeSize > 1) {
+          // edge case, should end in this paragraph
+          return ['endof', n._id.user, n._id.clock, null, null]
+        }
+        pos -= pNodeSize
+        if (n._next !== null) {
+          n = n._next
+        } else {
+          if (pos === 0) {
+            n = n._parent
+            return ['endof', n._id.user, n._id.clock || null, n._id.name || null, n._id.type || null]
+          }
+          do {
+            n = n._parent
+            pos--
+          } while (n._next === null && n !== type)
+          if (n !== type) {
+            n = n._next
+          }
+        }
+      }
+      if (pos === 0 && n.constructor !== YText && n !== type) { // TODO: set to <= 0
+        return [n._id.user, n._id.clock]
+      }
+    }
+  }
+  return YPos.getRelativePosition(type, type.length)
+}
+
+/**
+ * @param {YXmlFragment} yDoc Top level type that is bound to pView
+ * @param {any} relPos Encoded Yjs based relative position
+ * @param {ProsemirrorMapping} mapping
+ */
+export const relativePositionToAbsolutePosition = (yDoc, relPos, mapping) => {
+  const decodedPos = YPos.fromRelativePosition(yDoc._y, relPos)
+  if (decodedPos === null) {
+    return null
+  }
+  let type = decodedPos.type
+  let pos = 0
+  if (type.constructor === YText) {
+    pos = decodedPos.offset
+  } else if (!type._deleted) {
+    let n = type._first
+    let i = 0
+    while (i < type.length && i < decodedPos.offset && n !== null) {
+      i++
+      pos += mapping.get(n).nodeSize
+      n = n._next
+    }
+    pos += 1 // increase because we go out of n
+  }
+  while (type !== yDoc) {
+    const parent = type._parent
+    if (!parent._deleted) {
+      pos += 1 // the start tag
+      let n = parent._first
+      // now iterate until we found type
+      while (n !== null) {
+        if (n === type) {
+          break
+        }
+        pos += mapping.get(n).nodeSize
+        n = n._next
+      }
+    }
+    type = parent
+  }
+  return pos - 1 // we don't count the most outer tag, because it is a fragment
+}
+
+/**
+ * Binding for prosemirror.
+ *
+ * @protected
+ */
+export class ProsemirrorBinding {
+  /**
+   * @param {YXmlFragment} yXmlFragment The bind source
+   * @param {EditorView} prosemirrorView The target binding
+   */
+  constructor (yXmlFragment, prosemirrorView) {
+    this.type = yXmlFragment
+    this.prosemirrorView = prosemirrorView
+    this.mux = createMutex()
+    /**
+     * @type {ProsemirrorMapping}
+     */
+    this.mapping = new Map()
+    this._observeFunction = this._typeChanged.bind(this)
+    this.y = yXmlFragment._y
+    /**
+     * current selection as relative positions in the Yjs model
+     */
+    this._relSelection = null
+    this.y.on('beforeTransaction', e => {
+      this._relSelection = {
+        anchor: absolutePositionToRelativePosition(this.prosemirrorView.state.selection.anchor, yXmlFragment, this.mapping),
+        head: absolutePositionToRelativePosition(this.prosemirrorView.state.selection.head, yXmlFragment, this.mapping)
+      }
+    })
+    yXmlFragment.observeDeep(this._observeFunction)
+  }
+  _forceRerender () {
+    this.mapping = new Map()
+    this.mux(() => {
+      const fragmentContent = this.type.toArray().map(t => createNodeFromYElement(t, this.prosemirrorView.state.schema, this.mapping)).filter(n => n !== null)
+      const tr = this.prosemirrorView.state.tr.replace(0, this.prosemirrorView.state.doc.content.size, new PModel.Slice(new PModel.Fragment(fragmentContent), 0, 0))
+      this.prosemirrorView.dispatch(tr)
+    })
+  }
+  /**
+   *
+   * @param {*} snapshot
+   * @param {*} prevSnapshot
+   */
+  _renderSnapshot (snapshot, prevSnapshot) {
+    // clear mapping because we are going to rerender
+    this.mapping = new Map()
+    this.mux(() => {
+      const fragmentContent = this.type.toArray({ sm: snapshot.sm, ds: prevSnapshot.ds}).map(t => createNodeFromYElement(t, this.prosemirrorView.state.schema, new Map(), snapshot, prevSnapshot)).filter(n => n !== null)
+      const tr = this.prosemirrorView.state.tr.replace(0, this.prosemirrorView.state.doc.content.size, new PModel.Slice(new PModel.Fragment(fragmentContent), 0, 0))
+      this.prosemirrorView.dispatch(tr)
+    })
+  }
+  _typeChanged (events, transaction) {
+    if (events.length === 0 || prosemirrorPluginKey.getState(this.prosemirrorView.state).snapshot != null) {
+      // drop out if snapshot is active
+      return
+    }
+    console.info('new types:', transaction.newTypes.size, 'deleted types:', transaction.deletedStructs.size, transaction.newTypes, transaction.deletedStructs)
+    this.mux(() => {
+      const delStruct = (_, struct) => this.mapping.delete(struct)
+      transaction.deletedStructs.forEach(struct => this.mapping.delete(struct))
+      transaction.changedTypes.forEach(delStruct)
+      transaction.changedParentTypes.forEach(delStruct)
+      const fragmentContent = this.type.toArray().map(t => createNodeIfNotExists(t, this.prosemirrorView.state.schema, this.mapping)).filter(n => n !== null)
+      const tr = this.prosemirrorView.state.tr.replace(0, this.prosemirrorView.state.doc.content.size, new PModel.Slice(new PModel.Fragment(fragmentContent), 0, 0))
+      const relSel = this._relSelection
+      if (relSel !== null && relSel.anchor !== null && relSel.head !== null) {
+        const anchor = relativePositionToAbsolutePosition(this.type, relSel.anchor, this.mapping)
+        const head = relativePositionToAbsolutePosition(this.type, relSel.head, this.mapping)
+        if (anchor !== null && head !== null) {
+          tr.setSelection(TextSelection.create(tr.doc, anchor, head))
+        }
+      }
+      this.prosemirrorView.dispatch(tr)
+    })
+  }
+  _prosemirrorChanged (doc) {
+    this.mux(() => {
+      updateYFragment(this.type, doc.content, this.mapping)
+    })
+  }
+  destroy () {
+    this.type.unobserveDeep(this._observeFunction)
+  }
+}
+
+/**
+ * @private
+ * @param {YXmlElement} el
+ * @param {PModel.Schema} schema
+ * @param {ProsemirrorMapping} mapping
+ * @param {HistorySnapshot} [snapshot]
+ * @param {HistorySnapshot} [prevSnapshot]
+ * @return {PModel.Node}
+ */
+export const createNodeIfNotExists = (el, schema, mapping, snapshot, prevSnapshot) => {
+  const node = mapping.get(el)
+  if (node === undefined) {
+    return createNodeFromYElement(el, schema, mapping, snapshot, prevSnapshot)
+  }
+  return node
+}
+
+/**
+ * @private
+ * @param {YXmlElement} el
+ * @param {PModel.Schema} schema
+ * @param {ProsemirrorMapping} mapping
+ * @param {import('../protocols/history.js').HistorySnapshot} [snapshot]
+ * @param {import('../protocols/history.js').HistorySnapshot} [prevSnapshot]
+ * @return {PModel.Node | null} Returns node if node could be created. Otherwise it deletes the yjs type and returns null
+ */
+export const createNodeFromYElement = (el, schema, mapping, snapshot, prevSnapshot) => {
+  let _snapshot = snapshot
+  let _prevSnapshot = prevSnapshot
+  if (snapshot !== undefined && prevSnapshot !== undefined) {
+    if (!isVisible(el, snapshot)) {
+      // if this element is already rendered as deleted (ychange), then do not render children as deleted
+      _snapshot = {sm: snapshot.sm, ds: prevSnapshot.ds}
+      _prevSnapshot = _snapshot
+    } else if (!isVisible(el, prevSnapshot)) {
+      _prevSnapshot = _snapshot
+    }
+  }
+  const children = []
+  const createChildren = type => {
+    if (type.constructor === YXmlElement) {
+      const n = createNodeIfNotExists(type, schema, mapping, _snapshot, _prevSnapshot)
+      if (n !== null) {
+        children.push(n)
+      }
+    } else {
+      const ns = createTextNodesFromYText(type, schema, mapping, _snapshot, _prevSnapshot)
+      if (ns !== null) {
+        ns.forEach(textchild => {
+          if (textchild !== null) {
+            children.push(textchild)
+          }
+        })
+      }
+    }
+  }
+  if (snapshot === undefined || prevSnapshot === undefined) {
+    el.toArray().forEach(createChildren)
+  } else {
+    el.toArray({sm: snapshot.sm, ds: prevSnapshot.ds}).forEach(createChildren)
+  }
+  let node
+  try {
+    const attrs = el.getAttributes(_snapshot)
+    if (snapshot !== undefined) {
+      if (!isVisible(el, snapshot)) {
+        attrs.ychange = { user: el._id.user, state: 'removed' }
+      } else if (!isVisible(el, prevSnapshot)) {
+        attrs.ychange = { user: el._id.user, state: 'added' }
+      }
+    }
+    node = schema.node(el.nodeName.toLowerCase(), attrs, children)
+  } catch (e) {
+    // an error occured while creating the node. This is probably a result because of a concurrent action.
+    // ignore the node while rendering
+    /* do not delete anymore
+    el._y.transact(() => {
+      el._delete(el._y, true)
+    })
+    */
+    return null
+  }
+  mapping.set(el, node)
+  return node
+}
+
+/**
+ * @private
+ * @param {YText} text
+ * @param {PModel.Schema} schema
+ * @param {ProsemirrorMapping} mapping
+ * @param {HistorySnapshot} [snapshot]
+ * @param {HistorySnapshot} [prevSnapshot]
+ * @return {Array<PModel.Node>}
+ */
+export const createTextNodesFromYText = (text, schema, mapping, snapshot, prevSnapshot) => {
+  const nodes = []
+  const deltas = text.toDelta(snapshot, prevSnapshot)
+  try {
+    for (let i = 0; i < deltas.length; i++) {
+      const delta = deltas[i]
+      const marks = []
+      for (let markName in delta.attributes) {
+        marks.push(schema.mark(markName, delta.attributes[markName]))
+      }
+      nodes.push(schema.text(delta.insert, marks))
+    }
+    if (nodes.length > 0) {
+      mapping.set(text, nodes[0]) // only map to first child, all following children are also considered bound to this type
+    }
+  } catch (e) {
+    /*
+    text._y.transact(() => {
+      text._delete(text._y, true)
+    })
+    */
+    return null
+  }
+  return nodes
+}
+
+/**
+ * @private
+ * @param {PModel.Node} node
+ * @param {ProsemirrorMapping} mapping
+ * @return {YXmlElement | YText}
+ */
+export const createTypeFromNode = (node, mapping) => {
+  let type
+  if (node.isText) {
+    type = new YText()
+    const attrs = {}
+    node.marks.forEach(mark => {
+      if (mark.type.name !== 'ychange') {
+        attrs[mark.type.name] = mark.attrs
+      }
+    })
+    type.insert(0, node.text, attrs)
+  } else {
+    type = new YXmlElement(node.type.name)
+    for (let key in node.attrs) {
+      const val = node.attrs[key]
+      if (val !== null && key !== 'ychange') {
+        type.setAttribute(key, val)
+      }
+    }
+    const ins = []
+    for (let i = 0; i < node.childCount; i++) {
+      ins.push(createTypeFromNode(node.child(i), mapping))
+    }
+    type.insert(0, ins)
+  }
+  mapping.set(type, node)
+  return type
+}
+
+const equalAttrs = (pattrs, yattrs) => {
+  const keys = Object.keys(pattrs).filter(key => pattrs[key] === null)
+  let eq = keys.length === Object.keys(yattrs).filter(key => yattrs[key] === null).length
+  for (let i = 0; i < keys.length && eq; i++) {
+    const key = keys[i]
+    const l = pattrs[key]
+    const r = yattrs[key]
+    eq = key === 'ychange' || l === r || (typeof l === 'object' && typeof r === 'object' && equalAttrs(l, r))
+  }
+  return eq
+}
+
+const equalYTextPText = (ytext, ptext) => {
+  const d = ytext.toDelta()[0]
+  return d.insert === ptext.text && object.keys(d.attributes || {}).length === ptext.marks.length && ptext.marks.every(mark => equalAttrs(d.attributes[mark.type.name], mark.attrs))
+}
+
+const equalYTypePNode = (ytype, pnode) =>
+  ytype.constructor === YText
+    ? equalYTextPText(ytype, pnode)
+    : (matchNodeName(ytype, pnode) && ytype.length === pnode.childCount && equalAttrs(ytype.getAttributes(), pnode.attrs) && ytype.toArray().every((ychild, i) => equalYTypePNode(ychild, pnode.child(i))))
+
+const computeChildEqualityFactor = (ytype, pnode, mapping) => {
+  const yChildren = ytype.toArray()
+  const pChildCnt = pnode.childCount
+  const yChildCnt = yChildren.length
+  const minCnt = math.min(yChildCnt, pChildCnt)
+  let left = 0
+  let right = 0
+  let foundMappedChild = false
+  for (; left < minCnt; left++) {
+    const leftY = yChildren[left]
+    const leftP = pnode.child(left)
+    if (mapping.get(leftY) === leftP) {
+      foundMappedChild = true// definite (good) match!
+    } else if (!equalYTypePNode(leftY, leftP)) {
+      break
+    }
+  }
+  for (; left + right < minCnt; right++) {
+    const rightY = yChildren[yChildCnt - right - 1]
+    const rightP = pnode.child(pChildCnt - right - 1)
+    if (mapping.get(rightY) !== rightP) {
+      foundMappedChild = true
+    } else if (!equalYTypePNode(rightP, rightP)) {
+      break
+    }
+  }
+  return {
+    equalityFactor: left + right,
+    foundMappedChild
+  }
+}
+
+/**
+ * @private
+ * @param {YXmlFragment} yDomFragment
+ * @param {PModel.Node} pContent
+ * @param {ProsemirrorMapping} mapping
+ */
+const updateYFragment = (yDomFragment, pContent, mapping) => {
+  if (yDomFragment instanceof YXmlElement && yDomFragment.nodeName.toLowerCase() !== pContent.type.name) {
+    throw new Error('node name mismatch!')
+  }
+  mapping.set(yDomFragment, pContent)
+  // update attributes
+  if (yDomFragment instanceof YXmlElement) {
+    const yDomAttrs = yDomFragment.getAttributes()
+    const pAttrs = pContent.attrs
+    for (let key in pAttrs) {
+      if (pAttrs[key] !== null) {
+        if (yDomAttrs[key] !== pAttrs[key] && key !== 'ychange') {
+          yDomFragment.setAttribute(key, pAttrs[key])
+        }
+      } else {
+        yDomFragment.removeAttribute(key)
+      }
+    }
+    // remove all keys that are no longer in pAttrs
+    for (let key in yDomAttrs) {
+      if (pAttrs[key] === undefined) {
+        yDomFragment.removeAttribute(key)
+      }
+    }
+  }
+  // update children
+  const pChildCnt = pContent.childCount
+  const yChildren = yDomFragment.toArray()
+  const yChildCnt = yChildren.length
+  const minCnt = math.min(pChildCnt, yChildCnt)
+  let left = 0
+  let right = 0
+  // find number of matching elements from left
+  for (;left < minCnt; left++) {
+    const leftY = yChildren[left]
+    const leftP = pContent.child(left)
+    if (mapping.get(leftY) !== leftP) {
+      if (equalYTypePNode(leftY, leftP)) {
+        // update mapping
+        mapping.set(leftY, leftP)
+      } else {
+        break
+      }
+    }
+  }
+  // find number of matching elements from right
+  for (;right + left < minCnt; right++) {
+    const rightY = yChildren[yChildCnt - right - 1]
+    const rightP = pContent.child(pChildCnt - right - 1)
+    if (mapping.get(rightY) !== rightP) {
+      if (equalYTypePNode(rightY, rightP)) {
+        // update mapping
+        mapping.set(rightY, rightP)
+      } else {
+        break
+      }
+    }
+  }
+  yDomFragment._y.transact(() => {
+    // try to compare and update
+    while (yChildCnt - left - right > 0 && pChildCnt - left - right > 0) {
+      const leftY = yChildren[left]
+      const leftP = pContent.child(left)
+      const rightY = yChildren[yChildCnt - right - 1]
+      const rightP = pContent.child(pChildCnt - right - 1)
+      if (leftY.constructor === YText && leftP.isText) {
+        if (!equalYTextPText(leftY, leftP)) {
+          // try to apply diff. Only if attrs don't match, delete insert
+          // TODO: use a single ytext to hold all following Prosemirror Text nodes
+          const pattrs = {}
+          leftP.marks.forEach(mark => {
+            if (mark.type.name !== 'ychange') {
+              pattrs[mark.type.name] = mark.attrs
+            }
+          })
+          const delta = leftY.toDelta()
+          if (delta.length === 1 && delta[0].insert && equalAttrs(pattrs, delta[0].attributes || {})) {
+            const diff = simpleDiff(delta[0].insert, leftP.text)
+            leftY.delete(diff.pos, diff.remove)
+            leftY.insert(diff.pos, diff.insert)
+          } else {
+            yDomFragment.delete(left, 1)
+            yDomFragment.insert(left, [createTypeFromNode(leftP, mapping)])
+          }
+        }
+        left += 1
+      } else {
+        let updateLeft = matchNodeName(leftY, leftP)
+        let updateRight = matchNodeName(rightY, rightP)
+        if (updateLeft && updateRight) {
+          // decide which which element to update
+          const equalityLeft = computeChildEqualityFactor(leftY, leftP, mapping)
+          const equalityRight = computeChildEqualityFactor(rightY, rightP, mapping)
+          if (equalityLeft.foundMappedChild && !equalityRight.foundMappedChild) {
+            updateRight = false
+          } else if (!equalityLeft.foundMappedChild && equalityRight.foundMappedChild) {
+            updateLeft = false
+          } else if (equalityLeft.equalityFactor < equalityRight.equalityFactor) {
+            updateLeft = false
+          } else {
+            updateRight = false
+          }
+        }
+        if (updateLeft) {
+          updateYFragment(leftY, leftP, mapping)
+          left += 1
+        } else if (updateRight) {
+          updateYFragment(rightY, rightP, mapping)
+          right += 1
+        } else {
+          yDomFragment.delete(left, 1)
+          yDomFragment.insert(left, [createTypeFromNode(leftP, mapping)])
+          left += 1
+        }
+      }
+    }
+    const yDelLen = yChildCnt - left - right
+    if (yDelLen > 0) {
+      yDomFragment.delete(left, yDelLen)
+    }
+    if (left + right < pChildCnt) {
+      const ins = []
+      for (let i = left; i < pChildCnt - right; i++) {
+        ins.push(createTypeFromNode(pContent.child(i), mapping))
+      }
+      yDomFragment.insert(left, ins)
+    }
+  })
+}
+
+/**
+ * @function
+ * @param {YXmlElement} yElement
+ * @param {any} pNode Prosemirror Node
+ */
+const matchNodeName = (yElement, pNode) => yElement.nodeName === pNode.type.name.toUpperCase()

bindings/quill.js

@@ -0,0 +1,71 @@
+/**
+ * @module bindings/quill
+ */
+
+import { createMutex } from '../lib/mutex.js'
+
+const typeObserver = function (event) {
+  const quill = this.target
+  // Force flush Quill changes.
+  quill.update('yjs')
+  this._mutualExclude(() => {
+    // Apply computed delta.
+    quill.updateContents(event.delta, 'yjs')
+    // Force flush Quill changes. Ignore applied changes.
+    quill.update('yjs')
+  })
+}
+
+const quillObserver = function (delta) {
+  this._mutualExclude(() => {
+    this.type.applyDelta(delta.ops)
+  })
+}
+
+/**
+ * A Binding that binds a YText type to a Quill editor.
+ *
+ * @example
+ * const quill = new Quill(document.createElement('div'))
+ * const type = y.define('quill', Y.Text)
+ * const binding = new Y.QuillBinding(quill, type)
+ * // Now modifications on the DOM will be reflected in the Type, and the other
+ * // way around!
+ */
+export class QuillBinding {
+  /**
+   * @param {YText} textType
+   * @param {Quill} quill
+   */
+  constructor (textType, quill) {
+    // Binding handles textType as this.type and quill as this.target.
+    /**
+     * The Yjs type that is bound to `target`
+     * @type {YText}
+     */
+    this.type = textType
+    /**
+     * The target that `type` is bound to.
+     * @type {Quill}
+     */
+    this.target = quill
+    /**
+     * @private
+     */
+    this._mutualExclude = createMutex()
+    // Set initial value.
+    quill.setContents(textType.toDelta(), 'yjs')
+    // Observers are handled by this class.
+    this._typeObserver = typeObserver.bind(this)
+    this._quillObserver = quillObserver.bind(this)
+    textType.observe(this._typeObserver)
+    quill.on('text-change', this._quillObserver)
+  }
+  destroy () {
+    // Remove everything that is handled by this class.
+    this.type.unobserve(this._typeObserver)
+    this.target.off('text-change', this._quillObserver)
+    this.type = null
+    this.target = null
+  }
+}

bindings/textarea.js

@@ -0,0 +1,72 @@
+/**
+ * @module bindings/textarea
+ */
+
+import { simpleDiff } from '../lib/diff.js'
+import { getRelativePosition, fromRelativePosition } from '../utils/relativePosition.js'
+import { createMutex } from '../lib/mutex.js'
+
+function typeObserver () {
+  this._mutualExclude(() => {
+    const textarea = this.target
+    const textType = this.type
+    const relativeStart = getRelativePosition(textType, textarea.selectionStart)
+    const relativeEnd = getRelativePosition(textType, textarea.selectionEnd)
+    textarea.value = textType.toString()
+    const start = fromRelativePosition(textType._y, relativeStart)
+    const end = fromRelativePosition(textType._y, relativeEnd)
+    textarea.setSelectionRange(start, end)
+  })
+}
+
+function domObserver () {
+  this._mutualExclude(() => {
+    let diff = simpleDiff(this.type.toString(), this.target.value)
+    this.type.delete(diff.pos, diff.remove)
+    this.type.insert(diff.pos, diff.insert)
+  })
+}
+
+/**
+ * A binding that binds a YText to a dom textarea.
+ *
+ * This binding is automatically destroyed when its parent is deleted.
+ *
+ * @example
+ *   const textare = document.createElement('textarea')
+ *   const type = y.define('textarea', Y.Text)
+ *   const binding = new Y.QuillBinding(type, textarea)
+ *
+ */
+export class TextareaBinding {
+  constructor (textType, domTextarea) {
+    /**
+     * The Yjs type that is bound to `target`
+     * @type {Type}
+     */
+    this.type = textType
+    /**
+     * The target that `type` is bound to.
+     * @type {*}
+     */
+    this.target = domTextarea
+    /**
+     * @private
+     */
+    this._mutualExclude = createMutex()
+    // set initial value
+    domTextarea.value = textType.toString()
+    // Observers are handled by this class
+    this._typeObserver = typeObserver.bind(this)
+    this._domObserver = domObserver.bind(this)
+    textType.observe(this._typeObserver)
+    domTextarea.addEventListener('input', this._domObserver)
+  }
+  destroy () {
+    // Remove everything that is handled by this class
+    this.type.unobserve(this._typeObserver)
+    this.target.unobserve(this._domObserver)
+    this.type = null
+    this.target = null
+  }
+}

examples/.gitignore

@@ -0,0 +1 @@
+build

examples/ace/index.js

@@ -1,24 +0,0 @@
-/* global Y, ace */
-
-Y({
-  db: {
-    name: 'memory'
-  },
-  connector: {
-    name: 'websockets-client',
-    room: 'ace-example'
-  },
-  sourceDir: '/bower_components',
-  share: {
-    ace: 'Text' // y.share.textarea is of type Y.Text
-  }
-}).then(function (y) {
-  window.yAce = y
-
-  // bind the textarea to a shared text element
-  var editor = ace.edit('aceContainer')
-  editor.setTheme('ace/theme/chrome')
-  editor.getSession().setMode('ace/mode/javascript')
-
-  y.share.ace.bindAce(editor)
-})

examples/bower.json

@@ -1,19 +0,0 @@
-{
-  "name": "yjs-examples",
-  "version": "0.0.0",
-  "homepage": "y-js.org",
-  "authors": [
-    "Kevin Jahns <kevin.jahns@rwth-aachen.de>"
-  ],
-  "description": "Examples for Yjs",
-  "license": "MIT",
-  "ignore": [],
-  "dependencies": {
-    "quill": "^1.0.0-rc.2",
-    "ace": "~1.2.3",
-    "ace-builds": "~1.2.3",
-    "jquery": "~2.2.2",
-    "d3": "^3.5.16",
-    "codemirror": "^5.25.0"
-  }
-}

examples/chat/index.js

@@ -1,73 +0,0 @@
-/* global Y, chat */
-
-// initialize a shared object. This function call returns a promise!
-Y({
-  db: {
-    name: 'memory'
-  },
-  connector: {
-    name: 'websockets-client',
-    room: 'chat-example'
-  },
-  sourceDir: '/bower_components',
-  share: {
-    chat: 'Array'
-  }
-}).then(function (y) {
-  window.yChat = y
-  // This functions inserts a message at the specified position in the DOM
-  function appendMessage (message, position) {
-    var p = document.createElement('p')
-    var uname = document.createElement('span')
-    uname.appendChild(document.createTextNode(message.username + ': '))
-    p.appendChild(uname)
-    p.appendChild(document.createTextNode(message.message))
-    document.querySelector('#chat').insertBefore(p, chat.children[position] || null)
-  }
-  // This function makes sure that only 7 messages exist in the chat history.
-  // The rest is deleted
-  function cleanupChat () {
-    if (y.share.chat.length > 7) {
-      y.share.chat.delete(0, y.chat.length - 7)
-    }
-  }
-  // Insert the initial content
-  y.share.chat.toArray().forEach(appendMessage)
-  cleanupChat()
-
-  // whenever content changes, make sure to reflect the changes in the DOM
-  y.share.chat.observe(function (event) {
-    if (event.type === 'insert') {
-      for (let i = 0; i < event.length; i++) {
-        appendMessage(event.values[i], event.index + i)
-      }
-    } else if (event.type === 'delete') {
-      for (let i = 0; i < event.length; i++) {
-        chat.children[event.index].remove()
-      }
-    }
-    // concurrent insertions may result in a history > 7, so cleanup here
-    cleanupChat()
-  })
-  document.querySelector('#chatform').onsubmit = function (event) {
-    // the form is submitted
-    var message = {
-      username: this.querySelector('[name=username]').value,
-      message: this.querySelector('[name=message]').value
-    }
-    if (message.username.length > 0 && message.message.length > 0) {
-      if (y.share.chat.length > 6) {
-        // If we are goint to insert the 8th element, make sure to delete first.
-        y.share.chat.delete(0)
-      }
-      // Here we insert a message in the shared chat type.
-      // This will call the observe function (see line 40)
-      // and reflect the change in the DOM
-      y.share.chat.push([message])
-      this.querySelector('[name=message]').value = ''
-    }
-    // Do not send this form!
-    event.preventDefault()
-    return false
-  }
-})

examples/codemirror.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Yjs CodeMirror Example</title>
+    <link rel=stylesheet href="https://codemirror.net/lib/codemirror.css">
+    <style>
+      #container {
+        border: grey;
+        border-style: solid;
+        border-width: thin;
+      }
+    </style>
+  </head>
+<body>
+  <p>This example shows how to bind a YText type to <a href="https://codemirror.net/">CodeMirror</a> editor.</p>
+  <p>The content of this editor is shared with every client who visits this domain.</p>
+  <div class="code-html">
+<style>
+.remote-caret {
+  position: absolute;
+  border-left: black;
+  border-left-style: solid;
+  border-left-width: 2px;
+  height: 1em;
+}
+.remote-caret > div {
+  position: relative;
+  top: -1.05em;
+  font-size: 13px;
+  background-color: rgb(250, 129, 0);
+  font-family: serif;
+  font-style: normal;
+  font-weight: normal;
+  line-height: normal;
+  user-select: none;
+  color: white;
+  padding-left: 2px;
+  padding-right: 2px;
+}
+</style>
+<div id="container"></div>
+  </div>
+  <!-- The actual source file for the following code is found in ./codemirror.js. Run `npm run watch` to compile the files -->
+  <script class="code-js" src="./build/codemirror.js">
+import * as Y from 'yjs'
+import { WebsocketProvider } from 'yjs/provider/websocket.js'
+import { CodeMirrorBinding } from 'yjs/bindings/codemirror.js'
+
+import * as conf from './exampleConfig.js'
+
+import CodeMirror from 'codemirror'
+import 'codemirror/mode/javascript/javascript.js'
+
+const provider = new WebsocketProvider(conf.serverAddress)
+const ydocument = provider.get('codemirror')
+const ytext = ydocument.define('codemirror', Y.Text)
+
+const editor = new CodeMirror(document.querySelector('#container'), {
+    mode: 'javascript',
+    lineNumbers: true
+})
+
+const binding = new CodeMirrorBinding(ytext, editor)
+
+window.codemirrorExample = {
+  binding, editor, ytext, ydocument
+}
+  </script>
+</body>
+</html>

examples/codemirror.js

@@ -0,0 +1,23 @@
+import * as Y from '../index.js'
+import { WebsocketProvider } from '../provider/websocket.js'
+import { CodeMirrorBinding } from '../bindings/codemirror.js'
+
+import * as conf from './exampleConfig.js'
+
+import CodeMirror from 'codemirror'
+import 'codemirror/mode/javascript/javascript.js'
+
+const provider = new WebsocketProvider(conf.serverAddress)
+const ydocument = provider.get('codemirror')
+const ytext = ydocument.define('codemirror', Y.Text)
+
+const editor = new CodeMirror(document.querySelector('#container'), {
+  mode: 'javascript',
+  lineNumbers: true
+})
+
+const binding = new CodeMirrorBinding(ytext, editor)
+
+window.codemirrorExample = {
+  binding, editor, ytext, ydocument
+}

examples/codemirror/index.js

@@ -1,24 +0,0 @@
-/* global Y, CodeMirror */
-
-// initialize a shared object. This function call returns a promise!
-Y({
-  db: {
-    name: 'memory'
-  },
-  connector: {
-    name: 'websockets-client',
-    room: 'codemirror-example'
-  },
-  sourceDir: '/bower_components',
-  share: {
-    codemirror: 'Text' // y.share.codemirror is of type Y.Text
-  }
-}).then(function (y) {
-  window.yCodeMirror = y
-
-  var editor = CodeMirror(document.querySelector('#codeMirrorContainer'), {
-    mode: 'javascript',
-    lineNumbers: true
-  })
-  y.share.codemirror.bindCodeMirror(editor)
-})

examples/dom.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Yjs Prosemirror Example</title>
+    <link rel=stylesheet href="https://prosemirror.net/css/editor.css">
+    <style>
+      #content {
+        min-height: 500px;
+      }
+    </style>
+</head>
+<body>
+  <p>This example shows how to bind a YXmlFragment type to an arbitrary DOM element. We set the DOM element to contenteditable so it basically behaves like a very powerful rich-text editor.</p>
+  <p>The content of this editor is shared with every client who visits this domain.</p>
+  <hr>
+  <div class="code-html">
+
+<div id="content" contenteditable=""></div>
+  </div>
+  <!-- The actual source file for the following code is found in ./dom.js. Run `npm run watch` to compile the files -->
+  <script class="code-js" src="./build/dom.js">
+    import * as Y from 'yjs/index.js'
+    import { WebsocketProvider } from 'yjs/provider/websocket.js'
+    import { DomBinding } from 'yjs/bindings/dom.js'
+    import * as conf from './exampleConfig.js'
+
+    const provider = new WebsocketProvider(conf.serverAddress)
+    const ydocument = provider.get('dom')
+    const type = ydocument.define('xml', Y.XmlFragment)
+    const binding = new DomBinding(type, document.querySelector('#content'), { scrollingElement: document.scrollingElement })
+
+    window.example = {
+      provider, ydocument, type, binding
+    }
+  </script>
+</body>
+</html>

examples/dom.js

@@ -0,0 +1,13 @@
+import * as Y from '../index.js'
+import { WebsocketProvider } from '../provider/websocket.js'
+import { DomBinding } from '../bindings/dom.js'
+import * as conf from './exampleConfig.js'
+
+const provider = new WebsocketProvider(conf.serverAddress)
+const ydocument = provider.get('dom')
+const type = ydocument.define('xml', Y.XmlFragment)
+const binding = new DomBinding(type, document.querySelector('#content'), { scrollingElement: document.scrollingElement })
+
+window.example = {
+  provider, ydocument, type, binding
+}

examples/drawing/index.js

@@ -1,84 +0,0 @@
-/* globals Y, d3 */
-'strict mode'
-
-Y({
-  db: {
-    name: 'memory'
-  },
-  connector: {
-    name: 'websockets-client',
-    room: 'drawing-example',
-    url: 'localhost:1234'
-  },
-  sourceDir: '/bower_components',
-  share: {
-    drawing: 'Array'
-  }
-}).then(function (y) {
-  window.yDrawing = y
-  var drawing = y.share.drawing
-  var renderPath = d3.svg.line()
-    .x(function (d) { return d[0] })
-    .y(function (d) { return d[1] })
-    .interpolate('basis')
-
-  var svg = d3.select('#drawingCanvas')
-    .call(d3.behavior.drag()
-      .on('dragstart', dragstart)
-      .on('drag', drag)
-      .on('dragend', dragend))
-
-  // create line from a shared array object and update the line when the array changes
-  function drawLine (yarray) {
-    var line = svg.append('path').datum(yarray.toArray())
-    line.attr('d', renderPath)
-    yarray.observe(function (event) {
-      // we only implement insert events that are appended to the end of the array
-      event.values.forEach(function (value) {
-        line.datum().push(value)
-      })
-      line.attr('d', renderPath)
-    })
-  }
-  // call drawLine every time an array is appended
-  y.share.drawing.observe(function (event) {
-    if (event.type === 'insert') {
-      event.values.forEach(drawLine)
-    } else {
-      // just remove all elements (thats what we do anyway)
-      svg.selectAll('path').remove()
-    }
-  })
-  // draw all existing content
-  for (var i = 0; i < drawing.length; i++) {
-    drawLine(drawing.get(i))
-  }
-
-  // clear canvas on request
-  document.querySelector('#clearDrawingCanvas').onclick = function () {
-    drawing.delete(0, drawing.length)
-  }
-
-  var sharedLine = null
-  function dragstart () {
-    drawing.insert(drawing.length, [Y.Array])
-    sharedLine = drawing.get(drawing.length - 1)
-  }
-
-  // After one dragged event is recognized, we ignore them for 33ms.
-  var ignoreDrag = null
-  function drag () {
-    if (sharedLine != null && ignoreDrag == null) {
-      ignoreDrag = window.setTimeout(function () {
-        ignoreDrag = null
-      }, 33)
-      sharedLine.push([d3.mouse(this)])
-    }
-  }
-
-  function dragend () {
-    sharedLine = null
-    window.clearTimeout(ignoreDrag)
-    ignoreDrag = null
-  }
-})

examples/exampleConfig.js

@@ -0,0 +1,9 @@
+/* eslint-env browser */
+
+const isDeployed = location.hostname === 'yjs.website'
+
+if (!isDeployed) {
+  console.log('%cYjs: Start your local websocket server by running %c`npm run websocket-server`', 'color:blue', 'color: grey; font-weight: bold')
+}
+
+export const serverAddress = isDeployed ? 'wss://api.yjs.website' : 'ws://localhost:1234'

examples/examples.json

@@ -0,0 +1,17 @@
+{
+  "codemirror": {
+    "title": "CodeMirror Binding"
+  },
+  "prosemirror": {
+    "title": "ProseMirror Binding"
+  },
+  "textarea": {
+    "title": "Textarea Binding"
+  },
+  "quill": {
+    "title": "Quill Binding"
+  },
+  "dom": {
+    "title": "Dom Binding"
+  }
+}

examples/html-editor/index.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html>
-</head>
-  <!-- jquery is not required for y-xml. It is just here for convenience, and to test batch operations. -->
-  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
-  <script src="../yjs-dist.js"></script>
-  <script src="./index.js"></script>
-</head>
-<body contenteditable="true">
-</body>
-</html>

examples/html-editor/index.js

@@ -1,21 +0,0 @@
-/* global Y */
-
-// initialize a shared object. This function call returns a promise!
-Y({
-  db: {
-    name: 'memory'
-  },
-  connector: {
-    name: 'websockets-client',
-    // url: 'http://127.0.0.1:1234',
-    url: 'http://192.168.178.81:1234',
-    room: 'html-editor-example6'
-  },
-  share: {
-    xml: 'XmlFragment()' // y.share.xml is of type Y.Xml with tagname "p"
-  }
-}).then(function (y) {
-  window.yXml = y
-  // Bind children of XmlFragment to the document.body
-  window.yXml.share.xml.bindToDom(document.body)
-})

examples/infiniteyjs/index.html

@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html>
-<body>
-  <style>
-    .wrapper {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      grid-gap: 7px;
-    }
-    .one {
-      grid-column: 1 ;
-    }
-    .two { 
-      grid-column: 2;
-    }
-    .three {
-      grid-column: 3;
-    }
-    textarea {
-      width: calc(100% - 10px)
-    }
-    .editor-container {
-      background-color: #4caf50;
-      padding: 4px 5px 10px 5px;
-      border-radius: 11px;
-    }
-    .editor-container[disconnected] {
-      background-color: red;
-    }
-    .disconnected-info {
-      display: none;
-    }
-    .editor-container[disconnected] .disconnected-info {
-      display: inline;
-    }
-  </style>
-  <div class="wrapper">
-    <div id="container1" class="one editor-container">
-      <h1>Server 1 <span class="disconnected-info">(disconnected)</span></h1>
-      <textarea id="textarea1" rows=40 autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
-    </div>
-    <div id="container2" class="two editor-container">
-      <h1>Server 2 <span class="disconnected-info">(disconnected)</span></h1>
-      <textarea id="textarea2" rows=40 autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
-    </div>
-    <div id="container3" class="three editor-container">
-      <h1>Server 3 <span class="disconnected-info">(disconnected)</span></h1>
-      <textarea id="textarea3" rows=40 autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
-    </div>
-  </div>
-  <script src="../../y.js"></script>
-  <script src="../../../y-array/y-array.js"></script>
-  <script src="../../../y-text/dist/y-text.js"></script>
-  <script src="../../../y-memory/y-memory.js"></script>
-  <script src="../../../y-websockets-client/y-websockets-client.js"></script>
-  <script src="./index.js"></script>
-</body>
-</html>

examples/infiniteyjs/index.js

@@ -1,64 +0,0 @@
-/* global Y */
-
-Y({
-  db: {
-    name: 'memory'
-  },
-  connector: {
-    name: 'websockets-client',
-    room: 'Textarea-example',
-    url: 'https://yjs-v13.herokuapp.com/'
-  },
-  share: {
-    textarea: 'Text'
-  }
-}).then(function (y) {
-  window.y1 = y
-  y.share.textarea.bind(document.getElementById('textarea1'))
-})
-
-Y({
-  db: {
-    name: 'memory'
-  },
-  connector: {
-    name: 'websockets-client',
-    room: 'Textarea-example',
-    url: 'https://yjs-v13-second.herokuapp.com/'
-  },
-  share: {
-    textarea: 'Text'
-  }
-}).then(function (y) {
-  window.y2 = y
-  y.share.textarea.bind(document.getElementById('textarea2'))
-  y.connector.socket.on('connection', function () {
-    document.getElementById('container2').removeAttribute('disconnected')
-  })
-  y.connector.socket.on('disconnect', function () {
-    document.getElementById('container2').setAttribute('disconnected', true)
-  })
-})
-
-Y({
-  db: {
-    name: 'memory'
-  },
-  connector: {
-    name: 'websockets-client',
-    room: 'Textarea-example',
-    url: 'https://yjs-v13-third.herokuapp.com/'
-  },
-  share: {
-    textarea: 'Text'
-  }
-}).then(function (y) {
-  window.y3 = y
-  y.share.textarea.bind(document.getElementById('textarea3'))
-  y.connector.socket.on('connection', function () {
-    document.getElementById('container3').removeAttribute('disconnected')
-  })
-  y.connector.socket.on('disconnect', function () {
-    document.getElementById('container3').setAttribute('disconnected', true)
-  })
-})

examples/jigsaw/index.js

@@ -1,74 +0,0 @@
-/* @flow */
-/* global Y, d3 */
-
-// initialize a shared object. This function call returns a promise!
-Y({
-  db: {
-    name: 'memory'
-  },
-  connector: {
-    name: 'websockets-client',
-    room: 'Puzzle-example',
-    url: 'http://localhost:1234'
-  },
-  share: {
-    piece1: 'Map',
-    piece2: 'Map',
-    piece3: 'Map',
-    piece4: 'Map'
-  }
-}).then(function (y) {
-  window.yJigsaw = y
-  var origin // mouse start position - translation of piece
-  var drag = d3.behavior.drag()
-    .on('dragstart', function (params) {
-      // get the translation of the element
-      var translation = d3
-        .select(this)
-        .attr('transform')
-        .slice(10, -1)
-        .split(',')
-        .map(Number)
-      // mouse coordinates
-      var mouse = d3.mouse(this.parentNode)
-      origin = {
-        x: mouse[0] - translation[0],
-        y: mouse[1] - translation[1]
-      }
-    })
-    .on('drag', function () {
-      var mouse = d3.mouse(this.parentNode)
-      var x = mouse[0] - origin.x // =^= mouse - mouse at dragstart + translation at dragstart
-      var y = mouse[1] - origin.y
-      d3.select(this).attr('transform', 'translate(' + x + ',' + y + ')')
-    })
-    .on('dragend', function (piece, i) {
-      // save the current translation of the puzzle piece
-      var mouse = d3.mouse(this.parentNode)
-      var x = mouse[0] - origin.x
-      var y = mouse[1] - origin.y
-      piece.set('translation', {x: x, y: y})
-    })
-
-  var data = [y.share.piece1, y.share.piece2, y.share.piece3, y.share.piece4]
-  var pieces = d3.select(document.querySelector('#puzzle-example')).selectAll('path').data(data)
-
-  pieces
-    .classed('draggable', true)
-    .attr('transform', function (piece) {
-      var translation = piece.get('translation') || {x: 0, y: 0}
-      return 'translate(' + translation.x + ',' + translation.y + ')'
-    }).call(drag)
-
-  data.forEach(function (piece) {
-    piece.observe(function () {
-      // whenever a property of a piece changes, update the translation of the pieces
-      pieces
-        .transition()
-        .attr('transform', function (piece) {
-          var translation = piece.get('translation') || {x: 0, y: 0}
-          return 'translate(' + translation.x + ',' + translation.y + ')'
-        })
-    })
-  })
-})

examples/monaco/index.js

@@ -1,30 +0,0 @@
-/* global Y, monaco */
-
-require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' } })
-
-require(['vs/editor/editor.main'], function () {
-  // Initialize a shared object. This function call returns a promise!
-  Y({
-    db: {
-      name: 'memory'
-    },
-    connector: {
-      name: 'websockets-client',
-      room: 'monaco-example'
-    },
-    sourceDir: '/bower_components',
-    share: {
-      monaco: 'Text' // y.share.monaco is of type Y.Text
-    }
-  }).then(function (y) {
-    window.yMonaco = y
-
-    // Create Monaco editor
-    var editor = monaco.editor.create(document.getElementById('monacoContainer'), {
-      language: 'javascript'
-    })
-
-    // Bind to y.share.monaco
-    y.share.monaco.bindMonaco(editor)
-  })
-})

examples/package.json

@@ -1,20 +0,0 @@
-{
-  "name": "examples",
-  "version": "0.0.0",
-  "description": "",
-  "scripts": {
-    "dist": "rollup -c",
-    "watch": "rollup -cw"
-  },
-  "author": "Kevin Jahns",
-  "license": "MIT",
-  "dependencies": {
-    "monaco-editor": "^0.8.3"
-  },
-  "devDependencies": {
-    "standard": "^10.0.2"
-  },
-  "standard": {
-    "ignore": ["bower_components"]
-  }
-}

examples/prosemirror-history.js

@@ -0,0 +1,159 @@
+
+import {Plugin} from 'prosemirror-state'
+import crel from 'crel'
+import * as Y from '../index.js'
+import { prosemirrorPluginKey } from '../bindings/prosemirror.js'
+import * as encoding from '../lib/encoding.js'
+import * as decoding from '../lib/decoding.js'
+import * as historyProtocol from '../protocols/history.js'
+
+const niceColors = ['#3cb44b', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#008080', '#9a6324', '#800000', '#808000', '#000075', '#808080']
+
+const createUserCSS = (userid, username, color = 'rgb(250, 129, 0)', color2 = 'rgba(250, 129, 0, .41)') => `
+  [ychange_state][ychange_user="${userid}"]:hover::before {
+    content: "${username}" !important;
+    background-color: ${color} !important;
+  }
+  [ychange_state="added"][ychange_user="${userid}"] {
+    background-color: ${color2} !important;
+  }
+  [ychange_state="removed"][ychange_user="${userid}"] {
+    color: ${color} !important;
+  }
+`
+
+export const noteHistoryPlugin = new Plugin({
+  state: {
+    init (initargs, state) {
+      return new NoteHistoryPlugin()
+    },
+    apply (tr, pluginState) {
+      return pluginState
+    }
+  },
+  view (editorView) {
+    const hstate = noteHistoryPlugin.getState(editorView.state)
+    hstate.init(editorView)
+    return {
+      destroy: hstate.destroy.bind(hstate)
+    }
+  }
+})
+
+const createWrapper = () => {
+  const wrapper = crel('div', { style: 'display: flex;' })
+  const historyContainer = crel('div', { style: 'align-self: baseline; flex-basis: 250px;', class: 'shared-history' })
+  wrapper.insertBefore(historyContainer, null)
+  const userStyleContainer = crel('style')
+  wrapper.insertBefore(userStyleContainer, null)
+  return { wrapper, historyContainer, userStyleContainer }
+}
+
+class NoteHistoryPlugin {
+  init (editorView) {
+    this.editorView = editorView
+    const { historyContainer, wrapper, userStyleContainer } = createWrapper()
+    this.userStyleContainer = userStyleContainer
+    this.wrapper = wrapper
+    this.historyContainer = historyContainer
+    const n = editorView.dom.parentNode.parentNode
+    n.parentNode.replaceChild(this.wrapper, n)
+    n.style['flex-grow'] = '1'
+    wrapper.insertBefore(n, this.wrapper.firstChild)
+    this.render()
+    const y = prosemirrorPluginKey.getState(this.editorView.state).y
+    const history = y.define('history', Y.Array)
+    history.observe(this.render.bind(this))
+  }
+  destroy () {
+    this.wrapper.parentNode.replaceChild(this.wrapper.firstChild, this.wrapper)
+    const y = prosemirrorPluginKey.getState(this.editorView.state).y
+    const history = y.define('history', Y.Array)
+    history.unobserve(this.render)
+  }
+  render () {
+    const y = prosemirrorPluginKey.getState(this.editorView.state).y
+    const history = y.define('history', Y.Array).toArray()
+    const fragment = document.createDocumentFragment()
+    const snapshotBtn = crel('button', { type: 'button' }, ['snapshot'])
+    fragment.insertBefore(snapshotBtn, null)
+    let _prevSnap = null // empty
+    snapshotBtn.addEventListener('click', () => {
+      const awareness = y.getAwarenessInfo()
+      const userMap = new Map()
+      const aw = y.getLocalAwarenessInfo()
+      userMap.set(y.userID, aw.name || 'unknown')
+      awareness.forEach((a, userID) => {
+        userMap.set(userID, a.name || 'Unknown')
+      })
+      this.snapshot(userMap)
+    })
+    history.forEach(buf => {
+      const decoder = decoding.createDecoder(buf)
+      const snapshot = historyProtocol.readHistorySnapshot(decoder)
+      const date = new Date(decoding.readUint32(decoder) * 1000)
+      const restoreBtn = crel('button', { type: 'button' }, ['restore'])
+      const a = crel('a', [
+        '• ' + date.toUTCString(), restoreBtn
+      ])
+      const el = crel('div', [ a ])
+      let prevSnapshot = _prevSnap // rebind to new variable
+      restoreBtn.addEventListener('click', event => {
+        if (prevSnapshot === null) {
+          prevSnapshot = { ds: snapshot.ds, sm: new Map() }
+        }
+        this.editorView.dispatch(this.editorView.state.tr.setMeta(prosemirrorPluginKey, { snapshot, prevSnapshot, restore: true }))
+        event.stopPropagation()
+      })
+      a.addEventListener('click', () => {
+        console.log('setting snapshot')
+        if (prevSnapshot === null) {
+          prevSnapshot = { ds: snapshot.ds, sm: new Map() }
+        }
+        this.renderSnapshot(snapshot, prevSnapshot)
+      })
+      fragment.insertBefore(el, null)
+      _prevSnap = snapshot
+    })
+    this.historyContainer.innerHTML = ''
+    this.historyContainer.insertBefore(fragment, null)
+  }
+  renderSnapshot (snapshot, prevSnapshot) {
+    this.editorView.dispatch(this.editorView.state.tr.setMeta(prosemirrorPluginKey, { snapshot, prevSnapshot }))
+    /**
+     * @type {Array<string|null>}
+     */
+    let colors = niceColors.slice()
+    let style = ''
+    snapshot.userMap.forEach((name, userid) => {
+      /**
+       * @type {any}
+       */
+      const randInt = name.split('').map(s => s.charCodeAt(0)).reduce((a, b) => a + b)
+      let color = null
+      let i = 0
+      for (; i < colors.length && color === null; i++) {
+        color = colors[(randInt + i) % colors.length]
+      }
+      if (color === null) {
+        colors = niceColors.slice()
+        i = 0
+        color = colors[randInt % colors.length]
+      }
+      colors[randInt % colors.length] = null
+      style += createUserCSS(userid, name, color, color + '69')
+    })
+    this.userStyleContainer.innerHTML = style
+  }
+  /**
+   * @param {Map<number, string>} [updatedUserMap] Maps from userid (yjs model) to account name (e.g. mail address)
+   */
+  snapshot (updatedUserMap = new Map()) {
+    const y = prosemirrorPluginKey.getState(this.editorView.state).y
+    const history = y.define('history', Y.Array)
+    const encoder = encoding.createEncoder()
+    historyProtocol.writeHistorySnapshot(encoder, y, updatedUserMap)
+    encoding.writeUint32(encoder, Math.floor(Date.now() / 1000))
+    history.push([encoding.toBuffer(encoder)])
+  }
+}

examples/prosemirror.html

@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Yjs Prosemirror Example</title>
+    <link rel=stylesheet href="./prosemirror.css">
+    <style>
+      placeholder {
+        display: inline;
+        border: 1px solid #ccc;
+        color: #ccc;
+      }
+      placeholder:after {
+        content: "☁";
+        font-size: 200%;
+        line-height: 0.1;
+        font-weight: bold;
+      }
+      .ProseMirror img { max-width: 100px }
+      /* this is a rough fix for the first cursor position when the first paragraph is empty */
+      .ProseMirror > .ProseMirror-yjs-cursor:first-child {
+        margin-top: 16px;
+      }
+      .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 {
+        margin-top: 16px
+      }
+      .ProseMirror-yjs-cursor {
+        position: absolute;
+        border-left: black;
+        border-left-style: solid;
+        border-left-width: 2px;
+        border-color: orange;
+        height: 1em;
+        word-break: normal;
+      }
+      .ProseMirror-yjs-cursor > div {
+        position: relative;
+        top: -1.05em;
+        font-size: 13px;
+        background-color: rgb(250, 129, 0);
+        font-family: serif;
+        font-style: normal;
+        font-weight: normal;
+        line-height: normal;
+        user-select: none;
+        color: white;
+        padding-left: 2px;
+        padding-right: 2px;
+      }
+      [ychange_state] {
+        position: relative;
+      }
+      [ychange_state]:hover::before {
+        content: attr(ychange_user);
+        background-color: #fa8100;
+        position: absolute;
+        top: -14px;
+        right: 0;
+        font-size: 12px;
+        padding: 0 2px;
+        border-radius: 3px 3px 0 0;
+        color: #fdfdfe;
+        user-select: none;
+        word-break: normal;
+      }
+      *[ychange_state='added'] {
+        background-color: #fa810069;
+      }
+      ychange[ychange_state='removed'] {
+        color: rgb(250, 129, 0);
+        text-decoration: line-through;
+      }
+      *:not(ychange)[ychange_state='removed'] {
+        background-color: #ff9494c9;
+        text-decoration: line-through;
+      }
+      img[ychange_state='removed'] {
+        padding: 2px;
+      }
+    </style>
+</head>
+<body>
+  <p>This example shows how to bind a YXmlFragment type to a <a href="http://prosemirror.net">Prosemirror</a> editor.</p>
+  <p>The content of this editor is shared with every client who visits this domain.</p>
+  <div class="code-html">
+
+<div id="editor" style="margin-bottom: 23px"></div>
+<div style="display: none" id="content"></div>
+  </div>
+  <!-- The actual source file for the following code is found in ./prosemirror.js. Run `npm run watch` to compile the files -->
+  <script class="code-js" src="./build/prosemirror.js">
+import * as Y from 'yjs'
+import { WebsocketProvider } from 'yjs/provider/websocket.js'
+import { prosemirrorPlugin, cursorPlugin } from 'yjs/bindings/prosemirror'
+
+import * as conf from './exampleConfig.js'
+
+import { EditorState } from 'prosemirror-state'
+import { EditorView } from 'prosemirror-view'
+import { DOMParser } from 'prosemirror-model'
+import { schema } from 'prosemirror-schema-basic'
+import { exampleSetup } from 'prosemirror-example-setup'
+
+const provider = new WebsocketProvider(conf.serverAddress)
+const ydocument = provider.get('prosemirror')
+const type = ydocument.define('prosemirror', Y.XmlFragment)
+
+const prosemirrorView = new EditorView(document.querySelector('#editor'), {
+  state: EditorState.create({
+    doc: DOMParser.fromSchema(schema).parse(document.querySelector('#content')),
+    plugins: exampleSetup({schema}).concat([prosemirrorPlugin(type), cursorPlugin])
+  })
+})
+
+window.example = { provider, ydocument, type, prosemirrorView }
+  </script>
+</body>
+</html>

examples/prosemirror.js

@@ -0,0 +1,25 @@
+import * as Y from '../index.js'
+import { WebsocketProvider } from '../provider/websocket.js'
+import { prosemirrorPlugin, cursorPlugin } from '../bindings/prosemirror.js'
+
+import * as conf from './exampleConfig.js'
+
+import { EditorState } from 'prosemirror-state'
+import { EditorView } from 'prosemirror-view'
+import { DOMParser, Schema } from 'prosemirror-model'
+import { schema } from './prosemirror-schema.js'
+import { exampleSetup } from 'prosemirror-example-setup'
+import { noteHistoryPlugin } from './prosemirror-history.js'
+
+const provider = new WebsocketProvider(conf.serverAddress)
+const ydocument = provider.get('prosemirror', { gc: false })
+const type = ydocument.define('prosemirror', Y.XmlFragment)
+
+const prosemirrorView = new EditorView(document.querySelector('#editor'), {
+  state: EditorState.create({
+    doc: DOMParser.fromSchema(schema).parse(document.querySelector('#content')),
+    plugins: exampleSetup({schema}).concat([prosemirrorPlugin(type), cursorPlugin /* noteHistoryPlugin */])
+  })
+})
+
+window.example = { provider, ydocument, type, prosemirrorView }

examples/quill.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Yjs Quill Example</title>
+    <link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">
+  </head>
+<body>
+  <p>This example shows how to bind a YText type to <a href="https://quilljs.com">Quill</a> editor.</p>
+  <p>The content of this editor is shared with every client who visits this domain.</p>
+  <div class="code-html">
+<div id="quill-container">
+  <div id="quill">
+  </div>
+</div>
+  </div>
+  <!-- The actual source file for the following code is found in ./quill.js. Run `npm run watch` to compile the files -->
+  <script class="code-js" src="./build/quill.js">
+import * as Y from 'yjs'
+import { WebsocketProvider } from 'yjs/provider/websocket.js'
+import { QuillBinding } from 'yjs/bindings/quill.js'
+
+import * as conf from './exampleConfig.js'
+
+import Quill from 'quill'
+
+const provider = new WebsocketProvider(conf.serverAddress)
+const ydocument = provider.get('quill')
+const ytext = ydocument.define('quill', Y.Text)
+
+const quill = new Quill('#quill-container', {
+  modules: {
+    toolbar: [
+      [{ header: [1, 2, false] }],
+      ['bold', 'italic', 'underline'],
+      ['image', 'code-block'],
+      [{ color: [] }, { background: [] }], // Snow theme fills in values
+      [{ script: 'sub' }, { script: 'super' }],
+      ['link', 'image'],
+      ['link', 'code-block'],
+      [{ list: 'ordered' }, { list: 'bullet' }]
+    ]
+  },
+  placeholder: 'Compose an epic...',
+  theme: 'snow' // or 'bubble'
+})
+
+window.quillBinding = new QuillBinding(ytext, quill)
+
+  </script>
+</body>
+</html>

examples/quill.js

@@ -0,0 +1,30 @@
+import * as Y from '../index.js'
+import { WebsocketProvider } from '../provider/websocket.js'
+import { QuillBinding } from '../bindings/quill.js'
+
+import * as conf from './exampleConfig.js'
+
+import Quill from 'quill'
+
+const provider = new WebsocketProvider(conf.serverAddress)
+const ydocument = provider.get('quill')
+const ytext = ydocument.define('quill', Y.Text)
+
+const quill = new Quill('#quill-container', {
+  modules: {
+    toolbar: [
+      [{ header: [1, 2, false] }],
+      ['bold', 'italic', 'underline'],
+      ['image', 'code-block'],
+      [{ color: [] }, { background: [] }], // Snow theme fills in values
+      [{ script: 'sub' }, { script: 'super' }],
+      ['link', 'image'],
+      ['link', 'code-block'],
+      [{ list: 'ordered' }, { list: 'bullet' }]
+    ]
+  },
+  placeholder: 'Compose an epic...',
+  theme: 'snow' // or 'bubble'
+})
+
+window.quillBinding = new QuillBinding(ytext, quill)

examples/quill/index.html

@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <!-- quill does not include dist files! We are using the hosted version instead -->
-  <!--link rel="stylesheet" href="../bower_components/quill/dist/quill.snow.css" /-->
-  <link href="https://cdn.quilljs.com/1.0.4/quill.snow.css" rel="stylesheet">
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css" rel="stylesheet">
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/monokai-sublime.min.css" rel="stylesheet">
-  <style>
-    #quill-container {
-      border: 1px solid gray;
-      box-shadow: 0px 0px 10px gray;
-    }
-  </style>
-</head>
-<body>
-  <div id="quill-container">
-    <div id="quill">
-    </div>
-  </div>
-
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.js" type="text/javascript"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js" type="text/javascript"></script>
-  <script src="https://cdn.quilljs.com/1.0.4/quill.js"></script>
-  <!-- quill does not include dist files! We are using the hosted version instead (see above)
-  <script src="../bower_components/quill/dist/quill.js"></script>
-  -->
-  <script src="../../y.js"></script>
-  <script src="../../../y-array/y-array.js"></script>
-  <script src="../../../y-richtext/dist/y-richtext.js"></script>
-  <script src="../../../y-memory/y-memory.js"></script>
-  <script src="../../../y-websockets-client/y-websockets-client.js"></script>
-  <script src="./index.js"></script>
-</body>
-</html>

examples/quill/index.js

@@ -1,40 +0,0 @@
-/* global Y, Quill */
-
-// initialize a shared object. This function call returns a promise!
-
-Y({
-  db: {
-    name: 'memory'
-  },
-  connector: {
-    name: 'websockets-client',
-    room: 'richtext-example-quill-1.0-test',
-    url: 'http://localhost:1234'
-  },
-  sourceDir: '/bower_components',
-  share: {
-    richtext: 'Richtext' // y.share.richtext is of type Y.Richtext
-  }
-}).then(function (y) {
-  window.yQuill = y
-
-  // create quill element
-  window.quill = new Quill('#quill', {
-    modules: {
-      formula: true,
-      syntax: true,
-      toolbar: [
-        [{ size: ['small', false, 'large', 'huge'] }],
-        ['bold', 'italic', 'underline'],
-        [{ color: [] }, { background: [] }],    // Snow theme fills in values
-        [{ script: 'sub' }, { script: 'super' }],
-        ['link', 'image'],
-        ['link', 'code-block'],
-        [{ list: 'ordered' }]
-      ]
-    },
-    theme: 'snow'
-  })
-  // bind quill to richtext type
-  y.share.richtext.bind(window.quill)
-})

examples/rollup.config.js

@@ -1,27 +0,0 @@
-import nodeResolve from 'rollup-plugin-node-resolve'
-import commonjs from 'rollup-plugin-commonjs'
-
-var pkg = require('./package.json')
-
-export default {
-  entry: 'yjs-dist.esm',
-  dest: 'yjs-dist.js',
-  moduleName: 'Y',
-  format: 'umd',
-  plugins: [
-    nodeResolve({
-      main: true,
-      module: true,
-      browser: true
-    }),
-    commonjs()
-  ],
-  sourceMap: true,
-  banner: `
-/**
- * ${pkg.name} - ${pkg.description}
- * @version v${pkg.version}
- * @license ${pkg.license}
- */
-`
-}

examples/style.css

@@ -0,0 +1,29 @@
+footer img {
+  display: none;
+}
+
+nav .title h1 a {
+  display: none;
+}
+
+footer {
+  background-color: #b93c1d;
+}
+
+#resizer {
+  background-color: #b93c1d;
+}
+
+.main section article.readme h1:first-child img {
+  display: none;
+}
+
+.main section article.readme h1:first-child {
+  margin-bottom: 16px;
+  margin-top: 30px;
+}
+
+.main section article.readme h1:first-child::before {
+  content: "Yjs";
+  font-size: 2em;
+}

examples/textarea.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Yjs Textarea Example</title>
+</head>
+<body>
+  <p>This example shows how to bind a YText type to a DOM Textarea.</p>
+  <p>The content of this textarea is shared with every client who visits this domain.</p>
+  <div class="code-html">
+
+<textarea style="width:80%;" rows=40 autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
+  </div>
+  <!-- The actual source file for the following code is found in ./textarea.js. Run `npm run watch` to compile the files -->
+  <script class="code-js" src="./build/textarea.js">
+import * as Y from 'yjs'
+import { WebsocketProvider } from 'yjs/provider/websocket.js'
+import { TextareaBinding } from 'yjs/bindings/textarea.js'
+
+import * as conf from './exampleConfig.js'
+
+const provider = new WebsocketProvider(conf.serverAddress)
+const ydocument = provider.get('textarea')
+const type = ydocument.define('textarea', Y.Text)
+const textarea = document.querySelector('textarea')
+const binding = new TextareaBinding(type, textarea)
+
+window.textareaExample = {
+  provider, ydocument, type, textarea, binding
+}
+  </script>
+</body>
+</html>

examples/textarea.js

@@ -0,0 +1,15 @@
+import * as Y from '../index.js'
+import { WebsocketProvider } from '../provider/websocket.js'
+import { TextareaBinding } from '../bindings/textarea.js'
+
+import * as conf from './exampleConfig.js'
+
+const provider = new WebsocketProvider(conf.serverAddress)
+const ydocument = provider.get('textarea')
+const type = ydocument.define('textarea', Y.Text)
+const textarea = document.querySelector('textarea')
+const binding = new TextareaBinding(type, textarea)
+
+window.textareaExample = {
+  provider, ydocument, type, textarea, binding
+}

examples/textarea/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-<body>
-  <textarea style="width:80%;" rows=40 id="textfield" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
-  <script src="../../y.js"></script>
-  <script src="../../../y-array/y-array.js"></script>
-  <script src="../../../y-text/dist/y-text.js"></script>
-  <script src="../../../y-memory/y-memory.js"></script>
-  <script src="../../../y-websockets-client/y-websockets-client.js"></script>
-  <script src="./index.js"></script>
-</body>
-</html>

examples/textarea/index.js

@@ -1,30 +0,0 @@
-/* global Y */
-
-// eslint-disable-next-line
-let search = new URLSearchParams(location.search)
-
-// initialize a shared object. This function call returns a promise!
-Y({
-  db: {
-    name: 'memory'
-  },
-  connector: {
-    name: 'websockets-client',
-    room: 'Textarea-example',
-    // url: '//localhost:1234',
-    url: 'https://yjs-v13.herokuapp.com/'
-    // options: { transports: ['websocket'], upgrade: false }
-  },
-  share: {
-    textarea: 'Text'
-  },
-  timeout: 5000 // reject if no connection was established within 5 seconds
-}).then(function (y) {
-  window.yTextarea = y
-
-  // bind the textarea to a shared text element
-  y.share.textarea.bind(document.getElementById('textfield'))
-  // thats it..
-}).catch(() => {
-  console.log('Something went wrong while creating the instance..')
-})

examples/xml/index.html

@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html>
-</head>
-  <!-- jquery is not required for y-xml. It is just here for convenience, and to test batch operations. -->
-  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
-  <script src="../yjs-dist.js"></script>
-  <script src="./index.js"></script>
-</head>
-<body>
-  <h1> Shared DOM Example </h1>
-  <p> Use native DOM function or jQuery to manipulate the shared DOM (window.sharedDom). </p>
-  <div class="command">
-    <button type="button">Execute</button>
-    <input type="text" value='$(sharedDom).append("<h3>Appended headline</h3>")' size="40"/>
-  </div>
-  <div class="command">
-    <button type="button">Execute</button>
-    <input type="text" value='$(sharedDom).attr("align","right")' size="40"/>
-  </div>
-  <div class="command">
-    <button type="button">Execute</button>
-    <input type="text" value='$(sharedDom).attr("style","color:blue;")' size="40"/>
-  </div>
-
-  <script>
-    var commands = document.querySelectorAll(".command");
-    Array.prototype.forEach.call(document.querySelectorAll('.command'), function (command) {
-      var execute = function(){
-        eval(command.querySelector("input").value);
-      }
-      command.querySelector("button").onclick = execute
-      $(command.querySelector("input")).keyup(function (e) {
-        if (e.keyCode == 13) {
-          execute()
-        }
-      })
-    })
-  </script>
-</body>
-</html>

examples/xml/index.js

@@ -1,23 +0,0 @@
-/* global Y */
-
-// initialize a shared object. This function call returns a promise!
-Y({
-  db: {
-    name: 'memory'
-  },
-  connector: {
-    name: 'websockets-client',
-    // url: 'http://127.0.0.1:1234',
-    url: 'http://192.168.178.81:1234',
-    room: 'Xml-example'
-  },
-  sourceDir: '/bower_components',
-  share: {
-    xml: 'Xml("p")' // y.share.xml is of type Y.Xml with tagname "p"
-  }
-}).then(function (y) {
-  window.yXml = y
-  // bind xml type to a dom, and put it in body
-  window.sharedDom = y.share.xml.getDom()
-  document.body.appendChild(window.sharedDom)
-})

examples/yjs-dist.esm

@@ -1,12 +0,0 @@
-
-import Y from '../src/y.js'
-import yArray from '../../y-array/src/y-array.js'
-import yMap from '../../y-map/src/Map.js'
-import yText from '../../y-text/src/Text.js'
-import yXml from '../../y-xml/src/y-xml.js'
-import yMemory from '../../y-memory/src/y-memory.js'
-import yWebsocketsClient from '../../y-websockets-client/src/y-websockets-client.js'
-
-Y.extend(yArray, yMap, yText, yXml, yMemory, yWebsocketsClient)
-
-export default Y

examples_all/ace/index.html

@@ -24,7 +24,8 @@
   <body>
 
     <div id="aceContainer"></div>
-    <script src="../bower_components/yjs/y.js"></script>
+    <script src="../../y.js"></script>
+    <script src='../../../y-websockets-client/y-websockets-client.js'></script>
     <script src="../bower_components/ace-builds/src/ace.js"></script>
 
     <script src="./index.js"></script>

examples_all/ace/index.js

@@ -0,0 +1,17 @@
+/* global Y, ace */
+
+let y = new Y('ace-example', {
+  connector: {
+    name: 'websockets-client',
+    url: 'http://127.0.0.1:1234'
+  }
+})
+
+window.yAce = y
+
+// bind the textarea to a shared text element
+var editor = ace.edit('aceContainer')
+editor.setTheme('ace/theme/chrome')
+editor.getSession().setMode('ace/mode/javascript')
+
+y.define('ace', Y.Text).bindAce(editor)

examples_all/chat/index.html

@@ -13,11 +13,7 @@
       <input type="submit" value="Send">
     </form>
     <script src="../../y.js"></script>
-    <script src="../../../y-array/y-array.js"></script>
-    <script src="../../../y-map/dist/y-map.js"></script>
-    <script src="../../../y-text/dist/y-text.js"></script>
-    <script src="../../../y-memory/y-memory.js"></script>
-    <script src="../../../y-websockets-client/dist/y-websockets-client.js"></script>
+    <script src='../../../y-websockets-client/y-websockets-client.js'></script>
     <script src="./index.js"></script>
   </body>
 </html>

examples_all/chat/index.js

@@ -0,0 +1,65 @@
+/* global Y */
+
+let y = new Y('chat-example', {
+  connector: {
+    name: 'websockets-client',
+    url: 'http://127.0.0.1:1234'
+  }
+})
+
+window.yChat = y
+
+let chatprotocol = y.define('chatprotocol', Y.Array)
+
+let chatcontainer = document.querySelector('#chat')
+
+// This functions inserts a message at the specified position in the DOM
+const appendMessage = (message, position) => {
+  var p = document.createElement('p')
+  var uname = document.createElement('span')
+  uname.appendChild(document.createTextNode(message.username + ': '))
+  p.appendChild(uname)
+  p.appendChild(document.createTextNode(message.message))
+  chatcontainer.insertBefore(p, chatcontainer.children[position] || null)
+}
+
+// This function makes sure that only 7 messages exist in the chat history.
+// The rest is deleted
+const cleanupChat = () => {
+  if (chatprotocol.length > 7) {
+    chatprotocol.delete(0, chatprotocol.length - 7)
+  }
+}
+cleanupChat()
+
+// Insert the initial content
+chatprotocol.toArray().forEach(appendMessage)
+
+// whenever content changes, make sure to reflect the changes in the DOM
+chatprotocol.observe(event => {
+  // concurrent insertions may result in a history > 7, so cleanup here
+  cleanupChat()
+  chatcontainer.innerHTML = ''
+  chatprotocol.toArray().forEach(appendMessage)
+})
+document.querySelector('#chatform').onsubmit = function (event) {
+  // the form is submitted
+  var message = {
+    username: this.querySelector('[name=username]').value,
+    message: this.querySelector('[name=message]').value
+  }
+  if (message.username.length > 0 && message.message.length > 0) {
+    if (chatprotocol.length > 6) {
+      // If we are goint to insert the 8th element, make sure to delete first.
+      chatprotocol.delete(0)
+    }
+    // Here we insert a message in the shared chat type.
+    // This will call the observe function (see line 40)
+    // and reflect the change in the DOM
+    chatprotocol.push([message])
+    this.querySelector('[name=message]').value = ''
+  }
+  // Do not send this form!
+  event.preventDefault()
+  return false
+}

examples_all/codemirror/index.html

@@ -5,7 +5,8 @@
   <body>
     <div id="codeMirrorContainer"></div>
 
-    <script src="../bower_components/yjs/y.js"></script>
+    <script src="../../y.js"></script>
+    <script src='../../../y-websockets-client/y-websockets-client.js'></script>
     <script src="../bower_components/codemirror/lib/codemirror.js"></script>
     <script src="../bower_components/codemirror/mode/javascript/javascript.js"></script>
     <link rel="stylesheet" href="../bower_components/codemirror/lib/codemirror.css">

examples_all/codemirror/index.js

@@ -0,0 +1,16 @@
+/* global Y, CodeMirror */
+
+let y = new Y('codemirror-example', {
+  connector: {
+    name: 'websockets-client',
+    url: 'http://127.0.0.1:1234'
+  }
+})
+
+window.yCodeMirror = y
+
+var editor = CodeMirror(document.querySelector('#codeMirrorContainer'), {
+  mode: 'javascript',
+  lineNumbers: true
+})
+y.define('codemirror', Y.Text).bindCodeMirror(editor)

examples_all/drawing/index.html

@@ -13,11 +13,8 @@
   <button type="button" id="clearDrawingCanvas">Clear Drawing</button>
   <svg id="drawingCanvas" viewbox="0 0 100 100" width="100%"></svg>
   <script src="../../y.js"></script>
-  <script src="../../../y-array/y-array.js"></script>
-  <script src="../../../y-map/dist/y-map.js"></script>
-  <script src="../../../y-memory/y-memory.js"></script>
-  <script src="../../../y-websockets-client/y-websockets-client.js"></script>
-  <script src="../bower_components/d3/d3.js"></script>
+  <script src='../../../y-websockets-client/y-websockets-client.js'></script>
+  <script src="../bower_components/d3/d3.min.js"></script>
   <script src="./index.js"></script>
 </body>
 </html>

examples_all/drawing/index.js

@@ -0,0 +1,74 @@
+/* globals Y, d3 */
+
+let y = new Y('drawing-example', {
+  connector: {
+    name: 'websockets-client',
+    url: 'http://127.0.0.1:1234'
+  }
+})
+
+window.yDrawing = y
+var drawing = y.define('drawing', Y.Array)
+var renderPath = d3.svg.line()
+  .x(function (d) { return d[0] })
+  .y(function (d) { return d[1] })
+  .interpolate('basic')
+
+var svg = d3.select('#drawingCanvas')
+  .call(d3.behavior.drag()
+    .on('dragstart', dragstart)
+    .on('drag', drag)
+    .on('dragend', dragend))
+
+// create line from a shared array object and update the line when the array changes
+function drawLine (yarray) {
+  var line = svg.append('path').datum(yarray.toArray())
+  line.attr('d', renderPath)
+  yarray.observe(function (event) {
+    line.remove()
+    line = svg.append('path').datum(yarray.toArray())
+    line.attr('d', renderPath)
+  })
+}
+// call drawLine every time an array is appended
+drawing.observe(function (event) {
+  event.removedElements.forEach(function () {
+    // if one is deleted, all will be deleted!!
+    svg.selectAll('path').remove()
+  })
+  event.addedElements.forEach(function (path) {
+    drawLine(path)
+  })
+})
+// draw all existing content
+for (var i = 0; i < drawing.length; i++) {
+  drawLine(drawing.get(i))
+}
+
+// clear canvas on request
+document.querySelector('#clearDrawingCanvas').onclick = function () {
+  drawing.delete(0, drawing.length)
+}
+
+var sharedLine = null
+function dragstart () {
+  drawing.insert(drawing.length, [Y.Array])
+  sharedLine = drawing.get(drawing.length - 1)
+}
+
+// After one dragged event is recognized, we ignore them for 33ms.
+var ignoreDrag = null
+function drag () {
+  if (sharedLine != null && ignoreDrag == null) {
+    ignoreDrag = window.setTimeout(function () {
+      ignoreDrag = null
+    }, 10)
+    sharedLine.push([d3.mouse(this)])
+  }
+}
+
+function dragend () {
+  sharedLine = null
+  window.clearTimeout(ignoreDrag)
+  ignoreDrag = null
+}

examples_all/html-editor-drawing-hook/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+</head>
+  <script src="../../y.js"></script>
+  <script src='../../../y-websockets-client/y-websockets-client.js'></script>
+  <script src="../bower_components/d3/d3.min.js"></script>
+  <script src="./index.js"></script>
+  <style>
+    magic-drawing .drawingCanvas path {
+      fill: none;
+      stroke: blue;
+      stroke-width: 2px;
+      stroke-linejoin: round;
+      stroke-linecap: round;
+    }
+    magic-drawing .drawingCanvas {
+      width: 500px;
+      height: 500px;
+      cursor: default;
+      padding:1px;
+      border:1px solid #021a40;
+    }
+    magic-drawing .clearDrawingButton {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+    magic-drawing {
+      position: relative;
+      display: block;
+    }
+  </style>
+</head>
+<body contenteditable="true">
+</body>
+</html>

examples_all/html-editor-drawing-hook/index.js

@@ -0,0 +1,134 @@
+/* global Y, d3 */
+
+const hooks = {
+  'magic-drawing': {
+    fillType: function (dom, type) {
+      initDrawingBindings(type, dom)
+    },
+    createDom: function (type) {
+      const dom = document.createElement('magic-drawing')
+      initDrawingBindings(type, dom)
+      return dom
+    }
+  }
+}
+
+window.onload = function () {
+  window.domBinding = new Y.DomBinding(window.yXmlType, document.body, { hooks })
+}
+
+window.addMagicDrawing = function addMagicDrawing () {
+  let mt = document.createElement('magic-drawing')
+  mt.setAttribute('data-yjs-hook', 'magic-drawing')
+  document.body.append(mt)
+}
+
+var renderPath = d3.svg.line()
+  .x(function (d) { return d[0] })
+  .y(function (d) { return d[1] })
+  .interpolate('basic')
+
+function initDrawingBindings (type, dom) {
+  dom.contentEditable = 'false'
+  dom.setAttribute('data-yjs-hook', 'magic-drawing')
+  var drawing = type.get('drawing')
+  if (drawing === undefined) {
+    drawing = type.set('drawing', new Y.Array())
+  }
+  var canvas = dom.querySelector('.drawingCanvas')
+  if (canvas == null) {
+    canvas = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+    canvas.setAttribute('class', 'drawingCanvas')
+    canvas.setAttribute('viewbox', '0 0 100 100')
+    dom.insertBefore(canvas, null)
+  }
+  var clearDrawingButton = dom.querySelector('.clearDrawingButton')
+  if (clearDrawingButton == null) {
+    clearDrawingButton = document.createElement('button')
+    clearDrawingButton.setAttribute('type', 'button')
+    clearDrawingButton.setAttribute('class', 'clearDrawingButton')
+    clearDrawingButton.innerText = 'Clear Drawing'
+    dom.insertBefore(clearDrawingButton, null)
+  }
+  var svg = d3.select(canvas)
+    .call(d3.behavior.drag()
+      .on('dragstart', dragstart)
+      .on('drag', drag)
+      .on('dragend', dragend))
+  // create line from a shared array object and update the line when the array changes
+  function drawLine (yarray, svg) {
+    var line = svg.append('path').datum(yarray.toArray())
+    line.attr('d', renderPath)
+    yarray.observe(function (event) {
+      line.remove()
+      line = svg.append('path').datum(yarray.toArray())
+      line.attr('d', renderPath)
+    })
+  }
+  // call drawLine every time an array is appended
+  drawing.observe(function (event) {
+    event.removedElements.forEach(function () {
+      // if one is deleted, all will be deleted!!
+      svg.selectAll('path').remove()
+    })
+    event.addedElements.forEach(function (path) {
+      drawLine(path, svg)
+    })
+  })
+  // draw all existing content
+  for (var i = 0; i < drawing.length; i++) {
+    drawLine(drawing.get(i), svg)
+  }
+
+  // clear canvas on request
+  clearDrawingButton.onclick = function () {
+    drawing.delete(0, drawing.length)
+  }
+
+  var sharedLine = null
+  function dragstart () {
+    drawing.insert(drawing.length, [Y.Array])
+    sharedLine = drawing.get(drawing.length - 1)
+  }
+
+  // After one dragged event is recognized, we ignore them for 33ms.
+  var ignoreDrag = null
+  function drag () {
+    if (sharedLine != null && ignoreDrag == null) {
+      ignoreDrag = window.setTimeout(function () {
+        ignoreDrag = null
+      }, 10)
+      sharedLine.push([d3.mouse(this)])
+    }
+  }
+
+  function dragend () {
+    sharedLine = null
+    window.clearTimeout(ignoreDrag)
+    ignoreDrag = null
+  }
+}
+
+let y = new Y('html-editor-drawing-hook-example', {
+  connector: {
+    name: 'websockets-client',
+    url: 'http://127.0.0.1:1234'
+  }
+})
+
+window.yXml = y
+window.yXmlType = y.define('xml', Y.XmlFragment)
+window.undoManager = new Y.utils.UndoManager(window.yXmlType, {
+  captureTimeout: 500
+})
+
+document.onkeydown = function interceptUndoRedo (e) {
+  if (e.keyCode === 90 && e.metaKey) {
+    if (!e.shiftKey) {
+      window.undoManager.undo()
+    } else {
+      window.undoManager.redo()
+    }
+    e.preventDefault()
+  }
+}

examples_all/html-editor/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+</head>
+  <script src="./index.js" type="module"></script>
+</head>
+<body>
+    <label for="room">Room: </label>
+    <input type="text" id="room" name="room">
+    <div id="content" contenteditable style="position:absolute;top:35px;left:0;right:0;bottom:0;outline: 0px solid transparent;"></div>
+</body>
+</html>

examples_all/html-editor/index.js

@@ -0,0 +1,77 @@
+
+import YWebsocketsConnector from '../../src/Connectors/WebsocketsConnector/WebsocketsConnector.js'
+import Y from '../../src/Y.js'
+import DomBinding from '../../bindings/DomBinding/DomBinding.js'
+import UndoManager from '../../src/Util/UndoManager.js'
+import YXmlFragment from '../../src/Types/YXml/YXmlFragment.js'
+import YXmlText from '../../src/Types/YXml/YXmlText.js'
+import YXmlElement from '../../src/Types/YXml/YXmlElement.js'
+import YIndexdDBPersistence from '../../src/Persistences/IndexedDBPersistence.js'
+
+const connector = new YWebsocketsConnector()
+const persistence = new YIndexdDBPersistence()
+
+const roomInput = document.querySelector('#room')
+
+let currentRoomName = null
+let y = null
+let domBinding = null
+
+function setRoomName (roomName) {
+  if (currentRoomName !== roomName) {
+    console.log(`change room: "${roomName}"`)
+    roomInput.value = roomName
+    currentRoomName = roomName
+    location.hash = '#' + roomName
+    if (y !== null) {
+      domBinding.destroy()
+    }
+
+    const room = connector._rooms.get(roomName)
+    if (room !== undefined) {
+      y = room.y
+    } else {
+      y = new Y(roomName, null, null, { gc: true })
+      persistence.connectY(roomName, y).then(() => {
+        // connect after persisted content was applied to y
+        // If we don't wait for persistence, the other peer will send all data, waisting
+        // network bandwidth..
+        connector.connectY(roomName, y)
+      })
+      window.y = y
+    }
+
+    window.y = y
+    window.yXmlType = y.define('xml', YXmlFragment)
+
+    domBinding = new DomBinding(window.yXmlType, document.querySelector('#content'), { scrollingElement: document.scrollingElement })
+  }
+}
+window.setRoomName = setRoomName
+
+window.createRooms = function (i = 0) {
+  setInterval(function () {
+    setRoomName(i + '')
+    i++
+    const nodes = []
+    for (let j = 0; j < 100; j++) {
+      const node = new YXmlElement('p')
+      node.insert(0, [new YXmlText(`This is the ${i}th paragraph of room ${i}`)])
+      nodes.push(node)
+    }
+    y.share.xml.insert(0, nodes)
+  }, 100)
+}
+
+connector.syncPersistence(persistence)
+
+window.connector = connector
+window.persistence = persistence
+
+window.onload = function () {
+  setRoomName((location.hash || '#default').slice(1))
+  roomInput.addEventListener('input', e => {
+    const roomName = e.target.value
+    setRoomName(roomName)
+  })
+}

examples_all/indexeddb/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+  </head>
+  <body>
+    <div id="codeMirrorContainer"></div>
+    <script src="../bower_components/codemirror/lib/codemirror.js"></script>
+    <script src="../bower_components/codemirror/mode/javascript/javascript.js"></script>
+    <link rel="stylesheet" href="../bower_components/codemirror/lib/codemirror.css">
+    <style>
+      .CodeMirror {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+      }
+    </style>
+    <script src="../../y.js"></script>
+    <script src='../../../y-websockets-client/y-websockets-client.js'></script>
+    <script src="./index.js"></script>
+  </body>
+</html>

examples_all/indexeddb/index.js

@@ -0,0 +1,19 @@
+/* global Y, CodeMirror */
+
+const persistence = new Y.IndexedDB()
+const connector = {
+  connector: {
+    name: 'websockets-client',
+    room: 'codemirror-example'
+  }
+}
+
+const y = new Y('codemirror-example', connector, persistence)
+window.yCodeMirror = y
+
+var editor = CodeMirror(document.querySelector('#codeMirrorContainer'), {
+  mode: 'javascript',
+  lineNumbers: true
+})
+
+y.define('codemirror', Y.Text).bindCodeMirror(editor)

examples_all/jigsaw/index.html

@@ -17,9 +17,7 @@
 		</g>
   </svg>
   <script src="../../y.js"></script>
-  <script src="../../../y-map/dist/y-map.js"></script>
-  <script src="../../../y-memory/y-memory.js"></script>
-  <script src="../../../y-websockets-client/y-websockets-client.js"></script>
+  <script src='../../../y-websockets-client/y-websockets-client.js'></script>
   <script src="../bower_components/d3/d3.js"></script>
   <script src="./index.js"></script>
 </body>

examples_all/jigsaw/index.js

@@ -0,0 +1,67 @@
+/* global Y, d3 */
+
+let y = new Y('jigsaw-example', {
+  connector: {
+    name: 'websockets-client',
+    url: 'http://127.0.0.1:1234'
+  }
+})
+
+let jigsaw = y.define('jigsaw', Y.Map)
+window.yJigsaw = y
+
+var origin // mouse start position - translation of piece
+var drag = d3.behavior.drag()
+  .on('dragstart', function (params) {
+    // get the translation of the element
+    var translation = d3
+      .select(this)
+      .attr('transform')
+      .slice(10, -1)
+      .split(',')
+      .map(Number)
+    // mouse coordinates
+    var mouse = d3.mouse(this.parentNode)
+    origin = {
+      x: mouse[0] - translation[0],
+      y: mouse[1] - translation[1]
+    }
+  })
+  .on('drag', function () {
+    var mouse = d3.mouse(this.parentNode)
+    var x = mouse[0] - origin.x // =^= mouse - mouse at dragstart + translation at dragstart
+    var y = mouse[1] - origin.y
+    d3.select(this).attr('transform', 'translate(' + x + ',' + y + ')')
+  })
+  .on('dragend', function (piece, i) {
+    // save the current translation of the puzzle piece
+    var mouse = d3.mouse(this.parentNode)
+    var x = mouse[0] - origin.x
+    var y = mouse[1] - origin.y
+    jigsaw.set(piece, {x: x, y: y})
+  })
+
+var data = ['piece1', 'piece2', 'piece3', 'piece4']
+var pieces = d3.select(document.querySelector('#puzzle-example')).selectAll('path').data(data)
+
+pieces
+  .classed('draggable', true)
+  .attr('transform', function (piece) {
+    var translation = piece.get('translation') || {x: 0, y: 0}
+    return 'translate(' + translation.x + ',' + translation.y + ')'
+  }).call(drag)
+
+data.forEach(function (piece) {
+  jigsaw.observe(function () {
+    // whenever a property of a piece changes, update the translation of the pieces
+    pieces
+      .transition()
+      .attr('transform', function (piece) {
+        var translation = piece.get(piece)
+        if (translation == null || typeof translation.x !== 'number' || typeof translation.y !== 'number') {
+          translation = { x: 0, y: 0 }
+        }
+        return 'translate(' + translation.x + ',' + translation.y + ')'
+      })
+  })
+})

examples_all/monaco/index.html

@@ -13,11 +13,8 @@
         width: 100%;
       }
     </style>
-    <script src="../bower_components/yjs/y.js"></script>
-    <script src="../bower_components/y-array/y-array.js"></script>
-    <script src="../bower_components/y-text/y-text.js"></script>
-    <script src="../bower_components/y-websockets-client/y-websockets-client.js"></script>
-    <script src="../bower_components/y-memory/y-memory.js"></script>
+    <script src="../../y.js"></script>
+    <script src='../../../y-websockets-client/y-websockets-client.js'></script>
     <script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
     <script src="./index.js"></script>
   </body>

examples_all/monaco/index.js

@@ -0,0 +1,22 @@
+/* global Y, monaco */
+
+require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' } })
+
+let y = new Y('monaco-example', {
+  connector: {
+    name: 'websockets-client',
+    url: 'http://127.0.0.1:1234'
+  }
+})
+
+require(['vs/editor/editor.main'], function () {
+  window.yMonaco = y
+
+  // Create Monaco editor
+  var editor = monaco.editor.create(document.getElementById('monacoContainer'), {
+    language: 'javascript'
+  })
+
+  // Bind to y.share.monaco
+  y.define('monaco', Y.Text).bindMonaco(editor)
+})

examples_all/notes/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+</head>
+  <script src="./index.js" type="module"></script>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+    <div class="sidebar">
+      <h3 id="createNoteButton">+ Create Note</h3>
+      <div class="notelist"></div>
+    </div>
+    <div class="main">
+      <h1 id="headline"></h1>
+      <div id="editor" contenteditable="true"></div>
+    </div>
+</body>
+</html>

examples_all/notes/index.js

@@ -0,0 +1,132 @@
+/* eslint-env browser */
+
+import { createYdbClient } from '../../YdbClient/index.js'
+import Y from '../../src/Y.dist.js'
+import * as ydb from '../../YdbClient/YdbClient.js'
+import DomBinding from '../../bindings/DomBinding/DomBinding.js'
+
+const uuidv4 = () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+  const r = Math.random() * 16 | 0
+  return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
+})
+
+createYdbClient('ws://localhost:8899/ws').then(ydbclient => {
+  const y = ydbclient.getY('notelist')
+  let ynotelist = y.define('notelist', Y.Array)
+  window.ynotelist = ynotelist
+  const domNoteList = document.querySelector('.notelist')
+
+  // utils
+  const addEventListener = (element, eventname, f) => element.addEventListener(eventname, f)
+
+  // create note button
+  const createNoteButton = event => {
+    ynotelist.insert(0, [{
+      guid: uuidv4(),
+      title: 'Note #' + ynotelist.length
+    }])
+  }
+  addEventListener(document.querySelector('#createNoteButton'), 'click', createNoteButton)
+  window.createNote = createNoteButton
+  window.createNotes = n => {
+    y.transact(() => {
+      for (let i = 0; i < n; i++) {
+        createNoteButton()
+      }
+    })
+  }
+
+  // clear note list function
+  window.clearNotes = () => ynotelist.delete(0, ynotelist.length)
+
+  // update editor and editor title
+  let domBinding = null
+  const updateEditor = () => {
+    domNoteList.querySelectorAll('a').forEach(a => a.classList.remove('selected'))
+    const domNote = document.querySelector('.notelist').querySelector(`[href="${location.hash}"]`)
+    if (domNote !== null) {
+      domNote.classList.add('selected')
+      const note = ynotelist.toArray().find(note => note.guid === location.hash.slice(1))
+      if (note !== undefined) {
+        const ydoc = ydbclient.getY(note.guid)
+        const ycontent = ydoc.define('content', Y.XmlFragment)
+        if (domBinding !== null) {
+          domBinding.destroy()
+        }
+        domBinding = new DomBinding(ycontent, document.querySelector('#editor'))
+        document.querySelector('#headline').innerText = note.title
+        document.querySelector('#editor').focus()
+      }
+    }
+  }
+
+  // listen to url-hash changes
+  addEventListener(window, 'hashchange', updateEditor)
+  updateEditor()
+
+  const styleSyncedState = (div, noteSyncedState) => {
+    let classes = []
+    if (noteSyncedState.persisted) {
+      classes.push('persisted')
+    } else {
+      if (noteSyncedState.upsynced) {
+        classes.push('upsynced')
+      } else {
+        classes.push('noupsynced')
+      }
+      if (noteSyncedState.downsynced) {
+        classes.push('downsynced')
+      } else {
+        classes.push('nodownsynced')
+      }
+    }
+    div.setAttribute('class', classes.join(' '))
+  }
+
+  ydbclient.on('syncstate', event => event.updated.forEach((state, room) => {
+    const a = document.querySelector(`[href="#${room}"]`)
+    if (a !== null) {
+      styleSyncedState(a.firstChild, state)
+    }
+  }))
+
+  // render note list
+  const renderNoteList = (elementList, insertRef = domNoteList.firstChild) => {
+    const fragment = document.createDocumentFragment()
+    const addNow = elementList.splice(0, 100)
+    addNow.forEach(note => {
+      const a = document.createElement('a')
+      const div = document.createElement('div')
+      a.insertBefore(div, null)
+      a.setAttribute('href', '#' + note.guid)
+      div.innerText = note.title
+      styleSyncedState(div, ydbclient.getRoomState(note.guid))
+      fragment.insertBefore(a, null)
+    })
+    if (domBinding == null) {
+      updateEditor()
+    }
+    domNoteList.insertBefore(fragment, insertRef)
+    if (elementList.length > 0) {
+      setTimeout(() => renderNoteList(elementList, insertRef), 100)
+    }
+  }
+  {
+    const notelist = ynotelist.toArray()
+    if (notelist.length > 0) {
+      renderNoteList(notelist)
+      ydb.subscribeRooms(ydbclient, notelist.map(note => note.guid))
+    }
+  }
+  ynotelist.observe(event => {
+    const addedNotes = []
+    event.addedElements.forEach(itemJson => itemJson._content.forEach(json => addedNotes.push(json)))
+    renderNoteList(addedNotes.slice().reverse()) // renderNoteList modifies addedNotes, so first make a copy of it
+    setTimeout(() => {
+      ydb.subscribeRooms(ydbclient, addedNotes.map(note => note.guid))
+    }, 200)
+    if (domBinding === null) {
+      updateEditor()
+    }
+  })
+})

examples_all/notes/style.css

@@ -0,0 +1,100 @@
+.sidebar {
+    height: 100%; /* Full-height: remove this if you want "auto" height */
+    width: 180px; /* Set the width of the sidebar */
+    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
+    z-index: 1; /* Stay on top */
+    top: 0; /* Stay at the top */
+    left: 0;
+    background-color: #111; /* Black */
+    overflow-x: hidden; /* Disable horizontal scroll */
+    padding-top: 20px;
+    color: #50abff;
+}
+
+#createNoteButton {
+    padding-left: .5em;
+    padding-top: .5em;
+    padding-bottom: .7em;
+    margin: 0;
+    cursor: pointer;
+}
+
+.notelist > a {
+  padding: 6px 8px 6px 16px;
+  text-decoration: none;
+  font-size: 13px;
+  color: #818181;
+  display: block;
+}
+
+.notelist > a.selected {
+  border-style: outset;
+}
+
+.notelist > a > div {
+  position: relative;
+  display: inline;
+}
+
+/* When you mouse over the navigation links, change their color */
+.sidebar a:hover {
+    color: #f1f1f1;
+}
+
+/* Style page content */
+.main {
+    margin-left: 180px; /* Same as the width of the sidebar */
+    padding: 0px 10px;
+}
+
+/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
+@media screen and (max-height: 450px) {
+    .sidebar {padding-top: 15px;}
+    .sidebar a {font-size: 18px;}
+}
+
+#editor {
+    min-height: 400px;
+}
+
+[contenteditable]:focus {
+    outline: 0px solid transparent;
+}
+
+.persisted::before { 
+  content: "✔";
+  color: green;
+  position: absolute;
+  right: -14px;
+  top: 0px;
+}
+
+.upsynced::before {
+  content: "↑";
+  color: green;
+  position: absolute;
+  right: -14px;
+  top: 0px;
+}
+
+.noupsynced::before {
+  content: "↑";
+  color: red;
+  position: absolute;
+  right: -14px;
+  top: 0px;
+}
+.downsynced::after {
+  content: "↓";
+  color: green;
+  position: absolute;
+  right: -22px;
+  top: 0px;
+}
+.nodownsynced::after {
+  content: "↓";
+  color: red;
+  position: absolute;
+  right: -22px;
+  top: 0px;
+}

examples_all/quill-cursors/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- Main quill library -->
+  <script src="../../node_modules/quill/dist/quill.min.js"></script>
+  <link href="../../node_modules/quill/dist/quill.snow.css" rel="stylesheet">
+  <!-- Quill cursors module -->
+  <script src="../../node_modules/quill-cursors/dist/quill-cursors.min.js"></script>
+  <link href="../../node_modules/quill-cursors/dist/quill-cursors.css" rel="stylesheet">
+  <!-- Yjs Library and connector -->
+  <script src="../../y.js"></script>
+  <script src='../../../y-websockets-client/y-websockets-client.js'></script>
+</head>
+<body>
+  <div id="quill-container">
+    <div id="quill">
+    </div>
+  </div>
+  <script src="./index.js"></script>
+</body>
+</html>

examples_all/quill-cursors/index.js

@@ -0,0 +1,78 @@
+/* global Y, Quill, QuillCursors */
+
+Quill.register('modules/cursors', QuillCursors)
+
+let y = new Y('quill-0', {
+  connector: {
+    name: 'websockets-client',
+    url: 'http://127.0.0.1:1234'
+  }
+})
+let users = y.define('users', Y.Array)
+let myUserInfo = new Y.Map()
+myUserInfo.set('name', 'dada')
+myUserInfo.set('color', 'red')
+users.push([myUserInfo])
+
+let quill = new Quill('#quill-container', {
+  modules: {
+    toolbar: [
+      [{ header: [1, 2, false] }],
+      ['bold', 'italic', 'underline'],
+      ['image', 'code-block'],
+      [{ color: [] }, { background: [] }], // Snow theme fills in values
+      [{ script: 'sub' }, { script: 'super' }],
+      ['link', 'image'],
+      ['link', 'code-block'],
+      [{ list: 'ordered' }, { list: 'bullet' }]
+    ],
+    cursors: {
+      hideDelay: 500
+    }
+  },
+  placeholder: 'Compose an epic...',
+  theme: 'snow' // or 'bubble'
+})
+
+let cursors = quill.getModule('cursors')
+
+const drawCursors = () => {
+  cursors.clearCursors()
+  users.map((user, userId) => {
+    if (user !== myUserInfo) {
+      let relativeRange = user.get('range')
+      let lastUpdated = new Date(user.get('last updated')).getTime()
+      if (lastUpdated != null && new Date().getTime() - lastUpdated < 20000 && relativeRange != null) {
+        let start = Y.utils.fromRelativePosition(y, relativeRange.start).offset
+        let end = Y.utils.fromRelativePosition(y, relativeRange.end).offset
+        let range = { index: start, length: end - start }
+        cursors.setCursor(userId + '', range, user.get('name'), user.get('color'))
+      }
+    }
+  })
+}
+
+users.observeDeep(drawCursors)
+drawCursors()
+
+quill.on('selection-change', function (range) {
+  if (range != null) {
+    myUserInfo.set('range', {
+      start: Y.utils.getRelativePosition(yText, range.index),
+      end: Y.utils.getRelativePosition(yText, range.index + range.length)
+    })
+  } else {
+    myUserInfo.delete('range')
+  }
+  myUserInfo.set('last updated', new Date().toString())
+})
+
+let yText = y.define('quill', Y.Text)
+let quillBinding = new Y.QuillBinding(yText, quill)
+
+window.quillBinding = quillBinding
+window.yText = yText
+window.y = y
+window.quill = quill
+window.users = users
+window.cursors = cursors

examples_all/serviceworker/index.js

@@ -35,7 +35,7 @@ Y({
       toolbar: [
         [{ size: ['small', false, 'large', 'huge'] }],
         ['bold', 'italic', 'underline'],
-        [{ color: [] }, { background: [] }],    // Snow theme fills in values
+        [{ color: [] }, { background: [] }], // Snow theme fills in values
         [{ script: 'sub' }, { script: 'super' }],
         ['link', 'image'],
         ['link', 'code-block'],

index.js

@@ -0,0 +1,57 @@
+
+import './structs/Item.js'
+import { Delete } from './structs/Delete.js'
+import { ItemJSON } from './structs/ItemJSON.js'
+import { ItemString } from './structs/ItemString.js'
+import { ItemFormat } from './structs/ItemFormat.js'
+import { ItemEmbed } from './structs/ItemEmbed.js'
+import { ItemBinary } from './structs/ItemBinary.js'
+import { GC } from './structs/GC.js'
+
+import { YArray } from './types/YArray.js'
+import { YMap } from './types/YMap.js'
+import { YText } from './types/YText.js'
+import { YXmlText } from './types/YXmlText.js'
+import { YXmlHook } from './types/YXmlHook.js'
+import { YXmlElement, YXmlFragment } from './types/YXmlElement.js'
+
+import { registerStruct } from './utils/structReferences.js'
+
+import * as decoding from './lib/decoding.js'
+import * as encoding from './lib/encoding.js'
+import * as awarenessProtocol from './protocols/awareness.js'
+import * as syncProtocol from './protocols/sync.js'
+import * as authProtocol from './protocols/auth.js'
+
+export { decoding, encoding, awarenessProtocol, syncProtocol, authProtocol }
+
+export { Y } from './utils/Y.js'
+export { UndoManager } from './utils/UndoManager.js'
+export { Transaction } from './utils/Transaction.js'
+
+export { YArray as Array } from './types/YArray.js'
+export { YMap as Map } from './types/YMap.js'
+export { YText as Text } from './types/YText.js'
+export { YXmlText as XmlText } from './types/YXmlText.js'
+export { YXmlHook as XmlHook } from './types/YXmlHook.js'
+export { YXmlElement as XmlElement, YXmlFragment as XmlFragment } from './types/YXmlElement.js'
+
+export { getRelativePosition, fromRelativePosition } from './utils/relativePosition.js'
+export { registerStruct } from './utils/structReferences.js'
+export * from './lib/mutex.js'
+
+registerStruct(0, GC)
+registerStruct(1, ItemJSON)
+registerStruct(2, ItemString)
+registerStruct(3, ItemFormat)
+registerStruct(4, Delete)
+
+registerStruct(5, YArray)
+registerStruct(6, YMap)
+registerStruct(7, YText)
+registerStruct(8, YXmlFragment)
+registerStruct(9, YXmlElement)
+registerStruct(10, YXmlText)
+registerStruct(11, YXmlHook)
+registerStruct(12, ItemEmbed)
+registerStruct(13, ItemBinary)

lib/NamedEventHandler.js

@@ -0,0 +1,113 @@
+
+/**
+ * Handles named events.
+ */
+export class NamedEventHandler {
+  constructor () {
+    this._eventListener = new Map()
+    this._stateListener = new Map()
+  }
+
+  /**
+   * @private
+   * Returns all listeners that listen to a specified name.
+   *
+   * @param {String} name The query event name.
+   */
+  _getListener (name) {
+    let listeners = this._eventListener.get(name)
+    if (listeners === undefined) {
+      listeners = {
+        once: new Set(),
+        on: new Set()
+      }
+      this._eventListener.set(name, listeners)
+    }
+    return listeners
+  }
+
+  /**
+   * Adds a named event listener. The listener is removed after it has been
+   * called once.
+   *
+   * @param {String} name The event name to listen to.
+   * @param {Function} f The function that is executed when the event is fired.
+   */
+  once (name, f) {
+    let listeners = this._getListener(name)
+    listeners.once.add(f)
+  }
+
+  /**
+   * Adds a named event listener.
+   *
+   * @param {String} name The event name to listen to.
+   * @param {Function} f The function that is executed when the event is fired.
+   */
+  on (name, f) {
+    let listeners = this._getListener(name)
+    listeners.on.add(f)
+  }
+
+  /**
+   * @private
+   * Init the saved state for an event name.
+   */
+  _initStateListener (name) {
+    let state = this._stateListener.get(name)
+    if (state === undefined) {
+      state = {}
+      state.promise = new Promise(resolve => {
+        state.resolve = resolve
+      })
+      this._stateListener.set(name, state)
+    }
+    return state
+  }
+
+  /**
+   * Returns a Promise that is resolved when the event name is called.
+   * The Promise is immediately resolved when the event name was called in the
+   * past.
+   */
+  when (name) {
+    return this._initStateListener(name).promise
+  }
+
+  /**
+   * Remove an event listener that was registered with either
+   * {@link EventHandler#on} or {@link EventHandler#once}.
+   */
+  off (name, f) {
+    if (name == null || f == null) {
+      throw new Error('You must specify event name and function!')
+    }
+    const listener = this._eventListener.get(name)
+    if (listener !== undefined) {
+      listener.on.delete(f)
+      listener.once.delete(f)
+    }
+  }
+
+  /**
+   * Emit a named event. All registered event listeners that listen to the
+   * specified name will receive the event.
+   *
+   * @param {String} name The event name.
+   * @param {Array} args The arguments that are applied to the event listener.
+   */
+  emit (name, ...args) {
+    this._initStateListener(name).resolve()
+    const listener = this._eventListener.get(name)
+    if (listener !== undefined) {
+      listener.on.forEach(f => f.apply(null, args))
+      listener.once.forEach(f => f.apply(null, args))
+      listener.once = new Set()
+    } else if (name === 'error') {
+      console.error(args[0])
+    }
+  }
+  destroy () {
+    this._eventListener = null
+  }
+}

lib/Tree.js

@@ -0,0 +1,468 @@
+/**
+ * @module tree
+ */
+
+const rotate = (tree, parent, newParent, n) => {
+  if (parent === null) {
+    tree.root = newParent
+    newParent._parent = null
+  } else if (parent.left === n) {
+    parent.left = newParent
+  } else if (parent.right === n) {
+    parent.right = newParent
+  } else {
+    throw new Error('The elements are wrongly connected!')
+  }
+}
+
+class N {
+  // A created node is always red!
+  constructor (val) {
+    this.val = val
+    this.color = true
+    this._left = null
+    this._right = null
+    this._parent = null
+  }
+  isRed () { return this.color }
+  isBlack () { return !this.color }
+  redden () { this.color = true; return this }
+  blacken () { this.color = false; return this }
+  get grandparent () {
+    return this.parent.parent
+  }
+  get parent () {
+    return this._parent
+  }
+  get sibling () {
+    return (this === this.parent.left)
+      ? this.parent.right : this.parent.left
+  }
+  get left () {
+    return this._left
+  }
+  get right () {
+    return this._right
+  }
+  set left (n) {
+    if (n !== null) {
+      n._parent = this
+    }
+    this._left = n
+  }
+  set right (n) {
+    if (n !== null) {
+      n._parent = this
+    }
+    this._right = n
+  }
+  rotateLeft (tree) {
+    const parent = this.parent
+    const newParent = this.right
+    const newRight = this.right.left
+    newParent.left = this
+    this.right = newRight
+    rotate(tree, parent, newParent, this)
+  }
+  next () {
+    if (this.right !== null) {
+      // search the most left node in the right tree
+      var o = this.right
+      while (o.left !== null) {
+        o = o.left
+      }
+      return o
+    } else {
+      var p = this
+      while (p.parent !== null && p !== p.parent.left) {
+        p = p.parent
+      }
+      return p.parent
+    }
+  }
+  prev () {
+    if (this.left !== null) {
+      // search the most right node in the left tree
+      var o = this.left
+      while (o.right !== null) {
+        o = o.right
+      }
+      return o
+    } else {
+      var p = this
+      while (p.parent !== null && p !== p.parent.right) {
+        p = p.parent
+      }
+      return p.parent
+    }
+  }
+  rotateRight (tree) {
+    const parent = this.parent
+    const newParent = this.left
+    const newLeft = this.left.right
+    newParent.right = this
+    this.left = newLeft
+    rotate(tree, parent, newParent, this)
+  }
+  getUncle () {
+    // we can assume that grandparent exists when this is called!
+    if (this.parent === this.parent.parent.left) {
+      return this.parent.parent.right
+    } else {
+      return this.parent.parent.left
+    }
+  }
+}
+
+const isBlack = node =>
+  node !== null ? node.isBlack() : true
+
+const isRed = (node) =>
+  node !== null ? node.isRed() : false
+
+/*
+ * This is a Red Black Tree implementation
+ */
+export class Tree {
+  constructor () {
+    this.root = null
+    this.length = 0
+  }
+  findNext (id) {
+    var nextID = id.clone()
+    nextID.clock += 1
+    return this.findWithLowerBound(nextID)
+  }
+  findPrev (id) {
+    let prevID = id.clone()
+    prevID.clock -= 1
+    return this.findWithUpperBound(prevID)
+  }
+  findNodeWithLowerBound (from) {
+    var o = this.root
+    if (o === null) {
+      return null
+    } else {
+      while (true) {
+        if (from === null || (from.lessThan(o.val._id) && o.left !== null)) {
+          // o is included in the bound
+          // try to find an element that is closer to the bound
+          o = o.left
+        } else if (from !== null && o.val._id.lessThan(from)) {
+          // o is not within the bound, maybe one of the right elements is..
+          if (o.right !== null) {
+            o = o.right
+          } else {
+            // there is no right element. Search for the next bigger element,
+            // this should be within the bounds
+            return o.next()
+          }
+        } else {
+          return o
+        }
+      }
+    }
+  }
+  findNodeWithUpperBound (to) {
+    if (to === void 0) {
+      throw new Error('You must define from!')
+    }
+    var o = this.root
+    if (o === null) {
+      return null
+    } else {
+      while (true) {
+        if ((to === null || o.val._id.lessThan(to)) && o.right !== null) {
+          // o is included in the bound
+          // try to find an element that is closer to the bound
+          o = o.right
+        } else if (to !== null && to.lessThan(o.val._id)) {
+          // o is not within the bound, maybe one of the left elements is..
+          if (o.left !== null) {
+            o = o.left
+          } else {
+            // there is no left element. Search for the prev smaller element,
+            // this should be within the bounds
+            return o.prev()
+          }
+        } else {
+          return o
+        }
+      }
+    }
+  }
+  findSmallestNode () {
+    var o = this.root
+    while (o != null && o.left != null) {
+      o = o.left
+    }
+    return o
+  }
+  findWithLowerBound (from) {
+    var n = this.findNodeWithLowerBound(from)
+    return n == null ? null : n.val
+  }
+  findWithUpperBound (to) {
+    var n = this.findNodeWithUpperBound(to)
+    return n == null ? null : n.val
+  }
+  iterate (from, to, f) {
+    var o
+    if (from === null) {
+      o = this.findSmallestNode()
+    } else {
+      o = this.findNodeWithLowerBound(from)
+    }
+    while (
+      o !== null &&
+      (
+        to === null || // eslint-disable-line no-unmodified-loop-condition
+        o.val._id.lessThan(to) ||
+        o.val._id.equals(to)
+      )
+    ) {
+      f(o.val)
+      o = o.next()
+    }
+  }
+  find (id) {
+    let n = this.findNode(id)
+    if (n !== null) {
+      return n.val
+    } else {
+      return null
+    }
+  }
+  findNode (id) {
+    var o = this.root
+    if (o === null) {
+      return null
+    } else {
+      while (true) {
+        if (o === null) {
+          return null
+        }
+        if (id.lessThan(o.val._id)) {
+          o = o.left
+        } else if (o.val._id.lessThan(id)) {
+          o = o.right
+        } else {
+          return o
+        }
+      }
+    }
+  }
+  delete (id) {
+    var d = this.findNode(id)
+    if (d == null) {
+      // throw new Error('Element does not exist!')
+      return
+    }
+    this.length--
+    if (d.left !== null && d.right !== null) {
+      // switch d with the greates element in the left subtree.
+      // o should have at most one child.
+      var o = d.left
+      // find
+      while (o.right !== null) {
+        o = o.right
+      }
+      // switch
+      d.val = o.val
+      d = o
+    }
+    // d has at most one child
+    // let n be the node that replaces d
+    var isFakeChild
+    var child = d.left || d.right
+    if (child === null) {
+      isFakeChild = true
+      child = new N(null)
+      child.blacken()
+      d.right = child
+    } else {
+      isFakeChild = false
+    }
+
+    if (d.parent === null) {
+      if (!isFakeChild) {
+        this.root = child
+        child.blacken()
+        child._parent = null
+      } else {
+        this.root = null
+      }
+      return
+    } else if (d.parent.left === d) {
+      d.parent.left = child
+    } else if (d.parent.right === d) {
+      d.parent.right = child
+    } else {
+      throw new Error('Impossible!')
+    }
+    if (d.isBlack()) {
+      if (child.isRed()) {
+        child.blacken()
+      } else {
+        this._fixDelete(child)
+      }
+    }
+    this.root.blacken()
+    if (isFakeChild) {
+      if (child.parent.left === child) {
+        child.parent.left = null
+      } else if (child.parent.right === child) {
+        child.parent.right = null
+      } else {
+        throw new Error('Impossible #3')
+      }
+    }
+  }
+  _fixDelete (n) {
+    if (n.parent === null) {
+      // this can only be called after the first iteration of fixDelete.
+      return
+    }
+    // d was already replaced by the child
+    // d is not the root
+    // d and child are black
+    var sibling = n.sibling
+    if (isRed(sibling)) {
+      // make sibling the grandfather
+      n.parent.redden()
+      sibling.blacken()
+      if (n === n.parent.left) {
+        n.parent.rotateLeft(this)
+      } else if (n === n.parent.right) {
+        n.parent.rotateRight(this)
+      } else {
+        throw new Error('Impossible #2')
+      }
+      sibling = n.sibling
+    }
+    // parent, sibling, and children of n are black
+    if (n.parent.isBlack() &&
+      sibling.isBlack() &&
+      isBlack(sibling.left) &&
+      isBlack(sibling.right)
+    ) {
+      sibling.redden()
+      this._fixDelete(n.parent)
+    } else if (n.parent.isRed() &&
+      sibling.isBlack() &&
+      isBlack(sibling.left) &&
+      isBlack(sibling.right)
+    ) {
+      sibling.redden()
+      n.parent.blacken()
+    } else {
+      if (n === n.parent.left &&
+        sibling.isBlack() &&
+        isRed(sibling.left) &&
+        isBlack(sibling.right)
+      ) {
+        sibling.redden()
+        sibling.left.blacken()
+        sibling.rotateRight(this)
+        sibling = n.sibling
+      } else if (n === n.parent.right &&
+        sibling.isBlack() &&
+        isRed(sibling.right) &&
+        isBlack(sibling.left)
+      ) {
+        sibling.redden()
+        sibling.right.blacken()
+        sibling.rotateLeft(this)
+        sibling = n.sibling
+      }
+      sibling.color = n.parent.color
+      n.parent.blacken()
+      if (n === n.parent.left) {
+        sibling.right.blacken()
+        n.parent.rotateLeft(this)
+      } else {
+        sibling.left.blacken()
+        n.parent.rotateRight(this)
+      }
+    }
+  }
+  put (v) {
+    var node = new N(v)
+    if (this.root !== null) {
+      var p = this.root // p abbrev. parent
+      while (true) {
+        if (node.val._id.lessThan(p.val._id)) {
+          if (p.left === null) {
+            p.left = node
+            break
+          } else {
+            p = p.left
+          }
+        } else if (p.val._id.lessThan(node.val._id)) {
+          if (p.right === null) {
+            p.right = node
+            break
+          } else {
+            p = p.right
+          }
+        } else {
+          p.val = node.val
+          return p
+        }
+      }
+      this._fixInsert(node)
+    } else {
+      this.root = node
+    }
+    this.length++
+    this.root.blacken()
+    return node
+  }
+  _fixInsert (n) {
+    if (n.parent === null) {
+      n.blacken()
+      return
+    } else if (n.parent.isBlack()) {
+      return
+    }
+    var uncle = n.getUncle()
+    if (uncle !== null && uncle.isRed()) {
+      // Note: parent: red, uncle: red
+      n.parent.blacken()
+      uncle.blacken()
+      n.grandparent.redden()
+      this._fixInsert(n.grandparent)
+    } else {
+      // Note: parent: red, uncle: black or null
+      // Now we transform the tree in such a way that
+      // either of these holds:
+      //   1) grandparent.left.isRed
+      //     and grandparent.left.left.isRed
+      //   2) grandparent.right.isRed
+      //     and grandparent.right.right.isRed
+      if (n === n.parent.right && n.parent === n.grandparent.left) {
+        n.parent.rotateLeft(this)
+        // Since we rotated and want to use the previous
+        // cases, we need to set n in such a way that
+        // n.parent.isRed again
+        n = n.left
+      } else if (n === n.parent.left && n.parent === n.grandparent.right) {
+        n.parent.rotateRight(this)
+        // see above
+        n = n.right
+      }
+      // Case 1) or 2) hold from here on.
+      // Now traverse grandparent, make parent a black node
+      // on the highest level which holds two red nodes.
+      n.parent.blacken()
+      n.grandparent.redden()
+      if (n === n.parent.left) {
+        // Case 1
+        n.grandparent.rotateRight(this)
+      } else {
+        // Case 2
+        n.grandparent.rotateLeft(this)
+      }
+    }
+  }
+}

lib/binary.js

@@ -0,0 +1,40 @@
+/* eslint-env browser */
+
+/**
+ * @module binary
+ */
+
+import * as string from './string.js'
+import * as globals from './globals.js'
+
+export const BITS32 = 0xFFFFFFFF
+export const BITS21 = (1 << 21) - 1
+export const BITS16 = (1 << 16) - 1
+
+export const BIT26 = 1 << 26
+export const BIT32 = 1 << 32
+
+/**
+ * @param {Uint8Array} bytes
+ * @return {string}
+ */
+export const toBase64 = bytes => {
+  let s = ''
+  for (let i = 0; i < bytes.byteLength; i++) {
+    s += string.fromCharCode(bytes[i])
+  }
+  return btoa(s)
+}
+
+/**
+ * @param {string} s
+ * @return {Uint8Array}
+ */
+export const fromBase64 = s => {
+  const a = atob(s)
+  const bytes = globals.createUint8ArrayFromLen(a.length)
+  for (let i = 0; i < a.length; i++) {
+    bytes[i] = a.charCodeAt(i)
+  }
+  return bytes
+}

lib/broadcastchannel.js

@@ -0,0 +1,72 @@
+/* eslint-env browser */
+
+import * as binary from './binary.js'
+import * as globals from './globals.js'
+
+/**
+ * @typedef {Object} Channel
+ * @property {Set<Function>} Channel.subs
+ * @property {BC} Channel.bc
+ */
+
+/**
+ * @type {Map<string, Channel>}
+ */
+const channels = new Map()
+
+class LocalStoragePolyfill {
+  constructor (room) {
+    this.room = room
+    this.onmessage = null
+    addEventListener('storage', e => e.key === room && this.onmessage !== null && this.onmessage({ data: binary.fromBase64(e.newValue) }))
+  }
+  /**
+   * @param {ArrayBuffer} data
+   */
+  postMessage (buf) {
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem(this.room, binary.toBase64(globals.createUint8ArrayFromArrayBuffer(buf)))
+    }
+  }
+}
+
+// Use BroadcastChannel or Polyfill
+const BC = typeof BroadcastChannel === 'undefined' ? LocalStoragePolyfill : BroadcastChannel
+
+/**
+ * @param {string} room
+ * @return {Channel}
+ */
+const getChannel = room => {
+  let c = channels.get(room)
+  if (c === undefined) {
+    const subs = new Set()
+    const bc = new BC(room)
+    bc.onmessage = e => subs.forEach(sub => sub(e.data))
+    c = {
+      bc, subs
+    }
+    channels.set(room, c)
+  }
+  return c
+}
+
+/**
+ * @function
+ * @param {string} room
+ * @param {Function} f
+ */
+export const subscribe = (room, f) => getChannel(room).subs.add(f)
+
+/**
+ * Publish data to all subscribers (including subscribers on this tab)
+ *
+ * @function
+ * @param {string} room
+ * @param {ArrayBuffer} data
+ */
+export const publish = (room, data) => {
+  const c = getChannel(room)
+  c.bc.postMessage(data)
+  c.subs.forEach(sub => sub(data))
+}

lib/decoding.js

@@ -0,0 +1,205 @@
+/**
+ * @module decoding
+ */
+
+/* global Buffer */
+
+import * as globals from './globals.js'
+
+/**
+ * A Decoder handles the decoding of an ArrayBuffer.
+ */
+export class Decoder {
+  /**
+   * @param {ArrayBuffer} buffer Binary data to decode
+   */
+  constructor (buffer) {
+    this.arr = new Uint8Array(buffer)
+    this.pos = 0
+  }
+}
+
+/**
+ * @function
+ * @param {ArrayBuffer} buffer
+ * @return {Decoder}
+ */
+export const createDecoder = buffer => new Decoder(buffer)
+
+/**
+ * @function
+ * @param {Decoder} decoder
+ * @return {boolean}
+ */
+export const hasContent = decoder => decoder.pos !== decoder.arr.length
+
+/**
+ * Clone a decoder instance.
+ * Optionally set a new position parameter.
+ *
+ * @function
+ * @param {Decoder} decoder The decoder instance
+ * @param {number} [newPos] Defaults to current position
+ * @return {Decoder} A clone of `decoder`
+ */
+export const clone = (decoder, newPos = decoder.pos) => {
+  let _decoder = createDecoder(decoder.arr.buffer)
+  _decoder.pos = newPos
+  return _decoder
+}
+
+/**
+ * Read `len` bytes as an ArrayBuffer.
+ * @function
+ * @param {Decoder} decoder The decoder instance
+ * @param {number} len The length of bytes to read
+ * @return {ArrayBuffer}
+ */
+export const readArrayBuffer = (decoder, len) => {
+  const arrayBuffer = globals.createUint8ArrayFromLen(len)
+  const view = globals.createUint8ArrayFromBuffer(decoder.arr.buffer, decoder.pos, len)
+  arrayBuffer.set(view)
+  decoder.pos += len
+  return arrayBuffer.buffer
+}
+
+/**
+ * Read variable length payload as ArrayBuffer
+ * @function
+ * @param {Decoder} decoder
+ * @return {ArrayBuffer}
+ */
+export const readPayload = decoder => readArrayBuffer(decoder, readVarUint(decoder))
+
+/**
+ * Read the rest of the content as an ArrayBuffer
+ * @function
+ * @param {Decoder} decoder
+ * @return {ArrayBuffer}
+ */
+export const readTail = decoder => readArrayBuffer(decoder, decoder.arr.length - decoder.pos)
+
+/**
+ * Skip one byte, jump to the next position.
+ * @function
+ * @param {Decoder} decoder The decoder instance
+ * @return {number} The next position
+ */
+export const skip8 = decoder => decoder.pos++
+
+/**
+ * Read one byte as unsigned integer.
+ * @function
+ * @param {Decoder} decoder The decoder instance
+ * @return {number} Unsigned 8-bit integer
+ */
+export const readUint8 = decoder => decoder.arr[decoder.pos++]
+
+/**
+ * Read 4 bytes as unsigned integer.
+ *
+ * @function
+ * @param {Decoder} decoder
+ * @return {number} An unsigned integer.
+ */
+export const readUint32 = decoder => {
+  let uint =
+    decoder.arr[decoder.pos] +
+    (decoder.arr[decoder.pos + 1] << 8) +
+    (decoder.arr[decoder.pos + 2] << 16) +
+    (decoder.arr[decoder.pos + 3] << 24)
+  decoder.pos += 4
+  return uint
+}
+
+/**
+ * Look ahead without incrementing position.
+ * to the next byte and read it as unsigned integer.
+ *
+ * @function
+ * @param {Decoder} decoder
+ * @return {number} An unsigned integer.
+ */
+export const peekUint8 = decoder => decoder.arr[decoder.pos]
+
+/**
+ * Read unsigned integer (32bit) with variable length.
+ * 1/8th of the storage is used as encoding overhead.
+ *  * numbers < 2^7 is stored in one bytlength
+ *  * numbers < 2^14 is stored in two bylength
+ *
+ * @function
+ * @param {Decoder} decoder
+ * @return {number} An unsigned integer.length
+ */
+export const readVarUint = decoder => {
+  let num = 0
+  let len = 0
+  while (true) {
+    let r = decoder.arr[decoder.pos++]
+    num = num | ((r & 0b1111111) << len)
+    len += 7
+    if (r < 1 << 7) {
+      return num >>> 0 // return unsigned number!
+    }
+    if (len > 35) {
+      throw new Error('Integer out of range!')
+    }
+  }
+}
+
+/**
+ * Look ahead and read varUint without incrementing position
+ *
+ * @function
+ * @param {Decoder} decoder
+ * @return {number}
+ */
+export const peekVarUint = decoder => {
+  let pos = decoder.pos
+  let s = readVarUint(decoder)
+  decoder.pos = pos
+  return s
+}
+
+/**
+ * Read string of variable length
+ * * varUint is used to store the length of the string
+ *
+ * Transforming utf8 to a string is pretty expensive. The code performs 10x better
+ * when String.fromCodePoint is fed with all characters as arguments.
+ * But most environments have a maximum number of arguments per functions.
+ * For effiency reasons we apply a maximum of 10000 characters at once.
+ *
+ * @function
+ * @param {Decoder} decoder
+ * @return {String} The read String.
+ */
+export const readVarString = decoder => {
+  let remainingLen = readVarUint(decoder)
+  let encodedString = ''
+  while (remainingLen > 0) {
+    const nextLen = remainingLen < 10000 ? remainingLen : 10000
+    const bytes = new Array(nextLen)
+    for (let i = 0; i < nextLen; i++) {
+      bytes[i] = decoder.arr[decoder.pos++]
+    }
+    encodedString += String.fromCodePoint.apply(null, bytes)
+    remainingLen -= nextLen
+  }
+  return decodeURIComponent(escape(encodedString))
+}
+
+/**
+ * Look ahead and read varString without incrementing position
+ *
+ * @function
+ * @param {Decoder} decoder
+ * @return {string}
+ */
+export const peekVarString = decoder => {
+  let pos = decoder.pos
+  let s = readVarString(decoder)
+  decoder.pos = pos
+  return s
+}

lib/diff.js

@@ -0,0 +1,50 @@
+/**
+ * @module diff
+ */
+
+/**
+ * A SimpleDiff describes a change on a String.
+ *
+ * @example
+ * console.log(a) // the old value
+ * console.log(b) // the updated value
+ * // Apply changes of diff (pseudocode)
+ * a.remove(diff.pos, diff.remove) // Remove `diff.remove` characters
+ * a.insert(diff.pos, diff.insert) // Insert `diff.insert`
+ * a === b // values match
+ *
+ * @typedef {Object} SimpleDiff
+ * @property {Number} pos The index where changes were applied
+ * @property {Number} remove The number of characters to delete starting
+ *                                  at `index`.
+ * @property {String} insert The new text to insert at `index` after applying
+ *                           `delete`
+ */
+
+/**
+ * Create a diff between two strings. This diff implementation is highly
+ * efficient, but not very sophisticated.
+ *
+ * @public
+ * @param {String} a The old version of the string
+ * @param {String} b The updated version of the string
+ * @return {SimpleDiff} The diff description.
+ */
+export const simpleDiff = (a, b) => {
+  let left = 0 // number of same characters counting from left
+  let right = 0 // number of same characters counting from right
+  while (left < a.length && left < b.length && a[left] === b[left]) {
+    left++
+  }
+  if (left !== a.length || left !== b.length) {
+    // Only check right if a !== b
+    while (right + left < a.length && right + left < b.length && a[a.length - right - 1] === b[b.length - right - 1]) {
+      right++
+    }
+  }
+  return {
+    pos: left, // TODO: rename to index (also in type above)
+    remove: a.length - left - right,
+    insert: b.slice(left, b.length - right)
+  }
+}

lib/encoding.js

@@ -0,0 +1,243 @@
+/**
+ * @module encoding
+ */
+import * as globals from './globals.js'
+
+const bits7 = 0b1111111
+const bits8 = 0b11111111
+
+/**
+ * A BinaryEncoder handles the encoding to an ArrayBuffer.
+ */
+export class Encoder {
+  constructor () {
+    this.cpos = 0
+    this.cbuf = globals.createUint8ArrayFromLen(1000)
+    this.bufs = []
+  }
+}
+
+/**
+ * @function
+ * @return {Encoder}
+ */
+export const createEncoder = () => new Encoder()
+
+/**
+ * The current length of the encoded data.
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @return {number}
+ */
+export const length = encoder => {
+  let len = encoder.cpos
+  for (let i = 0; i < encoder.bufs.length; i++) {
+    len += encoder.bufs[i].length
+  }
+  return len
+}
+
+/**
+ * Transform to ArrayBuffer. TODO: rename to .toArrayBuffer
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @return {ArrayBuffer} The created ArrayBuffer.
+ */
+export const toBuffer = encoder => {
+  const uint8arr = globals.createUint8ArrayFromLen(length(encoder))
+  let curPos = 0
+  for (let i = 0; i < encoder.bufs.length; i++) {
+    let d = encoder.bufs[i]
+    uint8arr.set(d, curPos)
+    curPos += d.length
+  }
+  uint8arr.set(globals.createUint8ArrayFromBuffer(encoder.cbuf.buffer, 0, encoder.cpos), curPos)
+  return uint8arr.buffer
+}
+
+/**
+ * Write one byte to the encoder.
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @param {number} num The byte that is to be encoded.
+ */
+export const write = (encoder, num) => {
+  if (encoder.cpos === encoder.cbuf.length) {
+    encoder.bufs.push(encoder.cbuf)
+    encoder.cbuf = globals.createUint8ArrayFromLen(encoder.cbuf.length * 2)
+    encoder.cpos = 0
+  }
+  encoder.cbuf[encoder.cpos++] = num
+}
+
+/**
+ * Write one byte at a specific position.
+ * Position must already be written (i.e. encoder.length > pos)
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @param {number} pos Position to which to write data
+ * @param {number} num Unsigned 8-bit integer
+ */
+export const set = (encoder, pos, num) => {
+  let buffer = null
+  // iterate all buffers and adjust position
+  for (let i = 0; i < encoder.bufs.length && buffer === null; i++) {
+    const b = encoder.bufs[i]
+    if (pos < b.length) {
+      buffer = b // found buffer
+    } else {
+      pos -= b.length
+    }
+  }
+  if (buffer === null) {
+    // use current buffer
+    buffer = encoder.cbuf
+  }
+  buffer[pos] = num
+}
+
+/**
+ * Write one byte as an unsigned integer.
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @param {number} num The number that is to be encoded.
+ */
+export const writeUint8 = (encoder, num) => write(encoder, num & bits8)
+
+/**
+ * Write one byte as an unsigned Integer at a specific location.
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @param {number} pos The location where the data will be written.
+ * @param {number} num The number that is to be encoded.
+ */
+export const setUint8 = (encoder, pos, num) => set(encoder, pos, num & bits8)
+
+/**
+ * Write two bytes as an unsigned integer.
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @param {number} num The number that is to be encoded.
+ */
+export const writeUint16 = (encoder, num) => {
+  write(encoder, num & bits8)
+  write(encoder, (num >>> 8) & bits8)
+}
+/**
+ * Write two bytes as an unsigned integer at a specific location.
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @param {number} pos The location where the data will be written.
+ * @param {number} num The number that is to be encoded.
+ */
+export const setUint16 = (encoder, pos, num) => {
+  set(encoder, pos, num & bits8)
+  set(encoder, pos + 1, (num >>> 8) & bits8)
+}
+
+/**
+ * Write two bytes as an unsigned integer
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @param {number} num The number that is to be encoded.
+ */
+export const writeUint32 = (encoder, num) => {
+  for (let i = 0; i < 4; i++) {
+    write(encoder, num & bits8)
+    num >>>= 8
+  }
+}
+
+/**
+ * Write two bytes as an unsigned integer at a specific location.
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @param {number} pos The location where the data will be written.
+ * @param {number} num The number that is to be encoded.
+ */
+export const setUint32 = (encoder, pos, num) => {
+  for (let i = 0; i < 4; i++) {
+    set(encoder, pos + i, num & bits8)
+    num >>>= 8
+  }
+}
+
+/**
+ * Write a variable length unsigned integer.
+ *
+ * Encodes integers in the range from [0, 4294967295] / [0, 0xffffffff]. (max 32 bit unsigned integer)
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @param {number} num The number that is to be encoded.
+ */
+export const writeVarUint = (encoder, num) => {
+  while (num >= 0b10000000) {
+    write(encoder, 0b10000000 | (bits7 & num))
+    num >>>= 7
+  }
+  write(encoder, bits7 & num)
+}
+
+/**
+ * Write a variable length string.
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @param {String} str The string that is to be encoded.
+ */
+export const writeVarString = (encoder, str) => {
+  const encodedString = unescape(encodeURIComponent(str))
+  const len = encodedString.length
+  writeVarUint(encoder, len)
+  for (let i = 0; i < len; i++) {
+    write(encoder, encodedString.codePointAt(i))
+  }
+}
+
+/**
+ * Write the content of another Encoder.
+ *
+ * TODO: can be improved!
+ *
+ * @function
+ * @param {Encoder} encoder The enUint8Arr
+ * @param {Encoder} append The BinaryEncoder to be written.
+ */
+export const writeBinaryEncoder = (encoder, append) => writeArrayBuffer(encoder, toBuffer(append))
+
+/**
+ * Append an arrayBuffer to the encoder.
+ *
+ * @function
+ * @param {Encoder} encoder
+ * @param {ArrayBuffer} arrayBuffer
+ */
+export const writeArrayBuffer = (encoder, arrayBuffer) => {
+  const prevBufferLen = encoder.cbuf.length
+  // TODO: Append to cbuf if possible
+  encoder.bufs.push(globals.createUint8ArrayFromBuffer(encoder.cbuf.buffer, 0, encoder.cpos))
+  encoder.bufs.push(globals.createUint8ArrayFromArrayBuffer(arrayBuffer))
+  encoder.cbuf = globals.createUint8ArrayFromLen(prevBufferLen)
+  encoder.cpos = 0
+}
+
+/**
+ * @function
+ * @param {Encoder} encoder
+ * @param {ArrayBuffer} arrayBuffer
+ */
+export const writePayload = (encoder, arrayBuffer) => {
+  writeVarUint(encoder, arrayBuffer.byteLength)
+  writeArrayBuffer(encoder, arrayBuffer)
+}

lib/encoding.test.js

@@ -0,0 +1,49 @@
+import * as encoding from './encoding.js'
+
+/**
+ * Check if binary encoding is compatible with golang binary encoding - binary.PutVarUint.
+ *
+ * Result: is compatible up to 32 bit: [0, 4294967295] / [0, 0xffffffff]. (max 32 bit unsigned integer)
+ */
+let err = null
+try {
+  const tests = [
+    { in: 0, out: [0] },
+    { in: 1, out: [1] },
+    { in: 128, out: [128, 1] },
+    { in: 200, out: [200, 1] },
+    { in: 32, out: [32] },
+    { in: 500, out: [244, 3] },
+    { in: 256, out: [128, 2] },
+    { in: 700, out: [188, 5] },
+    { in: 1024, out: [128, 8] },
+    { in: 1025, out: [129, 8] },
+    { in: 4048, out: [208, 31] },
+    { in: 5050, out: [186, 39] },
+    { in: 1000000, out: [192, 132, 61] },
+    { in: 34951959, out: [151, 166, 213, 16] },
+    { in: 2147483646, out: [254, 255, 255, 255, 7] },
+    { in: 2147483647, out: [255, 255, 255, 255, 7] },
+    { in: 2147483648, out: [128, 128, 128, 128, 8] },
+    { in: 2147483700, out: [180, 128, 128, 128, 8] },
+    { in: 4294967294, out: [254, 255, 255, 255, 15] },
+    { in: 4294967295, out: [255, 255, 255, 255, 15] }
+  ]
+  tests.forEach(test => {
+    const encoder = encoding.createEncoder()
+    encoding.writeVarUint(encoder, test.in)
+    const buffer = new Uint8Array(encoding.toBuffer(encoder))
+    if (buffer.byteLength !== test.out.length) {
+      throw new Error('Length don\'t match!')
+    }
+    for (let j = 0; j < buffer.length; j++) {
+      if (buffer[j] !== test[1][j]) {
+        throw new Error('values don\'t match!')
+      }
+    }
+  })
+} catch (error) {
+  err = error
+} finally {
+  console.log('YDB Client: Encoding varUint compatiblity test: ', err || 'success!')
+}

lib/globals.js

@@ -0,0 +1,65 @@
+/**
+ * @module globals
+ */
+
+/* eslint-env browser */
+
+export const Uint8Array_ = Uint8Array
+
+/**
+ * @param {Array<number>} arr
+ * @return {ArrayBuffer}
+ */
+export const createArrayBufferFromArray = arr => new Uint8Array_(arr).buffer
+
+export const createUint8ArrayFromLen = len => new Uint8Array_(len)
+
+/**
+ * Create Uint8Array with initial content from buffer
+ */
+export const createUint8ArrayFromBuffer = (buffer, byteOffset, length) => new Uint8Array_(buffer, byteOffset, length)
+
+/**
+ * Create Uint8Array with initial content from buffer
+ */
+export const createUint8ArrayFromArrayBuffer = arraybuffer => new Uint8Array_(arraybuffer)
+export const createArrayFromArrayBuffer = arraybuffer => Array.from(createUint8ArrayFromArrayBuffer(arraybuffer))
+
+export const createPromise = f => new Promise(f)
+
+export const createMap = () => new Map()
+export const createSet = () => new Set()
+
+/**
+ * `Promise.all` wait for all promises in the array to resolve and return the result
+ * @param {Array<Promise<any>>} arrp
+ * @return {any}
+ */
+export const pall = arrp => Promise.all(arrp)
+export const preject = reason => Promise.reject(reason)
+export const presolve = res => Promise.resolve(res)
+
+export const until = (timeout, check) => createPromise((resolve, reject) => {
+  const hasTimeout = timeout > 0
+  const untilInterval = () => {
+    if (check()) {
+      clearInterval(intervalHandle)
+      resolve()
+    } else if (hasTimeout) {
+      timeout -= 10
+      if (timeout < 0) {
+        clearInterval(intervalHandle)
+        reject(error('Timeout'))
+      }
+    }
+  }
+  const intervalHandle = setInterval(untilInterval, 10)
+})
+
+export const error = description => new Error(description)
+
+/**
+ * @param {number} t Time to wait
+ * @return {Promise} Promise that is resolved after t ms
+ */
+export const wait = t => createPromise(r => setTimeout(r, t))

lib/idb.js

@@ -0,0 +1,166 @@
+/**
+ * @module lib/idb
+ */
+
+/* eslint-env browser */
+
+import * as globals from './globals.js'
+
+/*
+ * IDB Request to Promise transformer
+ */
+export const rtop = request => globals.createPromise((resolve, reject) => {
+  request.onerror = event => reject(new Error(event.target.error))
+  request.onblocked = () => location.reload()
+  request.onsuccess = event => resolve(event.target.result)
+})
+
+/**
+ * @param {string} name
+ * @param {Function} initDB Called when the database is first created
+ * @return {Promise<IDBDatabase>}
+ */
+export const openDB = (name, initDB) => globals.createPromise((resolve, reject) => {
+  let request = indexedDB.open(name)
+  /**
+   * @param {any} event
+   */
+  request.onupgradeneeded = event => initDB(event.target.result)
+  /**
+   * @param {any} event
+   */
+  request.onerror = event => reject(new Error(event.target.error))
+  request.onblocked = () => location.reload()
+  /**
+   * @param {any} event
+   */
+  request.onsuccess = event => {
+    const db = event.target.result
+    db.onversionchange = () => { db.close() }
+    addEventListener('unload', () => db.close())
+    resolve(db)
+  }
+})
+
+export const deleteDB = name => rtop(indexedDB.deleteDatabase(name))
+
+export const createStores = (db, definitions) => definitions.forEach(d =>
+  db.createObjectStore.apply(db, d)
+)
+
+/**
+ * @param {IDBObjectStore} store
+ * @param {String | number | ArrayBuffer | Date | Array } key
+ * @return {Promise<ArrayBuffer>}
+ */
+export const get = (store, key) =>
+  rtop(store.get(key))
+
+/**
+ * @param {IDBObjectStore} store
+ * @param {String | number | ArrayBuffer | Date | IDBKeyRange | Array } key
+ */
+export const del = (store, key) =>
+  rtop(store.delete(key))
+
+/**
+ * @param {IDBObjectStore} store
+ * @param {String | number | ArrayBuffer | Date | boolean} item
+ * @param {String | number | ArrayBuffer | Date | Array} [key]
+ */
+export const put = (store, item, key) =>
+  rtop(store.put(item, key))
+
+/**
+ * @param {IDBObjectStore} store
+ * @param {String | number | ArrayBuffer | Date | boolean}  item
+ * @param {String | number | ArrayBuffer | Date | Array}  [key]
+ * @return {Promise<ArrayBuffer>}
+ */
+export const add = (store, item, key) =>
+  rtop(store.add(item, key))
+
+/**
+ * @param {IDBObjectStore} store
+ * @param {String | number | ArrayBuffer | Date}  item
+ * @return {Promise<number>}
+ */
+export const addAutoKey = (store, item) =>
+  rtop(store.add(item))
+
+/**
+ * @param {IDBObjectStore} store
+ * @param {IDBKeyRange} [range]
+ */
+export const getAll = (store, range) =>
+  rtop(store.getAll(range))
+
+/**
+ * @param {IDBObjectStore} store
+ * @param {IDBKeyRange} [range]
+ */
+export const getAllKeys = (store, range) =>
+  rtop(store.getAllKeys(range))
+
+/**
+ * @typedef KeyValuePair
+ * @type {Object}
+ * @property {any} k key
+ * @property {any} v Value
+ */
+
+/**
+ * @param {IDBObjectStore} store
+ * @param {IDBKeyRange} [range]
+ * @return {Promise<Array<KeyValuePair>>}
+ */
+export const getAllKeysValues = (store, range) =>
+  globals.pall([getAllKeys(store, range), getAll(store, range)]).then(([ks, vs]) => ks.map((k, i) => ({ k, v: vs[i] })))
+
+/**
+ * Iterate on keys and values
+ * @param {IDBObjectStore} store
+ * @param {IDBKeyRange?} keyrange
+ * @param {Function} f Return true in order to continue the cursor
+ */
+export const iterate = (store, keyrange, f) => globals.createPromise((resolve, reject) => {
+  const request = store.openCursor(keyrange)
+  request.onerror = reject
+  /**
+   * @param {any} event
+   */
+  request.onsuccess = event => {
+    const cursor = event.target.result
+    if (cursor === null) {
+      return resolve()
+    }
+    f(cursor.value, cursor.key)
+    cursor.continue()
+  }
+})
+
+/**
+ * Iterate on the keys (no values)
+ *
+ * @param {IDBObjectStore} store
+ * @param {IDBKeyRange} keyrange
+ * @param {function} f Call `idbcursor.continue()` to iterate further
+ */
+export const iterateKeys = (store, keyrange, f) => {
+  /**
+   * @param {any} event
+   */
+  store.openKeyCursor(keyrange).onsuccess = event => f(event.target.result)
+}
+
+/**
+ * Open store from transaction
+ * @param {IDBTransaction} t
+ * @param {String} store
+ * @returns {IDBObjectStore}
+ */
+export const getStore = (t, store) => t.objectStore(store)
+
+export const createIDBKeyRangeBound = (lower, upper, lowerOpen, upperOpen) => IDBKeyRange.bound(lower, upper, lowerOpen, upperOpen)
+export const createIDBKeyRangeUpperBound = (upper, upperOpen) => IDBKeyRange.upperBound(upper, upperOpen)
+export const createIDBKeyRangeLowerBound = (lower, lowerOpen) => IDBKeyRange.lowerBound(lower, lowerOpen)

lib/idb.test.js

@@ -0,0 +1,34 @@
+import * as test from './testing.js'
+import * as idb from './idb.js'
+import * as logging from './logging.js'
+
+const initTestDB = db => idb.createStores(db, [['test']])
+const testDBName = 'idb-test'
+
+const createTransaction = db => db.transaction(['test'], 'readwrite')
+/**
+ * @param {IDBTransaction} t
+ * @return {IDBObjectStore}
+ */
+const getStore = t => idb.getStore(t, 'test')
+
+idb.deleteDB(testDBName).then(() => idb.openDB(testDBName, initTestDB)).then(db => {
+  test.run('idb iteration', async testname => {
+    const t = createTransaction(db)
+    await idb.put(getStore(t), 0, ['t', 0])
+    await idb.put(getStore(t), 1, ['t', 1])
+    const valsGetAll = await idb.getAll(getStore(t))
+    if (valsGetAll.length !== 2) {
+      logging.fail('getAll does not return two values')
+    }
+    const valsIterate = []
+    const keyrange = idb.createIDBKeyRangeBound(['t', 0], ['t', 1], false, false)
+    await idb.put(getStore(t), 2, ['t', 2])
+    await idb.iterate(getStore(t), keyrange, (val, key) => {
+      valsIterate.push(val)
+    })
+    if (valsIterate.length !== 2) {
+      logging.fail('iterate does not return two values')
+    }
+  })
+})

lib/logging.js

@@ -0,0 +1,26 @@
+/**
+ * @module logging
+ */
+
+import * as globals from './globals.js'
+
+let date = new Date().getTime()
+
+const writeDate = () => {
+  const oldDate = date
+  date = new Date().getTime()
+  return date - oldDate
+}
+
+export const print = (...args) => console.log(...args)
+export const log = m => print(`%cydb-client: %c${m} %c+${writeDate()}ms`, 'color: blue;', '', 'color: blue')
+
+export const fail = m => {
+  throw new Error(m)
+}
+
+/**
+ * @param {ArrayBuffer} buffer
+ * @return {string}
+ */
+export const arrayBufferToString = buffer => JSON.stringify(Array.from(globals.createUint8ArrayFromBuffer(buffer)))

lib/math.js

@@ -0,0 +1,28 @@
+/**
+ * @module math
+ */
+export const floor = Math.floor
+
+/**
+ * @function
+ * @param {number} a
+ * @param {number} b
+ * @return {number} The sum of a and b
+ */
+export const add = (a, b) => a + b
+
+/**
+ * @function
+ * @param {number} a
+ * @param {number} b
+ * @return {number} The smaller element of a and b
+ */
+export const min = (a, b) => a < b ? a : b
+
+/**
+ * @function
+ * @param {number} a
+ * @param {number} b
+ * @return {number} The bigger element of a and b
+ */
+export const max = (a, b) => a > b ? a : b

lib/mutex.js

@@ -0,0 +1,31 @@
+
+/**
+ * Creates a mutual exclude function with the following property:
+ *
+ * @example
+ * const mutex = createMutex()
+ * mutex(() => {
+ *   // This function is immediately executed
+ *   mutex(() => {
+ *     // This function is not executed, as the mutex is already active.
+ *   })
+ * })
+ *
+ * @return {Function} A mutual exclude function
+ * @public
+ */
+export const createMutex = () => {
+  let token = true
+  return (f, g) => {
+    if (token) {
+      token = false
+      try {
+        f()
+      } finally {
+        token = true
+      }
+    } else if (g !== undefined) {
+      g()
+    }
+  }
+}

lib/number.js

@@ -0,0 +1,6 @@
+/**
+ * @module number
+ */
+
+export const MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER
+export const MIN_SAFE_INTEGER = Number.MIN_SAFE_INTEGER

lib/object.js

@@ -0,0 +1,14 @@
+
+export const create = Object.create(null)
+
+export const keys = Object.keys
+
+export const equalFlat = (a, b) => {
+  const keys = Object.keys(a)
+  let eq = keys.length === Object.keys(b).length
+  for (let i = 0; i < keys.length && eq; i++) {
+    const key = keys[i]
+    eq = a[key] === b[key]
+  }
+  return eq
+}

lib/prng/PRNG/Mt19937.js

@@ -0,0 +1,67 @@
+/**
+ * @module prng
+ */
+const N = 624
+const M = 397
+
+const twist = (u, v) => ((((u & 0x80000000) | (v & 0x7fffffff)) >>> 1) ^ ((v & 1) ? 0x9908b0df : 0))
+
+const nextState = (state) => {
+  let p = 0
+  let j
+  for (j = N - M + 1; --j; p++) {
+    state[p] = state[p + M] ^ twist(state[p], state[p + 1])
+  }
+  for (j = M; --j; p++) {
+    state[p] = state[p + M - N] ^ twist(state[p], state[p + 1])
+  }
+  state[p] = state[p + M - N] ^ twist(state[p], state[0])
+}
+
+/**
+ * This is a port of Shawn Cokus's implementation of the original Mersenne Twister algorithm (http://www.math.sci.hiroshima-u.ac.jp/~m-mat/MT/MT2002/CODES/MTARCOK/mt19937ar-cok.c).
+ * MT has a very high period of 2^19937. Though the authors of xorshift describe that a high period is not
+ * very relevant (http://vigna.di.unimi.it/xorshift/). It is four times slower than xoroshiro128plus and
+ * needs to recompute its state after generating 624 numbers.
+ *
+ * @example
+ * const gen = new Mt19937(new Date().getTime())
+ * console.log(gen.next())
+ *
+ * @public
+ */
+export class Mt19937 {
+  /**
+   * @param {Number} seed The starting point for the random number generation. If you use the same seed, the generator will return the same sequence of random numbers.
+   */
+  constructor (seed) {
+    this.seed = seed
+    const state = new Uint32Array(N)
+    state[0] = seed
+    for (let i = 1; i < N; i++) {
+      state[i] = (Math.imul(1812433253, (state[i - 1] ^ (state[i - 1] >>> 30))) + i) & 0xFFFFFFFF
+    }
+    this._state = state
+    this._i = 0
+    nextState(this._state)
+  }
+
+  /**
+   * Generate a random signed integer.
+   *
+   * @return {Number} A 32 bit signed integer.
+   */
+  next () {
+    if (this._i === N) {
+      // need to compute a new state
+      nextState(this._state)
+      this._i = 0
+    }
+    let y = this._state[this._i++]
+    y ^= (y >>> 11)
+    y ^= (y << 7) & 0x9d2c5680
+    y ^= (y << 15) & 0xefc60000
+    y ^= (y >>> 18)
+    return y
+  }
+}

lib/prng/PRNG/PRNG.tests.js

@@ -0,0 +1,51 @@
+/**
+ * @module prng
+ */
+
+import { Mt19937 } from './Mt19937.js'
+import { Xoroshiro128plus } from './Xoroshiro128plus.js'
+import { Xorshift32 } from './Xorshift32.js'
+import * as time from '../../time.js'
+
+const DIAMETER = 300
+const NUMBERS = 10000
+
+const runPRNG = (name, Gen) => {
+  console.log('== ' + name + ' ==')
+  const gen = new Gen(1234)
+  let head = 0
+  let tails = 0
+  const date = time.getUnixTime()
+  const canvas = document.createElement('canvas')
+  canvas.height = DIAMETER
+  canvas.width = DIAMETER
+  const ctx = canvas.getContext('2d')
+  const vals = new Set()
+  ctx.fillStyle = 'blue'
+  for (let i = 0; i < NUMBERS; i++) {
+    const n = gen.next() & 0xFFFFFF
+    const x = (gen.next() >>> 0) % DIAMETER
+    const y = (gen.next() >>> 0) % DIAMETER
+    ctx.fillRect(x, y, 1, 2)
+    if ((n & 1) === 1) {
+      head++
+    } else {
+      tails++
+    }
+    if (vals.has(n)) {
+      console.warn(`The generator generated a duplicate`)
+    }
+    vals.add(n)
+  }
+  console.log('time: ', time.getUnixTime() - date)
+  console.log('head:', head, 'tails:', tails)
+  console.log('%c       ', `font-size: 200px; background: url(${canvas.toDataURL()}) no-repeat;`)
+  const h1 = document.createElement('h1')
+  h1.insertBefore(document.createTextNode(name), null)
+  document.body.insertBefore(h1, null)
+  document.body.appendChild(canvas)
+}
+
+runPRNG('mt19937', Mt19937)
+runPRNG('xoroshiro128plus', Xoroshiro128plus)
+runPRNG('xorshift32', Xorshift32)