Skip to content

feat: use shared Lightbox for md/tasks image previews#3842

Open
peterchinman wants to merge 1 commit into
mainfrom
peter/macro-1703-mdtasks-should-use-same-lightbox-as-channels
Open

feat: use shared Lightbox for md/tasks image previews#3842
peterchinman wants to merge 1 commit into
mainfrom
peter/macro-1703-mdtasks-should-use-same-lightbox-as-channels

Conversation

@peterchinman

Copy link
Copy Markdown
Contributor

md/tasks render description images through the Lexical MarkdownImage decorator, whose "view full" action was a bespoke Kobalte Dialog showing a plain <img> with only a close button — no zoom/pan, download, or copy.

This replaces that custom viewer with the shared Lightbox component (@core/component/Lightbox) — the same one channels use via MediaViewerDialog. Task image previews now get the full toolbar (copy, download), zoom-to-cursor/pan, and consistent overlay styling, with no other behavior changes (still triggered by double-click / the enlarge button via the existing viewerOpen signal).

https://claude.ai/code/session_018RnRMdqUqYmoPU86w9ctvY


Generated by Claude Code

Replace the bespoke Dialog viewer in the markdown image decorator with
the shared Lightbox component used by channels, bringing zoom/pan,
copy, download, and consistent styling to task image previews.

https://claude.ai/code/session_018RnRMdqUqYmoPU86w9ctvY
@macro-application

Copy link
Copy Markdown

@coderabbitai

coderabbitai Bot commented Jun 8, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 4c796d67-4b03-47ba-9bb9-c4e4c3fb043e

📥 Commits

Reviewing files that changed from the base of the PR and between 4248d5a and dc56853.

📒 Files selected for processing (1)
  • js/app/packages/core/component/LexicalMarkdown/component/decorator/MarkdownImage.tsx

📝 Walkthrough

Summary by CodeRabbit

  • Refactor
    • Simplified markdown image viewer implementation using the shared lightbox component.

Walkthrough

MarkdownImage.tsx refactors its full-image viewer to use the shared Lightbox component. The change adds a Lightbox import, adjusts related UI imports to remove close-button and icon dependencies, and replaces the custom Dialog.Content layout (with close button and inline <img>) in the Dialog.Portal with a Dialog.Overlay containing Lightbox configured with the image source and id.

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The PR title follows conventional commits format with 'feat:' prefix and is 53 characters, well under the 72-character limit. It clearly summarizes the main change: replacing a custom image viewer with a shared Lightbox component for markdown/tasks image previews.
Description check ✅ Passed The PR description is directly related to the changeset, explaining the motivation for using the shared Lightbox component, what was replaced, and what new features are gained. It provides meaningful context about the change.
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.

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


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

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

@github-actions

github-actions Bot commented Jun 8, 2026

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants