Skip to content

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

Open
mihai-albu-sage wants to merge 1 commit intomasterfrom
FE-7534
Open

fix(text-editor): style selection stuck to paragraph on empty line#7706
mihai-albu-sage wants to merge 1 commit intomasterfrom
FE-7534

Conversation

@mihai-albu-sage
Copy link
Contributor

@mihai-albu-sage mihai-albu-sage commented Jan 14, 2026

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

nicktitchmarsh
nicktitchmarsh previously approved these changes Jan 16, 2026
Copy link
Contributor

@edleeks87 edleeks87 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Proposed code changes are fine, I think it might be worth adding some form of testing for this so we can catch if it regresses

@mihai-albu-sage
Copy link
Contributor Author

Proposed code changes are fine, I think it might be worth adding some form of testing for this so we can catch if it regresses

added corresponding playwright test

edleeks87
edleeks87 previously approved these changes Jan 26, 2026
nicktitchmarsh
nicktitchmarsh previously approved these changes Jan 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

3 participants