lexical icon indicating copy to clipboard operation
lexical copied to clipboard

Bug: TextNode in Token mode gets split when format is changed on portion of its text

Open 9still opened this issue 2 years ago • 9 comments

Lexical version: 0.9.0

Steps To Reproduce

  1. Open a modified MentionsPlugin example that simply uses RichTextEditor instead of PlainTextEditor
  2. Create a mention node by entering @Ham and selecting @Hammerhead.
  3. Select a portion of the newly created node (e.g. mer), press Cmd/Ctrl+B to bold the selected text
  4. Observe that the node that's supposed to be a token gets incorrectly split into multiple nodes

Link to code example:

https://codesandbox.io/s/purple-river-pmc11v

The current behavior

Applying format to a range selection does not respect boundaries of text nodes in token mode. image

The expected behavior

RangeSelection's formatText method (and likely other methods) should not invoke splitText on "token" text nodes.

9still avatar Mar 21 '23 07:03 9still

Good one. I guess the expected behavior here would be for the formatting operation to fail? What do you think?

acywatson avatar Mar 21 '23 13:03 acywatson

So since the node is supposed to be treated as a token, it feels like anything that happens to a portion of the node should happen to the entire node.

I feel like ideally that would translate to the whole node getting selected when any portion of the node is selected. Basically I think of a token node like I would think of a ligature - it's an atomic thing, so it's weird to be able to select a portion of it.

If extending the selection is not practical for some reason, I think the next best thing would be to format the entire node when a portion of the node is formatted. Seems reasonable to assume that's what the user would intend...

9still avatar Mar 21 '23 14:03 9still

I think it should fail, if you select a row of text that has a hashtag or mention node, you probably want the node to fit a specific style to indicate it's not normal text and not be bolded/italicized/etc. Maybe I'm wrong, but I don't think it's expected to be able to change such a node besides maybe its font size.

HarrySIV avatar Mar 21 '23 18:03 HarrySIV

To me a token text node is still a text node & it should accept any formatting a text node should. I think it's totally fair game to have a bold hashtag or any other token. In-fact that's why I am using a text node in the first place - otherwise I'd just use a decorator node & be done with it.

9still avatar Mar 21 '23 19:03 9still

I've noticed that TextNodes in Token mode also get split with the insertion of newlines. Ideally, I believe the whole node should be replaced by a newline instead. Could this be considered as part of the fix for this issue?

AkhrHysd avatar May 23 '23 11:05 AkhrHysd

This is still an issue with the latest versions of Lexical. Here is an updated sandbox link. https://codesandbox.io/s/affectionate-microservice-r5r38c

cschwebk avatar Oct 10 '23 18:10 cschwebk

@9still Hi! I faced a similar problem, did you find a solution then? If not, how was the situation resolved

Maxim1saev avatar Sep 06 '24 01:09 Maxim1saev

@Maxim1saev unfortunately couldn't figure out how to make it work using text nodes. We ended up using decorator nodes instead & writing custom (de)serializers.

9still avatar Sep 06 '24 04:09 9still

@9still and how did you get a text node to calculate its format? Deserializers for json ? That is, have you taught the decorator node to include formatting and apply it to the entire text with partial selection?

Maxim1saev avatar Sep 06 '24 10:09 Maxim1saev