search

jakiestfu / Medium.js

A tiny JavaScript library for making contenteditable beautiful (Like Medium's editor)
http://jakiestfu.github.io/Medium.js/
4.39k stars 403 forks source link

Medium breaks in Firefox when deleting too much #135

Closed Zacqary closed 9 years ago

Zacqary commented 9 years ago

In Firefox, if I create a new Medium editor with default settings, then hit backspace twice, the editor no longer works properly. Pressing return to add a paragraph will add the paragraph for a second and then immediately delete it. This also happens when trying to make text bold or italic: it happens for a second and then goes away.

Clicking away from the editor and clicking back reinitializes and fixes it. But it's a major annoyance if any user accidentally does this, or decides to do Select All and then backspace.

I tried doing a console.log about what the html of the Medium div was on every keyup. When I click on it before pressing any keys, it contains <p>&nbsp;</p> (by the way, I'd rather it didn't start with that nbsp if possible). One backspace produces <p><br></p>, and then a second backspace produces an empty stringand the div visually shrinks.

This problem doesn't occur in Chrome, just Firefox.

robertleeplummerjr commented 9 years ago

I'm creating a unit test for this right now, fyi. I will get it working right.

On Sat, Jan 24, 2015 at 10:50 AM, Zacqary notifications@github.com wrote:

In Firefox, if I create a new Medium editor with default settings, then hit backspace twice, the editor no longer works properly. Pressing return to add a paragraph will add the paragraph for a second and then immediately delete it. This also happens when trying to make text bold or italic: it happens for a second and then goes away.

Clicking away from the editor and clicking back reinitializes and fixes it. But it's a major annoyance if any user accidentally does this, or decides to do Select All and then backspace.

I tried doing a console.log about what the html of the Medium div was on every keyup. When I click on it before pressing any keys, it contains

 

(by the way, I'd rather it didn't start with that nbsp if possible). One backspace produces


, and then a second backspace produces an empty stringand the div visually shrinks. This problem doesn't occur in Chrome, just Firefox. — Reply to this email directly or view it on GitHub https://github.com/jakiestfu/Medium.js/issues/135.

Robert Plummer

Zacqary commented 9 years ago

Just tried this in Chrome again and it turns out the problem occurs there too.

Zacqary commented 9 years ago

Possible hint as to what's going on: in Firefox, while I'm inspecting the element, it's adding <p> tags as expected when I press enter. Then, after doing a backspace of everything (or a select all+backspace), enter instead inserts <br></br> tags, which is the normal Firefox behavior of a generic contenteditable. (But then it deletes them a second later)

So it looks like somehow the Medium element is being deleted, and then it's trying to reinitialize itself and failing.

tomatau commented 9 years ago

Same bug here:

https://github.com/jakiestfu/Medium.js/issues/82

vegetableman commented 9 years ago

@robertleeplummerjr Have submitted a PR for this bug. Please review it. On the unit test, would be great if you could suggest me the correct approach to handle dispatch of delete key events.