Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Yjs test</title>
<script src="jquery.min.js"></script>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<script src="bower_components/yjs/y.js"></script>
<script src="bower_components/yjs/y-object.js"></script>
<script src="bower_components/y-list/y-list.js"></script>
<script src="bower_components/y-xml/y-xml.js"></script>
<script src="bower_components/y-webrtc/y-webrtc.js"></script>
<script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
</head>
<body>
<div id="shared_div" contentEditable>
<h1> yjs HTML </h1>
<p> Collaborative editing on HTML with <a href="https://github.com/rwth-acis/yjs/">yjs</a>
</div>
<div id="" style="display: none"></div>
</body>
<script src="main.js"></script>
</html>
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();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment