Rich‐text

Rich-Text Editor — User & System Interaction Approach

A required rich-text field with three formatting controls: Bold, Italic, and Line Break.

Components

Toolbar

Three buttons:

• B (bold),
• I (italic),
• ↵ (line break)

Each button has 3 visual states:

• idle - formatting is not applied
• active - formatting is applied (dark fill with white label)
• partial (optional) – formatting is applied to only part of the selected text

Interaction Flow

Page Load

1. When User opens the page:

• rich-text toolbar is applied to the defined in requirements fields
• all toolbar buttons are idle
• system loads any existing content and corresponding formatting for fields in the page

Plain Text Entry

2. User types plain text:

• toolbar buttons remain idle
• no formatting is active at the cursor
• system tracks content length in the background

Apply Bold Formatting to Selected Text

3. User selects text → clicks B

• User: selects a word or phrase, text range clicks the B button
• System: wraps selection in bold
• System: B button switches to active state (dark fill)

Apply Italic Formatting to Selected Text

4. User selects text → clicks I

• User: selects a word or phrase/text range, clicks the I button
• System: wraps selection in italic
• System: I button switches to active state (dark fill)

Insert Line Break

5. User clicks ↵ (line break)

• User: positions cursor at desired point, clicks ↵
• System: inserts a line break

Display Formatting State at Cursor Position

6. When a user places a cursor inside a text/select a text

• System detects formatting applied to the current cursor position or selected text.
• System updates the toolbar to reflect the detected formatting.
• System displays buttons in the active state corresponding to applied formatting.

Remove Formatting

7. When a user selects a text and clicks the corresponding formatting button

• System removes the selected formatting from the selected text only.
• System updates the toolbar state accordingly.

Apply Multiple Formatting Types

8. When a user selects a text with existing formatting and clicks on the additional formatting button

• System applies the newly selected formatting.
• System preserves any existing formatting.
• System supports combined formatting (e.g., Bold + Italic).

Mixed Formatting Selection

When a user selects text containing both formatted and unformatted content

• System evaluates the formatting state of the entire selection.
• System displays a Partial state when formatting is applied to only part of the selection.
• System applies or removes formatting across the entire selected range when the user clicks a formatting button.