Bug: Inconsistent behaviour from `useLexicalTextEntity` when there are several matches within the same node
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.
After some experimenting I found out this only happens if I select the }, omitting it correctly selected the remainder of text and transformed it.
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.
Lexical version: 0.12.6
Steps To Reproduce
- Visit https://codesandbox.io/p/sandbox/lexical-closing-8n55xm?file=%2Fsrc%2FApp.tsx%3A10%2C9
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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