Ask Your Question
2

What is the method to obtain Delta from a row HTML string in flutter_quill, or how can HTML be converted into Delta?

asked 2022-01-19 11:00:00 +0000

huitzilopochtli gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
1

answered 2022-07-26 22:00:00 +0000

lalupa gravatar image

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.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2022-01-19 11:00:00 +0000

Seen: 9 times

Last updated: Jul 26 '22