Skip to content

Text Formatting Buttons Don't Visually Apply Styles #110

@manishbalayan

Description

@manishbalayan

🐞 Issue Description

The text formatting buttons (Bold, Italic, Underline, Strikethrough) in the toolbar toggle their active state but don't actually apply visual formatting to the text in the textarea. Users click the buttons, they highlight as "active," but the text appearance doesn't change.

✅ Expected Behavior

When users click the Bold, Italic, Underline, or Strikethrough buttons, the text in the textarea should visually reflect these formatting changes. Bold text should appear bolder, italic text should be slanted, underlined text should have an underline, and strikethrough text should have a line through it.

⚙️ Steps To Reproduce

  1. Go to the WordWizard home page
  2. Type some text in the textarea (e.g., "Hello World")
  3. Click the Bold button in the toolbar
  4. Observe that the button becomes active/highlighted but the text does not appear bold
  5. Try clicking Italic, Underline, or Strikethrough buttons - none visually change the text

📸 Screenshots

The computed textDecoration variable exists in src/components/TextForm.jsx lines 113-121 but is never applied to the textarea's style prop (lines 147-156).

🧠 Additional Context

The state management exists (isBold, isItalic, isUnderline, isStrike) and is tracked correctly. The fix requires applying fontWeight, fontStyle, and textDecoration CSS properties to the textarea based on these state values.

Metadata

Metadata

Assignees

Labels

hacktoberfestParticipating in Hacktoberfesthacktoberfest2025Participating in Hacktoberfest 2025

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions