iOS 13 + Framework 7 + TipTap

I have a very strange effect when using F7 v4 or v5 on the iOS 13 beta together with TipTap editor component via Vue. The native view is WKWebView.

The problem is, when I tap on the editor component it does not get focus. It works if I use the same component without F7. But it also works with a regular “contentEditable” field. It also works in any combination on iOS before 13. It also works

I don’t know what is causing the effect but I wondered if somebody might have an idea. I also used monitorEvents($0, 'touch') on the [contenteditable] element and it receives these events. I did also use no-fastclick to eliminate this as a cause.

The strange thing is, if I remeive one of F7 or TipTap it works again. Any idea what could influence the other in this way? Thanks.

After hours of investigation I finally found the reason why: activeState in f7-app was the culprit! Setting it to false solved the problem.

So the follow-up question is? Why is affecting contentEditable? And is it possible to turn it explicitly off for certain DOM elements? class “prevent-active-state-propagation” ?

Thanks @shastox Sadly it did not work. I guess capturing the related events already causes issues with ProseMirror/TipTap. But thanks anyway.

Looks like issue on TipTap side. F7’s (especially v5) doesn’t do much with touch events. activeState just adds/removes active-state class from elements, it is not preventing anything. Have you tried v5’s Rich Text Editor? It works without any issues :slight_smile:

Probably this little change to the DOM is already triggering updates on ProseMirrors site and therefore interrupting the focusing. However, it now works for me, I just don’t have active states anymore.

Regarding rich text editing: The devil is in the detail! And digging deeper will open the doors to hell! I wrote rich text editors over decades now, for various customers including Evernote. You usually end up with some little issues of features you’d like to fix or have and then see it s not doable with execCommand. After that it becomes extremely complex (just try the editor for fun on Android).

Although I have written several contentEditable based editors myself I would always recommend using a mature project like ProseMirror for high level needs. For basic input it is certainly ok to have an implementation like your rich text editor.

In OnePile I’m embedding images and other objects and have high level list and todo features planned. The structure of the document is important and I will be ready for real time collaboration. Therefore, I’ll go with ProseMirror for now :wink:

Just FYI, the latest release of OnePile for iOS is now uses the v3.0 of the new F7 icons. Looks great :slight_smile: Thanks!

For the next release I’m targeting using the next F7 library as well.

1 Like

Looks great indeed. But without “active state” app looks kind of unresponsive to touches. By the way, in latest v5 beta, i added ability to disable active state on specific elements by adding “no-active-state” class to them

Awesome! I can confirm that it is working as you describe. Thanks.

While looking at the updated UI I have the impression that the actions contrast is not ideal. See here:

It is because now it uses translucent background (like in native iOS). So you can tweak links colors OR change actions bg color (--f7-actions-bg-color-rgb: 255, 255, 255;) OR apply dark theme to actions

Ok, I see. Thanks for the quick feedback.