Add custom attribute

[MisterBalboa]

Hi there,

I need to add a dynamic class to each

tag every time I call setContents.

something like

window.quill.setContents([
    { insert: "hello", attributes: { customKey: condition ? 'class-a' : 'class-b' } }
]);

I am able to hack my way in the Block class

class Block extends BlockBlot {
  ...
  formatAt(index, length, name, value) {
    if (length <= 0) return;
    if (name === 'customKey') this.domNode.classList.add(value);
    ...
  }

but the attribute is not stored in quill inner structure, quill.getContents does not store my attributes.customKey, I tried adding it to /formats folder without success.

Is there any official way to do this?
any suggestions?

[tevinch]

Use a registered block ClassAttributor, then put the format on the paragraph's newline. That makes it part of getContents() instead of only a DOM class.

const { ClassAttributor, Scope } = Quill.import('parchment');
const ParagraphClass = new ClassAttributor('customKey', 'class', {
  scope: Scope.BLOCK,
  whitelist: ['a', 'b'],
});
Quill.register(ParagraphClass); // before creating the editor

const quill = new Quill('#editor', {
  formats: ['customKey', 'bold', 'align', 'header', 'list'],
});
quill.setContents([
  { insert: 'hello' },
  { insert: '\n', attributes: { customKey: condition ? 'a' : 'b' } },
]);

Here class is the prefix: value a produces exactly class-a, and b produces class-b. The Delta stores those suffix values, so change the original full-class payload accordingly. Reserve the class- prefix for this format. If you use a formats allowlist, include customKey alongside your existing allowed formats.

For an existing paragraph, use quill.formatLine(0, 1, 'customKey', 'b'); false removes it. No Block modification is needed.

A runnable Quill2.0.3 example includes editing, JSON export, clearing, restoration into a new editor and repeated class changes, with bold/alignment/heading/list content retained. The Delta documentation explains why line formats belong on the newline.