/

Heading

The Heading extension adds support for headings of different levels. Headings are rendered with h1, h2, h3, h4, h5 or h6 HTML tags. By default all six heading levels (or styles) are enabled, but you can pass an array to only allow a few levels. Check the usage example to see how this is done. Type # at the beginning of a new line and it will magically transform to a heading, same for ## , ### , #### , ##### and ######. 
    
      
    

      
      
    

  
    
      class a{constructor(){this.builtInTools=[u.Undo,u.Size];this.isE2E=f(L);this.control=new M(`
        <h1>This is a 1st level heading</h1>
        <h2>This is a 2nd level heading</h2>
        <h3>This is a 3rd level heading</h3>
        <h4>This is a 4th level heading</h4>
        <h5>This is a 5th level heading</h5>
        <h6>This is a 6th level heading</h6>
        <p>This is a paragraph</p>
    `)}}
    

      
      
    

  
    
      <tui-editor
    class="heading"
    [formControl]="control"
    [tools]="builtInTools"
/>

<tui-accordion [closeOthers]="false">
    <button [tuiAccordion]="isE2E">HTML</button>
    <tui-expand>
        <ng-container *tuiItem>
            <tui-editor-socket [content]="control.value" />
        </ng-container>
    </tui-expand>

    <button [tuiAccordion]="isE2E">Text</button>
    <tui-expand>
        <ng-container *tuiItem>
            <span class="code">{{ control.value }}</span>
        </ng-container>
    </tui-expand>
</tui-accordion>

    

      
      
    

  
    
      :host ::ng-deep {
    .text-h1,
    .text-h2,
    .text-h3,
    .text-h4,
    .text-h5,
    .text-h6 {
        margin: 0.3125rem 0;
    }

    .text-h1 {
        color: #f00;
    }

    .text-h2 {
        color: #00f;
    }

    .text-h3 {
        color: #008000;
    }

    .text-h4 {
        color: #808080;
    }

    .text-h5 {
        color: #ffc0cb;
    }

    .text-h6 {
        color: #8a2be2;
    }
}

Font size

You can use any size for paragraph like in your Google Docs 
    
      
    

      
      
    

  
    
      class a{constructor(){this.builtInTools=[x.Undo,x.Size];this.isE2E=y(I);this.control=new z(`
        <p><span style="font-size: 96px">96</span></p>
        <p><span style="font-size: 72px">72</span></p>
        <p><span style="font-size: 48px">48</span></p>
        <p><span style="font-size: 36px">36</span></p>
        <p><span style="font-size: 30px">30</span></p>
        <p><span style="font-size: 24px">24</span></p>
        <p><span style="font-size: 18px">18</span></p>
        <p><span style="font-size: 14px">14</span></p>
        <p><span style="font-size: 12px">12</span></p>
        <p><span style="font-size: 11px">11</span></p>
        <p><span style="font-size: 10px">10</span></p>
        <p><span style="font-size: 9px">9</span></p>
        <p><span style="font-size: 8px">8</span></p>
    `)}}
    

      
      
    

  
    
      <tui-editor
    class="heading"
    [formControl]="control"
    [tools]="builtInTools"
/>

<tui-accordion [closeOthers]="false">
    <button [tuiAccordion]="isE2E">HTML</button>
    <tui-expand>
        <ng-container *tuiItem>
            <tui-editor-socket [content]="control.value" />
        </ng-container>
    </tui-expand>

    <button [tuiAccordion]="isE2E">Text</button>
    <tui-expand>
        <ng-container *tuiItem>
            <span class="code">{{ control.value }}</span>
        </ng-container>
    </tui-expand>
</tui-accordion>

Custom font size tool 

    
      
    

      
      
    

  
    
      class r{constructor(){this.builtInTools=[F.Undo];this.isE2E=x(I);this.control=new S(`
        <p>Hello</p>
        <p><span style="font-size: 24px">Hello world</span></p>
    `)}}
    

      
      
    

  
    
      <tui-editor
    class="heading"
    [formControl]="control"
    [tools]="builtInTools"
>
    <ng-container ngProjectAs="tools">
        <font-size-tool tuiItem />
    </ng-container>
</tui-editor>

<tui-accordion [closeOthers]="false">
    <button [tuiAccordion]="isE2E">HTML</button>
    <tui-expand>
        <ng-container *tuiItem>
            <tui-editor-socket [content]="control.value" />
        </ng-container>
    </tui-expand>

    <button [tuiAccordion]="isE2E">Text</button>
    <tui-expand>
        <ng-container *tuiItem>
            <span class="code">{{ control.value }}</span>
        </ng-container>
    </tui-expand>
</tui-accordion>

Disable default font hotkeys

Override font option template

Provide fontOptionContent property via provideTuiEditorOptions to fully customize how each option is rendered inside the font dropdown
stackblitzstackblitz