Make `QuillEditor*Point` more customizable

[vishna]

Is there an existing issue for this?

• [X] I have searched the existing issues

Use case

Looking for a way to achieve the following design:

This is the component I would like to be able to customize:

What's not possible currently?

• The 1. should be aligned to topLeft inside QuillEditorNumberPoint (currently it's topRight)
• The 1. should have a specific different color than the rest of the text
• The width of QuillEditorNumberPoint and left padding should be customizable
• The 1. should be base aligned with the rest of the text ( this looks like a separate bug 🤔 )

Proposal

What is happening currently?

text_bloc.dart has _buildLeading which decides which bullet point widget will be used:

• QuillEditorNumberPoint
• QuillEditorBulletPoint
• QuillEditorCheckboxPoint

This is getting put under EditableTextLine (which is a custom RenderObjectWidget).

By default this is getting put in a Container of predetermined width that will align everything to topEnd. It looks like baseline alignment is lost, and background color of the container will be enforced.

There is an option to pass a customWidget by QuillEditorConfigurations > QuillEditorElementOptions > OrderedList. There is no way however to dynamically build widget based on the index of the bullet point. Moreover the customWidget will be just put inside the Container prohibiting any changes to the Container itself thus limiting bullet list customization.

What could happen?

There could be an API that allows you to just buildLeading yourself. This could be put under respective configuration objects under QuillEditorElementOptions. That said, I could imagine having an option to pass:

leadingBuilder to QuillEditorUnOrderedListElementOptions. leadingBuilder would be a function returning a Widget that takes all these arguments:

QuillEditorNumberPoint(
        index: index,
        indentLevelCounts: indentLevelCounts,
        count: count,
        style: defaultStyles.code!.style
            .copyWith(color: defaultStyles.code!.style.color!.withOpacity(0.4)),
        width: _numberPointWidth(fontSize, count),
        attrs: attrs,
        padding: fontSize,
        withDot: false,
      )

Futhermore all the helper methods like double _numberPointWidth(double fontSize, int count) should either be public static (so that they can be reused), or there should be a way to override them at the configuration level.

[vishna]

I'm happy to implement this. I could use some pointers though from the authors of the package if my design idea/thinking direction is correct.

SIDENOTE:

Adding this extra API could maybe allow solving this issue: https://github.com/singerdmx/flutter-quill/issues/1611 (to some extent, it might need some extra attribute information about type of icon, but that is out of the scope of the problem I'm trying to solve)

[CatHood0]

I think the same thing. Some parts of the components are too much harcoded and is difficult move them to another part. I think the best way is creating a new way to customize fully all components. But, i'm still trying to do this, so, by now your idea could be the first step to make this possible.

[singerdmx]

This is quite some feature beyond the expectation of this library. That being said, there is no harm trying to make it happen.

[CatHood0]

(to some extent, it might need some extra attribute information about type of icon, but that is out of the scope of the problem I'm trying to solve)

I think is better add a class configuration to the list items. Something like:

class ListConfiguration {
  int level; // it  doesn't be used by any list that not have the same level.
  ...any other configs 
}

Using a class setting avoids breaking the default behavior of the list and backwards compatibility with any old Delta that uses the new format (I guess the list attribute adds more information)

[CatHood0]

Any update about this?

I'm creating a way to customize all kinds of blocks or lines (without affecting EditableTextLine or EditableTextBlock). I admit it, it's harder than I thought.