Quill Editor Angular Custom Headings

I am using Quill editor for my Angular application but there seems to be an issue with how the H2 translates into documents. H1 through H6 work properly ( correct format / spacing / margin ) but the H2 just ignores defautl AND custom styling. So what I wanna do 'hide' it but in a way that the user doesnt ''understand'' that its gone. What I tried to do is set up a custom header like this

import Quill from 'quill';
import QuillTableBetter from 'quill-table-better';
import { QuillModules } from 'ngx-quill';

const HeaderBlot = Quill.import('formats/header') as typeof Quill.FormatAttributor;

class ShiftedHeader extends HeaderBlot {
static blotName = 'header';
static tagName = ['H2', 'H3', 'H4', 'H5', 'H6'];

static create(value: number) {
const shiftedValue = Math.min(value + 1, 6);
return super.create(shiftedValue);
}

static formats(domNode: HTMLElement) {
const level = parseInt(domNode.tagName[1], 10);
return Math.max(level - 1, 1);
}
}

Quill.register(
{
'formats/header': ShiftedHeader,
'modules/table-better': QuillTableBetter
},
true
);


and then declare the QuillModules:


quillModules: QuillModules = {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
['table-better'], // Add table tool
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'align': [] }],
['clean'],
['link', 'video'] // 'image' do not support image yet
],
table: false,
'table-better': {
language: 'en_US',
menus: [
'column',
'row',
'merge',
'table',
'cell',
'wrap',
'copy',
'delete',
],
toolbarTable: true,
},
keyboard: {
bindings: QuillTableBetter.keyboardBindings,
},
};


but when I click on a heading it registers it like

<undefined><span style="background-color: rgb(255, 255, 204);">1: Overview</span></undefined>


so no h1, h2 tags etc. What did I do wrong and is my approach remotely close or this cant be done? Thanks

Continue reading...