Search code examples
wysihtml5

WYSIHTML5 editor does not focus the editable area while inserting unordered list in Chrome


In WYSIHTML5 editor, when we add unordered list, it does not focus on the editable area in the Google Chrome browser. However, it works fine for other options such as bold, italic, etc. I have searched, but have been unable to find a solution for this bug.


Solution

  • In WYSIHTML5 js, search line wysihtml5.commands.insertUnorderedList and further look for

    composer.commands.exec("formatBlock", "div", tempClassName);
        tempElement = doc.querySelector("." + tempClassName);
        isEmpty = tempElement.innerHTML === "" || tempElement.innerHTML === wysihtml5.INVISIBLE_SPACE;
        composer.selection.executeAndRestoreSimple(function() {
          list = wysihtml5.dom.convertToList(tempElement, "ul");
        });
        if (isEmpty) {
          composer.selection.selectNode(list.querySelector("li"));
        }
    

    and comment or remove the condition part like :

    composer.commands.exec("formatBlock", "div", tempClassName);
            tempElement = doc.querySelector("." + tempClassName);
            isEmpty = tempElement.innerHTML === "" || tempElement.innerHTML === wysihtml5.INVISIBLE_SPACE;
            composer.selection.executeAndRestoreSimple(function() {
              list = wysihtml5.dom.convertToList(tempElement, "ul");
            });
            //if (isEmpty) { 
              composer.selection.selectNode(list.querySelector("li"));
            //}
    

    It worked for me coz the condition isEmpty = tempElement.innerHTML === "" || tempElement.innerHTML === wysihtml5.INVISIBLE_SPACE; can never become true as we have inserted unordered list and editable area is not blank after that. Good luck..!!