y-js / y-xml Goto Github PK

<div id="shared_canvas">
  <!-- simple comment node -->
</div>

function track() {
    console.log("In track");
    var selection = window.getSelection();

    var range = document.getSelection().getRangeAt(0),
        old = selection.anchorNode;
    var so = range.startOffset,
        eo = range.endOffset,
        newer = document.createTextNode(old.nodeValue),
        parent = old.parentNode;

    parent.replaceChild(newer, old);

    // Replace the carret at the right position
    var newRange = document.createRange();
    newRange.selectNode(newer);
    newRange.setStart(newer, so);
    newRange.setEnd(newer, eo);

    selection.removeAllRanges();
    selection.addRange(newRange);
    console.log("Out track");
}



// Initialize Yjs variables
var connector = new Y.WebRTC("xml-webrtc-example"); //, {url: config.server});
var y = new Y(connector);

connector.debug = true;

// Set up shared object
connector.whenSynced(function(){
    if(y.val("dom") == null){
        y.val("dom", new Y.Xml($('#shared_div').get(0)));
    }
});
// Add callback to yjs
y.observe(function(events){
    for(i in events){
        if(events[i].type === "add" || events[i].type === "update") {
            if (events[i].name === "dom") {
                // Replace by new dom
                $('#shared_div').replaceWith(y.val("dom").getDom());
            }
        }
        console.log(events[i]);
    }
});

// Add callback to any change
$('#shared_div').on("input", function(){
    track();
});

    var connector = new Y.WebRTC("test", {url: config.server});

    var y = new Y(connector);
    var p = document.getElementById("container");
    var yxml = new Y.Xml(p);

    y.val("test", yxml);

var connector = new Y.WebRTC("test", {url: config.server});

var y = new Y(connector);
var p = document.getElementById("test");
var yxml = new Y.Xml(p);

y.val("xml", yxml);