add function to create lots of rooms

add client-server updateCounter support to sync all persisted rooms
save current state at the beginning in YIndexedDB
2018-06-07 16:36:42 +02:00 · 2018-06-04 17:35:39 +02:00 · 2018-06-03 22:39:22 +02:00 · 2018-06-03 21:58:51 +02:00 · 2018-06-02 22:16:12 +02:00 · 2018-06-02 13:33:04 +02:00
145 changed files with 13062 additions and 38198 deletions
--- a/.esdoc.json
+++ b/.esdoc.json
@@ -0,0 +1,10 @@
+{
+  "source": "./src",
+  "destination": "./docs",
+  "plugins": [{
+    "name": "esdoc-standard-plugin",
+    "option": {
+      "accessor": {"access": ["public"], "autoPrivate": true}
+    }
+  }]
+}
--- a/.flowconfig
+++ b/.flowconfig
@@ -5,6 +5,8 @@

 [include]
 ./src/
+./tests-lib/
+./test/

 [libs]
 ./declarations/
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,7 @@
 node_modules
 bower_components
+docs
 /y.*
 /examples/yjs-dist.js*
+.vscode
+.yjsPersisted
--- a/README.md
+++ b/README.md
@@ -64,6 +64,18 @@ missing modules.
 <script src="./bower_components/yjs/y.js"></script>
 ```

+### CDN
+```
+<script src="https://cdn.jsdelivr.net/npm/yjs@12/src/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'
 // ..
--- a/examples/ace/index.html
+++ b/examples/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>
--- a/examples/ace/index.js
+++ b/examples/ace/index.js
@@ -1,24 +1,17 @@
 /* global Y, ace */

-Y({
-  db: {
-    name: 'memory'
-  },
+let y = new Y('ace-example', {
  connector: {
    name: 'websockets-client',
-    room: 'ace-example'
-  },
-  sourceDir: '/bower_components',
-  share: {
-    ace: 'Text' // y.share.textarea is of type Y.Text
+    url: 'http://127.0.0.1:1234'
  }
-}).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)
 })
+
+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)
--- a/examples/chat/index.html
+++ b/examples/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>
--- a/examples/chat/index.js
+++ b/examples/chat/index.js
@@ -1,73 +1,65 @@
-/* global Y, chat */
+/* global Y */

-// initialize a shared object. This function call returns a promise!
-Y({
-  db: {
-    name: 'memory'
-  },
+let y = new Y('chat-example', {
  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
+    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
+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))
+  chatcontainer.insertBefore(p, chatcontainer.children[position] || null)
+}
+
+// This function makes sure that only 7 messages exist in the chat history.
+// The rest is deleted
+function 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(function (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
+}
--- a/examples/codemirror/index.html
+++ b/examples/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">
--- a/examples/codemirror/index.js
+++ b/examples/codemirror/index.js
@@ -1,24 +1,16 @@
 /* global Y, CodeMirror */

-// initialize a shared object. This function call returns a promise!
-Y({
-  db: {
-    name: 'memory'
-  },
+let y = new Y('codemirror-example', {
  connector: {
    name: 'websockets-client',
-    room: 'codemirror-example'
-  },
-  sourceDir: '/bower_components',
-  share: {
-    codemirror: 'Text' // y.share.codemirror is of type Y.Text
+    url: 'http://127.0.0.1:1234'
  }
-}).then(function (y) {
-  window.yCodeMirror = y
-
-  var editor = CodeMirror(document.querySelector('#codeMirrorContainer'), {
-    mode: 'javascript',
-    lineNumbers: true
-  })
-  y.share.codemirror.bindCodeMirror(editor)
 })
+
+window.yCodeMirror = y
+
+var editor = CodeMirror(document.querySelector('#codeMirrorContainer'), {
+  mode: 'javascript',
+  lineNumbers: true
+})
+y.define('codemirror', Y.Text).bindCodeMirror(editor)
--- a/examples/drawing/index.html
+++ b/examples/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>
--- a/examples/drawing/index.js
+++ b/examples/drawing/index.js
@@ -1,84 +1,74 @@
 /* globals Y, d3 */
-'strict mode'

-Y({
-  db: {
-    name: 'memory'
-  },
+let y = new Y('drawing-example', {
  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
+    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
+}
--- a/examples/html-editor-drawing-hook/index.html
+++ b/examples/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>
--- a/examples/html-editor-drawing-hook/index.js
+++ b/examples/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()
+  }
+}
--- a/examples/html-editor/index.html
+++ b/examples/html-editor/index.html
@@ -1,11 +1,11 @@
 <!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>
+  <script src="./index.mjs" type="module"></script>
 </head>
-<body contenteditable="true">
+<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>
--- a/examples/html-editor/index.js
+++ b/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',
-    room: 'html-editor-example6'
-    // maxBufferLength: 100
-  },
-  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)
-})
--- a/examples/html-editor/index.mjs
+++ b/examples/html-editor/index.mjs
@@ -0,0 +1,77 @@
+
+import YWebsocketsConnector from '../../src/Connectors/WebsocketsConnector/WebsocketsConnector.mjs'
+import Y from '../../src/Y.mjs'
+import DomBinding from '../../src/Bindings/DomBinding/DomBinding.mjs'
+import UndoManager from '../../src/Util/UndoManager.mjs'
+import YXmlFragment from '../../src/Types/YXml/YXmlFragment.mjs'
+import YXmlText from '../../src/Types/YXml/YXmlText.mjs'
+import YXmlElement from '../../src/Types/YXml/YXmlElement.mjs'
+import YIndexdDBPersistence from '../../src/Persistences/IndexedDBPersistence.mjs'
+
+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)
+  })
+}
--- a/examples/indexeddb/index.html
+++ b/examples/indexeddb/index.html
@@ -16,6 +16,9 @@
        width: 100%;
      }
    </style>
-    <script type="module" src="./index.js"></script>
+    <script src="../../y.js"></script>
+    <script src='../../../y-websockets-client/y-websockets-client.js'></script>
+    <script src='../../../y-indexeddb/y-indexeddb.js'></script>
+    <script src="./index.js"></script>
  </body>
 </html>
--- a/examples/indexeddb/index.js
+++ b/examples/indexeddb/index.js
@@ -1,24 +1,19 @@
 /* global Y, CodeMirror */

-// initialize a shared object. This function call returns a promise!
-Y({
-  db: {
-    name: 'memory'
-  },
+const persistence = new Y.IndexedDB()
+const connector = {
  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)
+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)
--- a/examples/infiniteyjs/index.html
+++ b/examples/infiniteyjs/index.html
@@ -10,7 +10,7 @@
    .one {
      grid-column: 1 ;
    }
-    .two { 
+    .two {
      grid-column: 2;
    }
    .three {
@@ -49,10 +49,7 @@
    </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='../../../y-websockets-client/y-websockets-client.js'></script>
  <script src="./index.js"></script>
 </body>
 </html>
--- a/examples/infiniteyjs/index.js
+++ b/examples/infiniteyjs/index.js
@@ -1,64 +1,38 @@
 /* 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'))
+function bindYjsInstance (y, suffix) {
+  y.define('textarea', Y.Text).bind(document.getElementById('textarea' + suffix))
  y.connector.socket.on('connection', function () {
-    document.getElementById('container2').removeAttribute('disconnected')
+    document.getElementById('container' + suffix).removeAttribute('disconnected')
  })
  y.connector.socket.on('disconnect', function () {
-    document.getElementById('container2').setAttribute('disconnected', true)
+    document.getElementById('container' + suffix).setAttribute('disconnected', true)
  })
-})
+}

-Y({
-  db: {
-    name: 'memory'
-  },
+let y1 = new Y('infinite-example', {
  connector: {
    name: 'websockets-client',
-    room: 'Textarea-example',
-    url: 'https://yjs-v13-third.herokuapp.com/'
-  },
-  share: {
-    textarea: 'Text'
+    url: 'http://127.0.0.1:1234'
  }
-}).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)
-  })
 })
+window.y1 = y1
+bindYjsInstance(y1, '1')
+
+let y2 = new Y('infinite-example', {
+  connector: {
+    name: 'websockets-client',
+    url: 'http://127.0.0.1:1234'
+  }
+})
+window.y2 = y2
+bindYjsInstance(y2, '2')
+
+let y3 = new Y('infinite-example', {
+  connector: {
+    name: 'websockets-client',
+    url: 'http://127.0.0.1:1234'
+  }
+})
+window.y3 = y3
+bindYjsInstance(y1, '3')
--- a/examples/jigsaw/index.html
+++ b/examples/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>
--- a/examples/jigsaw/index.js
+++ b/examples/jigsaw/index.js
@@ -1,74 +1,67 @@
-/* @flow */
 /* global Y, d3 */

-// initialize a shared object. This function call returns a promise!
-Y({
-  db: {
-    name: 'memory'
-  },
+let y = new Y('jigsaw-example', {
  connector: {
    name: 'websockets-client',
-    room: 'Puzzle-example',
-    url: 'http://localhost:1234'
-  },
-  share: {
-    piece1: 'Map',
-    piece2: 'Map',
-    piece3: 'Map',
-    piece4: 'Map'
+    url: 'http://127.0.0.1:1234'
  }
-}).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)
+let jigsaw = y.define('jigsaw', Y.Map)
+window.yJigsaw = y

-  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)
+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})
+  })

-  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 + ')'
-        })
-    })
+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 + ')'
+      })
  })
 })
--- a/examples/monaco/index.html
+++ b/examples/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>
--- a/examples/monaco/index.js
+++ b/examples/monaco/index.js
@@ -2,29 +2,21 @@

 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)
-  })
+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)
 })
--- a/examples/notes/index.html
+++ b/examples/notes/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+</head>
+  <script src="./index.mjs" type="module"></script>
+</head>
+<body contenteditable="true">
+</body>
+</html>
--- a/examples/notes/index.mjs
+++ b/examples/notes/index.mjs
@@ -0,0 +1,48 @@
+
+import IndexedDBPersistence from '../../src/Persistences/IndexeddbPersistence.mjs'
+import YWebsocketsConnector from '../../src/Connectors/WebsocketsConnector/WebsocketsConnector.mjs'
+import Y from '../../src/Y.mjs'
+import YXmlFragment from '../../src/Types/YXml/YXmlFragment.mjs'
+
+const yCollection = new YCollection(new YWebsocketsConnector(), new IndexedDBPersistence())
+
+const y = yCollection.getDocument('my-notes')
+
+
+
+
+
+persistence.addConnector(persistence)
+
+const y = new Y()
+await persistence.persistY(y)
+
+
+connector.connectY('html-editor', y)
+persistence.connectY('html-editor', y)
+
+
+
+
+window.connector = connector
+
+window.onload = function () {
+  window.domBinding = new DomBinding(window.yXmlType, document.body, { scrollingElement: document.scrollingElement })
+}
+
+window.y = y
+window.yXmlType = y.define('xml', YXmlFragment)
+window.undoManager = new UndoManager(window.yXmlType, {
+  captureTimeout: 500
+})
+
+document.onkeydown = function interceptUndoRedo (e) {
+  if (e.keyCode === 90 && (e.metaKey || e.ctrlKey)) {
+    if (!e.shiftKey) {
+      window.undoManager.undo()
+    } else {
+      window.undoManager.redo()
+    }
+    e.preventDefault()
+  }
+}
--- a/examples/package-lock.json
+++ b/examples/package-lock.json
--- a/examples/package.json
+++ b/examples/package.json
@@ -9,12 +9,15 @@
  "author": "Kevin Jahns",
  "license": "MIT",
  "dependencies": {
-    "monaco-editor": "^0.8.3"
+    "monaco-editor": "^0.8.3",
+    "rollup": "^0.52.3"
  },
  "devDependencies": {
    "standard": "^10.0.2"
  },
  "standard": {
-    "ignore": ["bower_components"]
+    "ignore": [
+      "bower_components"
+    ]
  }
 }
