How do you retain the custom attributes for a paragraph in quilljs

Question

We are currently using quilljs for a project. When we try to add html through the dangerouslyPasteHTML API from the Clipboard module, the custom attributes from the paragraphs are stripped.

For example:

On applying the following code :

quill.clipboard.dangerouslyPasteHTML("<p data-id='1'>Hello</p>");

The output obtained is

<p>Hello</p>

How do you retain the attribute 'data-id' in the output?

UPDATE 1: I have managed to retain the custom attribute 'data-id' using the following code:

var Parchment = Quill.import('parchment');
var dataId = new Parchment.Attributor.Attribute('data-id', 'data-id', {
    scope: Parchment.Scope.BLOCK
});
Quill.register(dataId);

However, on creating a new line (hitting the enter key), the same data-id is appearing in the new paragraph as well. How do I ensure that the new paragraph either has a custom data-id or does not contain the 'data-id' attribute?

Answer 1

I am pretty late to answer this, but for anyone encountering this issue, I have fixed it in the following way:

import Quill from 'quill';

const Parchment = Quill.import('parchment');
const IDAttribute = new Parchment.Attributor.Attribute('id-attribute', 'id', {
  scope: Parchment.Scope.BLOCK,
});
Quill.register(
  {
    'attributors/attribute/id': IDAttribute,
  },
  true
);

Quill.register(
  {
    'formats/id': IDAttribute,
  },
  true
);

const Block = Quill.import('blots/block');

class BlockBlot extends Block {
  constructor(domNode) {
    super(domNode);
    domNode.setAttribute('id', '');
    this.cache = {};
  }
}

BlockBlot.blotName = 'block';

export default BlockBlot;

So basically we want to make a custom Blot extending from the Block blot available and use it for the Block format execution. In the constructor we can do whatever we want to do with the attribute. In my case I am removing the id attribute which was being added to new block.