Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

feat: View images in a modal screen from rich text editor#3425

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Draft
Copilot wants to merge4 commits intomain
base:main
Choose a base branch
Loading
fromcopilot/fix-656

Conversation

Copy link
Contributor

CopilotAI commentedSep 15, 2025
edited
Loading

This PR implements the ability to view images in a modal overlay when clicked from rich text areas, replacing the previous behavior where clicking an image would open it in a new tab.

Changes

New Modal Experience

  • Click image: Now opens a modal overlay covering 90%+ of the screen instead of opening in a new tab
  • ESC key or backdrop click: Closes the modal
  • Modal size: Covers at least 90% of page width and height as requested
  • Image display: Centers the image with proper aspect ratio preservation

Updated Actions

  • Download: Unchanged - downloads the image file
  • View original: Renamed from "View" - opens the image in a new tab for full-screen viewing

Implementation Details

New Component:ImageModal (app/assets/js/components/ImageModal/index.tsx)

  • Uses the existing Modal component for consistency
  • Displays images with proper centering and aspect ratio
  • Includes footer with "Download" and "View original" actions

Modified Component: UpdatedImageView inBlobView.tsx

  • Added state management for modal visibility
  • Added click handler for images (non-edit mode only)
  • Removed the anchor wrapper that previously opened images in new tabs
  • Integrated the ImageModal component

Tests: Added comprehensive tests for the ImageModal component covering open/close states and link behaviors.

Visual Demo

Before and After Comparison:
Feature Overview

Modal in Action:
Modal Demo

User Experience Impact

ActionBeforeAfter
Click imageOpens in new tabOpens modal overlay
Click "View"Opens in new tabN/A (renamed)
Click "View original"N/AOpens in new tab
Click "Download"Downloads fileDownloads file (unchanged)
ESC keyN/ACloses modal
Click outsideN/ACloses modal

This change addresses the issue where clicking the image and "View" performed the same action, providing a more intuitive and contextual image viewing experience within the rich text editor.

Fixes#656.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • 127.0.0.11

If you need me to access, download, or install something from one of these locations, you can either:


💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Clickhere to start the survey.

CopilotAIand others added2 commitsSeptember 15, 2025 14:47
Co-authored-by: shiroyasha <1779493+shiroyasha@users.noreply.github.com>
Co-authored-by: shiroyasha <1779493+shiroyasha@users.noreply.github.com>
CopilotAI changed the title[WIP] View images in a modal screenfeat: View images in a modal screen from rich text editorSep 15, 2025
Copilot finished work on behalf ofshiroyashaSeptember 15, 2025 14:53
Signed-off-by: Igor Šarčević <igor@operately.com>
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment

Reviewers

@shiroyashashiroyashaAwaiting requested review from shiroyasha

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

View images in a modal screen

2 participants

@shiroyasha

[8]ページ先頭

©2009-2025 Movatter.jp