v13.0.0-43 -- distribution files

examples/drawing/index.html

@@ -12,12 +12,8 @@
   </style>
   <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="../yjs-dist.js"></script>
-  <script src="../../../y-array/y-array.js"></script>
+  <script src="../bower_components/d3/d3.min.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="./index.js"></script>
 </body>
 </html>

examples/drawing/index.js

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

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

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

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

@@ -0,0 +1,134 @@
+/* global Y, d3 */
+
+window.onload = function () {
+  window.yXmlType.bindToDom(document.body)
+}
+
+window.addMagicDrawing = function addMagicDrawing () {
+  let mt = document.createElement('magic-drawing')
+  mt.dataset.yjsHook = '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.dataset.yjsHook = '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
+  }
+}
+
+Y.XmlHook.addHook('magic-drawing', {
+  fillType: function (dom, type) {
+    initDrawingBindings(type, dom)
+  },
+  createDom: function (type) {
+    const dom = document.createElement('magic-drawing')
+    initDrawingBindings(type, dom)
+    return dom
+  }
+})
+
+// initialize a shared object. This function call returns a promise!
+let y = new Y({
+  connector: {
+    name: 'websockets-client',
+    url: 'http://127.0.0.1:1234',
+    room: 'html-editor-example6'
+    // maxBufferLength: 100
+  }
+})
+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()
+  }
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "yjs",
-  "version": "13.0.0-39",
+  "version": "13.0.0-43",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yjs",
-  "version": "13.0.0-39",
+  "version": "13.0.0-43",
   "description": "A framework for real-time p2p shared editing on any data",
   "main": "./y.node.js",
   "browser": "./y.js",

rollup.test.js

@@ -11,12 +11,12 @@ export default {
     format: 'umd'
   },
   plugins: [
+    multiEntry(),
     nodeResolve({
       main: true,
       module: true,
       browser: true
     }),
-    commonjs(),
+    commonjs()
-    multiEntry()
   ]
 }

src/Type/YArray.js

@@ -5,15 +5,38 @@ import { logID } from '../MessageHandler/messageToString.js'
 import YEvent from '../Util/YEvent.js'
 
 class YArrayEvent extends YEvent {
-  constructor (yarray, remote) {
+  constructor (yarray, remote, transaction) {
     super(yarray)
     this.remote = remote
+    this._transaction = transaction
+  }
+  get addedElements () {
+    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)
+      }
+    })
+    return addedElements
+  }
+  get removedElements () {
+    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)
+      }
+    })
+    return removedElements
   }
 }
 
 export default class YArray extends Type {
   _callObserver (transaction, parentSubs, remote) {
-    this._callEventHandler(transaction, new YArrayEvent(this, remote))
+    this._callEventHandler(transaction, new YArrayEvent(this, remote, transaction))
   }
   get (pos) {
     let n = this._start
@@ -184,8 +207,12 @@ export default class YArray extends Type {
           prevJsonIns._content.push(c)
         }
       }
-      if (prevJsonIns !== null && y !== null) {
+      if (prevJsonIns !== null) {
-        prevJsonIns._integrate(y)
+        if (y !== null) {
+          prevJsonIns._integrate(y)
+        } else if (prevJsonIns._left === null) {
+          this._start = prevJsonIns
+        }
       }
     })
   }
@@ -214,6 +241,17 @@ export default class YArray extends Type {
     }
     this.insertAfter(left, content)
   }
