Custom blots cause a mutation error on undo/redo

[Ravenstine]

When I create custom blocks, no matter what tag name I use, I get the following error when doing things like undo and toggling formats:

quill.js:7166 Uncaught TypeError: Cannot read property 'mutations' of undefined

Steps for Reproduction

1. Visit https://codepen.io/Ravenstine/pen/PdBxbw
2. Select the text "dolor sit amet" and click the button that says foo.
3. Select the text "sit" and click the button that says bar.
4. Select the text "dolor sit amet" and delete it.
5. Attempt to undo and redo the changes you made.

Expected behavior:
No mutation errors and the undo history remains intact.

Actual behavior:
Mutation error occurs and it seems like the undo history is often messed up once the error happens.

Platforms:

Chrome 69.0.3497.92 on macOS High Sierra.

Version:

1.3.6

[toao]

@Ravenstine After having a look into the sources I found a dirty workaround that fixes the issue for me: I'm manually adding the new blot name of the inline element to the Inline.order array.

Inline.order.splice(Inline.order.indexOf('bold'), 0, 'foo');

see: https://github.com/quilljs/quill/blob/develop/blots/inline.js#L49-L59

[belvo6]

@Ravenstine try to add additional condition into if statement blot.domNode[Registry.DATA_KEY] &&
if (blot.domNode[Registry.DATA_KEY] && blot.domNode[Registry.DATA_KEY].mutations == null) { // @ts-ignore blot.domNode[Registry.DATA_KEY].mutations = []; }

[lavrton]

I just had the same issue. It will be good to have a solution from the quill side.

@toao thanks for the workaround. It did the job for me.

[ackmanx]

This issue also affects simply enabling/disabling blots. In my case, after enabling 3 custom Inline blots by clicking on the toolbar control, then clicking again to disable them after the 2nd one I get this error.

Like, others, the solution here fixed it for me too.

[cmrd-senya]

Is it related to #2524?

[nghuuphuoc]

@toao The trick works for me. However, it doesn't work if I have multiple instances of the editor on the same page.
Can I know where do you put that line?
In my implementation, the editor behaves differently depending where I put that line.

[toao]

@toao The trick works for me. However, it doesn't work if I have multiple instances of the editor on the same page. Can I know where do you put that line? In my implementation, the editor behaves differently depending where I put that line.

Meanwhile the project where I used this hack was abandoned 😅, but I quickly dug out the code and it looks like this:

import Inline from 'quill/blots/inline';

class Small extends Inline {
  static create() {
    return super.create();
  }

  static formats() {
    return true;
  }
}
Small.blotName = 'small';
Small.tagName = 'SMALL';

Inline.order.splice(Inline.order.indexOf('bold'), 0, 'small');

export default Small;

An own "Small" blot was defined and then manually inserted into the list.

Not sure what's different when you have multiple instances, maybe it causes a reset to the defaults each time, so maybe doing the change at the very end (when everything is loaded) might help.

[nghuuphuoc]

Thanks you, @toao 👍

[samuelClo]

I re opend this, i have the same issue.

[quill-bot]

Quill 2.0 has been released (announcement post) with many changes and fixes. If this is still an issue please create a new issue after reviewing our updated Contributing guide 🙏