Voog / wysihtml

Open source rich text editor for the modern web
http://wysihtml.com
MIT License
3.36k stars 338 forks source link

Firefox - insertNode always inserts at the end - ignores the caret position #256

Open GGuru opened 8 years ago

GGuru commented 8 years ago

I am getting and setting the caret position before inserting as below.. but insertNode method is always inserts it it at the end.

var editorBookmark = composer.selection.getBookmark(); composer.selection.setBookmark(editorBookmark);

Does this work for anyone? please suggest.

GGuru commented 8 years ago

Someone please look into this.. here is the code that uses insertNode() to add a span tag markup into the editor and makes the span node contenteditable=false. @pulges, any insights pls..

  var composer = this.editor.composer,
      domWrapper = document.createDocumentFragment(),
      suggestionSpan = $(document.createElement('span'));

    suggestionSpan.text($target.text());
    suggestionSpan.attr({
      'id': $target.data('id'),
      'class': SUGGESTION_ITEM_CLASS
    });

    if(!this.editor.isEmpty()) {
      domWrapper.appendChild(document.createTextNode('\u00A0'));
    }

    domWrapper.appendChild(suggestionSpan[0]);
    domWrapper.appendChild(document.createTextNode('\u00A0'));

   // this.editorBookmark is bookmark reference stored on blur of the editor
   composer.selection.setBookmark(this.editorBookmark);

    composer.selection.insertNode(domWrapper);
    suggestionSpan.attr('contenteditable', 'false');

    // Sets the caret to the end of the node inserted
    composer.selection.setAfter(suggestionSpan[0]);
b1ff commented 8 years ago

Hi @GGuru, I can suggest only to debug value of editorBookmark, may be it is set to 0 in FF. I might have similar issue, but can't remember right now in which cases getBookmark returned 0 instead of correct bookmark. But as far as I remember on a moment when blur happens in FF selection range is not set to the contenteditable node.

GGuru commented 8 years ago

@b1ff - Yes that is the issue. the bookmark is 0 for FF and safari. Don't know what it is in IE as I haven't tested there. The code above is invoked on click of a p node on the page. I changed that to button and it works fine..

So, This is my concluded observation.. insertNode inserts a node at the caret position if the action is invoked from a button or link tag.