[lexical-playground] Feature: Highlight special strings with format

[citruscai]

Description

This PR introduces a SpecialTextNode and its corresponding plugin, enabling automatic recognition and highlighting of specific text patterns (e.g., [variableName]) in the editor. This feature enhances the editor's functionality by visually distinguishing variable-like text, as requested in Issue #6610.

Key changes:

SpecialTextNode: Recognizes specific string patterns and highlights them
SpecialTextPlugin: Processes any simple text string that starts with an opening bracket and closes with a closing bracket and applies the SpecialTextNode to remove brackets and highlight the string
Playground Integration: Added a toggle setting in the lexical-playground to enable or disable the SpecialTextPlugin for flexibility

Closes #6610

specialhighlight.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lexical	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 27, 2024 8:17pm
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 27, 2024 8:17pm

[github-actions]

size-limit report 📦

Path	Size
lexical - cjs	30.92 KB (0%)
lexical - esm	30.83 KB (0%)
@lexical/rich-text - cjs	39.73 KB (0%)
@lexical/rich-text - esm	32.65 KB (0%)
@lexical/plain-text - cjs	38.32 KB (0%)
@lexical/plain-text - esm	29.93 KB (0%)
@lexical/react - cjs	41.46 KB (0%)
@lexical/react - esm	34 KB (0%)

[etrepum]

This code fails the formatting checks, you can fix this with npm run prettier:fix. Normally this is taken care of by the commit hook installed by husky, not sure why it's not running or installed in your local environment (it will typically install itself when you npm install the project).

[etrepum]

It looks like your e2e tests are failing:

  3 failed
    [chromium] › packages/lexical-playground/__tests__/e2e/SpecialTexts.spec.mjs:26:3 › Special Text › should handle a single special text 
    [chromium] › packages/lexical-playground/__tests__/e2e/SpecialTexts.spec.mjs:43:3 › Special Text › should handle multiple special texts 
    [chromium] › packages/lexical-playground/__tests__/e2e/SpecialTexts.spec.mjs:66:3 › Special Text › should not work when the option to use brackets for highlighting is disabled 

Do you know how to run these locally?

[citruscai]

It looks like your e2e tests are failing:

  3 failed
    [chromium] › packages/lexical-playground/__tests__/e2e/SpecialTexts.spec.mjs:26:3 › Special Text › should handle a single special text 
    [chromium] › packages/lexical-playground/__tests__/e2e/SpecialTexts.spec.mjs:43:3 › Special Text › should handle multiple special texts 
    [chromium] › packages/lexical-playground/__tests__/e2e/SpecialTexts.spec.mjs:66:3 › Special Text › should not work when the option to use brackets for highlighting is disabled 

Do you know how to run these locally?

i kept having an issue trying to run them locally :(

was i using the right command?

[etrepum]

It looks like you need to run npm install. Whenever the package.json or package-lock.json changes you need to run that command. That dependency was added a few weeks ago.

Note that to run the tests you will need the dev server running in another terminal (e.g. npm run start)

[citruscai]

@etrepum sorry had wifi outage yesterday in area, since i made the special text feature into something you can switch on and off, how could i implement that in the test? do i need to set up a mock or something?

[etrepum]

It appears that this feature fails the collab test suite, which is run with npm run test-e2e-chromium (npm run start must be running in another terminal)

[citruscai]

It appears that this feature fails the collab test suite, which is run with npm run test-e2e-chromium (npm run start must be running in another terminal)

the issue is that the test file is apparently too slow :(

but when i put each test case in it's own indivudual file, each of them are also slow

not sure of a way around this one

[etrepum]

That's not the problem. It keeps retrying because the result is incorrect, and then it times out.

[etrepum]

Were you running it with collab active?

[citruscai]

Were you running it with collab active?

yes, should i disable collab in my tests?

[citruscai]

oh wait i may be stupid i think i understand what u mean, i was missing iscollab here