fix(text-editor): style selection stuck to paragraph on empty line

[mihai-albu-sage]

Proposed behaviour

This PR addresses an issue where users can not pre-select typography styles on an empty line. By introducing a "zero-width space" placeholder, we allow the editor to maintain state and focus for a new node before text input begins.

Changing the typography dropdown on an empty row now explicitly creates a TextNode or StyledSpanNode matching the selected style. To ensure the browser maintains cursor focus within this new node, the content is initialized with a zero-width space character (\u200B).

This enables "type-over" styling, allowing users to set their desired typography before they start typing on a new line.

after.mp4

Current behaviour

Pressing Enter creates an empty paragraph row without an underlying TextNode or StyledSpanNode. The useEffect managing the typography dropdown defaults to "Paragraph" for empty rows.

If a user attempts to change the typography on an empty row, the editor reverts the selection to "Paragraph" because there is no node to apply the style to. Styling currently only triggers if the row already contains text.

before.mp4

Checklist

• Commits follow our style guide
• Related issues linked in commit messages if required
• Screenshots are included in the PR if useful
• All themes are supported 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

Additional context

Testing instructions