Update TogetherJS When New Codemirror Instance is Appended

Question

I'm working on an experimental collaborative web based IDE using Codemirror, but after I append a new instance of Codemirror. It works fine on the machine that appended it (as long as togetherjs isn't running), but when I tested it with my other laptop (chromebook and macbook) to test collaboration, When I appended one, the macbook showed two, then when I appended another from my chromebook it showed 5 from my macbook while 3 showed on my chromebook. Giving out inaccurate information.

Not to mention I was unable to actually use some of the new editors that were appended. The first test (meaning first append before any others) I could use the editor, but didn't show on either device.

The collaboration tool I'm using is Mozilla's TogetherJS.

$(".add").click(function() {
  var count = Date.now();
  $(".editor-container").append("<div id='code" + count + "'></div>");
  $(".scripts").append("<scr" + "ipt>\n// Initialize CodeMirror editor\nvar editor" + count + " = CodeMirror(document.getElementById('code" + count + "'), {\n  mode: 'text/html',\n  tabMode: 'indent',\n  styleActiveLine: true,\n  lineNumbers: true,\n  lineWrapping: true,\n  autoCloseTags: true,\n  foldGutter: true,\n  dragDrop : true,\n  gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],\n  value: 'new codemirror editor = " + count + "'\n});</scr" + "ipt>");
  
  var editableeditors = $(".editor-container").html();
  var scripts = $(".scripts").html();
  if (TogetherJS.running) {
    TogetherJS.send({
      type: "editable-editors",
      output: editableeditors
    });
    TogetherJS.send({
      type: "call-scripts",
      output: scripts
    });
  }
});

// Update TogetherJS
TogetherJS.hub.on("editable-editors", function (msg) {
  if (! msg.sameUrl) {
    return;
  }
  $(".editor-container").html(msg.output);
});
TogetherJS.hub.on("call-scripts", function (msg) {
  if (! msg.sameUrl) {
    return;
  }
  $(".scripts").html(msg.output);
});

.head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
}

.add {
  width: 100%;
  height: 100%;
}

.editor-container {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #262A32;
  overflow: auto;
}

.CodeMirror {
  float: left;
  width: 45%;
  height: 45%;
  border: 1px solid black;
}

<link type='text/css' rel='stylesheet' href='http://necolas.github.io/normalize.css/3.0.1/normalize.css'/>
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
<script src='http://codemirror.net/lib/codemirror.js'></script>
<link rel='stylesheet'  href='http://codemirror.net/lib/codemirror.css'>
<link rel='stylesheet'  href='http://codemirror.net/addon/fold/foldgutter.css' />
<script src='http://codemirror.net/javascripts/code-completion.js'></script>
<script src='http://codemirror.net/javascripts/css-completion.js'></script>
<script src='http://codemirror.net/javascripts/html-completion.js'></script>
<script src='http://codemirror.net/mode/javascript/javascript.js'></script>
<script src='http://codemirror.net/mode/xml/xml.js'></script>
<script src='http://codemirror.net/mode/css/css.js'></script>
<script src='http://codemirror.net/mode/htmlmixed/htmlmixed.js'></script>
<script src='http://codemirror.net/addon/edit/closetag.js'></script>
<script src='http://codemirror.net/addon/edit/matchbrackets.js'></script>
<script src='http://codemirror.net/addon/selection/active-line.js'></script>
<script src='http://codemirror.net/keymap/extra.js'></script>
<script src='http://codemirror.net/addon/fold/foldcode.js'></script>
<script src='http://codemirror.net/addon/fold/foldgutter.js'></script>
<script src='http://codemirror.net/addon/fold/brace-fold.js'></script>
<script src='http://codemirror.net/addon/fold/xml-fold.js'></script>
<script src='http://codemirror.net/addon/fold/comment-fold.js'></script>

<div class="head">
  <button class="add">Add CodeMirror</button>
</div>
<div class="editor-container"></div>
<div class="scripts"></div>

Answer 1

I have no idea on these frameworks, but quite interested with the problem you posed and started debugging the code. I see few issues over here. just trying to explain step by step.

$(".editor-container").append("<div id='code" + count + "'></div>");

appending the empty div tag to .editor-container

