quill icon indicating copy to clipboard operation
quill copied to clipboard

Adding lists to custom registry is a bad developer experience

Open pshatara90 opened this issue 1 year ago • 1 comments

In order to add lists to registries, you need to extend both the list item and re-create its container if you're importing via Quill.import(), because the list container is not exposed as a default export so you need to rewire them together in order for JS formatting apis to work.

Steps for Reproduction

const List = Quill.import('formats/list');
      const Container = Quill.import('blots/container');

      class ListItem extends List {}
      ListItem.blotName = 'list';
      ListItem.tagName = 'LI';

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

      ListItem.requiredContainer = ListContainer;

      localizedQuillRegistry.register(ListContainer, ListItem);
      localizedQuillRegistry.register();

Expected behavior: Lists should be registered via a simple import/register call.

Actual behavior: Forced to recreate container.

Platforms:

Include browser, operating system and respective versions

Version: 2.0.0-rc.4

Run Quill.version to find out

pshatara90 avatar Apr 08 '24 17:04 pshatara90

Imo the documentation is lacking details.

I was reading https://v2.quilljs.com/docs/customization#content-and-formatting and saw the hint to

console.log(Quill.imports)

so I did just that and can confirm that for v2.0.3 you can import lists via

const ListItem = Quill.import('formats/list') as RegistryDefinition;
const ListContainer = Quill.import('formats/list-container') as RegistryDefinition;

and import them with

const registry = new Registry()
registry.register(ListItem,ListContainer)

I think this Issue can consider fixed.

Davidihl avatar Sep 24 '25 12:09 Davidihl