: HTML tag containers


: Videos with support for the src

: Block quotations

, : Code blocks


    

        
: Paragraph style alignment

        

: Paragraph alignment

        

: Paragraph direction 

    

        

: Inline attributes

    

    

        : Custom html

```

## Getting Started

Add the dependency to your pubspec.yaml:

```yaml

dependencies:

  flutter_quill_delta_from_html: ^1.4.1

```

Then, import the package and use it in your Flutter application:

```dart

import 'package:flutter_quill_delta_from_html/flutter_quill_delta_from_html.dart';

void main() {

  String htmlContent = "
Hello, world!
";

  var delta = HtmlToDelta().convert(htmlContent);

/*

   { "insert": "hello, " },

   { "insert": "world", "attributes": {"bold": true} },

   { "insert": "!" },

   { "insert": "\n" }

*/

}

```


## Creating your own `CustomHtmlPart` (alternative to create `CustomBlockEmbeds` from custom html)

First you need to define your own `CustomHtmlPart`

```dart

import 'package:flutter_quill_delta_from_html/flutter_quill_delta_from_html.dart';

import 'package:html/dom.dart' as dom;

/// Custom block handler for  elements.

class PullquoteBlock extends CustomHtmlPart {

  @override

  bool matches(dom.Element element) {

    //you can put here the validation that you want

    //

    // To detect a 
, you just need to do something like: 

    // element.localName == 'p'

    return element.localName == 'pullquote';

  }

  @override

  List convert(dom.Element element, {Map? currentAttributes}) {

    final Delta delta = Delta();

    final Map attributes = currentAttributes != null ? Map.from(currentAttributes) : {};

    // Extract custom attributes from the  element

    // The attributes represents the data into a html tag

    // at this point,  should have these attributes

    //

    // 

    // These attributes can be optional, so do you need to ensure to not use "!" 

    // to avoid any null conflict

    final author = element.attributes['data-author'];

    final style = element.attributes['data-style'];

    // Apply custom attributes to the Delta operations

    if (author != null) {

      delta.insert('Pullquote: "${element.text}" by $author', attributes);

    } else {

      delta.insert('Pullquote: "${element.text}"', attributes);

    }

    if (style != null && style.toLowerCase() == 'italic') {

      attributes['italic'] = true;

    }

    delta.insert('\n', attributes);

    return delta.toList();

  }

}

```

After, put your `PullquoteBlock` to `HtmlToDelta` using the param `customBlocks`

```dart

import 'package:flutter_quill_delta_from_html/flutter_quill_delta_from_html.dart';

void main() {

  // Example HTML snippet

  final htmlText = '''

    

      

        
Regular paragraph before the custom block

        This is a custom pullquote

        
Regular paragraph after the custom block

      

    

  ''';


  // Registering the custom block

  final customBlocks = [PullquoteBlock()];

  // Initialize HtmlToDelta with the HTML text and custom blocks

  final converter = HtmlToDelta(customBlocks: customBlocks);

  // Convert HTML to Delta operations

  final delta = converter.convert(htmlText);

/*

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 `QuillJS`.

```dart

abstract class HtmlOperations {

  /// custom blocks are passed internally by HtmlToDelta

  List? customBlocks;

  // You don't need to override this method 

  // since it just call the other methods 

  // when detect the type of HTML tag

  List resolveCurrentElement(dom.Element element, [int indentLevel = 0]);

  List brToOp(dom.Element element);

  List headerToOp(dom.Element element);

  List listToOp(dom.Element element, [int indentLevel = 0]);

  List paragraphToOp(dom.Element element);

  List linkToOp(dom.Element element);

  List spanToOp(dom.Element element);

  List imgToOp(dom.Element element);

  List videoToOp(dom.Element element);

  List codeblockToOp(dom.Element element);

  List blockquoteToOp(dom.Element element);

}

```

## Contributions

If you find a bug or want to add a new feature, please open an issue or submit a pull request on the [GitHub repository](https://github.com/CatHood0/flutter_quill_delta_from_html).

This project is licensed under the MIT License - see the [LICENSE](https://github.com/CatHood0/flutter_quill_delta_from_html/blob/Main/LICENSE) file for details.