feat: CodeViewer click link and auto wrap

[feitianbubu]

增强: debug页面显示支持换行和链接可点击功能

Summary by CodeRabbit

• New Features

  • URLs in code are now clickable for direct access.

• Style

  • Improved text wrapping and layout for better readability of long code lines.

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

[coderabbitai]

Walkthrough

URL linkification is added to the CodeViewer component via regex-based detection and HTML conversion. A rendering pipeline processes highlighted content into renderable content with clickable links, and styling adjustments enable proper text wrapping for long lines.

Changes

Cohort / File(s)	Summary
URL Linkification Pipeline web/src/components/playground/CodeViewer.jsx	Introduces linkRegex and linkifyHtml function to convert URLs into clickable anchors. Adds renderedContent memo that processes highlightedContent through the linkification pipeline. Updates DOM insertion to render processed content. Applies pre-wrap and word-break styling for improved line wrapping.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A URLs now dance with clickable flair,
Wrapped in links, floating through the air,
Lines bend and break with elegant grace,
Code viewers showing their finest face!
Long lines surrender, no overflow pain,
The playground's glow shines bright once again. ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: adding clickable link functionality and auto-wrapping to the CodeViewer component.
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 docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

🧪 Unit Test Generation v2 is now available!

We have significantly improved our unit test generation capabilities.

To enable: Add this to your .coderabbit.yaml configuration:

reviews:
  finishing_touches:
    unit_tests:
      enabled: true

Try it out by using the @coderabbitai generate unit tests command on your code files or under ✨ Finishing Touches on the walkthrough!

Have feedback? Share your thoughts on our Discord thread!

---

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