How should we handle breaking out of inline leaf nodes?

[leo-petrucci]

So I only noticed today that I'm unable to exit inline code snippets (as well as bold and italic) if they're typed at the end of a paragraph.

After some research I tracked down this issue #4704, which seems very similar to what I'm experiencing. The proposed solution works great with links, which are structured like:

{
    "type": "link",
    "url": "http://localhost:3000",
    "children": [
        {
            "text": "Link"
        }
    ]
}

However the same issue is present for all leaf nodes:

• bold
• italic
• code snippet

Screen.Recording.2024-03-28.at.16.21.13.mov

None of the nodes mentioned above technically count as inline, so the reported fix doesn't work for them. The issue is also present in the official examples.

So what's the best course of action here? Should I implement my own bold, italic and code snippet and make them all inline?

[gerardnico]

Did you map the left and right arrow to offset? Is this the proposed solution that you talk about?

[leo-petrucci]

I have yeah, the issue is that bold, italic and code snippets aren't inlines.

Even if I override the editor isInline method like this:

  editor.isInline = (element) => {
    const customElement = element
    return ['link'].includes(customElement.type) || isInline(element)
  }

My code snippet nodes won't be recognised because they're just shaped like this:

{
    "type": "paragraph",
    "children": [
        {
            "text": "code",
            "code": true
        }
    ]
}

Which means I'd need to rework them to look like this and change a substantial amount of my logic as well as the suggested standard from Slate:

{
  "type": "paragraph",
  "children": [
      {
          "text": "Text "
      },
      {
          "type": "code",
          "children": [
              {
                  "text": "my inline code"
              }
          ]
      },
      {
          "text": " Text"
      }
  ],
}

Only actual nodes like the above get iterated correctly by isInline.

[gerardnico]

On the official example, if I toggle back bold for instance at the end of a line. I continue in a new text node. No?

[leo-petrucci]

if I toggle back bold for instance at the end of a line
Not sure what you mean by this?

The problem is that I'm unable to press "right arrow" or click to the end of the paragraph to escape inline code blocks. I understand there's no expectation to be able to do the same for bold and italic, but it is usually a feature when making inline code blocks.

Slack for example:

Screen.Recording.2024-03-29.at.08.05.42.mov

[gerardnico]

In slate, mark are not inline. They are present or not. At the end of the line, if you have bold, you stay in bold until you disable it (ie toggle off). Then you can continue your line.

For inline block, to escape them, you need to take over the left and right arrow key to make an offset move and not a character move. But you said you did therefore I’m lost.

[gerardnico]

Note that code in the official example is implemented as mark (from memory, I’m on my phone) and not as inline such as a link. May be the confusion comes from there.

[leo-petrucci]

Note that code in the official example is implemented as mark (from memory, I’m on my phone) and not as inline such as a link. May be the confusion comes from there.

That's kind of what I'm saying, is the expectation we implement our own implementation if we want to escape it with arrow keys?

That's absolutely fine by me, just wanted to make sure 👍