facebook / facebook/lexical

Bug: Inconsistent behaviour from `useLexicalTextEntity` when there are several matches within the same node

Open
#5,466 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
23.9k
Forks
2.2k
Avg merge
1d 16h
Merged PRs (30d)
61

Description

This issue it a bit hard to pin down, so this is the summary and my personal guess/read on it.

Essentially following the HashtagNode and HashtagPlugin example, I wanted to create a plugin which will replace text in the format of ${SOMETHING} with my own VariableNodes. Here's a cut down version of the implementation.

For the most part it works - especially newly written matching strings, correctly get transformed. The lifecycle of my app involves downloading some content, parsing it and then using $insertNodes to add them to the editor, users can then continue editing. However I started noticing some obvious gaps. In the screenshot below ${Tenant.Zip} and ${Facility.Zip} fail to transform into VariableNodes.

Screenshot 2024-01-09 at 14 53 06

After some experimenting I found out this only happens if I select the }, omitting it correctly selected the remainder of text and transformed it.

Screenshot 2024-01-09 at 14 56 42

It would appear this issue only happens to the very last instances of a match within a textNode and only if that last instance is also the final character within that text node's textContent.

Screenshot 2024-01-09 at 14 59 23

Lexical version: 0.12.6

Steps To Reproduce

  1. Visit https://codesandbox.io/p/sandbox/lexical-closing-8n55xm?file=%2Fsrc%2FApp.tsx%3A10%2C9
  2. Paste some content into the editor, with a text node which ends in ${Something.Other}

The current behavior

Everything gets highlit

The expected behavior

Only matches before the last one get highlit

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the reduced reproduction in the linked CodeSandbox, especially src/App.tsx around line 10, and trace how useLexicalTextEntity handles multiple matches in one text node. Reproduce the case where the final match ends at the node's textContent boundary. Done means only the intended matches are highlighted or transformed, including when the closing } is selected.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.