search

jkomoros / card-web

The web app behind thecompendium.cards
Apache License 2.0
53 stars 8 forks source link

Clean up contenteditable live upon paste to keep on track with cleaned html #364

Open jkomoros opened 3 years ago

jkomoros commented 3 years ago

Open a card for editing. Paste in content with extra newlines. The newlines show up in the content editable, but the actual content in the content textarea is clean. So if you save and re-open for editing it's fine.

This is a general class of problem where the actual html that will be saved is clean but the html in the content editable is not.

The system right now assumes the content editable reflects the value of the html that will be set, at least enough to look the same. But that's not true for extra line breaks, content that has font styling, etc.

The reason we don't just blow away the content in the contenteditable is to not lose selection state. It's non-trivial to maintain the logical selection state as the actual html is being surgically changed.

Noticed in an obvious way while working on #353.

jkomoros commented 3 years ago

https://stackoverflow.com/a/38752483 seems like it might be a good solution

https://www.npmjs.com/package/selection-ranges/v/3.0.3 might work?

jkomoros commented 3 years ago

Ideally we only run this on pastes (is there a way to detect that, or just look for large deltas?).

And make sure to not mess with flows where a user is live editing and temporarily has their cursor between paragraphs, about to type more content.

jkomoros commented 3 years ago

Pasting paragraphs into an in-progres list gives garbled content