: Custom html
`

Quick Example

`typescript
import { HtmlToDelta } from 'quill-delta-from-html';

const htmlContent: string = '

Hello, world!

/*
{ "insert": "hello, " },
{ "insert": "world", "attributes": {"bold": true} },
{ "insert": "!\n" }
*/
`

Creating your own CustomHtmlPart

#### What is a CustomHtmlPart?

CustomHtmlPartis a special class that let us convert custom HTML elements in Operation to Quill Delta.

First you need to define your own CustomHtmlPart

`typescript
import { CustomHtmlPart } from 'quill-delta-from-html';
import { HTMLElement } from 'node-html-parser';
import Delta, { AttributeMap, Op } from 'quill-delta';

/// Custom block handler for elements.
class PullquoteBlock extends CustomHtmlPart {
matches(element: HTMLElement): boolean {
// you can put here the validation that you want
// To detect a

, you just need to do something like:
// element.rawTagName === 'p'
return element.rawTagName === 'pullquote';
}

convert(element: HTMLElement, currentAttributes: AttributeMap): Op[] {
const delta: Delta = new Delta();
const attributes = { ...currentAttributes };

// Extract custom attributes from the element
// The attributes represent the data into a html tag
// at this point, should have these attributes
//
//
// These attributes can be optional, so ensure not to use "!" to avoid any null conflict
const author = element.attribs['data-author'];
const style = element.attribs['data-style'];

// Apply custom attributes to the Delta operations
if (author) {
delta.insert(
Pullquote: "${element.children[0].data}" by ${author},
attributes,
);
} else {
delta.insert(Pullquote: "${element.children[0].data}", attributes);
}

if (style && style.toLowerCase() === 'italic') {
attributes['italic'] = true;
}
return delta;
}
}
`

After, put your PullquoteBlock to HtmlToDelta using the param customBlocks

`typescript
import { HtmlToDelta } from 'quill-delta-from-html';

const htmlText: string =

Regular paragraph before the custom block

Regular paragraph after the custom block

/*
This should be resulting delta
{"insert": "Regular paragraph before the custom block"},
{"insert": "Pullquote: \"This is a custom pullquote\" by John Doe", "attributes": {"italic": true}},
{"insert": "\n"},
{"insert": "Regular paragraph after the custom block\n"}
*/
`

HtmlOperations

The HtmlOperations class is designed to streamline the conversion process from HTML to Delta operations, accommodating a wide range of HTML structures and attributes commonly used in web content.

To utilize HtmlOperations, extend this class and implement the methods necessary to handle specific HTML elements. Each method corresponds to a different HTML tag or element type and converts it into Delta operations suitable for use with Quill JS.

`typescript
abstract class HtmlOperations {
// customBlocks are passed internally by HtmlToDelta
protected customBlocks?: CustomHtmlPart[];

// You don't need to override this method
// as it simply calls the other methods
// to detect the type of HTML tag
resolveCurrentElement(
element: dom.Element,
indentLevel?: number,
): Operation[];

abstract brToOp(element: dom.Element): Operation[];
abstract headerToOp(element: dom.Element): Operation[];
abstract listToOp(element: dom.Element, indentLevel?: number): Operation[];
abstract paragraphToOp(element: dom.Element): Operation[];
abstract linkToOp(element: dom.Element): Operation[];
abstract spanToOp(element: dom.Element): Operation[];
abstract imgToOp(element: dom.Element): Operation[];
abstract videoToOp(element: dom.Element): Operation[];
abstract codeblockToOp(element: dom.Element): Operation[];
abstract blockquoteToOp(element: dom.Element): Operation[];
}
`

$3

`typescript
import { HtmlToDelta } from 'quill-delta-from-html';

const converter = new HtmlToDelta(...your_custom_blocks, );
``

Contributions