Fix. Images under toggle displayed even when closed

[myjeong19]

Description of Changes

Here is reference: #25

---

fix 'images under toggle displayed even when closed'

• Prevent images inside a closed toggle from being added to the viewer.
• Changed from JSON recursion to DOM mutation tracking to detect toggle state.

Review point

• Is DOM mutation tracking the best approach for detecting toggle state changes, or should we query block states directly?
• Any performance concerns when observing large documents?
• Refactoring will be carried out once the current code is merged.

To reproduce

• npm run story:start
• click 'toggle-image' on the Storybook left side panel

Screenshot

toggle-image.mov

• A screenshot of your created block being rendered in Storybook.

Review Guide

Reviews are conducted based on priority levels, such as p0, p1, p2, p3, p4, and p5.
p0 ~ p2: If the author decides not to reflect a review for p0 to p2, it signals that a proper discussion with the reviewer is
necessary. It is expected
that the review will be resolved either through incorporating the feedback or through further discussion.
p3: indicates that the reviewer has identified a significant issue, but either lacks a clear solution or the comment lacks sufficient context. Further explanation or additional discussion on the reviewer's concerns is needed.
p4, p5: p4 and p5 suggest low priority, and if the author does not deem them important, these comments can be disregarded.

[Moon-DaeSeung]

I will check this weekend. thanks

[myjeong19]

I will check this weekend. thanks

Got it, thanks

[myjeong19]

Fix: Image viewer overlay background transparency issue

• Modified the CSS to fix an issue where the overlay was not rendering in the image viewer during actual use.

[Moon-DaeSeung]

I will check next week..

[myjeong19]

I will check next week..

Could I include the refactoring and improvements in this PR?

[Moon-DaeSeung]

I will check next week..

Could I include the refactoring and improvements in this PR?

sure

[myjeong19]

Bug Fixes

• Modal layout breaking: Fixed overlay modal causing layout shifts in underlying content
• ViewerTools disappearing: Fixed tools disappearing when hovering over them due to setTimeout

New Features

• Enhanced caption handling: Integrated findImageCaption function for better image caption discovery

Architecture Improvements

• Component separation: Split monolithic ImageViewer into modular components
• Compound component pattern: ViewerTools now uses specialized sub-components
• Cleaner separation of concerns: Each component has single responsibility
• CSS standardization: Unified naming from notion-image-viewer-* to notion-viewer-*
• Code cleanup: Removed unused components and utilities

Testing

• Modal overlay doesn't break underlying layout
• ViewerTools remain visible on hover
• Image viewer functionality maintained
• No regression in existing features
• Verified in Next.js app by linking @notionpresso/react as a local file: dependency

[myjeong19]

Fixed unnatural transitions during scale changes in various scenarios. I'll wrap up the work in this PR

[myjeong19]

Fixed unnatural transitions during scale changes in various scenarios.

During further testing, I noticed that some issues only appeared in the actual rendering environment, not in the iframe environment.
I had initially mentioned that this PR was ready to wrap up, but additional issues were discovered, so I made further revisions.

Specifically, Safari calculated image sizes larger than their actual dimensions, and animations became unstable during scale changes under certain conditions.
To address these, I updated the implementation to apply dynamic max-width and max-height values.

I’ve retested across various scenarios, and no further issues have been found.

Safari test video (after fix):

safari.mp4

[Moon-DaeSeung]

so many files are changed , just for fix some bugs

why??

[myjeong19]

so many files are changed , just for fix some bugs

why??

Since we agreed to include refactoring and improvements in this PR, I worked on them together with the bug fixes. That’s why the number of changed files is larger.