contenteditable - Redactor.js List editing causes Chrome to crash, cpu goes to 100% -

contenteditable - Redactor.js List editing causes Chrome to crash, cpu goes to 100% -

we using redactor.js rich text editor.

admittedly, using on rather complex webpage, have working fine, except...

steps reproduce

(1) selecting 3 of these items within of redactor contenteditable div:

item 1

item 2

item 3

(2) select convert 3 items unordered list. on redactor's website converts items to:

item 1

item 2

item 3

on our site, chrome tab becomes unresponsive , cpu usage goes 100%, yet chrome never officially close or crashes tab. tab remains until forcefulness quit process.

what happens in js code

inside redactor.js source (version 10.0.2) unordered list handler calls list toggle function on line 4232. function runs, determines list needs added , list needs removed (line 4251). runs list remove function (line 4356) runs:

document.execcommand('insert' + cmd);

the variable cmd equals string "unorderedlist" , chrome stops working (on our site, not on redactor's website).

what differences?

changes redactor configuration seem have no effect on issue. none less, here our redactor.js config object:

$this.redactor({ allowedtags: ['a', 'abbr', 'acronym', 'address', 'article', 'aside', 'b', 'big', 'blockquote', 'br', 'button', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'dd', 'del', 'div', 'dl', 'dt', 'em', 'fieldset', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'i', 'img', 'label', 'legend', 'li', 'marquee', 'ol', 'option', 'p', 'pre', 'q', 's', 'samp', 'section', 'select', 'small', 'span', 'strike', 'strong', 'sub', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'tt', 'u', 'ul', 'var', 'wbr'], buttons: ['formatting', 'bold', 'italic', 'link', 'orderedlist', 'unorderedlist', 'outdent', 'indent'], cleanonpaste: true, clipboardimageupload: false, dragimageupload: false, dragfileupload: false, formatting: ['p', 'h1', 'blockquote', 'pre'], imageeditable: false, imagelink: false, imageposition: false, imageresizable: false, linktooltip: true, placeholder: self.config.placeholder, removeattr: [ ['blockquote', 'class'], ['h1', 'class'], ['ol', 'class'], ['p', 'class'], ['ul', 'class'] ], removecomments: true, removedataattr: true, removeempty: ['blockquote', 'em', 'h1', 'ol', 'p', 'pre', 'span', 'strong', 'ul'], replacetags: [ ['big', 'strong'], ['strike', 'del'] ], tabkey: true, toolbarexternal: '#mcetexttools' + index, blurcallback: function(e) { }, changecallback: function() { }, clickcallback: function(e) { }, focuscallback: function(e) { }, keyupcallback: function(e) { }, pastecallback: function(html) { }, pastebeforecallback: function(html) { }, modalopenedcallback: function (name, modal) { }, initcallback: function() { } });

also, have suspicion problem may due specific css rule not react document.execcommand. here computed styles using on s.

ul { -webkit-font-smoothing: antialiased; box-sizing: border-box; color: rgb(68, 68, 68); cursor: auto; display: block; font-family: georgia, cambria, 'times new roman', serif; font-size: 18px; height: 32px; line-height: 32.4000015258789px; list-style-type: disc; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 20px; padding-right: 20px; padding-top: 0px; width: 688px; word-wrap: break-word; } li { -webkit-font-smoothing: antialiased; box-sizing: border-box; color: rgb(68, 68, 68); display: list-item; font-family: georgia, cambria, 'times new roman', serif; font-size: 18px; height: 32px; line-height: 32.4000015258789px; list-style-type: disc; margin-top: 0px; text-align: left; width: 648px; word-wrap: break-word; }

any ideas much appreciated!

the solution can find add together origin of list toggle function (line 4235):

var test = this.selection.getnodes(); _.each(test, function(v){ if (v.tagname === 'br'){ this.selection.selectelement(this.selection.getblocks()[0]); } });

the problem appears this.selection.getcurrent(). when brs nowadays in selection, getcurrent() not homecoming proper document node. resetting selection code above prevents chrome crashing, changes behavor of ordered/unorderd list buttons.

google-chrome contenteditable redactor execcommand