What's the correct way of defining style attributes in Quill Parchment

Question

I've tried all the examples in the Parchment docs, but none of them work correctly. For example, using the following code from the documentation...

import Parchment from 'parchment';

let Align = new Parchment.Attributor.Style('align', 'text-align', {
  whitelist: ['right', 'center', 'justify']   // Having no value implies left align
});
Parchment.register(Align);

let node = document.createElement('div');
Align.add(node, 'right');
console.log(node.outerHTML);

The docs state that this will print <div class="blot-align-right"></div>, but I actually just get <div></div>.

I've checked what happens in the debugger. Align.add() calls canAdd(), which always returns false.

Can anyone provide a working example of using Parchment?

Answer 1

This should work:

Parchment = Quill.import('parchment');

let Align = new Parchment.Attributor.Style('align', 'text-align', {
  whitelist: ['right', 'center', 'justify']
});

Quill.register(Align);

let node = document.createElement('div');
Align.add(node, 'right');
console.log(node.outerHTML);