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?

Shine

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).

Shine

How can I specify the type here? – Florrieflorry

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!

Longsufferance

Let me know if it still doesn't work so I can help you more. If this has solved your problem, consider marking this answer as the correct one. I'm new on SO and it would help me out too :-) thanks – Longsufferance

Thanks, I'd changed the exports in my copy so the above was fine. I figured out it was related to the Parchment import, so I've posted an explanation. – Shine