Retain the attributes when converting delta to/from html (#1609)

* Amend delta_to_markdown

* Amend quill_html_converter to retain style attributes

* DeltaX.fromHtml

* Amend DeltaX.fromHtml to retain the attributes

example/lib/presentation/quill/quill_screen.dart

@@ -76,7 +76,7 @@ class _QuillScreenState extends State<QuillScreen> {
             onPressed: () {
               final html = _controller.document.toDelta().toHtml();
               _controller.document =
-                  Document.fromDelta(Document.fromHtml(html));
+                  Document.fromDelta(DeltaX.fromHtml(html));
             },
             icon: const Icon(Icons.html),
           ),

lib/src/models/documents/document.dart

@@ -4,7 +4,6 @@ import 'package:html2md/html2md.dart' as html2md;
 import 'package:markdown/markdown.dart' as md;
 
 import '../../../markdown_quill.dart';
-
 import '../../../quill_delta.dart';
 import '../../widgets/quill/embeds.dart';
 import '../rules/rule.dart';
@@ -58,8 +57,7 @@ class Document {
     _rules.setCustomRules(customRules);
   }
 
-  final StreamController<DocChange> documentChangeObserver =
+  final StreamController<DocChange> documentChangeObserver = StreamController.broadcast();
-      StreamController.broadcast();
 
   final History history = History();
 
@@ -84,8 +82,7 @@ class Document {
       return Delta();
     }
 
-    final delta = _rules.apply(RuleType.insert, this, index,
+    final delta = _rules.apply(RuleType.insert, this, index, data: data, len: replaceLength);
-        data: data, len: replaceLength);
     compose(delta, ChangeSource.local);
     return delta;
   }
