{"id":16647498,"url":"https://github.com/cathood0/flutter_quill_delta_from_html","last_synced_at":"2026-01-11T13:33:20.681Z","repository":{"id":247007335,"uuid":"824808897","full_name":"CatHood0/flutter_quill_delta_from_html","owner":"CatHood0","description":"Convert easily HTML inputs content to Quill Delta format","archived":false,"fork":false,"pushed_at":"2025-04-08T10:00:04.000Z","size":102,"stargazers_count":7,"open_issues_count":4,"forks_count":21,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-09T16:21:03.790Z","etag":null,"topics":["delta","delta-from-html","flutter-quill","html","parser","quill"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/flutter_quill_delta_from_html","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CatHood0.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-06T02:31:11.000Z","updated_at":"2025-04-08T10:00:08.000Z","dependencies_parsed_at":"2024-08-17T01:58:23.865Z","dependency_job_id":"4d881d82-2292-4c5c-874f-ebe1de669e3a","html_url":"https://github.com/CatHood0/flutter_quill_delta_from_html","commit_stats":null,"previous_names":["cathood0/flutter_quill_delta_from_html","cathood0/quill_delta_from_html"],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CatHood0%2Fflutter_quill_delta_from_html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CatHood0%2Fflutter_quill_delta_from_html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CatHood0%2Fflutter_quill_delta_from_html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CatHood0%2Fflutter_quill_delta_from_html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CatHood0","download_url":"https://codeload.github.com/CatHood0/flutter_quill_delta_from_html/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248065287,"owners_count":21041872,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["delta","delta-from-html","flutter-quill","html","parser","quill"],"created_at":"2024-10-12T08:44:57.409Z","updated_at":"2026-01-11T13:33:20.668Z","avatar_url":"https://github.com/CatHood0.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flutter Quill Delta from HTML\n\nThis is a **Dart** package that converts **HTML** input into Quill **Delta** format, which is used in the [Quill Js](https://quilljs.com/) package.\n\n**This package** supports the conversion of a wide range of **HTML** tags and attributes into their corresponding **Delta** operations, ensuring that your **HTML** content is accurately represented in the **Quill editor**.\n\n## Supported tags\n\n```html\n    \u003c!--Text Formatting--\u003e\n        \u003cb\u003e, \u003cstrong\u003e: Bold text \n        \u003ci\u003e, \u003cem\u003e: Italic text\n        \u003cu\u003e, \u003cins\u003e: Underlined text\n        \u003cs\u003e, \u003cdel\u003e: Strikethrough text\n        \u003csup\u003e: Superscript text\n        \u003csub\u003e: Subscript text\n\n    \u003c!--Headings--\u003e\n        \u003ch1\u003e to \u003ch6\u003e: Headings of various levels\n\n    \u003c!--Lists and nested ones--\u003e\n        \u003cul\u003e: Unordered lists\n        \u003col\u003e: Ordered lists\n        \u003cli\u003e: List items\n        \u003cli data-checked=\"true\"\u003e: Check lists \n        \u003cinput type=\"checkbox\"\u003e: Another alternative to make a check lists\n\n    \u003c!--Links--\u003e\n        \u003ca\u003e: Hyperlinks with support for the href attribute\n\n    \u003c!--Images--\u003e\n        \u003cimg\u003e: Images with support for the src, align, and styles\n\n    \u003c!--div--\u003e\n        \u003cdiv\u003e: HTML tag containers\n        \n    \u003c!--Table--\u003e\n        \u003ctable\u003e: HTML tag for Tables (basic support) \n        \n    \u003c!--Videos --\u003e\n        \u003cvideo\u003e: Videos with support for the src\n\n    \u003c!--Blockquotes--\u003e\n        \u003cblockquote\u003e: Block quotations\n\n    \u003c!--Code Blocks--\u003e\n        \u003cpre\u003e, \u003ccode\u003e: Code blocks\n\n    \u003c!--Text Alignment, inline text align and direction--\u003e\n        \u003cp style=\"text-align:left|center|right|justify\"\u003e: Paragraph style alignment\n        \u003cp align=\"left|center|right|justify\"\u003e: Paragraph alignment\n        \u003cp dir=\"rtl\"\u003e: Paragraph direction \n\n    \u003c!--Text attributes--\u003e\n        \u003cp style=\"padding: 10px;line-height: 1.0px;font-size: 12px;font-family: Times New Roman;color:#ffffff\"\u003e: Inline attributes\n    \n    \u003c!--Custom Blocks--\u003e\n        \u003cpullquote data-author=\"john\"\u003e: Custom html\n```\n\n## Getting Started\n\nAdd the dependency to your pubspec.yaml:\n\n```yaml\ndependencies:\n  flutter_quill_delta_from_html: \u003clastest_version\u003e\n```\n\nThen, import the package and use it in your Flutter application:\n\n```dart\nimport 'package:flutter_quill_delta_from_html/flutter_quill_delta_from_html.dart';\n\nvoid main() {\n  String htmlContent = '\u003cp style=\"line-height: 2.0\"\u003eHello, \u003cb\u003eworld\u003c/b\u003e!\u003c/p\u003e';\n  var delta = HtmlToDelta().convert(htmlContent, transformTableAsEmbed: false);\n/*\n   { \"insert\": \"hello, \" },\n   { \"insert\": \"world\", \"attributes\": {\"bold\": true} },\n   { \"insert\": \"!\" },\n   { \"insert\": \"\\n\", { 'line-height': 2.0 } }\n*/\n}\n```\n\n## Creating your own `CustomHtmlPart` (alternative to create `CustomBlockEmbeds` from custom html)\n\nFirst you need to define your own `CustomHtmlPart`\n\n```dart\nimport 'package:flutter_quill_delta_from_html/flutter_quill_delta_from_html.dart';\nimport 'package:html/dom.dart' as dom;\n\n/// Custom block handler for \u003cpullquote\u003e elements.\nclass PullquoteBlock extends CustomHtmlPart {\n  @override\n  bool matches(dom.Element element) {\n    //you can put here the validation that you want\n    //\n    // To detect a \u003cp\u003e, you just need to do something like: \n    // element.localName == 'p'\n    return element.localName == 'pullquote';\n  }\n\n  @override\n  List\u003cOperation\u003e convert(dom.Element element, {Map\u003cString, dynamic\u003e? currentAttributes}) {\n    final Delta delta = Delta();\n    final Map\u003cString, dynamic\u003e attributes = currentAttributes != null ? Map.from(currentAttributes) : {};\n\n    // Extract custom attributes from the \u003cpullquote\u003e element\n    // The attributes represents the data into a html tag\n    // at this point, \u003cpullquote\u003e should have these attributes\n    //\n    // \u003cpullquote data-author=\"John Doe\" data-style=\"italic\"\u003e\n    // These attributes can be optional, so do you need to ensure to not use \"!\" \n    // to avoid any null conflict\n    final author = element.attributes['data-author'];\n    final style = element.attributes['data-style'];\n\n    // Apply custom attributes to the Delta operations\n    if (author != null) {\n      delta.insert('Pullquote: \"${element.text}\" by $author', attributes);\n    } else {\n      delta.insert('Pullquote: \"${element.text}\"', attributes);\n    }\n\n    if (style != null \u0026\u0026 style.toLowerCase() == 'italic') {\n      attributes['italic'] = true;\n    }\n\n    delta.insert('\\n', attributes);\n\n    return delta.toList();\n  }\n}\n```\n\nAfter, put your `PullquoteBlock` to `HtmlToDelta` using the param `customBlocks`\n\n```dart\nimport 'package:flutter_quill_delta_from_html/flutter_quill_delta_from_html.dart';\n\nvoid main() {\n  // Example HTML snippet\n  final htmlText = '''\n    \u003chtml\u003e\n      \u003cbody\u003e\n        \u003cp\u003eRegular paragraph before the custom block\u003c/p\u003e\n        \u003cpullquote data-author=\"John Doe\" data-style=\"italic\"\u003eThis is a custom pullquote\u003c/pullquote\u003e\n        \u003cp\u003eRegular paragraph after the custom block\u003c/p\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  ''';\n\n  // Registering the custom block\n  final customBlocks = [PullquoteBlock()];\n\n  // Initialize HtmlToDelta with the HTML text and custom blocks\n  final converter = HtmlToDelta(customBlocks: customBlocks);\n\n  // Convert HTML to Delta operations\n  final delta = converter.convert(htmlText);\n/*\nThis should be resulting delta\n  {\"insert\": \"Regular paragraph before the custom block\"},\n  {\"insert\": \"Pullquote: \\\"This is a custom pullquote\\\" by John Doe\", \"attributes\": {\"italic\": true}},\n  {\"insert\": \"\\n\"},\n  {\"insert\": \"Regular paragraph after the custom block\\n\"}\n*/\n}\n```\n\n## HtmlOperations\n\nThe `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.\n\nTo 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`.\n\n```dart\nabstract class HtmlOperations {\n  /// custom blocks are passed internally by HtmlToDelta\n  List\u003cCustomHtmlPart\u003e? customBlocks;\n\n  // You don't need to override this method \n  // since it just call the other methods \n  // when detect the type of HTML tag\n  List\u003cOperation\u003e resolveCurrentElement(dom.Element element, [int indentLevel = 0]);\n\n  List\u003cOperation\u003e brToOp(dom.Element element);\n  List\u003cOperation\u003e headerToOp(dom.Element element);\n  List\u003cOperation\u003e listToOp(dom.Element element, [int indentLevel = 0]);\n  List\u003cOperation\u003e paragraphToOp(dom.Element element);\n  List\u003cOperation\u003e linkToOp(dom.Element element);\n  List\u003cOperation\u003e spanToOp(dom.Element element);\n  List\u003cOperation\u003e imgToOp(dom.Element element);\n  List\u003cOperation\u003e videoToOp(dom.Element element);\n  List\u003cOperation\u003e codeblockToOp(dom.Element element);\n  List\u003cOperation\u003e blockquoteToOp(dom.Element element);\n}\n```\n\n## Contributions\n\nIf 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).\n\nThis 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcathood0%2Fflutter_quill_delta_from_html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcathood0%2Fflutter_quill_delta_from_html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcathood0%2Fflutter_quill_delta_from_html/lists"}