v13.0.0-35 -- distribution files

examples/html-editor/index.js

@@ -1,4 +1,15 @@
-/* global Y */
+/* global Y, HTMLElement, customElements */
+
+class MagicTable extends HTMLElement {
+  constructor () {
+    super()
+    var shadow = this.attachShadow({mode: 'open'})
+    setTimeout(() => {
+      shadow.append(this.childNodes[0])
+    }, 1000)
+  }
+}
+customElements.define('magic-table', MagicTable)
 
 // initialize a shared object. This function call returns a promise!
 let y = new Y({
@@ -17,17 +28,14 @@ window.onload = function () {
   window.yXmlType.bindToDom(document.body)
 }
 window.undoManager = new Y.utils.UndoManager(window.yXmlType, {
-  captureTimeout: 0
+  captureTimeout: 500
 })
 
 document.onkeydown = function interceptUndoRedo (e) {
   if (e.keyCode === 90 && e.metaKey) {
-    console.log('uidtaren')
     if (!e.shiftKey) {
-      console.info('Undo!')
       window.undoManager.undo()
     } else {
-      console.info('Redo!')
       window.undoManager.redo()
     }
     e.preventDefault()

examples/monaco/index.html

@@ -14,10 +14,7 @@
       }
     </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="../node_modules/monaco-editor/min/vs/loader.js"></script>
     <script src="./index.js"></script>
   </body>

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yjs",
-  "version": "13.0.0-29",
+  "version": "13.0.0-35",
   "description": "A framework for real-time p2p shared editing on any data",
   "main": "./y.node.js",
   "browser": "./y.js",
@@ -15,7 +15,8 @@
     "postpublish": "tag-dist-files --overwrite-existing-tag"
   },
   "files": [
-    "y.*"
+    "y.*",
+    "src/*"
   ],
   "standard": {
     "ignore": [

rollup.browser.js

@@ -5,9 +5,13 @@ import commonjs from 'rollup-plugin-commonjs'
 var pkg = require('./package.json')
 
 export default {
-  entry: 'src/Y.js',
+  input: 'src/Y.js',
-  moduleName: 'Y',
+  name: 'Y',
-  format: 'umd',
+  sourcemap: true,
+  output: {
+    file: 'y.js',
+    format: 'umd'
+  },
   plugins: [
     nodeResolve({
       main: true,
@@ -32,8 +36,6 @@ export default {
       }
     })
   ],
-  dest: 'y.js',
-  sourceMap: true,
   banner: `
 /**
  * ${pkg.name} - ${pkg.description}

rollup.node.js

@@ -3,9 +3,13 @@ import commonjs from 'rollup-plugin-commonjs'
 var pkg = require('./package.json')
 
 export default {
-  entry: 'src/y-dist.cjs.js',
+  input: 'src/y-dist.cjs.js',
-  moduleName: 'Y',
+  nameame: 'Y',
-  format: 'cjs',
+  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}

rollup.test.js

@@ -3,9 +3,13 @@ import commonjs from 'rollup-plugin-commonjs'
 import multiEntry from 'rollup-plugin-multi-entry'
 
 export default {
-  entry: 'test/y-xml.tests.js',
+  input: 'test/y-xml.tests.js',
-  moduleName: 'y-tests',
+  name: 'y-tests',
-  format: 'umd',
+  sourcemap: true,
+  output: {
+    file: 'y.test.js',
+    format: 'umd'
+  },
   plugins: [
     nodeResolve({
       main: true,
@@ -14,7 +18,5 @@ export default {
     }),
     commonjs(),
     multiEntry()
-  ],
+  ]
-  dest: 'y.test.js',
-  sourceMap: true
 }

src/Struct/Type.js

@@ -65,9 +65,9 @@ export default class Type extends Item {
     }
     return path
   }
-  _callEventHandler (event) {
+  _callEventHandler (transaction, event) {
-    const changedParentTypes = this._y._transaction.changedParentTypes
+    const changedParentTypes = transaction.changedParentTypes
-    this._eventHandler.callEventListeners(event)
+    this._eventHandler.callEventListeners(transaction, event)
     let type = this
     while (type !== this._y) {
       let events = changedParentTypes.get(type)

src/Type/YArray.js

@@ -12,8 +12,8 @@ class YArrayEvent extends YEvent {
 }
 
 export default class YArray extends Type {
-  _callObserver (parentSubs, remote) {
+  _callObserver (transaction, parentSubs, remote) {
-    this._callEventHandler(new YArrayEvent(this, remote))
+    this._callEventHandler(transaction, new YArrayEvent(this, remote))
   }
   get (pos) {
     let n = this._start

src/Type/YMap.js

@@ -13,8 +13,8 @@ class YMapEvent extends YEvent {
 }
 
 export default class YMap extends Type {
-  _callObserver (parentSubs, remote) {
+  _callObserver (transaction, parentSubs, remote) {
-    this._callEventHandler(new YMapEvent(this, parentSubs, remote))
+    this._callEventHandler(transaction, new YMapEvent(this, parentSubs, remote))
   }
   toJSON () {
     const map = {}

src/Type/y-xml/YXmlElement.js

@@ -5,7 +5,7 @@ import YMap from '../YMap.js'
 import YXmlFragment from './YXmlFragment.js'
 
 export default class YXmlElement extends YXmlFragment {
-  constructor (arg1, arg2) {
+  constructor (arg1, arg2, _document) {
     super()
     this.nodeName = null
     this._scrollElement = null
@@ -13,7 +13,7 @@ export default class YXmlElement extends YXmlFragment {
       this.nodeName = arg1.toUpperCase()
     } else if (arg1 != null && arg1.nodeType != null && arg1.nodeType === arg1.ELEMENT_NODE) {
       this.nodeName = arg1.nodeName
-      this._setDom(arg1)
+      this._setDom(arg1, _document)
     } else {
       this.nodeName = 'UNDEFINED'
     }
@@ -26,28 +26,25 @@ export default class YXmlElement extends YXmlFragment {
     struct.nodeName = this.nodeName
     return struct
   }
-  _setDom (dom) {
+  _setDom (dom, _document) {
     if (this._dom != null) {
       throw new Error('Only call this method if you know what you are doing ;)')
     } else if (dom._yxml != null) { // TODO do i need to check this? - no.. but for dev purps..
       throw new Error('Already bound to an YXml type')
     } else {
-      this._dom = dom
-      dom._yxml = this
       // tag is already set in constructor
       // set attributes
-      let attrNames = []
+      let attributes = new Map()
       for (let i = 0; i < dom.attributes.length; i++) {
-        attrNames.push(dom.attributes[i].name)
+        let attr = dom.attributes[i]
+        attributes.set(attr.name, attr.value)
       }
-      attrNames = this._domFilter(dom, attrNames)
+      attributes = this._domFilter(dom, attributes)
-      for (let i = 0; i < attrNames.length; i++) {
+      attributes.forEach((value, name) => {
-        let attrName = attrNames[i]
+        this.setAttribute(name, value)
-        let attrValue = dom.getAttribute(attrName)
+      })
-        this.setAttribute(attrName, attrValue)
+      this.insertDomElements(0, Array.prototype.slice.call(dom.childNodes), _document)
-      }
+      this._bindToDom(dom, _document)
-      this.insertDomElements(0, Array.prototype.slice.call(dom.childNodes))
-      this._bindToDom(dom)
       return dom
     }
   }
@@ -106,7 +103,9 @@ export default class YXmlElement extends YXmlFragment {
   getAttributes () {
     const obj = {}
     for (let [key, value] of this._map) {
-      obj[key] = value._content[0]
+      if (!value._deleted) {
+        obj[key] = value._content[0]
+      }
     }
     return obj
   }
@@ -115,7 +114,6 @@ export default class YXmlElement extends YXmlFragment {
     let dom = this._dom
     if (dom == null) {
       dom = _document.createElement(this.nodeName)
-      this._dom = dom
       dom._yxml = this
       let attrs = this.getAttributes()
       for (let key in attrs) {
@@ -124,7 +122,7 @@ export default class YXmlElement extends YXmlFragment {
       this.forEach(yxml => {
         dom.appendChild(yxml.getDom(_document))
       })
-      this._bindToDom(dom)
+      this._bindToDom(dom, _document)
     }
     return dom
   }

src/Type/y-xml/YXmlFragment.js

@@ -9,18 +9,18 @@ import YXmlEvent from './YXmlEvent.js'
 import { logID } from '../../MessageHandler/messageToString.js'
 import diff from 'fast-diff'
 
-function domToYXml (parent, doms) {
+function domToYXml (parent, doms, _document) {
   const types = []
   doms.forEach(d => {
     if (d._yxml != null && d._yxml !== false) {
       d._yxml._unbindFromDom()
     }
-    if (parent._domFilter(d, []) !== null) {
+    if (parent._domFilter(d.nodeName, new Map()) !== null) {
       let type
       if (d.nodeType === d.TEXT_NODE) {
         type = new YXmlText(d)
       } else if (d.nodeType === d.ELEMENT_NODE) {
-        type = new YXmlFragment._YXmlElement(d, parent._domFilter)
+        type = new YXmlFragment._YXmlElement(d, parent._domFilter, _document)
       } else {
         throw new Error('Unsupported node!')
       }
@@ -98,7 +98,9 @@ export default class YXmlFragment extends YArray {
         } catch (e) {
           console.error(e)
         }
-        this._domObserver.takeRecords()
+        if (this._domObserver !== null) {
+          this._domObserver.takeRecords()
+        }
         token = true
       }
     }
@@ -142,8 +144,8 @@ export default class YXmlFragment extends YArray {
       xml.setDomFilter(f)
     })
   }
-  _callObserver (parentSubs, remote) {
+  _callObserver (transaction, parentSubs, remote) {
-    this._callEventHandler(new YXmlEvent(this, parentSubs, remote))
+    this._callEventHandler(transaction, new YXmlEvent(this, parentSubs, remote))
   }
   toString () {
     return this.map(xml => xml.toString()).join('')
@@ -162,113 +164,167 @@ export default class YXmlFragment extends YArray {
       this._dom = null
     }
   }
-  insertDomElementsAfter (prev, doms) {
+  insertDomElementsAfter (prev, doms, _document) {
-    const types = domToYXml(this, doms)
+    const types = domToYXml(this, doms, _document)
     this.insertAfter(prev, types)
     return types
   }
-  insertDomElements (pos, doms) {
+  insertDomElements (pos, doms, _document) {
-    const types = domToYXml(this, doms)
+    const types = domToYXml(this, doms, _document)
     this.insert(pos, types)
     return types
   }
   getDom () {
     return this._dom
   }
-  bindToDom (dom) {
+  bindToDom (dom, _document) {
     if (this._dom != null) {
       this._unbindFromDom()
     }
     if (dom._yxml != null) {
       dom._yxml._unbindFromDom()
     }
-    if (MutationObserver == null) {
-      throw new Error('Not able to bind to a DOM element, because MutationObserver is not available!')
-    }
     dom.innerHTML = ''
-    this._dom = dom
-    dom._yxml = this
     this.forEach(t => {
-      dom.insertBefore(t.getDom(), null)
+      dom.insertBefore(t.getDom(_document), null)
     })
-    this._bindToDom(dom)
+    this._bindToDom(dom, _document)
   }
   // binds to a dom element
   // Only call if dom and YXml are isomorph
-  _bindToDom (dom) {
+  _bindToDom (dom, _document) {
-    if (this._parent === null || this._parent._dom != null || typeof MutationObserver === 'undefined') {
+    _document = _document || document
-      // only bind if parent did not already bind
+    this._dom = dom
+    dom._yxml = this
+    // TODO: refine this..
+    if ((this.constructor !== YXmlFragment && this._parent !== this._y) || this._parent === null) {
+      // TODO: only top level YXmlFragment can bind. Also allow YXmlElements..
       return
     }
-    this._y.on('beforeTransaction', () => {
-      this._domObserverListener(this._domObserver.takeRecords())
-    })
     this._y.on('beforeTransaction', beforeTransactionSelectionFixer)
     this._y.on('afterTransaction', afterTransactionSelectionFixer)
-    // Apply Y.Xml events to dom
+    const applyFilter = (type) => {
-    this.observeDeep(reflectChangesOnDom.bind(this))
+      if (type._deleted) {
-    // Apply Dom changes on Y.Xml
+        return
-    this._domObserverListener = mutations => {
+      }
-      this._mutualExclude(() => {
+      // check if type is a child of this
-        this._y.transact(() => {
+      let isChild = false
-          let diffChildren = new Set()
+      let p = type
-          mutations.forEach(mutation => {
+      while (p !== this._y) {
-            const dom = mutation.target
+        if (p === this) {
-            const yxml = dom._yxml
+          isChild = true
-            if (yxml == null) {
+          break
-              // dom element is filtered
+        }
-              return
+        p = p._parent
-            }
+      }
-            switch (mutation.type) {
+      if (!isChild) {
-              case 'characterData':
+        return
-                var diffs = diff(yxml.toString(), dom.nodeValue)
+      }
-                var pos = 0
+      // filter attributes
-                for (var i = 0; i < diffs.length; i++) {
+      let attributes = new Map()
-                  var d = diffs[i]
+      if (type.getAttributes !== undefined) {
-                  if (d[0] === 0) { // EQUAL
+        let attrs = type.getAttributes()
-                    pos += d[1].length
+        for (let key in attrs) {
-                  } else if (d[0] === -1) { // DELETE
+          attributes.set(key, attrs[key])
-                    yxml.delete(pos, d[1].length)
+        }
-                  } else { // INSERT
+      }
-                    yxml.insert(pos, d[1])
+      let result = this._domFilter(type.nodeName, new Map(attributes))
-                    pos += d[1].length
+      if (result === null) {
-                  }
+        type._delete(this._y)
-                }
+      } else {
-                break
+        attributes.forEach((value, key) => {
-              case 'attributes':
+          if (!result.has(key)) {
-                let name = mutation.attributeName
+            type.removeAttribute(key)
-                // check if filter accepts attribute
-                if (this._domFilter(dom, [name]).length > 0 && this.constructor !== YXmlFragment) {
-                  var val = dom.getAttribute(name)
-                  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) {
-            if (dom._yxml != null && dom._yxml !== false) {
-              applyChangesFromDom(dom)
-            }
           }
         })
+      }
+    }
+    this._y.on('beforeObserverCalls', function (y, transaction) {
+      // apply dom filter to new and changed types
+      transaction.changedTypes.forEach(function (subs, type) {
+        if (subs.size > 1 || !subs.has(null)) {
+          // only apply changes on attributes
+          applyFilter(type)
+        }
+      })
+      transaction.newTypes.forEach(applyFilter)
+    })
+    // Apply Y.Xml events to dom
+    this.observeDeep(events => {
+      reflectChangesOnDom.call(this, events, _document)
+    })
+    // Apply Dom changes on Y.Xml
+    if (typeof MutationObserver !== 'undefined') {
+      this._y.on('beforeTransaction', () => {
+        this._domObserverListener(this._domObserver.takeRecords())
+      })
+      this._domObserverListener = mutations => {
+        this._mutualExclude(() => {
+          this._y.transact(() => {
+            let diffChildren = new Set()
+            mutations.forEach(mutation => {
+              const dom = mutation.target
+              const yxml = dom._yxml
+              if (yxml == null) {
+                // dom element is filtered
+                return
+              }
+              switch (mutation.type) {
+                case 'characterData':
+                  var diffs = diff(yxml.toString(), dom.nodeValue)
+                  var pos = 0
+                  for (var i = 0; i < diffs.length; i++) {
+                    var d = diffs[i]
+                    if (d[0] === 0) { // EQUAL
+                      pos += d[1].length
+                    } else if (d[0] === -1) { // DELETE
+                      yxml.delete(pos, d[1].length)
+                    } else { // INSERT
+                      yxml.insert(pos, d[1])
+                      pos += d[1].length
+                    }
+                  }
+                  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 (this._domFilter(dom.nodeName, attributes).size > 0 && yxml.constructor !== YXmlFragment) {
+                    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) {
+              if (dom._yxml != null && dom._yxml !== false) {
+                applyChangesFromDom(dom)
+              }
+            }
+          })
+        })
+      }
+      this._domObserver = new MutationObserver(this._domObserverListener)
+      this._domObserver.observe(dom, {
+        childList: true,
+        attributes: true,
+        characterData: true,
+        subtree: true
       })
     }
-    this._domObserver = new MutationObserver(this._domObserverListener)
-    this._domObserver.observe(dom, {
-      childList: true,
-      attributes: true,
-      characterData: true,
-      subtree: true
-    })
     return dom
   }
   _logString () {

src/Type/y-xml/domFilter.js

@@ -0,0 +1,51 @@
+
+const filterMap = new Map()
+
+export function addFilter (type, filter) {
+  if (!filterMap.has(type)) {
+    filterMap.set(type, new Set())
+  }
+  const filters = filterMap.get(type)
+  filters.add(filter)
+}
+
+export function executeFilter (type) {
+  const y = type._y
+  let parent = 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])
+    }
+  }
+  let filteredAttributes = new Map(attributes)
+  // is not y, supports dom filtering
+  while (parent !== y && parent.setDomFilter != null) {
+    const filters = filterMap.get(parent)
+    if (filters !== undefined) {
+      for (let f of filters) {
+        filteredAttributes = f(nodeName, filteredAttributes)
+        if (filteredAttributes === null) {
+          break
+        }
+      }
+      if (filteredAttributes === null) {
+        break
+      }
+    }
+    parent = parent._parent
+  }
+  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)) {
+        type.removeAttribute(key)
+      }
+    })
+  }
+}

src/Type/y-xml/selection.js

@@ -7,7 +7,7 @@ let relativeSelection = null
 
 export let beforeTransactionSelectionFixer
 if (typeof getSelection !== 'undefined') {
-  beforeTransactionSelectionFixer = function _beforeTransactionSelectionFixer (y, remote) {
+  beforeTransactionSelectionFixer = function _beforeTransactionSelectionFixer (y, transaction, remote) {
     if (!remote) {
       return
     }
@@ -30,7 +30,7 @@ if (typeof getSelection !== 'undefined') {
   beforeTransactionSelectionFixer = function _fakeBeforeTransactionSelectionFixer () {}
 }
 
-export function afterTransactionSelectionFixer (y, remote) {
+export function afterTransactionSelectionFixer (y, transaction, remote) {
   if (relativeSelection === null || !remote) {
     return
   }
@@ -46,20 +46,29 @@ export function afterTransactionSelectionFixer (y, remote) {
   if (from !== null) {
     let sel = fromRelativePosition(fromY, from)
     if (sel !== null) {
-      shouldUpdate = true
+      let node = sel.type.getDom()
-      anchorNode = sel.type.getDom()
+      let offset = sel.offset
-      anchorOffset = sel.offset
+      if (node !== anchorNode || offset !== anchorOffset) {
+        anchorNode = node
+        anchorOffset = offset
+        shouldUpdate = true
+      }
     }
   }
   if (to !== null) {
     let sel = fromRelativePosition(toY, to)
     if (sel !== null) {
-      focusNode = sel.type.getDom()
+      let node = sel.type.getDom()
-      focusOffset = sel.offset
+      let offset = sel.offset
-      shouldUpdate = true
+      if (node !== focusNode || offset !== focusOffset) {
+        focusNode = node
+        focusOffset = offset
+        shouldUpdate = true
+      }
     }
   }
   if (shouldUpdate) {
+    console.info('updating selection!!')
     browserSelection.setBaseAndExtent(
       anchorNode,
       anchorOffset,

src/Type/y-xml/utils.js

@@ -135,18 +135,22 @@ export function applyChangesFromDom (dom) {
   }
 }
 
-export function reflectChangesOnDom (events) {
+export function reflectChangesOnDom (events, _document) {
   // Make sure that no filtered attributes are applied to the structure
   // if they were, delete them
   /*
   events.forEach(event => {
     const target = event.target
-    const keys = this._domFilter(target.nodeName, Array.from(event.keysChanged))
+    if (event.attributesChanged === undefined) {
+      // event.target is Y.XmlText
+      return
+    }
+    const keys = this._domFilter(target.nodeName, Array.from(event.attributesChanged))
     if (keys === null) {
       target._delete()
     } else {
-      const removeKeys = new Set() // is a copy of event.keysChanged
+      const removeKeys = new Set() // is a copy of event.attributesChanged
-      event.keysChanged.forEach(key => { removeKeys.add(key) })
+      event.attributesChanged.forEach(key => { removeKeys.add(key) })
       keys.forEach(key => {
         // remove all accepted keys from removeKeys
         removeKeys.delete(key)
@@ -179,9 +183,9 @@ export function reflectChangesOnDom (events) {
           })
           if (event.childListChanged) {
             // create fragment of undeleted nodes
-            const fragment = document.createDocumentFragment()
+            const fragment = _document.createDocumentFragment()
             yxml.forEach(function (t) {
-              fragment.append(t.getDom())
+              fragment.appendChild(t.getDom(_document))
             })
             // remove remainding nodes
             let lastChild = dom.lastChild
@@ -190,7 +194,7 @@ export function reflectChangesOnDom (events) {
               lastChild = dom.lastChild
             }
             // insert fragment of undeleted nodes
-            dom.append(fragment)
+            dom.appendChild(fragment)
           }
         }
         /* TODO: smartscrolling

src/Util/EventHandler.js

@@ -17,7 +17,7 @@ export default class EventHandler {
   removeAllEventListeners () {
     this.eventListeners = []
   }
-  callEventListeners (event) {
+  callEventListeners (transaction, event) {
     for (var i = 0; i < this.eventListeners.length; i++) {
       try {
         const f = this.eventListeners[i]

src/Util/UndoManager.js

@@ -1,16 +1,16 @@
 import ID from './ID.js'
 
 class ReverseOperation {
-  constructor (y) {
+  constructor (y, transaction) {
     this.created = new Date()
-    const beforeState = y._transaction.beforeState
+    const beforeState = transaction.beforeState
     this.toState = new ID(y.userID, y.ss.getState(y.userID) - 1)
     if (beforeState.has(y.userID)) {
       this.fromState = new ID(y.userID, beforeState.get(y.userID))
     } else {
       this.fromState = this.toState
     }
-    this.deletedStructs = y._transaction.deletedStructs
+    this.deletedStructs = transaction.deletedStructs
   }
 }
 
@@ -70,9 +70,9 @@ export default class UndoManager {
     this._redoing = false
     const y = scope._y
     this.y = y
-    y.on('afterTransaction', (y, remote) => {
+    y.on('afterTransaction', (y, transaction, remote) => {
-      if (!remote && y._transaction.changedParentTypes.has(scope)) {
+      if (!remote && transaction.changedParentTypes.has(scope)) {
-        let reverseOperation = new ReverseOperation(y)
+        let reverseOperation = new ReverseOperation(y, transaction)
         if (!this._undoing) {
           let lastUndoOp = this._undoBuffer.length > 0 ? this._undoBuffer[this._undoBuffer.length - 1] : null
           if (lastUndoOp !== null && reverseOperation.created - lastUndoOp.created <= options.captureTimeout) {

src/Util/relativePosition.js

@@ -7,13 +7,13 @@ export function getRelativePosition (type, offset) {
   } else {
     let t = type._start
     while (t !== null) {
-      if (t._length >= offset) {
+      if (t._deleted === false) {
-        return [t._id.user, t._id.clock + offset - 1]
+        if (t._length >= offset) {
-      }
+          return [t._id.user, t._id.clock + offset - 1]
-      if (t._right === null) {
+        }
-        return [t._id.user, t._id.clock + t._length - 1]
+        if (t._right === null) {
-      }
+          return [t._id.user, t._id.clock + t._length - 1]
-      if (!t._deleted) {
+        }
         offset -= t._length
       }
       t = t._right

src/Y.js

@@ -15,6 +15,7 @@ import YMap from './Type/YMap.js'
 import YText from './Type/YText.js'
 import { YXmlFragment, YXmlElement, YXmlText } from './Type/y-xml/y-xml.js'
 import BinaryDecoder from './Binary/Decoder.js'
+import { getRelativePosition, fromRelativePosition } from './Util/relativePosition.js'
 
 import debug from 'debug'
 import Transaction from './Transaction.js'
@@ -44,8 +45,8 @@ export default class Y extends NamedEventHandler {
   transact (f, remote = false) {
     let initialCall = this._transaction === null
     if (initialCall) {
-      this.emit('beforeTransaction', this, remote)
       this._transaction = new Transaction(this)
+      this.emit('beforeTransaction', this, this._transaction, remote)
     }
     try {
       f(this)
@@ -53,13 +54,16 @@ export default class Y extends NamedEventHandler {
       console.error(e)
     }
     if (initialCall) {
+      this.emit('beforeObserverCalls', this, this._transaction, remote)
+      const transaction = this._transaction
+      this._transaction = null
       // emit change events on changed types
-      this._transaction.changedTypes.forEach(function (subs, type) {
+      transaction.changedTypes.forEach(function (subs, type) {
         if (!type._deleted) {
-          type._callObserver(subs, remote)
+          type._callObserver(transaction, subs, remote)
         }
       })
-      this._transaction.changedParentTypes.forEach(function (events, type) {
+      transaction.changedParentTypes.forEach(function (events, type) {
         if (!type._deleted) {
           events = events
             .filter(event =>
@@ -71,12 +75,11 @@ export default class Y extends NamedEventHandler {
             })
           // we don't have to check for events.length
           // because there is no way events is empty..
-          type._deepEventHandler.callEventListeners(events)
+          type._deepEventHandler.callEventListeners(transaction, events)
         }
       })
       // when all changes & events are processed, emit afterTransaction event
-      this.emit('afterTransaction', this, remote)
+      this.emit('afterTransaction', this, transaction, remote)
-      this._transaction = null
     }
   }
   // fake _start for root properties (y.set('name', type))
@@ -92,17 +95,10 @@ export default class Y extends NamedEventHandler {
   define (name, TypeConstructor) {
     let id = new RootID(name, TypeConstructor)
     let type = this.os.get(id)
-    if (type === null) {
-      type = new TypeConstructor()
-      type._id = id
-      type._parent = this
-      type._integrate(this)
-      if (this.share[name] !== undefined) {
-        throw new Error('Type is already defined with a different constructor!')
-      }
-    }
     if (this.share[name] === undefined) {
       this.share[name] = type
+    } else if (this.share[name] !== type) {
+      throw new Error('Type is already defined with a different constructor')
     }
     return type
   }
@@ -168,7 +164,9 @@ Y.XmlText = YXmlText
 
 Y.utils = {
   BinaryDecoder,
-  UndoManager
+  UndoManager,
+  getRelativePosition,
+  fromRelativePosition
 }
 
 Y.debug = debug

test/y-xml.tests.js

@@ -230,8 +230,8 @@ test('filter node', async function xml14 (t) {
   var { users, xml0, xml1 } = await initArrays(t, { users: 3 })
   let dom0 = xml0.getDom()
   let dom1 = xml1.getDom()
-  let domFilter = (node, attrs) => {
+  let domFilter = (nodeName, attrs) => {
-    if (node.nodeName === 'H1') {
+    if (nodeName === 'H1') {
       return null
     } else {
       return attrs
@@ -251,8 +251,9 @@ test('filter attribute', async function xml15 (t) {
   var { users, xml0, xml1 } = await initArrays(t, { users: 3 })
   let dom0 = xml0.getDom()
   let dom1 = xml1.getDom()
-  let domFilter = (node, attrs) => {
+  let domFilter = (nodeName, attrs) => {
-    return attrs.filter(name => name !== 'hidden')
+    attrs.delete('hidden')
+    return attrs
   }
   xml0.setDomFilter(domFilter)
   xml1.setDomFilter(domFilter)
@@ -303,6 +304,51 @@ test('treeWalker', async function xml17 (t) {
   await compareUsers(t, users)
 })
 
+/**
+ * The expected behavior is that changes on your own dom (e.g. malicious attributes) persist.
+ * Yjs should just ignore them, never propagate those attributes.
+ * Incoming changes that contain malicious attributes should be deleted.
+ */
+test('Filtering remote changes', async function xmlFilteringRemote (t) {
+  var { users, xml0, xml1 } = await initArrays(t, { users: 3 })
+  xml0.setDomFilter(function (nodeName, attributes) {
+    attributes.delete('malicious')
+    if (nodeName === 'HIDEME') {
+      return null
+    } else if (attributes.has('isHidden')) {
+      return null
+    } else {
+      return attributes
+    }
+  })
+  // make sure that dom filters are active
+  // TODO: do not rely on .getDom for domFilters
+  xml0.getDom()
+  xml1.getDom()
+  let paragraph = new Y.XmlElement('p')
+  let hideMe = new Y.XmlElement('hideMe')
+  let span = new Y.XmlElement('span')
+  span.setAttribute('malicious', 'alert("give me money")')
+  let tag = new Y.XmlElement('tag')
+  tag.setAttribute('isHidden', 'true')
+  paragraph.insert(0, [hideMe, span, tag])
+  xml0.insert(0, [paragraph])
+  let tag2 = new Y.XmlElement('tag')
+  tag2.setAttribute('isHidden', 'true')
+  paragraph.insert(0, [tag2])
+  await flushAll(t, users)
+  // 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')])
+  await flushAll(t, users)
+
+  await compareUsers(t, users)
+})
+
 // TODO: move elements
 var xmlTransactions = [
   function attributeChange (t, user, chance) {

tests-lib/helper.js

@@ -153,12 +153,12 @@ export async function initArrays (t, opts) {
     result['array' + i] = y.define('array', Y.Array)
     result['map' + i] = y.define('map', Y.Map)
     result['xml' + i] = y.define('xml', Y.XmlElement)
-    y.get('xml', Y.Xml).setDomFilter(function (d, attrs) {
+    y.get('xml').setDomFilter(function (nodeName, attrs) {
-      if (d.nodeName === 'HIDDEN') {
+      if (nodeName === 'HIDDEN') {
         return null
-      } else {
-        return attrs.filter(a => a !== 'hidden')
       }
+      attrs.delete('hidden')
+      return attrs
     })
     y.on('afterTransaction', function () {
       for (let missing of y._missingStructs.values()) {

y.node.js

@@ -1,7 +1,7 @@
 
 /**
  * yjs - A framework for real-time p2p shared editing on any data
- * @version v13.0.0-29
+ * @version v13.0.0-35
  * @license MIT
  */
 
@@ -1899,7 +1899,7 @@ class EventHandler {
   removeAllEventListeners () {
     this.eventListeners = [];
   }
-  callEventListeners (event) {
+  callEventListeners (transaction, event) {
     for (var i = 0; i < this.eventListeners.length; i++) {
       try {
         const f = this.eventListeners[i];
@@ -1966,9 +1966,9 @@ class Type extends Item {
     }
     return path
   }
-  _callEventHandler (event) {
+  _callEventHandler (transaction, event) {
-    const changedParentTypes = this._y._transaction.changedParentTypes;
+    const changedParentTypes = transaction.changedParentTypes;
-    this._eventHandler.callEventListeners(event);
+    this._eventHandler.callEventListeners(transaction, event);
     let type = this;
     while (type !== this._y) {
       let events = changedParentTypes.get(type);
@@ -2211,8 +2211,8 @@ class YArrayEvent extends YEvent {
 }
 
 class YArray extends Type {
-  _callObserver (parentSubs, remote) {
+  _callObserver (transaction, parentSubs, remote) {
-    this._callEventHandler(new YArrayEvent(this, remote));
+    this._callEventHandler(transaction, new YArrayEvent(this, remote));
   }
   get (pos) {
     let n = this._start;
@@ -2429,8 +2429,8 @@ class YMapEvent extends YEvent {
 }
 
 class YMap extends Type {
-  _callObserver (parentSubs, remote) {
+  _callObserver (transaction, parentSubs, remote) {
-    this._callEventHandler(new YMapEvent(this, parentSubs, remote));
+    this._callEventHandler(transaction, new YMapEvent(this, parentSubs, remote));
   }
   toJSON () {
     const map = {};
@@ -2776,18 +2776,22 @@ function applyChangesFromDom (dom) {
   }
 }
 
-function reflectChangesOnDom (events) {
+function reflectChangesOnDom (events, _document) {
   // Make sure that no filtered attributes are applied to the structure
   // if they were, delete them
   /*
   events.forEach(event => {
     const target = event.target
-    const keys = this._domFilter(target.nodeName, Array.from(event.keysChanged))
+    if (event.attributesChanged === undefined) {
+      // event.target is Y.XmlText
+      return
+    }
+    const keys = this._domFilter(target.nodeName, Array.from(event.attributesChanged))
     if (keys === null) {
       target._delete()
     } else {
-      const removeKeys = new Set() // is a copy of event.keysChanged
+      const removeKeys = new Set() // is a copy of event.attributesChanged
-      event.keysChanged.forEach(key => { removeKeys.add(key) })
+      event.attributesChanged.forEach(key => { removeKeys.add(key) })
       keys.forEach(key => {
         // remove all accepted keys from removeKeys
         removeKeys.delete(key)
@@ -2820,9 +2824,9 @@ function reflectChangesOnDom (events) {
           });
           if (event.childListChanged) {
             // create fragment of undeleted nodes
-            const fragment = document.createDocumentFragment();
+            const fragment = _document.createDocumentFragment();
             yxml.forEach(function (t) {
-              fragment.append(t.getDom());
+              fragment.appendChild(t.getDom(_document));
             });
             // remove remainding nodes
             let lastChild = dom.lastChild;
@@ -2831,7 +2835,7 @@ function reflectChangesOnDom (events) {
               lastChild = dom.lastChild;
             }
             // insert fragment of undeleted nodes
-            dom.append(fragment);
+            dom.appendChild(fragment);
           }
         }
         /* TODO: smartscrolling
@@ -2894,13 +2898,13 @@ function getRelativePosition (type, offset) {
   } else {
     let t = type._start;
     while (t !== null) {
-      if (t._length >= offset) {
+      if (t._deleted === false) {
-        return [t._id.user, t._id.clock + offset - 1]
+        if (t._length >= offset) {
-      }
+          return [t._id.user, t._id.clock + offset - 1]
-      if (t._right === null) {
+        }
-        return [t._id.user, t._id.clock + t._length - 1]
+        if (t._right === null) {
-      }
+          return [t._id.user, t._id.clock + t._length - 1]
-      if (!t._deleted) {
+        }
         offset -= t._length;
       }
       t = t._right;
@@ -2952,7 +2956,7 @@ let relativeSelection = null;
 
 let beforeTransactionSelectionFixer;
 if (typeof getSelection !== 'undefined') {
-  beforeTransactionSelectionFixer = function _beforeTransactionSelectionFixer (y, remote) {
+  beforeTransactionSelectionFixer = function _beforeTransactionSelectionFixer (y, transaction, remote) {
     if (!remote) {
       return
     }
@@ -2975,7 +2979,7 @@ if (typeof getSelection !== 'undefined') {
   beforeTransactionSelectionFixer = function _fakeBeforeTransactionSelectionFixer () {};
 }
 
-function afterTransactionSelectionFixer (y, remote) {
+function afterTransactionSelectionFixer (y, transaction, remote) {
   if (relativeSelection === null || !remote) {
     return
   }
@@ -2991,20 +2995,29 @@ function afterTransactionSelectionFixer (y, remote) {
   if (from !== null) {
     let sel = fromRelativePosition(fromY, from);
     if (sel !== null) {
-      shouldUpdate = true;
+      let node = sel.type.getDom();
-      anchorNode = sel.type.getDom();
+      let offset = sel.offset;
-      anchorOffset = sel.offset;
+      if (node !== anchorNode || offset !== anchorOffset) {
+        anchorNode = node;
+        anchorOffset = offset;
+        shouldUpdate = true;
+      }
     }
   }
   if (to !== null) {
     let sel = fromRelativePosition(toY, to);
     if (sel !== null) {
-      focusNode = sel.type.getDom();
+      let node = sel.type.getDom();
-      focusOffset = sel.offset;
+      let offset = sel.offset;
-      shouldUpdate = true;
+      if (node !== focusNode || offset !== focusOffset) {
+        focusNode = node;
+        focusOffset = offset;
+        shouldUpdate = true;
+      }
     }
   }
   if (shouldUpdate) {
+    console.info('updating selection!!');
     browserSelection.setBaseAndExtent(
       anchorNode,
       anchorOffset,
@@ -3774,18 +3787,18 @@ function merge_tuples (diffs, start, length) {
 
 /* global MutationObserver */
 
-function domToYXml (parent, doms) {
+function domToYXml (parent, doms, _document) {
   const types = [];
   doms.forEach(d => {
     if (d._yxml != null && d._yxml !== false) {
       d._yxml._unbindFromDom();
     }
-    if (parent._domFilter(d, []) !== null) {
+    if (parent._domFilter(d.nodeName, new Map()) !== null) {
       let type;
       if (d.nodeType === d.TEXT_NODE) {
         type = new YXmlText(d);
       } else if (d.nodeType === d.ELEMENT_NODE) {
-        type = new YXmlFragment._YXmlElement(d, parent._domFilter);
+        type = new YXmlFragment._YXmlElement(d, parent._domFilter, _document);
       } else {
         throw new Error('Unsupported node!')
       }
@@ -3863,7 +3876,9 @@ class YXmlFragment extends YArray {
         } catch (e) {
           console.error(e);
         }
-        this._domObserver.takeRecords();
+        if (this._domObserver !== null) {
+          this._domObserver.takeRecords();
+        }
         token = true;
       }
     };
@@ -3907,8 +3922,8 @@ class YXmlFragment extends YArray {
       xml.setDomFilter(f);
     });
   }
-  _callObserver (parentSubs, remote) {
+  _callObserver (transaction, parentSubs, remote) {
-    this._callEventHandler(new YXmlEvent(this, parentSubs, remote));
+    this._callEventHandler(transaction, new YXmlEvent(this, parentSubs, remote));
   }
   toString () {
     return this.map(xml => xml.toString()).join('')
@@ -3927,113 +3942,167 @@ class YXmlFragment extends YArray {
       this._dom = null;
     }
   }
-  insertDomElementsAfter (prev, doms) {
+  insertDomElementsAfter (prev, doms, _document) {
-    const types = domToYXml(this, doms);
+    const types = domToYXml(this, doms, _document);
     this.insertAfter(prev, types);
     return types
   }
-  insertDomElements (pos, doms) {
+  insertDomElements (pos, doms, _document) {
-    const types = domToYXml(this, doms);
+    const types = domToYXml(this, doms, _document);
     this.insert(pos, types);
     return types
   }
   getDom () {
     return this._dom
   }
-  bindToDom (dom) {
+  bindToDom (dom, _document) {
     if (this._dom != null) {
       this._unbindFromDom();
     }
     if (dom._yxml != null) {
       dom._yxml._unbindFromDom();
     }
-    if (MutationObserver == null) {
-      throw new Error('Not able to bind to a DOM element, because MutationObserver is not available!')
-    }
     dom.innerHTML = '';
-    this._dom = dom;
-    dom._yxml = this;
     this.forEach(t => {
-      dom.insertBefore(t.getDom(), null);
+      dom.insertBefore(t.getDom(_document), null);
     });
-    this._bindToDom(dom);
+    this._bindToDom(dom, _document);
   }
   // binds to a dom element
   // Only call if dom and YXml are isomorph
-  _bindToDom (dom) {
+  _bindToDom (dom, _document) {
-    if (this._parent === null || this._parent._dom != null || typeof MutationObserver === 'undefined') {
+    _document = _document || document;
-      // only bind if parent did not already bind
+    this._dom = dom;
+    dom._yxml = this;
+    // TODO: refine this..
+    if ((this.constructor !== YXmlFragment && this._parent !== this._y) || this._parent === null) {
+      // TODO: only top level YXmlFragment can bind. Also allow YXmlElements..
       return
     }
-    this._y.on('beforeTransaction', () => {
-      this._domObserverListener(this._domObserver.takeRecords());
-    });
     this._y.on('beforeTransaction', beforeTransactionSelectionFixer);
     this._y.on('afterTransaction', afterTransactionSelectionFixer);
-    // Apply Y.Xml events to dom
+    const applyFilter = (type) => {
-    this.observeDeep(reflectChangesOnDom.bind(this));
+      if (type._deleted) {
-    // Apply Dom changes on Y.Xml
+        return
-    this._domObserverListener = mutations => {
+      }
-      this._mutualExclude(() => {
+      // check if type is a child of this
-        this._y.transact(() => {
+      let isChild = false;
-          let diffChildren = new Set();
+      let p = type;
-          mutations.forEach(mutation => {
+      while (p !== this._y) {
-            const dom = mutation.target;
+        if (p === this) {
-            const yxml = dom._yxml;
+          isChild = true;
-            if (yxml == null) {
+          break
-              // dom element is filtered
+        }
-              return
+        p = p._parent;
-            }
+      }
-            switch (mutation.type) {
+      if (!isChild) {
-              case 'characterData':
+        return
-                var diffs = diff_1(yxml.toString(), dom.nodeValue);
+      }
-                var pos = 0;
+      // filter attributes
-                for (var i = 0; i < diffs.length; i++) {
+      let attributes = new Map();
-                  var d = diffs[i];
+      if (type.getAttributes !== undefined) {
-                  if (d[0] === 0) { // EQUAL
+        let attrs = type.getAttributes();
-                    pos += d[1].length;
+        for (let key in attrs) {
-                  } else if (d[0] === -1) { // DELETE
+          attributes.set(key, attrs[key]);
-                    yxml.delete(pos, d[1].length);
+        }
-                  } else { // INSERT
+      }
-                    yxml.insert(pos, d[1]);
+      let result = this._domFilter(type.nodeName, new Map(attributes));
-                    pos += d[1].length;
+      if (result === null) {
-                  }
+        type._delete(this._y);
-                }
+      } else {
-                break
+        attributes.forEach((value, key) => {
-              case 'attributes':
+          if (!result.has(key)) {
-                let name = mutation.attributeName;
+            type.removeAttribute(key);
-                // check if filter accepts attribute
-                if (this._domFilter(dom, [name]).length > 0 && this.constructor !== YXmlFragment) {
-                  var val = dom.getAttribute(name);
-                  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) {
-            if (dom._yxml != null && dom._yxml !== false) {
-              applyChangesFromDom(dom);
-            }
           }
         });
-      });
+      }
     };
-    this._domObserver = new MutationObserver(this._domObserverListener);
+    this._y.on('beforeObserverCalls', function (y, transaction) {
-    this._domObserver.observe(dom, {
+      // apply dom filter to new and changed types
-      childList: true,
+      transaction.changedTypes.forEach(function (subs, type) {
-      attributes: true,
+        if (subs.size > 1 || !subs.has(null)) {
-      characterData: true,
+          // only apply changes on attributes
-      subtree: true
+          applyFilter(type);
+        }
+      });
+      transaction.newTypes.forEach(applyFilter);
     });
+    // Apply Y.Xml events to dom
+    this.observeDeep(events => {
+      reflectChangesOnDom.call(this, events, _document);
+    });
+    // Apply Dom changes on Y.Xml
+    if (typeof MutationObserver !== 'undefined') {
+      this._y.on('beforeTransaction', () => {
+        this._domObserverListener(this._domObserver.takeRecords());
+      });
+      this._domObserverListener = mutations => {
+        this._mutualExclude(() => {
+          this._y.transact(() => {
+            let diffChildren = new Set();
+            mutations.forEach(mutation => {
+              const dom = mutation.target;
+              const yxml = dom._yxml;
+              if (yxml == null) {
+                // dom element is filtered
+                return
+              }
+              switch (mutation.type) {
+                case 'characterData':
+                  var diffs = diff_1(yxml.toString(), dom.nodeValue);
+                  var pos = 0;
+                  for (var i = 0; i < diffs.length; i++) {
+                    var d = diffs[i];
+                    if (d[0] === 0) { // EQUAL
+                      pos += d[1].length;
+                    } else if (d[0] === -1) { // DELETE
+                      yxml.delete(pos, d[1].length);
+                    } else { // INSERT
+                      yxml.insert(pos, d[1]);
+                      pos += d[1].length;
+                    }
+                  }
+                  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 (this._domFilter(dom.nodeName, attributes).size > 0 && yxml.constructor !== YXmlFragment) {
+                    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) {
+              if (dom._yxml != null && dom._yxml !== false) {
+                applyChangesFromDom(dom);
+              }
+            }
+          });
+        });
+      };
+      this._domObserver = new MutationObserver(this._domObserverListener);
+      this._domObserver.observe(dom, {
+        childList: true,
+        attributes: true,
+        characterData: true,
+        subtree: true
+      });
+    }
     return dom
   }
   _logString () {
@@ -4045,7 +4114,7 @@ class YXmlFragment extends YArray {
 
 // import diff from 'fast-diff'
 class YXmlElement extends YXmlFragment {
-  constructor (arg1, arg2) {
+  constructor (arg1, arg2, _document) {
     super();
     this.nodeName = null;
     this._scrollElement = null;
@@ -4053,7 +4122,7 @@ class YXmlElement extends YXmlFragment {
       this.nodeName = arg1.toUpperCase();
     } else if (arg1 != null && arg1.nodeType != null && arg1.nodeType === arg1.ELEMENT_NODE) {
       this.nodeName = arg1.nodeName;
-      this._setDom(arg1);
+      this._setDom(arg1, _document);
     } else {
       this.nodeName = 'UNDEFINED';
     }
@@ -4066,28 +4135,25 @@ class YXmlElement extends YXmlFragment {
     struct.nodeName = this.nodeName;
     return struct
   }
-  _setDom (dom) {
+  _setDom (dom, _document) {
     if (this._dom != null) {
       throw new Error('Only call this method if you know what you are doing ;)')
     } else if (dom._yxml != null) { // TODO do i need to check this? - no.. but for dev purps..
       throw new Error('Already bound to an YXml type')
     } else {
-      this._dom = dom;
-      dom._yxml = this;
       // tag is already set in constructor
       // set attributes
-      let attrNames = [];
+      let attributes = new Map();
       for (let i = 0; i < dom.attributes.length; i++) {
-        attrNames.push(dom.attributes[i].name);
+        let attr = dom.attributes[i];
+        attributes.set(attr.name, attr.value);
       }
-      attrNames = this._domFilter(dom, attrNames);
+      attributes = this._domFilter(dom, attributes);
-      for (let i = 0; i < attrNames.length; i++) {
+      attributes.forEach((value, name) => {
-        let attrName = attrNames[i];
+        this.setAttribute(name, value);
-        let attrValue = dom.getAttribute(attrName);
+      });
-        this.setAttribute(attrName, attrValue);
+      this.insertDomElements(0, Array.prototype.slice.call(dom.childNodes), _document);
-      }
+      this._bindToDom(dom, _document);
-      this.insertDomElements(0, Array.prototype.slice.call(dom.childNodes));
-      this._bindToDom(dom);
       return dom
     }
   }
@@ -4146,7 +4212,9 @@ class YXmlElement extends YXmlFragment {
   getAttributes () {
     const obj = {};
     for (let [key, value] of this._map) {
-      obj[key] = value._content[0];
+      if (!value._deleted) {
+        obj[key] = value._content[0];
+      }
     }
     return obj
   }
@@ -4155,7 +4223,6 @@ class YXmlElement extends YXmlFragment {
     let dom = this._dom;
     if (dom == null) {
       dom = _document.createElement(this.nodeName);
-      this._dom = dom;
       dom._yxml = this;
       let attrs = this.getAttributes();
       for (let key in attrs) {
@@ -4164,7 +4231,7 @@ class YXmlElement extends YXmlFragment {
       this.forEach(yxml => {
         dom.appendChild(yxml.getDom(_document));
       });
-      this._bindToDom(dom);
+      this._bindToDom(dom, _document);
     }
     return dom
   }
@@ -4405,16 +4472,16 @@ class NamedEventHandler {
 }
 
 class ReverseOperation {
-  constructor (y) {
+  constructor (y, transaction) {
     this.created = new Date();
-    const beforeState = y._transaction.beforeState;
+    const beforeState = transaction.beforeState;
     this.toState = new ID(y.userID, y.ss.getState(y.userID) - 1);
     if (beforeState.has(y.userID)) {
       this.fromState = new ID(y.userID, beforeState.get(y.userID));
     } else {
       this.fromState = this.toState;
     }
-    this.deletedStructs = y._transaction.deletedStructs;
+    this.deletedStructs = transaction.deletedStructs;
   }
 }
 
@@ -4474,9 +4541,9 @@ class UndoManager {
     this._redoing = false;
     const y = scope._y;
     this.y = y;
-    y.on('afterTransaction', (y, remote) => {
+    y.on('afterTransaction', (y, transaction, remote) => {
-      if (!remote && y._transaction.changedParentTypes.has(scope)) {
+      if (!remote && transaction.changedParentTypes.has(scope)) {
-        let reverseOperation = new ReverseOperation(y);
+        let reverseOperation = new ReverseOperation(y, transaction);
         if (!this._undoing) {
           let lastUndoOp = this._undoBuffer.length > 0 ? this._undoBuffer[this._undoBuffer.length - 1] : null;
           if (lastUndoOp !== null && reverseOperation.created - lastUndoOp.created <= options.captureTimeout) {
@@ -5432,8 +5499,8 @@ class Y$1 extends NamedEventHandler {
   transact (f, remote = false) {
     let initialCall = this._transaction === null;
     if (initialCall) {
-      this.emit('beforeTransaction', this, remote);
       this._transaction = new Transaction(this);
+      this.emit('beforeTransaction', this, this._transaction, remote);
     }
     try {
       f(this);
@@ -5441,13 +5508,16 @@ class Y$1 extends NamedEventHandler {
       console.error(e);
     }
     if (initialCall) {
+      this.emit('beforeObserverCalls', this, this._transaction, remote);
+      const transaction = this._transaction;
+      this._transaction = null;
       // emit change events on changed types
-      this._transaction.changedTypes.forEach(function (subs, type) {
+      transaction.changedTypes.forEach(function (subs, type) {
         if (!type._deleted) {
-          type._callObserver(subs, remote);
+          type._callObserver(transaction, subs, remote);
         }
       });
-      this._transaction.changedParentTypes.forEach(function (events, type) {
+      transaction.changedParentTypes.forEach(function (events, type) {
         if (!type._deleted) {
           events = events
             .filter(event =>
@@ -5459,12 +5529,11 @@ class Y$1 extends NamedEventHandler {
             });
           // we don't have to check for events.length
           // because there is no way events is empty..
-          type._deepEventHandler.callEventListeners(events);
+          type._deepEventHandler.callEventListeners(transaction, events);
         }
       });
       // when all changes & events are processed, emit afterTransaction event
-      this.emit('afterTransaction', this, remote);
+      this.emit('afterTransaction', this, transaction, remote);
-      this._transaction = null;
     }
   }
   // fake _start for root properties (y.set('name', type))
@@ -5480,17 +5549,10 @@ class Y$1 extends NamedEventHandler {
   define (name, TypeConstructor) {
     let id = new RootID(name, TypeConstructor);
     let type = this.os.get(id);
-    if (type === null) {
-      type = new TypeConstructor();
-      type._id = id;
-      type._parent = this;
-      type._integrate(this);
-      if (this.share[name] !== undefined) {
-        throw new Error('Type is already defined with a different constructor!')
-      }
-    }
     if (this.share[name] === undefined) {
       this.share[name] = type;
+    } else if (this.share[name] !== type) {
+      throw new Error('Type is already defined with a different constructor')
     }
     return type
   }
@@ -5556,7 +5618,9 @@ Y$1.XmlText = YXmlText;
 
 Y$1.utils = {
   BinaryDecoder,
-  UndoManager
+  UndoManager,
+  getRelativePosition,
+  fromRelativePosition
 };
 
 Y$1.debug = browser;

y.test.js

@@ -1448,10 +1448,6 @@ function logID (id) {
   }
 }
 
-/**
- * Delete all items in an ID-range
- * TODO: implement getItemCleanStartNode for better performance (only one lookup)
- */
 function deleteItemRange (y, user, clock, range) {
   const createDelete = y.connector._forwardAppliedStructs;
   let item = y.os.getItemCleanStart(new ID(user, clock));
@@ -1556,13 +1552,6 @@ function transactionTypeChanged (y, type, sub) {
   }
 }
 
-/**
- * Helper utility to split an Item (see _splitAt)
- * - copy all properties from a to b
- * - connect a to b
- * - assigns the correct _id
- * - save b to os
- */
 function splitHelper (y, a, b, diff) {
   const aID = a._id;
   b._id = new ID(aID.user, aID.clock + diff);
@@ -1896,7 +1885,7 @@ class EventHandler {
   removeAllEventListeners () {
     this.eventListeners = [];
   }
-  callEventListeners (event) {
+  callEventListeners (transaction, event) {
     for (var i = 0; i < this.eventListeners.length; i++) {
       try {
         const f = this.eventListeners[i];
@@ -1913,7 +1902,6 @@ class EventHandler {
   }
 }
 
-// restructure children as if they were inserted one after another
 function integrateChildren (y, start) {
   let right;
   do {
@@ -1963,9 +1951,9 @@ class Type extends Item {
     }
     return path
   }
-  _callEventHandler (event) {
+  _callEventHandler (transaction, event) {
-    const changedParentTypes = this._y._transaction.changedParentTypes;
+    const changedParentTypes = transaction.changedParentTypes;
-    this._eventHandler.callEventListeners(event);
+    this._eventHandler.callEventListeners(transaction, event);
     let type = this;
     while (type !== this._y) {
       let events = changedParentTypes.get(type);
@@ -2208,8 +2196,8 @@ class YArrayEvent extends YEvent {
 }
 
 class YArray extends Type {
-  _callObserver (parentSubs, remote) {
+  _callObserver (transaction, parentSubs, remote) {
-    this._callEventHandler(new YArrayEvent(this, remote));
+    this._callEventHandler(transaction, new YArrayEvent(this, remote));
   }
   get (pos) {
     let n = this._start;
@@ -2426,8 +2414,8 @@ class YMapEvent extends YEvent {
 }
 
 class YMap extends Type {
-  _callObserver (parentSubs, remote) {
+  _callObserver (transaction, parentSubs, remote) {
-    this._callEventHandler(new YMapEvent(this, parentSubs, remote));
+    this._callEventHandler(transaction, new YMapEvent(this, parentSubs, remote));
   }
   toJSON () {
     const map = {};
@@ -2773,18 +2761,22 @@ function applyChangesFromDom (dom) {
   }
 }
 
-function reflectChangesOnDom (events) {
+function reflectChangesOnDom (events, _document) {
   // Make sure that no filtered attributes are applied to the structure
   // if they were, delete them
   /*
   events.forEach(event => {
     const target = event.target
-    const keys = this._domFilter(target.nodeName, Array.from(event.keysChanged))
+    if (event.attributesChanged === undefined) {
+      // event.target is Y.XmlText
+      return
+    }
+    const keys = this._domFilter(target.nodeName, Array.from(event.attributesChanged))
     if (keys === null) {
       target._delete()
     } else {
-      const removeKeys = new Set() // is a copy of event.keysChanged
+      const removeKeys = new Set() // is a copy of event.attributesChanged
-      event.keysChanged.forEach(key => { removeKeys.add(key) })
+      event.attributesChanged.forEach(key => { removeKeys.add(key) })
       keys.forEach(key => {
         // remove all accepted keys from removeKeys
         removeKeys.delete(key)
@@ -2817,9 +2809,9 @@ function reflectChangesOnDom (events) {
           });
           if (event.childListChanged) {
             // create fragment of undeleted nodes
-            const fragment = document.createDocumentFragment();
+            const fragment = _document.createDocumentFragment();
             yxml.forEach(function (t) {
-              fragment.append(t.getDom());
+              fragment.appendChild(t.getDom(_document));
             });
             // remove remainding nodes
             let lastChild = dom.lastChild;
@@ -2828,7 +2820,7 @@ function reflectChangesOnDom (events) {
               lastChild = dom.lastChild;
             }
             // insert fragment of undeleted nodes
-            dom.append(fragment);
+            dom.appendChild(fragment);
           }
         }
         /* TODO: smartscrolling
@@ -2949,7 +2941,7 @@ let relativeSelection = null;
 
 let beforeTransactionSelectionFixer;
 if (typeof getSelection !== 'undefined') {
-  beforeTransactionSelectionFixer = function _beforeTransactionSelectionFixer (y, remote) {
+  beforeTransactionSelectionFixer = function _beforeTransactionSelectionFixer (y, transaction, remote) {
     if (!remote) {
       return
     }
@@ -2972,7 +2964,7 @@ if (typeof getSelection !== 'undefined') {
   beforeTransactionSelectionFixer = function _fakeBeforeTransactionSelectionFixer () {};
 }
 
-function afterTransactionSelectionFixer (y, remote) {
+function afterTransactionSelectionFixer (y, transaction, remote) {
   if (relativeSelection === null || !remote) {
     return
   }
@@ -3771,18 +3763,18 @@ function merge_tuples (diffs, start, length) {
 
 /* global MutationObserver */
 
-function domToYXml (parent, doms) {
+function domToYXml (parent, doms, _document) {
   const types = [];
   doms.forEach(d => {
     if (d._yxml != null && d._yxml !== false) {
       d._yxml._unbindFromDom();
     }
-    if (parent._domFilter(d, []) !== null) {
+    if (parent._domFilter(d.nodeName, new Map()) !== null) {
       let type;
       if (d.nodeType === d.TEXT_NODE) {
         type = new YXmlText(d);
       } else if (d.nodeType === d.ELEMENT_NODE) {
-        type = new YXmlFragment._YXmlElement(d, parent._domFilter);
+        type = new YXmlFragment._YXmlElement(d, parent._domFilter, _document);
       } else {
         throw new Error('Unsupported node!')
       }
@@ -3860,7 +3852,9 @@ class YXmlFragment extends YArray {
         } catch (e) {
           console.error(e);
         }
-        this._domObserver.takeRecords();
+        if (this._domObserver !== null) {
+          this._domObserver.takeRecords();
+        }
         token = true;
       }
     };
@@ -3904,8 +3898,8 @@ class YXmlFragment extends YArray {
       xml.setDomFilter(f);
     });
   }
-  _callObserver (parentSubs, remote) {
+  _callObserver (transaction, parentSubs, remote) {
-    this._callEventHandler(new YXmlEvent(this, parentSubs, remote));
+    this._callEventHandler(transaction, new YXmlEvent(this, parentSubs, remote));
   }
   toString () {
     return this.map(xml => xml.toString()).join('')
@@ -3924,113 +3918,167 @@ class YXmlFragment extends YArray {
       this._dom = null;
     }
   }
-  insertDomElementsAfter (prev, doms) {
+  insertDomElementsAfter (prev, doms, _document) {
-    const types = domToYXml(this, doms);
+    const types = domToYXml(this, doms, _document);
     this.insertAfter(prev, types);
     return types
   }
-  insertDomElements (pos, doms) {
+  insertDomElements (pos, doms, _document) {
-    const types = domToYXml(this, doms);
+    const types = domToYXml(this, doms, _document);
     this.insert(pos, types);
     return types
   }
   getDom () {
     return this._dom
   }
-  bindToDom (dom) {
+  bindToDom (dom, _document) {
     if (this._dom != null) {
       this._unbindFromDom();
     }
     if (dom._yxml != null) {
       dom._yxml._unbindFromDom();
     }
-    if (MutationObserver == null) {
-      throw new Error('Not able to bind to a DOM element, because MutationObserver is not available!')
-    }
     dom.innerHTML = '';
-    this._dom = dom;
-    dom._yxml = this;
     this.forEach(t => {
-      dom.insertBefore(t.getDom(), null);
+      dom.insertBefore(t.getDom(_document), null);
     });
-    this._bindToDom(dom);
+    this._bindToDom(dom, _document);
   }
   // binds to a dom element
   // Only call if dom and YXml are isomorph
-  _bindToDom (dom) {
+  _bindToDom (dom, _document) {
-    if (this._parent === null || this._parent._dom != null || typeof MutationObserver === 'undefined') {
+    _document = _document || document;
-      // only bind if parent did not already bind
+    this._dom = dom;
+    dom._yxml = this;
+    // TODO: refine this..
+    if ((this.constructor !== YXmlFragment && this._parent !== this._y) || this._parent === null) {
+      // TODO: only top level YXmlFragment can bind. Also allow YXmlElements..
       return
     }
-    this._y.on('beforeTransaction', () => {
-      this._domObserverListener(this._domObserver.takeRecords());
-    });
     this._y.on('beforeTransaction', beforeTransactionSelectionFixer);
     this._y.on('afterTransaction', afterTransactionSelectionFixer);
-    // Apply Y.Xml events to dom
+    const applyFilter = (type) => {
-    this.observeDeep(reflectChangesOnDom.bind(this));
+      if (type._deleted) {
-    // Apply Dom changes on Y.Xml
+        return
-    this._domObserverListener = mutations => {
+      }
-      this._mutualExclude(() => {
+      // check if type is a child of this
-        this._y.transact(() => {
+      let isChild = false;
-          let diffChildren = new Set();
+      let p = type;
-          mutations.forEach(mutation => {
+      while (p !== this._y) {
-            const dom = mutation.target;
+        if (p === this) {
-            const yxml = dom._yxml;
+          isChild = true;
-            if (yxml == null) {
+          break
-              // dom element is filtered
+        }
-              return
+        p = p._parent;
-            }
+      }
-            switch (mutation.type) {
+      if (!isChild) {
-              case 'characterData':
+        return
-                var diffs = diff_1(yxml.toString(), dom.nodeValue);
+      }
-                var pos = 0;
+      // filter attributes
-                for (var i = 0; i < diffs.length; i++) {
+      let attributes = new Map();
-                  var d = diffs[i];
+      if (type.getAttributes !== undefined) {
-                  if (d[0] === 0) { // EQUAL
+        let attrs = type.getAttributes();
-                    pos += d[1].length;
+        for (let key in attrs) {
-                  } else if (d[0] === -1) { // DELETE
+          attributes.set(key, attrs[key]);
-                    yxml.delete(pos, d[1].length);
+        }
-                  } else { // INSERT
+      }
-                    yxml.insert(pos, d[1]);
+      let result = this._domFilter(type.nodeName, new Map(attributes));
-                    pos += d[1].length;
+      if (result === null) {
-                  }
+        type._delete(this._y);
-                }
+      } else {
-                break
+        attributes.forEach((value, key) => {
-              case 'attributes':
+          if (!result.has(key)) {
-                let name = mutation.attributeName;
+            type.removeAttribute(key);
-                // check if filter accepts attribute
-                if (this._domFilter(dom, [name]).length > 0 && this.constructor !== YXmlFragment) {
-                  var val = dom.getAttribute(name);
-                  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) {
-            if (dom._yxml != null && dom._yxml !== false) {
-              applyChangesFromDom(dom);
-            }
           }
         });
-      });
+      }
     };
-    this._domObserver = new MutationObserver(this._domObserverListener);
+    this._y.on('beforeObserverCalls', function (y, transaction) {
-    this._domObserver.observe(dom, {
+      // apply dom filter to new and changed types
-      childList: true,
+      transaction.changedTypes.forEach(function (subs, type) {
-      attributes: true,
+        if (subs.size > 1 || !subs.has(null)) {
-      characterData: true,
+          // only apply changes on attributes
-      subtree: true
+          applyFilter(type);
+        }
+      });
+      transaction.newTypes.forEach(applyFilter);
     });
+    // Apply Y.Xml events to dom
+    this.observeDeep(events => {
+      reflectChangesOnDom.call(this, events, _document);
+    });
+    // Apply Dom changes on Y.Xml
+    if (typeof MutationObserver !== 'undefined') {
+      this._y.on('beforeTransaction', () => {
+        this._domObserverListener(this._domObserver.takeRecords());
+      });
+      this._domObserverListener = mutations => {
+        this._mutualExclude(() => {
+          this._y.transact(() => {
+            let diffChildren = new Set();
+            mutations.forEach(mutation => {
+              const dom = mutation.target;
+              const yxml = dom._yxml;
+              if (yxml == null) {
+                // dom element is filtered
+                return
+              }
+              switch (mutation.type) {
+                case 'characterData':
+                  var diffs = diff_1(yxml.toString(), dom.nodeValue);
+                  var pos = 0;
+                  for (var i = 0; i < diffs.length; i++) {
+                    var d = diffs[i];
+                    if (d[0] === 0) { // EQUAL
+                      pos += d[1].length;
+                    } else if (d[0] === -1) { // DELETE
+                      yxml.delete(pos, d[1].length);
+                    } else { // INSERT
+                      yxml.insert(pos, d[1]);
+                      pos += d[1].length;
+                    }
+                  }
+                  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 (this._domFilter(dom.nodeName, attributes).size > 0 && yxml.constructor !== YXmlFragment) {
+                    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) {
+              if (dom._yxml != null && dom._yxml !== false) {
+                applyChangesFromDom(dom);
+              }
+            }
+          });
+        });
+      };
+      this._domObserver = new MutationObserver(this._domObserverListener);
+      this._domObserver.observe(dom, {
+        childList: true,
+        attributes: true,
+        characterData: true,
+        subtree: true
+      });
+    }
     return dom
   }
   _logString () {
@@ -4042,7 +4090,7 @@ class YXmlFragment extends YArray {
 
 // import diff from 'fast-diff'
 class YXmlElement extends YXmlFragment {
-  constructor (arg1, arg2) {
+  constructor (arg1, arg2, _document) {
     super();
     this.nodeName = null;
     this._scrollElement = null;
@@ -4050,7 +4098,7 @@ class YXmlElement extends YXmlFragment {
       this.nodeName = arg1.toUpperCase();
     } else if (arg1 != null && arg1.nodeType != null && arg1.nodeType === arg1.ELEMENT_NODE) {
       this.nodeName = arg1.nodeName;
-      this._setDom(arg1);
+      this._setDom(arg1, _document);
     } else {
       this.nodeName = 'UNDEFINED';
     }
@@ -4063,28 +4111,25 @@ class YXmlElement extends YXmlFragment {
     struct.nodeName = this.nodeName;
     return struct
   }
-  _setDom (dom) {
+  _setDom (dom, _document) {
     if (this._dom != null) {
       throw new Error('Only call this method if you know what you are doing ;)')
     } else if (dom._yxml != null) { // TODO do i need to check this? - no.. but for dev purps..
       throw new Error('Already bound to an YXml type')
     } else {
-      this._dom = dom;
-      dom._yxml = this;
       // tag is already set in constructor
       // set attributes
-      let attrNames = [];
+      let attributes = new Map();
       for (let i = 0; i < dom.attributes.length; i++) {
-        attrNames.push(dom.attributes[i].name);
+        let attr = dom.attributes[i];
+        attributes.set(attr.name, attr.value);
       }
-      attrNames = this._domFilter(dom, attrNames);
+      attributes = this._domFilter(dom, attributes);
-      for (let i = 0; i < attrNames.length; i++) {
+      attributes.forEach((value, name) => {
-        let attrName = attrNames[i];
+        this.setAttribute(name, value);
-        let attrValue = dom.getAttribute(attrName);
+      });
-        this.setAttribute(attrName, attrValue);
+      this.insertDomElements(0, Array.prototype.slice.call(dom.childNodes), _document);
-      }
+      this._bindToDom(dom, _document);
-      this.insertDomElements(0, Array.prototype.slice.call(dom.childNodes));
-      this._bindToDom(dom);
       return dom
     }
   }
@@ -4143,7 +4188,9 @@ class YXmlElement extends YXmlFragment {
   getAttributes () {
     const obj = {};
     for (let [key, value] of this._map) {
-      obj[key] = value._content[0];
+      if (!value._deleted) {
+        obj[key] = value._content[0];
+      }
     }
     return obj
   }
@@ -4152,7 +4199,6 @@ class YXmlElement extends YXmlFragment {
     let dom = this._dom;
     if (dom == null) {
       dom = _document.createElement(this.nodeName);
-      this._dom = dom;
       dom._yxml = this;
       let attrs = this.getAttributes();
       for (let key in attrs) {
@@ -4161,7 +4207,7 @@ class YXmlElement extends YXmlFragment {
       this.forEach(yxml => {
         dom.appendChild(yxml.getDom(_document));
       });
-      this._bindToDom(dom);
+      this._bindToDom(dom, _document);
     }
     return dom
   }
@@ -4402,16 +4448,16 @@ class NamedEventHandler {
 }
 
 class ReverseOperation {
-  constructor (y) {
+  constructor (y, transaction) {
     this.created = new Date();
-    const beforeState = y._transaction.beforeState;
+    const beforeState = transaction.beforeState;
     this.toState = new ID(y.userID, y.ss.getState(y.userID) - 1);
     if (beforeState.has(y.userID)) {
       this.fromState = new ID(y.userID, beforeState.get(y.userID));
     } else {
       this.fromState = this.toState;
     }
-    this.deletedStructs = y._transaction.deletedStructs;
+    this.deletedStructs = transaction.deletedStructs;
   }
 }
 
@@ -4471,9 +4517,9 @@ class UndoManager {
     this._redoing = false;
     const y = scope._y;
     this.y = y;
-    y.on('afterTransaction', (y, remote) => {
+    y.on('afterTransaction', (y, transaction, remote) => {
-      if (!remote && y._transaction.changedParentTypes.has(scope)) {
+      if (!remote && transaction.changedParentTypes.has(scope)) {
-        let reverseOperation = new ReverseOperation(y);
+        let reverseOperation = new ReverseOperation(y, transaction);
         if (!this._undoing) {
           let lastUndoOp = this._undoBuffer.length > 0 ? this._undoBuffer[this._undoBuffer.length - 1] : null;
           if (lastUndoOp !== null && reverseOperation.created - lastUndoOp.created <= options.captureTimeout) {
@@ -5429,8 +5475,8 @@ class Y$2 extends NamedEventHandler {
   transact (f, remote = false) {
     let initialCall = this._transaction === null;
     if (initialCall) {
-      this.emit('beforeTransaction', this, remote);
       this._transaction = new Transaction(this);
+      this.emit('beforeTransaction', this, this._transaction, remote);
     }
     try {
       f(this);
@@ -5438,13 +5484,16 @@ class Y$2 extends NamedEventHandler {
       console.error(e);
     }
     if (initialCall) {
+      this.emit('beforeObserverCalls', this, this._transaction, remote);
+      const transaction = this._transaction;
+      this._transaction = null;
       // emit change events on changed types
-      this._transaction.changedTypes.forEach(function (subs, type) {
+      transaction.changedTypes.forEach(function (subs, type) {
         if (!type._deleted) {
-          type._callObserver(subs, remote);
+          type._callObserver(transaction, subs, remote);
         }
       });
-      this._transaction.changedParentTypes.forEach(function (events, type) {
+      transaction.changedParentTypes.forEach(function (events, type) {
         if (!type._deleted) {
           events = events
             .filter(event =>
@@ -5456,12 +5505,11 @@ class Y$2 extends NamedEventHandler {
             });
           // we don't have to check for events.length
           // because there is no way events is empty..
-          type._deepEventHandler.callEventListeners(events);
+          type._deepEventHandler.callEventListeners(transaction, events);
         }
       });
       // when all changes & events are processed, emit afterTransaction event
-      this.emit('afterTransaction', this, remote);
+      this.emit('afterTransaction', this, transaction, remote);
-      this._transaction = null;
     }
   }
   // fake _start for root properties (y.set('name', type))
@@ -5477,17 +5525,10 @@ class Y$2 extends NamedEventHandler {
   define (name, TypeConstructor) {
     let id = new RootID(name, TypeConstructor);
     let type = this.os.get(id);
-    if (type === null) {
-      type = new TypeConstructor();
-      type._id = id;
-      type._parent = this;
-      type._integrate(this);
-      if (this.share[name] !== undefined) {
-        throw new Error('Type is already defined with a different constructor!')
-      }
-    }
     if (this.share[name] === undefined) {
       this.share[name] = type;
+    } else if (this.share[name] !== type) {
+      throw new Error('Type is already defined with a different constructor')
     }
     return type
   }
@@ -5553,7 +5594,9 @@ Y$2.XmlText = YXmlText;
 
 Y$2.utils = {
   BinaryDecoder,
-  UndoManager
+  UndoManager,
+  getRelativePosition,
+  fromRelativePosition
 };
 
 Y$2.debug = browser;
@@ -13079,19 +13122,6 @@ var chance_1 = createCommonjsModule(function (module, exports) {
 
 var chance_2 = chance_1.Chance;
 
-/**
- * Try to merge all items in os with their successors.
- *
- * Some transformations (like delete) fragment items.
- * Item(c: 'ab') + Delete(1,1) + Delete(0, 1) -> Item(c: 'a',deleted);Item(c: 'b',deleted)
- *
- * This functions merges the fragmented nodes together:
- * Item(c: 'a',deleted);Item(c: 'b',deleted) -> Item(c: 'ab', deleted)
- *
- * TODO: The Tree implementation does not support deletions in-spot.
- *       This is why all deletions must be performed after the traversal.
- *
- */
 function defragmentItemContent (y) {
   const os = y.os;
   if (os.length < 2) {
@@ -13249,12 +13279,12 @@ async function initArrays (t, opts) {
     result['array' + i] = y.define('array', Y$1.Array);
     result['map' + i] = y.define('map', Y$1.Map);
     result['xml' + i] = y.define('xml', Y$1.XmlElement);
-    y.get('xml', Y$1.Xml).setDomFilter(function (d, attrs) {
+    y.get('xml').setDomFilter(function (nodeName, attrs) {
-      if (d.nodeName === 'HIDDEN') {
+      if (nodeName === 'HIDDEN') {
         return null
-      } else {
-        return attrs.filter(a => a !== 'hidden')
       }
+      attrs.delete('hidden');
+      return attrs
     });
     y.on('afterTransaction', function () {
       for (let missing of y._missingStructs.values()) {
@@ -18914,6 +18944,9 @@ function test (testDescription, ...args) {
   testHandler.register(testCase);
 }
 
+
+//# sourceMappingURL=cutest.mjs.map
+
 test('set property', async function xml0 (t) {
   var { users, xml0, xml1 } = await initArrays(t, { users: 2 });
   xml0.setAttribute('height', 10);
@@ -19143,8 +19176,8 @@ test('filter node', async function xml14 (t) {
   var { users, xml0, xml1 } = await initArrays(t, { users: 3 });
   let dom0 = xml0.getDom();
   let dom1 = xml1.getDom();
-  let domFilter = (node, attrs) => {
+  let domFilter = (nodeName, attrs) => {
-    if (node.nodeName === 'H1') {
+    if (nodeName === 'H1') {
       return null
     } else {
       return attrs
@@ -19164,8 +19197,9 @@ test('filter attribute', async function xml15 (t) {
   var { users, xml0, xml1 } = await initArrays(t, { users: 3 });
   let dom0 = xml0.getDom();
   let dom1 = xml1.getDom();
-  let domFilter = (node, attrs) => {
+  let domFilter = (nodeName, attrs) => {
-    return attrs.filter(name => name !== 'hidden')
+    attrs.delete('hidden');
+    return attrs
   };
   xml0.setDomFilter(domFilter);
   xml1.setDomFilter(domFilter);
@@ -19216,6 +19250,51 @@ test('treeWalker', async function xml17 (t) {
   await compareUsers(t, users);
 });
 
+/**
+ * The expected behavior is that changes on your own dom (e.g. malicious attributes) persist.
+ * Yjs should just ignore them, never propagate those attributes.
+ * Incoming changes that contain malicious attributes should be deleted.
+ */
+test('Filtering remote changes', async function xmlFilteringRemote (t) {
+  var { users, xml0, xml1 } = await initArrays(t, { users: 3 });
+  xml0.setDomFilter(function (nodeName, attributes) {
+    attributes.delete('malicious');
+    if (nodeName === 'HIDEME') {
+      return null
+    } else if (attributes.has('isHidden')) {
+      return null
+    } else {
+      return attributes
+    }
+  });
+  // make sure that dom filters are active
+  // TODO: do not rely on .getDom for domFilters
+  xml0.getDom();
+  xml1.getDom();
+  let paragraph = new Y$1.XmlElement('p');
+  let hideMe = new Y$1.XmlElement('hideMe');
+  let span = new Y$1.XmlElement('span');
+  span.setAttribute('malicious', 'alert("give me money")');
+  let tag = new Y$1.XmlElement('tag');
+  tag.setAttribute('isHidden', 'true');
+  paragraph.insert(0, [hideMe, span, tag]);
+  xml0.insert(0, [paragraph]);
+  let tag2 = new Y$1.XmlElement('tag');
+  tag2.setAttribute('isHidden', 'true');
+  paragraph.insert(0, [tag2]);
+  await flushAll(t, users);
+  // 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')]);
+  await flushAll(t, users);
+
+  await compareUsers(t, users);
+});
+
 // TODO: move elements
 var xmlTransactions = [
   function attributeChange (t, user, chance) {