CatHood0 / flutter_quill_delta_from_html

Convert easily HTML inputs content to Quill Delta format
https://pub.dev/packages/flutter_quill_delta_from_html
MIT License
3 stars 18 forks source link

Add <div> to list of nodes #2

Closed Nightbl927 closed 4 months ago

Nightbl927 commented 4 months ago

Add the

tag to list of possible nodes

CatHood0 commented 4 months ago

Could you give me a clearer example of what you need?

However, it is not yet planned to create an implementation that adds the <div> to be part of the package since they could contain anything. If you have any suggestions or explanations as to why it would be beneficial to implement this in the package, you are more than welcome to say so.

If you need to detect a div, you could use CustomHtmlParts, which are used in a similar way to detect any HTML (if the validation matches) and convert it to an operation. Here is the example found in the README:

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

//First you need to define your own CustomHtmlPart

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

/// Custom block handler for <pullquote> elements.
class PullquoteBlock extends CustomHtmlPart {
  @override
  bool matches(dom.Element element) {
    return element.localName == 'pullquote';
  }

  @override
  List<Operation> convert(dom.Element element, {Map<String, dynamic>? currentAttributes}) {
    final Delta delta = Delta();
    final Map<String, dynamic> attributes = currentAttributes != null ? Map.from(currentAttributes) : {};

    // Extract custom attributes from the <pullquote> element
    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

void main() {
  // Example HTML snippet
  final htmlText = '''
    <html>
      <body>
        <p>Regular paragraph before the custom block</p>
        <pullquote data-author="John Doe" data-style="italic">This is a custom pullquote</pullquote>
        <p>Regular paragraph after the custom block</p>
      </body>
    </html>
  ''';

  // 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"}
*/
}