search

ueberdosis / tiptap

The headless rich text editor framework for web artisans.
https://tiptap.dev
MIT License
27.78k stars 2.31k forks source link

Placeholder plugin broken on Android #229

Closed holtwick closed 5 years ago

holtwick commented 5 years ago

When typing on Android in the Placeholder example, the placeholder does not hide immediately. It does after completing a composition of a word. https://tiptap.scrumpy.io/placeholder

I struggled a lot with this behavior in the past as well and I remember it is related to the events compositionstart and related: https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart

But maybe there is already a simple solution around somewhere?

screenshot_20190308-033555_chrome

ifiokjr commented 5 years ago

@holtwick I had the same problem in my library remirror which is pretty close to being a React port of this library https://github.com/ifiokjr/remirror/issues/17.

You can see the relevant code here, although the whole extension is important.

https://github.com/ifiokjr/remirror/blob/72a7a57f56066019693bead9613d296e0cac59dd/%40remirror/core-extensions/src/extensions/placeholder.ts#L77-L106

The fix

Basically, when composition starts I set the metadata for the placeholder plugin to indicate the placeholder should no longer show and when composition ends I remove the metadata.

This way the state can be updated in the plugin.state.apply method and the empty-node decoration can be updated according to the state.

The fix should be pretty identical in tiptap since a lot of my code is either the same or very similar. You can play around with an example showcasing the fix via this link https://docs.remirror.org/editors/ui-twitter

PS. Working with contenteditable on Android is quite a frustrating experience. I've decided that right now I'm not focusing too much on bug fixes but I'm collating them all in one place. Perhaps some of the bugs remirror is facing are also bugs in tiptap.

Any fixes I do come up with I'll make sure to provide code samples for or, when time permits 🤞, pull requests in the future.

philippkuehn commented 5 years ago

@holtwick a lot has changed in the latest updates of prosemirror-view. Is there still this bug?

holtwick commented 5 years ago

@philippkuehn I can confirm that the Placeholder plugin is working correctly on Android now. That is super awesome. Thanks for keeping track!

Also thanks to @ifiokjr for the proposal of how to fix it otherwise. I just didn't had have the time to try it since.

Also the other issues I experienced and tracked via https://github.com/holtwick/collect/issues/54 seem to be fixed now. The overall editor experience is much better now.

If you want to give it a try, this is where I use it https://m.collect-app.com/