@@ -148,8 +145,7 @@ class Document {
 
     var delta = Delta();
 
-    final formatDelta = _rules.apply(RuleType.format, this, index,
+    final formatDelta = _rules.apply(RuleType.format, this, index, len: len, attribute: attribute);
-        len: len, attribute: attribute);
     if (formatDelta.isNotEmpty) {
       compose(formatDelta, ChangeSource.local);
       delta = delta.compose(formatDelta);
@@ -189,8 +185,7 @@ class Document {
   /// Returns all styles and Embed for each node within selection
   List<OffsetValue> collectAllIndividualStyleAndEmbed(int index, int len) {
     final res = queryChild(index);
-    return (res.node as Line)
+    return (res.node as Line).collectAllIndividualStylesAndEmbed(res.offset, len);
-        .collectAllIndividualStylesAndEmbed(res.offset, len);
   }
 
   /// Returns all styles for any character within the specified text range.
@@ -299,8 +294,7 @@ class Document {
     delta = _transform(delta);
     final originalDelta = toDelta();
     for (final op in delta.toList()) {
-      final style =
+      final style = op.attributes != null ? Style.fromJson(op.attributes) : null;
-          op.attributes != null ? Style.fromJson(op.attributes) : null;
 
       if (op.isInsert) {
         // Must normalize data before inserting into the document, makes sure
@@ -366,8 +360,7 @@ class Document {
       res.push(Operation.insert('\n'));
     }
     // embed could be image or video
-    final opInsertEmbed =
+    final opInsertEmbed = op.isInsert && op.data is Map && (op.data as Map).containsKey(type);
-        op.isInsert && op.data is Map && (op.data as Map).containsKey(type);
     final nextOpIsLineBreak = i + 1 < ops.length &&
         ops[i + 1].isInsert &&
         ops[i + 1].data is String &&
@@ -399,9 +392,7 @@ class Document {
     Iterable<EmbedBuilder>? embedBuilders,
     EmbedBuilder? unknownEmbedBuilder,
   ]) =>
-      _root.children
+      _root.children.map((e) => e.toPlainText(embedBuilders, unknownEmbedBuilder)).join();
-          .map((e) => e.toPlainText(embedBuilders, unknownEmbedBuilder))
-          .join();
 
   void _loadDocument(Delta doc) {
     if (doc.isEmpty) {
@@ -414,20 +405,16 @@ class Document {
     var offset = 0;
     for (final op in doc.toList()) {
       if (!op.isInsert) {
-        throw ArgumentError.value(doc,
+        throw ArgumentError.value(
-            'Document can only contain insert operations but ${op.key} found.');
+            doc, 'Document can only contain insert operations but ${op.key} found.');
       }
-      final style =
+      final style = op.attributes != null ? Style.fromJson(op.attributes) : null;
-          op.attributes != null ? Style.fromJson(op.attributes) : null;
       final data = _normalize(op.data);
       _root.insert(offset, data, style);
       offset += op.length!;
     }
     final node = _root.last;
-    if (node is Line &&
+    if (node is Line && node.parent is! Block && node.style.isEmpty && _root.childCount > 1) {
-        node.parent is! Block &&
-        node.style.isEmpty &&
-        _root.childCount > 1) {
       _root.remove(node);
     }
   }
@@ -443,11 +430,11 @@ class Document {
     }
 
     final delta = node.toDelta();
-    return delta.length == 1 &&
+    return delta.length == 1 && delta.first.data == '\n' && delta.first.key == 'insert';
-        delta.first.data == '\n' &&
-        delta.first.key == 'insert';
   }
+}
 
+class DeltaX {
   /// Convert the HTML Raw string to [Delta]
   ///
   /// It will run using the following steps:
@@ -458,28 +445,26 @@ class Document {
   ///
   /// for more [info](https://github.com/singerdmx/flutter-quill/issues/1100)
   static Delta fromHtml(String html) {
-    final markdown = html2md
+    var rules = [
-        .convert(
+      html2md.Rule('image', filters: ['img'], replacement: (content, node) {
-          html,
+        node.asElement()?.attributes.remove('class');
-        )
+        //Later we can convert this to delta along with the attributes by GoodInlineHtmlSyntax
-        .replaceAll('unsafe:', '');
+        return node.outerHTML;
-
+      }),
-    final mdDocument = md.Document(encodeHtml: false);
+    ];
+
+    final markdown = html2md.convert(html, rules: rules).replaceAll('unsafe:', '');
+
+    final mdDocument = md.Document(
+      encodeHtml: false,
+      inlineSyntaxes: [
+        GoodInlineHtmlSyntax(),
+      ],
+    );
 
     final mdToDelta = MarkdownToDelta(markdownDocument: mdDocument);
 
     return mdToDelta.convert(markdown);
-
-    // final deltaJsonString = markdownToDelta(markdown);
-    // final deltaJson = jsonDecode(deltaJsonString);
-    // if (deltaJson is! List) {
-    //   throw ArgumentError(
-    //     'The delta json string should be of type list when jsonDecode() it',
-    //   );
-    // }
-    // return Delta.fromJson(
-    //   deltaJson,
-    // );
   }
 }
 
@@ -494,3 +479,24 @@ enum ChangeSource {
   /// Silent change.
   silent;
 }
+
+/// Convert the html to Element, not Text
+class GoodInlineHtmlSyntax extends md.InlineHtmlSyntax {
+  @override
+  onMatch(parser, match) {
+    if (super.onMatch(parser, match)) {
+      return true;
+    }
+
+    var root = html2md.Node.root(match.group(0)!);
+    root = root.childNodes().last.firstChild!;
+
+    var node = md.Element.empty(root.nodeName);
+    var attrs = root.asElement()?.attributes.map((key, value) => MapEntry(key.toString(), value));
+    if (attrs != null) node.attributes.addAll(attrs);
+
+    parser.addNode(node);
+    parser.start = parser.pos;
+    return false;
+  }
+}

lib/src/packages/quill_markdown/delta_to_markdown.dart

@@ -2,6 +2,7 @@ import 'dart:convert';
 import 'dart:ui';
 
 import 'package:collection/collection.dart';
+
 import '../../../flutter_quill.dart';
 import '../../../quill_delta.dart';
 import './custom_quill_attributes.dart';
@@ -37,8 +38,7 @@ extension on Object? {
 }
 
 /// Convertor from [Delta] to quill Markdown string.
-class DeltaToMarkdown extends Converter<Delta, String>
+class DeltaToMarkdown extends Converter<Delta, String> implements _NodeVisitor<StringSink> {
-    implements _NodeVisitor<StringSink> {
   ///
   DeltaToMarkdown({
     Map<String, EmbedToMarkdown>? customEmbedHandlers,
@@ -70,8 +70,9 @@ class DeltaToMarkdown extends Converter<Delta, String>
           );
         }
         if (infoString.isEmpty) {
-          final linesWithLang = (node as Block).children.where((child) =>
+          final linesWithLang = (node as Block)
-              child.containsAttr(CodeBlockLanguageAttribute.attrKey));
+              .children
+              .where((child) => child.containsAttr(CodeBlockLanguageAttribute.attrKey));
           if (linesWithLang.isNotEmpty) {
             infoString = linesWithLang.first.getAttrValueOr(
               CodeBlockLanguageAttribute.attrKey,
@@ -159,8 +160,7 @@ class DeltaToMarkdown extends Converter<Delta, String>
     ),
     Attribute.link.key: _AttributeHandler(
       beforeContent: (attribute, node, output) {
-        if (node.previous?.containsAttr(attribute.key, attribute.value) !=
+        if (node.previous?.containsAttr(attribute.key, attribute.value) != true) {
-            true) {
           output.write('[');
         }
       },
@@ -210,8 +210,7 @@ class DeltaToMarkdown extends Converter<Delta, String>
         leaf.accept(this, out);
       }
     });
-    if (style.isEmpty ||
+    if (style.isEmpty || style.values.every((item) => item.scope != AttributeScope.block)) {
-        style.values.every((item) => item.scope != AttributeScope.block)) {
       out.writeln();
     }
     if (style.containsKey(Attribute.list.key) &&
@@ -234,10 +233,9 @@ class DeltaToMarkdown extends Converter<Delta, String>
         var content = text.value;
         if (!(style.containsKey(Attribute.codeBlock.key) ||
             style.containsKey(Attribute.inlineCode.key) ||
-            (text.parent?.style.containsKey(Attribute.codeBlock.key) ??
+            (text.parent?.style.containsKey(Attribute.codeBlock.key) ?? false))) {
-                false))) {
+          content =
-          content = content.replaceAllMapped(
+              content.replaceAllMapped(RegExp(r'[\\\`\*\_\{\}\[\]\(\)\#\+\-\.\!\>\<]'), (match) {
-              RegExp(r'[\\\`\*\_\{\}\[\]\(\)\#\+\-\.\!\>\<]'), (match) {
             return '\\${match[0]}';
           });
         }
@@ -266,9 +264,8 @@ class DeltaToMarkdown extends Converter<Delta, String>
     VoidCallback contentHandler, {
     bool sortedAttrsBySpan = false,
   }) {
-    final attrs = sortedAttrsBySpan
+    final attrs =
-        ? node.attrsSortedByLongestSpan()
+        sortedAttrsBySpan ? node.attrsSortedByLongestSpan() : node.style.attributes.values.toList();
-        : node.style.attributes.values.toList();
     final handlersToUse = attrs
         .where((attr) => handlers.containsKey(attr.key))
         .map((attr) => MapEntry(attr.key, handlers[attr.key]!))
@@ -309,17 +306,21 @@ abstract class _NodeVisitor<T> {
 
 extension _NodeX on Node {
   T accept<T>(_NodeVisitor<T> visitor, [T? context]) {
-    switch (runtimeType) {
+    final node = this;
-      case const (Root):
+    if (node is Root) {
-        return visitor.visitRoot(this as Root, context);
+      return visitor.visitRoot(node, context);
-      case const (Block):
+    }
-        return visitor.visitBlock(this as Block, context);
+    if (node is Block) {
-      case const (Line):
+      return visitor.visitBlock(node, context);
-        return visitor.visitLine(this as Line, context);
+    }
-      case const (QuillText):
+    if (node is Line) {
-        return visitor.visitText(this as QuillText, context);
+      return visitor.visitLine(node, context);
-      case const (Embed):
+    }
-        return visitor.visitEmbed(this as Embed, context);
+    if (node is QuillText) {
+      return visitor.visitText(node, context);
+    }
+    if (node is Embed) {
+      return visitor.visitEmbed(node, context);
     }
     throw Exception('Container of type $runtimeType cannot be visited');
   }
@@ -352,8 +353,8 @@ extension _NodeX on Node {
       node = node.next!;
     }
 
-    final attrs = style.attributes.values.sorted(
+    final attrs = style.attributes.values
-        (attr1, attr2) => attrCount[attr2]!.compareTo(attrCount[attr1]!));
+        .sorted((attr1, attr2) => attrCount[attr2]!.compareTo(attrCount[attr1]!));
 
     return attrs;
   }

lib/src/packages/quill_markdown/markdown_to_delta.dart

@@ -208,7 +208,7 @@ class MarkdownToDelta extends Converter<String, Delta>
     final tag = element.tag;
 
     if (_isEmbedElement(element)) {
-      _delta.insert(_toEmbeddable(element).toJson());
+      _delta.insert(_toEmbeddable(element).toJson(), element.attributes);
     }
 
     if (tag == 'br') {

lib/src/widgets/raw_editor/raw_editor_state.dart

@@ -213,7 +213,7 @@ class QuillRawEditorState extends EditorState
       if (html == null) {
         return;
       }
-      final deltaFromCliboard = Document.fromHtml(html);
+      final deltaFromCliboard = DeltaX.fromHtml(html);
       final delta = deltaFromCliboard.compose(controller.document.toDelta());
 
       controller

quill_html_converter/lib/quill_html_converter.dart

@@ -1,10 +1,9 @@
 library quill_html_converter;
 
 import 'package:dart_quill_delta/dart_quill_delta.dart';
-import 'package:vsc_quill_delta_to_html/vsc_quill_delta_to_html.dart'
+import 'package:vsc_quill_delta_to_html/vsc_quill_delta_to_html.dart';
-    as conventer show ConverterOptions, QuillDeltaToHtmlConverter;
 
-typedef ConverterOptions = conventer.ConverterOptions;
+export 'package:vsc_quill_delta_to_html/vsc_quill_delta_to_html.dart';
 
 /// A extension for [Delta] which comes from `flutter_quill` to extends
 /// the functionality of it to support converting the [Delta] to/from HTML
@@ -19,10 +18,33 @@ extension DeltaHtmlExt on Delta {
   /// that designed specifically for converting the quill delta to html
   String toHtml({ConverterOptions? options}) {
     final json = toJson();
-    final html = conventer.QuillDeltaToHtmlConverter(
+    final html = QuillDeltaToHtmlConverter(
       List.castFrom(json),
-      options,
+      options ?? defaultConverterOptions,
     ).convert();
     return html;
   }
 }
+
+ConverterOptions get defaultConverterOptions {
+  return ConverterOptions(
+    converterOptions: OpConverterOptions(
+      customTagAttributes: (op) => parseStyle(op.attributes['style']),
+    ),
+  );
+}
+
+Map<String, String>? parseStyle(String? style, [Map<String, String>? attrs]) {
+  if (style == null || style.isEmpty) return attrs;
+
+  attrs ??= <String, String>{};
+
+  for (var e in style.split(';')) {
+    if ((e = e.trim()).isEmpty) break;
+    var kv = e.split(':');
+    if (kv.length < 2) break;
+    var key = kv[0].trim();
+    attrs[key] = kv[1].trim();
+  }
+  return attrs;
+}