Revision history [back]

There are different ways to convert HTML into Delta in Flutter Quill. Here are two options:

Option 1: Use flutterhtml package The flutterhtml package can be used to parse HTML code into a widget tree. Once the HTML is parsed into widgets, the widget tree can be converted into Delta by iterating through the widgets and extracting the text and formatting information. Here is an example code snippet:

import 'dart:convert';
import 'package:flutter_quill/models/quill_delta.dart';
import 'package:flutter_html/flutter_html.dart';

// HTML string
final html = '<p>Hello <b>world</b>!</p>';

// Parse HTML to widget tree and extract Delta
final widget = Html(data: html);
final delta = widgetToDelta(widget);

QuillDelta widgetToDelta(Widget widget) {
  final delta = QuillDelta();
  _parseWidget(widget, delta);
  return delta;
}

void _parseWidget(Widget widget, QuillDelta delta) {
  if (widget is Text) {
    final text = widget.data;
    if (text.isNotEmpty) {
      final attrs = Map<String, dynamic>(); // add formatting attributes here
      delta.insert(text, attrs);
    }
  } else if (widget is RichText) {
    final text = widget.text.data;
    if (text.isNotEmpty) {
      final attrs = Map<String, dynamic>(); // add formatting attributes here
      delta.insert(text, attrs);
    }
  } else if (widget is Container) {
    widget.child?.accept(_ParseWidgetVisitor(delta));
  } else {
    for (final child in (widget as MultiChildRenderObjectWidget).children) {
      _parseWidget(child, delta);
    }
  }
}

class _ParseWidgetVisitor extends ChildVisitor {
  final QuillDelta delta;

  _ParseWidgetVisitor(this.delta);

  @override
  void visit(Widget widget) {
    _parseWidget(widget, delta);
  }
}

Option 2: Use html/parser package The html/parser package can be used to parse HTML code into a DOM tree. Once the HTML is parsed into the DOM tree, the tree can be traversed to extract the text and formatting information, and convert it into Delta. Here is an example code snippet:

import 'dart:convert';
import 'package:flutter_quill/models/quill_delta.dart';
import 'package:html/parser.dart' as html;

// HTML string
final htmlString = '<p>Hello <b>world</b>!</p>';

// Parse HTML to DOM tree and extract Delta
final document = html.parse(htmlString);
final delta = domToDelta(document);

QuillDelta domToDelta(html.Document document) {
  final delta = QuillDelta();
  _parseElement(document.body, delta);
  return delta;
}

void _parseElement(html.Element element, QuillDelta delta) {
  for (final node in element.nodes) {
    if (node.nodeType == html.Node.ELEMENT_NODE) {
      final childElement = node as html.Element;
      final attrs = Map<String, dynamic>(); // add formatting attributes here
      if (childElement.localName == 'b') {
        attrs['bold'] = true;
      } else if (childElement.localName == 'i') {
        attrs['italic'] = true;
      }
      _parseElement(childElement, delta);
      attrs.forEach((key, value) => delta.format(key, value));
    } else if (node.nodeType == html.Node.TEXT_NODE) {
      final text = node.text.trim();
      if (text.isNotEmpty) {
        delta.insert(text);
      }
    }
  }
}

Either option can be used to convert HTML into Delta in Flutter Quill.