bevacqua / woofmark

:dog2: Barking up the DOM tree. A modular, progressive, and beautiful Markdown and HTML editor
https://bevacqua.github.io/woofmark
MIT License
1.62k stars 74 forks source link

Firefox bug: Images are not being appended to current cursor position #20

Open slwen opened 8 years ago

slwen commented 8 years ago

When inserting an image in WYSIWYG mode it should display at the users current cursor position.

Currently the cursor position appears to be ignored and the image is inserted at the top. Here's an example:

example

Firefox v41.0.2 on OS X (El Capitan)

screen shot 2015-10-16 at 1 33 31 pm

slwen commented 8 years ago

As an update for this I've found a work-around that I'm currently rolling with in Firefox and it appears to be fine in other browsers too, though I suspect the root cause of this problem has something to do with the regex matching being a bit off inside of src/getSurface.js. It seems to split text chunks incorrectly when it encounters <br> tags.

The work-around is to force Firefox content editable divs (WYSIWYG mode) to insert <p> tags rather than <br> when the user hits the enter key. This seemingly brings it in to line with Chrome and IE.

Here's some example code I use after instantiating a woofmark editor:

wysiwygElement.addEventListener('keypress', function(e) {
  if (e.keyCode == '13' || e.which == '13') {
    document.execCommand('formatBlock', false, 'p');
  }
}, false);
bevacqua commented 8 years ago

@slwen Would that change still work in Chrome/IE?