[PR #7493] [MERGED] feat: make the columns block same width width the editor #7912

New issue

Closed

opened 2026-03-23 23:21:45 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 23:21:45 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/7493
Author: @LucasXu0
Created: 3/10/2025
Status: ✅ Merged
Merged: 3/10/2025
Merged by: @LucasXu0

Base: main ← Head: columns_block_improvement

📝 Commits (7)

1e8642a feat: make the columns block same width width the editor
35469da chore: turn off column debug mode
b035f39 feat: add block selection container in outline block
ffb81fc feat: use ratio instead of width in simple columns
0702da8 fix: document rules
30fa945 fix: turn off debug mode
208a106 fix: update the existing columns block data

📊 Changes

10 files changed (+223 additions, -107 deletions)

View changed files

📝 frontend/appflowy_flutter/lib/plugins/document/application/document_rules.dart (+22 -0)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/drag_to_reorder/draggable_option_button.dart (+2 -2)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/drag_to_reorder/util.dart (+30 -34)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/columns/simple_column_block_component.dart (+39 -14)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/columns/simple_column_block_width_resizer.dart (+49 -15)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/columns/simple_column_node_extension.dart (+4 -4)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/columns/simple_columns_block_component.dart (+43 -27)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/custom_image_block_component/custom_image_block_component.dart (+2 -1)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/outline/outline_block_component.dart (+28 -1)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/slash_menu/slash_menu_items/simple_columns_item.dart (+4 -9)

📄 Description

Feature Preview

https://github.com/AppFlowy-IO/AppFlowy/issues/7476

change the width with ratio
auto resize the column width when window size change.

https://github.com/user-attachments/assets/af8322e9-1de1-45c8-8e3b-6dfba509bc8b

Debug Mode

https://github.com/user-attachments/assets/6238ef96-8ee4-4788-84d9-4f95bad37366

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/7493 **Author:** [@LucasXu0](https://github.com/LucasXu0) **Created:** 3/10/2025 **Status:** ✅ Merged **Merged:** 3/10/2025 **Merged by:** [@LucasXu0](https://github.com/LucasXu0) **Base:** `main` ← **Head:** `columns_block_improvement` --- ### 📝 Commits (7) - [`1e8642a`](https://github.com/AppFlowy-IO/AppFlowy/commit/1e8642ac27d3f6b5f3546c445de7c0d063fa8b47) feat: make the columns block same width width the editor - [`35469da`](https://github.com/AppFlowy-IO/AppFlowy/commit/35469da440817505d78af0f35aacbf141705ebeb) chore: turn off column debug mode - [`b035f39`](https://github.com/AppFlowy-IO/AppFlowy/commit/b035f39fbdbcd67c6493f7c367320b4464a96ad3) feat: add block selection container in outline block - [`ffb81fc`](https://github.com/AppFlowy-IO/AppFlowy/commit/ffb81fcc0bc1dbcd803b45a5affedbf70f0a61b8) feat: use ratio instead of width in simple columns - [`0702da8`](https://github.com/AppFlowy-IO/AppFlowy/commit/0702da89a051400a8f91475f462856f8a99ca226) fix: document rules - [`30fa945`](https://github.com/AppFlowy-IO/AppFlowy/commit/30fa9458582a878946911cf15ecc5f03a05b4354) fix: turn off debug mode - [`208a106`](https://github.com/AppFlowy-IO/AppFlowy/commit/208a106f072916576ec68851f69959f5138e5209) fix: update the existing columns block data ### 📊 Changes **10 files changed** (+223 additions, -107 deletions) <details> <summary>View changed files</summary> 📝 `frontend/appflowy_flutter/lib/plugins/document/application/document_rules.dart` (+22 -0) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/drag_to_reorder/draggable_option_button.dart` (+2 -2) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/drag_to_reorder/util.dart` (+30 -34) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/columns/simple_column_block_component.dart` (+39 -14) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/columns/simple_column_block_width_resizer.dart` (+49 -15) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/columns/simple_column_node_extension.dart` (+4 -4) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/columns/simple_columns_block_component.dart` (+43 -27) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/custom_image_block_component/custom_image_block_component.dart` (+2 -1) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/outline/outline_block_component.dart` (+28 -1) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/slash_menu/slash_menu_items/simple_columns_item.dart` (+4 -9) </details> ### 📄 Description   ### Feature Preview https://github.com/AppFlowy-IO/AppFlowy/issues/7476 - [x] change the width with ratio - [x] auto resize the column width when window size change. https://github.com/user-attachments/assets/af8322e9-1de1-45c8-8e3b-6dfba509bc8b Debug Mode https://github.com/user-attachments/assets/6238ef96-8ee4-4788-84d9-4f95bad37366  ---  #### 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. - [ ] I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes. - [ ] All existing tests are passing. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>