Quill Delta to HTML Converter

Converts Quill's Delta format to HTML (insert ops only) with properly nested lists.

You can try a live demo of the conversion by opening the demo-browser.html file after cloning the repo.

Breaking change: import/require has changed as of v0.10.0. See Usage below

Quickstart

Installation

npm install quill-delta-to-html

Usage

1var QuillDeltaToHtmlConverter = require('quill-delta-to-html').QuillDeltaToHtmlConverter;
2
3// TypeScript / ES6:
4// import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html'; 
5
6var deltaOps =  [
7    {insert: "Hello\n"},
8    {insert: "This is colorful", attributes: {color: '#f00'}}
9];
10
11var cfg = {};
12
13var converter = new QuillDeltaToHtmlConverter(deltaOps, cfg);
14
15var html = converter.convert(); 

Configuration

QuillDeltaToHtmlConverter accepts a few configuration options as shown below:

Option	Type	Default	Description
paragraphTag	string	'p'	Custom tag to wrap inline html elements
encodeHtml	boolean	true	If true, <, >, /, ', ", & characters in content will be encoded.
classPrefix	string	'ql'	A css class name to prefix class generating styles such as size, font, etc.
inlineStyles	boolean or object	false	If true or an object, use inline styles instead of classes. See Rendering Inline Styles section below for using an object
multiLineBlockquote	boolean	true	Instead of rendering multiple blockquote elements for quotes that are consecutive and have same styles(align, indent, and direction), it renders them into only one
multiLineHeader	boolean	true	Same deal as multiLineBlockquote for headers
multiLineCodeblock	boolean	true	Same deal as multiLineBlockquote for code-blocks
multiLineParagraph	boolean	true	Set to false to generate a new paragraph tag after each enter press (new line)
linkRel	string	none generated	Specifies a value to put on the rel attr on all links. This can be overridden by an individual link op by specifying the rel attribute in the respective op's attributes
linkTarget	string | ((url)=>string|undefined)	'_blank'	Specifies target for all links; use '' (empty string) to not generate target attribute. This can be overridden by an individual link op by specifiying the target with a value in the respective op's attributes. If a function is provided, then it is called on each URL.
allowBackgroundClasses	boolean	false	If true, css classes will be added for background attr
urlSanitizer	function (url: string): string | undefined	undefined	A function that is called once per url in the ops (image, video, link) for you to do custom sanitization. If your function returns a string, it is assumed that you sanitized the url and no further sanitization will be done by the library; when anything other than a string is returned (e.g. undefined), it is assumed that no sanitization has been done and the library's own function will be used to clean up the url
customTag	function (format: string, op: DeltaInsertOp): string | undefined	undefined	Callback allows to provide custom html tag for some format
customTagAttributes	function (op: DeltaInsertOp): { [key: string]: string } | undefined	undefined	Allows to provide custom html tag attributes
customCssClasses	function (op: DeltaInsertOp): string | string[] | undefined	undefined	Allows to provide custom css classes
customCssStyles	function (op: DeltaInsertOp): string | string[] | undefined	undefined	Allows to provide custom css styles

Rendering Quill Formats

You can customize the rendering of Quill formats by registering to the render events before calling the convert() method.

There are beforeRender and afterRender events and they are called multiple times before and after rendering each group. A group is one of:

• continuous sets of inline elements
• a video element
• list elements
• block elements (header, code-block, blockquote, align, indent, and direction)

beforeRender event is called with raw operation objects for you to generate and return your own html. If you return a falsy value, system will return its own generated html.

afterRender event is called with generated html for you to inspect, maybe make some changes and return your modified or original html.

1
2converter.beforeRender(function(groupType, data){
3    // ... generate your own html 
4    // return your html
5});
6converter.afterRender(function(groupType, htmlString){
7    // modify if you wish
8    // return the html
9});
10
11html = converter.convert();
12

Following shows the parameter formats for beforeRender event:

