fix: address CodeRabbit review comments on code-line.tsx

[narutamaaurum]

This PR addresses the remaining CodeRabbit review comments on the original PR #447:

Fixes

1. **Fixed comment parsing in ** (CodeRabbit nitpick)

   • Changed from to to preserve content after additional (e.g., URLs like )
   • Previously would drop segments after the second

2. **Fixed string token highlighting in ** (CodeRabbit major issue)

   • The original code called before applying regex patterns for string literals
   • This caused quotes to be escaped (, ) before the regex and could match them
   • Fixed by applying syntax highlighting on raw code first using placeholders, then escaping HTML entities, then restoring span tags

The fix for derived state was already applied in the previous commit.

Closes #442

Summary by CodeRabbit

• Refactor

  • Reworked code highlighting to a faster, pure and memoized rendering path with safer HTML handling and improved comment rendering
  • Memoized editor language update logic for more reliable and responsive language switching

• Chores

  • Removed suppressed hook-linting directives and tightened hook dependency handling for cleaner code quality

[qodo-code-review]

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

[github-actions]

👋 Thanks for opening a PR, @narutamaaurum!

Your PR has entered the 🚦 PR Review Pipeline.

⚪ Standard PR detected — your PR will follow the standard review pipeline.

---

What happens next

Stage	Reviewer	Checks
Stage 1 — Automated Validation	🤖 Bot	DCO · Format · AI/Slop · Duplicate
Stage 2 — Human Review	👥 Maintainer	Code + Quality Review
Stage 3 — PA / Maintainer Review	🔑 Project Admin	Final Merge Decision

A pipeline status comment will appear below and update automatically as your PR progresses.

---

While you wait

