Having problems extending Quill

Question

I'm hitting some problems extending Quill.

I want to modify the List and ListItem classes in Quill, so I tried to copy formats/list.js into my code base as a starting point. I then import my local copy and register it with Quill like so...

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

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

However, when I attempt to create a list in the editor the code crashes in the List class with the following error:

ParchmentError {message: "[Parchment] Unable to create list-item blot", name: "ParchmentError"}

This happens on this line... https://github.com/quilljs/quill/blob/develop/formats/list.js#L99

I assume it relates to the imports I was forced to change, but I can't figure out what's wrong. I've not made any other changes to list.js. The original file has the following:-

import Block from '../blots/block';
import Container from '../blots/container';

Which I changed to this:-

import Quill from 'quill';
let Block = Quill.import('blots/block');
let Container = Quill.import('blots/container');

Is the way I am importing wrong? What is causing the error?

Answer 1

Figured it out (well a colleague did).

I needed to import Parchment like so :-

let Parchment = Quill.import('parchment');

instead of import Parchment from 'parchment';

This is because you'll end up with a different static Parchment class to the one used internally to Quill, so asking Quill for it's instance ensures you are both working with the same one (ie, the one where the blots were registered).

Answer 2

I came across that problem a couple hours ago.

In Quill's source code, List is a default export while ListItem is a named export.

So your import should look like this:

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

Be sure to export them appropriately on your custom list.js file.

Good luck!