[Android, React/Vue] Pressing "Enter" in an interactive node view creates non-deletable nodes

fenok commented 2 years ago

What’s the bug you are facing?

Pressing "Enter" in an interactive node view creates non-deletable nodes inside the view. The issue exists only on Android and only for React or Vue components. Plain JavaScript works fine.

How can we reproduce the bug on our side?

Open https://tiptap.dev/guide/node-views/react#adding-a-content-editable or https://tiptap.dev/guide/node-views/vue#adding-a-content-editable on Android device.
Place cursor inside the interactive node view and press "Enter".

Can you provide a CodeSandbox?

Doesn't seem to be necessary.

What did you expect to happen?

Pressing "Enter" in an interactive node view should create a normal node below it.

Anything to add? (optional)

These videos are recorded on a device running Android 12.

https://user-images.githubusercontent.com/15672677/154058826-e34dfc76-a570-4ecb-9734-e66f93628512.mp4

https://user-images.githubusercontent.com/15672677/154062478-71f2b961-82b2-4001-983c-66cb4561b883.mp4

I'm also experiencing this issue locally with the latest dependencies:

    "@tiptap/core": "2.0.0-beta.174",
    "@tiptap/extension-bold": "2.0.0-beta.26",
    "@tiptap/extension-document": "2.0.0-beta.15",
    "@tiptap/extension-dropcursor": "2.0.0-beta.25",
    "@tiptap/extension-gapcursor": "2.0.0-beta.34",
    "@tiptap/extension-hard-break": "2.0.0-beta.30",
    "@tiptap/extension-heading": "2.0.0-beta.26",
    "@tiptap/extension-history": "2.0.0-beta.21",
    "@tiptap/extension-italic": "2.0.0-beta.26",
    "@tiptap/extension-paragraph": "2.0.0-beta.23",
    "@tiptap/extension-text": "2.0.0-beta.15",
    "@tiptap/react": "2.0.0-beta.108",

I tried forcing every break to be a hard break (by assigning the corresponding keyboard shortcut to "Enter"), but it silently didn't work on Android.

Did you update your dependencies?

[X] Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

[ ] Yes, I’m a sponsor. 💖

thecodrr commented 2 years ago

I can confirm this issue is still happening in the latest version.

a-type commented 1 year ago

I've noticed this seems to happen specifically when pressing Enter in nodes that have a custom React NodeView. Built-in nodes work correctly with Enter.

Nantris commented 1 year ago

This still appears to be an issue when testing in the tiptap.dev examples.

@bdbch is it planned to address this? It's a pretty serious problem if you need to support Android users - which I think most people do these days.

Edit: I don't know what the underlying issue is but the selection bug here is much more aggressive than what I've seen in other editors that have Android selection problems. Can anyone comment on the possible cause? The newly created nodes can't be selected in any way no matter what tricks you try to use.

For example in other editors these workarounds might help:

Adding a space before changing selection
Trying to create a new expanded selection instead of a collapsed one
Hiding and showing the keyboard again
Scrolling to a position by swiping left/right on the GBoard spacebar

But here, none of them make the slightest difference.

The only thing that did work was triple-tap to select the entire new line, but it can only be done once and results in buggy behavior afterward if you make any modifications to the selected text.

Can this be fixed and if so is there a plan to fix it? We're looking at possibly using TipTap but this is something of a showstopper.

Additionally for iPhone:

In the example above, Enter on iPhone is treated as Mod+Enter, so it's impossible to say whether this also affects iOS.

Nantris commented 1 year ago

Friendly bump. Will there be an attempt to address this? This is something we need to know before we can start building in earnest with TipTap.

WeMadeCode commented 1 year ago

I had the same problem

Nantris commented 1 year ago

I wonder if #2626 might help resolve this?

Nantris commented 1 year ago

I suspect this may be related to this comment in the code I came across. Perhaps a similar fix is needed for Android as well. @bdbch

https://github.com/ueberdosis/tiptap/blob/83c98aea92c2ffd7dffba3a6a24a386cba895b5f/packages/core/src/NodeView.ts#L215-L218

C-Hess commented 1 year ago

@Slapbox , nice find. I was able to confirm that adding a rule for Android to filter those non-prosemirror mutations seems to fix this issue as well

Nantris commented 1 year ago

@bdbch is 2.1.0-rc.10 live now on tiptap.dev? If so, unfortunately this issue would need to be re-opened as the problem seems to persist in the React node-views examples.

C-Hess commented 1 year ago

@Slapbox , what behaviors are you seeing? I'm no longer able to reproduce the original behavior on my device (Chrome, Samsung S22) with the current live tiptap.dev page (https://tiptap.dev/guide/node-views/react)

Nantris commented 1 year ago

