HierarchyRequestError: Errors using toolbar commands for styling of Wysihtml5x editor - wysihtml5

Question

I'm using the wysihtml5x editor (v0.4.12) and I have found an issue when double-clicking on the toolbar link to change the font colour of the text.
I have prepared a jsFiddle with a very minimalistic code that reproduces the problem.
var editor = new wysihtml5.Editor("wysihtml5-editor", {
toolbar: "wysihtml5-toolbar",
parserRules: wysihtml5ParserRules,
contentEditableMode: false
});
var editor2 = new wysihtml5.Editor("wysihtml5-editor2", {
toolbar: "wysihtml5-toolbar2",
parserRules: wysihtml5ParserRules,
contentEditableMode: false
});
div[contenteditable="true"] {
border: solid grey 1px;
height: 150px;
}
.wysiwyg-color-red {
color: red;
}
.wysiwyg-color-black {
color: black;
}
a[data-wysihtml5-command-value="red"] {
color: red;
text-decoration: none;
}
a[data-wysihtml5-command-value="black"] {
color: black;
text-decoration: none;
}
<script src="https://rawgit.com/Voog/wysihtml5/textcolor/parser_rules/advanced_unwrap.js"></script>
<script src="https://rawgit.com/Voog/wysihtml/0.4.12/dist/wysihtml5x-toolbar.js"></script>
<link href="https://github.com/Voog/wysihtml/blob/0.4.12/examples/css/stylesheet.css" rel="stylesheet" />
<div id="wysihtml5-editor" contenteditable="true"><span class="wysiwyg-color-red">Please follow these steps to reproduce the problem:</span>
<br>1.Click on the editor below just to give focus to it.
<br>2.Select all the text on the first editor (CTRL+A or using the mouse).
<br>3.Double click on <span class="wysiwyg-color-red">red</span> link toolbar of the first editor.
<br>4.Open the console to see the error (F12).
<br>5.You should be able to see the <span class="wysiwyg-color-red">Uncaught HierarchyRequestError:</span>
<br>6.Ignore the 'Discontiguous selection is not supported.' error.</div>
<div id="wysihtml5-toolbar" style="display: none;"> <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="black">black</a>
<a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red">red</a>
</div>
<div id="wysihtml5-editor2" contenteditable="true"><span class="wysiwyg-color-red">The</span> quick brown fox jumps over the lazy dog</div>
<div id="wysihtml5-toolbar2" style="display: none;"> <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="black">black</a>
<a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red">red</a>
</div>
The error that can be seen on console when following the steps provided on jsFiddle:
Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.
I have tested with the latest version of the Wysihtml5x editor and the same problem happens. Please ignore the Discontiguous selection is not supported. error as this is an issue that have been addressed already on latest version of the editor.
I am not sure if this error happens only with multiple editors, but I added two as it is what I used when I found the problem.
I have opened the issue on the Git Issue Tracker of the project.
It may be related to the issue opened on Xing base repository of this editor.
I could not reproduce the error on Firefox 37.0.2 which makes me think that it does not happen on Firefox.
Your help is much appreciated, thanks.

Answer 1

This problem has been resolved on version 0.5.2. All of them, including the 'Discontiguous selection is not supported.'
Thank you very much #oliver-pulges for pointing out the solution replying to the GitHub issue.