[GH-ISSUE #6255] [FR] Multiple list indentation at one #2762

New issue

Closed

opened 2026-03-23 21:24:58 +00:00 by mirror · 1 comment

mirror commented

2026-03-23 21:24:58 +00:00

Owner

Originally created by @sstante on GitHub (Sep 9, 2024).
Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/6255

Description

When multiple list items are selected, and the user presses TAB, it should indent all selected items. Right now, nothing happens.

-> TAB ->

This is expected behavior. Notion does it as well.

Impact

Users can quickly change the indentation of list items.

Additional Context

No response

Originally created by @sstante on GitHub (Sep 9, 2024). Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/6255 ### Description When multiple list items are selected, and the user presses `TAB`, it should indent all selected items. Right now, nothing happens. ![image](https://github.com/user-attachments/assets/0b4d8819-d606-44cf-9d25-26c8f54a7429) -> `TAB` -> ![image](https://github.com/user-attachments/assets/1dfc7a0c-0e48-4a99-ae27-96f4bd2dc0d1) This is expected behavior. Notion does it as well. ### Impact Users can quickly change the indentation of list items. ### Additional Context _No response_

mirror

2026-03-23 21:24:58 +00:00

closed this issue
added the
Q4 24

improvements

editor

flutter-only
labels

mirror commented

2026-03-23 21:24:59 +00:00

Author

Owner

@Digital365Staking commented on GitHub (Sep 10, 2024):

Technical Advice for Implementation
Here’s how such a feature could potentially be implemented in AppFlowy :

Capture the Multi-Selection Event
Detecting Multiple Selections: First, the editor needs to detect when multiple list items are selected. Most editors track the start and end positions of selections (e.g., in HTML, selections are tracked with a range object). In Flutter, the logic could rely on identifying when multiple text blocks (list items) are selected.
Modify the Tab Key Behavior
Handle TAB Key Input: By default, the TAB key may focus on UI elements, but it can be overridden in an editor to apply indentation. Flutter's RawKeyboardListener could be used to detect when the TAB key is pressed and determine if list items are selected.
Apply Indentation
Increase Indentation: Once the TAB key is detected, the indentation logic should be triggered. This could involve:
Adjusting the padding or margin of the selected list items to reflect the increased indentation level.
Modifying the data model (e.g., adding a property that reflects the indent level) so the indentation is persistent.
For lists, this usually means converting the selected items into a sub-list or increasing their nesting depth.
Handle SHIFT + TAB for Outdenting
SHIFT + TAB for Reducing Indentation: To complete the feature, you would also need to support outdenting, typically done by pressing SHIFT + TAB. The logic here would reverse the indentation effect applied by the TAB key.
Handling Mixed Content
Maintain Structure Consistency: If multiple items include different levels of indentation, the function should increment the indentation by one level for each item, relative to their current indentation, maintaining the relative hierarchy.
Performance Considerations
Real-time Updating: Ensuring that updates to the document structure (especially large documents) don’t cause performance lags when multiple items are being indented simultaneously.

@Digital365Staking commented on GitHub (Sep 10, 2024): Technical Advice for Implementation Here’s how such a feature could potentially be implemented in AppFlowy : 1. Capture the Multi-Selection Event Detecting Multiple Selections: First, the editor needs to detect when multiple list items are selected. Most editors track the start and end positions of selections (e.g., in HTML, selections are tracked with a range object). In Flutter, the logic could rely on identifying when multiple text blocks (list items) are selected. 2. Modify the Tab Key Behavior Handle TAB Key Input: By default, the TAB key may focus on UI elements, but it can be overridden in an editor to apply indentation. Flutter's RawKeyboardListener could be used to detect when the TAB key is pressed and determine if list items are selected. 3. Apply Indentation Increase Indentation: Once the TAB key is detected, the indentation logic should be triggered. This could involve: Adjusting the padding or margin of the selected list items to reflect the increased indentation level. Modifying the data model (e.g., adding a property that reflects the indent level) so the indentation is persistent. For lists, this usually means converting the selected items into a sub-list or increasing their nesting depth. 4. Handle SHIFT + TAB for Outdenting SHIFT + TAB for Reducing Indentation: To complete the feature, you would also need to support outdenting, typically done by pressing SHIFT + TAB. The logic here would reverse the indentation effect applied by the TAB key. 5. Handling Mixed Content Maintain Structure Consistency: If multiple items include different levels of indentation, the function should increment the indentation by one level for each item, relative to their current indentation, maintaining the relative hierarchy. 6. Performance Considerations Real-time Updating: Ensuring that updates to the document structure (especially large documents) don’t cause performance lags when multiple items are being indented simultaneously.

mirror referenced this issue

2026-03-23 22:18:38 +00:00

[PR #2762] [MERGED] chore: bump version 0.2.1 #5413