Froala - extra chars on bold/italic

.

by George Y

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.3.0/css/froala_editor.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.3.0/js/froala_editor.min.js"></script>
<div class="edit" style="height:300px;">
Hello world
</div>


 <input type="button" id="btn">
<div id="box-470" class="box pos type-rectangle ui-draggable ui-draggable-handle no-rotation" data-shape-type="rectangle" style="opacity: 1; width: 343px; height: 357px; left: 186px; top: 318px; transform: none; z-index: auto; display: block;"><div class="xborder" style="position: absolute;"></div><style>#box-470 .inner-rec { background-color: #C6C6C6; border: 0px solid #555555; border-radius: 0px; } #box-470 .shapes-text-container {  font-family: sans-serif,Helvetica Neue,Arial;; font-size: 32px; text-align: center; line-height: 41px; letter-spacing: 0px; color: #383838; }</style><div id="rec-box-470" class="inner-rec liveUpdate-backgroundColor liveUpdate-backgroundColor-background-color changeProperty-backgroundColor changeProperty-backgroundColor-background-color changeProperty-borderColor changeProperty-borderColor-border-color liveUpdate-borderColor liveUpdate-borderColor-border-color"><div class="shapes-text-container liveUpdate-textColor "><span data-editableproperty="text">545454545454<br>54545<br>4545<br><br><br></span></div></div><div class="prx-resizable-handle prx-resizable-n ui-draggable ui-draggable-handle" style="z-index: auto; transform: scale(1);"></div><div class="prx-resizable-handle prx-resizable-e ui-draggable ui-draggable-handle" style="z-index: auto; transform: scale(1);"></div><div class="prx-resizable-handle prx-resizable-s ui-draggable ui-draggable-handle" style="z-index: auto; transform: scale(1);"></div><div class="prx-resizable-handle prx-resizable-w ui-draggable ui-draggable-handle" style="z-index: auto; transform: scale(1);"></div><div class="prx-resizable-handle prx-resizable-se ui-draggable ui-draggable-handle"...

JavaScript

//Select all text
//Use console or the bold button to bold/unbold text multiple times -> $('.edit').froalaEditor('commands.bold')
// Notice that each time you are applying 'bold', an extra "" is added to the iframe's body
//Happens also with italic 

  
$('#btn').click(function(){
  console.time('ff')
  $('.edit').width((Math.random() * 600) + 1)
	console.timeEnd('ff')
  
})

$('.edit')
  .froalaEditor({
    iframe: true,
    placeholderText: '',
    enter: $.FroalaEditor.ENTER_BR
  })