ueberdosis / tiptap

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

Impossible to place the cursor after a mark (bold, code, etc.) #2572

Open rfgamaral opened 2 years ago

rfgamaral commented 2 years ago

What’s the bug you are facing?

When a mark, such as block, code, etc, is at the end of a paragraph, it's impossible to place the cursor after said mark. Here's a demo with the official Code example:

PowerToys_ZGqX587oSI

How can we reproduce the bug on our side?

See the demo above 👆

Can you provide a CodeSandbox?

n/a

What did you expect to happen?

One should always be able to type anything after a mark, even if it's the last mark on a paragraph.

Anything to add? (optional)

No response

Did you update your dependencies?

Are you sponsoring us?

sjdemartini commented 2 years ago

I'm also encountering this problem. This seems related to these other two issues https://github.com/ueberdosis/tiptap/issues/514, https://github.com/ueberdosis/tiptap/issues/2571 (the first of which is a longstanding one).

rfgamaral commented 2 years ago

I'm assuming this is the default behavior, and that one can "exit" the mark by using a keyboard shortcut (or the toolbar buttons, if available). However, I don't think the Link extension should work like that, and I've personally disabled this for us: https://tiptap.dev/api/schema#inclusive

philippkuehn commented 2 years ago

Yes, this is a problem, but I don't know yet in which scope we want to solve this problem. Just adding keyboard shortcuts for this could be enough, but it also helps to show this visually with another cursor. That is rather hacky though.

rfgamaral commented 2 years ago

Keyboards shortcuts already work to "leave the mark", so it's not so bad as I originally thought.

It would be nice to have something like that for all marks, built-in, and less hacky. But I understand it might be tricky to implement.

Thanks for getting back to me on this, and hopefully you folks will be able to improve this in the future 👍

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.

rfgamaral commented 1 year ago

@bdbch This issue still exists, and it's a very annoying one, can we reopen it, and keep it tracked?

Although workarounds exists for some marks, I don't think it's possible to exit an inclusive link mark. This is a very annoying issue for us, and that's why we have inclusive: false, but we'd rather have it set to true.

bdbch commented 1 year ago

I've reopened this issue and added it to our tracker. Thanks for pinging @rfgamaral

github-actions[bot] commented 1 year 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

bdbch commented 1 year ago

bump

chrislicodes commented 1 year ago

Same issue here

linuxhackr commented 1 year ago

Any update on this?

bdbch commented 1 year ago

Sadly not. I didn't had time to get to this issue yet.

olejorgenb commented 11 months ago

I think I've seen other editors handle this (though, usually semi-buggy..) by using the right key to "break free" from the mark. I think this has only been active when there's nothing to the right of the mark[1]. Eg.: BOLD| pressing right would not move the cursor, but it would move "out" of the mark, disabling bold.

[1] which make sense, since if there's something there you can usually just move until you're outside the mark.

C-Hess commented 10 months ago

I'm currently experimenting with an interesting solution using zero-width characters:

  addKeyboardShortcuts() {
    return {
      'Mod-e': () => this.editor.commands.toggleCode(),
      // right arrow
      'ArrowRight': () => this.editor.commands.command(({ tr }) => {
        tr.removeStoredMark(this.type)
        // Insert zero-width character to escape the mark
        tr.insertText('\u200B', tr.selection.from, tr.selection.to)
        return true;
      }),
    }
  },

An advantage of this approach is we don't have to "simulate" a separate cursor. Now the tougher question is how can we strip out this zero-width character. Maybe I could create some pseudo-node that removes itself whenever content is added to it and insert that instead... I'll try and mess around with this more when I have the time