feat(text-editor): replaces draftjs with lexical

[damienrobson-sage]

The draftjs package is no longer maintained; a decision has been reached to rewrite the TextEditor component using Lexical

BREAKING CHANGE: Whilst the intention is to implement a straight-up replacement and maintain as much functionality as possible, there may be differences that customers need to be made aware of. These will be communicated separately as necessary.

Proposed behaviour

Rebuild the TextEditor component from the ground up using Lexical

Current behaviour

The TextEditor component is built around draftjs, which is no longer maintained.

Checklist

• Commits follow our style guide
• Related issues linked in commit messages if required
• Unit tests added or updated if required
• Playwright automation tests added or updated if required
• Storybook added or updated if required
• Translations added or updated (including creating or amending translation keys table in storybook) if required
• Typescript d.ts file added or updated if required
• Related docs have been updated if required

QA

• Tested in provided StackBlitz sandbox/Storybook
• Add new Playwright test coverage if required
• Carbon implementation matches Design System/designs
• UI Tests GitHub check reviewed if required

Testing instructions

Using the provided playground in Storybook's Test section will allow you to view and interact with the new editor in several states

[edleeks87]

Really good stuff @damienrobson-sage, I really like the structure/approach you've adopted, I've left some comments but in general they're pretty trivial

[edleeks87]

comment (non-blocking): I'm wondering if we can avoid the additional prop here. If we move the code below into a useEffect it would run when the value is reset by the onCancel callback being run etc. If it doesn't work I'm fine with what you have already but do think it's worth exploring etc

[DipperTheDan]

Good work with this. Just a few bugs I spotted when messing around with the new component.

Seems that the Bold and Italic options aren't selectable on initial render.

Screen.Recording.2025-01-13.at.10.58.19.mov

Bold and Italic cannot be used together.

Screen.Recording.2025-01-13.at.10.59.51.mov

If you select the bullet point list before typing, it doesn't apply the formatting to the text.

Screen.Recording.2025-01-13.at.11.02.24.mov