Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FR] Multiple list indentation at one #6255

Closed
Timisorean opened this issue Sep 9, 2024 · 1 comment · Fixed by AppFlowy-IO/appflowy-editor#903
Closed

[FR] Multiple list indentation at one #6255

Timisorean opened this issue Sep 9, 2024 · 1 comment · Fixed by AppFlowy-IO/appflowy-editor#903
Labels
editor features related to the rich-text editor flutter-only For tasks that require working solely with Flutter improvements improvements on an existing feature Q4 24

Comments

@Timisorean
Copy link

Description

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

image
-> TAB ->
image

This is expected behavior. Notion does it as well.

Impact

Users can quickly change the indentation of list items.

Additional Context

No response

@Xazin Xazin added good first issue for experienced devs for the experienced community developers to claim good first issue for devs for the community members to claim improvements improvements on an existing feature editor features related to the rich-text editor flutter-only For tasks that require working solely with Flutter labels Sep 10, 2024
@Digital365Staking
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
editor features related to the rich-text editor flutter-only For tasks that require working solely with Flutter improvements improvements on an existing feature Q4 24
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants