How can i custom heading format?

[okjack365]

I'm trying to customize the format to add other html tags to the DOM node of the title. Example: Default: <h2>22</h2> expected implementation: <h2><div class="text">test</div>22</h2>

Steps for Reproduction 1.Customize CustomHeaderBlot to override the default header format：

import Header from 'quill/formats/header';
class CustomHeaderBlot extends Header {
  static blotName = 'header';    
  static tagName = ['H1', 'H2'];
  static create(value) {      
    const node = super.create(value);
    node.innerHTML = `<div class="text">test</div>`; // <div> tag will be removed
    // node.innerHTML = `<span class="text">test</span>`; // <span> tag will be removed
    return node;
  }    
}  
Quill.register(CustomHeaderBlot);

2.When I enter text in H2 format: 22

Expected behavior: <h2><div class="text">test</div>22</h2>

Actual behavior: <h2>test22</h2>

Platforms: Quill version："2.0.0-rc.2"

[Farnsi]

I think you need to extend from Container and add a CustomDivBlot too, view https://github.com/quilljs/quill/blob/main/packages/quill/src/formats/table.ts

It should be easier to extend from Block (blots/block) and add a class to the h-tag itself.

Something like this

    class MyBlock extends Block {
      static blotName = 'myblock';
      static tagName = 'DIV';

      static create(value) {
        const node = super.create(value);
        node.setAttribute('class', value);
        return node;
      }

      static formats(domNode) {
        return domNode.getAttribute('class');
      }
    }
    Quill.register(MyBlock, true);

[okjack365]

I think you need to extend from Container and add a CustomDivBlot too, view https://github.com/quilljs/quill/blob/main/packages/quill/src/formats/table.ts

It should be easier to extend from Block (blots/block) and add a class to the h-tag itself.

Something like this

    class MyBlock extends Block {
      static blotName = 'myblock';
      static tagName = 'DIV';

      static create(value) {
        const node = super.create(value);
        node.setAttribute('class', value);
        return node;
      }

      static formats(domNode) {
        return domNode.getAttribute('class');
      }
    }
    Quill.register(MyBlock, true);

Thank you for the reply. But I still haven't found a way to insert a custom div tag into H2. for example:

<h2><div class="text">test</div>22</h2>

It seems that the main problem is: while retaining the attributes of the header itself, how to prevent the inserted custom div tag from being automatically deleted by quill.