• Sign all commits (git commit -s)
• Link your issue (Closes #123)
• Use a feature branch (not main)
• Avoid unrelated changes

This comment is posted only once.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: c9e49155-c100-4e47-b41c-de929b4dce44

📥 Commits

Reviewing files that changed from the base of the PR and between 286264d and 8f991cc.

📒 Files selected for processing (2)

• modules/home/code-line.tsx
• modules/playground/components/playground-editor.tsx

🚧 Files skipped from review as they are similar to previous changes (2)

• modules/playground/components/playground-editor.tsx
• modules/home/code-line.tsx

---

Walkthrough

Three React components updated to remove eslint exhaustive-deps suppressions: code-line highlighting replaced with a pure memoized highlighter, playground editor language updater memoized with useCallback, and terminal component lint-suppression comments removed.

Changes

React Hook Dependencies

Layer / File(s)	Summary
Code line highlighting with memoized computation modules/home/code-line.tsx	escapeHtml and a placeholder-based highlightCode were added to inject span markers for tokens, escape non-span text, and restore spans. highlight splits at // to render pre-comment code as highlighted HTML and comments as italic. CodeLine now computes highlights with React.useMemo, removing prior useState/useEffect usage.
Playground editor language callback memoization modules/playground/components/playground-editor.tsx	Imported useCallback. updateEditorLanguage wrapped in useCallback depending on activeFile. The useEffect that syncs Monaco language now calls the memoized updateEditorLanguage() and depends on it (removing previous eslint-disable usage).
Terminal component lint suppression removal modules/webcontainers/components/terminal.tsx	Two eslint-disable-next-line react-hooks/exhaustive-deps comments removed (one before initializeTerminal's dependency array and one in a useEffect cleanup). No functional changes to logic or API signatures.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• piyushdotcomm/Editron#445: Overlapping changes to modules/home/code-line.tsx, modules/playground/components/playground-editor.tsx, and modules/webcontainers/components/terminal.tsx addressing hook dependency patterns.

Suggested labels

gssoc:approved

Suggested reviewers

• piyushdotcomm
• Maxd646

Poem

A rabbit tweaks the hooky trail,
Memo, callbacks — no more fail,
Comments split and spans restored,
ESLint warnings now ignored no more,
Hops away with code well-tailored 🐇

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main objective: addressing CodeRabbit review comments on code-line.tsx, which aligns with the primary changes in the PR.
Description check	✅ Passed	The description covers summary, type of change, and related issue, but lacks explicit validation section completion and screenshots which are non-critical for this refactor PR.
Linked Issues check	✅ Passed	The PR successfully addresses all coding requirements from issue #442: removes eslint-disable comments from three files and implements proper hook dependencies using useCallback and useMemo patterns.
Out of Scope Changes check	✅ Passed	All changes are scoped to addressing CodeRabbit review comments and removing eslint-disable suppressions as required by issue #442; no unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[narutamaaurum]

This PR addresses the remaining CodeRabbit review comments on the original PR #447 (now closed in favor of this PR):

Changes in this PR

1. Fixed comment parsing to preserve content after additional

File:

• Changed from to approach
• This preserves URLs like that contain multiple sequences
• Previously the code would drop everything after the second

2. Fixed string token highlighting

File: ( function)

• The original code called BEFORE applying regex patterns for string literals ( and )
• This caused quotes to be escaped to and before regex matching, so string literals were never highlighted
• Fixed by: applying highlighting on raw code first (using placeholders for span tags), then escaping HTML entities, then restoring span tags

The fix for derived state (replacing + ) was already applied in the previous commit.

This resolves the actionable feedback from CodeRabbit review.

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

modules/playground/components/playground-editor.tsx (1)

269-271: 💤 Low value

Optional: simplify dependency array.

The dependency array includes both activeFile and updateEditorLanguage, but since updateEditorLanguage is memoized with [activeFile] as its only dependency, including activeFile here is redundant. The effect will run when activeFile changes (via updateEditorLanguage changing).

Consider simplifying to:

♻️ Optional simplification

  useEffect(() => {
    updateEditorLanguage();
- }, [activeFile, updateEditorLanguage]);
+ }, [updateEditorLanguage]);

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@modules/playground/components/playground-editor.tsx` around lines 269 - 271,
The effect's dependency array redundantly includes both activeFile and
updateEditorLanguage; since updateEditorLanguage is memoized with activeFile as
its sole dependency, remove activeFile from the useEffect dependency list so it
only depends on updateEditorLanguage (i.e., keep useEffect(() => {
updateEditorLanguage(); }, [updateEditorLanguage])); reference useEffect,
updateEditorLanguage, and activeFile to locate and update the call.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@modules/home/code-line.tsx`:
- Line 28: The regex used in the .replace(...) call on the code line (the call
that invokes replaceWithPlaceholder) lacks word boundaries so it matches
substrings like "important" or "newfound"; update the pattern to use word
boundaries and a non-capturing group, e.g. change the pattern to include \b
around the keywords (/\b(?:import|from|export|default|return|const|new)\b/g) so
only whole keywords are matched while still calling replaceWithPlaceholder as
before.
- Around line 27-31: The matched token content is being interpolated directly
into span templates causing potential XSS; update the replace callbacks that
build `highlighted` (the calls to `replaceWithPlaceholder`) to HTML-escape the
matched text before inserting it into the span (use the existing `escapeHtml`
helper) so you embed safe text, e.g. call `escapeHtml(match)` when constructing
the inner content for the spans in the `replace` handlers for keywords,
single/double-quoted strings, and identifiers (`Editron|console|editor`) instead
of inserting `match` raw.

---

Nitpick comments:
In `@modules/playground/components/playground-editor.tsx`:
- Around line 269-271: The effect's dependency array redundantly includes both
activeFile and updateEditorLanguage; since updateEditorLanguage is memoized with
activeFile as its sole dependency, remove activeFile from the useEffect
dependency list so it only depends on updateEditorLanguage (i.e., keep
useEffect(() => { updateEditorLanguage(); }, [updateEditorLanguage])); reference
useEffect, updateEditorLanguage, and activeFile to locate and update the call.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: b6f3c855-a536-419c-9d55-68b886473a07

📥 Commits

Reviewing files that changed from the base of the PR and between f12b223 and 286264d.

📒 Files selected for processing (3)

• modules/home/code-line.tsx
• modules/playground/components/playground-editor.tsx
• modules/webcontainers/components/terminal.tsx

💤 Files with no reviewable changes (1)

• modules/webcontainers/components/terminal.tsx

[narutamaaurum]

Addressed the CodeRabbit review comments:

1. playground-editor.tsx: Simplified the useEffect dependency array by removing the redundant dependency since is already memoized with .

2. code-line.tsx:

   • Added word boundaries () to keyword regex patterns to prevent matching substrings like "important" or "newfound"
   • Added calls on matched text before inserting into span tags to prevent potential XSS

All changes are minimal and targeted to address the specific concerns raised.

[narutamaaurum]

Created PR #490 with the word boundaries fix for the CodeRabbit review comments on code-line.tsx.

[narutamaaurum]

Created PR #491 with the useEffect dependency fix for the CodeRabbit review comments on playground-editor.tsx.