$(".scripts").append("<scr" + "ipt>\n// ................

as soon as you append, the script is getting executed and generating codemirror tags in the above div tag.

 var editableeditors = $(".editor-container").html();
 TogetherJS.send({
   type: "editable-editors",
   output: editableeditors
 });

above code sends the content containing the div tag along with generated codemirror child tag

TogetherJS.hub.on("editable-editors", function (msg) {
 if (! msg.sameUrl) {
   return;
 }
 $(".editor-container").html(msg.output);
});

On peer appending the content with generated codemirror tags and again codemirror tags will be generated by TogetherJS.hub.on("call-scripts", function (msg) {})

 var scripts = $(".scripts").html();
 TogetherJS.send({
   type: "call-scripts",
   output: scripts
 });

Now sending the script tag to peers

TogetherJS.hub.on("call-scripts", function (msg) {
 if (! msg.sameUrl) {
  return;
 }
 $(".scripts").html(msg.output);
});

it is executing all the scripts again, causing duplicates

You can solve by sending list of empty div tags "<div id='code" + count + "'></div> instead of var editableeditors = $(".editor-container").html() which contains unnecessary codemirror tags.

Solution: simple fix by removing call-scripts events , but can't modify other peers content

$(window).load(function() {
$(".add").click(function() {
    var count = Date.now();
    $(".editor-container").append("<div id='code" + count + "'></div>");
    $(".scripts").append("<scr" + "ipt>\n// Initialize CodeMirror editor\nvar editor" + count + " = CodeMirror(document.getElementById('code" + count + "'), {\n  mode: 'text/html',\n  tabMode: 'indent',\n  styleActiveLine: true,\n  lineNumbers: true,\n  lineWrapping: true,\n  autoCloseTags: true,\n  foldGutter: true,\n  dragDrop : true,\n  gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],\n  value: 'new codemirror editor = " + count + "'\n});</scr" + "ipt>");

    var editableeditors = $(".editor-container").html();
    var scripts = $(".scripts").html();
    if (TogetherJS.running) {
        TogetherJS.send({
            type: "editable-editors",
            output: editableeditors
        });
    }
});

// Update TogetherJS
TogetherJS.hub.on("editable-editors", function(msg) {
    if (!msg.sameUrl) {
        return;
    }
    $(".editor-container").html(msg.output);
});

});

Solution 2: can modify other peers content

$(window).load(function() {
var listOfEditors = "";
var contentMap = {};

$("body").on("keyup", ".customEditor", function() {
    contentMap[$(this).attr("id")] = $(this).find(".CodeMirror-line").text();
});

$(".add").click(function() {
    var count = Date.now();
    var newEditor = "<div class='customEditor' id='code" + count + "'></div>";
    listOfEditors = listOfEditors + newEditor;
    $(".editor-container").append(newEditor);
    $(".scripts").append("<scr" + "ipt>\n// Initialize CodeMirror editor\nvar editor" + count + " = CodeMirror(document.getElementById('code" + count + "'), {\n  mode: 'text/html',\n  tabMode: 'indent',\n  styleActiveLine: true,\n  lineNumbers: true,\n  lineWrapping: true,\n  autoCloseTags: true,\n  foldGutter: true,\n  dragDrop : true,\n  gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],\n  value: 'new codemirror editor = " + count + "'\n});</scr" + "ipt>");

    contentMap["code" + count] = "new codemirror editor = " + count;

    var editableeditors = $(".editor-container").html();
    var scripts = $(".scripts").html("");
    if (TogetherJS.running) {
        TogetherJS.send({
            type: "editable-editors",
            output: listOfEditors
        });
        TogetherJS.send({
            type: "call-scripts",
            output: contentMap
        });
    }
});

// Update TogetherJS
TogetherJS.hub.on("editable-editors", function(msg) {
    if (!msg.sameUrl) {
        return;
    }
    listOfEditors = listOfEditors + msg.output;
    $(".editor-container").html(listOfEditors);
});
TogetherJS.hub.on("call-scripts", function(msg) {
    if (!msg.sameUrl) {
        return;
    }
    $(".scripts").html("");
    $.each(msg.output, function(key, value) {
        contentMap[key] = value;
        var count = key.replace("code", "");
        $(".scripts").append("<scr" + "ipt>\n// Initialize CodeMirror editor\nvar editor" + count + " = CodeMirror(document.getElementById('code" + count + "'), {\n  mode: 'text/html',\n  tabMode: 'indent',\n  styleActiveLine: true,\n  lineNumbers: true,\n  lineWrapping: true,\n  autoCloseTags: true,\n  foldGutter: true,\n  dragDrop : true,\n  gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],\n  value: '" + value + "'\n});</scr" + "ipt>");
    });
   });
   });