From 3e97fa2c81a478e39baac3752036aaefeaf747bd Mon Sep 17 00:00:00 2001 From: agu Date: Mon, 18 Dec 2023 19:15:11 +0800 Subject: [PATCH] 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 --- .../lib/presentation/quill/quill_screen.dart | 2 +- lib/src/models/documents/document.dart | 96 ++++++++++--------- .../quill_markdown/delta_to_markdown.dart | 57 +++++------ .../quill_markdown/markdown_to_delta.dart | 2 +- .../widgets/raw_editor/raw_editor_state.dart | 2 +- .../lib/quill_html_converter.dart | 32 ++++++- 6 files changed, 110 insertions(+), 81 deletions(-) diff --git a/example/lib/presentation/quill/quill_screen.dart b/example/lib/presentation/quill/quill_screen.dart index 991dd633..27171d30 100644 --- a/example/lib/presentation/quill/quill_screen.dart +++ b/example/lib/presentation/quill/quill_screen.dart @@ -76,7 +76,7 @@ class _QuillScreenState extends State { onPressed: () { final html = _controller.document.toDelta().toHtml(); _controller.document = - Document.fromDelta(Document.fromHtml(html)); + Document.fromDelta(DeltaX.fromHtml(html)); }, icon: const Icon(Icons.html), ), diff --git a/lib/src/models/documents/document.dart b/lib/src/models/documents/document.dart index 2945e755..5886ddb3 100644 --- a/lib/src/models/documents/document.dart +++ b/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 documentChangeObserver = - StreamController.broadcast(); + final StreamController documentChangeObserver = StreamController.broadcast(); final History history = History(); @@ -84,8 +82,7 @@ class Document { return Delta(); } - final delta = _rules.apply(RuleType.insert, this, index, - data: data, len: replaceLength); + final delta = _rules.apply(RuleType.insert, this, index, 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, - len: len, attribute: attribute); + final formatDelta = _rules.apply(RuleType.format, this, index, 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 collectAllIndividualStyleAndEmbed(int index, int len) { final res = queryChild(index); - return (res.node as Line) - .collectAllIndividualStylesAndEmbed(res.offset, len); + return (res.node as Line).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 = - op.attributes != null ? Style.fromJson(op.attributes) : null; + final style = 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 = - op.isInsert && op.data is Map && (op.data as Map).containsKey(type); + final opInsertEmbed = 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? embedBuilders, EmbedBuilder? unknownEmbedBuilder, ]) => - _root.children - .map((e) => e.toPlainText(embedBuilders, unknownEmbedBuilder)) - .join(); + _root.children.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, - 'Document can only contain insert operations but ${op.key} found.'); + throw ArgumentError.value( + doc, 'Document can only contain insert operations but ${op.key} found.'); } - final style = - op.attributes != null ? Style.fromJson(op.attributes) : null; + final style = 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 && - node.parent is! Block && - node.style.isEmpty && - _root.childCount > 1) { + if (node is Line && 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 && - delta.first.data == '\n' && - delta.first.key == 'insert'; + return delta.length == 1 && 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 - .convert( - html, - ) - .replaceAll('unsafe:', ''); - - final mdDocument = md.Document(encodeHtml: false); + var rules = [ + html2md.Rule('image', filters: ['img'], replacement: (content, node) { + node.asElement()?.attributes.remove('class'); + //Later we can convert this to delta along with the attributes by GoodInlineHtmlSyntax + return node.outerHTML; + }), + ]; + + 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; + } +} diff --git a/lib/src/packages/quill_markdown/delta_to_markdown.dart b/lib/src/packages/quill_markdown/delta_to_markdown.dart index d3e7a33b..007ea610 100644 --- a/lib/src/packages/quill_markdown/delta_to_markdown.dart +++ b/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 - implements _NodeVisitor { +class DeltaToMarkdown extends Converter implements _NodeVisitor { /// DeltaToMarkdown({ Map? customEmbedHandlers, @@ -70,8 +70,9 @@ class DeltaToMarkdown extends Converter ); } if (infoString.isEmpty) { - final linesWithLang = (node as Block).children.where((child) => - child.containsAttr(CodeBlockLanguageAttribute.attrKey)); + final linesWithLang = (node as Block) + .children + .where((child) => child.containsAttr(CodeBlockLanguageAttribute.attrKey)); if (linesWithLang.isNotEmpty) { infoString = linesWithLang.first.getAttrValueOr( CodeBlockLanguageAttribute.attrKey, @@ -159,8 +160,7 @@ class DeltaToMarkdown extends Converter ), Attribute.link.key: _AttributeHandler( beforeContent: (attribute, node, output) { - if (node.previous?.containsAttr(attribute.key, attribute.value) != - true) { + if (node.previous?.containsAttr(attribute.key, attribute.value) != true) { output.write('['); } }, @@ -210,8 +210,7 @@ class DeltaToMarkdown extends Converter leaf.accept(this, out); } }); - if (style.isEmpty || - style.values.every((item) => item.scope != AttributeScope.block)) { + if (style.isEmpty || style.values.every((item) => item.scope != AttributeScope.block)) { out.writeln(); } if (style.containsKey(Attribute.list.key) && @@ -234,10 +233,9 @@ class DeltaToMarkdown extends Converter var content = text.value; if (!(style.containsKey(Attribute.codeBlock.key) || style.containsKey(Attribute.inlineCode.key) || - (text.parent?.style.containsKey(Attribute.codeBlock.key) ?? - false))) { - content = content.replaceAllMapped( - RegExp(r'[\\\`\*\_\{\}\[\]\(\)\#\+\-\.\!\>\<]'), (match) { + (text.parent?.style.containsKey(Attribute.codeBlock.key) ?? false))) { + content = + content.replaceAllMapped(RegExp(r'[\\\`\*\_\{\}\[\]\(\)\#\+\-\.\!\>\<]'), (match) { return '\\${match[0]}'; }); } @@ -266,9 +264,8 @@ class DeltaToMarkdown extends Converter VoidCallback contentHandler, { bool sortedAttrsBySpan = false, }) { - final attrs = sortedAttrsBySpan - ? node.attrsSortedByLongestSpan() - : node.style.attributes.values.toList(); + final attrs = + sortedAttrsBySpan ? node.attrsSortedByLongestSpan() : 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 { extension _NodeX on Node { T accept(_NodeVisitor visitor, [T? context]) { - switch (runtimeType) { - case const (Root): - return visitor.visitRoot(this as Root, context); - case const (Block): - return visitor.visitBlock(this as Block, context); - case const (Line): - return visitor.visitLine(this as Line, context); - case const (QuillText): - return visitor.visitText(this as QuillText, context); - case const (Embed): - return visitor.visitEmbed(this as Embed, context); + final node = this; + if (node is Root) { + return visitor.visitRoot(node, context); + } + if (node is Block) { + return visitor.visitBlock(node, context); + } + if (node is Line) { + return visitor.visitLine(node, 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( - (attr1, attr2) => attrCount[attr2]!.compareTo(attrCount[attr1]!)); + final attrs = style.attributes.values + .sorted((attr1, attr2) => attrCount[attr2]!.compareTo(attrCount[attr1]!)); return attrs; } diff --git a/lib/src/packages/quill_markdown/markdown_to_delta.dart b/lib/src/packages/quill_markdown/markdown_to_delta.dart index 76285a15..b070ac25 100644 --- a/lib/src/packages/quill_markdown/markdown_to_delta.dart +++ b/lib/src/packages/quill_markdown/markdown_to_delta.dart @@ -208,7 +208,7 @@ class MarkdownToDelta extends Converter final tag = element.tag; if (_isEmbedElement(element)) { - _delta.insert(_toEmbeddable(element).toJson()); + _delta.insert(_toEmbeddable(element).toJson(), element.attributes); } if (tag == 'br') { diff --git a/lib/src/widgets/raw_editor/raw_editor_state.dart b/lib/src/widgets/raw_editor/raw_editor_state.dart index 4162e533..43232b89 100644 --- a/lib/src/widgets/raw_editor/raw_editor_state.dart +++ b/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 diff --git a/quill_html_converter/lib/quill_html_converter.dart b/quill_html_converter/lib/quill_html_converter.dart index 7ed4fe0b..17c8a889 100644 --- a/quill_html_converter/lib/quill_html_converter.dart +++ b/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' - as conventer show ConverterOptions, QuillDeltaToHtmlConverter; +import 'package:vsc_quill_delta_to_html/vsc_quill_delta_to_html.dart'; -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? parseStyle(String? style, [Map? attrs]) { + if (style == null || style.isEmpty) return attrs; + + attrs ??= {}; + + 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; +}