DEV Community

Getting to know QuillJS - Part 1 (Parchment, Blots, and Lifecycle)

Adam Charron on March 14, 2018

This is the first of series of Blog posts on QuillJS and its data library Parchment. The following followup articles are planned and will be linked...

Read full post

Péter Kovács • Dec 21 '19 • Edited

Thanks a lot for this great article, Adam!

After reading the app's own docs and looking into the source code, I have been kind of hesitating what to think: Is the app's implementation well-designed or is it over-engineered? While I still haven't made up my mind about this, learning about the use of MutationObserver(s) (from your article) make me lean more toward it being perhaps over-engineered rather than smartly designed. After all, why would this kind of component have to be prepared to handling exogenous changes to the sub-tree which is supposed to be completely under its own control?

Chris Lou • May 15 '18

Hey man, very good article! You explain some things that aren't well explained on their documentation.

Looking forward for the next one about "Containers - Creating a Mutliline Block". I am having some trouble creating a container that can have containers inside, so I hope you can shed some light on that matter.

Cheers!

medboo • Aug 4 '20 • Edited

Do you have any idea how to implement the UL/OL lists with blots, I have used this but with no luck:

class ListContainer extends Container {}
        ListContainer.blotName = 'list-container';
        ListContainer.tagName = 'OL';

        class ListItem extends Block {
          static create(value) {
            const node = super.create();
            node.setAttribute('data-list', value);
            return node;
          }

          static formats(domNode) {
            return domNode.getAttribute('data-list') || undefined;
          }

          static register() {
            Quill.register(ListContainer);
          }

          constructor(scroll, domNode) {
            super(scroll, domNode);
            const ui = domNode.ownerDocument.createElement('span');
            const listEventHandler = e => {
              if (!scroll.isEnabled()) return;
              const format = this.statics.formats(domNode, scroll);
              if (format === 'checked') {
                this.format('list', 'unchecked');
                e.preventDefault();
              } else if (format === 'unchecked') {
                this.format('list', 'checked');
                e.preventDefault();
              }
            };
            ui.addEventListener('mousedown', listEventHandler);
            ui.addEventListener('touchstart', listEventHandler);
            this.attachUI(ui);
          }

          format(name, value) {
            if (name === this.statics.blotName && value) {
              this.domNode.setAttribute('data-list', value);
            } else {
              super.format(name, value);
            }
          }
        }

        ListItem.blotName = 'list';
        ListItem.tagName = 'LI';

        ListContainer.allowedChildren = [ListItem];
        ListItem.requiredContainer = ListContainer;

        Quill.register(ListContainer);

        $('#ul-button').click(function() {
          quill.format('list-container', ListItem);
        });

This is basically copied from github.com/quilljs/quill/blob/deve...

Roberto Sasso • Jun 14 '18

Hi Adam, Great Article! Thank you so much for taking the time to write it.
A quick question: I am trying to add two inline/block blots to a parent Blot but i can't really undersatnd how to achieve it. I am trying to augment the list so what i want to achieve is

but i'm a bit stuck, could you point me to a good direction to understand how quill's logic works? The project is cool but very undocumented

Joseph Adah • May 23 '19 • Edited

Hey @charrondev, when are we expecting the next articles on this topic

Comment deleted

Joseph Adah • May 23 '19

sorry!

Heleen Emanuel • Feb 6 '19 • Edited

Hi Adam, thanks for this super clear article. I was wondering if you've finished the editor? Was Quill able to meet all your requirements? Any plans on writing the follow up articles?

Adam Charron • Feb 12 '19

We just released the 1.0 version of our editor in Vanilla 2.8.

You can find the source code for the front end here it’s not fully decoupled from our product at the moment but we’ve put a ton of work into. Probably more LoC than quill itself so it could be a good reference for you.

I’d you want to see it in action you can head over to our open source forums. We’ve still got a few kinks to work out over there particularly on mobile so I’d recommend checking it out on a larger device.

I don’t intend to follow up with the other articles at the moment. The author has been less than receptive to me when I’ve reached out to make contributions to core and active development of quill seems to have moved to a closed source repo where the original author is building a closed source product on top of it, slab.com.

As such we’ll likely be forking quill in one of our open source repos adding documenting that. It will likely use the same underlying document format as quill though.