Edit: I think tiptap.dev is still on 2.0.3 because this fix doesn't seem to work on there either and the "Edit on Github" button suggests it's still on the main branch and not on develop where the RC versions are available.

@C-Hess unfortunately I'm still seeing the same behavior as in the first video in the original post with GBoard on two Pixel 4a devices; one running Android 12 and the other running 13.

If you use GBoard does the fix still work for you?

Specifically on this example, the caret remains stuck on the first line and the newly inserted lines cannot be selected (except sometimes by triple tap):

Nantris commented 1 year ago

@C-Hess are you able to reproduce the problem on your end? I did some more testing with GBoard Chinese and Swiftkey and both of those result in the same problem still.

svenadlung commented 1 year ago

@Slapbox I think you are right. Our demos must be using the stable version, not the RC-version. Correct me if I am wrong @bdbch

bdbch commented 1 year ago

I think the demos are running on main. @mkriegeskorte you have some insight on what version is loaded on our demo pages?

mkriegeskorte commented 1 year ago

@bdbch They’re running on the main branch.

kimproductions commented 5 months ago

I'm still getting this issue when running tiptap in a WebView and it's only an issue on Android. Are there any workarounds for this?

Nantris commented 5 months ago

@kimproductions does it still occur on the examples pages?

@bdbch are the examples pages updated now, or still on 2.0.x as was the case for a long time?

kimproductions commented 5 months ago

The issue only seems to happen in webviews. I'll try out making a simple webview and check the example page.

@kimproductions does it still occur on the examples pages?

@bdbch are the examples pages updated now, or still on 2.0.x as was the case for a long time?

Nantris commented 5 months ago

@kimproductions what OS are you testing on? And in emulator, or no?

You say it only happens in webviews but that shouldn't be the case. If you're finding that is the case on Android, I wonder if it's because your emulator is using an outdated webview implementation? The implementation is updated via the Play Store, but the emulators generally are not updated, which can result in chasing down bugs that don't really exist in the wild, as I've learned the hard way.

Under developer tools you can find the webview implementation version.

kimproductions commented 5 months ago

@kimproductions what OS are you testing on? And in emulator, or no?

You say it only happens in webviews but that shouldn't be the case. If you're finding that is the case on Android, I wonder if it's because your emulator is using an outdated webview implementation? The implementation is updated via the Play Store, but the emulators generally are not updated, which can result in chasing down bugs that don't really exist in the wild, as I've learned the hard way.

Under developer tools you can find the webview implementation version.

I test on my Samsung S6 and also on emulator, the Pixel 7, most recent SDK. I also thought it might be outdated webview so I updated it through the play store, but I still got the issue of pressing enter and getting these strange node issues on both the physical and emulator. Albeit the S6 is a little older.

This is also happening in Capacitor which is essentially a webview. I can try to make a super simple project and use React Native's webview and see if I still have an issue.

I assume it is a webview issue because even on the S6 when I simply use google chrome to test my device, I don't get the issue. But when using the webview, I do. I can try to test it on a more modern device.

Are there any debugging tips you have???

Nantris commented 5 months ago

What's the Android version on those devices? I can't reproduce it on Android 14 on my physical device so it's hard to imagine what debugging tips might help.

Can you link to exactly where you're able to reproduce this? I tested here on my end: https://tiptap.dev/docs/editor/guide/node-views/react#adding-a-content-editable

Would it also be possible to share a video?

Edit: Oh I just realized you said you can't reproduce it in Chrome. In that case, I may not have ever tested exactly what you're doing. Can you take a screenshot of the Webview version under the Developer section in Android? This might be a bit tough for others to test if it can't be reproduced in Chrome - but Chrome is mostly just wrapping the native webview component so I'm a bit baffled by how this could be.

kimproductions commented 5 months ago

What's the Android version on those devices? I can't reproduce it on Android 14 on my physical device so it's hard to imagine what debugging tips might help.

Can you link to exactly where you're able to reproduce this? I tested here on my end: https://tiptap.dev/docs/editor/guide/node-views/react#adding-a-content-editable

Would it also be possible to share a video?

Edit: Oh I just realized you said you can't reproduce it in Chrome. In that case, I may not have ever tested exactly what you're doing. Can you take a screenshot of the Webview version under the Developer section in Android? This might be a bit tough for others to test if it can't be reproduced in Chrome - but Chrome is mostly just wrapping the native webview component so I'm a bit baffled by how this could be.

Okay yeah I'll send you all those things asap. I'm also using tiptap block editor template from yall's private repo, so maybe that has something to do with it. I'll test using that sample website and minimal code as well.

Nantris commented 5 months ago

@kimproductions I should clarify I'm not part of the team, but happy to try to help how I can.

ueberdosis / tiptap