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

Create the attributeBuilder method #7

Closed
luscuissiatto opened this issue Jan 12, 2021 · 22 comments
Closed

Create the attributeBuilder method #7

luscuissiatto opened this issue Jan 12, 2021 · 22 comments

Comments

@luscuissiatto
Copy link

luscuissiatto commented Jan 12, 2021

Is it possible to create an attributeBuilder method that works just like embedBuilder? I have the code below, but I can't customize the view

{ "attributes": { "list": "checked" }, "insert": "\n" }, { "attributes": { "list": "unchecked" }, "insert": "\n" }

@singerdmx
Copy link
Owner

We are trying to understand what you mean.
A little more clarification would be nice.
Also a pull request will be even better :)

@li3317
Copy link
Collaborator

li3317 commented Jan 12, 2021

Could you provide an example on what type of customization? Thank you!

@singerdmx
Copy link
Owner

If attributeBuilder is provided, how do you plan to use it?

@luscuissiatto
Copy link
Author

Sorry, I'll try to explain it better. I have three types of lists in quill web (ordered, bookmark, check):
image

Flutter-quill generates this:
image

To generate a checklist, attributeBuilder would work like this:
image

Does that make sense?

@singerdmx
Copy link
Owner

quill web has built-in checked ?
Could you provide delta string for this example?

@singerdmx
Copy link
Owner

image

You are trying to provide custom leading. See code above

@singerdmx
Copy link
Owner

Widget _buildLeading(BuildContext context, Line line, int index,
      Map<int, int> indentLevelCounts, int count) {
    DefaultStyles defaultStyles = QuillStyles.getStyles(context, false);
    Map<String, Attribute> attrs = line.style.attributes;
    if (attrs[Attribute.list.key] == Attribute.ol) {
      return _NumberPoint(
        index: index,
        indentLevelCounts: indentLevelCounts,
        count: count,
        style: defaultStyles.paragraph.style,
        attrs: attrs,
        width: 32.0,
        padding: 8.0,
      );
    }

    if (attrs[Attribute.list.key] == Attribute.ul) {
      return _BulletPoint(
        style:
            defaultStyles.paragraph.style.copyWith(fontWeight: FontWeight.bold),
        width: 32,
      );
    }
    if (attrs.containsKey(Attribute.codeBlock.key)) {
      return _NumberPoint(
        index: index,
        indentLevelCounts: indentLevelCounts,
        count: count,
        style: defaultStyles.code.style
            .copyWith(color: defaultStyles.code.style.color.withOpacity(0.4)),
        width: 32.0,
        attrs: attrs,
        padding: 16.0,
        withDot: false,
      );
    }
    return null;
  }

Currently we only support _NumberPoint and _BulletPoint

@luscuissiatto
Copy link
Author

luscuissiatto commented Jan 12, 2021

Yes, it's a custom leading.

In Quill web version 1.3.7 there are three types of lists:
image

Generating the delta code:
[ { "attributes": { "list": "ordered" }, "insert": "\n" }, { "insert": "Ordered list item" }, { "attributes": { "list": "bullet" }, "insert": "\n" }, { "insert": "Bullet list item" }, { "attributes": { "list": "unchecked" }, "insert": "\n" }, { "insert": "Checklist item" }, { "attributes": { "list": "checked" }, "insert": "\n" }, { "insert": "Checklist item" }, ]

@singerdmx
Copy link
Owner

Ok, if check is in official delta string, we can support that.
We will make changes or you can create pull request to modify lib/widgets/text_block.dart if you cannot wait

@luscuissiatto
Copy link
Author

thanks, i will send a pull request

@singerdmx
Copy link
Owner

singerdmx commented Jan 12, 2021

Let's break it into two changes.
Make the toolbar change another commit (we can implement the toolbar change ourselves).

@singerdmx
Copy link
Owner

Also please add the json string in https://github.com/singerdmx/flutter-quill/blob/master/app/assets/sample_data.json
for the check attribute

@singerdmx
Copy link
Owner

image

Something like below:
"{"ops":[{"insert":"this is a check list"},{"attributes":{"list":"checked"},"insert":"\n"},{"insert":"this is a uncheck list"},{"attributes":{"list":"unchecked"},"insert":"\n"}]}"

@li3317
Copy link
Collaborator

li3317 commented Jan 13, 2021

Hello @luscuissiatto ! I added an attribute for check-in lib/models/documents/attribute.dart, we're also working on implementing the corresponding button in toolbar. We're happy to help implement the feature as some details such as on tap to check or uncheck may be a little tricky. Thank you!

@li3317
Copy link
Collaborator

li3317 commented Jan 13, 2021

Here is where the attribute is added : 4e61982

@li3317
Copy link
Collaborator

li3317 commented Jan 15, 2021

Hello @luscuissiatto , we've implemented the check box attribute for lists here : 170f3c6, feel free to check the commit and test it out! Thanks!

@singerdmx
Copy link
Owner

@li3317 I think you forgot to include change for editor.dart

@li3317
Copy link
Collaborator

li3317 commented Jan 15, 2021

Yes thanks for reminding, here's the commit : dfdd1b7 , thanks!

@singerdmx
Copy link
Owner

@luscuissiatto @li3317 check out 1913136

@singerdmx
Copy link
Owner

Closing.
@luscuissiatto this feature is implemented as of version 0.2.0

@luscuissiatto
Copy link
Author

@singerdmx thank you so much

@EgorK0rshun
Copy link
Contributor

if it's possible to use your own symbols for lists? For example, squares. Right now the implementation is only for lists with bullets, numbers and checkboxes.
there is only one validation in text_block.dart with the inability to return widgets depending on the attribute value
@singerdmx , sorry for the tag, but can customization of the sheets be supported?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants