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.
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
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
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
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