groupType	data
video	{op: op object}
block	{op: op object: ops: Array<op object>}
list	{items: Array<{item: block, innerList: list or null }> }
inline-group	{ops: Array<op object>}

op object will have the following format:

1{
2    insert: {
3        type: '' // one of 'text' | 'image' | 'video' | 'formula',
4        value: '' // some string value  
5    }, 
6    attributes: {
7        // ... quill delta attributes 
8    }
9}

Rendering Inline Styles

If you are rendering to HTML that you intend to include in an email, using classes and a style sheet are not recommended, as not all browsers support style sheets. quill-delta-to-html supports rendering inline styles instead. The easiest way to enable this is to pass the option inlineStyles: true.

You can customize styles by passing an object to inlineStyles instead:

1inlineStyles: {
2   font: {
3      'serif': 'font-family: Georgia, Times New Roman, serif',
4      'monospace': 'font-family: Monaco, Courier New, monospace'
5   },
6   size: {
7      'small': 'font-size: 0.75em',
8      'large': 'font-size: 1.5em',
9      'huge': 'font-size: 2.5em'
10   },
11   indent: (value, op) => {
12      var indentSize = parseInt(value, 10) * 3;
13      var side = op.attributes['direction'] === 'rtl' ? 'right' : 'left';
14      return 'padding-' + side + ':' + indentSize + 'em';
15   },
16   direction: (value, op) => {
17      if (value === 'rtl') {
18         return 'direction:rtl' + ( op.attributes['align'] ? '' : '; text-align: inherit' );
19      } else {
20         return '';
21      }
22   }
23};

Keys to this object are the names of attributes from Quill. The values are either a simple lookup table (like in the 'font' example above) used to map values to styles, or a fn(value, op) which returns a style string.

Rendering Custom Blot Formats

You need to tell system how to render your custom blot by registering a renderer callback function to renderCustomWith method before calling the convert() method.

If you would like your custom blot to be rendered as a block (not inside another block or grouped as part of inlines), then add renderAsBlock: true to its attributes.

Example:

1let ops = [
2    {insert: {'my-blot': {id: 2, text: 'xyz'}}, attributes: {renderAsBlock: true|false}}
3];
4
5let converter = new QuillDeltaToHtmlConverter(ops);
6
7// customOp is your custom blot op
8// contextOp is the block op that wraps this op, if any. 
9// If, for example, your custom blot is located inside a list item,
10// then contextOp would provide that op. 
11converter.renderCustomWith(function(customOp, contextOp){
12    if (customOp.insert.type === 'my-blot') {
13        let val = customOp.insert.value;
14        return `<span id="${val.id}">${val.text}</span>`;
15    } else {
16        return 'Unmanaged custom blot!';
17    }
18});
19
20html = converter.convert();

customOp object will have the following format:

1{
2    insert: {
3        type: string //whatever you specified as key for insert, in above example: 'my-blot'
4        value: any // value for the custom blot  
5    }, 
6    attributes: {
7        // ... any attributes custom blot may have
8    }
9}

Rendering Custom Blot Formats: Async version

1import { QuillDeltaToHtmlAsyncConverter } from 'quill-delta-to-html'; 
2
3const converter = new QuillDeltaToHtmlAsyncConverter(ops);
4
5converter.renderCustomWith(async function(customOp, contextOp){
6    await // …
7    return `<span id="${val.id}">${val.text}</span>`;
8});
9
10var html = await converter.convert();

Advanced Custom Rendering Using Grouped Ops

If you want to do the full rendering yourself, you can do so by getting the processed & grouped ops.

1let groupedOps = converter.getGroupedOps();

Each element in groupedOps array will be an instance of the following types:

type	properties
InlineGroup	ops: Array<op object>
VideoItem	op: op object
BlockGroup	op: op object, ops: Array<op object>
ListGroup	items: Array<ListItem>
	ListItem: {item:BlockGroup, innerList:ListGroup}
BlotBlock	op: op object

BlotBlock represents custom blots with renderAsBlock:true property pair in its attributes

See above for op object format.