--- a/examples/quill-cursors/index.html
+++ b/examples/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>
--- a/examples/quill-cursors/index.js
+++ b/examples/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')
+
+function drawCursors () {
+  cursors.clearCursors()
+  users.map((user, userId) => {
+    if (user !== myUserInfo) {
+      let relativeRange = user.get('range')
+      let lastUpdated = new Date(user.get('last updated'))
+      if (lastUpdated != null && new Date() - 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
--- a/examples/quill/index.html
+++ b/examples/quill/index.html
@@ -1,35 +1,18 @@
 <!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>
+  <!-- Main Quill library -->
+  <script src="../../node_modules/quill/dist/quill.min.js"></script>
+  <link href="../../node_modules/quill/dist/quill.snow.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="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>
--- a/examples/quill/index.js
+++ b/examples/quill/index.js
@@ -1,40 +1,33 @@
 /* global Y, Quill */

-// initialize a shared object. This function call returns a promise!
-
-Y({
-  db: {
-    name: 'memory'
-  },
+let y = new Y('quill-cursors-0', {
  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
+    url: 'http://127.0.0.1:1234'
  }
-}).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)
 })
+
+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' }]
+    ]
+  },
+  placeholder: 'Compose an epic...',
+  theme: 'snow'  // or 'bubble'
+})
+
+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
--- a/examples/rollup.config.js
+++ b/examples/rollup.config.js
@@ -4,10 +4,12 @@ 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',
+  input: 'yjs-dist.mjs',
+  name: 'Y',
+  output: {
+    file: 'yjs-dist.js',
+    format: 'umd'
+  },
  plugins: [
    nodeResolve({
      main: true,
@@ -16,7 +18,7 @@ export default {
    }),
    commonjs()
  ],
-  sourceMap: true,
+  sourcemap: true,
  banner: `
 /**
 * ${pkg.name} - ${pkg.description}
--- a/examples/textarea/index.html
+++ b/examples/textarea/index.html
@@ -1,11 +1,9 @@
 <!DOCTYPE html>
 <html>
 <body>
-  <textarea style="width:80%;" rows=40 id="textfield" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
+  <textarea style="width:80%;" rows=40 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/y-text.js"></script>
-  <script src="../../../y-websockets-client/y-websockets-client.js"></script>
+  <script src='../../../y-websockets-client/y-websockets-client.js'></script>
  <script src="./index.js"></script>
 </body>
 </html>
--- a/examples/textarea/index.js
+++ b/examples/textarea/index.js
@@ -1,23 +1,15 @@
 /* global Y */

-// initialize a shared object. This function call returns a promise!
-Y({
-  db: {
-    name: 'memory'
-  },
+let y = new Y('textarea-example', {
  connector: {
    name: 'websockets-client',
-    room: 'Textarea-example2',
-    // url: '//localhost:1234',
-    url: 'https://yjs-v13.herokuapp.com/'
-  },
-  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'))
+    url: 'http://127.0.0.1:1234'
+  }
 })
+
+window.yTextarea = y
+
+// bind the textarea to a shared text element
+let type = y.define('textarea', Y.Text)
+let textarea = document.querySelector('textarea')
+window.binding = new Y.TextareaBinding(type, textarea)
--- a/examples/xml/index.html
+++ b/examples/xml/index.html
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html>
 </head>
-  <!-- jquery is not required for y-xml. It is just here for convenience, and to test batch operations. -->
+  <!-- jquery is not required for YXml. 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="../../y.js"></script>
+  <script src='../../../y-websockets-client/y-websockets-client.js'></script>
  <script src="./index.js"></script>
 </head>
 <body>
@@ -23,14 +24,16 @@
  </div>

  <script>
-    var commands = document.querySelectorAll(".command");
-    Array.prototype.forEach.call(document.querySelectorAll('.command'), function (command) {
-      var execute = function(){
-        eval(command.querySelector("input").value);
+    /* global $ */
+    var commands = document.querySelectorAll('.command')
+    Array.prototype.forEach.call(commands, function (command) {
+      var execute = function () {
+        // eslint-disable-next-line no-eval
+        eval(command.querySelector('input').value)
      }
-      command.querySelector("button").onclick = execute
-      $(command.querySelector("input")).keyup(function (e) {
-        if (e.keyCode == 13) {
+      command.querySelector('button').onclick = execute
+      $(command.querySelector('input')).keyup(function (e) {
+        if (e.keyCode === 13) {
          execute()
        }
      })
--- a/examples/xml/index.js
+++ b/examples/xml/index.js
@@ -1,23 +1,13 @@
 /* global Y */

-// initialize a shared object. This function call returns a promise!
-Y({
-  db: {
-    name: 'memory'
-  },
+let y = new Y('xml-example', {
  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"
+    url: 'http://127.0.0.1:1234'
  }
-}).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)
 })
+
+window.yXml = y
+// bind xml type to a dom, and put it in body
+window.sharedDom = y.define('xml', Y.XmlElement).toDom()
+document.body.appendChild(window.sharedDom)
--- a/examples/yjs-dist.esm
+++ b/examples/yjs-dist.esm
@@ -1,12 +0,0 @@
-
-import Y from '../src/y.js'
-import yArray from '../../y-array/src/y-array.js'
-import yIndexedDB from '../../y-indexeddb/src/y-indexeddb.js'
-import yMap from '../../y-map/src/y-map.js'
-import yText from '../../y-text/src/y-text.js'
-import yXml from '../../y-xml/src/y-xml.js'
-import yWebsocketsClient from '../../y-websockets-client/src/y-websockets-client.js'
-
-Y.extend(yArray, yIndexedDB, yMap, yText, yXml, yWebsocketsClient)
-
-export default Y
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,21 +1,33 @@
 {
  "name": "yjs",
-  "version": "13.0.0-22",
+  "version": "13.0.0-60",
  "description": "A framework for real-time p2p shared editing on any data",
  "main": "./y.node.js",
  "browser": "./y.js",
  "module": "./src/y.js",
  "scripts": {
+    "start": "node --experimental-modules src/Connectors/WebsocketsConnector/server.mjs",
    "test": "npm run lint",
    "debug": "concurrently 'rollup -wc rollup.test.js' 'cutest-serve y.test.js -o'",
-    "lint": "standard",
+    "lint": "standard src/**/*.mjs test/**/*.mjs tests-lib/**/*.mjs",
+    "docs": "esdoc",
+    "serve-docs": "npm run docs && serve ./docs/",
    "dist": "rollup -c rollup.browser.js; rollup -c rollup.node.js",
    "watch": "concurrently 'rollup -wc rollup.browser.js' 'rollup -wc rollup.node.js'",
    "postversion": "npm run dist",
-    "postpublish": "tag-dist-files --overwrite-existing-tag"
+    "postpublish": "tag-dist-files --overwrite-existing-tag",
+    "demos": "concurrently 'node --experimental-modules src/Connectors/WebsocketsConnector/server.mjs' 'http-server'"
+  },
+  "now": {
+    "engines": {
+      "node": "10.x.x"
+    }
  },
  "files": [
-    "y.*"
+    "y.*",
+    "src/*",
+    ".esdoc.json",
+    "docs/*"
  ],
  "standard": {
    "ignore": [
@@ -50,8 +62,14 @@
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-latest": "^6.24.1",
    "chance": "^1.0.9",
+    "codemirror": "^5.37.0",
    "concurrently": "^3.4.0",
    "cutest": "^0.1.9",
+    "esdoc": "^1.0.4",
+    "esdoc-standard-plugin": "^1.0.0",
+    "quill": "^1.3.5",
+    "quill-cursors": "^1.0.2",
+    "rollup": "^0.58.2",
    "rollup-plugin-babel": "^2.7.1",
    "rollup-plugin-commonjs": "^8.0.2",
    "rollup-plugin-inject": "^2.0.0",
@@ -60,11 +78,10 @@
    "rollup-plugin-uglify": "^1.0.2",
    "rollup-regenerator-runtime": "^6.23.1",
    "rollup-watch": "^3.2.2",
-    "standard": "^10.0.2",
+    "standard": "^11.0.1",
    "tag-dist-files": "^0.1.6"
  },
  "dependencies": {
-    "debug": "^2.6.8",
-    "utf-8": "^1.0.0"
+    "uws": "^10.148.0"
  }
 }
--- a/rollup.browser.js
+++ b/rollup.browser.js
@@ -5,9 +5,13 @@ import commonjs from 'rollup-plugin-commonjs'
 var pkg = require('./package.json')

 export default {
-  entry: 'src/y.js',
-  moduleName: 'Y',
-  format: 'umd',
+  input: 'src/Y.dist.mjs',
+  name: 'Y',
+  sourcemap: true,
+  output: {
+    file: 'y.js',
+    format: 'umd'
+  },
  plugins: [
    nodeResolve({
      main: true,
@@ -17,6 +21,9 @@ export default {
    commonjs(),
    babel(),
    uglify({
+      mangle: {
+        except: ['YMap', 'Y', 'YArray', 'YText', 'YXmlHook', 'YXmlFragment', 'YXmlElement', 'YXmlEvent', 'YXmlText', 'YEvent', 'YArrayEvent', 'YMapEvent', 'Type', 'Delete', 'ItemJSON', 'ItemString', 'Item']
+      },
      output: {
        comments: function (node, comment) {
          var text = comment.value
@@ -29,8 +36,6 @@ export default {
      }
    })
  ],
-  dest: 'y.js',
-  sourceMap: true,
  banner: `
 /**
 * ${pkg.name} - ${pkg.description}
--- a/rollup.node.js
+++ b/rollup.node.js
@@ -3,9 +3,13 @@ import commonjs from 'rollup-plugin-commonjs'
 var pkg = require('./package.json')

 export default {
-  entry: 'src/y.js',
-  moduleName: 'Y',
-  format: 'umd',
+  input: 'src/Y.dist.mjs',
+  nameame: 'Y',
+  sourcemap: true,
+  output: {
+    file: 'y.node.js',
+    format: 'cjs'
+  },
  plugins: [
    nodeResolve({
      main: true,
@@ -14,8 +18,6 @@ export default {
    }),
    commonjs()
  ],
-  dest: 'y.node.js',
-  sourceMap: true,
  banner: `
 /**
 * ${pkg.name} - ${pkg.description}
--- a/rollup.test.js
+++ b/rollup.test.js
@@ -3,18 +3,20 @@ import commonjs from 'rollup-plugin-commonjs'
 import multiEntry from 'rollup-plugin-multi-entry'

 export default {
-  entry: 'test/*.js',
-  moduleName: 'y-tests',
-  format: 'umd',
+  input: 'test/index.mjs',
+  name: 'y-tests',
+  sourcemap: true,
+  output: {
+    file: 'y.test.js',
+    format: 'umd'
+  },
  plugins: [
+    multiEntry(),
    nodeResolve({
      main: true,
      module: true,
      browser: true
    }),
-    commonjs(),
-    multiEntry()
-  ],
-  dest: 'y.test.js',
-  sourceMap: true
+    commonjs()
+  ]
 }
--- a/src/Bindings/Binding.mjs
+++ b/src/Bindings/Binding.mjs
@@ -0,0 +1,47 @@
+
+import { createMutualExclude } from '../Util/mutualExclude.mjs'
+
+/**
+ * Abstract class for bindings.
+ *
+ * A binding handles data binding from a Yjs type to a data object. For example,
+ * you can bind a Quill editor instance to a YText instance with the `QuillBinding` class.
+ *
+ * It is expected that a concrete implementation accepts two parameters
+ * (type and binding target).
+ *
+ * @example
+ *   const quill = new Quill(document.createElement('div'))
+ *   const type = y.define('quill', Y.Text)
+ *   const binding = new Y.QuillBinding(quill, type)
+ *
+ */
+export default class Binding {
+  /**
+   * @param {YType} type Yjs type.
+   * @param {any} target Binding Target.
+   */
+  constructor (type, target) {
+    /**
+     * The Yjs type that is bound to `target`
+     * @type {YType}
+     */
+    this.type = type
+    /**
+     * The target that `type` is bound to.
+     * @type {*}
+     */
+    this.target = target
+    /**
+     * @private
+     */
+    this._mutualExclude = createMutualExclude()
+  }
+  /**
+   * Remove all data observers (both from the type and the target).
+   */
+  destroy () {
+    this.type = null
+    this.target = null
+  }
+}
--- a/src/Bindings/CodeMirrorBinding/CodeMirrorBinding.mjs
+++ b/src/Bindings/CodeMirrorBinding/CodeMirrorBinding.mjs
@@ -0,0 +1,56 @@
+
+import Binding from '../Binding.mjs'
+import simpleDiff from '../../Util/simpleDiff.mjs'
+import { getRelativePosition, fromRelativePosition } from '../../Util/relativePosition.mjs'
+
+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 default class TextareaBinding extends Binding {
+  constructor (textType, domTextarea) {
+    // Binding handles textType as this.type and domTextarea as this.target
+    super(textType, domTextarea)
+    // 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)
+    super.destroy()
+  }
+}
--- a/src/Bindings/DomBinding/DomBinding.mjs
+++ b/src/Bindings/DomBinding/DomBinding.mjs
@@ -0,0 +1,140 @@
+/* global MutationObserver */
+
+import Binding from '../Binding.mjs'
+import { createAssociation, removeAssociation } from './util.mjs'
+import { beforeTransactionSelectionFixer, afterTransactionSelectionFixer } from './selection.mjs'
+import { defaultFilter, applyFilterOnType } from './filter.mjs'
+import typeObserver from './typeObserver.mjs'
+import domObserver from './domObserver.mjs'
+
+/**
+ * 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)
+ *
+ */
+export default class DomBinding extends Binding {
+  /**
+   * @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 {FilterFunction} [opts.filter=defaultFilter] The filter function to use.
+   */
+  constructor (type, target, opts = {}) {
+    // Binding handles textType as this.type and domTextarea as this.target
+    super(type, target)
+    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 {FilterFunction}
+     */
+    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
+    })
+    const y = type._y
+    // Force flush dom changes before Type changes are applied (they might
+    // modify the dom)
+    this._beforeTransactionHandler = (y, transaction, remote) => {
+      this._domObserver(this._mutationObserver.takeRecords())
+      beforeTransactionSelectionFixer(y, this, transaction, remote)
+    }
+    y.on('beforeTransaction', this._beforeTransactionHandler)
+    this._afterTransactionHandler = (y, transaction, remote) => {
+      afterTransactionSelectionFixer(y, this, transaction, remote)
+      // 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)
+  }
+
+  /**
+   * NOTE: currently does not apply filter to existing elements!
+   * @param {FilterFunction} filter The filter function to use from now on.
+   */
+  setFilter (filter) {
+    this.filter = filter
+    // TODO: apply filter to all elements
+  }
+
+  /**
+   * 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)
+    super.destroy()
+  }
+}
+
+  /**
+   * A filter defines which elements and attributes to share.
+   * Return null if the node should be filtered. Otherwise return the Map of
+   * accepted attributes.
+   *
+   * @typedef {function(nodeName: String, attrs: Map): Map|null} FilterFunction
+   */
--- a/src/Bindings/DomBinding/domObserver.mjs
+++ b/src/Bindings/DomBinding/domObserver.mjs
@@ -0,0 +1,144 @@
+
+import YXmlHook from '../../Types/YXml/YXmlHook.mjs'
+import {
+  iterateUntilUndeleted,
+  removeAssociation,
+  insertNodeHelper } from './util.mjs'
+import diff from '../../Util/simpleDiff.mjs'
+import YXmlFragment from '../../Types/YXml/YXmlFragment.mjs'
+
+/**
+ * 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
+ * @private
+ */
+function 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(function (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
+ */
+export default 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 = diff(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)
+      }
+    })
+  })
+}
--- a/src/Bindings/DomBinding/domToType.mjs
+++ b/src/Bindings/DomBinding/domToType.mjs
@@ -0,0 +1,61 @@
+
+import YXmlText from '../../Types/YXml/YXmlText.mjs'
+import YXmlHook from '../../Types/YXml/YXmlHook.mjs'
+import YXmlElement from '../../Types/YXml/YXmlElement.mjs'
+import { createAssociation, domsToTypes } from './util.mjs'
+import { filterDomAttributes, defaultFilter } from './filter.mjs'
+
+/**
+ * Creates a Yjs type (YXml) based on the contents of a DOM Element.
+ *
+ * @param {Element|TextNode} element The DOM Element
+ * @param {?Document} _document Optional. Provide the global document object
+ * @param {Hooks} [hooks = {}] Optional. Set of Yjs Hooks
+ * @param {Filter} [filter=defaultFilter] Optional. Dom element filter
+ * @param {?DomBinding} binding Warning: This property is for internal use only!
+ * @return {YXmlElement | YXmlText}
+ */
+export default function domToType (element, _document = document, hooks = {}, filter = defaultFilter, binding) {
+  let type
+  switch (element.nodeType) {
+    case _document.ELEMENT_NODE:
+      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.`)
+          delete 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)
+      }
+      break
+    case _document.TEXT_NODE:
+      type = new YXmlText()
+      type.insert(0, element.nodeValue)
+      break
+    default:
+      throw new Error('Can\'t transform this node type to a YXml type!')
+  }
+  createAssociation(binding, element, type)
+  return type
+}
--- a/src/Bindings/DomBinding/filter.mjs
+++ b/src/Bindings/DomBinding/filter.mjs
@@ -0,0 +1,60 @@
+import isParentOf from '../../Util/isParentOf.mjs'
+
+/**
+ * Default filter method (does nothing).
+ *
+ * @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 function defaultFilter (nodeName, attrs) {
+  // TODO: implement basic filter that filters out dangerous properties!
+  return attrs
+}
+
+/**
+ *
+ */
+export function 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.
+ *
+ * @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.
+ *
+ * @private
+ */
+export function applyFilterOnType (y, binding, type) {
+  if (isParentOf(binding.type, type)) {
+    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)
+    } else {
+      // iterate original attributes
+      attributes.forEach((value, key) => {
+        // delete all attributes that are not in filteredAttributes
+        if (filteredAttributes.has(key) === false) {
+          type.removeAttribute(key)
+        }
+      })
+    }
+  }
+}
--- a/src/Bindings/DomBinding/selection.mjs
+++ b/src/Bindings/DomBinding/selection.mjs
@@ -0,0 +1,84 @@
+/* globals getSelection */
+
+import { getRelativePosition, fromRelativePosition } from '../../Util/relativePosition.mjs'
+
+let browserSelection = null
+let relativeSelection = null
+
+/**
+ * @private
+ */
+export let beforeTransactionSelectionFixer
+if (typeof getSelection !== 'undefined') {
+  beforeTransactionSelectionFixer = function _beforeTransactionSelectionFixer (y, domBinding, transaction, remote) {
+    if (!remote) {
+      return
+    }
+    relativeSelection = { from: null, to: null, fromY: null, toY: null }
+    browserSelection = getSelection()
+    const anchorNode = browserSelection.anchorNode
+    const anchorNodeType = domBinding.domToType.get(anchorNode)
+    if (anchorNode !== null && anchorNodeType !== undefined) {
+      relativeSelection.from = getRelativePosition(anchorNodeType, browserSelection.anchorOffset)
+      relativeSelection.fromY = anchorNodeType._y
+    }
+    const focusNode = browserSelection.focusNode
+    const focusNodeType = domBinding.domToType.get(focusNode)
+    if (focusNode !== null && focusNodeType !== undefined) {
+      relativeSelection.to = getRelativePosition(focusNodeType, browserSelection.focusOffset)
+      relativeSelection.toY = focusNodeType._y
+    }
+  }
+} else {
+  beforeTransactionSelectionFixer = function _fakeBeforeTransactionSelectionFixer () {}
+}
+
+/**
+ * @private
+ */
+export function afterTransactionSelectionFixer (y, domBinding, transaction, remote) {
+  if (relativeSelection === null || !remote) {
+    return
+  }
+  const to = relativeSelection.to
+  const from = relativeSelection.from
+  const fromY = relativeSelection.fromY
+  const toY = relativeSelection.toY
+  let shouldUpdate = false
+  let anchorNode = browserSelection.anchorNode
+  let anchorOffset = browserSelection.anchorOffset
+  let focusNode = browserSelection.focusNode
+  let focusOffset = browserSelection.focusOffset
+  if (from !== null) {
+    let sel = fromRelativePosition(fromY, from)
+    if (sel !== null) {
+      let node = domBinding.typeToDom.get(sel.type)
+      let offset = sel.offset
+      if (node !== anchorNode || offset !== anchorOffset) {
+        anchorNode = node
+        anchorOffset = offset
+        shouldUpdate = true
+      }
+    }
+  }
+  if (to !== null) {
+    let sel = fromRelativePosition(toY, to)
+    if (sel !== null) {
+      let node = domBinding.typeToDom.get(sel.type)
+      let offset = sel.offset
+      if (node !== focusNode || offset !== focusOffset) {
+        focusNode = node
+        focusOffset = offset
+        shouldUpdate = true
+      }
+    }
+  }
+  if (shouldUpdate) {
+    browserSelection.setBaseAndExtent(
+      anchorNode,
+      anchorOffset,
+      focusNode,
+      focusOffset
+    )
+  }
+}
--- a/src/Bindings/DomBinding/typeObserver.mjs
+++ b/src/Bindings/DomBinding/typeObserver.mjs
@@ -0,0 +1,99 @@
+/* global getSelection */
+
+import YXmlText from '../../Types/YXml/YXmlText.mjs'
+import YXmlHook from '../../Types/YXml/YXmlHook.mjs'
+import { removeDomChildrenUntilElementFound } from './util.mjs'
+
+function 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 {
+      if (anchor.nodeType === document.TEXT_NODE) {
+        anchor = anchor.parentElement
+      }
+      const top = anchor.getBoundingClientRect().top
+      return { elem: anchor, top: top }
+    }
+  }
+  return null
+}
+
+function 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 default function typeObserver (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)
+  })
+}
--- a/src/Bindings/DomBinding/util.mjs
+++ b/src/Bindings/DomBinding/util.mjs
@@ -0,0 +1,124 @@
+
+import domToType from './domToType.mjs'
+
+/**
+ * Iterates items until an undeleted item is found.
+ *
+ * @private
+ */
+export function 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).
+ *
+ * @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 function 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).
+ *
+ * @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 function 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.
+ *
+ * @param {DomBinding} domBinding The binding object
+ * @param {Element} oldDom The existing dom
+ * @param {Element} newDom The new dom object
+ */
+export function 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.
+ *
+ * @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.
+ *
+ * @private
+ */
+export function insertDomElementsAfter (type, prev, doms, _document, binding) {
+  const types = domsToTypes(doms, _document, binding.opts.hooks, binding.filter, binding)
+  return type.insertAfter(prev, types)
+}
+
+export function 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
+ */
+export function 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.
+ *
+ * @param {Element} parent The parent of `elem` and `currentChild`.
+ * @param {Element} currentChild Start removing elements with `currentChild`. If
+ *                               `currentChild` is `elem` it won't be removed.
+ * @param {Element|null} elem The elemnt to look for.
+ *
+ * @private
+ */
+export function removeDomChildrenUntilElementFound (parent, currentChild, elem) {
+  while (currentChild !== elem) {
+    const del = currentChild
+    currentChild = currentChild.nextSibling
+    parent.removeChild(del)
+  }
+}
--- a/src/Bindings/QuillBinding/QuillBinding.mjs
+++ b/src/Bindings/QuillBinding/QuillBinding.mjs
@@ -0,0 +1,53 @@
+import Binding from '../Binding.mjs'
+
+function typeObserver (event) {
+  const quill = this.target
+  // Force flush Quill changes.
+  quill.update('yjs')
+  this._mutualExclude(function () {
+    // Apply computed delta.
+    quill.updateContents(event.delta, 'yjs')
+    // Force flush Quill changes. Ignore applied changes.
+    quill.update('yjs')
+  })
+}
+
+function quillObserver (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 default class QuillBinding extends Binding {
+  /**
+   * @param {YText} textType
+   * @param {Quill} quill
+   */
+  constructor (textType, quill) {
+    // Binding handles textType as this.type and quill as this.target.
+    super(textType, quill)
+    // 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)
+    super.destroy()
+  }
+}
--- a/src/Bindings/TextareaBinding/TextareaBinding.mjs
+++ b/src/Bindings/TextareaBinding/TextareaBinding.mjs
@@ -0,0 +1,56 @@
+
+import Binding from '../Binding.mjs'
+import simpleDiff from '../../Util/simpleDiff.mjs'
+import { getRelativePosition, fromRelativePosition } from '../../Util/relativePosition.mjs'
+
+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 default class TextareaBinding extends Binding {
+  constructor (textType, domTextarea) {
+    // Binding handles textType as this.type and domTextarea as this.target
+    super(textType, domTextarea)
+    // 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)
+    super.destroy()
+  }
+}
--- a/src/Connector.js
+++ b/src/Connector.js
@@ -1,318 +0,0 @@
-import { BinaryEncoder, BinaryDecoder } from './Encoding.js'
-import { sendSyncStep1, computeMessageSyncStep1, computeMessageSyncStep2, computeMessageUpdate } from './MessageHandler.js'
-
-export default function extendConnector (Y/* :any */) {
-  class AbstractConnector {
-    /*
-      opts contains the following information:
-       role : String Role of this client ("master" or "slave")
-    */
-    constructor (y, opts) {
-      this.y = y
-      if (opts == null) {
-        opts = {}
-      }
-      this.opts = opts
-      // Prefer to receive untransformed operations. This does only work if
-      // this client receives operations from only one other client.
-      // In particular, this does not work with y-webrtc.
-      // It will work with y-websockets-client
-      this.preferUntransformed = opts.preferUntransformed || false
-      if (opts.role == null || opts.role === 'master') {
-        this.role = 'master'
-      } else if (opts.role === 'slave') {
-        this.role = 'slave'
-      } else {
-        throw new Error("Role must be either 'master' or 'slave'!")
-      }
-      this.log = Y.debug('y:connector')
-      this.logMessage = Y.debug('y:connector-message')
-      this.y.db.forwardAppliedOperations = opts.forwardAppliedOperations || false
-      this.role = opts.role
-      this.connections = new Map()
-      this.isSynced = false
-      this.userEventListeners = []
-      this.whenSyncedListeners = []
-      this.currentSyncTarget = null
-      this.debug = opts.debug === true
-      this.broadcastOpBuffer = []
-      this.protocolVersion = 11
-      this.authInfo = opts.auth || null
-      this.checkAuth = opts.checkAuth || function () { return Promise.resolve('write') } // default is everyone has write access
-      if (opts.generateUserId !== false) {
-        this.setUserId(Y.utils.generateUserId())
-      }
-      if (opts.maxBufferLength == null) {
-        this.maxBufferLength = -1
-      } else {
-        this.maxBufferLength = opts.maxBufferLength
-      }
-    }
-
-    reconnect () {
-      this.log('reconnecting..')
-      return this.y.db.startGarbageCollector()
-    }
-
-    disconnect () {
-      this.log('discronnecting..')
-      this.connections = new Map()
-      this.isSynced = false
-      this.currentSyncTarget = null
-      this.whenSyncedListeners = []
-      this.y.db.stopGarbageCollector()
-      return this.y.db.whenTransactionsFinished()
-    }
-
-    repair () {
-      this.log('Repairing the state of Yjs. This can happen if messages get lost, and Yjs detects that something is wrong. If this happens often, please report an issue here: https://github.com/y-js/yjs/issues')
-      this.isSynced = false
-      this.connections.forEach((user, userId) => {
-        user.isSynced = false
-        this._syncWithUser(userId)
-      })
-    }
-
-    setUserId (userId) {
-      if (this.userId == null) {
-        if (!Number.isInteger(userId)) {
-          let err = new Error('UserId must be an integer!')
-          this.y.emit('error', err)
-          throw err
-        }
-        this.log('Set userId to "%s"', userId)
-        this.userId = userId
-        return this.y.db.setUserId(userId)
-      } else {
-        return null
-      }
-    }
-
-    onUserEvent (f) {
-      this.userEventListeners.push(f)
-    }
-
-    removeUserEventListener (f) {
-      this.userEventListeners = this.userEventListeners.filter(g => f !== g)
-    }
-
-    userLeft (user) {
-      if (this.connections.has(user)) {
-        this.log('%s: User left %s', this.userId, user)
-        this.connections.delete(user)
-        // check if isSynced event can be sent now
-        this._setSyncedWith(null)
-        for (var f of this.userEventListeners) {
-          f({
-            action: 'userLeft',
-            user: user
-          })
-        }
-      }
-    }
-
-    userJoined (user, role, auth) {
-      if (role == null) {
-        throw new Error('You must specify the role of the joined user!')
-      }
-      if (this.connections.has(user)) {
-        throw new Error('This user already joined!')
-      }
-      this.log('%s: User joined %s', this.userId, user)
-      this.connections.set(user, {
-        uid: user,
-        isSynced: false,
-        role: role,
-        processAfterAuth: [],
-        auth: auth || null,
-        receivedSyncStep2: false
-      })
-      let defer = {}
-      defer.promise = new Promise(function (resolve) { defer.resolve = resolve })
-      this.connections.get(user).syncStep2 = defer
-      for (var f of this.userEventListeners) {
-        f({
-          action: 'userJoined',
-          user: user,
-          role: role
-        })
-      }
-      this._syncWithUser(user)
-    }
-
-    // Execute a function _when_ we are connected.
-    // If not connected, wait until connected
-    whenSynced (f) {
-      if (this.isSynced) {
-        f()
-      } else {
-        this.whenSyncedListeners.push(f)
-      }
-    }
-
-    _syncWithUser (userid) {
-      if (this.role === 'slave') {
-        return // "The current sync has not finished or this is controlled by a master!"
-      }
-      sendSyncStep1(this, userid)
-    }
-
-    _fireIsSyncedListeners () {
-      this.y.db.whenTransactionsFinished().then(() => {
-        if (!this.isSynced) {
-          this.isSynced = true
-          // It is safer to remove this!
-          // TODO: remove: this.garbageCollectAfterSync()
-          // call whensynced listeners
-          for (var f of this.whenSyncedListeners) {
-            f()
-          }
-          this.whenSyncedListeners = []
-        }
-      })
-    }
-
-    send (uid, buffer) {
-      if (!(buffer instanceof ArrayBuffer || buffer instanceof Uint8Array)) {
-        throw new Error('Expected Message to be an ArrayBuffer or Uint8Array - please don\'t use this method to send custom messages')
-      }
-      this.log('%s: Send \'%y\' to %s', this.userId, buffer, uid)
-      this.logMessage('Message: %Y', buffer)
-    }
-
-    broadcast (buffer) {
-      if (!(buffer instanceof ArrayBuffer || buffer instanceof Uint8Array)) {
-        throw new Error('Expected Message to be an ArrayBuffer or Uint8Array - please don\'t use this method to send custom messages')
-      }
-      this.log('%s: Broadcast \'%y\'', this.userId, buffer)
-      this.logMessage('Message: %Y', buffer)
-    }
-
-    /*
-      Buffer operations, and broadcast them when ready.
-    */
-    broadcastOps (ops) {
-      ops = ops.map(function (op) {
-        return Y.Struct[op.struct].encode(op)
-      })
-      var self = this
-      function broadcastOperations () {
-        if (self.broadcastOpBuffer.length > 0) {
-          let encoder = new BinaryEncoder()
-          encoder.writeVarString(self.opts.room)
-          encoder.writeVarString('update')
-          let ops = self.broadcastOpBuffer
-          let length = ops.length
-          let encoderPosLen = encoder.pos
-          encoder.writeUint32(0)
-          for (var i = 0; i < length && (self.maxBufferLength < 0 || encoder.length < self.maxBufferLength); i++) {
-            let op = ops[i]
-            Y.Struct[op.struct].binaryEncode(encoder, op)
-          }
-          encoder.setUint32(encoderPosLen, i)
-          self.broadcastOpBuffer = ops.slice(i)
-          self.broadcast(encoder.createBuffer())
-          if (i !== length) {
-            self.whenRemoteResponsive().then(broadcastOperations)
-          }
-        }
-      }
-      if (this.broadcastOpBuffer.length === 0) {
-        this.broadcastOpBuffer = ops
-        this.y.db.whenTransactionsFinished().then(broadcastOperations)
-      } else {
-        this.broadcastOpBuffer = this.broadcastOpBuffer.concat(ops)
-      }
-    }
-
-    /*
-     * Somehow check the responsiveness of the remote clients/server
-     * Default behavior:
-     *   Wait 100ms before broadcasting the next batch of operations
-     *
-     * Only used when maxBufferLength is set
-     *
-     */
-    whenRemoteResponsive () {
-      return new Promise(function (resolve) {
-        setTimeout(resolve, 100)
-      })
-    }
-
-    /*
-      You received a raw message, and you know that it is intended for Yjs. Then call this function.
-    */
-    receiveMessage (sender, buffer, skipAuth) {
-      skipAuth = skipAuth || false
-      if (!(buffer instanceof ArrayBuffer || buffer instanceof Uint8Array)) {
-        return Promise.reject(new Error('Expected Message to be an ArrayBuffer or Uint8Array!'))
-      }
-      if (sender === this.userId) {
-        return Promise.resolve()
-      }
-      let decoder = new BinaryDecoder(buffer)
-      let encoder = new BinaryEncoder()
-      let roomname = decoder.readVarString() // read room name
-      encoder.writeVarString(roomname)
-      let messageType = decoder.readVarString()
-      let senderConn = this.connections.get(sender)
-      this.log('%s: Receive \'%s\' from %s', this.userId, messageType, sender)
-      this.logMessage('Message: %Y', buffer)
-      if (senderConn == null && !skipAuth) {
-        throw new Error('Received message from unknown peer!')
-      }
-      if (messageType === 'sync step 1' || messageType === 'sync step 2') {
-        let auth = decoder.readVarUint()
-        if (senderConn.auth == null) {
-          senderConn.processAfterAuth.push([messageType, senderConn, decoder, encoder, sender])
-          // check auth
-          return this.checkAuth(auth, this.y, sender).then(authPermissions => {
-            if (senderConn.auth == null) {
-              senderConn.auth = authPermissions
-              this.y.emit('userAuthenticated', {
-                user: senderConn.uid,
-                auth: authPermissions
-              })
-            }
-            let messages = senderConn.processAfterAuth
-            senderConn.processAfterAuth = []
-
-            return messages.reduce((p, m) =>
-              p.then(() => this.computeMessage(m[0], m[1], m[2], m[3], m[4]))
-            , Promise.resolve())
-          })
-        }
-      }
-      if (skipAuth || senderConn.auth != null) {
-        return this.computeMessage(messageType, senderConn, decoder, encoder, sender, skipAuth)
-      } else {
-        senderConn.processAfterAuth.push([messageType, senderConn, decoder, encoder, sender, false])
-      }
-    }
-
-    computeMessage (messageType, senderConn, decoder, encoder, sender, skipAuth) {
-      if (messageType === 'sync step 1' && (senderConn.auth === 'write' || senderConn.auth === 'read')) {
-        // cannot wait for sync step 1 to finish, because we may wait for sync step 2 in sync step 1 (->lock)
-        computeMessageSyncStep1(decoder, encoder, this, senderConn, sender)
-        return this.y.db.whenTransactionsFinished()
-      } else if (messageType === 'sync step 2' && senderConn.auth === 'write') {
-        return computeMessageSyncStep2(decoder, encoder, this, senderConn, sender)
-      } else if (messageType === 'update' && (skipAuth || senderConn.auth === 'write')) {
-        return computeMessageUpdate(decoder, encoder, this, senderConn, sender)
-      } else {
-        return Promise.reject(new Error('Unable to receive message'))
-      }
-    }
-
-    _setSyncedWith (user) {
-      if (user != null) {
-        this.connections.get(user).isSynced = true
-      }
-      let conns = Array.from(this.connections.values())
-      if (conns.length > 0 && conns.every(u => u.isSynced)) {
-        this._fireIsSyncedListeners()
-      }
-    }
-  }
-  Y.AbstractConnector = AbstractConnector
-}
--- a/src/Connector.mjs
+++ b/src/Connector.mjs
@@ -0,0 +1,297 @@
+import BinaryEncoder from './Util/Binary/Encoder.mjs'
+import BinaryDecoder from './Util/Binary/Decoder.mjs'
+
+import { sendSyncStep1, readSyncStep1 } from './MessageHandler/syncStep1.mjs'
+import { readSyncStep2 } from './MessageHandler/syncStep2.mjs'
+import { integrateRemoteStructs } from './MessageHandler/integrateRemoteStructs.mjs'
+
+import debug from 'debug'
+
+// TODO: rename Connector
+
+export default class AbstractConnector {
+  constructor (y, opts) {
+    this.y = y
+    this.opts = opts
+    if (opts.role == null || opts.role === 'master') {
+      this.role = 'master'
+    } else if (opts.role === 'slave') {
+      this.role = 'slave'
+    } else {
+      throw new Error("Role must be either 'master' or 'slave'!")
+    }
+    this.log = debug('y:connector')
+    this.logMessage = debug('y:connector-message')
+    this._forwardAppliedStructs = opts.forwardAppliedOperations || false // TODO: rename
+    this.role = opts.role
+    this.connections = new Map()
+    this.isSynced = false
+    this.userEventListeners = []
+    this.whenSyncedListeners = []
+    this.currentSyncTarget = null
+    this.debug = opts.debug === true
+    this.broadcastBuffer = new BinaryEncoder()
+    this.broadcastBufferSize = 0
+    this.protocolVersion = 11
+    this.authInfo = opts.auth || null
+    this.checkAuth = opts.checkAuth || function () { return Promise.resolve('write') } // default is everyone has write access
+    if (opts.maxBufferLength == null) {
+      this.maxBufferLength = -1
+    } else {
+      this.maxBufferLength = opts.maxBufferLength
+    }
+  }
+
+  reconnect () {
+    this.log('reconnecting..')
+  }
+
+  disconnect () {
+    this.log('discronnecting..')
+    this.connections = new Map()
+    this.isSynced = false
+    this.currentSyncTarget = null
+    this.whenSyncedListeners = []
+    return Promise.resolve()
+  }
+
+  onUserEvent (f) {
+    this.userEventListeners.push(f)
+  }
+
+  removeUserEventListener (f) {
+    this.userEventListeners = this.userEventListeners.filter(g => f !== g)
+  }
+
+  userLeft (user) {
+    if (this.connections.has(user)) {
+      this.log('%s: User left %s', this.y.userID, user)
+      this.connections.delete(user)
+      // check if isSynced event can be sent now
+      this._setSyncedWith(null)
+      for (var f of this.userEventListeners) {
+        f({
+          action: 'userLeft',
+          user: user
+        })
+      }
+    }
+  }
+
+  userJoined (user, role, auth) {
+    if (role == null) {
+      throw new Error('You must specify the role of the joined user!')
+    }
+    if (this.connections.has(user)) {
+      throw new Error('This user already joined!')
+    }
+    this.log('%s: User joined %s', this.y.userID, user)
+    this.connections.set(user, {
+      uid: user,
+      isSynced: false,
+      role: role,
+      processAfterAuth: [],
+      processAfterSync: [],
+      auth: auth || null,
+      receivedSyncStep2: false
+    })
+    let defer = {}
+    defer.promise = new Promise(function (resolve) { defer.resolve = resolve })
+    this.connections.get(user).syncStep2 = defer
+    for (var f of this.userEventListeners) {
+      f({
+        action: 'userJoined',
+        user: user,
+        role: role
+      })
+    }
+    this._syncWithUser(user)
+  }
+
+  // Execute a function _when_ we are connected.
+  // If not connected, wait until connected
+  whenSynced (f) {
+    if (this.isSynced) {
+      f()
+    } else {
+      this.whenSyncedListeners.push(f)
+    }
+  }
+
+  _syncWithUser (userID) {
+    if (this.role === 'slave') {
+      return // "The current sync has not finished or this is controlled by a master!"
+    }
+    sendSyncStep1(this, userID)
+  }
+
+  _fireIsSyncedListeners () {
+    if (!this.isSynced) {
+      this.isSynced = true
+      // It is safer to remove this!
+      // call whensynced listeners
+      for (var f of this.whenSyncedListeners) {
+        f()
+      }
+      this.whenSyncedListeners = []
+      this.y._setContentReady()
+      this.y.emit('synced')
+    }
+  }
+
+  send (uid, buffer) {
+    const y = this.y
+    if (!(buffer instanceof ArrayBuffer || buffer instanceof Uint8Array)) {
+      throw new Error('Expected Message to be an ArrayBuffer or Uint8Array - don\'t use this method to send custom messages')
+    }
+    this.log('User%s to User%s: Send \'%y\'', y.userID, uid, buffer)
+    this.logMessage('User%s to User%s: Send %Y', y.userID, uid, [y, buffer])
+  }
+
+  broadcast (buffer) {
+    const y = this.y
+    if (!(buffer instanceof ArrayBuffer || buffer instanceof Uint8Array)) {
+      throw new Error('Expected Message to be an ArrayBuffer or Uint8Array - don\'t use this method to send custom messages')
+    }
+    this.log('User%s: Broadcast \'%y\'', y.userID, buffer)
+    this.logMessage('User%s: Broadcast: %Y', y.userID, [y, buffer])
+  }
+
+  /*
+    Buffer operations, and broadcast them when ready.
+  */
+  broadcastStruct (struct) {
+    const firstContent = this.broadcastBuffer.length === 0
+    if (firstContent) {
+      this.broadcastBuffer.writeVarString(this.y.room)
+      this.broadcastBuffer.writeVarString('update')
+      this.broadcastBufferSize = 0
+      this.broadcastBufferSizePos = this.broadcastBuffer.pos
+      this.broadcastBuffer.writeUint32(0)
+    }
+    this.broadcastBufferSize++
+    struct._toBinary(this.broadcastBuffer)
+    if (this.maxBufferLength > 0 && this.broadcastBuffer.length > this.maxBufferLength) {
+      // it is necessary to send the buffer now
+      // cache the buffer and check if server is responsive
+      const buffer = this.broadcastBuffer
+      buffer.setUint32(this.broadcastBufferSizePos, this.broadcastBufferSize)
+      this.broadcastBuffer = new BinaryEncoder()
+      this.whenRemoteResponsive().then(() => {
+        this.broadcast(buffer.createBuffer())
+      })
+    } else if (firstContent) {
+      // send the buffer when all transactions are finished
+      // (or buffer exceeds maxBufferLength)
+      setTimeout(() => {
+        if (this.broadcastBuffer.length > 0) {
+          const buffer = this.broadcastBuffer
+          buffer.setUint32(this.broadcastBufferSizePos, this.broadcastBufferSize)
+          this.broadcast(buffer.createBuffer())
+          this.broadcastBuffer = new BinaryEncoder()
+        }
+      }, 0)
+    }
+  }
+
+  /*
+   * Somehow check the responsiveness of the remote clients/server
+   * Default behavior:
+   *   Wait 100ms before broadcasting the next batch of operations
+   *
+   * Only used when maxBufferLength is set
+   *
+   */
+  whenRemoteResponsive () {
+    return new Promise(function (resolve) {
+      setTimeout(resolve, 100)
+    })
+  }
+
+  /*
+    You received a raw message, and you know that it is intended for Yjs. Then call this function.
+  */
+  receiveMessage (sender, buffer, skipAuth) {
+    const y = this.y
+    const userID = y.userID
+    skipAuth = skipAuth || false
+    if (!(buffer instanceof ArrayBuffer || buffer instanceof Uint8Array)) {
+      return Promise.reject(new Error('Expected Message to be an ArrayBuffer or Uint8Array!'))
+    }
+    if (sender === userID) {
+      return Promise.resolve()
+    }
+    let decoder = new BinaryDecoder(buffer)
+    let encoder = new BinaryEncoder()
+    let roomname = decoder.readVarString() // read room name
+    encoder.writeVarString(roomname)
+    let messageType = decoder.readVarString()
+    let senderConn = this.connections.get(sender)
+    this.log('User%s from User%s: Receive \'%s\'', userID, sender, messageType)
+    this.logMessage('User%s from User%s: Receive %Y', userID, sender, [y, buffer])
+    if (senderConn == null && !skipAuth) {
+      throw new Error('Received message from unknown peer!')
+    }
+    if (messageType === 'sync step 1' || messageType === 'sync step 2') {
+      let auth = decoder.readVarUint()
+      if (senderConn.auth == null) {
+        senderConn.processAfterAuth.push([messageType, senderConn, decoder, encoder, sender])
+        // check auth
+        return this.checkAuth(auth, y, sender).then(authPermissions => {
+          if (senderConn.auth == null) {
+            senderConn.auth = authPermissions
+            y.emit('userAuthenticated', {
+              user: senderConn.uid,
+              auth: authPermissions
+            })
+          }
+          let messages = senderConn.processAfterAuth
+          senderConn.processAfterAuth = []
+
+          messages.forEach(m =>
+            this.computeMessage(m[0], m[1], m[2], m[3], m[4])
+          )
+        })
+      }
+    }
+    if ((skipAuth || senderConn.auth != null) && (messageType !== 'update' || senderConn.isSynced)) {
+      this.computeMessage(messageType, senderConn, decoder, encoder, sender, skipAuth)
+    } else {
+      senderConn.processAfterSync.push([messageType, senderConn, decoder, encoder, sender, false])
+    }
+  }
+
+  computeMessage (messageType, senderConn, decoder, encoder, sender, skipAuth) {
+    if (messageType === 'sync step 1' && (senderConn.auth === 'write' || senderConn.auth === 'read')) {
+      // cannot wait for sync step 1 to finish, because we may wait for sync step 2 in sync step 1 (->lock)
+      readSyncStep1(decoder, encoder, this.y, senderConn, sender)
+    } else {
+      const y = this.y
+      y.transact(function () {
+        if (messageType === 'sync step 2' && senderConn.auth === 'write') {
+          readSyncStep2(decoder, encoder, y, senderConn, sender)
+        } else if (messageType === 'update' && (skipAuth || senderConn.auth === 'write')) {
+          integrateRemoteStructs(y, decoder)
+        } else {
+          throw new Error('Unable to receive message')
+        }
+      }, true)
+    }
+  }
+
+  _setSyncedWith (user) {
+    if (user != null) {
+      const userConn = this.connections.get(user)
+      userConn.isSynced = true
+      const messages = userConn.processAfterSync
+      userConn.processAfterSync = []
+      messages.forEach(m => {
+        this.computeMessage(m[0], m[1], m[2], m[3], m[4])
+      })
+    }
+    const conns = Array.from(this.connections.values())
+    if (conns.length > 0 && conns.every(u => u.isSynced)) {
+      this._fireIsSyncedListeners()
+    }
+  }
+}
--- a/src/Connectors/WebsocketsConnector/WebsocketsConnector.mjs
+++ b/src/Connectors/WebsocketsConnector/WebsocketsConnector.mjs
@@ -0,0 +1,140 @@
+import BinaryEncoder from '../../Util/Binary/Encoder.mjs'
+/* global WebSocket */
+import NamedEventHandler from '../../Util/NamedEventHandler.mjs'
+import decodeMessage, { messageSS, messageSubscribe, messageStructs } from './decodeMessage.mjs'
+import { createMutualExclude } from '../../Util/mutualExclude.mjs'
+import { messageCheckUpdateCounter } from './decodeMessage.mjs'
+
+export const STATE_DISCONNECTED = 0 
+export const STATE_CONNECTED = 1
+
+export default class WebsocketsConnector extends NamedEventHandler {
+  constructor (url = 'ws://localhost:1234') {
+    super()
+    this.url = url
+    this._state = STATE_DISCONNECTED
+    this._socket = null
+    this._rooms = new Map()
+    this._connectToServer = true
+    this._reconnectTimeout = 300
+    this._mutualExclude = createMutualExclude()
+    this._persistence = null
+    this.connect()
+  }
+
+  getRoom (roomName) {
+    return this._rooms.get(roomName) || { y: null, roomName, localUpdateCounter: 1 }
+  }
+
+  syncPersistence (persistence) {
+    this._persistence = persistence
+    if (this._state === STATE_CONNECTED) {
+      persistence.getAllDocuments().then(docs => {
+        const encoder = new BinaryEncoder()
+        docs.forEach(doc => {
+          messageCheckUpdateCounter(doc.roomName, encoder, doc.remoteUpdateCounter)
+        });
+        this.send(encoder)
+      })
+    }
+  }
+
+  connectY (roomName, y) {
+    let room = this._rooms.get(roomName)
+    if (room !== undefined) {
+      throw new Error('Room is already taken! There can be only one Yjs instance per roomName!')
+    }
+    this._rooms.set(roomName, {
+      roomName,
+      y,
+      localUpdateCounter: 1
+    })
+    y.on('afterTransaction', (y, transaction) => {
+      this._mutualExclude(() => {
+        if (transaction.encodedStructsLen > 0) {
+          const encoder = new BinaryEncoder()
+          const room = this._rooms.get(roomName)
+          messageStructs(roomName, y, encoder, transaction.encodedStructs, ++room.localUpdateCounter)
+          this.send(encoder)
+        }
+      })
+    })
+    if (this._state === STATE_CONNECTED) {
+      const encoder = new BinaryEncoder()
+      messageSS(roomName, y, encoder)
+      messageSubscribe(roomName, y, encoder)
+      this.send(encoder)
+    }
+  }
+
+  _setState (state) {
+    this._state = state
+    this.emit('stateChanged', {
+      state: this.state
+    })
+  }
+
+  get state () {
+    return this._state === STATE_DISCONNECTED ? 'disconnected' : 'connected'
+  }
+
+  _onOpen () {
+    this._setState(STATE_CONNECTED)
+    if (this._persistence === null) {
+      const encoder = new BinaryEncoder()
+      for (const [roomName, room] of this._rooms) {
+        const y = room.y
+        messageSS(roomName, y, encoder)
+        messageSubscribe(roomName, y, encoder)
+      }
+      this.send(encoder)
+    } else {
+      this.syncPersistence(this._persistence)
+    }
+  }
+
+  send (encoder) {
+    if (encoder.length > 0 && this._socket.readyState === WebSocket.OPEN) {
+      this._socket.send(encoder.createBuffer())
+    }
+  }
+
+  _onClose () {
+    this._setState(STATE_DISCONNECTED)
+    this._socket = null
+    if (this._connectToServer) {
+      setTimeout(() => {
+        if (this._connectToServer) {
+          this.connect()
+        }
+      }, this._reconnectTimeout)
+      this.connect()
+    }
+  }
+
+  _onMessage (message) {
+    if (message.data.byteLength > 0) {
+      const reply = decodeMessage(this, message.data, null, false, this._persistence)
+      this.send(reply)
+    }
+  }
+
+  disconnect (code = 1000, reason = 'Client manually disconnected') {
+    const socket = this._socket
+    this._connectToServer = false
+    socket.close(code, reason)
+  }
+
+  connect () {
+    if (this._socket === null) {
+      const socket = new WebSocket(this.url)
+      socket.binaryType = 'arraybuffer'
+      this._socket = socket
+      this._connectToServer = true
+      // Connection opened
+      socket.addEventListener('open', this._onOpen.bind(this))
+      socket.addEventListener('close', this._onClose.bind(this))
+      socket.addEventListener('message', this._onMessage.bind(this))
+    }
+  }
+}
--- a/src/Connectors/WebsocketsConnector/decodeMessage.mjs
+++ b/src/Connectors/WebsocketsConnector/decodeMessage.mjs
@@ -0,0 +1,159 @@
+import BinaryDecoder from '../../Util/Binary/Decoder.mjs'
+import BinaryEncoder from '../../Util/Binary/Encoder.mjs'
+import { readStateSet, writeStateSet } from '../../MessageHandler/stateSet.mjs'
+import { writeStructs } from '../../MessageHandler/syncStep1.mjs'
+import { writeDeleteSet, readDeleteSet } from '../../MessageHandler/deleteSet.mjs'
+import { integrateRemoteStructs } from '../../MessageHandler/integrateRemoteStructs.mjs'
+
+const CONTENT_GET_SS = 4
+export function messageGetSS (roomName, y, encoder) {
+  encoder.writeVarString(roomName)
+  encoder.writeVarUint(CONTENT_GET_SS)
+}
+
+const CONTENT_SUBSCRIBE = 3
+export function messageSubscribe (roomName, y, encoder) {
+  encoder.writeVarString(roomName)
+  encoder.writeVarUint(CONTENT_SUBSCRIBE)
+}
+
+const CONTENT_SS = 0
+export function messageSS (roomName, y, encoder) {
+  encoder.writeVarString(roomName)
+  encoder.writeVarUint(CONTENT_SS)
+  writeStateSet(y, encoder)
+}
+
+const CONTENT_STRUCTS_DSS = 2
+export function messageStructsDSS (roomName, y, encoder, ss, updateCounter) {
+  encoder.writeVarString(roomName)
+  encoder.writeVarUint(CONTENT_STRUCTS_DSS)
+  encoder.writeVarUint(updateCounter)
+  const structsDS = new BinaryEncoder()
+  writeStructs(y, structsDS, ss)
+  writeDeleteSet(y, structsDS)
+  encoder.writeVarUint(structsDS.length)
+  encoder.writeBinaryEncoder(structsDS)
+}
+
+const CONTENT_STRUCTS = 5
+export function messageStructs (roomName, y, encoder, structsBinaryEncoder, updateCounter) {
+  encoder.writeVarString(roomName)
+  encoder.writeVarUint(CONTENT_STRUCTS)
+  encoder.writeVarUint(updateCounter)
+  encoder.writeVarUint(structsBinaryEncoder.length)
+  encoder.writeBinaryEncoder(structsBinaryEncoder)
+}
+
+const CONTENT_CHECK_COUNTER = 6
+export function messageCheckUpdateCounter (roomName, encoder, updateCounter = 0) {
+  encoder.writeVarString(roomName)
+  encoder.writeVarUint(CONTENT_CHECK_COUNTER)
+  encoder.writeVarUint(updateCounter)
+}
+
+/**
+ * Decodes a client-message.
+ *
+ * A client-message consists of multiple message-elements that are concatenated without delimiter.
+ * Each has the following structure:
+ * - roomName
+ * - content_type
+ * - content (additional info that is encoded based on the value of content_type)
+ *
+ * The message is encoded until no more message-elements are available.
+ *
+ * @param {*} connector The connector that handles the connections
+ * @param {*} message The binary encoded message
+ * @param {*} ws The connection object
+ */
+export default function decodeMessage (connector, message, ws, isServer = false, persistence) {
+  const decoder = new BinaryDecoder(message)
+  const encoder = new BinaryEncoder()
+  while (decoder.hasContent()) {
+    const roomName = decoder.readVarString()
+    const contentType = decoder.readVarUint()
+    const room = connector.getRoom(roomName)
+    const y = room.y
+    switch (contentType) {
+      case CONTENT_CHECK_COUNTER:
+        const updateCounter = decoder.readVarUint()
+        if (room.localUpdateCounter !== updateCounter) {
+          messageGetSS(roomName, y, encoder)
+        }
+        connector.subscribe(roomName, ws)
+        break
+      case CONTENT_STRUCTS:
+        console.log(`${roomName}: received update`)
+        connector._mutualExclude(() => {
+          const remoteUpdateCounter = decoder.readVarUint()
+          persistence.setRemoteUpdateCounter(roomName, remoteUpdateCounter)
+          const messageLen = decoder.readVarUint()
+          if (y === null) {
+            persistence._persistStructs(roomName, decoder.readArrayBuffer(messageLen))
+          } else {
+            y.transact(() => {
+              integrateRemoteStructs(y, decoder)
+            }, true)
+          }
+        })
+        break
+      case CONTENT_GET_SS:
+        if (y !== null) {
+          messageSS(roomName, y, encoder)
+        } else {
+          persistence._createYInstance(roomName).then(y => {
+            const encoder = new BinaryEncoder()
+            messageSS(roomName, y, encoder)
+            connector.send(encoder, ws)
+          })
+        }
+        break
+      case CONTENT_SUBSCRIBE:
+        connector.subscribe(roomName, ws)
+        break
+      case CONTENT_SS:
+        // received state set
+        // reply with missing content
+        const ss = readStateSet(decoder)
+        const sendStructsDSS = () => {
+          if (y !== null) { // TODO: how to sync local content?
+            const encoder = new BinaryEncoder()
+            messageStructsDSS(roomName, y, encoder, ss, room.localUpdateCounter) // room.localUpdateHandler in case it changes
+            if (isServer) {
+              messageSS(roomName, y, encoder)
+            }
+            connector.send(encoder, ws)
+          }
+        }
+        if (room.persistenceLoaded !== undefined) {
+          room.persistenceLoaded.then(sendStructsDSS)
+        } else {
+          sendStructsDSS()
+        }
+        break
+      case CONTENT_STRUCTS_DSS:
+        console.log(`${roomName}: synced`)
+        connector._mutualExclude(() => {
+          const remoteUpdateCounter = decoder.readVarUint()
+          persistence.setRemoteUpdateCounter(roomName, remoteUpdateCounter)
+          const messageLen = decoder.readVarUint()
+          if (y === null) {
+            persistence._persistStructsDS(roomName, decoder.readArrayBuffer(messageLen))
+          } else {
+            y.transact(() => {
+              integrateRemoteStructs(y, decoder)
+              readDeleteSet(y, decoder)
+            }, true)
+          }
+        })
+        break
+      default:
+        console.error('Unexpected content type!')
+        if (ws !== null) {
+          ws.close() // TODO: specify reason
+        }
+    }
+  }
+  return encoder
+}
--- a/src/Connectors/WebsocketsConnector/server.mjs
+++ b/src/Connectors/WebsocketsConnector/server.mjs
@@ -0,0 +1,124 @@
+import Y from '../../Y.mjs'
+import uws from 'uws'
+import BinaryEncoder from '../../Util/Binary/Encoder.mjs'
+import decodeMessage, { messageStructs } from './decodeMessage.mjs'
+import FilePersistence from '../../Persistences/FilePersistence.mjs'
+
+const WebsocketsServer = uws.Server
+const persistence = new FilePersistence('.yjsPersisted')
+/**
+  * Maps from room-name to ..
+  * {
+  *   connections, // Set of ws-clients that listen to the room
+  *   y            // Yjs instance that handles the room
+  * }
+  */
+const rooms = new Map()
+/**
+ * Maps from ws-connection to Set<roomName> - the set of connected roomNames
+ */
+const connections = new Map()
+const port = process.env.PORT || 1234
+const wss = new WebsocketsServer({
+  port,
+  perMessageDeflate: {}
+})
+
+/**
+ * Set of room names that are scheduled to be sweeped (destroyed because they don't have a connection anymore)
+ */
+const scheduledSweeps = new Set()
+/* TODO: enable sweeping
+setInterval(function sweepRoomes () {
+  scheduledSweeps.forEach(roomName => {
+    const room = rooms.get(roomName)
+    if (room !== undefined) {
+      if (room.connections.size === 0) {
+        persistence.saveState(roomName, room.y).then(() => {
+          if (room.connections.size === 0) {
+            room.y.destroy()
+            rooms.delete(roomName)
+          }
+        })
+      }
+    }
+  })
+  scheduledSweeps.clear()
+}, 5000) */ 
+
+const wsConnector = {
+  send: (encoder, ws) => {
+    const message = encoder.createBuffer()
+    ws.send(message, null, null, true)
+  },
+  _mutualExclude: f => { f() },
+  subscribe: function subscribe (roomName, ws) {
+    let roomNames = connections.get(ws)
+    if (roomNames === undefined) {
+      roomNames = new Set()
+      connections.set(ws, roomNames)
+    }
+    roomNames.add(roomName)
+    const room = this.getRoom(roomName)
+    room.connections.add(ws)
+  },
+  getRoom: function getRoom (roomName) {
+    let room = rooms.get(roomName)
+    if (room === undefined) {
+      const y = new Y(roomName, null, null, { gc: true })
+      const persistenceLoaded = persistence.readState(roomName, y)
+      room = {
+        name: roomName,
+        connections: new Set(),
+        y,
+        persistenceLoaded,
+        localUpdateCounter: 1
+      }
+      y.on('afterTransaction', (y, transaction) => {
+        if (transaction.encodedStructsLen > 0) {
+          // save to persistence
+          persistence.saveUpdate(roomName, y, transaction.encodedStructs)
+          // forward update to clients
+          persistence._mutex(() => { // do not broadcast if persistence.readState is called
+            const encoder = new BinaryEncoder()
+            messageStructs(roomName, y, encoder, transaction.encodedStructs, ++room.localUpdateCounter)
+            const message = encoder.createBuffer()
+            // when changed, broakcast update to all connections
+            room.connections.forEach(conn => {
+              conn.send(message, null, null, true)
+            })
+          })
+        }
+      })
+      rooms.set(roomName, room)
+    }
+    return room
+  }
+}
+
+wss.on('connection', (ws) => {
+  ws.on('message', function onWSMessage (message) {
+    if (message.byteLength > 0) {
+      const reply = decodeMessage(wsConnector, message, ws, true, persistence)
+      if (reply.length > 0) {
+        ws.send(reply.createBuffer(), null, null, true)
+      }
+    }
+  })
+  ws.on('close', function onWSClose () {
+    const roomNames = connections.get(ws)
+    if (roomNames !== undefined) {
+      roomNames.forEach(roomName => {
+        const room = rooms.get(roomName)
+        if (room !== undefined) {
+          const connections = room.connections
+          connections.delete(ws)
+          if (connections.size === 0) {
+            scheduledSweeps.add(roomName)
+          }
+        }
+      })
+      connections.delete(ws)
+    }
+  })
+})
--- a/src/Database.js
+++ b/src/Database.js
@@ -1,609 +0,0 @@
-/* @flow */
-'use strict'
-
-export default function extendDatabase (Y /* :any */) {
-  /*
-    Partial definition of an OperationStore.
-    TODO: name it Database, operation store only holds operations.
-
-    A database definition must alse define the following methods:
-    * logTable() (optional)
-      - show relevant information information in a table
-    * requestTransaction(makeGen)
-      - request a transaction
-    * destroy()
-      - destroy the database
-  */
-  class AbstractDatabase {
-    /* ::
-    y: YConfig;
-    forwardAppliedOperations: boolean;
-    listenersById: Object;
-    listenersByIdExecuteNow: Array<Object>;
-    listenersByIdRequestPending: boolean;
-    initializedTypes: Object;
-    whenUserIdSetListener: ?Function;
-    waitingTransactions: Array<Transaction>;
-    transactionInProgress: boolean;
-    executeOrder: Array<Object>;
-    gc1: Array<Struct>;
-    gc2: Array<Struct>;
-    gcTimeout: number;
-    gcInterval: any;
-    garbageCollect: Function;
-    executeOrder: Array<any>; // for debugging only
-    userId: UserId;
-    opClock: number;
-    transactionsFinished: ?{promise: Promise, resolve: any};
-    transact: (x: ?Generator) => any;
-    */
-    constructor (y, opts) {
-      this.y = y
-      opts.gc = opts.gc === true
-      this.dbOpts = opts
-      var os = this
-      this.userId = null
-      var resolve_
-      this.userIdPromise = new Promise(function (resolve) {
-        resolve_ = resolve
-      })
-      this.userIdPromise.resolve = resolve_
-      // whether to broadcast all applied operations (insert & delete hook)
-      this.forwardAppliedOperations = false
-      // E.g. this.listenersById[id] : Array<Listener>
-      this.listenersById = {}
-      // Execute the next time a transaction is requested
-      this.listenersByIdExecuteNow = []
-      // A transaction is requested
-      this.listenersByIdRequestPending = false
-      /* To make things more clear, the following naming conventions:
-         * ls : we put this.listenersById on ls
-         * l : Array<Listener>
-         * id : Id (can't use as property name)
-         * sid : String (converted from id via JSON.stringify
-                         so we can use it as a property name)
-
-        Always remember to first overwrite
-        a property before you iterate over it!
-      */
-      // TODO: Use ES7 Weak Maps. This way types that are no longer user,
-      // wont be kept in memory.
-      this.initializedTypes = {}
-      this.waitingTransactions = []
-      this.transactionInProgress = false
-      this.transactionIsFlushed = false
-      if (typeof YConcurrencyTestingMode !== 'undefined') {
-        this.executeOrder = []
-      }
-      this.gc1 = [] // first stage
-      this.gc2 = [] // second stage -> after that, remove the op
-
-      function garbageCollect () {
-        return os.whenTransactionsFinished().then(function () {
-          if (os.gcTimeout > 0 && (os.gc1.length > 0 || os.gc2.length > 0)) {
-            if (!os.y.connector.isSynced) {
-              console.warn('gc should be empty when not synced!')
-            }
-            return new Promise((resolve) => {
-              os.requestTransaction(function () {
-                if (os.y.connector != null && os.y.connector.isSynced) {
-                  for (var i = 0; i < os.gc2.length; i++) {
-                    var oid = os.gc2[i]
-                    this.garbageCollectOperation(oid)
-                  }
-                  os.gc2 = os.gc1
-                  os.gc1 = []
-                }
-                // TODO: Use setInterval here instead (when garbageCollect is called several times there will be several timeouts..)
-                if (os.gcTimeout > 0) {
-                  os.gcInterval = setTimeout(garbageCollect, os.gcTimeout)
-                }
-                resolve()
-              })
-            })
-          } else {
-            // TODO: see above
-            if (os.gcTimeout > 0) {
-              os.gcInterval = setTimeout(garbageCollect, os.gcTimeout)
-            }
-            return Promise.resolve()
-          }
-        })
-      }
-      this.garbageCollect = garbageCollect
-      this.startGarbageCollector()
-
-      this.repairCheckInterval = !opts.repairCheckInterval ? 6000 : opts.repairCheckInterval
-      this.opsReceivedTimestamp = new Date()
-      this.startRepairCheck()
-    }
-    startGarbageCollector () {
-      this.gc = this.dbOpts.gc
-      if (this.gc) {
-        this.gcTimeout = !this.dbOpts.gcTimeout ? 30000 : this.dbOpts.gcTimeout
-      } else {
-        this.gcTimeout = -1
-      }
-      if (this.gcTimeout > 0) {
-        this.garbageCollect()
-      }
-    }
-    startRepairCheck () {
-      var os = this
-      if (this.repairCheckInterval > 0) {
-        this.repairCheckIntervalHandler = setInterval(function repairOnMissingOperations () {
-          /*
-            Case 1. No ops have been received in a while (new Date() - os.opsReceivedTimestamp > os.repairCheckInterval)
-              - 1.1 os.listenersById is empty. Then the state was correct the whole time. -> Nothing to do (nor to update)
-              - 1.2 os.listenersById is not empty.
-                      * Then the state was incorrect for at least {os.repairCheckInterval} seconds.
-                      * -> Remove everything in os.listenersById and sync again (connector.repair())
-            Case 2. An op has been received in the last {os.repairCheckInterval } seconds.
-                    It is not yet necessary to check for faulty behavior. Everything can still resolve itself. Wait for more messages.
-                    If nothing was received for a while and os.listenersById is still not emty, we are in case 1.2
-                    -> Do nothing
-
-            Baseline here is: we really only have to catch case 1.2..
-          */
-          if (
-            new Date() - os.opsReceivedTimestamp > os.repairCheckInterval &&
-            Object.keys(os.listenersById).length > 0 // os.listenersById is not empty
-          ) {
-            // haven't received operations for over {os.repairCheckInterval} seconds, resend state vector
-            os.listenersById = {}
-            os.opsReceivedTimestamp = new Date() // update so you don't send repair several times in a row
-            os.y.connector.repair()
-          }
-        }, this.repairCheckInterval)
-      }
-    }
-    stopRepairCheck () {
-      clearInterval(this.repairCheckIntervalHandler)
-    }
-    queueGarbageCollector (id) {
-      if (this.y.connector.isSynced && this.gc) {
-        this.gc1.push(id)
-      }
-    }
-    emptyGarbageCollector () {
-      return new Promise(resolve => {
-        var check = () => {
-          if (this.gc1.length > 0 || this.gc2.length > 0) {
-            this.garbageCollect().then(check)
-          } else {
-            resolve()
-          }
-        }
-        setTimeout(check, 0)
-      })
-    }
-    addToDebug () {
-      if (typeof YConcurrencyTestingMode !== 'undefined') {
-        var command /* :string */ = Array.prototype.map.call(arguments, function (s) {
-          if (typeof s === 'string') {
-            return s
-          } else {
-            return JSON.stringify(s)
-          }
-        }).join('').replace(/"/g, "'").replace(/,/g, ', ').replace(/:/g, ': ')
-        this.executeOrder.push(command)
-      }
-    }
-    getDebugData () {
-      console.log(this.executeOrder.join('\n'))
-    }
-    stopGarbageCollector () {
-      var self = this
-      this.gc = false
-      this.gcTimeout = -1
-      return new Promise(function (resolve) {
-        self.requestTransaction(function () {
-          var ungc /* :Array<Struct> */ = self.gc1.concat(self.gc2)
-          self.gc1 = []
-          self.gc2 = []
-          for (var i = 0; i < ungc.length; i++) {
-            var op = this.getOperation(ungc[i])
-            if (op != null) {
-              delete op.gc
-              this.setOperation(op)
-            }
-          }
-          resolve()
-        })
-      })
-    }
-    /*
-      Try to add to GC.
-
-      TODO: rename this function
-
-      Rulez:
-      * Only gc if this user is online & gc turned on
-      * The most left element in a list must not be gc'd.
-        => There is at least one element in the list
-
-      returns true iff op was added to GC
-    */
-    addToGarbageCollector (op, left) {
-      if (
-        op.gc == null &&
-        op.deleted === true &&
-        this.store.gc &&
-        this.store.y.connector.isSynced
-      ) {
-        var gc = false
-        if (left != null && left.deleted === true) {
-          gc = true
-        } else if (op.content != null && op.content.length > 1) {
-          op = this.getInsertionCleanStart([op.id[0], op.id[1] + 1])
-          gc = true
-        }
-        if (gc) {
-          op.gc = true
-          this.setOperation(op)
-          this.store.queueGarbageCollector(op.id)
-          return true
-        }
-      }
-      return false
-    }
-    removeFromGarbageCollector (op) {
-      function filter (o) {
-        return !Y.utils.compareIds(o, op.id)
-      }
-      this.gc1 = this.gc1.filter(filter)
-      this.gc2 = this.gc2.filter(filter)
-      delete op.gc
-    }
-    destroyTypes () {
-      for (var key in this.initializedTypes) {
-        var type = this.initializedTypes[key]
-        if (type._destroy != null) {
-          type._destroy()
-        } else {
-          console.error('The type you included does not provide destroy functionality, it will remain in memory (updating your packages will help).')
-        }
-      }
-    }
-    destroy () {
-      clearTimeout(this.gcInterval)
-      this.gcInterval = null
-      this.stopRepairCheck()
-    }
-    setUserId (userId) {
-      if (!this.userIdPromise.inProgress) {
-        this.userIdPromise.inProgress = true
-        var self = this
-        self.requestTransaction(function () {
-          self.userId = userId
-          var state = this.getState(userId)
-          self.opClock = state.clock
-          self.userIdPromise.resolve(userId)
-        })
-      }
-      return this.userIdPromise
-    }
-    whenUserIdSet (f) {
-      this.userIdPromise.then(f)
-    }
-    getNextOpId (numberOfIds) {
-      if (numberOfIds == null) {
-        throw new Error('getNextOpId expects the number of created ids to create!')
-      } else if (this.userId == null) {
-        throw new Error('OperationStore not yet initialized!')
-      } else {
-        var id = [this.userId, this.opClock]
-        this.opClock += numberOfIds
-        return id
-      }
-    }
-    /*
-      Apply a list of operations.
-
-      * we save a timestamp, because we received new operations that could resolve ops in this.listenersById (see this.startRepairCheck)
-      * get a transaction
-      * check whether all Struct.*.requiredOps are in the OS
-      * check if it is an expected op (otherwise wait for it)
-      * check if was deleted, apply a delete operation after op was applied
-    */
-    applyOperations (decoder) {
-      this.opsReceivedTimestamp = new Date()
-      let length = decoder.readUint32()
-
-      for (var i = 0; i < length; i++) {
-        let o = Y.Struct.binaryDecodeOperation(decoder)
-        if (o.id == null || o.id[0] !== this.y.connector.userId) {
-          var required = Y.Struct[o.struct].requiredOps(o)
-          if (o.requires != null) {
-            required = required.concat(o.requires)
-          }
-          this.whenOperationsExist(required, o)
-        }
-      }
-    }
-    /*
-      op is executed as soon as every operation requested is available.
-      Note that Transaction can (and should) buffer requests.
-    */
-    whenOperationsExist (ids, op) {
-      if (ids.length > 0) {
-        let listener = {
-          op: op,
-          missing: ids.length
-        }
-
-        for (let i = 0; i < ids.length; i++) {
-          let id = ids[i]
-          let sid = JSON.stringify(id)
-          let l = this.listenersById[sid]
-          if (l == null) {
-            l = []
-            this.listenersById[sid] = l
-          }
-          l.push(listener)
-        }
-      } else {
-        this.listenersByIdExecuteNow.push({
-          op: op
-        })
-      }
-
-      if (this.listenersByIdRequestPending) {
-        return
-      }
-
-      this.listenersByIdRequestPending = true
-      var store = this
-
-      this.requestTransaction(function () {
-        var exeNow = store.listenersByIdExecuteNow
-        store.listenersByIdExecuteNow = []
-
-        var ls = store.listenersById
-        store.listenersById = {}
-
-        store.listenersByIdRequestPending = false
-
-        for (let key = 0; key < exeNow.length; key++) {
-          let o = exeNow[key].op
-          store.tryExecute.call(this, o)
-        }
-
-        for (var sid in ls) {
-          var l = ls[sid]
-          var id = JSON.parse(sid)
-          var op
-          if (typeof id[1] === 'string') {
-            op = this.getOperation(id)
-          } else {
-            op = this.getInsertion(id)
-          }
-          if (op == null) {
-            store.listenersById[sid] = l
-          } else {
-            for (let i = 0; i < l.length; i++) {
-              let listener = l[i]
-              let o = listener.op
-              if (--listener.missing === 0) {
-                store.tryExecute.call(this, o)
-              }
-            }
-          }
-        }
-      })
-    }
-    /*
-      Actually execute an operation, when all expected operations are available.
-    */
-    /* :: // TODO: this belongs somehow to transaction
-    store: Object;
-    getOperation: any;
-    isGarbageCollected: any;
-    addOperation: any;
-    whenOperationsExist: any;
-    */
-    tryExecute (op) {
-      this.store.addToDebug('this.store.tryExecute.call(this, ', JSON.stringify(op), ')')
-      if (op.struct === 'Delete') {
-        Y.Struct.Delete.execute.call(this, op)
-        // this is now called in Transaction.deleteOperation!
-        // this.store.operationAdded(this, op)
-      } else {
-        // check if this op was defined
-        var defined = this.getInsertion(op.id)
-        while (defined != null && defined.content != null) {
-          // check if this op has a longer content in the case it is defined
-          if (defined.id[1] + defined.content.length < op.id[1] + op.content.length) {
-            var overlapSize = defined.content.length - (op.id[1] - defined.id[1])
-            op.content.splice(0, overlapSize)
-            op.id = [op.id[0], op.id[1] + overlapSize]
-            op.left = Y.utils.getLastId(defined)
-            op.origin = op.left
-            defined = this.getOperation(op.id) // getOperation suffices here
-          } else {
-            break
-          }
-        }
-        if (defined == null) {
-          var opid = op.id
-          var isGarbageCollected = this.isGarbageCollected(opid)
-          if (!isGarbageCollected) {
-            // TODO: reduce number of get / put calls for op ..
-            Y.Struct[op.struct].execute.call(this, op)
-            this.addOperation(op)
-            this.store.operationAdded(this, op)
-            // operationAdded can change op..
-            op = this.getOperation(opid)
-            // if insertion, try to combine with left
-            this.tryCombineWithLeft(op)
-          }
-        }
-      }
-    }
-    /*
-     * Called by a transaction when an operation is added.
-     * This function is especially important for y-indexeddb, where several instances may share a single database.
-     * Every time an operation is created by one instance, it is send to all other instances and operationAdded is called
-     *
-     * If it's not a Delete operation:
-     *   * Checks if another operation is executable (listenersById)
-     *   * Update state, if possible
-     *
-     * Always:
-     *   * Call type
-     */
-    operationAdded (transaction, op) {
-      if (op.struct === 'Delete') {
-        var type = this.initializedTypes[JSON.stringify(op.targetParent)]
-        if (type != null) {
-          type._changed(transaction, op)
-        }
-      } else {
-        // increase SS
-        transaction.updateState(op.id[0])
-        var opLen = op.content != null ? op.content.length : 1
-        for (let i = 0; i < opLen; i++) {
-          // notify whenOperation listeners (by id)
-          var sid = JSON.stringify([op.id[0], op.id[1] + i])
-          var l = this.listenersById[sid]
-          delete this.listenersById[sid]
-          if (l != null) {
-            for (var key in l) {
-              var listener = l[key]
-              if (--listener.missing === 0) {
-                this.whenOperationsExist([], listener.op)
-              }
-            }
-          }
-        }
-        var t = this.initializedTypes[JSON.stringify(op.parent)]
-
-        // if parent is deleted, mark as gc'd and return
-        if (op.parent != null) {
-          var parentIsDeleted = transaction.isDeleted(op.parent)
-          if (parentIsDeleted) {
-            transaction.deleteList(op.id)
-            return
-          }
-        }
-
-        // notify parent, if it was instanciated as a custom type
-        if (t != null) {
-          let o = Y.utils.copyOperation(op)
-          t._changed(transaction, o)
-        }
-        if (!op.deleted) {
-          // Delete if DS says this is actually deleted
-          var len = op.content != null ? op.content.length : 1
-          var startId = op.id // You must not use op.id in the following loop, because op will change when deleted
-            // TODO: !! console.log('TODO: change this before commiting')
-          for (let i = 0; i < len; i++) {
-            var id = [startId[0], startId[1] + i]
-            var opIsDeleted = transaction.isDeleted(id)
-            if (opIsDeleted) {
-              var delop = {
-                struct: 'Delete',
-                target: id
-              }
-              this.tryExecute.call(transaction, delop)
-            }
-          }
-        }
-      }
-    }
-
-    whenTransactionsFinished () {
-      if (this.transactionInProgress) {
-        if (this.transactionsFinished == null) {
-          var resolve_
-          var promise = new Promise(function (resolve) {
-            resolve_ = resolve
-          })
-          this.transactionsFinished = {
-            resolve: resolve_,
-            promise: promise
-          }
-        }
-        return this.transactionsFinished.promise
-      } else {
-        return Promise.resolve()
-      }
-    }
-
-    // Check if there is another transaction request.
-    // * the last transaction is always a flush :)
-    getNextRequest () {
-      if (this.waitingTransactions.length === 0) {
-        if (this.transactionIsFlushed) {
-          this.transactionInProgress = false
-          this.transactionIsFlushed = false
-          if (this.transactionsFinished != null) {
-            this.transactionsFinished.resolve()
-            this.transactionsFinished = null
-          }
-          return null
-        } else {
-          this.transactionIsFlushed = true
-          return function () {
-            this.flush()
-          }
-        }
-      } else {
-        this.transactionIsFlushed = false
-        return this.waitingTransactions.shift()
-      }
-    }
-    requestTransaction (makeGen/* :any */, callImmediately) {
-      this.waitingTransactions.push(makeGen)
-      if (!this.transactionInProgress) {
-        this.transactionInProgress = true
-        setTimeout(() => {
-          this.transact(this.getNextRequest())
-        }, 0)
-      }
-    }
-    /*
-      Get a created/initialized type.
-    */
-    getType (id) {
-      return this.initializedTypes[JSON.stringify(id)]
-    }
-    /*
-      Init type. This is called when a remote operation is retrieved, and transformed to a type
-      TODO: delete type from store.initializedTypes[id] when corresponding id was deleted!
-    */
-    initType (id, args) {
-      var sid = JSON.stringify(id)
-      var t = this.store.initializedTypes[sid]
-      if (t == null) {
-        var op/* :MapStruct | ListStruct */ = this.getOperation(id)
-        if (op != null) {
-          t = Y[op.type].typeDefinition.initType.call(this, this.store, op, args)
-          this.store.initializedTypes[sid] = t
-        }
-      }
-      return t
-    }
-    /*
-     Create type. This is called when the local user creates a type (which is a synchronous action)
-    */
-    createType (typedefinition, id) {
-      var structname = typedefinition[0].struct
-      id = id || this.getNextOpId(1)
-      var op = Y.Struct[structname].create(id, typedefinition[1])
-      op.type = typedefinition[0].name
-
-      this.requestTransaction(function () {
-        if (op.id[0] === 0xFFFFFF) {
-          this.setOperation(op)
-        } else {
-          this.applyCreatedOperations([op])
-        }
-      })
-      var t = Y[op.type].typeDefinition.createType(this, op, typedefinition[1])
-      this.initializedTypes[JSON.stringify(op.id)] = t
-      return t
-    }
-  }
-  Y.AbstractDatabase = AbstractDatabase
-}
--- a/src/Encoding.js
+++ b/src/Encoding.js
@@ -1,156 +0,0 @@
-import utf8 from 'utf-8'
-
-const bits7 = 0b1111111
-const bits8 = 0b11111111
-
-export class BinaryEncoder {
-  constructor () {
-    this.data = []
-  }
-
-  get length () {
-    return this.data.length
-  }
-
-  get pos () {
-    return this.data.length
-  }
-
-  createBuffer () {
-    return Uint8Array.from(this.data).buffer
-  }
-
-  writeUint8 (num) {
-    this.data.push(num & bits8)
-  }
-
-  setUint8 (pos, num) {
-    this.data[pos] = num & bits8
-  }
-
-  writeUint16 (num) {
-    this.data.push(num & bits8, (num >>> 8) & bits8)
-  }
-
-  setUint16 (pos, num) {
-    this.data[pos] = num & bits8
-    this.data[pos + 1] = (num >>> 8) & bits8
-  }
-
-  writeUint32 (num) {
-    for (let i = 0; i < 4; i++) {
-      this.data.push(num & bits8)
-      num >>>= 8
-    }
-  }
-
-  setUint32 (pos, num) {
-    for (let i = 0; i < 4; i++) {
-      this.data[pos + i] = num & bits8
-      num >>>= 8
-    }
-  }
-
-  writeVarUint (num) {
-    while (num >= 0b10000000) {
-      this.data.push(0b10000000 | (bits7 & num))
-      num >>>= 7
-    }
-    this.data.push(bits7 & num)
-  }
-
-  writeVarString (str) {
-    let bytes = utf8.setBytesFromString(str)
-    let len = bytes.length
-    this.writeVarUint(len)
-    for (let i = 0; i < len; i++) {
-      this.data.push(bytes[i])
-    }
-  }
-
-  writeOpID (id) {
-    let user = id[0]
-    this.writeVarUint(user)
-    if (user !== 0xFFFFFF) {
-      this.writeVarUint(id[1])
-    } else {
-      this.writeVarString(id[1])
-    }
-  }
-}
-
-export class BinaryDecoder {
-  constructor (buffer) {
-    if (buffer instanceof ArrayBuffer) {
-      this.uint8arr = new Uint8Array(buffer)
-    } else if (buffer instanceof Uint8Array || (typeof Buffer !== 'undefined' && buffer instanceof Buffer)) {
-      this.uint8arr = buffer
-    } else {
-      throw new Error('Expected an ArrayBuffer or Uint8Array!')
-    }
-    this.pos = 0
-  }
-
-  skip8 () {
-    this.pos++
-  }
-
-  readUint8 () {
-    return this.uint8arr[this.pos++]
-  }
-
-  readUint32 () {
-    let uint =
-      this.uint8arr[this.pos] +
-      (this.uint8arr[this.pos + 1] << 8) +
-      (this.uint8arr[this.pos + 2] << 16) +
-      (this.uint8arr[this.pos + 3] << 24)
-    this.pos += 4
-    return uint
-  }
-
-  peekUint8 () {
-    return this.uint8arr[this.pos]
-  }
-
-  readVarUint () {
-    let num = 0
-    let len = 0
-    while (true) {
-      let r = this.uint8arr[this.pos++]
-      num = num | ((r & bits7) << len)
-      len += 7
-      if (r < 1 << 7) {
-        return num >>> 0 // return unsigned number!
-      }
-      if (len > 35) {
-        throw new Error('Integer out of range!')
-      }
-    }
-  }
-
-  readVarString () {
-    let len = this.readVarUint()
-    let bytes = new Array(len)
-    for (let i = 0; i < len; i++) {
-      bytes[i] = this.uint8arr[this.pos++]
-    }
-    return utf8.getStringFromBytes(bytes)
-  }
-
-  peekVarString () {
-    let pos = this.pos
-    let s = this.readVarString()
-    this.pos = pos
-    return s
-  }
-
-  readOpID () {
-    let user = this.readVarUint()
-    if (user !== 0xFFFFFF) {
-      return [user, this.readVarUint()]
-    } else {
-      return [user, this.readVarString()]
-    }
-  }
-}
--- a/src/MessageHandler.js
+++ b/src/MessageHandler.js
@@ -1,193 +0,0 @@
-
-import Y from './y.js'
-import { BinaryDecoder, BinaryEncoder } from './Encoding.js'
-
-export function formatYjsMessage (buffer) {
-  let decoder = new BinaryDecoder(buffer)
-  decoder.readVarString() // read roomname
-  let type = decoder.readVarString()
-  let strBuilder = []
-  strBuilder.push('\n === ' + type + ' ===\n')
-  if (type === 'update') {
-    logMessageUpdate(decoder, strBuilder)
-  } else if (type === 'sync step 1') {
-    logMessageSyncStep1(decoder, strBuilder)
-  } else if (type === 'sync step 2') {
-    logMessageSyncStep2(decoder, strBuilder)
-  } else {
-    strBuilder.push('-- Unknown message type - probably an encoding issue!!!')
-  }
-  return strBuilder.join('')
-}
-
-export function formatYjsMessageType (buffer) {
-  let decoder = new BinaryDecoder(buffer)
-  decoder.readVarString() // roomname
-  return decoder.readVarString()
-}
-
-export function logMessageUpdate (decoder, strBuilder) {
-  let len = decoder.readUint32()
-  for (let i = 0; i < len; i++) {
-    strBuilder.push(JSON.stringify(Y.Struct.binaryDecodeOperation(decoder)) + '\n')
-  }
-}
-
-export function computeMessageUpdate (decoder, encoder, conn) {
-  if (conn.y.db.forwardAppliedOperations || conn.y.persistence != null) {
-    let messagePosition = decoder.pos
-    let len = decoder.readUint32()
-    let delops = []
-    for (let i = 0; i < len; i++) {
-      let op = Y.Struct.binaryDecodeOperation(decoder)
-      if (op.struct === 'Delete') {
-        delops.push(op)
-      }
-    }
-    if (delops.length > 0) {
-      if (conn.y.db.forwardAppliedOperations) {
-        conn.broadcastOps(delops)
-      }
-      if (conn.y.persistence) {
-        conn.y.persistence.saveOperations(delops)
-      }
-    }
-    decoder.pos = messagePosition
-  }
-  conn.y.db.applyOperations(decoder)
-}
-
-export function sendSyncStep1 (conn, syncUser) {
-  conn.y.db.requestTransaction(function () {
-    let encoder = new BinaryEncoder()
-    encoder.writeVarString(conn.opts.room || '')
-    encoder.writeVarString('sync step 1')
-    encoder.writeVarString(conn.authInfo || '')
-    encoder.writeVarUint(conn.protocolVersion)
-    let preferUntransformed = conn.preferUntransformed && this.os.length === 0 // TODO: length may not be defined
-    encoder.writeUint8(preferUntransformed ? 1 : 0)
-    this.writeStateSet(encoder)
-    conn.send(syncUser, encoder.createBuffer())
-  })
-}
-
-export function logMessageSyncStep1 (decoder, strBuilder) {
-  let auth = decoder.readVarString()
-  let protocolVersion = decoder.readVarUint()
-  let preferUntransformed = decoder.readUint8() === 1
-  strBuilder.push(`
-  - auth: "${auth}"
-  - protocolVersion: ${protocolVersion}
-  - preferUntransformed: ${preferUntransformed}
-`)
-  logSS(decoder, strBuilder)
-}
-
-export function computeMessageSyncStep1 (decoder, encoder, conn, senderConn, sender) {
-  let protocolVersion = decoder.readVarUint()
-  let preferUntransformed = decoder.readUint8() === 1
-
-  // check protocol version
-  if (protocolVersion !== conn.protocolVersion) {
-    console.warn(
-      `You tried to sync with a yjs instance that has a different protocol version
-      (You: ${protocolVersion}, Client: ${protocolVersion}).
-      The sync was stopped. You need to upgrade your dependencies (especially Yjs & the Connector)!
-      `)
-    conn.y.destroy()
-  }
-
-  return conn.y.db.whenTransactionsFinished().then(() => {
-    // send sync step 2
-    conn.y.db.requestTransaction(function () {
-      encoder.writeVarString('sync step 2')
-      encoder.writeVarString(conn.authInfo || '')
-
-      if (preferUntransformed) {
-        encoder.writeUint8(1)
-        this.writeOperationsUntransformed(encoder)
-      } else {
-        encoder.writeUint8(0)
-        this.writeOperations(encoder, decoder)
-      }
-
-      this.writeDeleteSet(encoder)
-      conn.send(senderConn.uid, encoder.createBuffer())
-      senderConn.receivedSyncStep2 = true
-    })
-    return conn.y.db.whenTransactionsFinished().then(() => {
-      if (conn.role === 'slave') {
-        sendSyncStep1(conn, sender)
-      }
-    })
-  })
-}
-
-export function logSS (decoder, strBuilder) {
-  strBuilder.push('  == SS: \n')
-  let len = decoder.readUint32()
-  for (let i = 0; i < len; i++) {
-    let user = decoder.readVarUint()
-    let clock = decoder.readVarUint()
-    strBuilder.push(`     ${user}: ${clock}\n`)
-  }
-}
-
-export function logOS (decoder, strBuilder) {
-  strBuilder.push('  == OS: \n')
-  let len = decoder.readUint32()
-  for (let i = 0; i < len; i++) {
-    let op = Y.Struct.binaryDecodeOperation(decoder)
-    strBuilder.push(JSON.stringify(op) + '\n')
-  }
-}
-
-export function logDS (decoder, strBuilder) {
-  strBuilder.push('  == DS: \n')
-  let len = decoder.readUint32()
-  for (let i = 0; i < len; i++) {
-    let user = decoder.readVarUint()
-    strBuilder.push(`    User: ${user}: `)
-    let len2 = decoder.readVarUint()
-    for (let j = 0; j < len2; j++) {
-      let from = decoder.readVarUint()
-      let to = decoder.readVarUint()
-      let gc = decoder.readUint8() === 1
-      strBuilder.push(`[${from}, ${to}, ${gc}]`)
-    }
-  }
-}
-
-export function logMessageSyncStep2 (decoder, strBuilder) {
-  strBuilder.push('     - auth: ' + decoder.readVarString() + '\n')
-  let osTransformed = decoder.readUint8() === 1
-  strBuilder.push('     - osUntransformed: ' + osTransformed + '\n')
-  logOS(decoder, strBuilder)
-  if (osTransformed) {
-    logSS(decoder, strBuilder)
-  }
-  logDS(decoder, strBuilder)
-}
-
-export function computeMessageSyncStep2 (decoder, encoder, conn, senderConn, sender) {
-  var db = conn.y.db
-  let defer = senderConn.syncStep2
-
-  // apply operations first
-  db.requestTransaction(function () {
-    let osUntransformed = decoder.readUint8()
-    if (osUntransformed === 1) {
-      this.applyOperationsUntransformed(decoder)
-    } else {
-      this.store.applyOperations(decoder)
-    }
-  })
-  // then apply ds
-  db.requestTransaction(function () {
-    this.applyDeleteSet(decoder)
-  })
-  return db.whenTransactionsFinished().then(() => {
-    conn._setSyncedWith(sender)
-    defer.resolve()
-  })
-}
--- a/src/MessageHandler/binaryEncode.mjs
+++ b/src/MessageHandler/binaryEncode.mjs
@@ -0,0 +1,32 @@
+
+import { writeStructs } from './syncStep1.mjs'
+import { integrateRemoteStructs } from './integrateRemoteStructs.mjs'
+import { readDeleteSet, writeDeleteSet } from './deleteSet.mjs'
+import BinaryEncoder from '../Util/Binary/Encoder.mjs'
+
+/**
+ * Read the Decoder and fill the Yjs instance with data in the decoder.
+ *
+ * @param {Y} y The Yjs instance
+ * @param {BinaryDecoder} decoder The BinaryDecoder to read from.
+ */
+export function fromBinary (y, decoder) {
+  y.transact(function () {
+    integrateRemoteStructs(y, decoder)
+    readDeleteSet(y, decoder)
+  })
+}
+
+/**
+ * Encode the Yjs model to binary format.
+ *
+ * @param {Y} y The Yjs instance
+ * @return {BinaryEncoder} The encoder instance that can be transformed
+ *                         to ArrayBuffer or Buffer.
+ */
+export function toBinary (y) {
+  let encoder = new BinaryEncoder()
+  writeStructs(y, encoder, new Map())
+  writeDeleteSet(y, encoder)
+  return encoder
+}
--- a/src/MessageHandler/deleteSet.mjs
+++ b/src/MessageHandler/deleteSet.mjs
@@ -0,0 +1,130 @@
+import { deleteItemRange } from '../Struct/Delete.mjs'
+import ID from '../Util/ID/ID.mjs'
+
+export function stringifyDeleteSet (y, decoder, strBuilder) {
+  let dsLength = decoder.readUint32()
+  for (let i = 0; i < dsLength; i++) {
+    let user = decoder.readVarUint()
+    strBuilder.push(' -' + user + ':')
+    let dvLength = decoder.readVarUint()
+    for (let j = 0; j < dvLength; j++) {
+      let from = decoder.readVarUint()
+      let len = decoder.readVarUint()
+      let gc = decoder.readUint8() === 1
+      strBuilder.push(`clock: ${from}, length: ${len}, gc: ${gc}`)
+    }
+  }
+  return strBuilder
+}
+
+export function writeDeleteSet (y, encoder) {
+  let currentUser = null
+  let currentLength
+  let lastLenPos
+
+  let numberOfUsers = 0
+  let laterDSLenPus = encoder.pos
+  encoder.writeUint32(0)
+
+  y.ds.iterate(null, null, function (n) {
+    var user = n._id.user
+    var clock = n._id.clock
+    var len = n.len
+    var gc = n.gc
+    if (currentUser !== user) {
+      numberOfUsers++
+      // a new user was found
+      if (currentUser !== null) { // happens on first iteration
+        encoder.setUint32(lastLenPos, currentLength)
+      }
+      currentUser = user
+      encoder.writeVarUint(user)
+      // pseudo-fill pos
+      lastLenPos = encoder.pos
+      encoder.writeUint32(0)
+      currentLength = 0
+    }
+    encoder.writeVarUint(clock)
+    encoder.writeVarUint(len)
+    encoder.writeUint8(gc ? 1 : 0)
+    currentLength++
+  })
+  if (currentUser !== null) { // happens on first iteration
+    encoder.setUint32(lastLenPos, currentLength)
+  }
+  encoder.setUint32(laterDSLenPus, numberOfUsers)
+}
+
+export function readDeleteSet (y, decoder) {
+  let dsLength = decoder.readUint32()
+  for (let i = 0; i < dsLength; i++) {
+    let user = decoder.readVarUint()
+    let dv = []
+    let dvLength = decoder.readUint32()
+    for (let j = 0; j < dvLength; j++) {
+      let from = decoder.readVarUint()
+      let len = decoder.readVarUint()
+      let gc = decoder.readUint8() === 1
+      dv.push([from, len, gc])
+    }
+    if (dvLength > 0) {
+      let pos = 0
+      let d = dv[pos]
+      let deletions = []
+      y.ds.iterate(new ID(user, 0), new ID(user, Number.MAX_VALUE), function (n) {
+        // cases:
+        // 1. d deletes something to the right of n
+        //  => go to next n (break)
+        // 2. d deletes something to the left of n
+        //  => create deletions
+        //  => reset d accordingly
+        //  *)=> if d doesn't delete anything anymore, go to next d (continue)
+        // 3. not 2) and d deletes something that also n deletes
+        //  => reset d so that it doesn't contain n's deletion
+        //  *)=> if d does not delete anything anymore, go to next d (continue)
+        while (d != null) {
+          var diff = 0 // describe the diff of length in 1) and 2)
+          if (n._id.clock + n.len <= d[0]) {
+            // 1)
+            break
+          } else if (d[0] < n._id.clock) {
+            // 2)
+            // delete maximum the len of d
+            // else delete as much as possible
+            diff = Math.min(n._id.clock - d[0], d[1])
+            // deleteItemRange(y, user, d[0], diff, true)
+            deletions.push([user, d[0], diff])
+          } else {
+            // 3)
+            diff = n._id.clock + n.len - d[0] // never null (see 1)
+            if (d[2] && !n.gc) {
+              // d marks as gc'd but n does not
+              // then delete either way
+              // deleteItemRange(y, user, d[0], Math.min(diff, d[1]), true)
+              deletions.push([user, d[0], Math.min(diff, d[1])])
+            }
+          }
+          if (d[1] <= diff) {
+            // d doesn't delete anything anymore
+            d = dv[++pos]
+          } else {
+            d[0] = d[0] + diff // reset pos
+            d[1] = d[1] - diff // reset length
+          }
+        }
+      })
+      // TODO: It would be more performant to apply the deletes in the above loop
+      // Adapt the Tree implementation to support delete while iterating
+      for (let i = deletions.length - 1; i >= 0; i--) {
+        const del = deletions[i]
+        deleteItemRange(y, del[0], del[1], del[2], true)
+      }
+      // for the rest.. just apply it
+      for (; pos < dv.length; pos++) {
+        d = dv[pos]
+        deleteItemRange(y, user, d[0], d[1], true)
+        // deletions.push([user, d[0], d[1], d[2]])
+      }
+    }
+  }
+}
--- a/src/MessageHandler/integrateRemoteStructs.mjs
+++ b/src/MessageHandler/integrateRemoteStructs.mjs
@@ -0,0 +1,109 @@
+import { getStruct } from '../Util/structReferences.mjs'
+import BinaryDecoder from '../Util/Binary/Decoder.mjs'
+import { logID } from './messageToString.mjs'
+import GC from '../Struct/GC.mjs'
+
+class MissingEntry {
+  constructor (decoder, missing, struct) {
+    this.decoder = decoder
+    this.missing = missing.length
+    this.struct = struct
+  }
+}
+
+/**
+ * @private
+ * Integrate remote struct
+ * When a remote struct is integrated, other structs might be ready to ready to
+ * integrate.
+ */
+function _integrateRemoteStructHelper (y, struct) {
+  const id = struct._id
+  if (id === undefined) {
+    struct._integrate(y)
+  } else {
+    if (y.ss.getState(id.user) > id.clock) {
+      return
+    }
+    if (!y.gcEnabled || struct.constructor === GC || (struct._parent.constructor !== GC && struct._parent._deleted === false)) {
+      // Is either a GC or Item with an undeleted parent
+      // save to integrate
+      struct._integrate(y)
+    } else {
+      // Is an Item. parent was deleted.
+      struct._gc(y)
+    }
+    let msu = y._missingStructs.get(id.user)
+    if (msu != null) {
+      let clock = id.clock
+      const finalClock = clock + struct._length
+      for (;clock < finalClock; clock++) {
+        const missingStructs = msu.get(clock)
+        if (missingStructs !== undefined) {
+          missingStructs.forEach(missingDef => {
+            missingDef.missing--
+            if (missingDef.missing === 0) {
+              const decoder = missingDef.decoder
+              let oldPos = decoder.pos
+              let missing = missingDef.struct._fromBinary(y, decoder)
+              decoder.pos = oldPos
+              if (missing.length === 0) {
+                y._readyToIntegrate.push(missingDef.struct)
+              }
+            }
+          })
+          msu.delete(clock)
+        }
+      }
+    }
+  }
+}
+
+export function stringifyStructs (y, decoder, strBuilder) {
+  const len = decoder.readUint32()
+  for (let i = 0; i < len; i++) {
+    let reference = decoder.readVarUint()
+    let Constr = getStruct(reference)
+    let struct = new Constr()
+    let missing = struct._fromBinary(y, decoder)
+    let logMessage = '  ' + struct._logString()
+    if (missing.length > 0) {
+      logMessage += ' .. missing: ' + missing.map(logID).join(', ')
+    }
+    strBuilder.push(logMessage)
+  }
+}
+
+export function integrateRemoteStructs (y, decoder) {
+  const len = decoder.readUint32()
+  for (let i = 0; i < len; i++) {
+    let reference = decoder.readVarUint()
+    let Constr = getStruct(reference)
+    let struct = new Constr()
+    let decoderPos = decoder.pos
+    let missing = struct._fromBinary(y, decoder)
+    if (missing.length === 0) {
+      while (struct != null) {
+        _integrateRemoteStructHelper(y, struct)
+        struct = y._readyToIntegrate.shift()
+      }
+    } else {
+      let _decoder = new BinaryDecoder(decoder.uint8arr)
+      _decoder.pos = decoderPos
+      let missingEntry = new MissingEntry(_decoder, missing, struct)
+      let missingStructs = y._missingStructs
+      for (let i = missing.length - 1; i >= 0; i--) {
+        let m = missing[i]
+        if (!missingStructs.has(m.user)) {
+          missingStructs.set(m.user, new Map())
+        }
+        let msu = missingStructs.get(m.user)
+        if (!msu.has(m.clock)) {
+          msu.set(m.clock, [])
+        }
+        let mArray = msu = msu.get(m.clock)
+        mArray.push(missingEntry)
+      }
+    }
+  }
+}
--- a/src/MessageHandler/messageToString.mjs
+++ b/src/MessageHandler/messageToString.mjs
@@ -0,0 +1,65 @@
+import BinaryDecoder from '../Util/Binary/Decoder.mjs'
+import { stringifyStructs } from './integrateRemoteStructs.mjs'
+import { stringifySyncStep1 } from './syncStep1.mjs'
+import { stringifySyncStep2 } from './syncStep2.mjs'
+import ID from '../Util/ID/ID.mjs'
+import RootID from '../Util/ID/RootID.mjs'
+import Y from '../Y.mjs'
+
+export function messageToString ([y, buffer]) {
+  let decoder = new BinaryDecoder(buffer)
+  decoder.readVarString() // read roomname
+  let type = decoder.readVarString()
+  let strBuilder = []
+  strBuilder.push('\n === ' + type + ' ===')
+  if (type === 'update') {
+    stringifyStructs(y, decoder, strBuilder)
+  } else if (type === 'sync step 1') {
+    stringifySyncStep1(y, decoder, strBuilder)
+  } else if (type === 'sync step 2') {
+    stringifySyncStep2(y, decoder, strBuilder)
+  } else {
+    strBuilder.push('-- Unknown message type - probably an encoding issue!!!')
+  }
+  return strBuilder.join('\n')
+}
+
+export function messageToRoomname (buffer) {
+  let decoder = new BinaryDecoder(buffer)
+  decoder.readVarString() // roomname
+  return decoder.readVarString() // messageType
+}
+
+export function logID (id) {
+  if (id !== null && id._id != null) {
+    id = id._id
+  }
+  if (id === null) {
+    return '()'
+  } else if (id instanceof ID) {
+    return `(${id.user},${id.clock})`
+  } else if (id instanceof RootID) {
+    return `(${id.name},${id.type})`
+  } else if (id.constructor === Y) {
+    return `y`
+  } else {
+    throw new Error('This is not a valid ID!')
+  }
+}
+
+/**
+ * Helper utility to convert an item to a readable format.
+ *
+ * @param {String} name The name of the item class (YText, ItemString, ..).
+ * @param {Item} item The item instance.
+ * @param {String} [append] Additional information to append to the returned
+ *                          string.
+ * @return {String} A readable string that represents the item object.
+ *
+ * @private
+ */
+export function logItemHelper (name, item, append) {
+  const left = item._left !== null ? item._left._lastId : null
+  const origin = item._origin !== null ? item._origin._lastId : null
+  return `${name}(id:${logID(item._id)},left:${logID(left)},origin:${logID(origin)},right:${logID(item._right)},parent:${logID(item._parent)},parentSub:${item._parentSub}${append !== undefined ? ' - ' + append : ''})`
+}
--- a/src/MessageHandler/stateSet.mjs
+++ b/src/MessageHandler/stateSet.mjs
@@ -0,0 +1,23 @@
+
+export function readStateSet (decoder) {
+  let ss = new Map()
+  let ssLength = decoder.readUint32()
+  for (let i = 0; i < ssLength; i++) {
+    let user = decoder.readVarUint()
+    let clock = decoder.readVarUint()
+    ss.set(user, clock)
+  }
+  return ss
+}
+
+export function writeStateSet (y, encoder) {
+  let lenPosition = encoder.pos
+  let len = 0
+  encoder.writeUint32(0)
+  for (let [user, clock] of y.ss.state) {
+    encoder.writeVarUint(user)
+    encoder.writeVarUint(clock)
+    len++
+  }
+  encoder.setUint32(lenPosition, len)
+}
--- a/src/MessageHandler/syncStep1.mjs
+++ b/src/MessageHandler/syncStep1.mjs
@@ -0,0 +1,83 @@
+import BinaryEncoder from '../Util/Binary/Encoder.mjs'
+import { readStateSet, writeStateSet } from './stateSet.mjs'
+import { writeDeleteSet } from './deleteSet.mjs'
+import ID from '../Util/ID/ID.mjs'
+import { RootFakeUserID } from '../Util/ID/RootID.mjs'
+
+export function stringifySyncStep1 (y, decoder, strBuilder) {
+  let auth = decoder.readVarString()
+  let protocolVersion = decoder.readVarUint()
+  strBuilder.push(`  - auth: "${auth}"`)
+  strBuilder.push(`  - protocolVersion: ${protocolVersion}`)
+  // write SS
+  let ssBuilder = []
+  let len = decoder.readUint32()
+  for (let i = 0; i < len; i++) {
+    let user = decoder.readVarUint()
+    let clock = decoder.readVarUint()
+    ssBuilder.push(`(${user}:${clock})`)
+  }
+  strBuilder.push('  == SS: ' + ssBuilder.join(','))
+}
+
+export function sendSyncStep1 (connector, syncUser) {
+  let encoder = new BinaryEncoder()
+  encoder.writeVarString(connector.y.room)
+  encoder.writeVarString('sync step 1')
+  encoder.writeVarString(connector.authInfo || '')
+  encoder.writeVarUint(connector.protocolVersion)
+  writeStateSet(connector.y, encoder)
+  connector.send(syncUser, encoder.createBuffer())
+}
+
+/**
+ * @private
+ * Write all Items that are not not included in ss to
+ * the encoder object.
+ */
+export function writeStructs (y, encoder, ss) {
+  const lenPos = encoder.pos
+  encoder.writeUint32(0)
+  let len = 0
+  for (let user of y.ss.state.keys()) {
+    let clock = ss.get(user) || 0
+    if (user !== RootFakeUserID) {
+      const minBound = new ID(user, clock)
+      const overlappingLeft = y.os.findPrev(minBound)
+      const rightID = overlappingLeft === null ? null : overlappingLeft._id
+      if (rightID !== null && rightID.user === user && rightID.clock + overlappingLeft._length > clock) {
+        const struct = overlappingLeft._clonePartial(clock - rightID.clock)
+        struct._toBinary(encoder)
+        len++
+      }
+      y.os.iterate(minBound, new ID(user, Number.MAX_VALUE), function (struct) {
+        struct._toBinary(encoder)
+        len++
+      })
+    }
+  }
+  encoder.setUint32(lenPos, len)
+}
+
+export function readSyncStep1 (decoder, encoder, y, senderConn, sender) {
+  let protocolVersion = decoder.readVarUint()
+  // check protocol version
+  if (protocolVersion !== y.connector.protocolVersion) {
+    console.warn(
+      `You tried to sync with a Yjs instance that has a different protocol version
+      (You: ${protocolVersion}, Client: ${protocolVersion}).
+      `)
+    y.destroy()
+  }
+  // write sync step 2
+  encoder.writeVarString('sync step 2')
+  encoder.writeVarString(y.connector.authInfo || '')
+  const ss = readStateSet(decoder)
+  writeStructs(y, encoder, ss)
+  writeDeleteSet(y, encoder)
+  y.connector.send(senderConn.uid, encoder.createBuffer())
+  senderConn.receivedSyncStep2 = true
+  if (y.connector.role === 'slave') {
+    sendSyncStep1(y.connector, sender)
+  }
+}
--- a/src/MessageHandler/syncStep2.mjs
+++ b/src/MessageHandler/syncStep2.mjs
@@ -0,0 +1,28 @@
+import { stringifyStructs, integrateRemoteStructs } from './integrateRemoteStructs.mjs'
+import { readDeleteSet } from './deleteSet.mjs'
+
+export function stringifySyncStep2 (y, decoder, strBuilder) {
+  strBuilder.push('     - auth: ' + decoder.readVarString())
+  strBuilder.push('  == OS:')
+  stringifyStructs(y, decoder, strBuilder)
+  // write DS to string
+  strBuilder.push('  == DS:')
+  let len = decoder.readUint32()
+  for (let i = 0; i < len; i++) {
+    let user = decoder.readVarUint()
+    strBuilder.push(`    User: ${user}: `)
+    let len2 = decoder.readUint32()
+    for (let j = 0; j < len2; j++) {
+      let from = decoder.readVarUint()
+      let to = decoder.readVarUint()
+      let gc = decoder.readUint8() === 1
+      strBuilder.push(`[${from}, ${to}, ${gc}]`)
+    }
+  }
+}
+
+export function readSyncStep2 (decoder, encoder, y, senderConn, sender) {
+  integrateRemoteStructs(y, decoder)
+  readDeleteSet(y, decoder)
+  y.connector._setSyncedWith(sender)
+}
--- a/src/Notes.md
+++ b/src/Notes.md
@@ -1,12 +0,0 @@
-
-# Notes
-
-### Terminology
-
-* DB: DataBase that holds all the information of the shared object. It is devided into the OS, DS, and SS. This can be a persistent database or an in-memory database. Depending on the type of database, it could make sense to store OS, DS, and SS in different tables, or maybe different databases.
-* OS: OperationStore holds all the operations. An operation is a js object with a fixed number of name fields.
-* DS: DeleteStore holds the information about which operations are deleted and which operations were garbage collected (no longer available in the OS).
-* SS: StateSet holds the current state of the OS. SS.getState(username) refers to the amount of operations that were received by that respective user.
-* Op: Operation defines an action on a shared type. But it is also the format in which we store the model of a type. This is why it is also called a Struct/Structure.
-* Type and Structure: We crearly distinguish between type and structure. Short explanation: A type (e.g. Strings, Numbers) have a number of functions that you can apply on them. (+) is well defined on both of them. They are *modeled* by a structure - the functions really change the structure of a type. Types can be implemented differently but still provide the same functionality. In Yjs, almost all types are realized as a doubly linked list (on which Yjs can provide eventual convergence)
-*
--- a/src/Persistence.js
+++ b/src/Persistence.js
@@ -1,46 +0,0 @@
-import { BinaryEncoder } from './Encoding.js'
-
-export default function extendPersistence (Y) {
-  class AbstractPersistence {
-    constructor (y, opts) {
-      this.y = y
-      this.opts = opts
-      this.saveOperationsBuffer = []
-      this.log = Y.debug('y:persistence')
-    }
-
-    saveToMessageQueue (binary) {
-      this.log('Room %s: Save message to message queue', this.y.options.connector.room)
-    }
-
-    saveOperations (ops) {
-      ops = ops.map(function (op) {
-        return Y.Struct[op.struct].encode(op)
-      })
-      const saveOperations = () => {
-        if (this.saveOperationsBuffer.length > 0) {
-          let encoder = new BinaryEncoder()
-          encoder.writeVarString(this.opts.room)
-          encoder.writeVarString('update')
-          let ops = this.saveOperationsBuffer
-          this.saveOperationsBuffer = []
-          let length = ops.length
-          encoder.writeUint32(length)
-          for (var i = 0; i < length; i++) {
-            let op = ops[i]
-            Y.Struct[op.struct].binaryEncode(encoder, op)
-          }
-          this.saveToMessageQueue(encoder.createBuffer())
-        }
-      }
-      if (this.saveOperationsBuffer.length === 0) {
-        this.saveOperationsBuffer = ops
-        this.y.db.whenTransactionsFinished().then(saveOperations)
-      } else {
-        this.saveOperationsBuffer = this.saveOperationsBuffer.concat(ops)
-      }
-    }
-  }
-
-  Y.AbstractPersistence = AbstractPersistence
-}
--- a/src/Persistence.mjs
+++ b/src/Persistence.mjs
@@ -0,0 +1,122 @@
+import BinaryEncoder from './Util/Binary/Encoder.mjs'
+import BinaryDecoder from './Util/Binary/Decoder.mjs'
+import { toBinary, fromBinary } from './MessageHandler/binaryEncode.mjs'
+import { integrateRemoteStructs } from './MessageHandler/integrateRemoteStructs.mjs'
+import { createMutualExclude } from './Util/mutualExclude.mjs'
+
+function getFreshCnf () {
+  let buffer = new BinaryEncoder()
+  buffer.writeUint32(0)
+  return {
+    len: 0,
+    buffer
+  }
+}
+
+/**
+ * Abstract persistence class.
+ */
+export default class AbstractPersistence {
+  constructor (opts) {
+    this.opts = opts
+    this.ys = new Map()
+  }
+
+  _init (y) {
+    let cnf = this.ys.get(y)
+    if (cnf === undefined) {
+      cnf = getFreshCnf()
+      cnf.mutualExclude = createMutualExclude()
+      this.ys.set(y, cnf)
+      return this.init(y).then(() => {
+        y.on('afterTransaction', (y, transaction) => {
+          let cnf = this.ys.get(y)
+          if (cnf.len > 0) {
+            cnf.buffer.setUint32(0, cnf.len)
+            this.saveUpdate(y, cnf.buffer.createBuffer(), transaction)
+            let _cnf = getFreshCnf()
+            for (let key in _cnf) {
+              cnf[key] = _cnf[key]
+            }
+          }
+        })
+        return this.retrieve(y)
+      }).then(function () {
+        return Promise.resolve(cnf)
+      })
+    } else {
+      return Promise.resolve(cnf)
+    }
+  }
+  deinit (y) {
+    this.ys.delete(y)
+    y.persistence = null
+  }
+
+  destroy () {
+    this.ys = null
+  }
+
+  /**
+   * Remove all persisted data that belongs to a room.
+   * Automatically destroys all Yjs all Yjs instances that persist to
+   * the room. If `destroyYjsInstances = false` the persistence functionality
+   * will be removed from the Yjs instances.
+   *
+   * ** Must be overwritten! **
+   */
+  removePersistedData (room, destroyYjsInstances = true) {
+    this.ys.forEach((cnf, y) => {
+      if (y.room === room) {
+        if (destroyYjsInstances) {
+          y.destroy()
+        } else {
+          this.deinit(y)
+        }
+      }
+    })
+  }
+
+  /* overwrite */
+  saveUpdate (buffer) {
+  }
+
+  /**
+   * Save struct to update buffer.
+   * saveUpdate is called when transaction ends
+   */
+  saveStruct (y, struct) {
+    let cnf = this.ys.get(y)
+    if (cnf !== undefined) {
+      cnf.mutualExclude(function () {
+        struct._toBinary(cnf.buffer)
+        cnf.len++
+      })
+    }
+  }
+
+  /* overwrite */
+  retrieve (y, model, updates) {
+    let cnf = this.ys.get(y)
+    if (cnf !== undefined) {
+      cnf.mutualExclude(function () {
+        y.transact(function () {
+          if (model != null) {
+            fromBinary(y, new BinaryDecoder(new Uint8Array(model)))
+          }
+          if (updates != null) {
+            for (let i = 0; i < updates.length; i++) {
+              integrateRemoteStructs(y, new BinaryDecoder(new Uint8Array(updates[i])))
+            }
+          }
+        })
+        y.emit('persistenceReady')
+      })
+    }
+  }
+
+  /* overwrite */
+  persist (y) {
+    return toBinary(y).createBuffer()
+  }
+}
--- a/src/Persistences/AbstractPersistence.mjs
+++ b/src/Persistences/AbstractPersistence.mjs
@@ -0,0 +1,2 @@
+
+export default class AbstractPersistence {}
--- a/src/Persistences/FilePersistence.mjs
+++ b/src/Persistences/FilePersistence.mjs
@@ -0,0 +1,72 @@
+import fs from 'fs'
+import path from 'path'
+import BinaryDecoder from '../Util/Binary/Decoder.mjs'
+import BinaryEncoder from '../Util/Binary/Encoder.mjs'
+import { createMutualExclude } from '../Util/mutualExclude.mjs'
+import { encodeUpdate, encodeStructsDS, decodePersisted } from './decodePersisted.mjs'
+
+function createFilePath (persistence, roomName) {
+  // TODO: filename checking!
+  return path.join(persistence.dir, roomName)
+}
+
+export default class FilePersistence {
+  constructor (dir) {
+    this.dir = dir
+    this._mutex = createMutualExclude()
+  }
+  setRemoteUpdateCounter (roomName, remoteUpdateCounter) {
+    // TODO: implement
+    // nop
+  }
+  saveUpdate (room, y, encodedStructs) {
+    return new Promise((resolve, reject) => {
+      this._mutex(() => {
+        const filePath = createFilePath(this, room)
+        const updateMessage = new BinaryEncoder()
+        encodeUpdate(y, encodedStructs, updateMessage)
+        fs.appendFile(filePath, Buffer.from(updateMessage.createBuffer()), (err) => {
+          if (err !== null) {
+            reject(err)
+          } else {
+            resolve()
+          }
+        })
+      }, resolve)
+    })
+  }
+  saveState (roomName, y) {
+    return new Promise((resolve, reject) => {
+      const encoder = new BinaryEncoder()
+      encodeStructsDS(y, encoder)
+      const filePath = createFilePath(this, roomName)
+      fs.writeFile(filePath, Buffer.from(encoder.createBuffer()), (err) => {
+        if (err !== null) {
+          reject(err)
+        } else {
+          resolve()
+        }
+      })
+    })
+  }
+  readState (roomName, y) {
+    // Check if the file exists in the current directory.
+    return new Promise((resolve, reject) => {
+      const filePath = path.join(this.dir, roomName)
+      fs.readFile(filePath, (err, data) => {
+        if (err !== null) {
+          resolve()
+          // reject(err)
+        } else {
+          this._mutex(() => {
+            console.info(`unpacking data (${data.length})`)
+            console.time('unpacking')
+            decodePersisted(y, new BinaryDecoder(data))
+            console.timeEnd('unpacking')
+          })
+          resolve()
+        }
+      })
+    })
+  }
+}
--- a/src/Persistences/IndexedDBPersistence.mjs
+++ b/src/Persistences/IndexedDBPersistence.mjs
@@ -0,0 +1,283 @@
+/* global indexedDB, location, BroadcastChannel */
+
+import Y from '../Y.mjs'
+import { createMutualExclude } from '../Util/mutualExclude.mjs'
+import { decodePersisted, encodeStructsDS, encodeUpdate } from './decodePersisted.mjs'
+import BinaryDecoder from '../Util/Binary/Decoder.mjs'
+import BinaryEncoder from '../Util/Binary/Encoder.mjs'
+import { PERSIST_STRUCTS_DS } from './decodePersisted.mjs';
+import { PERSIST_UPDATE } from './decodePersisted.mjs';
+/*
+ * Request to Promise transformer
+ */
+function rtop (request) {
+  return new Promise(function (resolve, reject) {
+    request.onerror = function (event) {
+      reject(new Error(event.target.error))
+    }
+    request.onblocked = function () {
+      location.reload()
+    }
+    request.onsuccess = function (event) {
+      resolve(event.target.result)
+    }
+  })
+}
+
+function openDB (room) {
+  return new Promise(function (resolve, reject) {
+    let request = indexedDB.open(room)
+    request.onupgradeneeded = function (event) {
+      const db = event.target.result
+      if (db.objectStoreNames.contains('updates')) {
+        db.deleteObjectStore('updates')
+      }
+      db.createObjectStore('updates', {autoIncrement: true})
+    }
+    request.onerror = function (event) {
+      reject(new Error(event.target.error))
+    }
+    request.onblocked = function () {
+      location.reload()
+    }
+    request.onsuccess = function (event) {
+      const db = event.target.result
+      db.onversionchange = function () { db.close() }
+      resolve(db)
+    }
+  })
+}
+
+function persist (room) {
+  let t = room.db.transaction(['updates'], 'readwrite')
+  let updatesStore = t.objectStore('updates')
+  return rtop(updatesStore.getAll())
+  .then(updates => {
+    // apply all previous updates before deleting them
+    room.mutex(() => {
+      updates.forEach(update => {
+        decodePersisted(y, new BinaryDecoder(update))
+      })
+    })
+    const encoder = new BinaryEncoder()
+    encodeStructsDS(y, encoder)
+    // delete all pending updates
+    rtop(updatesStore.clear()).then(() => {
+      // write current model
+      updatesStore.put(encoder.createBuffer())
+    })
+  })
+}
+
+function saveUpdate (room, updateBuffer) {
+  const db = room.db
+  if (db !== null) {
+    const t = db.transaction(['updates'], 'readwrite')
+    const updatesStore = t.objectStore('updates')
+    const updatePut = rtop(updatesStore.put(updateBuffer))
+    rtop(updatesStore.count()).then(cnt => {
+      if (cnt >= PREFERRED_TRIM_SIZE) {
+        persist(room)
+      }
+    })
+    return updatePut
+  }
+}
+
+function registerRoomInPersistence (documentsDB, roomName) {
+  return documentsDB.then(
+    db => Promise.all([
+      db,
+      rtop(db.transaction(['documents'], 'readonly').objectStore('documents').get(roomName))
+    ])
+  ).then(
+    ([db, doc]) => {
+      if (doc === undefined) {
+        return rtop(db.transaction(['documents'], 'readwrite').objectStore('documents').add({ roomName, serverUpdateCounter: 0 }))
+      }
+    }
+  )
+}
+
+const PREFERRED_TRIM_SIZE = 400
+
+export default class IndexedDBPersistence {
+  constructor () {
+    this._rooms = new Map()
+    this._documentsDB = new Promise(function (resolve, reject) {
+      let request = indexedDB.open('_yjs_documents')
+      request.onupgradeneeded = function (event) {
+        const db = event.target.result
+        if (db.objectStoreNames.contains('documents')) {
+          db.deleteObjectStore('documents')
+        }
+        db.createObjectStore('documents', { keyPath: "roomName" })
+      }
+      request.onerror = function (event) {
+        reject(new Error(event.target.error))
+      }
+      request.onblocked = function () {
+        location.reload()
+      }
+      request.onsuccess = function (event) {
+        const db = event.target.result
+        db.onversionchange = function () { db.close() }
+        resolve(db)
+      }
+    })
+    addEventListener('unload', () => {
+      // close everything when page unloads
+      this._rooms.forEach(room => {
+        if (room.db !== null) {
+          room.db.close()
+        } else {
+          room.dbPromise.then(db => db.close())
+        }
+      })
+      this._documentsDB.then(db => db.close())
+    })
+  }
+  getAllDocuments () {
+    return this._documentsDB.then(
+      db => rtop(db.transaction(['documents'], 'readonly').objectStore('documents').getAll())
+    )
+  }
+  setRemoteUpdateCounter (roomName, remoteUpdateCounter) {
+    this._documentsDB.then(
+      db => rtop(db.transaction(['documents'], 'readwrite').objectStore('documents').put({ roomName, remoteUpdateCounter }))
+    )
+  }
+
+  _createYInstance (roomName) {
+    const room = this._rooms.get(roomName)
+    if (room !== undefined) {
+      return room.y
+    }
+    const y = new Y()
+    return openDB(roomName).then(
+      db => rtop(db.transaction(['updates'], 'readonly').objectStore('updates').getAll())
+    ).then(
+      updates =>
+        y.transact(() => {
+          updates.forEach(update => {
+            decodePersisted(y, new BinaryDecoder(update))
+          })
+        }, true)
+    ).then(() => Promise.resolve(y))
+  }
+
+  _persistStructsDS (roomName, structsDS) {
+    const encoder = new BinaryEncoder()
+    encoder.writeVarUint(PERSIST_STRUCTS_DS)
+    encoder.writeArrayBuffer(structsDS)
+    return openDB(roomName).then(db => {
+      const t = db.transaction(['updates'], 'readwrite')
+      const updatesStore = t.objectStore('updates')
+      return rtop(updatesStore.put(encoder.createBuffer()))
+    })
+  }
+
+  _persistStructs (roomName, structs) {
+    const encoder = new BinaryEncoder()
+    encoder.writeVarUint(PERSIST_UPDATE)
+    encoder.writeArrayBuffer(structs)
+    return openDB(roomName).then(db => {
+      const t = db.transaction(['updates'], 'readwrite')
+      const updatesStore = t.objectStore('updates')
+      return rtop(updatesStore.put(encoder.createBuffer()))
+    })
+  }
+
+  connectY (roomName, y) {
+    if (this._rooms.has(roomName)) {
+      throw new Error('A Y instance is already bound to this room!')
+    }
+    let room = {
+      db: null,
+      dbPromise: null,
+      channel: null,
+      mutex: createMutualExclude(),
+      y
+    }
+    if (typeof BroadcastChannel !== 'undefined') {
+      room.channel = new BroadcastChannel('__yjs__' + roomName)
+      room.channel.addEventListener('message', e => {
+        room.mutex(function () {
+          decodePersisted(y, new BinaryDecoder(e.data))
+        })
+      })
+    }
+    y.on('destroyed', () => {
+      this.disconnectY(roomName, y)
+    })
+    y.on('afterTransaction', (y, transaction) => {
+      room.mutex(() => {
+        if (transaction.encodedStructsLen > 0) {
+          const encoder = new BinaryEncoder()
+          const update = new BinaryEncoder()
+          encodeUpdate(y, transaction.encodedStructs, update)
+          const updateBuffer = update.createBuffer()
+          if (room.channel !== null) {
+            room.channel.postMessage(updateBuffer)
+          }
+          if (transaction.encodedStructsLen > 0) {
+            if (room.db !== null) {
+              saveUpdate(room, updateBuffer)
+            }
+          }
+        }
+      })
+    })
+    // register document in documentsDB
+    this._documentsDB.then(
+      db => 
+        rtop(db.transaction(['documents'], 'readonly').objectStore('documents').get(roomName))
+          .then(
+            doc => doc === undefined && rtop(db.transaction(['documents'], 'readwrite').objectStore('documents').add({ roomName, serverUpdateCounter: -1 }))
+          )
+    )
+    // open room db and read existing data
+    return room.dbPromise = openDB(roomName)
+      .then(db => {
+        room.db = db
+        const t = room.db.transaction(['updates'], 'readwrite')
+        const updatesStore = t.objectStore('updates')
+        // write current state as update
+        const encoder = new BinaryEncoder()
+        encodeStructsDS(y, encoder)
+        return rtop(updatesStore.put(encoder.createBuffer())).then(() => {
+          // read persisted state
+          return rtop(updatesStore.getAll()).then(updates => {
+            room.mutex(() => {
+              y.transact(() => {
+                updates.forEach(update => {
+                  decodePersisted(y, new BinaryDecoder(update))
+                })
+              }, true)
+            })
+          })
+        })
+      })
+  }
+  disconnectY (roomName) {
+    const {
+      db, channel
+    } = this._rooms.get(roomName)
+    db.close()
+    if (channel !== null) {
+      channel.close()
+    }
+    this._rooms.delete(roomName)
+  }
+
+  /**
+   * Remove all persisted data that belongs to a room.
+   * Automatically destroys all Yjs all Yjs instances that persist to
+   * the room. If `destroyYjsInstances = false` the persistence functionality
+   * will be removed from the Yjs instances.
+   */
+  removePersistedData (roomName, destroyYjsInstances = true) {
+    this.disconnectY(roomName)
+    return rtop(indexedDB.deleteDatabase(roomName))
+  }
+}
--- a/src/Persistences/decodePersisted.mjs
+++ b/src/Persistences/decodePersisted.mjs
@@ -0,0 +1,51 @@
+import { integrateRemoteStructs } from '../MessageHandler/integrateRemoteStructs.mjs'
+import { writeStructs } from '../MessageHandler/syncStep1.mjs'
+import { writeDeleteSet, readDeleteSet } from '../MessageHandler/deleteSet.mjs'
+
+export const PERSIST_UPDATE = 0
+/**
+ * Write an update to an encoder.
+ *
+ * @param {Yjs} y A Yjs instance
+ * @param {BinaryEncoder} updateEncoder I.e. transaction.encodedStructs
+ */
+export function encodeUpdate (y, updateEncoder, encoder) {
+  encoder.writeVarUint(PERSIST_UPDATE)
+  encoder.writeBinaryEncoder(updateEncoder)
+}
+
+export const PERSIST_STRUCTS_DS = 1
+
+/**
+ * Write the current Yjs data model to an encoder.
+ *
+ * @param {Yjs} y A Yjs instance
+ * @param {BinaryEncoder} encoder An encoder to write to
+ */
+export function encodeStructsDS (y, encoder) {
+  encoder.writeVarUint(PERSIST_STRUCTS_DS)
+  writeStructs(y, encoder, new Map())
+  writeDeleteSet(y, encoder)
+}
+
+/**
+ * Feed the Yjs instance with the persisted state
+ * @param {Yjs} y A Yjs instance.
+ * @param {BinaryDecoder} decoder A Decoder instance that holds the file content.
+ */
+export function decodePersisted (y, decoder) {
+  y.transact(() => {
+    while (decoder.hasContent()) {
+      const contentType = decoder.readVarUint()
+      switch (contentType) {
+        case PERSIST_UPDATE:
+          integrateRemoteStructs(y, decoder)
+          break
+        case PERSIST_STRUCTS_DS:
+          integrateRemoteStructs(y, decoder)
+          readDeleteSet(y, decoder)
+          break
+      }
+    }
+  }, true)
+}
--- a/src/RedBlackTree.js
+++ b/src/RedBlackTree.js
@@ -1,506 +0,0 @@
-
-export default function extendRBTree (Y) {
-  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
-      if (val.id === null) {
-        throw new Error('You must define id!')
-      }
-    }
-    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) {
-      var parent = this.parent
-      var newParent = this.right
-      var newRight = this.right.left
-      newParent.left = this
-      this.right = newRight
-      if (parent === null) {
-        tree.root = newParent
-        newParent._parent = null
-      } else if (parent.left === this) {
-        parent.left = newParent
-      } else if (parent.right === this) {
-        parent.right = newParent
-      } else {
-        throw new Error('The elements are wrongly connected!')
-      }
-    }
-    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) {
-      var parent = this.parent
-      var newParent = this.left
-      var newLeft = this.left.right
-      newParent.right = this
-      this.left = newLeft
-      if (parent === null) {
-        tree.root = newParent
-        newParent._parent = null
-      } else if (parent.left === this) {
-        parent.left = newParent
-      } else if (parent.right === this) {
-        parent.right = newParent
-      } else {
-        throw new Error('The elements are wrongly connected!')
-      }
-    }
-    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
-      }
-    }
-  }
-
-  class RBTree {
-    constructor () {
-      this.root = null
-      this.length = 0
-    }
-    findNext (id) {
-      return this.findWithLowerBound([id[0], id[1] + 1])
-    }
-    findPrev (id) {
-      return this.findWithUpperBound([id[0], id[1] - 1])
-    }
-    findNodeWithLowerBound (from) {
-      if (from === void 0) {
-        throw new Error('You must define from!')
-      }
-      var o = this.root
-      if (o === null) {
-        return null
-      } else {
-        while (true) {
-          if ((from === null || Y.utils.smaller(from, 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 && Y.utils.smaller(o.val.id, 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 || Y.utils.smaller(o.val.id, 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 && Y.utils.smaller(to, 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 (t, 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
-          Y.utils.smaller(o.val.id, to) ||
-          Y.utils.compareIds(o.val.id, to)
-        )
-      ) {
-        f.call(t, o.val)
-        o = o.next()
-      }
-      return true
-    }
-    logTable (from, to, filter) {
-      if (filter == null) {
-        filter = function () {
-          return true
-        }
-      }
-      if (from == null) { from = null }
-      if (to == null) { to = null }
-      var os = []
-      this.iterate(this, from, to, function (o) {
-        if (filter(o)) {
-          var o_ = {}
-          for (var key in o) {
-            if (typeof o[key] === 'object') {
-              o_[key] = JSON.stringify(o[key])
-            } else {
-              o_[key] = o[key]
-            }
-          }
-          os.push(o_)
-        }
-      })
-      if (console.table != null) {
-        console.table(os)
-      }
-    }
-    find (id) {
-      var n
-      return (n = this.findNode(id)) ? n.val : null
-    }
-    findNode (id) {
-      if (id == null || id.constructor !== Array) {
-        throw new Error('Expect id to be an array!')
-      }
-      var o = this.root
-      if (o === null) {
-        return false
-      } else {
-        while (true) {
-          if (o === null) {
-            return false
-          }
-          if (Y.utils.smaller(id, o.val.id)) {
-            o = o.left
-          } else if (Y.utils.smaller(o.val.id, id)) {
-            o = o.right
-          } else {
-            return o
-          }
-        }
-      }
-    }
-    delete (id) {
-      if (id == null || id.constructor !== Array) {
-        throw new Error('id is expected to be an Array!')
-      }
-      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({id: 0})
-        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) {
-      function isBlack (node) {
-        return node !== null ? node.isBlack() : true
-      }
-      function isRed (node) {
-        return node !== null ? node.isRed() : false
-      }
-      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) {
-      if (v == null || v.id == null || v.id.constructor !== Array) {
-        throw new Error('v is expected to have an id property which is an Array!')
-      }
-      var node = new N(v)
-      if (this.root !== null) {
-        var p = this.root // p abbrev. parent
-        while (true) {
-          if (Y.utils.smaller(node.val.id, p.val.id)) {
-            if (p.left === null) {
-              p.left = node
-              break
-            } else {
-              p = p.left
-            }
-          } else if (Y.utils.smaller(p.val.id, 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)
-        }
-      }
-    }
-    flush () {}
-  }
-
-  Y.utils.RBTree = RBTree
-}
--- a/src/Store/DeleteStore.mjs
+++ b/src/Store/DeleteStore.mjs
@@ -0,0 +1,90 @@
+
+import Tree from '../Util/Tree.mjs'
+import ID from '../Util/ID/ID.mjs'
+
+class DSNode {
+  constructor (id, len, gc) {
+    this._id = id
+    this.len = len
+    this.gc = gc
+  }
+  clone () {
+    return new DSNode(this._id, this.len, this.gc)
+  }
+}
+
+export default class DeleteStore extends Tree {
+  logTable () {
+    const deletes = []
+    this.iterate(null, null, function (n) {
+      deletes.push({
+        user: n._id.user,
+        clock: n._id.clock,
+        len: n.len,
+        gc: n.gc
+      })
+    })
+    console.table(deletes)
+  }
+  isDeleted (id) {
+    var n = this.findWithUpperBound(id)
+    return n !== null && n._id.user === id.user && id.clock < n._id.clock + n.len
+  }
+  mark (id, length, gc) {
+    if (length === 0) return
+    // Step 1. Unmark range
+    const leftD = this.findWithUpperBound(new ID(id.user, id.clock - 1))
+    // Resize left DSNode if necessary
+    if (leftD !== null && leftD._id.user === id.user) {
+      if (leftD._id.clock < id.clock && id.clock < leftD._id.clock + leftD.len) {
+        // node is overlapping. need to resize
+        if (id.clock + length < leftD._id.clock + leftD.len) {
+          // overlaps new mark range and some more
+          // create another DSNode to the right of new mark
+          this.put(new DSNode(new ID(id.user, id.clock + length), leftD._id.clock + leftD.len - id.clock - length, leftD.gc))
+        }
+        // resize left DSNode
+        leftD.len = id.clock - leftD._id.clock
+      } // Otherwise there is no overlapping
+    }
+    // Resize right DSNode if necessary
+    const upper = new ID(id.user, id.clock + length - 1)
+    const rightD = this.findWithUpperBound(upper)
+    if (rightD !== null && rightD._id.user === id.user) {
+      if (rightD._id.clock < id.clock + length && id.clock <= rightD._id.clock && id.clock + length < rightD._id.clock + rightD.len) { // we only consider the case where we resize the node
+        const d = id.clock + length - rightD._id.clock
+        rightD._id = new ID(rightD._id.user, rightD._id.clock + d)
+        rightD.len -= d
+      }
+    }
+    // Now we only have to delete all inner marks
+    const deleteNodeIds = []
+    this.iterate(id, upper, m => {
+      deleteNodeIds.push(m._id)
+    })
+    for (let i = deleteNodeIds.length - 1; i >= 0; i--) {
+      this.delete(deleteNodeIds[i])
+    }
+    let newMark = new DSNode(id, length, gc)
+    // Step 2. Check if we can extend left or right
+    if (leftD !== null && leftD._id.user === id.user && leftD._id.clock + leftD.len === id.clock && leftD.gc === gc) {
+      // We can extend left
+      leftD.len += length
+      newMark = leftD
+    }
+    const rightNext = this.find(new ID(id.user, id.clock + length))
+    if (rightNext !== null && rightNext._id.user === id.user && id.clock + length === rightNext._id.clock && gc === rightNext.gc) {
+      // We can merge newMark and rightNext
+      newMark.len += rightNext.len
+      this.delete(rightNext._id)
+    }
+    if (leftD !== newMark) {
+      // only put if we didn't extend left
+      this.put(newMark)
+    }
+  }
+  // TODO: exchange markDeleted for mark()
+  markDeleted (id, length) {
+    this.mark(id, length, false)
+  }
+}
--- a/src/Store/OperationStore.mjs
+++ b/src/Store/OperationStore.mjs
@@ -0,0 +1,94 @@
+import Tree from '../Util/Tree.mjs'
+import RootID from '../Util/ID/RootID.mjs'
+import { getStruct } from '../Util/structReferences.mjs'
+import { logID } from '../MessageHandler/messageToString.mjs'
+import GC from '../Struct/GC.mjs'
+
+export default class OperationStore extends Tree {
+  constructor (y) {
+    super()
+    this.y = y
+  }
+  logTable () {
+    const items = []
+    this.iterate(null, null, function (item) {
+      if (item.constructor === GC) {
+        items.push({
+          id: logID(item),
+          content: item._length,
+          deleted: 'GC'
+        })
+      } else {
+        items.push({
+          id: logID(item),
+          origin: logID(item._origin === null ? null : item._origin._lastId),
+          left: logID(item._left === null ? null : item._left._lastId),
+          right: logID(item._right),
+          right_origin: logID(item._right_origin),
+          parent: logID(item._parent),
+          parentSub: item._parentSub,
+          deleted: item._deleted,
+          content: JSON.stringify(item._content)
+        })
+      }
+    })
+    console.table(items)
+  }
+  get (id) {
+    let struct = this.find(id)
+    if (struct === null && id instanceof RootID) {
+      const Constr = getStruct(id.type)
+      const y = this.y
+      struct = new Constr()
+      struct._id = id
+      struct._parent = y
+      y.transact(() => {
+        struct._integrate(y)
+      })
+      this.put(struct)
+    }
+    return struct
+  }
+  // Use getItem for structs with _length > 1
+  getItem (id) {
+    var item = this.findWithUpperBound(id)
+    if (item === null) {
+      return null
+    }
+    const itemID = item._id
+    if (id.user === itemID.user && id.clock < itemID.clock + item._length) {
+      return item
+    } else {
+      return null
+    }
+  }
+  // Return an insertion such that id is the first element of content
+  // This function manipulates an item, if necessary
+  getItemCleanStart (id) {
+    var ins = this.getItem(id)
+    if (ins === null || ins._length === 1) {
+      return ins
+    }
+    const insID = ins._id
+    if (insID.clock === id.clock) {
+      return ins
+    } else {
+      return ins._splitAt(this.y, id.clock - insID.clock)
+    }
+  }
+  // Return an insertion such that id is the last element of content
+  // This function manipulates an operation, if necessary
+  getItemCleanEnd (id) {
+    var ins = this.getItem(id)
+    if (ins === null || ins._length === 1) {
+      return ins
+    }
+    const insID = ins._id
+    if (insID.clock + ins._length - 1 === id.clock) {
+      return ins
+    } else {
+      ins._splitAt(this.y, id.clock - insID.clock + 1)
+      return ins
+    }
+  }
+}
--- a/src/Store/StateStore.mjs
+++ b/src/Store/StateStore.mjs
@@ -0,0 +1,47 @@
+import ID from '../Util/ID/ID.mjs'
+
+export default class StateStore {
+  constructor (y) {
+    this.y = y
+    this.state = new Map()
+  }
+  logTable () {
+    const entries = []
+    for (let [user, state] of this.state) {
+      entries.push({
+        user, state
+      })
+    }
+    console.table(entries)
+  }
+  getNextID (len) {
+    const user = this.y.userID
+    const state = this.getState(user)
+    this.setState(user, state + len)
+    return new ID(user, state)
+  }
+  updateRemoteState (struct) {
+    let user = struct._id.user
+    let userState = this.state.get(user)
+    while (struct !== null && struct._id.clock === userState) {
+      userState += struct._length
+      struct = this.y.os.get(new ID(user, userState))
+    }
+    this.state.set(user, userState)
+  }
+  getState (user) {
+    let state = this.state.get(user)
+    if (state == null) {
+      return 0
+    }
+    return state
+  }
+  setState (user, state) {
+    // TODO: modify missingi structs here
+    const beforeState = this.y._transaction.beforeState
+    if (!beforeState.has(user)) {
+      beforeState.set(user, this.getState(user))
+    }
+    this.state.set(user, state)
+  }
+}
--- a/src/Struct.js
+++ b/src/Struct.js
@@ -1,619 +0,0 @@
-const CDELETE = 0
-const CINSERT = 1
-const CLIST = 2
-const CMAP = 3
-const CXML = 4
-
-/*
- An operation also defines the structure of a type. This is why operation and
- structure are used interchangeably here.
-
- It must be of the type Object. I hope to achieve some performance
- improvements when working on databases that support the json format.
-
- An operation must have the following properties:
-
- * encode
-     - Encode the structure in a readable format (preferably string- todo)
- * decode (todo)
-     - decode structure to json
- * execute
-     - Execute the semantics of an operation.
- * requiredOps
-     - Operations that are required to execute this operation.
-*/
-export default function extendStruct (Y) {
-  let Struct = {}
-  Y.Struct = Struct
-  Struct.binaryDecodeOperation = function (decoder) {
-    let code = decoder.peekUint8()
-    if (code === CDELETE) {
-      return Struct.Delete.binaryDecode(decoder)
-    } else if (code === CINSERT) {
-      return Struct.Insert.binaryDecode(decoder)
-    } else if (code === CLIST) {
-      return Struct.List.binaryDecode(decoder)
-    } else if (code === CMAP) {
-      return Struct.Map.binaryDecode(decoder)
-    } else if (code === CXML) {
-      return Struct.Xml.binaryDecode(decoder)
-    } else {
-      throw new Error('Unable to decode operation!')
-    }
-  }
-
-  /* This is the only operation that is actually not a structure, because
-  it is not stored in the OS. This is why it _does not_ have an id
-
-  op = {
-    target: Id
-  }
-  */
-  Struct.Delete = {
-    encode: function (op) {
-      return {
-        target: op.target,
-        length: op.length || 0,
-        struct: 'Delete'
-      }
-    },
-    binaryEncode: function (encoder, op) {
-      encoder.writeUint8(CDELETE)
-      encoder.writeOpID(op.target)
-      encoder.writeVarUint(op.length || 0)
-    },
-    binaryDecode: function (decoder) {
-      decoder.skip8()
-      return {
-        target: decoder.readOpID(),
-        length: decoder.readVarUint(),
-        struct: 'Delete'
-      }
-    },
-    requiredOps: function (op) {
-      return [] // [op.target]
-    },
-    execute: function (op) {
-      return this.deleteOperation(op.target, op.length || 1)
-    }
-  }
-
-  /* {
-      content: [any],
-      opContent: Id,
-      id: Id,
-      left: Id,
-      origin: Id,
-      right: Id,
-      parent: Id,
-      parentSub: string (optional), // child of Map type
-    }
-  */
-  Struct.Insert = {
-    encode: function (op/* :Insertion */) /* :Insertion */ {
-      // TODO: you could not send the "left" property, then you also have to
-      // "op.left = null" in $execute or $decode
-      var e/* :any */ = {
-        id: op.id,
-        left: op.left,
-        right: op.right,
-        origin: op.origin,
-        parent: op.parent,
-        struct: op.struct
-      }
-      if (op.parentSub != null) {
-        e.parentSub = op.parentSub
-      }
-      if (op.hasOwnProperty('opContent')) {
-        e.opContent = op.opContent
-      } else {
-        e.content = op.content.slice()
-      }
-
-      return e
-    },
-    binaryEncode: function (encoder, op) {
-      encoder.writeUint8(CINSERT)
-      // compute info property
-      let contentIsText = op.content != null && op.content.every(c => typeof c === 'string' && c.length === 1)
-      let originIsLeft = Y.utils.compareIds(op.left, op.origin)
-      let info =
-        (op.parentSub != null ? 1 : 0) |
-        (op.opContent != null ? 2 : 0) |
-        (contentIsText ? 4 : 0) |
-        (originIsLeft ? 8 : 0) |
-        (op.left != null ? 16 : 0) |
-        (op.right != null ? 32 : 0) |
-        (op.origin != null ? 64 : 0)
-      encoder.writeUint8(info)
-      encoder.writeOpID(op.id)
-      encoder.writeOpID(op.parent)
-      if (info & 16) {
-        encoder.writeOpID(op.left)
-      }
-      if (info & 32) {
-        encoder.writeOpID(op.right)
-      }
-      if (!originIsLeft && info & 64) {
-        encoder.writeOpID(op.origin)
-      }
-      if (info & 1) {
-        // write parentSub
-        encoder.writeVarString(op.parentSub)
-      }
-      if (info & 2) {
-        // write opContent
-        encoder.writeOpID(op.opContent)
-      } else if (info & 4) {
-        // write text
-        encoder.writeVarString(op.content.join(''))
-      } else {
-        // convert to JSON and write
-        encoder.writeVarString(JSON.stringify(op.content))
-      }
-    },
-    binaryDecode: function (decoder) {
-      let op = {
-        struct: 'Insert'
-      }
-      decoder.skip8()
-      // get info property
-      let info = decoder.readUint8()
-
-      op.id = decoder.readOpID()
-      op.parent = decoder.readOpID()
-      if (info & 16) {
-        op.left = decoder.readOpID()
-      } else {
-        op.left = null
-      }
-      if (info & 32) {
-        op.right = decoder.readOpID()
-      } else {
-        op.right = null
-      }
-      if (info & 8) {
-        // origin is left
-        op.origin = op.left
-      } else if (info & 64) {
-        op.origin = decoder.readOpID()
-      } else {
-        op.origin = null
-      }
-      if (info & 1) {
-        // has parentSub
-        op.parentSub = decoder.readVarString()
-      }
-      if (info & 2) {
-        // has opContent
-        op.opContent = decoder.readOpID()
-      } else if (info & 4) {
-        // has pure text content
-        op.content = decoder.readVarString().split('')
-      } else {
-        // has mixed content
-        let s = decoder.readVarString()
-        op.content = JSON.parse(s)
-      }
-      return op
-    },
-    requiredOps: function (op) {
-      var ids = []
-      if (op.left != null) {
-        ids.push(op.left)
-      }
-      if (op.right != null) {
-        ids.push(op.right)
-      }
-      if (op.origin != null && !Y.utils.compareIds(op.left, op.origin)) {
-        ids.push(op.origin)
-      }
-      // if (op.right == null && op.left == null) {
-      ids.push(op.parent)
-
-      if (op.opContent != null) {
-        ids.push(op.opContent)
-      }
-      return ids
-    },
-    getDistanceToOrigin: function (op) {
-      if (op.left == null) {
-        return 0
-      } else {
-        var d = 0
-        var o = this.getInsertion(op.left)
-        while (!Y.utils.matchesId(o, op.origin)) {
-          d++
-          if (o.left == null) {
-            break
-          } else {
-            o = this.getInsertion(o.left)
-          }
-        }
-        return d
-      }
-    },
-    /*
-    # $this has to find a unique position between origin and the next known character
-    # case 1: $origin equals $o.origin: the $creator parameter decides if left or right
-    #         let $OL= [o1,o2,o3,o4], whereby $this is to be inserted between o1 and o4
-    #         o2,o3 and o4 origin is 1 (the position of o2)
-    #         there is the case that $this.creator < o2.creator, but o3.creator < $this.creator
-    #         then o2 knows o3. Since on another client $OL could be [o1,o3,o4] the problem is complex
-    #         therefore $this would be always to the right of o3
-    # case 2: $origin < $o.origin
-    #         if current $this insert_position > $o origin: $this ins
-    #         else $insert_position will not change
-    #         (maybe we encounter case 1 later, then this will be to the right of $o)
-    # case 3: $origin > $o.origin
-    #         $this insert_position is to the left of $o (forever!)
-    */
-    execute: function (op) {
-      var i // loop counter
-
-      // during this function some ops may get split into two pieces (e.g. with getInsertionCleanEnd)
-      // We try to merge them later, if possible
-      var tryToRemergeLater = []
-
-      if (op.origin != null) { // TODO: !== instead of !=
-        // we save in origin that op originates in it
-        // we need that later when we eventually garbage collect origin (see transaction)
-        var origin = this.getInsertionCleanEnd(op.origin)
-        if (origin.originOf == null) {
-          origin.originOf = []
-        }
-        origin.originOf.push(op.id)
-        this.setOperation(origin)
-        if (origin.right != null) {
-          tryToRemergeLater.push(origin.right)
-        }
-      }
-      var distanceToOrigin = i = Struct.Insert.getDistanceToOrigin.call(this, op) // most cases: 0 (starts from 0)
-
-      // now we begin to insert op in the list of insertions..
-      var o
-      var parent
-      var start
-
-      // find o. o is the first conflicting operation
-      if (op.left != null) {
-        o = this.getInsertionCleanEnd(op.left)
-        if (!Y.utils.compareIds(op.left, op.origin) && o.right != null) {
-          // only if not added previously
-          tryToRemergeLater.push(o.right)
-        }
-        o = (o.right == null) ? null : this.getOperation(o.right)
-      } else { // left == null
-        parent = this.getOperation(op.parent)
-        let startId = op.parentSub ? parent.map[op.parentSub] : parent.start
-        start = startId == null ? null : this.getOperation(startId)
-        o = start
-      }
-
-      // make sure to split op.right if necessary (also add to tryCombineWithLeft)
-      if (op.right != null) {
-        tryToRemergeLater.push(op.right)
-        this.getInsertionCleanStart(op.right)
-      }
-
-      // handle conflicts
-      while (true) {
-        if (o != null && !Y.utils.compareIds(o.id, op.right)) {
-          var oOriginDistance = Struct.Insert.getDistanceToOrigin.call(this, o)
-          if (oOriginDistance === i) {
-            // case 1
-            if (o.id[0] < op.id[0]) {
-              op.left = Y.utils.getLastId(o)
-              distanceToOrigin = i + 1 // just ignore o.content.length, doesn't make a difference
-            }
-          } else if (oOriginDistance < i) {
-            // case 2
-            if (i - distanceToOrigin <= oOriginDistance) {
-              op.left = Y.utils.getLastId(o)
-              distanceToOrigin = i + 1 // just ignore o.content.length, doesn't make a difference
-            }
-          } else {
-            break
-          }
-          i++
-          if (o.right != null) {
-            o = this.getInsertion(o.right)
-          } else {
-            o = null
-          }
-        } else {
-          break
-        }
-      }
-
-      // reconnect..
-      var left = null
-      var right = null
-      if (parent == null) {
-        parent = this.getOperation(op.parent)
-      }
-
-      // reconnect left and set right of op
-      if (op.left != null) {
-        left = this.getInsertion(op.left)
-        // link left
-        op.right = left.right
-        left.right = op.id
-
-        this.setOperation(left)
-      } else {
-        // set op.right from parent, if necessary
-        op.right = op.parentSub ? parent.map[op.parentSub] || null : parent.start
-      }
-      // reconnect right
-      if (op.right != null) {
-        // TODO: wanna connect right too?
-        right = this.getOperation(op.right)
-        right.left = Y.utils.getLastId(op)
-
-        // if right exists, and it is supposed to be gc'd. Remove it from the gc
-        if (right.gc != null) {
-          if (right.content != null && right.content.length > 1) {
-            right = this.getInsertionCleanEnd(right.id)
-          }
-          this.store.removeFromGarbageCollector(right)
-        }
-        this.setOperation(right)
-      }
-
-      // update parents .map/start/end properties
-      if (op.parentSub != null) {
-        if (left == null) {
-          parent.map[op.parentSub] = op.id
-          this.setOperation(parent)
-        }
-        // is a child of a map struct.
-        // Then also make sure that only the most left element is not deleted
-        // We do not call the type in this case (this is what the third parameter is for)
-        if (op.right != null) {
-          this.deleteOperation(op.right, 1, true)
-        }
-        if (op.left != null) {
-          this.deleteOperation(op.id, 1, true)
-        }
-      } else {
-        if (right == null || left == null) {
-          if (right == null) {
-            parent.end = Y.utils.getLastId(op)
-          }
-          if (left == null) {
-            parent.start = op.id
-          }
-          this.setOperation(parent)
-        }
-      }
-
-      // try to merge original op.left and op.origin
-      for (i = 0; i < tryToRemergeLater.length; i++) {
-        var m = this.getOperation(tryToRemergeLater[i])
-        this.tryCombineWithLeft(m)
-      }
-    }
-  }
-
-  /*
-  {
-    start: null,
-    end: null,
-    struct: "List",
-    type: "",
-    id: this.os.getNextOpId(1)
-  }
-  */
-  Struct.List = {
-    create: function (id) {
-      return {
-        start: null,
-        end: null,
-        struct: 'List',
-        id: id
-      }
-    },
-    encode: function (op) {
-      var e = {
-        struct: 'List',
-        id: op.id,
-        type: op.type
-      }
-      return e
-    },
-    binaryEncode: function (encoder, op) {
-      encoder.writeUint8(CLIST)
-      encoder.writeOpID(op.id)
-      encoder.writeVarString(op.type)
-    },
-    binaryDecode: function (decoder) {
-      decoder.skip8()
-      let op = {
-        id: decoder.readOpID(),
-        type: decoder.readVarString(),
-        struct: 'List',
-        start: null,
-        end: null
-      }
-      return op
-    },
-    requiredOps: function () {
-      /*
-      var ids = []
-      if (op.start != null) {
-        ids.push(op.start)
-      }
-      if (op.end != null){
-        ids.push(op.end)
-      }
-      return ids
-      */
-      return []
-    },
-    execute: function (op) {
-      op.start = null
-      op.end = null
-    },
-    ref: function (op, pos) {
-      if (op.start == null) {
-        return null
-      }
-      var res = null
-      var o = this.getOperation(op.start)
-
-      while (true) {
-        if (!o.deleted) {
-          res = o
-          pos--
-        }
-        if (pos >= 0 && o.right != null) {
-          o = this.getOperation(o.right)
-        } else {
-          break
-        }
-      }
-      return res
-    },
-    map: function (o, f) {
-      o = o.start
-      var res = []
-      while (o != null) { // TODO: change to != (at least some convention)
-        var operation = this.getOperation(o)
-        if (!operation.deleted) {
-          res.push(f(operation))
-        }
-        o = operation.right
-      }
-      return res
-    }
-  }
-
-  /*
-    {
-      map: {},
-      struct: "Map",
-      type: "",
-      id: this.os.getNextOpId(1)
-    }
-  */
-  Struct.Map = {
-    create: function (id) {
-      return {
-        id: id,
-        map: {},
-        struct: 'Map'
-      }
-    },
-    encode: function (op) {
-      var e = {
-        struct: 'Map',
-        type: op.type,
-        id: op.id,
-        map: {} // overwrite map!!
-      }
-      return e
-    },
-    binaryEncode: function (encoder, op) {
-      encoder.writeUint8(CMAP)
-      encoder.writeOpID(op.id)
-      encoder.writeVarString(op.type)
-    },
-    binaryDecode: function (decoder) {
-      decoder.skip8()
-      let op = {
-        id: decoder.readOpID(),
-        type: decoder.readVarString(),
-        struct: 'Map',
-        map: {}
-      }
-      return op
-    },
-    requiredOps: function () {
-      return []
-    },
-    execute: function (op) {
-      op.start = null
-      op.end = null
-    },
-    /*
-      Get a property by name
-    */
-    get: function (op, name) {
-      var oid = op.map[name]
-      if (oid != null) {
-        var res = this.getOperation(oid)
-        if (res == null || res.deleted) {
-          return void 0
-        } else if (res.opContent == null) {
-          return res.content[0]
-        } else {
-          return this.getType(res.opContent)
-        }
-      }
-    }
-  }
-
-  /*
-    {
-      map: {},
-      start: null,
-      end: null,
-      struct: "Xml",
-      type: "",
-      id: this.os.getNextOpId(1)
-    }
-  */
-  Struct.Xml = {
-    create: function (id, args) {
-      let nodeName = args != null ? args.nodeName : null
-      return {
-        id: id,
-        map: {},
-        start: null,
-        end: null,
-        struct: 'Xml',
-        nodeName
-      }
-    },
-    encode: function (op) {
-      var e = {
-        struct: 'Xml',
-        type: op.type,
-        id: op.id,
-        map: {},
-        nodeName: op.nodeName
-      }
-      return e
-    },
-    binaryEncode: function (encoder, op) {
-      encoder.writeUint8(CXML)
-      encoder.writeOpID(op.id)
-      encoder.writeVarString(op.type)
-      encoder.writeVarString(op.nodeName)
-    },
-    binaryDecode: function (decoder) {
-      decoder.skip8()
-      let op = {
-        id: decoder.readOpID(),
-        type: decoder.readVarString(),
-        struct: 'Xml',
-        map: {},
-        start: null,
-        end: null,
-        nodeName: decoder.readVarString()
-      }
-      return op
-    },
-    requiredOps: function () {
-      return []
-    },
-    execute: function () {},
-    ref: Struct.List.ref,
-    map: Struct.List.map,
-    /*
-      Get a property by name
-    */
-    get: Struct.Map.get
-  }
-}
--- a/src/Struct/Delete.mjs
+++ b/src/Struct/Delete.mjs
@@ -0,0 +1,124 @@
+import { getStructReference } from '../Util/structReferences.mjs'
+import ID from '../Util/ID/ID.mjs'
+import { logID } from '../MessageHandler/messageToString.mjs'
+import { writeStructToTransaction } from '../Transaction.mjs'
+
+/**
+ * @private
+ * Delete all items in an ID-range
+ * TODO: implement getItemCleanStartNode for better performance (only one lookup)
+ */
+export function deleteItemRange (y, user, clock, range, gcChildren) {
+  const createDelete = y.connector !== null && y.connector._forwardAppliedStructs
+  let item = y.os.getItemCleanStart(new ID(user, clock))
+  if (item !== null) {
+    if (!item._deleted) {
+      item._splitAt(y, range)
+      item._delete(y, createDelete, true)
+    }
+    let itemLen = item._length
+    range -= itemLen
+    clock += itemLen
+    if (range > 0) {
+      let node = y.os.findNode(new ID(user, clock))
+      while (node !== null && node.val !== null && range > 0 && node.val._id.equals(new ID(user, clock))) {
+        const nodeVal = node.val
+        if (!nodeVal._deleted) {
+          nodeVal._splitAt(y, range)
+          nodeVal._delete(y, createDelete, gcChildren)
+        }
+        const nodeLen = nodeVal._length
+        range -= nodeLen
+        clock += nodeLen
+        node = node.next()
+      }
+    }
+  }
+}
+
+/**
+ * @private
+ * A Delete change is not a real Item, but it provides the same interface as an
+ * Item. The only difference is that it will not be saved in the ItemStore
+ * (OperationStore), but instead it is safed in the DeleteStore.
+ */
+export default class Delete {
+  constructor () {
+    this._target = null
+    this._length = null
+  }
+
+  /**
+   * @private
+   * Read the next Item in a Decoder and fill this Item with the read data.
+   *
+   * This is called when data is received from a remote peer.
+   *
+   * @param {Y} y The Yjs instance that this Item belongs to.
+   * @param {BinaryDecoder} decoder The decoder object to read data from.
+   */
+  _fromBinary (y, decoder) {
+    // TODO: set target, and add it to missing if not found
+    // There is an edge case in p2p networks!
+    const targetID = decoder.readID()
+    this._targetID = targetID
+    this._length = decoder.readVarUint()
+    if (y.os.getItem(targetID) === null) {
+      return [targetID]
+    } else {
+      return []
+    }
+  }
+
+  /**
+   * @private
+   * Transform the properties of this type to binary and write it to an
+   * BinaryEncoder.
+   *
+   * This is called when this Item is sent to a remote peer.
+   *
+   * @param {BinaryEncoder} encoder The encoder to write data to.
+   */
+  _toBinary (encoder) {
+    encoder.writeUint8(getStructReference(this.constructor))
+    encoder.writeID(this._targetID)
+    encoder.writeVarUint(this._length)
+  }
+
+  /**
+   * @private
+   * Integrates this Item into the shared structure.
+   *
+   * This method actually applies the change to the Yjs instance. In the case of
+   * Delete it marks the delete target as deleted.
+   *
+   * * If created remotely (a remote user deleted something),
+   *   this Delete is applied to all structs in id-range.
+   * * If created lokally (e.g. when y-array deletes a range of elements),
+   *   this struct is broadcasted only (it is already executed)
+   */
+  _integrate (y, locallyCreated = false) {
+    if (!locallyCreated) {
+      // from remote
+      const id = this._targetID
+      deleteItemRange(y, id.user, id.clock, this._length, false)
+    } else if (y.connector !== null) {
+      // from local
+      y.connector.broadcastStruct(this)
+    }
+    if (y.persistence !== null) {
+      y.persistence.saveStruct(y, this)
+    }
+    writeStructToTransaction(y._transaction, this)
+  }
+
+  /**
+   * Transform this YXml Type to a readable format.
+   * Useful for logging as all Items and Delete implement this method.
+   *
+   * @private
+   */
+  _logString () {
+    return `Delete - target: ${logID(this._targetID)}, len: ${this._length}`
+  }
+}
--- a/src/Struct/GC.mjs
+++ b/src/Struct/GC.mjs
@@ -0,0 +1,96 @@
+import { getStructReference } from '../Util/structReferences.mjs'
+import { RootFakeUserID } from '../Util/ID/RootID.mjs'
+import ID from '../Util/ID/ID.mjs'
+import { writeStructToTransaction } from '../Transaction.mjs'
+
+// TODO should have the same base class as Item
+export default class GC {
+  constructor () {
+    this._id = null
+    this._length = 0
+  }
+
+  get _deleted () {
+    return true
+  }
+
+  _integrate (y) {
+    const id = this._id
+    const userState = y.ss.getState(id.user)
+    if (id.clock === userState) {
+      y.ss.setState(id.user, id.clock + this._length)
+    }
+    y.ds.mark(this._id, this._length, true)
+    let n = y.os.put(this)
+    const prev = n.prev().val
+    if (prev !== null && prev.constructor === GC && prev._id.user === n.val._id.user && prev._id.clock + prev._length === n.val._id.clock) {
+      // TODO: do merging for all items!
+      prev._length += n.val._length
+      y.os.delete(n.val._id)
+      n = prev
+    }
+    if (n.val) {
+      n = n.val
+    }
+    const next = y.os.findNext(n._id)
+    if (next !== null && next.constructor === GC && next._id.user === n._id.user && next._id.clock === n._id.clock + n._length) {
+      n._length += next._length
+      y.os.delete(next._id)
+    }
+    if (id.user !== RootFakeUserID) {
+      if (y.connector !== null && (y.connector._forwardAppliedStructs || id.user === y.userID)) {
+        y.connector.broadcastStruct(this)
+      }
+      if (y.persistence !== null) {
+        y.persistence.saveStruct(y, this)
+      }
+      writeStructToTransaction(y._transaction, this)
+    }
+  }
+
+  /**
+   * Transform the properties of this type to binary and write it to an
+   * BinaryEncoder.
+   *
+   * This is called when this Item is sent to a remote peer.
+   *
+   * @param {BinaryEncoder} encoder The encoder to write data to.
+   * @private
+   */
+  _toBinary (encoder) {
+    encoder.writeUint8(getStructReference(this.constructor))
+    encoder.writeID(this._id)
+    encoder.writeVarUint(this._length)
+  }
+
+  /**
+   * Read the next Item in a Decoder and fill this Item with the read data.
+   *
+   * This is called when data is received from a remote peer.
+   *
+   * @param {Y} y The Yjs instance that this Item belongs to.
+   * @param {BinaryDecoder} decoder The decoder object to read data from.
+   * @private
+   */
+  _fromBinary (y, decoder) {
+    const id = decoder.readID()
+    this._id = id
+    this._length = decoder.readVarUint()
+    const missing = []
+    if (y.ss.getState(id.user) < id.clock) {
+      missing.push(new ID(id.user, id.clock - 1))
+    }
+    return missing
+  }
+
+  _splitAt () {
+    return this
+  }
+
+  _clonePartial (diff) {
+    const gc = new GC()
+    gc._id = new ID(this._id.user, this._id.clock + diff)
+    gc._length = this._length - diff
+    return gc
+  }
+}
--- a/src/Struct/Item.mjs
+++ b/src/Struct/Item.mjs
@@ -0,0 +1,528 @@
+import { getStructReference } from '../Util/structReferences.mjs'
+import ID from '../Util/ID/ID.mjs'
+import { default as RootID, RootFakeUserID } from '../Util/ID/RootID.mjs'
+import Delete from './Delete.mjs'
+import { transactionTypeChanged, writeStructToTransaction } from '../Transaction.mjs'
+import GC from './GC.mjs'
+
+/**
+ * @private
+ * Helper utility to split an Item (see {@link Item#_splitAt})
+ * - copies all properties from a to b
+ * - connects a to b
+ * - assigns the correct _id
+ * - saves b to os
+ */
+export function splitHelper (y, a, b, diff) {
+  const aID = a._id
+  b._id = new ID(aID.user, aID.clock + diff)
+  b._origin = a
+  b._left = a
+  b._right = a._right
+  if (b._right !== null) {
+    b._right._left = b
+  }
+  b._right_origin = a._right_origin
+  // do not set a._right_origin, as this will lead to problems when syncing
+  a._right = b
+  b._parent = a._parent
+  b._parentSub = a._parentSub
+  b._deleted = a._deleted
+  // now search all relevant items to the right and update origin
+  // if origin is not it foundOrigins, we don't have to search any longer
+  let foundOrigins = new Set()
+  foundOrigins.add(a)
+  let o = b._right
+  while (o !== null && foundOrigins.has(o._origin)) {
+    if (o._origin === a) {
+      o._origin = b
+    }
+    foundOrigins.add(o)
+    o = o._right
+  }
+  y.os.put(b)
+  if (y._transaction.newTypes.has(a)) {
+    y._transaction.newTypes.add(b)
+  } else if (y._transaction.deletedStructs.has(a)) {
+    y._transaction.deletedStructs.add(b)
+  }
+}
+
+/**
+ * Abstract class that represents any content.
+ */
+export default class Item {
+  constructor () {
+    /**
+     * The uniqe identifier of this type.
+     * @type {ID}
+     */
+    this._id = null
+    /**
+     * The item that was originally to the left of this item.
+     * @type {Item}
+     */
+    this._origin = null
+    /**
+     * The item that is currently to the left of this item.
+     * @type {Item}
+     */
+    this._left = null
+    /**
+     * The item that is currently to the right of this item.
+     * @type {Item}
+     */
+    this._right = null
+    /**
+     * The item that was originally to the right of this item.
+     * @type {Item}
+     */
+    this._right_origin = null
+    /**
+     * The parent type.
+     * @type {Y|YType}
+     */
+    this._parent = null
+    /**
+     * If the parent refers to this item with some kind of key (e.g. YMap, the
+     * key is specified here. The key is then used to refer to the list in which
+     * to insert this item. If `parentSub = null` type._start is the list in
+     * which to insert to. Otherwise it is `parent._start`.
+     * @type {String}
+     */
+    this._parentSub = null
+    /**
+     * Whether this item was deleted or not.
+     * @type {Boolean}
+     */
+    this._deleted = false
+    /**
+     * If this type's effect is reundone this type refers to the type that undid
+     * this operation.
+     * @type {Item}
+     */
+    this._redone = null
+  }
+
+  /**
+   * Creates an Item with the same effect as this Item (without position effect)
+   *
+   * @private
+   */
+  _copy () {
+    return new this.constructor()
+  }
+
+  /**
+   * Redoes the effect of this operation.
+   *
+   * @param {Y} y The Yjs instance.
+   *
+   * @private
+   */
+  _redo (y) {
+    if (this._redone !== null) {
+      return this._redone
+    }
+    let struct = this._copy()
+    let left = this._left
+    let right = this
+    let parent = this._parent
+    // make sure that parent is redone
+    if (parent._deleted === true && parent._redone === null) {
+      parent._redo(y)
+    }
+    if (parent._redone !== null) {
+      parent = parent._redone
+      // find next cloned items
+      while (left !== null) {
+        if (left._redone !== null && left._redone._parent === parent) {
+          left = left._redone
+          break
+        }
+        left = left._left
+      }
+      while (right !== null) {
+        if (right._redone !== null && right._redone._parent === parent) {
+          right = right._redone
+        }
+        right = right._right
+      }
+    }
+    struct._origin = left
+    struct._left = left
+    struct._right = right
+    struct._right_origin = right
+    struct._parent = parent
+    struct._parentSub = this._parentSub
+    struct._integrate(y)
+    this._redone = struct
+    return struct
+  }
+
+  /**
+   * Computes the last content address of this Item.
+   *
+   * @private
+   */
+  get _lastId () {
+    return new ID(this._id.user, this._id.clock + this._length - 1)
+  }
+
+  /**
+   * Computes the length of this Item.
+   *
+   * @private
+   */
+  get _length () {
+    return 1
+  }
+
+  /**
+   * Should return false if this Item is some kind of meta information
+   * (e.g. format information).
+   *
+   * * Whether this Item should be addressable via `yarray.get(i)`
+   * * Whether this Item should be counted when computing yarray.length
+   *
+   * @private
+   */
+  get _countable () {
+    return true
+  }
+
+  /**
+   * Splits this Item so that another Items can be inserted in-between.
+   * This must be overwritten if _length > 1
+   * Returns right part after split
+   * * diff === 0 => this
+   * * diff === length => this._right
+   * * otherwise => split _content and return right part of split
+   * (see {@link ItemJSON}/{@link ItemString} for implementation)
+   *
+   * @private
+   */
+  _splitAt (y, diff) {
+    if (diff === 0) {
+      return this
+    }
+    return this._right
+  }
+
+  /**
+   * Mark this Item as deleted.
+   *
+   * @param {Y} y The Yjs instance
+   * @param {boolean} createDelete Whether to propagate a message that this
+   *                               Type was deleted.
+   *
+   * @private
+   */
+  _delete (y, createDelete = true) {
+    if (!this._deleted) {
+      this._deleted = true
+      y.ds.mark(this._id, this._length, false)
+      let del = new Delete()
+      del._targetID = this._id
+      del._length = this._length
+      if (createDelete) {
+        // broadcast and persists Delete
+        del._integrate(y, true)
+      } else if (y.persistence !== null) {
+        // only persist Delete
+        y.persistence.saveStruct(y, del)
+      }
+      transactionTypeChanged(y, this._parent, this._parentSub)
+      y._transaction.deletedStructs.add(this)
+    }
+  }
+
+  _gcChildren (y) {}
+
+  _gc (y) {
+    const gc = new GC()
+    gc._id = this._id
+    gc._length = this._length
+    y.os.delete(this._id)
+    gc._integrate(y)
+  }
+
+  /**
+   * This is called right before this Item receives any children.
+   * It can be overwritten to apply pending changes before applying remote changes
+   *
+   * @private
+   */
+  _beforeChange () {
+    // nop
+  }
+
+  /**
+   * Integrates this Item into the shared structure.
+   *
+   * This method actually applies the change to the Yjs instance. In case of
+   * Item it connects _left and _right to this Item and calls the
+   * {@link Item#beforeChange} method.
+   *
+   * * Integrate the struct so that other types/structs can see it
+   * * Add this struct to y.os
+   * * Check if this is struct deleted
+   *
+   * @private
+   */
+  _integrate (y) {
+    y._transaction.newTypes.add(this)
+    const parent = this._parent
+    const selfID = this._id
+    const user = selfID === null ? y.userID : selfID.user
+    const userState = y.ss.getState(user)
+    if (selfID === null) {
+      this._id = y.ss.getNextID(this._length)
+    } else if (selfID.user === RootFakeUserID) {
+      // nop
+    } else if (selfID.clock < userState) {
+      // already applied..
+      return []
+    } else if (selfID.clock === userState) {
+      y.ss.setState(selfID.user, userState + this._length)
+    } else {
+      // missing content from user
+      throw new Error('Can not apply yet!')
+    }
+    if (!parent._deleted && !y._transaction.changedTypes.has(parent) && !y._transaction.newTypes.has(parent)) {
+      // this is the first time parent is updated
+      // or this types is new
+      this._parent._beforeChange()
+    }
+
+    /*
+    # $this has to find a unique position between origin and the next known character
+    # case 1: $origin equals $o.origin: the $creator parameter decides if left or right
+    #         let $OL= [o1,o2,o3,o4], whereby $this is to be inserted between o1 and o4
+    #         o2,o3 and o4 origin is 1 (the position of o2)
+    #         there is the case that $this.creator < o2.creator, but o3.creator < $this.creator
+    #         then o2 knows o3. Since on another client $OL could be [o1,o3,o4] the problem is complex
+    #         therefore $this would be always to the right of o3
+    # case 2: $origin < $o.origin
+    #         if current $this insert_position > $o origin: $this ins
+    #         else $insert_position will not change
+    #         (maybe we encounter case 1 later, then this will be to the right of $o)
+    # case 3: $origin > $o.origin
+    #         $this insert_position is to the left of $o (forever!)
+    */
+    // handle conflicts
+    let o
+    // set o to the first conflicting item
+    if (this._left !== null) {
+      o = this._left._right
+    } else if (this._parentSub !== null) {
+      o = this._parent._map.get(this._parentSub) || null
+    } else {
+      o = this._parent._start
+    }
+    let conflictingItems = new Set()
+    let itemsBeforeOrigin = new Set()
+    // Let c in conflictingItems, b in itemsBeforeOrigin
+    // ***{origin}bbbb{this}{c,b}{c,b}{o}***
+    // Note that conflictingItems is a subset of itemsBeforeOrigin
+    while (o !== null && o !== this._right) {
+      itemsBeforeOrigin.add(o)
+      conflictingItems.add(o)
+      if (this._origin === o._origin) {
+        // case 1
+        if (o._id.user < this._id.user) {
+          this._left = o
+          conflictingItems.clear()
+        }
+      } else if (itemsBeforeOrigin.has(o._origin)) {
+        // case 2
+        if (!conflictingItems.has(o._origin)) {
+          this._left = o
+          conflictingItems.clear()
+        }
+      } else {
+        break
+      }
+      // TODO: try to use right_origin instead.
+      // Then you could basically omit conflictingItems!
+      // Note: you probably can't use right_origin in every case.. only when setting _left
+      o = o._right
+    }
+    // reconnect left/right + update parent map/start if necessary
+    const parentSub = this._parentSub
+    if (this._left === null) {
+      let right
+      if (parentSub !== null) {
+        const pmap = parent._map
+        right = pmap.get(parentSub) || null
+        pmap.set(parentSub, this)
+      } else {
+        right = parent._start
+        parent._start = this
+      }
+      this._right = right
+      if (right !== null) {
+        right._left = this
+      }
+    } else {
+      const left = this._left
+      const right = left._right
+      this._right = right
+      left._right = this
+      if (right !== null) {
+        right._left = this
+      }
+    }
+    if (parent._deleted) {
+      this._delete(y, false)
+    }
+    y.os.put(this)
+    transactionTypeChanged(y, parent, parentSub)
+    if (this._id.user !== RootFakeUserID) {
+      if (y.connector !== null && (y.connector._forwardAppliedStructs || this._id.user === y.userID)) {
+        y.connector.broadcastStruct(this)
+      }
+      if (y.persistence !== null) {
+        y.persistence.saveStruct(y, this)
+      }
+      writeStructToTransaction(y._transaction, this)
+    }
+  }
+
+  /**
+   * Transform the properties of this type to binary and write it to an
+   * BinaryEncoder.
+   *
+   * This is called when this Item is sent to a remote peer.
+   *
+   * @param {BinaryEncoder} encoder The encoder to write data to.
+   *
+   * @private
+   */
+  _toBinary (encoder) {
+    encoder.writeUint8(getStructReference(this.constructor))
+    let info = 0
+    if (this._origin !== null) {
+      info += 0b1 // origin is defined
+    }
+    // TODO: remove
+    /* no longer send _left
+    if (this._left !== this._origin) {
+      info += 0b10 // do not copy origin to left
+    }
+    */
+    if (this._right_origin !== null) {
+      info += 0b100
+    }
+    if (this._parentSub !== null) {
+      info += 0b1000
+    }
+    encoder.writeUint8(info)
+    encoder.writeID(this._id)
+    if (info & 0b1) {
+      encoder.writeID(this._origin._lastId)
+    }
+    // TODO: remove
+    /* see above
+    if (info & 0b10) {
+      encoder.writeID(this._left._lastId)
+    }
+    */
+    if (info & 0b100) {
+      encoder.writeID(this._right_origin._id)
+    }
+    if ((info & 0b101) === 0) {
+      // neither origin nor right is defined
+      encoder.writeID(this._parent._id)
+    }
+    if (info & 0b1000) {
+      encoder.writeVarString(JSON.stringify(this._parentSub))
+    }
+  }
+
+  /**
+   * Read the next Item in a Decoder and fill this Item with the read data.
+   *
+   * This is called when data is received from a remote peer.
+   *
+   * @param {Y} y The Yjs instance that this Item belongs to.
+   * @param {BinaryDecoder} decoder The decoder object to read data from.
+   *
+   * @private
+   */
+  _fromBinary (y, decoder) {
+    let missing = []
+    const info = decoder.readUint8()
+    const id = decoder.readID()
+    this._id = id
+    // read origin
+    if (info & 0b1) {
+      // origin != null
+      const originID = decoder.readID()
+      // we have to query for left again because it might have been split/merged..
+      const origin = y.os.getItemCleanEnd(originID)
+      if (origin === null) {
+        missing.push(originID)
+      } else {
+        this._origin = origin
+        this._left = this._origin
+      }
+    }
+    // read right
+    if (info & 0b100) {
+      // right != null
+      const rightID = decoder.readID()
+      // we have to query for right again because it might have been split/merged..
+      const right = y.os.getItemCleanStart(rightID)
+      if (right === null) {
+        missing.push(rightID)
+      } else {
+        this._right = right
+        this._right_origin = right
+      }
+    }
+    // read parent
+    if ((info & 0b101) === 0) {
+      // neither origin nor right is defined
+      const parentID = decoder.readID()
+      // parent does not change, so we don't have to search for it again
+      if (this._parent === null) {
+        let parent
+        if (parentID.constructor === RootID) {
+          parent = y.os.get(parentID)
+        } else {
+          parent = y.os.getItem(parentID)
+        }
+        if (parent === null) {
+          missing.push(parentID)
+        } else {
+          this._parent = parent
+        }
+      }
+    } else if (this._parent === null) {
+      if (this._origin !== null) {
+        if (this._origin.constructor === GC) {
+          // if origin is a gc, set parent also gc'd
+          this._parent = this._origin
+        } else {
+          this._parent = this._origin._parent
+        }
+      } else if (this._right_origin !== null) {
+        // if origin is a gc, set parent also gc'd
+        if (this._right_origin.constructor === GC) {
+          this._parent = this._right_origin
+        } else {
+          this._parent = this._right_origin._parent
+        }
+      }
+    }
+    if (info & 0b1000) {
+      // TODO: maybe put this in read parent condition (you can also read parentsub from left/right)
+      this._parentSub = JSON.parse(decoder.readVarString())
+    }
+    if (y.ss.getState(id.user) < id.clock) {
+      missing.push(new ID(id.user, id.clock - 1))
+    }
+    return missing
+  }
+}
--- a/src/Struct/ItemEmbed.mjs
+++ b/src/Struct/ItemEmbed.mjs
@@ -0,0 +1,35 @@
+import Item from './Item.mjs'
+import { logItemHelper } from '../MessageHandler/messageToString.mjs'
+
+export default class ItemEmbed extends Item {
+  constructor () {
+    super()
+    this.embed = null
+  }
+  _copy (undeleteChildren, copyPosition) {
+    let struct = super._copy(undeleteChildren, copyPosition)
+    struct.embed = this.embed
+    return struct
+  }
+  get _length () {
+    return 1
+  }
+  _fromBinary (y, decoder) {
+    const missing = super._fromBinary(y, decoder)
+    this.embed = JSON.parse(decoder.readVarString())
+    return missing
+  }
+  _toBinary (encoder) {
+    super._toBinary(encoder)
+    encoder.writeVarString(JSON.stringify(this.embed))
+  }
+  /**
+   * Transform this YXml Type to a readable format.
+   * Useful for logging as all Items and Delete implement this method.
+   *
+   * @private
+   */
+  _logString () {
+    return logItemHelper('ItemEmbed', this, `embed:${JSON.stringify(this.embed)}`)
+  }
+}
--- a/src/Struct/ItemFormat.mjs
+++ b/src/Struct/ItemFormat.mjs
@@ -0,0 +1,42 @@
+import Item from './Item.mjs'
+import { logItemHelper } from '../MessageHandler/messageToString.mjs'
+
+export default class ItemFormat extends Item {
+  constructor () {
+    super()
+    this.key = null
+    this.value = null
+  }
+  _copy (undeleteChildren, copyPosition) {
+    let struct = super._copy(undeleteChildren, copyPosition)
+    struct.key = this.key
+    struct.value = this.value
+    return struct
+  }
+  get _length () {
+    return 1
+  }
+  get _countable () {
+    return false
+  }
+  _fromBinary (y, decoder) {
+    const missing = super._fromBinary(y, decoder)
+    this.key = decoder.readVarString()
+    this.value = JSON.parse(decoder.readVarString())
+    return missing
+  }
+  _toBinary (encoder) {
+    super._toBinary(encoder)
+    encoder.writeVarString(this.key)
+    encoder.writeVarString(JSON.stringify(this.value))
+  }
+  /**
+   * Transform this YXml Type to a readable format.
+   * Useful for logging as all Items and Delete implement this method.
+   *
+   * @private
+   */
+  _logString () {
+    return logItemHelper('ItemFormat', this, `key:${JSON.stringify(this.key)},value:${JSON.stringify(this.value)}`)
+  }
+}
--- a/src/Struct/ItemJSON.mjs
+++ b/src/Struct/ItemJSON.mjs
@@ -0,0 +1,68 @@
+import Item, { splitHelper } from './Item.mjs'
+import { logItemHelper } from '../MessageHandler/messageToString.mjs'
+
+export default class ItemJSON extends Item {
+  constructor () {
+    super()
+    this._content = null
+  }
+  _copy () {
+    let struct = super._copy()
+    struct._content = this._content
+    return struct
+  }
+  get _length () {
+    return this._content.length
+  }
+  _fromBinary (y, decoder) {
+    let missing = super._fromBinary(y, decoder)
+    let len = decoder.readVarUint()
+    this._content = new Array(len)
+    for (let i = 0; i < len; i++) {
+      const ctnt = decoder.readVarString()
+      let parsed
+      if (ctnt === 'undefined') {
+        parsed = undefined
+      } else {
+        parsed = JSON.parse(ctnt)
+      }
+      this._content[i] = parsed
+    }
+    return missing
+  }
+  _toBinary (encoder) {
+    super._toBinary(encoder)
+    let len = this._content.length
+    encoder.writeVarUint(len)
+    for (let i = 0; i < len; i++) {
+      let encoded
+      let content = this._content[i]
+      if (content === undefined) {
+        encoded = 'undefined'
+      } else {
+        encoded = JSON.stringify(content)
+      }
+      encoder.writeVarString(encoded)
+    }
+  }
+  /**
+   * Transform this YXml Type to a readable format.
+   * Useful for logging as all Items and Delete implement this method.
+   *
+   * @private
+   */
+  _logString () {
+    return logItemHelper('ItemJSON', this, `content:${JSON.stringify(this._content)}`)
+  }
+  _splitAt (y, diff) {
+    if (diff === 0) {
+      return this
+    } else if (diff >= this._length) {
+      return this._right
+    }
+    let item = new ItemJSON()
+    item._content = this._content.splice(diff)
+    splitHelper(y, this, item, diff)
+    return item
+  }
+}
--- a/src/Struct/ItemString.mjs
+++ b/src/Struct/ItemString.mjs
@@ -0,0 +1,47 @@
+import Item, { splitHelper } from './Item.mjs'
+import { logItemHelper } from '../MessageHandler/messageToString.mjs'
+
+export default class ItemString extends Item {
+  constructor () {
+    super()
+    this._content = null
+  }
+  _copy () {
+    let struct = super._copy()
+    struct._content = this._content
+    return struct
+  }
+  get _length () {
+    return this._content.length
+  }
+  _fromBinary (y, decoder) {
+    let missing = super._fromBinary(y, decoder)
+    this._content = decoder.readVarString()
+    return missing
+  }
+  _toBinary (encoder) {
+    super._toBinary(encoder)
+    encoder.writeVarString(this._content)
+  }
+  /**
+   * Transform this YXml Type to a readable format.
+   * Useful for logging as all Items and Delete implement this method.
+   *
+   * @private
+   */
+  _logString () {
+    return logItemHelper('ItemString', this, `content:"${this._content}"`)
+  }
+  _splitAt (y, diff) {
+    if (diff === 0) {
+      return this
+    } else if (diff >= this._length) {
+      return this._right
+    }
+    let item = new ItemString()
+    item._content = this._content.slice(diff)
+    this._content = this._content.slice(0, diff)
+    splitHelper(y, this, item, diff)
+    return item
+  }
+}
--- a/src/Struct/Type.mjs
+++ b/src/Struct/Type.mjs
@@ -0,0 +1,243 @@
+import Item from './Item.mjs'
+import EventHandler from '../Util/EventHandler.mjs'
+import ID from '../Util/ID/ID.mjs'
+
+// restructure children as if they were inserted one after another
+function integrateChildren (y, start) {
+  let right
+  do {
+    right = start._right
+    start._right = null
+    start._right_origin = null
+    start._origin = start._left
+    start._integrate(y)
+    start = right
+  } while (right !== null)
+}
+
+export function getListItemIDByPosition (type, i) {
+  let pos = 0
+  let n = type._start
+  while (n !== null) {
+    if (!n._deleted) {
+      if (pos <= i && i < pos + n._length) {
+        const id = n._id
+        return new ID(id.user, id.clock + i - pos)
+      }
+      pos++
+    }
+    n = n._right
+  }
+}
+
+function gcChildren (y, item) {
+  while (item !== null) {
+    item._delete(y, false, true)
+    item._gc(y)
+    item = item._right
+  }
+}
+
+/**
+ * Abstract Yjs Type class
+ */
+export default class Type extends Item {
+  constructor () {
+    super()
+    this._map = new Map()
+    this._start = null
+    this._y = null
+    this._eventHandler = new EventHandler()
+    this._deepEventHandler = new EventHandler()
+  }
+
+  /**
+   * Compute the path from this type to the specified target.
+   *
+   * @example
+   * It should be accessible via `this.get(result[0]).get(result[1])..`
+   * const path = type.getPathTo(child)
+   * // assuming `type instanceof YArray`
+   * console.log(path) // might look like => [2, 'key1']
+   * child === type.get(path[0]).get(path[1])
+   *
+   * @param {YType} type Type target
+   * @return {Array<string>} Path to the target
+   */
+  getPathTo (type) {
+    if (type === this) {
+      return []
+    }
+    const path = []
+    const y = this._y
+    while (type !== this && type !== y) {
+      let parent = type._parent
+      if (type._parentSub !== null) {
+        path.unshift(type._parentSub)
+      } else {
+        // parent is array-ish
+        for (let [i, child] of parent) {
+          if (child === type) {
+            path.unshift(i)
+            break
+          }
+        }
+      }
+      type = parent
+    }
+    if (type !== this) {
+      throw new Error('The type is not a child of this node')
+    }
+    return path
+  }
+
+  /**
+   * @private
+   * Call event listeners with an event. This will also add an event to all
+   * parents (for `.observeDeep` handlers).
+   */
+  _callEventHandler (transaction, event) {
+    const changedParentTypes = transaction.changedParentTypes
+    this._eventHandler.callEventListeners(transaction, event)
+    let type = this
+    while (type !== this._y) {
+      let events = changedParentTypes.get(type)
+      if (events === undefined) {
+        events = []
+        changedParentTypes.set(type, events)
+      }
+      events.push(event)
+      type = type._parent
+    }
+  }
+
+  /**
+   * @private
+   * Helper method to transact if the y instance is available.
+   *
+   * TODO: Currently event handlers are not thrown when a type is not registered
+   *       with a Yjs instance.
+   */
+  _transact (f) {
+    const y = this._y
+    if (y !== null) {
+      y.transact(f)
+    } else {
+      f(y)
+    }
+  }
+
+  /**
+   * Observe all events that are created on this type.
+   *
+   * @param {Function} f Observer function
+   */
+  observe (f) {
+    this._eventHandler.addEventListener(f)
+  }
+
+  /**
+   * Observe all events that are created by this type and its children.
+   *
+   * @param {Function} f Observer function
+   */
+  observeDeep (f) {
+    this._deepEventHandler.addEventListener(f)
+  }
+
+  /**
+   * Unregister an observer function.
+   *
+   * @param {Function} f Observer function
+   */
+  unobserve (f) {
+    this._eventHandler.removeEventListener(f)
+  }
+
+  /**
+   * Unregister an observer function.
+   *
+   * @param {Function} f Observer function
+   */
+  unobserveDeep (f) {
+    this._deepEventHandler.removeEventListener(f)
+  }
+
+  /**
+   * @private
+   * Integrate this type into the Yjs instance.
+   *
+   * * Save this struct in the os
+   * * This type is sent to other client
+   * * Observer functions are fired
+   *
+   * @param {Y} y The Yjs instance
+   */
+  _integrate (y) {
+    super._integrate(y)
+    this._y = y
+    // when integrating children we must make sure to
+    // integrate start
+    const start = this._start
+    if (start !== null) {
+      this._start = null
+      integrateChildren(y, start)
+    }
+    // integrate map children
+    const map = this._map
+    this._map = new Map()
+    for (let t of map.values()) {
+      // TODO make sure that right elements are deleted!
+      integrateChildren(y, t)
+    }
+  }
+
+  _gcChildren (y) {
+    gcChildren(y, this._start)
+    this._start = null
+    this._map.forEach(item => {
+      gcChildren(y, item)
+    })
+    this._map = new Map()
+  }
+
+  _gc (y) {
+    this._gcChildren(y)
+    super._gc(y)
+  }
+
+  /**
+   * @private
+   * Mark this Item as deleted.
+   *
+   * @param {Y} y The Yjs instance
+   * @param {boolean} createDelete Whether to propagate a message that this
+   *                               Type was deleted.
+   * @param {boolean} [gcChildren=y._hasUndoManager===false] Whether to garbage
+   *                                         collect the children of this type.
+   */
+  _delete (y, createDelete, gcChildren) {
+    if (gcChildren === undefined || !y.gcEnabled) {
+      gcChildren = y._hasUndoManager === false && y.gcEnabled
+    }
+    super._delete(y, createDelete, gcChildren)
+    y._transaction.changedTypes.delete(this)
+    // delete map types
+    for (let value of this._map.values()) {
+      if (value instanceof Item && !value._deleted) {
+        value._delete(y, false, gcChildren)
+      }
+    }
+    // delete array types
+    let t = this._start
+    while (t !== null) {
+      if (!t._deleted) {
+        t._delete(y, false, gcChildren)
+      }
+      t = t._right
+    }
+    if (gcChildren) {
+      this._gcChildren(y)
+    }
+  }
+}
--- a/src/Transaction.js
+++ b/src/Transaction.js
--- a/src/Transaction.mjs
+++ b/src/Transaction.mjs
@@ -0,0 +1,91 @@
+import BinaryEncoder from './Util/Binary/Encoder.mjs'
+
+/**
+ * A transaction is created for every change on the Yjs model. It is possible
+ * to bundle changes on the Yjs model in a single transaction to
+ * minimize the number on messages sent and the number of observer calls.
+ * If possible the user of this library should bundle as many changes as
+ * possible. Here is an example to illustrate the advantages of bundling:
+ *
+ * @example
+ * const map = y.define('map', YMap)
+ * // Log content when change is triggered
+ * map.observe(function () {
+ *   console.log('change triggered')
+ * })
+ * // Each change on the map type triggers a log message:
+ * map.set('a', 0) // => "change triggered"
+ * map.set('b', 0) // => "change triggered"
+ * // When put in a transaction, it will trigger the log after the transaction:
+ * y.transact(function () {
+ *   map.set('a', 1)
+ *   map.set('b', 1)
+ * }) // => "change triggered"
+ *
+ */
+export default class Transaction {
+  constructor (y) {
+    /**
+     * @type {Y} The Yjs instance.
+     */
+    this.y = y
+    /**
+     * All new types that are added during a transaction.
+     * @type {Set<Item>}
+     */
+    this.newTypes = new Set()
+    /**
+     * All types that were directly modified (property added or child
+     * inserted/deleted). New types are not included in this Set.
+     * Maps from type to parentSubs (`item._parentSub = null` for YArray)
+     * @type {Set<YType,String>}
+     */
+    this.changedTypes = new Map()
+    // TODO: rename deletedTypes
+    /**
+     * Set of all deleted Types and Structs.
+     * @type {Set<Item>}
+     */
+    this.deletedStructs = new Set()
+    /**
+     * Saves the old state set of the Yjs instance. If a state was modified,
+     * the original value is saved here.
+     * @type {Map<Number,Number>}
+     */
+    this.beforeState = new Map()
+    /**
+     * Stores the events for the types that observe also child elements.
+     * It is mainly used by `observeDeep`.
+     * @type {Map<YType,Array<YEvent>>}
+     */
+    this.changedParentTypes = new Map()
+    this.encodedStructsLen = 0
+    this._encodedStructs = new BinaryEncoder()
+    this._encodedStructs.writeUint32(0)
+  }
+  get encodedStructs () {
+    this._encodedStructs.setUint32(0, this.encodedStructsLen)
+    return this._encodedStructs
+  }
+}
+
+export function writeStructToTransaction (transaction, struct) {
+  transaction.encodedStructsLen++
+  struct._toBinary(transaction._encodedStructs)
+}
+
+/**
+ * @private
+ */
+export function transactionTypeChanged (y, type, sub) {
+  if (type !== y && !type._deleted && !y._transaction.newTypes.has(type)) {
+    const changedTypes = y._transaction.changedTypes
+    let subs = changedTypes.get(type)
+    if (subs === undefined) {
+      // create if it doesn't exist yet
+      subs = new Set()
+      changedTypes.set(type, subs)
+    }
+    subs.add(sub)
+  }
+}
--- a/src/Types/YArray/YArray.mjs
+++ b/src/Types/YArray/YArray.mjs
@@ -0,0 +1,378 @@
+import Type from '../../Struct/Type.mjs'
+import ItemJSON from '../../Struct/ItemJSON.mjs'
+import ItemString from '../../Struct/ItemString.mjs'
+import { logID, logItemHelper } from '../../MessageHandler/messageToString.mjs'
+import YEvent from '../../Util/YEvent.mjs'
+
+/**
+ * Event that describes the changes on a YArray
+ *
+ * @param {YArray} yarray The changed type
+ * @param {Boolean} remote Whether the changed was caused by a remote peer
+ * @param {Transaction} transaction The transaction object
+ */
+export class YArrayEvent extends YEvent {
+  constructor (yarray, remote, transaction) {
+    super(yarray)
+    this.remote = remote
+    this._transaction = transaction
+    this._addedElements = null
+    this._removedElements = null
+  }
+
+  /**
+   * Child elements that were added in this transaction.
+   *
+   * @return {Set}
+   */
+  get addedElements () {
+    if (this._addedElements === null) {
+      const target = this.target
+      const transaction = this._transaction
+      const addedElements = new Set()
+      transaction.newTypes.forEach(function (type) {
+        if (type._parent === target && !transaction.deletedStructs.has(type)) {
+          addedElements.add(type)
+        }
+      })
+      this._addedElements = addedElements
+    }
+    return this._addedElements
+  }
+
+  /**
+   * Child elements that were removed in this transaction.
+   *
+   * @return {Set}
+   */
+  get removedElements () {
+    if (this._removedElements === null) {
+      const target = this.target
+      const transaction = this._transaction
+      const removedElements = new Set()
+      transaction.deletedStructs.forEach(function (struct) {
+        if (struct._parent === target && !transaction.newTypes.has(struct)) {
+          removedElements.add(struct)
+        }
+      })
+      this._removedElements = removedElements
+    }
+    return this._removedElements
+  }
+}
+
+/**
+ * A shared Array implementation.
+ */
+export default class YArray extends Type {
+  /**
+   * @private
+   * Creates YArray Event and calls observers.
+   */
+  _callObserver (transaction, parentSubs, remote) {
+    this._callEventHandler(transaction, new YArrayEvent(this, remote, transaction))
+  }
+
+  /**
+   * Returns the i-th element from a YArray.
+   *
+   * @param {Integer} index The index of the element to return from the YArray
+   */
+  get (index) {
+    let n = this._start
+    while (n !== null) {
+      if (!n._deleted && n._countable) {
+        if (index < n._length) {
+          if (n.constructor === ItemJSON || n.constructor === ItemString) {
+            return n._content[index]
+          } else {
+            return n
+          }
+        }
+        index -= n._length
+      }
+      n = n._right
+    }
+  }
+
+  /**
+   * Transforms this YArray to a JavaScript Array.
+   *
+   * @return {Array}
+   */
+  toArray () {
+    return this.map(c => c)
+  }
+
+  /**
+   * Transforms this Shared Type to a JSON object.
+   *
+   * @return {Array}
+   */
+  toJSON () {
+    return this.map(c => {
+      if (c instanceof Type) {
+        if (c.toJSON !== null) {
+          return c.toJSON()
+        } else {
+          return c.toString()
+        }
+      }
+      return c
+    })
+  }
+
+  /**
+   * Returns an Array with the result of calling a provided function on every
+   * element of this YArray.
+   *
+   * @param {Function} f Function that produces an element of the new Array
+   * @return {Array} A new array with each element being the result of the
+   *                 callback function
+   */
+  map (f) {
+    const res = []
+    this.forEach((c, i) => {
+      res.push(f(c, i, this))
+    })
+    return res
+  }
+
+  /**
+   * Executes a provided function on once on overy element of this YArray.
+   *
+   * @param {Function} f A function to execute on every element of this YArray.
+   */
+  forEach (f) {
+    let index = 0
+    let n = this._start
+    while (n !== null) {
+      if (!n._deleted && n._countable) {
+        if (n instanceof Type) {
+          f(n, index++, this)
+        } else {
+          const content = n._content
+          const contentLen = content.length
+          for (let i = 0; i < contentLen; i++) {
+            index++
+            f(content[i], index, this)
+          }
+        }
+      }
+      n = n._right
+    }
+  }
+
+  /**
+   * Computes the length of this YArray.
+   */
+  get length () {
+    let length = 0
+    let n = this._start
+    while (n !== null) {
+      if (!n._deleted && n._countable) {
+        length += n._length
+      }
+      n = n._right
+    }
+    return length
+  }
+
+  [Symbol.iterator] () {
+    return {
+      next: function () {
+        while (this._item !== null && (this._item._deleted || this._item._length <= this._itemElement)) {
+          // item is deleted or itemElement does not exist (is deleted)
+          this._item = this._item._right
+          this._itemElement = 0
+        }
+        if (this._item === null) {
+          return {
+            done: true
+          }
+        }
+        let content
+        if (this._item instanceof Type) {
+          content = this._item
+        } else {
+          content = this._item._content[this._itemElement++]
+        }
+        return {
+          value: content,
+          done: false
+        }
+      },
+      _item: this._start,
+      _itemElement: 0,
+      _count: 0
+    }
+  }
+
+  /**
+   * Deletes elements starting from an index.
+   *
+   * @param {Integer} index Index at which to start deleting elements
+   * @param {Integer} length The number of elements to remove. Defaults to 1.
+   */
+  delete (index, length = 1) {
+    this._y.transact(() => {
+      let item = this._start
+      let count = 0
+      while (item !== null && length > 0) {
+        if (!item._deleted && item._countable) {
+          if (count <= index && index < count + item._length) {
+            const diffDel = index - count
+            item = item._splitAt(this._y, diffDel)
+            item._splitAt(this._y, length)
+            length -= item._length
+            item._delete(this._y)
+            count += diffDel
+          } else {
+            count += item._length
+          }
+        }
+        item = item._right
+      }
+    })
+    if (length > 0) {
+      throw new Error('Delete exceeds the range of the YArray')
+    }
+  }
+
+  /**
+   * @private
+   * Inserts content after an element container.
+   *
+   * @param {Item} left The element container to use as a reference.
+   * @param {Array} content The Array of content to insert (see {@see insert})
+   */
+  insertAfter (left, content) {
+    this._transact(y => {
+      let right
+      if (left === null) {
+        right = this._start
+      } else {
+        right = left._right
+      }
+      let prevJsonIns = null
+      for (let i = 0; i < content.length; i++) {
+        let c = content[i]
+        if (typeof c === 'function') {
+          c = new c() // eslint-disable-line new-cap
+        }
+        if (c instanceof Type) {
+          if (prevJsonIns !== null) {
+            if (y !== null) {
+              prevJsonIns._integrate(y)
+            }
+            left = prevJsonIns
+            prevJsonIns = null
+          }
+          c._origin = left
+          c._left = left
+          c._right = right
+          c._right_origin = right
+          c._parent = this
+          if (y !== null) {
+            c._integrate(y)
+          } else if (left === null) {
+            this._start = c
+          } else {
+            left._right = c
+          }
+          left = c
+        } else {
+          if (prevJsonIns === null) {
+            prevJsonIns = new ItemJSON()
+            prevJsonIns._origin = left
+            prevJsonIns._left = left
+            prevJsonIns._right = right
+            prevJsonIns._right_origin = right
+            prevJsonIns._parent = this
+            prevJsonIns._content = []
+          }
+          prevJsonIns._content.push(c)
+        }
+      }
+      if (prevJsonIns !== null) {
+        if (y !== null) {
+          prevJsonIns._integrate(y)
+        } else if (prevJsonIns._left === null) {
+          this._start = prevJsonIns
+        }
+      }
+    })
+    return content
+  }
+
+  /**
+   * Inserts new content at an index.
+   *
+   * Important: This function expects an array of content. Not just a content
+   * object. The reason for this "weirdness" is that inserting several elements
+   * is very efficient when it is done as a single operation.
+   *
+   * @example
+   *  // Insert character 'a' at position 0
+   *  yarray.insert(0, ['a'])
+   *  // Insert numbers 1, 2 at position 1
+   *  yarray.insert(2, [1, 2])
+   *
+   * @param {Integer} index The index to insert content at.
+   * @param {Array} content The array of content
+   */
+  insert (index, content) {
+    this._transact(() => {
+      let left = null
+      let right = this._start
+      let count = 0
+      const y = this._y
+      while (right !== null) {
+        const rightLen = right._deleted ? 0 : (right._length - 1)
+        if (count <= index && index <= count + rightLen) {
+          const splitDiff = index - count
+          right = right._splitAt(y, splitDiff)
+          left = right._left
+          count += splitDiff
+          break
+        }
+        if (!right._deleted) {
+          count += right._length
+        }
+        left = right
+        right = right._right
+      }
+      if (index > count) {
+        throw new Error('Index exceeds array range!')
+      }
+      this.insertAfter(left, content)
+    })
+  }
+
+  /**
+   * Appends content to this YArray.
+   *
+   * @param {Array} content Array of content to append.
+   */
+  push (content) {
+    let n = this._start
+    let lastUndeleted = null
+    while (n !== null) {
+      if (!n._deleted) {
+        lastUndeleted = n
+      }
+      n = n._right
+    }
+    this.insertAfter(lastUndeleted, content)
+  }
+
+  /**
+   * Transform this YXml Type to a readable format.
+   * Useful for logging as all Items and Delete implement this method.
+   *
+   * @private
+   */
+  _logString () {
+    return logItemHelper('YArray', this, `start:${logID(this._start)}"`)
+  }
+}
--- a/src/Types/YMap/YMap.mjs
+++ b/src/Types/YMap/YMap.mjs
@@ -0,0 +1,175 @@
+import Item from '../../Struct/Item.mjs'
+import Type from '../../Struct/Type.mjs'
+import ItemJSON from '../../Struct/ItemJSON.mjs'
+import { logItemHelper } from '../../MessageHandler/messageToString.mjs'
+import YEvent from '../../Util/YEvent.mjs'
+
+/**
+ * Event that describes the changes on a YMap.
+ *
+ * @param {YMap} ymap The YArray that changed.
+ * @param {Set<any>} subs The keys that changed.
+ * @param {boolean} remote Whether the change was created by a remote peer.
+ */
+export class YMapEvent extends YEvent {
+  constructor (ymap, subs, remote) {
+    super(ymap)
+    this.keysChanged = subs
+    this.remote = remote
+  }
+}
+
+/**
+ * A shared Map implementation.
+ */
+export default class YMap extends Type {
+  /**
+   * @private
+   * Creates YMap Event and calls observers.
+   */
+  _callObserver (transaction, parentSubs, remote) {
+    this._callEventHandler(transaction, new YMapEvent(this, parentSubs, remote))
+  }
+
+  /**
+   * Transforms this Shared Type to a JSON object.
+   *
+   * @return {Object}
+   */
+  toJSON () {
+    const map = {}
+    for (let [key, item] of this._map) {
+      if (!item._deleted) {
+        let res
+        if (item instanceof Type) {
+          if (item.toJSON !== undefined) {
+            res = item.toJSON()
+          } else {
+            res = item.toString()
+          }
+        } else {
+          res = item._content[0]
+        }
+        map[key] = res
+      }
+    }
+    return map
+  }
+
+  /**
+   * Returns the keys for each element in the YMap Type.
+   *
+   * @return {Array}
+   */
+  keys () {
+    // TODO: Should return either Iterator or Set!
+    let keys = []
+    for (let [key, value] of this._map) {
+      if (!value._deleted) {
+        keys.push(key)
+      }
+    }
+    return keys
+  }
+
+  /**
+   * Remove a specified element from this YMap.
+   *
+   * @param {encodable} key The key of the element to remove.
+   */
+  delete (key) {
+    this._transact((y) => {
+      let c = this._map.get(key)
+      if (y !== null && c !== undefined) {
+        c._delete(y)
+      }
+    })
+  }
+
+  /**
+   * Adds or updates an element with a specified key and value.
+   *
+   * @param {encodable} key The key of the element to add to this YMap.
+   * @param {encodable | YType} value The value of the element to add to this
+   *                                  YMap.
+   */
+  set (key, value) {
+    this._transact(y => {
+      const old = this._map.get(key) || null
+      if (old !== null) {
+        if (
+          old.constructor === ItemJSON &&
+          !old._deleted && old._content[0] === value
+        ) {
+          // Trying to overwrite with same value
+          // break here
+          return value
+        }
+        if (y !== null) {
+          old._delete(y)
+        }
+      }
+      let v
+      if (typeof value === 'function') {
+        v = new value() // eslint-disable-line new-cap
+        value = v
+      } else if (value instanceof Item) {
+        v = value
+      } else {
+        v = new ItemJSON()
+        v._content = [value]
+      }
+      v._right = old
+      v._right_origin = old
+      v._parent = this
+      v._parentSub = key
+      if (y !== null) {
+        v._integrate(y)
+      } else {
+        this._map.set(key, v)
+      }
+    })
+    return value
+  }
+
+  /**
+   * Returns a specified element from this YMap.
+   *
+   * @param {encodable} key The key of the element to return.
+   */
+  get (key) {
+    let v = this._map.get(key)
+    if (v === undefined || v._deleted) {
+      return undefined
+    }
+    if (v instanceof Type) {
+      return v
+    } else {
+      return v._content[v._content.length - 1]
+    }
+  }
+
+  /**
+   * Returns a boolean indicating whether the specified key exists or not.
+   *
+   * @param {encodable} key The key to test.
+   */
+  has (key) {
+    let v = this._map.get(key)
+    if (v === undefined || v._deleted) {
+      return false
+    } else {
+      return true
+    }
+  }
+
+  /**
+   * Transform this YXml Type to a readable format.
+   * Useful for logging as all Items and Delete implement this method.
+   *
+   * @private
+   */
+  _logString () {
+    return logItemHelper('YMap', this, `mapSize:${this._map.size}`)
+  }
+}
--- a/src/Types/YText/YText.mjs
+++ b/src/Types/YText/YText.mjs
@@ -0,0 +1,656 @@
+import ItemEmbed from '../../Struct/ItemEmbed.mjs'
+import ItemString from '../../Struct/ItemString.mjs'
+import ItemFormat from '../../Struct/ItemFormat.mjs'
+import { logItemHelper } from '../../MessageHandler/messageToString.mjs'
+import { YArrayEvent, default as YArray } from '../YArray/YArray.mjs'
+
+/**
+ * @private
+ */
+function integrateItem (item, parent, y, left, right) {
+  item._origin = left
+  item._left = left
+  item._right = right
+  item._right_origin = right
+  item._parent = parent
+  if (y !== null) {
+    item._integrate(y)
+  } else if (left === null) {
+    parent._start = item
+  } else {
+    left._right = item
+  }
+}
+
+/**
+ * @private
+ */
+function findNextPosition (currentAttributes, parent, left, right, count) {
+  while (right !== null && count > 0) {
+    switch (right.constructor) {
+      case ItemEmbed:
+      case ItemString:
+        const rightLen = right._deleted ? 0 : (right._length - 1)
+        if (count <= rightLen) {
+          right = right._splitAt(parent._y, count)
+          left = right._left
+          return [left, right, currentAttributes]
+        }
+        if (right._deleted === false) {
+          count -= right._length
+        }
+        break
+      case ItemFormat:
+        if (right._deleted === false) {
+          updateCurrentAttributes(currentAttributes, right)
+        }
+        break
+    }
+    left = right
+    right = right._right
+  }
+  return [left, right, currentAttributes]
+}
+
+/**
+ * @private
+ */
+function findPosition (parent, index) {
+  let currentAttributes = new Map()
+  let left = null
+  let right = parent._start
+  return findNextPosition(currentAttributes, parent, left, right, index)
+}
+
+/**
+ * Negate applied formats
+ *
+ * @private
+ */
+function insertNegatedAttributes (y, parent, left, right, negatedAttributes) {
+  // check if we really need to remove attributes
+  while (
+    right !== null && (
+      right._deleted === true || (
+        right.constructor === ItemFormat &&
+        (negatedAttributes.get(right.key) === right.value)
+      )
+    )
+  ) {
+    if (right._deleted === false) {
+      negatedAttributes.delete(right.key)
+    }
+    left = right
+    right = right._right
+  }
+  for (let [key, val] of negatedAttributes) {
+    let format = new ItemFormat()
+    format.key = key
+    format.value = val
+    integrateItem(format, parent, y, left, right)
+    left = format
+  }
+  return [left, right]
+}
+
+/**
+ * @private
+ */
+function updateCurrentAttributes (currentAttributes, item) {
+  const value = item.value
+  const key = item.key
+  if (value === null) {
+    currentAttributes.delete(key)
+  } else {
+    currentAttributes.set(key, value)
+  }
+}
+
+/**
+ * @private
+ */
+function minimizeAttributeChanges (left, right, currentAttributes, attributes) {
+  // go right while attributes[right.key] === right.value (or right is deleted)
+  while (true) {
+    if (right === null) {
+      break
+    } else if (right._deleted === true) {
+      // continue
+    } else if (right.constructor === ItemFormat && (attributes[right.key] || null) === right.value) {
+      // found a format, update currentAttributes and continue
+      updateCurrentAttributes(currentAttributes, right)
+    } else {
+      break
+    }
+    left = right
+    right = right._right
+  }
+  return [left, right]
+}
+
+/**
+ * @private
+ */
+function insertAttributes (y, parent, left, right, attributes, currentAttributes) {
+  const negatedAttributes = new Map()
+  // insert format-start items
+  for (let key in attributes) {
+    const val = attributes[key]
+    const currentVal = currentAttributes.get(key)
+    if (currentVal !== val) {
+      // save negated attribute (set null if currentVal undefined)
+      negatedAttributes.set(key, currentVal || null)
+      let format = new ItemFormat()
+      format.key = key
+      format.value = val
+      integrateItem(format, parent, y, left, right)
+      left = format
+    }
+  }
+  return [left, right, negatedAttributes]
+}
+
+/**
+ * @private
+ */
+function insertText (y, text, parent, left, right, currentAttributes, attributes) {
+  for (let [key] of currentAttributes) {
+    if (attributes[key] === undefined) {
+      attributes[key] = null
+    }
+  }
+  [left, right] = minimizeAttributeChanges(left, right, currentAttributes, attributes)
+  let negatedAttributes
+  [left, right, negatedAttributes] = insertAttributes(y, parent, left, right, attributes, currentAttributes)
+  // insert content
+  let item
+  if (text.constructor === String) {
+    item = new ItemString()
+    item._content = text
+  } else {
+    item = new ItemEmbed()
+    item.embed = text
+  }
+  integrateItem(item, parent, y, left, right)
+  left = item
+  return insertNegatedAttributes(y, parent, left, right, negatedAttributes)
+}
+
+/**
+ * @private
+ */
+function formatText (y, length, parent, left, right, currentAttributes, attributes) {
+  [left, right] = minimizeAttributeChanges(left, right, currentAttributes, attributes)
+  let negatedAttributes
+  [left, right, negatedAttributes] = insertAttributes(y, parent, left, right, attributes, currentAttributes)
+  // iterate until first non-format or null is found
+  // delete all formats with attributes[format.key] != null
+  while (length > 0 && right !== null) {
+    if (right._deleted === false) {
+      switch (right.constructor) {
+        case ItemFormat:
+          const attr = attributes[right.key]
+          if (attr !== undefined) {
+            if (attr === right.value) {
+              negatedAttributes.delete(right.key)
+            } else {
+              negatedAttributes.set(right.key, right.value)
+            }
+            right._delete(y)
+          }
+          updateCurrentAttributes(currentAttributes, right)
+          break
+        case ItemEmbed:
+        case ItemString:
+          right._splitAt(y, length)
+          length -= right._length
+          break
+      }
+    }
+    left = right
+    right = right._right
+  }
+  return insertNegatedAttributes(y, parent, left, right, negatedAttributes)
+}
+
+/**
+ * @private
+ */
+function deleteText (y, length, parent, left, right, currentAttributes) {
+  while (length > 0 && right !== null) {
+    if (right._deleted === false) {
+      switch (right.constructor) {
+        case ItemFormat:
+          updateCurrentAttributes(currentAttributes, right)
+          break
+        case ItemEmbed:
+        case ItemString:
+          right._splitAt(y, length)
+          length -= right._length
+          right._delete(y)
+          break
+      }
+    }
+    left = right
+    right = right._right
+  }
+  return [left, right]
+}
+
+// TODO: In the quill delta representation we should also use the format {ops:[..]}
+/**
+ * The Quill Delta format represents changes on a text document with
+ * formatting information. For mor information visit {@link https://quilljs.com/docs/delta/|Quill Delta}
+ *
+ * @example
+ *   {
+ *     ops: [
+ *       { insert: 'Gandalf', attributes: { bold: true } },
+ *       { insert: ' the ' },
+ *       { insert: 'Grey', attributes: { color: '#cccccc' } }
+ *     ]
+ *   }
+ *
+ * @typedef {Array<Object>} Delta
+ */
+
+ /**
+  * Attributes that can be assigned to a selection of text.
+  *
+  * @example
+  *   {
+  *     bold: true,
+  *     font-size: '40px'
+  *   }
+  *
+  * @typedef {Object} TextAttributes
+  */
+
+/**
+ * Event that describes the changes on a YText type.
+ *
+ * @private
+ */
+class YTextEvent extends YArrayEvent {
+  constructor (ytext, remote, transaction) {
+    super(ytext, remote, transaction)
+    this._delta = null
+  }
+  // TODO: Should put this in a separate function. toDelta shouldn't be included
+  //       in every Yjs distribution
+  /**
+   * Compute the changes in the delta format.
+   *
+   * @return {Delta} A {@link https://quilljs.com/docs/delta/|Quill Delta}) that
+   *                 represents the changes on the document.
+   *
+   * @public
+   */
+  get delta () {
+    if (this._delta === null) {
+      const y = this.target._y
+      y.transact(() => {
+        let item = this.target._start
+        const delta = []
+        const added = this.addedElements
+        const removed = this.removedElements
+        this._delta = delta
+        let action = null
+        let attributes = {} // counts added or removed new attributes for retain
+        const currentAttributes = new Map() // saves all current attributes for insert
+        const oldAttributes = new Map()
+        let insert = ''
+        let retain = 0
+        let deleteLen = 0
+        const addOp = function addOp () {
+          if (action !== null) {
+            let op
+            switch (action) {
+              case 'delete':
+                op = { delete: deleteLen }
+                deleteLen = 0
+                break
+              case 'insert':
+                op = { insert }
+                if (currentAttributes.size > 0) {
+                  op.attributes = {}
+                  for (let [key, value] of currentAttributes) {
+                    if (value !== null) {
+                      op.attributes[key] = value
+                    }
+                  }
+                }
+                insert = ''
+                break
+              case 'retain':
+                op = { retain }
+                if (Object.keys(attributes).length > 0) {
+                  op.attributes = {}
+                  for (let key in attributes) {
+                    op.attributes[key] = attributes[key]
+                  }
+                }
+                retain = 0
+                break
+            }
+            delta.push(op)
+            action = null
+          }
+        }
+        while (item !== null) {
+          switch (item.constructor) {
+            case ItemEmbed:
+              if (added.has(item)) {
+                addOp()
+                action = 'insert'
+                insert = item.embed
+                addOp()
+              } else if (removed.has(item)) {
+                if (action !== 'delete') {
+                  addOp()
+                  action = 'delete'
+                }
+                deleteLen += 1
+              } else if (item._deleted === false) {
+                if (action !== 'retain') {
+                  addOp()
+                  action = 'retain'
+                }
+                retain += 1
+              }
+              break
+            case ItemString:
+              if (added.has(item)) {
+                if (action !== 'insert') {
+                  addOp()
+                  action = 'insert'
+                }
+                insert += item._content
+              } else if (removed.has(item)) {
+                if (action !== 'delete') {
+                  addOp()
+                  action = 'delete'
+                }
+                deleteLen += item._length
+              } else if (item._deleted === false) {
+                if (action !== 'retain') {
+                  addOp()
+                  action = 'retain'
+                }
+                retain += item._length
+              }
+              break
+            case ItemFormat:
+              if (added.has(item)) {
+                const curVal = currentAttributes.get(item.key) || null
+                if (curVal !== item.value) {
+                  if (action === 'retain') {
+                    addOp()
+                  }
+                  if (item.value === (oldAttributes.get(item.key) || null)) {
+                    delete attributes[item.key]
+                  } else {
+                    attributes[item.key] = item.value
+                  }
+                } else {
+                  item._delete(y)
+                }
+              } else if (removed.has(item)) {
+                oldAttributes.set(item.key, item.value)
+                const curVal = currentAttributes.get(item.key) || null
+                if (curVal !== item.value) {
+                  if (action === 'retain') {
+                    addOp()
+                  }
+                  attributes[item.key] = curVal
+                }
+              } else if (item._deleted === false) {
+                oldAttributes.set(item.key, item.value)
+                const attr = attributes[item.key]
+                if (attr !== undefined) {
+                  if (attr !== item.value) {
+                    if (action === 'retain') {
+                      addOp()
+                    }
+                    if (item.value === null) {
+                      attributes[item.key] = item.value
+                    } else {
+                      delete attributes[item.key]
+                    }
+                  } else {
+                    item._delete(y)
+                  }
+                }
+              }
+              if (item._deleted === false) {
+                if (action === 'insert') {
+                  addOp()
+                }
+                updateCurrentAttributes(currentAttributes, item)
+              }
+              break
+          }
+          item = item._right
+        }
+        addOp()
+        while (this._delta.length > 0) {
+          let lastOp = this._delta[this._delta.length - 1]
+          if (lastOp.retain !== undefined && lastOp.attributes === undefined) {
+            // retain delta's if they don't assign attributes
+            this._delta.pop()
+          } else {
+            break
+          }
+        }
+      })
+    }
+    return this._delta
+  }
+}
+
+/**
+ * Type that represents text with formatting information.
+ *
+ * This type replaces y-richtext as this implementation is able to handle
+ * block formats (format information on a paragraph), embeds (complex elements
+ * like pictures and videos), and text formats (**bold**, *italic*).
+ *
+ * @param {String} string The initial value of the YText.
+ */
+export default class YText extends YArray {
+  constructor (string) {
+    super()
+    if (typeof string === 'string') {
+      const start = new ItemString()
+      start._parent = this
+      start._content = string
+      this._start = start
+    }
+  }
+
+  /**
+   * @private
+   * Creates YMap Event and calls observers.
+   */
+  _callObserver (transaction, parentSubs, remote) {
+    this._callEventHandler(transaction, new YTextEvent(this, remote, transaction))
+  }
+
+  /**
+   * Returns the unformatted string representation of this YText type.
+   *
+   * @public
+   */
+  toString () {
+    let str = ''
+    let n = this._start
+    while (n !== null) {
+      if (!n._deleted && n._countable) {
+        str += n._content
+      }
+      n = n._right
+    }
+    return str
+  }
+
+  /**
+   * Apply a {@link Delta} on this shared YText type.
+   *
+   * @param {Delta} delta The changes to apply on this element.
+   *
+   * @public
+   */
+  applyDelta (delta) {
+    this._transact(y => {
+      let left = null
+      let right = this._start
+      const currentAttributes = new Map()
+      for (let i = 0; i < delta.length; i++) {
+        let op = delta[i]
+        if (op.insert !== undefined) {
+          ;[left, right] = insertText(y, op.insert, this, left, right, currentAttributes, op.attributes || {})
+        } else if (op.retain !== undefined) {
+          ;[left, right] = formatText(y, op.retain, this, left, right, currentAttributes, op.attributes || {})
+        } else if (op.delete !== undefined) {
+          ;[left, right] = deleteText(y, op.delete, this, left, right, currentAttributes)
+        }
+      }
+    })
+  }
+
+  /**
+   * Returns the Delta representation of this YText type.
+   *
+   * @return {Delta} The Delta representation of this type.
+   *
+   * @public
+   */
+  toDelta () {
+    let ops = []
+    let currentAttributes = new Map()
+    let str = ''
+    let n = this._start
+    function packStr () {
+      if (str.length > 0) {
+        // pack str with attributes to ops
+        let attributes = {}
+        let addAttributes = false
+        for (let [key, value] of currentAttributes) {
+          addAttributes = true
+          attributes[key] = value
+        }
+        let op = { insert: str }
+        if (addAttributes) {
+          op.attributes = attributes
+        }
+        ops.push(op)
+        str = ''
+      }
+    }
+    while (n !== null) {
+      if (!n._deleted) {
+        switch (n.constructor) {
+          case ItemString:
+            str += n._content
+            break
+          case ItemFormat:
+            packStr()
+            updateCurrentAttributes(currentAttributes, n)
+            break
+        }
+      }
+      n = n._right
+    }
+    packStr()
+    return ops
+  }
+
+  /**
+   * Insert text at a given index.
+   *
+   * @param {Integer} index The index at which to start inserting.
+   * @param {String} text The text to insert at the specified position.
+   * @param {TextAttributes} attributes Optionally define some formatting
+   *                                    information to apply on the inserted
+   *                                    Text.
+   *
+   * @public
+   */
+  insert (index, text, attributes = {}) {
+    if (text.length <= 0) {
+      return
+    }
+    this._transact(y => {
+      let [left, right, currentAttributes] = findPosition(this, index)
+      insertText(y, text, this, left, right, currentAttributes, attributes)
+    })
+  }
+
+  /**
+   * Inserts an embed at a index.
+   *
+   * @param {Integer} index The index to insert the embed at.
+   * @param {Object} embed The Object that represents the embed.
+   * @param {TextAttributes} attributes Attribute information to apply on the
+   *                                    embed
+   *
+   * @public
+   */
+  insertEmbed (index, embed, attributes = {}) {
+    if (embed.constructor !== Object) {
+      throw new Error('Embed must be an Object')
+    }
+    this._transact(y => {
+      let [left, right, currentAttributes] = findPosition(this, index)
+      insertText(y, embed, this, left, right, currentAttributes, attributes)
+    })
+  }
+
+  /**
+   * Deletes text starting from an index.
+   *
+   * @param {Integer} index Index at which to start deleting.
+   * @param {Integer} length The number of characters to remove. Defaults to 1.
+   *
+   * @public
+   */
+  delete (index, length) {
+    if (length === 0) {
+      return
+    }
+    this._transact(y => {
+      let [left, right, currentAttributes] = findPosition(this, index)
+      deleteText(y, length, this, left, right, currentAttributes)
+    })
+  }
+
+  /**
+   * Assigns properties to a range of text.
+   *
+   * @param {Integer} index The position where to start formatting.
+   * @param {Integer} length The amount of characters to assign properties to.
+   * @param {TextAttributes} attributes Attribute information to apply on the
+   *                                    text.
+   *
+   * @public
+   */
+  format (index, length, attributes) {
+    this._transact(y => {
+      let [left, right, currentAttributes] = findPosition(this, index)
+      if (right === null) {
+        return
+      }
+      formatText(y, length, this, left, right, currentAttributes, attributes)
+    })
+  }
+  // TODO: De-duplicate code. The following code is in every type.
+  /**
+   * Transform this YText to a readable format.
+   * Useful for logging as all Items implement this method.
+   *
+   * @private
+   */
+  _logString () {
+    return logItemHelper('YText', this)
+  }
+}
--- a/src/Types/YXml/YXmlElement.mjs
+++ b/src/Types/YXml/YXmlElement.mjs
@@ -0,0 +1,190 @@
+import YMap from '../YMap/YMap.mjs'
+import YXmlFragment from './YXmlFragment.mjs'
+import { createAssociation } from '../../Bindings/DomBinding/util.mjs'
+
+/**
+ * An YXmlElement imitates the behavior of a
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/Element|Dom Element}.
+ *
+ * * An YXmlElement has attributes (key value pairs)
+ * * An YXmlElement has childElements that must inherit from YXmlElement
+ *
+ * @param {String} nodeName Node name
+ */
+export default class YXmlElement extends YXmlFragment {
+  constructor (nodeName = 'UNDEFINED') {
+    super()
+    this.nodeName = nodeName.toUpperCase()
+  }
+
+  /**
+   * @private
+   * Creates an Item with the same effect as this Item (without position effect)
+   */
+  _copy () {
+    let struct = super._copy()
+    struct.nodeName = this.nodeName
+    return struct
+  }
+
+  /**
+   * @private
+   * Read the next Item in a Decoder and fill this Item with the read data.
+   *
+   * This is called when data is received from a remote peer.
+   *
+   * @param {Y} y The Yjs instance that this Item belongs to.
+   * @param {BinaryDecoder} decoder The decoder object to read data from.
+   */
+  _fromBinary (y, decoder) {
+    const missing = super._fromBinary(y, decoder)
+    this.nodeName = decoder.readVarString()
+    return missing
+  }
+
+  /**
+   * Transform the properties of this type to binary and write it to an
+   * BinaryEncoder.
+   *
+   * This is called when this Item is sent to a remote peer.
+   *
+   * @param {BinaryEncoder} encoder The encoder to write data to.
+   *
+   * @private
+   */
+  _toBinary (encoder) {
+    super._toBinary(encoder)
+    encoder.writeVarString(this.nodeName)
+  }
+
+  /**
+   * Integrates this Item into the shared structure.
+   *
+   * This method actually applies the change to the Yjs instance. In case of
+   * Item it connects _left and _right to this Item and calls the
+   * {@link Item#beforeChange} method.
+   *
+   * * Checks for nodeName
+   * * Sets domFilter
+   *
+   * @param {Y} y The Yjs instance
+   *
+   * @private
+   */
+  _integrate (y) {
+    if (this.nodeName === null) {
+      throw new Error('nodeName must be defined!')
+    }
+    super._integrate(y)
+  }
+
+  /**
+   * Returns the string representation of this YXmlElement.
+   * The attributes are ordered by attribute-name, so you can easily use this
+   * method to compare YXmlElements
+   *
+   * @return {String} The string representation of this type.
+   *
+   * @public
+   */
+  toString () {
+    const attrs = this.getAttributes()
+    const stringBuilder = []
+    const keys = []
+    for (let key in attrs) {
+      keys.push(key)
+    }
+    keys.sort()
+    const keysLen = keys.length
+    for (let i = 0; i < keysLen; i++) {
+      const key = keys[i]
+      stringBuilder.push(key + '="' + attrs[key] + '"')
+    }
+    const nodeName = this.nodeName.toLocaleLowerCase()
+    const attrsString = stringBuilder.length > 0 ? ' ' + stringBuilder.join(' ') : ''
+    return `<${nodeName}${attrsString}>${super.toString()}</${nodeName}>`
+  }
+
+  /**
+   * Removes an attribute from this YXmlElement.
+   *
+   * @param {String} attributeName The attribute name that is to be removed.
+   *
+   * @public
+   */
+  removeAttribute (attributeName) {
+    return YMap.prototype.delete.call(this, attributeName)
+  }
+
+  /**
+   * Sets or updates an attribute.
+   *
+   * @param {String} attributeName The attribute name that is to be set.
+   * @param {String} attributeValue The attribute value that is to be set.
+   *
+   * @public
+   */
+  setAttribute (attributeName, attributeValue) {
+    return YMap.prototype.set.call(this, attributeName, attributeValue)
+  }
+
+  /**
+   * Returns an attribute value that belongs to the attribute name.
+   *
+   * @param {String} attributeName The attribute name that identifies the
+   *                               queried value.
+   * @return {String} The queried attribute value.
+   *
+   * @public
+   */
+  getAttribute (attributeName) {
+    return YMap.prototype.get.call(this, attributeName)
+  }
+
+  /**
+   * Returns all attribute name/value pairs in a JSON Object.
+   *
+   * @return {Object} A JSON Object that describes the attributes.
+   *
+   * @public
+   */
+  getAttributes () {
+    const obj = {}
+    for (let [key, value] of this._map) {
+      if (!value._deleted) {
+        obj[key] = value._content[0]
+      }
+    }
+    return obj
+  }
+  // TODO: outsource the binding property.
+  /**
+   * Creates a Dom Element that mirrors this YXmlElement.
+   *
+   * @param {Document} [_document=document] The document object (you must define
+   *                                        this when calling this method in
+   *                                        nodejs)
+   * @param {Object<key:hookDefinition>} [hooks={}] Optional property to customize how hooks
+   *                                             are presented in the DOM
+   * @param {DomBinding} [binding] You should not set this property. This is
+   *                               used if DomBinding wants to create a
+   *                               association to the created DOM type.
+   * @return {Element} The {@link https://developer.mozilla.org/en-US/docs/Web/API/Element|Dom Element}
+   *
+   * @public
+   */
+  toDom (_document = document, hooks = {}, binding) {
+    const dom = _document.createElement(this.nodeName)
+    let attrs = this.getAttributes()
+    for (let key in attrs) {
+      dom.setAttribute(key, attrs[key])
+    }
+    this.forEach(yxml => {
+      dom.appendChild(yxml.toDom(_document, hooks, binding))
+    })
+    createAssociation(binding, dom, this)
+    return dom
+  }
+}
+
+YXmlFragment._YXmlElement = YXmlElement
--- a/src/Types/YXml/YXmlEvent.mjs
+++ b/src/Types/YXml/YXmlEvent.mjs
@@ -0,0 +1,47 @@
+import YEvent from '../../Util/YEvent.mjs'
+
+/**
+ * An Event that describes changes on a YXml Element or Yxml Fragment
+ *
+ * @protected
+ */
+export default class YXmlEvent extends YEvent {
+  /**
+   * @param {YType} target The target on which the event is created.
+   * @param {Set} subs The set of changed attributes. `null` is included if the
+   *                   child list changed.
+   * @param {Boolean} remote Whether this change was created by a remote peer.
+   * @param {Transaction} transaction The transaction instance with wich the
+   *                                  change was created.
+   */
+  constructor (target, subs, remote, transaction) {
+    super(target)
+    /**
+     * The transaction instance for the computed change.
+     * @type {Transaction}
+     */
+    this._transaction = transaction
+    /**
+     * Whether the children changed.
+     * @type {Boolean}
+     */
+    this.childListChanged = false
+    /**
+     * Set of all changed attributes.
+     * @type {Set}
+     */
+    this.attributesChanged = new Set()
+    /**
+     * Whether this change was created by a remote peer.
+     * @type {Boolean}
+     */
+    this.remote = remote
+    subs.forEach((sub) => {
+      if (sub === null) {
+        this.childListChanged = true
+      } else {
+        this.attributesChanged.add(sub)
+      }
+    })
+  }
+}
--- a/src/Types/YXml/YXmlFragment.mjs
+++ b/src/Types/YXml/YXmlFragment.mjs
@@ -0,0 +1,167 @@
+import { createAssociation } from '../../Bindings/DomBinding/util.mjs'
+import YXmlTreeWalker from './YXmlTreeWalker.mjs'
+
+import YArray from '../YArray/YArray.mjs'
+import YXmlEvent from './YXmlEvent.mjs'
+import { logItemHelper } from '../../MessageHandler/messageToString.mjs'
+
+/**
+ * Dom filter function.
+ *
+ * @callback domFilter
+ * @param {string} nodeName The nodeName of the element
+ * @param {Map} attributes The map of attributes.
+ * @return {boolean} Whether to include the Dom node in the YXmlElement.
+ */
+
+/**
+ * Define the elements to which a set of CSS queries apply.
+ * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors|CSS_Selectors}
+ *
+ * @example
+ *   query = '.classSelector'
+ *   query = 'nodeSelector'
+ *   query = '#idSelector'
+ *
+ * @typedef {string} CSS_Selector
+ */
+
+/**
+ * Represents a list of {@link YXmlElement}.and {@link YXmlText} types.
+ * A YxmlFragment is similar to a {@link YXmlElement}, but it does not have a
+ * nodeName and it does not have attributes. Though it can be bound to a DOM
+ * element - in this case the attributes and the nodeName are not shared.
+ *
+ * @public
+ */
+export default class YXmlFragment extends YArray {
+  /**
+   * Create a subtree of childNodes.
+   *
+   * @example
+   * const walker = elem.createTreeWalker(dom => dom.nodeName === 'div')
+   * for (let node in walker) {
+   *   // `node` is a div node
+   *   nop(node)
+   * }
+   *
+   * @param {Function} filter Function that is called on each child element and
+   *                          returns a Boolean indicating whether the child
+   *                          is to be included in the subtree.
+   * @return {TreeWalker} A subtree and a position within it.
+   *
+   * @public
+   */
+  createTreeWalker (filter) {
+    return new YXmlTreeWalker(this, filter)
+  }
+
+  /**
+   * Returns the first YXmlElement that matches the query.
+   * Similar to DOM's {@link querySelector}.
+   *
+   * Query support:
+   *   - tagname
+   * TODO:
+   *   - id
+   *   - attribute
+   *
+   * @param {CSS_Selector} query The query on the children.
+   * @return {?YXmlElement} The first element that matches the query or null.
+   *
+   * @public
+   */
+  querySelector (query) {
+    query = query.toUpperCase()
+    const iterator = new YXmlTreeWalker(this, element => element.nodeName === query)
+    const next = iterator.next()
+    if (next.done) {
+      return null
+    } else {
+      return next.value
+    }
+  }
+
+  /**
+   * Returns all YXmlElements that match the query.
+   * Similar to Dom's {@link querySelectorAll}.
+   *
+   * TODO: Does not yet support all queries. Currently only query by tagName.
+   *
+   * @param {CSS_Selector} query The query on the children
+   * @return {Array<YXmlElement>} The elements that match this query.
+   *
+   * @public
+   */
+  querySelectorAll (query) {
+    query = query.toUpperCase()
+    return Array.from(new YXmlTreeWalker(this, element => element.nodeName === query))
+  }
+
+  /**
+   * Creates YArray Event and calls observers.
+   *
+   * @private
+   */
+  _callObserver (transaction, parentSubs, remote) {
+    this._callEventHandler(transaction, new YXmlEvent(this, parentSubs, remote, transaction))
+  }
+
+  /**
+   * Get the string representation of all the children of this YXmlFragment.
+   *
+   * @return {string} The string representation of all children.
+   */
+  toString () {
+    return this.map(xml => xml.toString()).join('')
+  }
+
+  /**
+   * @private
+   * Unbind from Dom and mark this Item as deleted.
+   *
+   * @param {Y} y The Yjs instance
+   * @param {boolean} createDelete Whether to propagate a message that this
+   *                               Type was deleted.
+   * @param {boolean} [gcChildren=y._hasUndoManager===false] Whether to garbage
+   *                                         collect the children of this type.
+   *
+   * @private
+   */
+  _delete (y, createDelete, gcChildren) {
+    super._delete(y, createDelete, gcChildren)
+  }
+
+  /**
+   * Creates a Dom Element that mirrors this YXmlElement.
+   *
+   * @param {Document} [_document=document] The document object (you must define
+   *                                        this when calling this method in
+   *                                        nodejs)
+   * @param {Object<key:hookDefinition>} [hooks={}] Optional property to customize how hooks
+   *                                             are presented in the DOM
+   * @param {DomBinding} [binding] You should not set this property. This is
+   *                               used if DomBinding wants to create a
+   *                               association to the created DOM type
+   * @return {Element} The {@link https://developer.mozilla.org/en-US/docs/Web/API/Element|Dom Element}
+   *
+   * @public
+   */
+  toDom (_document = document, hooks = {}, binding) {
+    const fragment = _document.createDocumentFragment()
+    createAssociation(binding, fragment, this)
+    this.forEach(xmlType => {
+      fragment.insertBefore(xmlType.toDom(_document, hooks, binding), null)
+    })
+    return fragment
+  }
+  /**
+   * Transform this YXml Type to a readable format.
+   * Useful for logging as all Items and Delete implement this method.
+   *
+   * @private
+   */
+  _logString () {
+    return logItemHelper('YXml', this)
+  }
+}
--- a/src/Types/YXml/YXmlHook.mjs
+++ b/src/Types/YXml/YXmlHook.mjs
@@ -0,0 +1,108 @@
+import YMap from '../YMap/YMap.mjs'
+import { createAssociation } from '../../Bindings/DomBinding/util.mjs'
+
+/**
+ * You can manage binding to a custom type with YXmlHook.
+ *
+ * @public
+ */
+export default class YXmlHook extends YMap {
+  /**
+   * @param {String} hookName nodeName of the Dom Node.
+   */
+  constructor (hookName) {
+    super()
+    this.hookName = null
+    if (hookName !== undefined) {
+      this.hookName = hookName
+    }
+  }
+
+  /**
+   * Creates an Item with the same effect as this Item (without position effect)
+   *
+   * @private
+   */
+  _copy () {
+    const struct = super._copy()
+    struct.hookName = this.hookName
+    return struct
+  }
+
+  /**
+   * Creates a Dom Element that mirrors this YXmlElement.
+   *
+   * @param {Document} [_document=document] The document object (you must define
+   *                                        this when calling this method in
+   *                                        nodejs)
+   * @param {Object<key:hookDefinition>} [hooks] Optional property to customize how hooks
+   *                                             are presented in the DOM
+   * @param {DomBinding} [binding] You should not set this property. This is
+   *                               used if DomBinding wants to create a
+   *                               association to the created DOM type
+   * @return {Element} The {@link https://developer.mozilla.org/en-US/docs/Web/API/Element|Dom Element}
+   *
+   * @public
+   */
+  toDom (_document = document, hooks = {}, binding) {
+    const hook = hooks[this.hookName]
+    let dom
+    if (hook !== undefined) {
+      dom = hook.createDom(this)
+    } else {
+      dom = document.createElement(this.hookName)
+    }
+    dom.setAttribute('data-yjs-hook', this.hookName)
+    createAssociation(binding, dom, this)
+    return dom
+  }
+
+  /**
+   * Read the next Item in a Decoder and fill this Item with the read data.
+   *
+   * This is called when data is received from a remote peer.
+   *
+   * @param {Y} y The Yjs instance that this Item belongs to.
+   * @param {BinaryDecoder} decoder The decoder object to read data from.
+   *
+   * @private
+   */
+  _fromBinary (y, decoder) {
+    const missing = super._fromBinary(y, decoder)
+    this.hookName = decoder.readVarString()
+    return missing
+  }
+
+  /**
+   * Transform the properties of this type to binary and write it to an
+   * BinaryEncoder.
+   *
+   * This is called when this Item is sent to a remote peer.
+   *
+   * @param {BinaryEncoder} encoder The encoder to write data to.
+   *
+   * @private
+   */
+  _toBinary (encoder) {
+    super._toBinary(encoder)
+    encoder.writeVarString(this.hookName)
+  }
+
+  /**
+   * Integrate this type into the Yjs instance.
+   *
+   * * Save this struct in the os
+   * * This type is sent to other client
+   * * Observer functions are fired
+   *
+   * @param {Y} y The Yjs instance
+   *
+   * @private
+   */
+  _integrate (y) {
+    if (this.hookName === null) {
+      throw new Error('hookName must be defined!')
+    }
+    super._integrate(y)
+  }
+}
--- a/src/Types/YXml/YXmlText.mjs
+++ b/src/Types/YXml/YXmlText.mjs
@@ -0,0 +1,46 @@
+import YText from '../YText/YText.mjs'
+import { createAssociation } from '../../Bindings/DomBinding/util.mjs'
+
+/**
+ * Represents text in a Dom Element. In the future this type will also handle
+ * simple formatting information like bold and italic.
+ *
+ * @param {String} arg1 Initial value.
+ */
+export default class YXmlText extends YText {
+  /**
+   * Creates a Dom Element that mirrors this YXmlText.
+   *
+   * @param {Document} [_document=document] The document object (you must define
+   *                                        this when calling this method in
+   *                                        nodejs)
+   * @param {Object<key:hookDefinition>} [hooks] Optional property to customize how hooks
+   *                                             are presented in the DOM
+   * @param {DomBinding} [binding] You should not set this property. This is
+   *                               used if DomBinding wants to create a
+   *                               association to the created DOM type.
+   * @return {Element} The {@link https://developer.mozilla.org/en-US/docs/Web/API/Element|Dom Element}
+   *
+   * @public
+   */
+  toDom (_document = document, hooks, binding) {
+    const dom = _document.createTextNode(this.toString())
+    createAssociation(binding, dom, this)
+    return dom
+  }
+
+  /**
+   * Mark this Item as deleted.
+   *
+   * @param {Y} y The Yjs instance
+   * @param {boolean} createDelete Whether to propagate a message that this
+   *                               Type was deleted.
+   * @param {boolean} [gcChildren=y._hasUndoManager===false] Whether to garbage
+   *                                         collect the children of this type.
+   *
+   * @private
+   */
+  _delete (y, createDelete, gcChildren) {
+    super._delete(y, createDelete, gcChildren)
+  }
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Kevin Jahns	2d897f1844	add function to create lots of rooms	2018-06-07 16:36:42 +02:00
Kevin Jahns	fb2f9bc493	add client-server updateCounter support to sync all persisted rooms	2018-06-04 17:35:39 +02:00
Kevin Jahns	6f9ae0c4fc	save current state at the beginning in YIndexedDB	2018-06-03 22:39:22 +02:00
Kevin Jahns	9df20fac8a	added YIndexedDB	2018-06-03 21:58:51 +02:00
Kevin Jahns	a1fb1a6258	add persistence decoder	2018-06-02 22:16:12 +02:00
Kevin Jahns	417d0ef3b5	save state in FilePersistence	2018-06-02 13:33:04 +02:00
Kevin Jahns	9be256231b	enable gc in demo	2018-05-23 16:15:11 +02:00
Kevin Jahns	c122bdc750	BinaryEncoder writes directly to ArrayBuffer, improves memory consumption	2018-05-23 16:06:38 +02:00
Kevin Jahns	4ef36ab81c	fix tests	2018-05-23 14:16:54 +02:00
Kevin Jahns	cccc0e1015	implemented experimental websockets-connector	2018-05-23 14:01:00 +02:00
Kevin Jahns	684d38d6c8	make compatible with webpack and less sophisticated module bundlers	2018-05-13 13:07:24 +02:00
Kevin Jahns	44fa064eb2	Merge branch 'master' of github.com:y-js/yjs	2018-05-12 16:43:28 +02:00
Kevin Jahns	9b6fffd880	Add rollup dependency - closes #110	2018-05-12 16:43:05 +02:00
Kevin Jahns	e9993b2643	Merge pull request #111 from larskarbo/patch-1 (DOCS) Remove y-array duplicates	2018-05-12 16:41:14 +02:00
Kevin Jahns	762e9e8a3a	do not log _start in logItemHelper. Fixes #114	2018-05-12 15:42:31 +02:00
Kevin Jahns	6ddeb788c7	Merge branch 'master' of github.com:y-js/yjs	2018-05-09 16:28:07 +02:00
Kevin Jahns	b9245f323c	prefer !== undefined check instead of hasOwnProperty	2018-05-09 16:27:55 +02:00
Kevin Jahns	c0e630b635	prefer parentElement instead of parentNode	2018-05-09 14:42:24 +02:00
Kevin Jahns	e56457a0ef	13.0.0-60	2018-05-08 13:46:27 +02:00
Kevin Jahns	ca13849828	fix domBinding infinite loop	2018-05-08 13:45:51 +02:00
Kevin Jahns	92c2fbd6d3	remove debug dependency	2018-05-07 11:52:37 +02:00
Kevin Jahns	65b8921f05	13.0.0-59	2018-05-07 11:45:39 +02:00
Kevin Jahns	1ace7f4b73	fix parentNode binding in case parent doesn't fire MO	2018-05-07 11:44:22 +02:00
Kevin Jahns	6336064516	13.0.0-58	2018-05-05 15:33:53 +02:00
Kevin Jahns	49d2e42b41	fix missing dom-binding - still investigating	2018-05-05 15:33:16 +02:00
Kevin Jahns	c098e8e745	implement scroll-fixer	2018-05-05 14:47:59 +02:00
Kevin Jahns	38558a7fad	13.0.0-57	2018-05-02 18:42:56 +02:00
Kevin Jahns	bdb3782f8f	add option to disable gc (compatible with older versions)	2018-05-02 18:42:18 +02:00
Kevin Jahns	bc32f7348e	13.0.0-56	2018-04-27 18:43:24 +02:00
Kevin Jahns	09a94f053e	merge with master	2018-04-27 18:39:34 +02:00
Kevin Jahns	0df0079fa3	Merge branch 'master' of github.com:y-js/yjs	2018-04-27 18:33:51 +02:00
Kevin Jahns	a54d826d6d	bugfixes	2018-04-27 18:33:28 +02:00
Kevin Jahns	99f92cb9a0	fix filtering	2018-04-26 16:01:17 +02:00
Kevin Jahns	e788ad1333	fix hook binding	2018-04-26 14:07:12 +02:00
Kevin Jahns	1fe37c565e	hooks port to domBinding	2018-04-26 13:26:21 +02:00
Lars Karbo	ed2273e2ed	Remove y-array duplicates	2018-04-24 12:59:51 -07:00
Kevin Jahns	94933a704d	correctly handle gc with UndoManager and un-merge when syncing	2018-04-23 13:25:40 +02:00
Kevin Jahns	ef6eb08335	fix most gc bugs - test suite running again	2018-04-19 18:28:25 +02:00
Kevin Jahns	d915c8dd13	prelim gc	2018-04-03 13:28:24 +02:00
Kevin Jahns	32207cbca0	implement new mark deleted / gc approach	2018-03-29 16:36:34 +02:00
Kevin Jahns	135c6d31be	documentation and fix tests	2018-03-29 11:58:02 +02:00
Kevin Jahns	61149b458a	less duplicate code	2018-03-23 05:22:45 +01:00
Kevin Jahns	ba97bfdd9e	remove fundraiser campaign	2018-03-23 04:44:26 +01:00
Kevin Jahns	689bca8602	Merge remote-tracking branch 'origin' into v13-doc	2018-03-23 04:40:08 +01:00
Kevin Jahns	6dd43cde17	cleanup docs	2018-03-23 04:39:32 +01:00
Kevin Jahns	026675b438	separate dom binding	2018-03-23 01:55:47 +01:00
Kevin Jahns	941a22b257	13.0.0-55	2018-03-14 18:52:49 -07:00
Kevin Jahns	4aa41b98a9	fix dom filtering bug	2018-03-14 18:51:48 -07:00
Kevin Jahns	acf443aacb	reworking bindings	2018-03-12 03:36:37 +01:00
Kevin Jahns	aa8c934833	Add fundraiser campaign	2018-03-06 05:27:03 +01:00
Kevin Jahns	814af5a3d7	fix import locations	2018-03-06 05:22:18 +01:00
Kevin Jahns	bbc207aaa6	restructer and move to esdoc	2018-03-06 03:17:50 +01:00
Kevin Jahns	a9b610479d	big documentation update - all public functions and classes are documented now	2018-03-05 03:12:04 +01:00
Kevin Jahns	079de07eff	13.0.0-54	2018-03-01 16:45:25 +01:00
Kevin Jahns	54453e87fa	fix consecutive undo,redo,undo,redo.. (abc test)	2018-03-01 16:44:26 +01:00
Kevin Jahns	1b0e3659c3	undo fixes for consecutive undo-redo	2018-03-01 13:50:01 +01:00
Kevin Jahns	dc22a79ac4	properly unregister event when binding is destroyed	2018-02-27 03:52:40 +01:00
Kevin Jahns	384a4b72b0	add quill-cursors example	2018-02-26 17:24:28 +01:00
Kevin Jahns	f35c056bde	fix some tests	2018-02-26 03:23:22 +01:00
Kevin Jahns	250050e83b	Merge remote-tracking branch 'origin' into y-richtext-rewrite	2018-02-26 02:19:08 +01:00
Kevin Jahns	248d08be30	implement quill binding for y-text	2018-02-26 02:18:39 +01:00
Kevin Jahns	641f426339	13.0.0-53	2018-02-25 02:31:59 +01:00
Kevin Jahns	fcbca65d8f	fromBinary is a transaction	2018-02-25 02:31:20 +01:00
Kevin Jahns	5f8ae0dd43	13.0.0-52	2018-02-18 19:20:00 +01:00
Kevin Jahns	de14fe0f3e	fix getAttribute vs attributes.value fixes y-js/y-xml#8	2018-02-18 18:58:49 +01:00
Kevin Jahns	5e4b071693	actually use clock in undo-manager	2018-02-15 18:58:43 +01:00
Kevin Jahns	937de2c59f	fix fast undo-redo bug	2018-02-15 18:28:53 +01:00
Kevin Jahns	f1f1bff901	preliminary undo-redo fixes	2018-02-15 17:58:14 +01:00
Kevin Jahns	da748a78f4	start rewriting y-richtext	2018-02-15 01:25:08 +01:00
Kevin Jahns	4855b2d590	13.0.0-51	2018-02-07 14:08:43 +01:00
Kevin Jahns	908ce31e2f	Merge branch 'master' of github.com:y-js/yjs	2018-02-07 14:08:07 +01:00
Kevin Jahns	e4d4c23f0b	bugfix - persist deletes when syncing	2018-02-07 14:07:57 +01:00
Kevin Jahns	fc500a8247	Merge pull request #94 from LukasDrgon/patch-3 Add CDN usage	2018-01-31 20:36:26 -08:00
Kevin Jahns	4b84541d76	13.0.0-50	2018-01-30 20:12:58 -08:00
Kevin Jahns	a3ab42c157	implemnt mutual exclude pattern directly in Persistence.js	2018-01-30 20:11:59 -08:00
Kevin Jahns	bbd3317d62	13.0.0-49	2018-01-30 15:53:33 -08:00
Kevin Jahns	5d3922cb64	fix undo-redo	2018-01-30 15:52:36 -08:00
Kevin Jahns	a81a2cd553	13.0.0-48	2018-01-29 16:41:52 -08:00
Kevin Jahns	c0d24bdba4	lint	2018-01-29 16:41:27 -08:00
Kevin Jahns	40e913e9c5	add toBinary and fromBinary to Y.utils	2018-01-29 16:39:09 -08:00
Kevin Jahns	94f6a0fd9c	implement Y.*Binding approach	2018-01-29 11:55:28 -08:00
Kevin Jahns	41a88dbc43	fix examples for Yjs@13	2018-01-25 17:28:33 -07:00
Kevin Jahns	1d4f283955	13.0.0-47	2018-01-18 18:44:56 +01:00
Kevin Jahns	fc3a4c376c	implement when-handler	2018-01-18 18:44:20 +01:00
Lukas Drgon	acb0affa33	Add CDN usage	2018-01-17 22:03:49 +01:00
Kevin Jahns	0b510b64a3	persistence updates + make Persistence.init async	2018-01-16 16:13:47 +01:00
Kevin Jahns	c8f0cf5556	13.0.0-46	2018-01-10 00:20:03 +01:00
Kevin Jahns	11a4271fd1	13.0.0-45	2018-01-10 00:18:50 +01:00
Kevin Jahns	c7670915c7	Merge branch 'master' of github.com:y-js/yjs	2018-01-10 00:17:34 +01:00
Kevin Jahns	eb2d596538	implement mutualExclude factory	2018-01-10 00:17:26 +01:00
Kevin Jahns	48e17ea1a7	13.0.0-44	2018-01-10 00:16:33 +01:00
Kevin Jahns	1a22fdd45e	persistence improvements	2018-01-10 00:11:25 +01:00
Kevin Jahns	07cf0b3436	export AbstractPersistence	2018-01-08 17:30:30 +01:00
Kevin Jahns	5a68b9f4ad	loaded event when loaded from persistence adapter	2018-01-08 02:28:46 +01:00
Kevin Jahns	445dd3e0da	fix several y-xml bugs	2018-01-03 03:50:27 +01:00
Kevin Jahns	0ba97d78f8	better relative cursor positions for text editing - decrease number of generated messages for cursor	2017-12-31 16:14:02 +01:00
Kevin Jahns	fc5be5c7cc	fix empty string insertion bug	2017-12-31 14:49:20 +01:00
Kevin Jahns	f2debc150c	reimplement persistence approach	2017-12-24 03:18:00 +01:00
Kevin Jahns	08f37a86e3	13.0.0-43	2017-12-21 16:06:29 +01:00
Kevin Jahns	f5d17e6236	filter y-xml when domFilter is set	2017-12-21 16:05:50 +01:00
Kevin Jahns	8f3bd7170a	13.0.0-42	2017-12-19 17:39:01 +01:00
Kevin Jahns	5586334549	fix initial content in y-array	2017-12-19 17:37:04 +01:00
Kevin Jahns	24c1e4dcc8	13.0.0-41	2017-12-14 14:30:02 +01:00
Kevin Jahns	d61bbecf4e	fix tree walker on YXmlFragment	2017-12-14 14:29:16 +01:00
Kevin Jahns	85492ad2e0	fix drawing example. Add drawing hook for y-xml	2017-12-13 12:49:34 +01:00
Kevin Jahns	02253f9a8d	fix log outputs	2017-12-13 10:28:19 +01:00
Kevin Jahns	8105bef1af	work on drawing demo	2017-12-06 19:20:52 -08:00
Kevin Jahns	4efa16e2dd	13.0.0-40	2017-12-05 21:50:34 -08:00
Kevin Jahns	ad44f59def	implement new dom update algorithm	2017-12-05 21:50:00 -08:00
Kevin Jahns	9c471ea24d	13.0.0-39	2017-12-05 17:06:01 -08:00
Kevin Jahns	d9e76014f5	fix remaining cursor relocation issues	2017-12-05 17:05:12 -08:00
Kevin Jahns	4091b7d004	13.0.0-38	2017-12-05 00:53:25 -08:00
Kevin Jahns	dfc183643d	support data-yjs-hook attribute for yjs hooks	2017-12-05 00:52:52 -08:00
Kevin Jahns	cf8698f2b6	13.0.0-37	2017-12-02 01:45:55 -08:00
Kevin Jahns	3595f14da7	fix insert in y-text	2017-12-02 01:45:22 -08:00
Kevin Jahns	c6e671b1d5	13.0.0-36	2017-11-30 18:39:17 -08:00
Kevin Jahns	e4c10fd6b3	handle xmlhook in mutation observer	2017-11-30 18:38:12 -08:00
Kevin Jahns	e70aa09f88	Implement YXml element hooks (based on _yjsHook property)	2017-11-29 17:16:06 -08:00
Kevin Jahns	7808b143da	13.0.0-35	2017-11-28 17:38:31 -08:00
Kevin Jahns	b35092928e	fix user selection issues	2017-11-28 17:37:15 -08:00
Kevin Jahns	b7dbcf69d3	13.0.0-34	2017-11-26 23:24:41 -08:00
Kevin Jahns	377df18788	prevent updating cursor position if not necessary	2017-11-26 23:23:29 -08:00
Kevin Jahns	26a323733d	13.0.0-33	2017-11-26 14:42:59 -08:00
Kevin Jahns	d0d1015074	filter remote changes in YXml*	2017-11-26 14:42:06 -08:00
Kevin Jahns	2e3240b379	13.0.0-32	2017-11-14 21:31:11 -08:00
Kevin Jahns	2558652356	fix attribute filter (it used to filter everything)	2017-11-14 21:19:39 -08:00
Kevin Jahns	783cbd63fc	13.0.0-31	2017-11-14 20:44:12 -08:00
Kevin Jahns	41be80e751	fix y-xml server environment	2017-11-14 20:43:30 -08:00
Kevin Jahns	3d6050d8a2	13.0.0-30	2017-11-12 13:37:37 -08:00
Kevin Jahns	3d5ba7b4cc	fix the case that a new transaction starts in an event listener (afterTransaction, observe, observeDeep)	2017-11-12 13:37:06 -08:00
Kevin Jahns	415b66607c	fixed filtering	2017-11-10 19:04:00 -08:00
Kevin Jahns	05cd1d0575	13.0.0-29	2017-11-10 18:46:10 -08:00
Kevin Jahns	4edc22bedb	remove prematurely commited dom-filter update	2017-11-10 18:45:41 -08:00
Kevin Jahns	16f84c67d5	13.0.0-28	2017-11-10 18:41:39 -08:00
Kevin Jahns	290d3c8ffe	support undefined as an attribute value	2017-11-10 18:41:10 -08:00
Kevin Jahns	c51e8b46c2	13.0.0-27	2017-11-10 12:55:05 -08:00
Kevin Jahns	0cda1630d2	fix path bugs	2017-11-10 12:54:33 -08:00
Kevin Jahns	d232b883e9	13.0.0-26	2017-11-09 17:32:45 -08:00
Kevin Jahns	3a0e65403f	fix undo scope	2017-11-09 17:31:58 -08:00
Kevin Jahns	224fff93ba	13.0.0-25	2017-11-08 17:31:50 -08:00
Kevin Jahns	4f55e8c655	fix event.path by using event.currentTarget	2017-11-08 17:31:12 -08:00
Kevin Jahns	a08624c04e	implemented tree-walker	2017-11-08 13:40:36 -08:00
Kevin Jahns	9b00929172	13.0.0-24	2017-11-08 00:02:24 -08:00
Kevin Jahns	b94267e14a	prevent mangling of Types and other useful data	2017-11-08 00:01:18 -08:00
Kevin Jahns	e696304845	13.0.0-23	2017-11-07 22:52:33 -08:00
Kevin Jahns	d503c9d640	lint	2017-11-07 22:51:46 -08:00
Kevin Jahns	e5f289506f	observeDeep receives array of events	2017-11-07 22:44:43 -08:00
Kevin Jahns	c453593ee7	y-xml: hand over fake document if necessary	2017-11-07 21:06:29 -08:00
Kevin Jahns	5ed1818de5	fix selection RootID name	2017-11-07 20:47:00 -08:00
Kevin Jahns	0310500c4e	add YEvent	2017-11-07 20:34:44 -08:00
Kevin Jahns	b7defc32e8	fix selecting multiple paragraphs	2017-11-07 20:28:31 -08:00
Kevin Jahns	dbdd49af23	fix relativePosition if startof is a root type	2017-11-07 20:10:01 -08:00
Kevin Jahns	b7c05ba133	fix YMap.keys()	2017-11-07 19:56:03 -08:00
Kevin Jahns	9298903bdb	filter out attribute events for YXmlFragment	2017-11-07 19:31:57 -08:00
Kevin Jahns	d59e30b239	implement generic YEvent with path property	2017-11-07 19:18:41 -08:00
Kevin Jahns	d29b83a457	improve backwards-compatibility	2017-11-07 18:31:04 -08:00
Kevin Jahns	0208d83f91	implemented undo 🙌	2017-10-30 11:47:56 +01:00
Kevin Jahns	c545118637	fixed selection handler befor/after transactions	2017-10-28 23:02:48 +02:00
Kevin Jahns	c619aa33d9	fixed inserting large xml portions	2017-10-27 22:28:42 +02:00
Kevin Jahns	1dea8f394f	unbind yxml immediately when deleted	2017-10-26 21:02:25 +02:00
Kevin Jahns	5cf8d20cf6	delete child if parent is deleted	2017-10-26 20:53:27 +02:00
Kevin Jahns	74f9ceab01	fixed dom filtering tests	2017-10-26 20:24:09 +02:00
Kevin Jahns	ca81cdf3be	fixed xml tests	2017-10-26 19:50:43 +02:00
Kevin Jahns	96c6aa2751	fixed ds syncing bug	2017-10-26 19:12:33 +02:00
Kevin Jahns	e6b5e258fb	several DS fixes (logging works now)	2017-10-26 16:22:35 +02:00
Kevin Jahns	e8170a09a7	fixed all insert tests	2017-10-26 14:40:21 +02:00
Kevin Jahns	9d1ad8cb28	fix item-splitting	2017-10-24 16:41:19 +02:00
Kevin Jahns	d859fd68fe	fixed several random tests	2017-10-23 22:43:41 +02:00
Kevin Jahns	2b7d2ed1e6	implemented logTable method on data stores	2017-10-22 23:50:49 +02:00
Kevin Jahns	142a5ada60	fix some tests, implement event classes for types, and re-implement logging	2017-10-22 19:13:12 +02:00
Kevin Jahns	c92f987496	fix some tests, implement event classes for types, and re-implement logging	2017-10-22 19:12:50 +02:00
Kevin Jahns	755c9eb16e	implemented xml type for new event system	2017-10-19 17:36:28 +02:00
Kevin Jahns	1311c7a0d8	fix first y-array test	2017-10-16 04:53:12 +02:00
Kevin Jahns	4eec8ecdd3	fix encoding and rb tree tests	2017-10-15 12:21:14 +02:00
Kevin Jahns	0e426f8928	fix compiling issues	2017-10-14 23:03:24 +02:00
Kevin Jahns	82015d5a37	refactor the whole damn thing	2017-10-11 03:41:54 +02:00
				`@@ -0,0 +1,2 @@`

				`export default class AbstractPersistence {}`