[PR #5803] [MERGED] feat: photo gallery block + image improvements #7014

New issue

Closed

opened 2026-03-23 23:17:42 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 23:17:42 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/5803
Author: @Xazin
Created: 7/24/2024
Status: ✅ Merged
Merged: 7/25/2024
Merged by: @Xazin

Base: main ← Head: feat/multiple-images

📝 Commits (10+)

773e00d feat: support multiple images in image block
1e5a58a feat: support drop files on image placeholder
ed37a20 chore: merge branch 'upstream/main' into feat/multiple-images
77a7a6b fix: overflow in image placeholder
1b50bb0 chore: clean code
64522e0 feat: refactor to multi image block
df91cff feat: drop image on gallery to add
6c8ddbf feat: add delete image inside interactive viewer
78b42b4 chore: merge branch 'upstream/main' into feat/multiple-images
15eaa92 fix: some mobile improvements

📊 Changes

45 files changed (+3025 additions, -421 deletions)

View changed files

📝 .github/workflows/tauri2_ci.yaml (+12 -25)
📝 frontend/appflowy_flutter/integration_test/cloud/anon_user_continue_test.dart (+1 -1)
📝 frontend/appflowy_flutter/integration_test/desktop/document/document_test_runner.dart (+3 -0)
📝 frontend/appflowy_flutter/integration_test/desktop/document/document_with_image_block_test.dart (+71 -8)
➕ frontend/appflowy_flutter/integration_test/desktop/document/document_with_multi_image_block_test.dart (+287 -0)
📝 frontend/appflowy_flutter/integration_test/shared/editor_test_operations.dart (+4 -3)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_configuration.dart (+28 -5)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart (+4 -2)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart (+11 -7)
➕ frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/common.dart (+64 -0)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/custom_image_block_component/custom_image_block_component.dart (+46 -54)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/custom_image_block_component/image_menu.dart (+50 -36)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/custom_image_block_component/unsupport_image_widget.dart (+6 -11)
➖ frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/flowy_image_picker.dart (+0 -40)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/image_picker_screen.dart (+29 -2)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/image_placeholder.dart (+144 -70)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/image_selection_menu.dart (+66 -21)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/image_util.dart (+51 -0)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/mobile_image_toolbar_item.dart (+3 -2)
➕ frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/multi_image_block_component/multi_image_block_component.dart (+331 -0)

...and 25 more files

📄 Description

This PR adds:

Drop image(s) on Image Placeholder to mass insert
Pick multiple images from local to mass insert image blocks
New Photo Gallery block with a simple image browser mode
- Can drop images both on the placeholder block but also the image browser to quickly insert an image.
Interactive Image Viewer with zoom, delete, and download (for internal images hosted in cloud)/open image (for files and external images).

Relates: #5557 #2947 #5407 #5486 #4346

Closes: #5165

Feature Preview

Windows

https://github.com/user-attachments/assets/3bd1f3df-5858-443e-890f-34a9b3856560

iOS
TBD

PR Checklist

My code adheres to AppFlowy's Conventions
I've listed at least one issue that this PR fixes in the description above.
I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes.
All existing tests are passing.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/AppFlowy-IO/AppFlowy/pull/5803 **Author:** [@Xazin](https://github.com/Xazin) **Created:** 7/24/2024 **Status:** ✅ Merged **Merged:** 7/25/2024 **Merged by:** [@Xazin](https://github.com/Xazin) **Base:** `main` ← **Head:** `feat/multiple-images` --- ### 📝 Commits (10+) - [`773e00d`](https://github.com/AppFlowy-IO/AppFlowy/commit/773e00df8b6f8b5250a72e40c9b17227a0e54a6a) feat: support multiple images in image block - [`1e5a58a`](https://github.com/AppFlowy-IO/AppFlowy/commit/1e5a58ae3e25ca18750806184de4d0e2fe22220d) feat: support drop files on image placeholder - [`ed37a20`](https://github.com/AppFlowy-IO/AppFlowy/commit/ed37a209dd5ab01cb1cee843edad2209eb4b9f0e) chore: merge branch 'upstream/main' into feat/multiple-images - [`77a7a6b`](https://github.com/AppFlowy-IO/AppFlowy/commit/77a7a6b6c145b7e272a023afaba38f436d6dd251) fix: overflow in image placeholder - [`1b50bb0`](https://github.com/AppFlowy-IO/AppFlowy/commit/1b50bb0f6a0bbaf0cbba0f6e17a0b951cc40479b) chore: clean code - [`64522e0`](https://github.com/AppFlowy-IO/AppFlowy/commit/64522e06ab1b64fc03bed6cfca68f0fd1604578b) feat: refactor to multi image block - [`df91cff`](https://github.com/AppFlowy-IO/AppFlowy/commit/df91cffe814ca5a916558a338d3a03676d918f37) feat: drop image on gallery to add - [`6c8ddbf`](https://github.com/AppFlowy-IO/AppFlowy/commit/6c8ddbf1136a1f0f4204355393dad48ec8db8049) feat: add delete image inside interactive viewer - [`78b42b4`](https://github.com/AppFlowy-IO/AppFlowy/commit/78b42b415fdb679425c97732e7816e8ddc2506fe) chore: merge branch 'upstream/main' into feat/multiple-images - [`15eaa92`](https://github.com/AppFlowy-IO/AppFlowy/commit/15eaa92b7b8c45d52460ff69111eaa10885eb664) fix: some mobile improvements ### 📊 Changes **45 files changed** (+3025 additions, -421 deletions) <details> <summary>View changed files</summary> 📝 `.github/workflows/tauri2_ci.yaml` (+12 -25) 📝 `frontend/appflowy_flutter/integration_test/cloud/anon_user_continue_test.dart` (+1 -1) 📝 `frontend/appflowy_flutter/integration_test/desktop/document/document_test_runner.dart` (+3 -0) 📝 `frontend/appflowy_flutter/integration_test/desktop/document/document_with_image_block_test.dart` (+71 -8) ➕ `frontend/appflowy_flutter/integration_test/desktop/document/document_with_multi_image_block_test.dart` (+287 -0) 📝 `frontend/appflowy_flutter/integration_test/shared/editor_test_operations.dart` (+4 -3) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_configuration.dart` (+28 -5) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart` (+4 -2) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart` (+11 -7) ➕ `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/common.dart` (+64 -0) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/custom_image_block_component/custom_image_block_component.dart` (+46 -54) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/custom_image_block_component/image_menu.dart` (+50 -36) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/custom_image_block_component/unsupport_image_widget.dart` (+6 -11) ➖ `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/flowy_image_picker.dart` (+0 -40) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/image_picker_screen.dart` (+29 -2) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/image_placeholder.dart` (+144 -70) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/image_selection_menu.dart` (+66 -21) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/image_util.dart` (+51 -0) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/mobile_image_toolbar_item.dart` (+3 -2) ➕ `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/multi_image_block_component/multi_image_block_component.dart` (+331 -0) _...and 25 more files_ </details> ### 📄 Description This PR adds: - Drop image(s) on Image Placeholder to mass insert - Pick multiple images from local to mass insert image blocks - New Photo Gallery block with a simple image browser mode - Can drop images both on the placeholder block but also the image browser to quickly insert an image. - Interactive Image Viewer with zoom, delete, and download _(for internal images hosted in cloud)_/open image _(for files and external images)_. Relates: #5557 #2947 #5407 #5486 #4346 Closes: #5165 ### Feature Preview **Windows** https://github.com/user-attachments/assets/3bd1f3df-5858-443e-890f-34a9b3856560 **iOS** TBD #### PR Checklist - [x] My code adheres to [AppFlowy's Conventions](https://docs.appflowy.io/docs/documentation/software-contributions/conventions) - [x] I've listed at least one issue that this PR fixes in the description above. - [x] I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes. - [x] All existing tests are passing. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>