Quill: How does Header know that it needs to act on <h /> - tags?

[lustoykov]

So I'd like to replace all <h* /> tags by <h4 />

---

Approach

this.Header = Quill.import('formats/header');

class MyHeader extends this.Header {
  // Replace default tagName [H1, ..., H6] with H4 => convert each <h* /> tag to h4
  static tagName = ['H4', 'H4', 'H4', 'H4', 'H4', 'H4'];
  // sets data-value in CSS to 4 (which stands for H4) so that quill knows how to style
  // the toolbar when <h4 /> element is clicked
  static formats(_domNode: Node) {
    return 4;
  }
}

Quill.register('formats/header', MyHeader);

This works... question is why?

How does Quill figure out that the Header is responsible for <h1 /> so that it manages to convert them properly if tagNames are only H4's?

What would be the correct approach to achieve that at all?

[jhchen]

Do you just want to replace it when the editor is initialized, or prevent any additions as well (like if the user copies and pastes h1 you want this to become h4)?

[lustoykov]

First of all, thank you for the quick reply and the amazing work you did there to develop this editor. In our opinion it is currently the best out there and feedback from users has been very positive as well.

Now back to the issue - I'd like to replace all h's with h4, since we can't allow anything except for h4 - setConents, copy-paste... etc. I'm also interested on why exactly this code above works so perfectly - how does Header figure out that it is responsible for <h1 />,..., <h6 />. I've been looking into the source code without much success.

I'd like to understand well what is going on there, since we depend very much on this editor.

PS. Same thing with class Strike - if I replace static tagName = s with static tagName = strike the editor figures out the s tags and replaces them with strike tags

[jhchen]

Thank you for the kind words and apologies for the delay on the followup.

Essentially in formats/header, the tagName specifies all tags that would match the header format. Then the formats function tells it specifically the mapping.

I think for your use case the best way would be to overwrite the static create function to always create an h4:

let Header = Quill.import('formats/header');
Header.create = function(value) {
  // ignore value, always create h4
  return document.createElement('h4');
};