ueberdosis / tiptap

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

Mention node broken on android #677

Closed chrisjbrown closed 2 years ago

chrisjbrown commented 4 years ago

Describe the bug on an Android device using chrome browser

in the editor with the cursor in front of a mention node the editor either skips over the mention deleting the previous node or copying and pasting the contents of the mention node.

these can be observed on the example page https://tiptap.scrumpy.io/suggestions

Environment

Screen-Recording-2020-04-22-at-1

philippkuehn commented 4 years ago

can you upload a video/gif of the bug please? don‘t have an android device for testing. thanks!

chrisjbrown commented 4 years ago

gif added. thanks

chrisjbrown commented 4 years ago

is there any error in the console?

No there's not

I see quite a lot edge case checks for android in prosemirror-view might the suggestitons plugin or mention node be circumventing some of this? https://github.com/ProseMirror/prosemirror-view/search?q=android&unscoped_q=android

chanlito commented 4 years ago

My team and I face this issue with other editors as well, our solution was to put a close or delete button on the mention element for cases like this.

Zanzavar commented 4 years ago

We are also facing the same issue as well on Android Chrome 81

cseufert commented 4 years ago

Also appears on android chome if you backspace immediately after adding a new mention, it starts randomly adding parts of the mention, if you just hold backspace, it just backspace some, and added more copies (some partial) of the mentions.

tobischulz commented 4 years ago

Have bugs on Android as well for mentions:

Got a gif attached as well to show the bugs. Would be awesome if there would be a fix for need.

Android Chrome 81.0.4044.138

tiptap-mention-selection-not-working-on-android-touch-and-enter-keyboard

tiptap-mention-delete-append-lastname

chenlevy commented 4 years ago

Same issue here

obj63mc commented 4 years ago

My work around so far has been to add a undo/redo buttons on the toolbar as sort of a catch all. That works fine deleting the mention. https://tiptap.dev/history

snickbit commented 3 years ago

I'm having the same issues as @chrisjbrown and @tobischulz but from what I can tell it's dependent on the keyboard app. Only the replication issue seems to happen on Google's Gboard, but only the original issue of being unable to delete with backspace occurs on the Samsung stock keyboard. At least that's the case on my Galaxy S20. I also have a user with Microsoft Swiftkey that is experiencing the replication issue when they press space after a mention.

reznikovandrew commented 3 years ago

Same issue here for Android, Chrome. Fast easy solution: copy Mention.js, and add space to suggestion label at the end. Screenshot_6

philippkuehn commented 3 years ago

can you test this again in v2 please?

Zanzavar commented 3 years ago

Yep, its still there, can reproduce it on Android Mi 3 device here https://www.tiptap.dev/examples/suggestions

aizaiz commented 3 years ago

is there any quick solution for this on v2?

aizaiz commented 3 years ago

I've found this solution https://github.com/ueberdosis/tiptap/issues/1264#issuecomment-833099584, even though we lost some performances at least it works on android

carlosagsmendes commented 3 years ago

Hey, we want to adopt tiptap but not supporting mentions on Android is a big showstopper. What's the best workaround available? Add the delete button to the mention? Thanks in advance

vdlmark commented 2 years ago

We are also having this issue, workaround can be managed, but is there any word on a fix in the nearby future?

veesahni commented 2 years ago

On tiptap v2, you still cannot delete mentions on android/chrome.

Why is this happening?: There's an underlying bug in Chrome that's been open since 2016 without much movement. In short: trying to remove a non-contenteditable sitting inside a contenteditable doesn't work properly.

Workaround: https://github.com/ueberdosis/tiptap/issues/1264#issuecomment-833099584 pointed to this sample which is working properly on android / chrome. Here, the code is removing the mention if the character directly after the mention is removed. It also seems to inject a non-visible character directly after the mention when you select a mention.

Perhaps this workaround can be brought into tiptap mention plugin, as an option?

fridaystreet commented 2 years ago

@veesahni the workaround still seems to have issues. it's fine if you type a mention then delete, or if you put the cursor in front of some text after the mention and start deleting, but if you put the cursor after the mention directly, on backspace the keyboard dissappears like it's lost focus. I haven't tried yet, but possible this combined with the fix that adds a space after the mention might do the trick?

desparately need a fix for this. We started out with draftjs and while mentions etc worked, android is non-existent. So we moved to Plate (slatejs underneath) very promising in initial testing, but after we'd got it deployed we were seeing all sorts of issues across different devices. Not to mention it's such a complex framework and plate is no better at abstracting the complexity.

Just found tiptap, tried everything out and was great, no general input issues in android like the others (ie skipping chars, issues with autocorrect). It's such an easy framework to implement, then found this issue with the delete. I'm going to try this on update and maybe couple it with a 'x' delete inside the mention label itself. The hope being, if someone is trying to delete an existing mention (eg editing) that they'd hit the x, otherwise if it's just backspace in normal typing that seems to work.

Seems no framework has this naled yet :-(

keeping fingers crossed for a robust solution

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

github-actions[bot] commented 2 years ago

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

17Amir17 commented 4 months ago

To anyone who is still seeing this, I was able to fix this while working on https://10play.github.io/10tap-editor/docs/examples/mentions

The fix I had was to wrap the contenteditable=false with contenteditable=true in addition to adding these two special characters to the end of the node \uFEFF \u200B and now it works great!

 renderHTML({options, node}) {
  return [
    'span',
    {contenteditable: true},
    [
      'span',
      mergeAttributes(
        {class: classes.join(' '), contenteditable: false},
        options.HTMLAttributes,
      ),
      `${options.suggestion.char}${
        node.attrs.label ?? node.attrs.id
      }`,
    ],
    ['span', {}, '\uFEFF'],
    ['span', {}, '\u200B'],
  ];
pastukh-dm commented 2 months ago

@17Amir17 your solution worked well for me

nperez0111 commented 2 months ago

@17Amir17 Can you share how you came to this conclusion. Specifically the special characters are of interest to me