title: ngx-quill: Unable to create a custom list blot
body: <p>In short: I am trying to create a custom list blot to show a letter list in ngx-quill.</p>
  
  <p><strong>What I have done so far:</strong> 
  I created a custom list blot by coping and pasting from "<a href="https://github.com/quilljs/quill/blob/develop/formats/list.js" rel="nofollow noreferrer">https://github.com/quilljs/quill/blob/develop/formats/list.js</a>" and editing:</p>
  
  <pre class="lang-js prettyprint-override"><code>import Quill from 'quill';
  
  const Block = Quill.import('blots/block');
  const Inline = Quill.import('blots/inline');
  const Embed = Quill.import('blots/embed');
  const Container = Quill.import('blots/container');
  
  class CustomListContainer extends Container {}
  CustomListContainer.blotName = 'custom-list-container';
  CustomListContainer.tagName = 'OL';
  CustomListContainer.className = 'custom-letter-list';
  
  class CustomListItem 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(CustomListContainer);
      }
  
      constructor(scroll, domNode) {
          super(scroll, domNode);
          const ui = document.createElement('span');
          const listEventHandler = e =&gt; {
              if (!scroll.isEnabled()) return;
              const format = this.statics.formats(domNode, scroll);
              if (format === 'checked') {
                  this.format('custom-letter-list', 'unchecked');
                  e.preventDefault();
              } else if (format === 'unchecked') {
                  this.format('custom-letter-list', 'checked');
                  e.preventDefault();
              }
          };
          /*
          ui.addEventListener('mousedown', listEventHandler);
          ui.addEventListener('touchstart', listEventHandler);
          this.attachUI(ui);
           */
      }
  
      format(name, value) {
          if (name === this.statics.blotName &amp;&amp; value) {
              this.domNode.setAttribute('data-list', value);
          } else {
              super.format(name, value);
          }
      }
  }
  CustomListItem.blotName = 'custom-letter-list';
  CustomListItem.tagName = 'LI';
  CustomListContainer.className = 'custom-letter-list-item';
  
  CustomListContainer.allowedChildren = [CustomListItem];
  CustomListItem.requiredContainer = CustomListContainer;
  
  Quill.register(CustomListContainer);
  Quill.register(CustomListItem);
  
  export { CustomListContainer, CustomListItem as default};
  </code></pre>
  
  <p>And added this list-blot to toolbar:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id=toolbar&gt;
   &lt;span class="ql-formats"&gt;
    &lt;button class="ql-custom-letter-list"&gt;L&lt;/button&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Expected behavior:</strong> 
  It should appear a letter list on screen counting from 'a' like:</p>
  
  <p>a. first<br>
  b. second</p>
  
  <p>Presentation in HTML: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="ql-editor"&gt;
   &lt;ol class="custom-letter-list"&gt;
    &lt;li data-list="true"&gt;first&lt;/li&gt;
    &lt;li data-list="true"&gt;second&lt;/li&gt;
   &lt;/ol&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Actual behavior:</strong>
  A bullet list is appearing on screen:</p>
  
  <ul>
  <li>first</li>
  <li>second</li>
  </ul>
  
  <p>Presentation in HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="ql-editor"&gt;
   &lt;li data-list="true"&gt;first&lt;/li&gt;
   &lt;li data-list="true"&gt;second&lt;/li&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I hope somebody can help me with this issue. I have exactly no idea what's going wrong.</p>
  
  <p>Kind regards,
  HTanke</p>