Quill: Quilljs - Error: [Parchment] Unable to create list-item blot

[fangqiao]

I am testing Quilljs. I use webpack. Quill is 1.3.6 from NPM.

Following official sample, I used the code below:

import Quill from 'quill/core'

import Toolbar from 'quill/modules/toolbar'
import Snow from 'quill/themes/snow'

import Bold from 'quill/formats/bold'
import Italic from 'quill/formats/italic'
import Header from 'quill/formats/header'
import Underline from 'quill/formats/underline'
import ListItem from 'quill/formats/list'
import Strike from 'quill/formats/strike'
import Blockquote from 'quill/formats/blockquote'
import CodeBlock from 'quill/formats/code'
import Script from 'quill/formats/script'
import Image from 'quill/formats/image'
import Link from 'quill/formats/link'

Quill.register({
  'modules/toolbar': Toolbar,
  'themes/snow': Snow,
  'formats/bold': Bold,
  'formats/italic': Italic,
  'formats/header': Header,
  'formats/underline': Underline,
  'formats/list': ListItem,
  'formats/strike' : Strike,
  'formats/blockquote' : Blockquote,
  'formats/codeblock' : CodeBlock,
  'formats/script' : Script,
  'formats/image' : Image,
  'formats/link' : Link,
});


export default Quill;

Toolbar is set with:

const container = document.getElementById('test')

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],       
  ['blockquote', 'code-block','image','link'],

  [{ 'header': 1 }, { 'header': 2 }],               
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      

];

const option = {
  theme: 'snow',
  placeholder: 'Compose an epic test ...',
  modules : {
    toolbar: toolbarOptions
  }
}

const editor = new Quill(container, option)

All the other toolbar formatting icons work as expected, except list items, both ordered and unordered.

It always throws this error:

[Parchment] Unable to create list-item blot
[Show/hide message details.] Error: [Parchment] Unable to create list-item blot registry.ts:21

[binarious]

Worked for me:

import List, { ListItem } from 'quill/formats/list';

Quill.register({
  'formats/list': List,
  'formats/list-item': ListItem,
});