quillreact-quill

Custom inline custom class attributer throws 'create is not a function error - quilljs v2

I need to create a couple of simple formats that just add a css class - one block and one inline. I hit a problem with an unexpected error on the inline format.

The quill docs are awful at covering the steps to do this, but looking at the predefined formats, I could successfully clone the align format for the block formatter with the following:

import { ClassAttributor, Scope } from 'parchment';

const IframeAlignClass = new ClassAttributor('iframeAlign', 'ql-iframe-align', {
  scope: Scope.BLOCK,
  whitelist: ['left', 'center', 'right'],
});

Quill.register({
  'formats/iframeAlign': IframeAlignClass,
  'attributors/class/iframeAlign': IframeAlignClass,
}, true);

This works as I want, the block gets the appropriate css class.

For the inline class, I've tried with cloning the size format (which is essentially the same thing):

const InlineTestClass = new ClassAttributor('inlineTest', 'ql-inline-test', {
  scope: Scope.INLINE,
  whitelist: ['yes', 'no', 'maybe'],
});
Quill.register({
  'formats/inlineTest': InlineTestClass,
  'attributors/class/inlineTest': InlineTestClass,
}, true);

When I try something like quill.formatText(5, 5, { 'inlineTest': 'yes' }) where 5,5 is just a range of plain text in the editor, it throws TypeError: o.create is not a function (o is the quill InlineBlot class). As a double check, quill.formatText(5, 5, { 'size': 'large' }) works perfectly well on that range.

I have extended the InlineBlot class to get around this, but then I have over a page of code and am no longer using native format which may or may not be an issue later on.

Does anyone know of the correct way to create a simple inline format like this? I don't see what the difference is between my custom format and the built-in size format. Thanks for any help.

Solution

  • I have no idea why this works, but the answer is to import parchment from Quill instead of directly (even though the Quill formats import parchment directly ...)

    const parchment = Quill.import('parchment') as any;
const { ClassAttributor, Scope } = parchment;