Quill: Adding allowedChildren to blockquote setting throws an error

Created on 23 Oct 2017  路  2Comments  路  Source: quilljs/quill

I want to prevent some blots such as image from being wrapped in block such as blockquote.
I could use

Blockquote.allowedChildren = [Inline, Text];

to customize the quill source code, and It work.
The problem is: although prevents image from being wrapped by blockquote, it also throws an error

Uncaught Error: [Parchment] Cannot insert image into blockquote

That is not what I want, what should I do to prevent image from being wrapped in other blocks?

Most helpful comment

allowedChildren is not meant to correct invalid input. To do what it sounds like you guys want you would extend Header/Blockquote and modify insertAt to not do anything if given an image.

var BaseHeader = Quill.import('formats/header');
class Header extends BaseHeader {
  insertAt(index, value, embedValue) {
    if (value === 'image' && embedValue) return;
    super.insertAt(index, value);
  }
}

Quill.register(Header, true);

Full example: https://codepen.io/quill/pen/vpPXVR

All 2 comments

I'm also having a similar problem. Wanted to tweak out Header format to 'clean' up formats by doing:

var Header = Quill.import('formats/header');
var TextBlot = Quill.import('blots/text');
Header.allowedChildren = [TextBlot];

But I'm also having the error:

[Parchment] Cannot insert bold into header

And then it applies a delete op of the blots/contents up until the bold blot.

It just seems to be reaching this point, coming from moveChildren and throws the error...

I always thought that adding to allowed children would clean up non allowed formatting/blots inside a container/block. 馃槙 Bummer.

allowedChildren is not meant to correct invalid input. To do what it sounds like you guys want you would extend Header/Blockquote and modify insertAt to not do anything if given an image.

var BaseHeader = Quill.import('formats/header');
class Header extends BaseHeader {
  insertAt(index, value, embedValue) {
    if (value === 'image' && embedValue) return;
    super.insertAt(index, value);
  }
}

Quill.register(Header, true);

Full example: https://codepen.io/quill/pen/vpPXVR

Was this page helpful?
0 / 5 - 0 ratings