lexical icon indicating copy to clipboard operation
lexical copied to clipboard

Bug: Can't escape inline code

Open olafsulich opened this issue 10 months ago • 3 comments

Lexical version:

v0.23.0

Steps To Reproduce

  1. Open the lexical playground
  2. Type one backtick, add some text, type the second backtick - the inline code node should be created
  3. Without leaving the inline code, move to the center of it, add space with some more text
  4. You can't escape the inline code, either with the space (the default behavior) or the right arrow

https://github.com/user-attachments/assets/d9f291f8-6c1b-4436-940f-556533ce307a

The issue exists only when you've not escaped the code before. An example of it working fine (I was able to escape with the right arrow):

https://github.com/user-attachments/assets/f5cf0244-1e20-4254-ad57-ec36c74ef2bc

The current behavior

Can't escape the inline code

The expected behavior

Can escape the inline code

Impact of fix

It's an edge case, sure, but it could be quite frustrating because you have to delete the whole code node to eliminate it.

olafsulich avatar Jan 08 '25 10:01 olafsulich

Inline code is just a text format for TextNode, like bold or italic, if you click the < > button in the toolbar it toggles the code format off

etrepum avatar Jan 09 '25 00:01 etrepum

Sure, but it would be great to have an option to not use the toolbar button, for example in my case, I have an option to hide the toolbar

olafsulich avatar Jan 09 '25 11:01 olafsulich

Yes, I’m just explaining the details of the problem for whoever works on it or if you want to try and work around it. It gets stuck because there’s just one text node that doesn’t have any special mode flags like token or segment, it’s not super easy to fix because you also can’t put an empty text node next to it with no code format, because that would just get removed during reconciliation. The editor doesn’t really see it any differently than bold text or blue text, you can’t “escape” that without explicitly changing the format either.

etrepum avatar Jan 09 '25 15:01 etrepum

While having the inline code icon at the toolbar is great for enabling/disabling formatting, I still think it would be cool if Lexical provided an easier way to escape from it. For example, Slack uses the right arrow to escape from inline code, and it feels great and smooth. Can´t we implement something similar or even allow the user to choose the escape characters they want?

FilipeCosta avatar Mar 18 '25 07:03 FilipeCosta