Using right arrow key should exit out of inline code markup

[zbeyens]

Discussed in #2479

^{Originally posted by sepsol August 12, 2021}
Description
If I don't have the toolbar and I remove the space after the inline code markup, I have no way to go outside the inline code block on the same line.

Steps

1. Go to the docs
2. Scroll down to the bottom of the editor
3. Try to write something after the inline code markup on the same line, without using the toolbar buttons.

Expectation

The user should be able to use their right arrow key at the very end position inside the inline code markup to either have the current behavior of going to the next existing character, or create a new node with the type of default if there aren't any nodes after the code markup on that line.

Environment

• slate: 0.63.0
• slate-react: 0.65.2
• browser: chrome

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

[zbeyens]

Ref: https://github.com/ianstormtaylor/slate/blob/main/site/examples/inlines.tsx

[felixfeng33]

Do you think this should be fixed in the plate or slate？ @zbeyens

[zbeyens]

@12joan may have some ideas on that

[12joan]

I think this would work well as a Plate plugin with options to configure how arrow keys are handled for various marks.

In my app, I created a plugin that sets the "affinity" (whether the cursor is to the left or right of a mark boundary) based on the direction the cursor came from. It would be fairly simple to adapt the same code to stepping in and out of an inline code mark if that's what a particular app wants to implement. Having a toolkit that lets developers configure this for their app would be really powerful.

Handling mark affinity can be really complicated, since Firefox, WebKit and Chrome all handle it slightly differently. Here's a repo containing the plugin code I used in my app; particularly of note are the getMarkBoundaryAffinity and setMarkBoundaryAffinity functions, which I've found to be quite reliable for getting and setting which side of a mark the cursor is on in all browsers.

https://github.com/12joan/plate-mark-affinity/blob/main/src/createMarkAffinityPlugin.ts

I don't have time to add this to Plate, but hopefully if someone else wants to attempt this, the repo above will be a good starting point.