Coder Social home page Coder Social logo

y-xml's Issues

y.val('something').getDom() !== yxml.getDom() causing fail in syncing

I have the following HTML code

  <body>
    <p id="container">This is default.</p>
  </body>

If I create an object this way :

    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);

and then go to the console and do in one of two browser : y.val("test").getDom().textContent = "Changed in local.", then the value gets updated in one of the two browser.
In the other browser, if I type y.val('test').getDom().textContent, I get "Changed in local" but yxml.getDom().textContent gives me "This is default" as well as p.textContent.

TypeError when asking y-xml.getDom() object

Hi,
I get a TypeError: this._model is undefined when I try to cal Y-XML.getDom.
The code I'm using is:

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

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

 connector.whenSynced(function() {
   y.val("xml", yxml);
 });
 yxml.getDom(); // ← error here

Existing comment node in html file cause problem when try to sync first time

I have the exisiting dom I want to sync.

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

I can confirm the error below occurs with both normal html and svg element with comment node inside.
The reason is this._model.val("tagname") returns undefined.

Element.prototype.getDom = function() { 
      var attr_name, attr_value, child, dom, i, setClasses, that, _i, _len, _ref, _ref1;
      this._checkForModel();
      if (this._dom == null) {
        //added support for svg elements using document.createElementNS
        var svg = this._model.val("tagname").match(/g|svg|rect|line|path|ellipse|text|tspan|defs|symbol|use|linearGradient|pattern/g);
        if (svg != null) {
          this._dom = document.createElementNS('http://www.w3.org/2000/svg', this._model.val("tagname"));
        }
        else {
          this._dom = document.createElement(this._model.val("tagname"));
        }

getdom undefined

TypeError: this._model.val(...) is undefined

When I do a modification in one browser, the following error is thrown in the other one : TypeError: this._model.val(...) is undefined (in FF).

My code is

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);

DOM Reference .replaceChild() not working properly

I want to create an contentEditable area that get synchronized using Yjs-Xml. Since their is no "bind" function for now, I decided to add a callback to the input event which update the edited textNode with it's new content.
When I do that, I get the error TypeError: t._y_xml is undefined.

Here's my code.

<!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="config.js"></script>
        <!-- <script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script> -->
    </head>
    <body>
        <div id="shared_div" contentEditable="true">
            <h1> yjs HTML </h1>
            <p> Collaborative editing on HTML with <a href="https://github.com/rwth-acis/yjs/">yjs</a>
            </p>
        </div>
    </body>
    <script src="main.js"></script>
</html>

and the following js file:

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();
});

require('y-xml') doesn't return a function.

Loading y-xml using require('y-xml') returns 'undefined', so when I use require('y-xml')(Y) it throws error.

I'm trying to implement xml-example by using requirejs.

I am able to load y-memory, y-array, y-map and all other modules and initialize with 'Y' without problems, but can't do that for y-xml.

I have github-repo which has y-xml implementation, also I have created a github-page reproduce the error.

Thank you for your great work.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.