Add highlighting

[Kobe-Vandenberghe]

Summary by CodeRabbit

• New Features
  • Added text highlighting to the editor with a dedicated toolbar button.
  • Added support for the ==text== Markdown shortcut.
  • Highlighted text now uses a yellow, theme-aware background.
  • Text selection styling is visually distinct from highlighted text.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: b240d8de-c30f-4a63-b5e8-9274b11d4ffb

📥 Commits

Reviewing files that changed from the base of the PR and between 9126a5a and 05cd1ed.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (5)

• package.json
• src/App.css
• src/components/editor/Editor.tsx
• src/components/icons/index.tsx
• src/lib/shortcuts.ts

Included review availability: Your plan provides up to 4 included reviews per hour; 3 remain after this review.

---

📝 Walkthrough

Walkthrough

The editor now supports highlighted text. It registers the Tiptap Highlight extension, adds a toolbar button and shortcut entry, provides a highlighter icon, and styles highlight marks separately from text selection.

Changes

Editor highlight support

Layer / File(s)	Summary
Highlight extension wiring package.json, src/components/editor/Editor.tsx	Adds @tiptap/extension-highlight and registers Highlight in the editor extensions.
Highlight toolbar control src/components/editor/Editor.tsx, src/components/icons/index.tsx, src/lib/shortcuts.ts	Adds a toolbar control that calls toggleHighlight(), reports the active state, uses HighlighterIcon, and documents the ==text== syntax shortcut.
Highlight rendering styles src/App.css	Uses blue theme-aware colors for text selection and adds yellow styling for .prose mark elements.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant FormatBar
  participant TiptapEditor
  participant AppCss
  User->>FormatBar: Select highlight
  FormatBar->>TiptapEditor: Call toggleHighlight()
  TiptapEditor->>AppCss: Render highlight mark
  AppCss-->>User: Display yellow highlighted text

Loading

Suggested reviewers: erictli

Merge Risk: ⚪ Minimal · up to 05cd1

The highlight changes are localized and repository evidence shows no applicable validation failure or dependency conflict.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 20.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 5 functions across 3 files. (2 skipped: 2…	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 clearly and concisely describes the main change: adding text-highlighting support to the editor.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 20.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 5 functions across 3 files. (2 skipped: 2 unsupported.)

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

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