quill-header-list

demo

Usage

npm install quill-header-list

import HeaderList from 'quill-header-list';
import 'quill-header-list/dist/index.css';

Quill.register({ 'modules/header-list': HeaderList }, true);
new Quill('#editor', {
  theme: 'snow',
  modules: {
    'toolbar': {
      container: [[{ header: [null, 1, 2, 3, 4, 5, 6] }, 'header-list']],
      handlers: {
        'header-list': HeaderList.toolbarHandle
      }
    },
    'header-list': {
      container: document.getElementById('directory'), // specify a element to receive the header list
    },
  },
});

Options

name	type	description	default	required
container	string | HTMLElement	the list container. string must be the element id	-	true
scrollContainer	string | HTMLElement	editor scroll container. default is quill.root	-	false
hideClass	number	the class name when list hidden	is-hidden	false
topOffset	number | () => number	the offset from the top(px)	0	false
headerHeight	number	the header height in editor. this is for calculate header scroll highligh. don't make the height difference between h1 and h6 too much	36	false
onBeforeShow	() => boolean	trigger before display. return true will cancel display	-	false
onBeforeHide	() => boolean	trigger before hidden. return true will cancel hidden	-	false
onItemClick	(id: string) => void	trigger when click list item. id is the header element id	-	false

Module changed the header value struct in delta. If you have other custom values in header value, you need change class XXX extend Header with class XXX extend HeaderWithID and update formats function.

Other

Fixed Element On Page

If you have a fixed element in your page, you can use topOffset to return the height of the fixed element. Then the header-list-item scroll position will not cover by the fixed element.

new Quill('#editor', {
  theme: 'snow',
  modules: {
    'toolbar': [[{ header: [null, 1, 2, 3, 4, 5, 6] }, 'header-list'],],
    'header-list': {
      container: document.getElementById('directory'), // specify a element to receive the header list
      topOffset: () => {
        // get the height of the fixed element
        const navOffset = document.querySelector('.fixed')?.getBoundingClientRect().height || 0;
        return navOffset;
      },
      // or if you already know the height
      // topOffset: 36,
    },
  },
});

Custom Header Id attribute

import HeaderList, { HeaderWithID } from 'quill-header-list';
import 'quill-header-list/dist/index.css';

// set custom header id attribute to 'id' (default is 'data-block-id')
HeaderWithID.idKey = 'id';
Quill.register({ 'modules/header-list': HeaderList }, true);