[PR #4642] [MERGED] feat: Implement outline block component depth control #6364

New issue

Closed

opened 2026-03-23 22:22:53 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 22:22:53 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/4642
Author: @Jayaprakash-dev
Created: 2/10/2024
Status: ✅ Merged
Merged: 2/20/2024
Merged by: @LucasXu0

Base: main ← Head: feat_outline_block_component_depth_control

📝 Commits (10+)

903f4b7 feat: add support to control the depth of outline block component
3672df7 feat: update localization keys
b5ff060 feat: add depth option to BlockOptionButton
95ed63b feat: retrive outline block heading components upto the depth level
f57fb52 feat: add depth option config to editor configuration
b180805 test: outline block depth control
5331bd4 feat: add outline block placeholder
651ab6b refactor: remove redundant codes
5d21f3a ci: trigger github actions
1cf9a84 chore: refactor OptionDepthType enum

📊 Changes

10 files changed (+304 additions, -20 deletions)

View changed files

📝 frontend/appflowy_flutter/integration_test/document/document_with_outline_block_test.dart (+109 -9)
📝 frontend/appflowy_flutter/integration_test/util/editor_test_operations.dart (+22 -0)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_configuration.dart (+9 -0)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/block_action_option_button.dart (+4 -0)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/option_action.dart (+113 -2)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/option_action_button.dart (+6 -0)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/outline/outline_block_component.dart (+27 -3)
📝 frontend/appflowy_flutter/lib/workspace/presentation/widgets/pop_up_action.dart (+6 -0)
📝 frontend/appflowy_flutter/packages/flowy_infra/lib/language.dart (+2 -4)
📝 frontend/resources/translations/en.json (+6 -2)

📄 Description

Closes: #4355

Changes Made:
Added dynamic depth control to the OutlineBlockWidget component.
When a depth H1 is selected, the app now displays headings up to level 1.
For depth H2, it shows headings up to level 2, extending upto subsequent H3 headings.

Demo:

https://github.com/AppFlowy-IO/AppFlowy/assets/68953739/948a6e88-89d8-49c7-b58c-7ef3f5f899af

_{🔄 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/4642 **Author:** [@Jayaprakash-dev](https://github.com/Jayaprakash-dev) **Created:** 2/10/2024 **Status:** ✅ Merged **Merged:** 2/20/2024 **Merged by:** [@LucasXu0](https://github.com/LucasXu0) **Base:** `main` ← **Head:** `feat_outline_block_component_depth_control` --- ### 📝 Commits (10+) - [`903f4b7`](https://github.com/AppFlowy-IO/AppFlowy/commit/903f4b734cf66b8e6c0fc6df76eb94b67bc74e3a) feat: add support to control the depth of outline block component - [`3672df7`](https://github.com/AppFlowy-IO/AppFlowy/commit/3672df78cd3231e0adf7ca97952fa4d9c1c73bed) feat: update localization keys - [`b5ff060`](https://github.com/AppFlowy-IO/AppFlowy/commit/b5ff060e3b60000954e145526baa680059863221) feat: add depth option to `BlockOptionButton` - [`95ed63b`](https://github.com/AppFlowy-IO/AppFlowy/commit/95ed63b06f22a703a904a54c19fc0180a0549db2) feat: retrive outline block heading components upto the depth level - [`f57fb52`](https://github.com/AppFlowy-IO/AppFlowy/commit/f57fb521321e2a013a528c1770659333279874fb) feat: add depth option config to editor configuration - [`b180805`](https://github.com/AppFlowy-IO/AppFlowy/commit/b1808051e43667a5f809a0d99459f5dc5b1e1d53) test: outline block depth control - [`5331bd4`](https://github.com/AppFlowy-IO/AppFlowy/commit/5331bd454a9c7e57d4c8984a2d4f15f31b8cc1b3) feat: add outline block placeholder - [`651ab6b`](https://github.com/AppFlowy-IO/AppFlowy/commit/651ab6b032a5d3eb03088941b3edc37ffb6b58fb) refactor: remove redundant codes - [`5d21f3a`](https://github.com/AppFlowy-IO/AppFlowy/commit/5d21f3ab6d8536c4e986bd972645e32afdfb7fad) ci: trigger github actions - [`1cf9a84`](https://github.com/AppFlowy-IO/AppFlowy/commit/1cf9a84cf52abf0de92fd04fd745024c7740f025) chore: refactor `OptionDepthType` enum ### 📊 Changes **10 files changed** (+304 additions, -20 deletions) <details> <summary>View changed files</summary> 📝 `frontend/appflowy_flutter/integration_test/document/document_with_outline_block_test.dart` (+109 -9) 📝 `frontend/appflowy_flutter/integration_test/util/editor_test_operations.dart` (+22 -0) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_configuration.dart` (+9 -0) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/block_action_option_button.dart` (+4 -0) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/option_action.dart` (+113 -2) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/option_action_button.dart` (+6 -0) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/outline/outline_block_component.dart` (+27 -3) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/widgets/pop_up_action.dart` (+6 -0) 📝 `frontend/appflowy_flutter/packages/flowy_infra/lib/language.dart` (+2 -4) 📝 `frontend/resources/translations/en.json` (+6 -2) </details> ### 📄 Description **Closes:** #4355 **Changes Made:** Added dynamic depth control to the `OutlineBlockWidget` component. When a depth **H1** is selected, the app now displays headings up to level 1. For depth **H2**, it shows headings up to level 2, extending upto subsequent **H3** headings. **Demo:** https://github.com/AppFlowy-IO/AppFlowy/assets/68953739/948a6e88-89d8-49c7-b58c-7ef3f5f899af --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>