added the feature of word count and fixed the misalignment

[RashiS26]

Added a word count feature in the input text area and there was a misalignment between the input text and the icon so fixed that one too.

• Made changes in the Text_Input.jsx
• Fixes Word count and paste button #306 FIX: Issue #306 Word count and paste button #313 misalignment of text #376

Summary by CodeRabbit

New Features

• Real-time word and character counter displays while typing in text input
• Live counter overlay shows text statistics instantly
• Enhanced text input interface with improved layout and icon buttons

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

The changes introduce real-time word and character counting to the text input interface. A new CSS class styles the word count display, the Text_Input component is refactored to track input state and render a live word count, and a new word counter component is created with counting logic and UI elements.

Changes

Cohort / File(s)	Summary
CSS Styling eduaid_web/src/App.css	Added .word-count class styling a right-aligned, non-interactive label with absolute positioning, custom font size/color/opacity, and disabled pointer events.
Text Input Component eduaid_web/src/pages/Text_Input.jsx	Refactored to use controlled input handler (handleChange), compute derived word count from input text, and render word count display. Restructured textarea markup with repositioned icon button and adjusted layout styling.
Word Counter Component eduaid_web/src/workers/app.tsx	New component implementing live word/character counter with local text state, real-time count computation (whitespace-based word splitting), and fixed-position overlay displaying counts with lucide-react icons. Includes header, input area, and auto-save disclaimer.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 Hop along with word and paste,
No counting haste!
Numbers flutter, letters glow,
In the input's dancing show,
Watch the counter steal the flow! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes: adding word count feature and fixing misalignment issues in the text input component.
Linked Issues check	✅ Passed	The PR implements both main objectives from issue #306: adds word count display to input box and includes a paste button (icon button) in the input area.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing word count, paste button functionality, and fixing misalignment in the Text_Input component as specified in issue #306.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@eduaid_web/src/workers/app.tsx`:
- Around line 1-3: The project imports icons from lucide-react in
eduaid_web/src/workers/app.tsx (see import of AlignLeft, Hash, Type), but
lucide-react is missing from package.json; add "lucide-react" to
eduaid_web/package.json dependencies (or run yarn add / npm install --save
lucide-react) and then reinstall dependencies so the import in app.tsx resolves
at build time.

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify lucide-react is declared in package.json files
fd -a 'package\.json$' -x rg -n '"lucide-react"' {}

Repository: AOSSIE-Org/EduAid

Length of output: 43

---

🏁 Script executed:

#!/bin/bash
# Find all package.json files
fd -a 'package\.json$' -x sh -c 'echo "=== {} ===" && cat {}'

Repository: AOSSIE-Org/EduAid

Length of output: 3618

---

Add lucide-react to dependencies in eduaid_web/package.json.

The import statement uses icons from lucide-react, but this dependency is not declared in the package.json. The build will fail with a module not found error.

🤖 Prompt for AI Agents

In `@eduaid_web/src/workers/app.tsx` around lines 1 - 3, The project imports icons
from lucide-react in eduaid_web/src/workers/app.tsx (see import of AlignLeft,
Hash, Type), but lucide-react is missing from package.json; add "lucide-react"
to eduaid_web/package.json dependencies (or run yarn add / npm install --save
lucide-react) and then reinstall dependencies so the import in app.tsx resolves
at build time.