+  push (content) {
+    let n = this._start
+    let lastUndeleted = null
+    while (n !== null) {
+      if (!n._deleted) {
+        lastUndeleted = n
+      }
+      n = n._right
+    }
+    this.insertAfter(lastUndeleted, content)
+  }
   _logString () {
     const left = this._left !== null ? this._left._lastId : null
     const origin = this._origin !== null ? this._origin._lastId : null

src/Type/y-xml/YXmlFragment.js

@@ -55,7 +55,7 @@ class YXmlTreeWalker {
       }
     }
     do {
-      if (!n._deleted && n.constructor === YXmlFragment._YXmlElement && n._start !== null) {
+      if (!n._deleted && (n.constructor === YXmlFragment._YXmlElement || n.constructor === YXmlFragment) && n._start !== null) {
         // walk down in the tree
         n = n._start
       } else {
@@ -143,6 +143,23 @@ export default class YXmlFragment extends YArray {
   }
   setDomFilter (f) {
     this._domFilter = f
+    let attributes = new Map()
+    if (this.getAttributes !== undefined) {
+      let attrs = this.getAttributes()
+      for (let key in attrs) {
+        attributes.set(key, attrs[key])
+      }
+    }
+    let result = this._domFilter(this.nodeName, new Map(attributes))
+    if (result === null) {
+      this._delete(this._y)
+    } else {
+      attributes.forEach((value, key) => {
+        if (!result.has(key)) {
+          this.removeAttribute(key)
+        }
+      })
+    }
     this.forEach(xml => {
       xml.setDomFilter(f)
     })
@@ -254,9 +271,7 @@ export default class YXmlFragment extends YArray {
     })
     // Apply Y.Xml events to dom
     this.observeDeep(events => {
-      this._mutualExclude(() => {
+      reflectChangesOnDom.call(this, events, _document)
-        reflectChangesOnDom.call(this, events, _document)
-      })
     })
     // Apply Dom changes on Y.Xml
     if (typeof MutationObserver !== 'undefined') {

src/Type/y-xml/YXmlHook.js

@@ -24,6 +24,11 @@ export default class YXmlHook extends YMap {
     }
     return this._dom
   }
+  _unbindFromDom () {
+    this._dom._yxml = null
+    this._yxml = null
+    // TODO: cleanup hook?
+  }
   _fromBinary (y, decoder) {
     const missing = super._fromBinary(y, decoder)
     this.hookName = decoder.readVarString()

src/Type/y-xml/selection.js

@@ -68,7 +68,6 @@ export function afterTransactionSelectionFixer (y, transaction, remote) {
     }
   }
   if (shouldUpdate) {
-    console.info('updating selection!!')
     browserSelection.setBaseAndExtent(
       anchorNode,
       anchorOffset,

src/Type/y-xml/utils.js

@@ -174,7 +174,7 @@ export function reflectChangesOnDom (events, _document) {
         // let anchorViewPosition = getAnchorViewPosition(yxml._scrollElement)
         if (yxml.constructor === YXmlText) {
           yxml._dom.nodeValue = yxml.toString()
-        } else {
+        } else if (event.attributesChanged !== undefined) {
           // update attributes
           event.attributesChanged.forEach(attributeName => {
             const value = yxml.getAttribute(attributeName)
@@ -193,19 +193,27 @@ export function reflectChangesOnDom (events, _document) {
            *       only in the attributes (above)
            */
           if (event.childListChanged && yxml.constructor !== YXmlHook) {
-            // create fragment of undeleted nodes
+            let currentChild = dom.firstChild
-            const fragment = _document.createDocumentFragment()
             yxml.forEach(function (t) {
-              fragment.appendChild(t.getDom(_document))
+              let expectedChild = t.getDom(_document)
+              if (expectedChild.parentNode === dom) {
+                // is already attached to the dom. Look for it
+                while (currentChild !== expectedChild) {
+                  let del = currentChild
+                  currentChild = currentChild.nextSibling
+                  dom.removeChild(del)
+                }
+                currentChild = currentChild.nextSibling
+              } else {
+                // this dom is not yet attached to dom
+                dom.insertBefore(expectedChild, currentChild)
+              }
             })
-            // remove remainding nodes
+            while (currentChild !== null) {
-            let lastChild = dom.lastChild
+              let tmp = currentChild.nextSibling
-            while (lastChild !== null) {
+              dom.removeChild(currentChild)
-              dom.removeChild(lastChild)
+              currentChild = tmp
-              lastChild = dom.lastChild
             }
-            // insert fragment of undeleted nodes
-            dom.appendChild(fragment)
           }
         }
         /* TODO: smartscrolling

test/y-xml.tests.js

@@ -280,7 +280,6 @@ test('deep element insert', async function xml16 (t) {
   deepElement.append(boldElement)
   deepElement.append(attrElement)
   dom0.append(deepElement)
-  console.log(dom0.outerHTML)
   let str0 = dom0.outerHTML
   await flushAll(t, users)
   let str1 = dom1.outerHTML
@@ -340,7 +339,6 @@ test('Filtering remote changes', async function xmlFilteringRemote (t) {
   // check dom
   paragraph.getDom().setAttribute('malicious', 'true')
   span.getDom().setAttribute('malicious', 'true')
-  console.log(xml0.toString())
   // check incoming attributes
   xml1.get(0).get(0).setAttribute('malicious', 'true')
   xml1.insert(0, [new Y.XmlElement('hideMe')])

y.node.js

@@ -1,7 +1,7 @@
 
 /**
  * yjs - A framework for real-time p2p shared editing on any data
- * @version v13.0.0-39
+ * @version v13.0.0-43
  * @license MIT
  */
 
@@ -2204,15 +2204,38 @@ class YEvent {
 }
 
 class YArrayEvent extends YEvent {
-  constructor (yarray, remote) {
+  constructor (yarray, remote, transaction) {
     super(yarray);
     this.remote = remote;
+    this._transaction = transaction;
+  }
+  get addedElements () {
+    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);
+      }
+    });
+    return addedElements
+  }
+  get removedElements () {
+    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);
+      }
+    });
+    return removedElements
   }
 }
 
 class YArray extends Type {
   _callObserver (transaction, parentSubs, remote) {
-    this._callEventHandler(transaction, new YArrayEvent(this, remote));
+    this._callEventHandler(transaction, new YArrayEvent(this, remote, transaction));
   }
   get (pos) {
     let n = this._start;
@@ -2383,8 +2406,12 @@ class YArray extends Type {
           prevJsonIns._content.push(c);
         }
       }
-      if (prevJsonIns !== null && y !== null) {
+      if (prevJsonIns !== null) {
-        prevJsonIns._integrate(y);
+        if (y !== null) {
+          prevJsonIns._integrate(y);
+        } else if (prevJsonIns._left === null) {
+          this._start = prevJsonIns;
+        }
       }
     });
   }
@@ -2413,6 +2440,17 @@ class YArray extends Type {
     }
     this.insertAfter(left, content);
   }
+  push (content) {
+    let n = this._start;
+    let lastUndeleted = null;
+    while (n !== null) {
+      if (!n._deleted) {
+        lastUndeleted = n;
+      }
+      n = n._right;
+    }
+    this.insertAfter(lastUndeleted, content);
+  }
   _logString () {
     const left = this._left !== null ? this._left._lastId : null;
     const origin = this._origin !== null ? this._origin._lastId : null;
@@ -2726,7 +2764,7 @@ function reflectChangesOnDom (events, _document) {
         // let anchorViewPosition = getAnchorViewPosition(yxml._scrollElement)
         if (yxml.constructor === YXmlText) {
           yxml._dom.nodeValue = yxml.toString();
-        } else {
+        } else if (event.attributesChanged !== undefined) {
           // update attributes
           event.attributesChanged.forEach(attributeName => {
             const value = yxml.getAttribute(attributeName);
@@ -2745,19 +2783,27 @@ function reflectChangesOnDom (events, _document) {
            *       only in the attributes (above)
            */
           if (event.childListChanged && yxml.constructor !== YXmlHook) {
-            // create fragment of undeleted nodes
+            let currentChild = dom.firstChild;
-            const fragment = _document.createDocumentFragment();
             yxml.forEach(function (t) {
-              fragment.appendChild(t.getDom(_document));
+              let expectedChild = t.getDom(_document);
+              if (expectedChild.parentNode === dom) {
+                // is already attached to the dom. Look for it
+                while (currentChild !== expectedChild) {
+                  let del = currentChild;
+                  currentChild = currentChild.nextSibling;
+                  dom.removeChild(del);
+                }
+                currentChild = currentChild.nextSibling;
+              } else {
+                // this dom is not yet attached to dom
+                dom.insertBefore(expectedChild, currentChild);
+              }
             });
-            // remove remainding nodes
+            while (currentChild !== null) {
-            let lastChild = dom.lastChild;
+              let tmp = currentChild.nextSibling;
-            while (lastChild !== null) {
+              dom.removeChild(currentChild);
-              dom.removeChild(lastChild);
+              currentChild = tmp;
-              lastChild = dom.lastChild;
             }
-            // insert fragment of undeleted nodes
-            dom.appendChild(fragment);
           }
         }
         /* TODO: smartscrolling
@@ -2939,7 +2985,6 @@ function afterTransactionSelectionFixer (y, transaction, remote) {
     }
   }
   if (shouldUpdate) {
-    console.info('updating selection!!');
     browserSelection.setBaseAndExtent(
       anchorNode,
       anchorOffset,
@@ -3752,7 +3797,7 @@ class YXmlTreeWalker {
       }
     }
     do {
-      if (!n._deleted && n.constructor === YXmlFragment._YXmlElement && n._start !== null) {
+      if (!n._deleted && (n.constructor === YXmlFragment._YXmlElement || n.constructor === YXmlFragment) && n._start !== null) {
         // walk down in the tree
         n = n._start;
       } else {
@@ -3840,6 +3885,23 @@ class YXmlFragment extends YArray {
   }
   setDomFilter (f) {
     this._domFilter = f;
+    let attributes = new Map();
+    if (this.getAttributes !== undefined) {
+      let attrs = this.getAttributes();
+      for (let key in attrs) {
+        attributes.set(key, attrs[key]);
+      }
+    }
+    let result = this._domFilter(this.nodeName, new Map(attributes));
+    if (result === null) {
+      this._delete(this._y);
+    } else {
+      attributes.forEach((value, key) => {
+        if (!result.has(key)) {
+          this.removeAttribute(key);
+        }
+      });
+    }
     this.forEach(xml => {
       xml.setDomFilter(f);
     });
@@ -3951,9 +4013,7 @@ class YXmlFragment extends YArray {
     });
     // Apply Y.Xml events to dom
     this.observeDeep(events => {
-      this._mutualExclude(() => {
+      reflectChangesOnDom.call(this, events, _document);
-        reflectChangesOnDom.call(this, events, _document);
-      });
     });
     // Apply Dom changes on Y.Xml
     if (typeof MutationObserver !== 'undefined') {
@@ -4198,6 +4258,11 @@ class YXmlHook extends YMap {
     }
     return this._dom
   }
+  _unbindFromDom () {
+    this._dom._yxml = null;
+    this._yxml = null;
+    // TODO: cleanup hook?
+  }
   _fromBinary (y, decoder) {
     const missing = super._fromBinary(y, decoder);
     this.hookName = decoder.readVarString();

y.test.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
-	typeof define === 'function' && define.amd ? define(['exports'], factory) :
+	typeof define === 'function' && define.amd ? define(factory) :
-	(factory((global['y-tests'] = {})));
+	(factory());
-}(this, (function (exports) { 'use strict';
+}(this, (function () { 'use strict';
 
 class N {
   // A created node is always red!
@@ -2201,15 +2201,38 @@ class YEvent {
 }
 
 class YArrayEvent extends YEvent {
-  constructor (yarray, remote) {
+  constructor (yarray, remote, transaction) {
     super(yarray);
     this.remote = remote;
+    this._transaction = transaction;
+  }
+  get addedElements () {
+    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);
+      }
+    });
+    return addedElements
+  }
+  get removedElements () {
+    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);
+      }
+    });
+    return removedElements
   }
 }
 
 class YArray extends Type {
   _callObserver (transaction, parentSubs, remote) {
-    this._callEventHandler(transaction, new YArrayEvent(this, remote));
+    this._callEventHandler(transaction, new YArrayEvent(this, remote, transaction));
   }
   get (pos) {
     let n = this._start;
@@ -2380,8 +2403,12 @@ class YArray extends Type {
           prevJsonIns._content.push(c);
         }
       }
-      if (prevJsonIns !== null && y !== null) {
+      if (prevJsonIns !== null) {
-        prevJsonIns._integrate(y);
+        if (y !== null) {
+          prevJsonIns._integrate(y);
+        } else if (prevJsonIns._left === null) {
+          this._start = prevJsonIns;
+        }
       }
     });
   }
@@ -2410,6 +2437,17 @@ class YArray extends Type {
     }
     this.insertAfter(left, content);
   }
+  push (content) {
+    let n = this._start;
+    let lastUndeleted = null;
+    while (n !== null) {
+      if (!n._deleted) {
+        lastUndeleted = n;
+      }
+      n = n._right;
+    }
+    this.insertAfter(lastUndeleted, content);
+  }
   _logString () {
     const left = this._left !== null ? this._left._lastId : null;
     const origin = this._origin !== null ? this._origin._lastId : null;
@@ -2553,14 +2591,17 @@ class YText extends YArray {
       let right = this._start;
       let count = 0;
       while (right !== null) {
-        if (count <= pos && pos < count + right._length) {
+        const rightLen = right._deleted ? 0 : (right._length - 1);
+        if (count <= pos && pos <= count + rightLen) {
           const splitDiff = pos - count;
-          right = right._splitAt(this._y, pos - count);
+          right = right._splitAt(this._y, splitDiff);
           left = right._left;
           count += splitDiff;
           break
         }
-        count += right._length;
+        if (!right._deleted) {
+          count += right._length;
+        }
         left = right;
         right = right._right;
       }
@@ -2720,7 +2761,7 @@ function reflectChangesOnDom (events, _document) {
         // let anchorViewPosition = getAnchorViewPosition(yxml._scrollElement)
         if (yxml.constructor === YXmlText) {
           yxml._dom.nodeValue = yxml.toString();
-        } else {
+        } else if (event.attributesChanged !== undefined) {
           // update attributes
           event.attributesChanged.forEach(attributeName => {
             const value = yxml.getAttribute(attributeName);
@@ -2739,19 +2780,27 @@ function reflectChangesOnDom (events, _document) {
            *       only in the attributes (above)
            */
           if (event.childListChanged && yxml.constructor !== YXmlHook) {
-            // create fragment of undeleted nodes
+            let currentChild = dom.firstChild;
-            const fragment = _document.createDocumentFragment();
             yxml.forEach(function (t) {
-              fragment.appendChild(t.getDom(_document));
+              let expectedChild = t.getDom(_document);
+              if (expectedChild.parentNode === dom) {
+                // is already attached to the dom. Look for it
+                while (currentChild !== expectedChild) {
+                  let del = currentChild;
+                  currentChild = currentChild.nextSibling;
+                  dom.removeChild(del);
+                }
+                currentChild = currentChild.nextSibling;
+              } else {
+                // this dom is not yet attached to dom
+                dom.insertBefore(expectedChild, currentChild);
+              }
             });
-            // remove remainding nodes
+            while (currentChild !== null) {
-            let lastChild = dom.lastChild;
+              let tmp = currentChild.nextSibling;
-            while (lastChild !== null) {
+              dom.removeChild(currentChild);
-              dom.removeChild(lastChild);
+              currentChild = tmp;
-              lastChild = dom.lastChild;
             }
-            // insert fragment of undeleted nodes
-            dom.appendChild(fragment);
           }
         }
         /* TODO: smartscrolling
@@ -2933,7 +2982,6 @@ function afterTransactionSelectionFixer (y, transaction, remote) {
     }
   }
   if (shouldUpdate) {
-    console.info('updating selection!!');
     browserSelection.setBaseAndExtent(
       anchorNode,
       anchorOffset,
@@ -2941,9 +2989,6 @@ function afterTransactionSelectionFixer (y, transaction, remote) {
       focusOffset
     );
   }
-  // delete, so the objects can be gc'd
-  relativeSelection = null;
-  browserSelection = null;
 }
 
 class YXmlEvent extends YEvent {
@@ -3711,7 +3756,7 @@ function domToYXml (parent, doms, _document) {
     }
     if (parent._domFilter(d.nodeName, new Map()) !== null) {
       let type;
-      const hookName = d._yjsHook;
+      const hookName = d._yjsHook || (d.dataset != null ? d.dataset.yjsHook : undefined);
       if (hookName !== undefined) {
         type = new YXmlHook(hookName, d);
       } else if (d.nodeType === d.TEXT_NODE) {
@@ -3749,7 +3794,7 @@ class YXmlTreeWalker {
       }
     }
     do {
-      if (!n._deleted && n.constructor === YXmlFragment._YXmlElement && n._start !== null) {
+      if (!n._deleted && (n.constructor === YXmlFragment._YXmlElement || n.constructor === YXmlFragment) && n._start !== null) {
         // walk down in the tree
         n = n._start;
       } else {
@@ -3837,6 +3882,23 @@ class YXmlFragment extends YArray {
   }
   setDomFilter (f) {
     this._domFilter = f;
+    let attributes = new Map();
+    if (this.getAttributes !== undefined) {
+      let attrs = this.getAttributes();
+      for (let key in attrs) {
+        attributes.set(key, attrs[key]);
+      }
+    }
+    let result = this._domFilter(this.nodeName, new Map(attributes));
+    if (result === null) {
+      this._delete(this._y);
+    } else {
+      attributes.forEach((value, key) => {
+        if (!result.has(key)) {
+          this.removeAttribute(key);
+        }
+      });
+    }
     this.forEach(xml => {
       xml.setDomFilter(f);
     });
@@ -3962,7 +4024,7 @@ class YXmlFragment extends YArray {
             mutations.forEach(mutation => {
               const dom = mutation.target;
               const yxml = dom._yxml;
-              if (yxml == null) {
+              if (yxml == null || yxml.constructor === YXmlHook) {
                 // dom element is filtered
                 return
               }
@@ -4178,6 +4240,7 @@ class YXmlHook extends YMap {
     if (hookName !== undefined) {
       this.hookName = hookName;
       this._dom = dom;
+      dom._yjsHook = hookName;
       dom._yxml = this;
       getHook(hookName).fillType(dom, this);
     }
@@ -4188,9 +4251,15 @@ class YXmlHook extends YMap {
       const dom = getHook(this.hookName).createDom(this);
       this._dom = dom;
       dom._yxml = this;
+      dom._yjsHook = this.hookName;
     }
     return this._dom
   }
+  _unbindFromDom () {
+    this._dom._yxml = null;
+    this._yxml = null;
+    // TODO: cleanup hook?
+  }
   _fromBinary (y, decoder) {
     const missing = super._fromBinary(y, decoder);
     this.hookName = decoder.readVarString();
@@ -4206,6 +4275,12 @@ class YXmlHook extends YMap {
     }
     super._integrate(y);
   }
+  setDomFilter () {
+    // TODO: implement new modfilter method!
+  }
+  enableSmartScrolling () {
+    // TODO: implement new smartscrolling method!
+  }
 }
 YXmlHook.addHook = addHook;
 
@@ -4668,7 +4743,7 @@ var y = d * 365.25;
  * @api public
  */
 
-var ms = function(val, options) {
+var index = function(val, options) {
   options = options || {};
   var type = typeof val;
   if (type === 'string' && val.length > 0) {
@@ -4810,7 +4885,7 @@ exports.coerce = coerce;
 exports.disable = disable;
 exports.enable = enable;
 exports.enabled = enabled;
-exports.humanize = ms;
+exports.humanize = index;
 
 /**
  * The currently active debug mode names, and names to skip.
@@ -4869,8 +4944,8 @@ function createDebug(namespace) {
 
     // set `diff` timestamp
     var curr = +new Date();
-    var ms$$1 = curr - (prevTime || curr);
+    var ms = curr - (prevTime || curr);
-    self.diff = ms$$1;
+    self.diff = ms;
     self.prev = prevTime;
     self.curr = curr;
     prevTime = curr;
@@ -4889,19 +4964,19 @@ function createDebug(namespace) {
     }
 
     // apply any `formatters` transformations
-    var index = 0;
+    var index$$1 = 0;
     args[0] = args[0].replace(/%([a-zA-Z%])/g, function(match, format) {
       // if we encounter an escaped % then don't increase the array index
       if (match === '%%') return match;
-      index++;
+      index$$1++;
       var formatter = exports.formatters[format];
       if ('function' === typeof formatter) {
-        var val = args[index];
+        var val = args[index$$1];
         match = formatter.call(self, val);
 
         // now we need to remove `args[index]` since it's inlined in the `format`
-        args.splice(index, 1);
+        args.splice(index$$1, 1);
-        index--;
+        index$$1--;
       }
       return match;
     });
@@ -5864,7 +5939,7 @@ if (typeof Y !== 'undefined') {
 }
 
 var chance_1 = createCommonjsModule(function (module, exports) {
-//  Chance.js 1.0.12
+//  Chance.js 1.0.10
 //  http://chancejs.com
 //  (c) 2013 Victor Quinn
 //  Chance may be freely distributed or modified under the MIT license.
@@ -5929,7 +6004,7 @@ var chance_1 = createCommonjsModule(function (module, exports) {
         return this;
     }
 
-    Chance.prototype.VERSION = "1.0.12";
+    Chance.prototype.VERSION = "1.0.10";
 
     // Random helper functions
     function initOptions(options, defaults) {
@@ -6148,16 +6223,6 @@ var chance_1 = createCommonjsModule(function (module, exports) {
 		return integer.toString(16);
     };
 
-    Chance.prototype.letter = function(options) {
-        options = initOptions(options, {casing: 'lower'});
-        var pool = "abcdefghijklmnopqrstuvwxyz";
-        var letter = this.character({pool: pool});
-        if (options.casing === 'upper') {
-            letter = letter.toUpperCase();
-        }
-        return letter;
-    };
-
     /**
      *  Return a random string
      *
@@ -7100,25 +7165,8 @@ var chance_1 = createCommonjsModule(function (module, exports) {
         return this.word({length: options.length}) + '@' + (options.domain || this.domain());
     };
 
-    /**
-     * #Description:
-     * ===============================================
-     * Generate a random Facebook id, aka fbid.
-     *
-     * NOTE: At the moment (Sep 2017), Facebook ids are
-     * "numeric strings" of length 16.
-     * However, Facebook Graph API documentation states that
-     * "it is extremely likely to change over time".
-     * @see https://developers.facebook.com/docs/graph-api/overview/
-     *
-     * #Examples:
-     * ===============================================
-     * chance.fbid() => '1000035231661304'
-     *
-     * @return [string] facebook id
-     */
     Chance.prototype.fbid = function () {
-        return '10000' + this.string({pool: "1234567890", length: 11});
+        return parseInt('10000' + this.natural({max: 100000000000}), 10);
     };
 
     Chance.prototype.google_analytics = function () {
@@ -7959,72 +8007,8 @@ var chance_1 = createCommonjsModule(function (module, exports) {
 
     // -- End Regional
 
-    // -- Music --
-
-    Chance.prototype.note = function(options) {
-      // choices for 'notes' option:
-      // flatKey - chromatic scale with flat notes (default)
-      // sharpKey - chromatic scale with sharp notes
-      // flats - just flat notes
-      // sharps - just sharp notes
-      // naturals - just natural notes
-      // all - naturals, sharps and flats
-      options = initOptions(options, { notes : 'flatKey'});
-      var scales = {
-        naturals: ['C', 'D', 'E', 'F', 'G', 'A', 'B'],
-        flats: ['D♭', 'E♭', 'G♭', 'A♭', 'B♭'],
-        sharps: ['C♯', 'D♯', 'F♯', 'G♯', 'A♯']
-      };
-      scales.all = scales.naturals.concat(scales.flats.concat(scales.sharps));
-      scales.flatKey = scales.naturals.concat(scales.flats);
-      scales.sharpKey = scales.naturals.concat(scales.sharps);
-      return this.pickone(scales[options.notes]);
-    };
-
-    Chance.prototype.midi_note = function(options) {
-      var min = 0;
-      var max = 127;
-      options = initOptions(options, { min : min, max : max });
-      return this.integer({min: options.min, max: options.max});
-    };
-
-    Chance.prototype.chord_quality = function(options) {
-      options = initOptions(options, { jazz: true });
-      var chord_qualities = ['maj', 'min', 'aug', 'dim'];
-      if (options.jazz){
-        chord_qualities = [
-          'maj7',
-          'min7',
-          '7',
-          'sus',
-          'dim',
-          'ø'
-        ];
-      }
-      return this.pickone(chord_qualities);
-    };
-
-    Chance.prototype.chord = function (options) {
-      options = initOptions(options);
-      return this.note(options) + this.chord_quality(options);
-    };
-
-    Chance.prototype.tempo = function (options) {
-      var min = 40;
-      var max = 320;
-      options = initOptions(options, {min: min, max: max});
-      return this.integer({min: options.min, max: options.max});
-    };
-
-    // -- End Music
-
     // -- Miscellaneous --
 
-    // Coin - Flip, flip, flipadelphia
-    Chance.prototype.coin = function(options) {
-      return this.bool() ? "heads" : "tails";
-    };
-
     // Dice - For all the board game geeks out there, myself included ;)
     function diceFn (range) {
         return function () {
@@ -13505,7 +13489,7 @@ async function applyRandomTests (t, mods, iterations) {
   return initInformation
 }
 
-var index$1 = function (str) {
+var index$1$1 = function (str) {
 	return encodeURIComponent(str).replace(/[!'()*]/g, function (c) {
 		return '%' + c.charCodeAt(0).toString(16).toUpperCase();
 	});
@@ -13691,7 +13675,7 @@ function parserForArrayFormat(opts) {
 
 function encode(value, opts) {
 	if (opts.encode) {
-		return opts.strict ? index$1(value) : encodeURIComponent(value);
+		return opts.strict ? index$1$1(value) : encodeURIComponent(value);
 	}
 
 	return value;
@@ -13803,7 +13787,7 @@ var stringify = function (obj, opts) {
 	}).join('&') : '';
 };
 
-var index = {
+var index$2 = {
 	extract: extract,
 	parse: parse$1,
 	stringify: stringify
@@ -13818,7 +13802,7 @@ const browserSupport =
 
 function createTestLink (params) {
   if (typeof location !== 'undefined') {
-    var query = index.parse(location.search);
+    var query = index$2.parse(location.search);
     delete query.test;
     delete query.seed;
     delete query.args;
@@ -13828,7 +13812,7 @@ function createTestLink (params) {
         query[name] = params[name];
       }
     }
-    return location.protocol + '//' + location.host + location.pathname + '?' + index.stringify(query) + location.hash
+    return location.protocol + '//' + location.host + location.pathname + '?' + index$2.stringify(query) + location.hash
   }
 }
 
@@ -13839,7 +13823,7 @@ class TestHandler {
     this.repeatingRun = 0;
     this.tests = {};
     if (typeof location !== 'undefined') {
-      this.opts = index.parse(location.search);
+      this.opts = index$2.parse(location.search);
       if (this.opts.case != null) {
         this.opts.case = Number(this.opts.case);
       }
@@ -13980,7 +13964,7 @@ function createCommonjsModule$1(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
 }
 
-var isBrowser = typeof index !== 'undefined';
+var isBrowser = typeof index$2 !== 'undefined';
 
 var environment = {
 	isBrowser: isBrowser
@@ -18529,8 +18513,8 @@ var stacktraceGps = createCommonjsModule$1(function (module, exports) {
      * @returns {String} original representation of the base64-encoded string.
      */
     function _atob(b64str) {
-        if (typeof index !== 'undefined' && index.atob) {
+        if (typeof index$2 !== 'undefined' && index$2.atob) {
-            return index.atob(b64str);
+            return index$2.atob(b64str);
         } else {
             throw new Error('You must supply a polyfill for window.atob in this environment');
         }
@@ -19040,7 +19024,7 @@ var stacktrace = createCommonjsModule$1(function (module, exports) {
 }));
 });
 
-index.stacktrace = stacktrace;
+index$2.stacktrace = stacktrace;
 
 function test (testDescription, ...args) {
   let location = stacktrace.getSync()[1];
@@ -19328,7 +19312,6 @@ test('deep element insert', async function xml16 (t) {
   deepElement.append(boldElement);
   deepElement.append(attrElement);
   dom0.append(deepElement);
-  console.log(dom0.outerHTML);
   let str0 = dom0.outerHTML;
   await flushAll(t, users);
   let str1 = dom1.outerHTML;
@@ -19388,7 +19371,6 @@ test('Filtering remote changes', async function xmlFilteringRemote (t) {
   // check dom
   paragraph.getDom().setAttribute('malicious', 'true');
   span.getDom().setAttribute('malicious', 'true');
-  console.log(xml0.toString());
   // check incoming attributes
   xml1.get(0).get(0).setAttribute('malicious', 'true');
   xml1.insert(0, [new Y$1.XmlElement('hideMe')]);
@@ -19499,7 +19481,5 @@ test('y-xml: Random tests (1000)', async function xmlRandom1000 (t) {
   await applyRandomTests(t, xmlTransactions, 1000);
 });
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 })));
 //# sourceMappingURL=y.test.js.map