[Quill] - Serialize quill inline embeds for inline placeholders (Resolves #2590) (#2634)

Author: matthew-carroll

super_editor_quill/lib/src/serializing/serializers.dart

@@ -4,6 +4,7 @@ import 'package:flutter/foundation.dart';
 import 'package:super_editor/super_editor.dart';
 import 'package:super_editor_quill/src/content/formatting.dart';
 import 'package:super_editor_quill/src/content/multimedia.dart';
+import 'package:super_editor_quill/src/parsing/inline_formats.dart';
 
 /// A [DeltaSerializer] that serializes [ParagraphNode]s into deltas.
 const paragraphDeltaSerializer = ParagraphDeltaSerializer();
@@ -189,12 +190,13 @@ class TextBlockDeltaSerializer implements DeltaSerializer {
 
     for (int i = 0; i < spans.length; i += 1) {
       final span = spans[i];
-      final text = line.toPlainText().substring(span.start, line.isNotEmpty ? span.end + 1 : span.end);
+      final spanText = line.copyText(span.start, line.isNotEmpty ? span.end + 1 : span.end);
+      final spanPlainText = line.toPlainText().substring(span.start, line.isNotEmpty ? span.end + 1 : span.end);
 
       // Attempt to serialize this text span as an inline embed.
       bool didSerializeAsInlineEmbed = false;
       for (final inlineEmbedSerializer in inlineEmbedDeltaSerializers) {
-        didSerializeAsInlineEmbed = inlineEmbedSerializer.serialize(text, span.attributions, deltas);
+        didSerializeAsInlineEmbed = inlineEmbedSerializer.serializeText(spanPlainText, span.attributions, deltas);
         if (didSerializeAsInlineEmbed) {
           // This span was successfully serialized as an inline embed. Skip remaining
           // inline embed serializers.
@@ -209,19 +211,57 @@ class TextBlockDeltaSerializer implements DeltaSerializer {
 
       // This span doesn't refer to an inline embed - it's just inline text with some styles.
       // Serialize the text and styles.
-      final inlineAttributes = getInlineAttributesFor(span.attributions);
-      final newDelta = Operation.insert(
-        text,
-        inlineAttributes.isNotEmpty ? inlineAttributes : null,
-      );
-
-      final previousDelta = deltas.operations.lastOrNull;
-      if (previousDelta != null && !previousDelta.hasBlockFormats && newDelta.canMergeWith(previousDelta)) {
-        deltas.operations[deltas.operations.length - 1] = newDelta.mergeWith(previousDelta);
-        continue;
+      final placeholderIndices = spanText.placeholders.keys.toList();
+      final textRunsAndPlaceholders = <Object>[];
+      int start = 0;
+      for (final placeholderIndex in placeholderIndices) {
+        if (placeholderIndex >= spanText.length) {
+          continue;
+        }
+
+        final textRun = spanText.substring(start, placeholderIndex);
+        if (textRun.isNotEmpty) {
+          textRunsAndPlaceholders.add(textRun);
+        }
+        textRunsAndPlaceholders.add(spanText.placeholders[placeholderIndex]!);
+
+        start = placeholderIndex + 1;
       }
+      if (start != spanText.length) {
+        textRunsAndPlaceholders.add(spanText.substring(start));
+      }
+
+      final inlineAttributes = getInlineAttributesFor(span.attributions);
+      for (final item in textRunsAndPlaceholders) {
+        if (item is! String) {
+          // This is an inline placeholder. Try to embed it.
+          for (final inlineSerializer in inlineEmbedDeltaSerializers) {
+            final didSerialize = inlineSerializer.serializeInlinePlaceholder(item, inlineAttributes, deltas);
+            if (didSerialize) {
+              // We successfully serialized the placeholder. We're done with this item.
+              continue;
+            }
+          }
+
+          // We failed to serialize this placeholder. Ignore it and continue
+          // processing items.
+          continue;
+        }
+
+        // This is a text run.
+        final newDelta = Operation.insert(
+          item,
+          inlineAttributes.isNotEmpty ? inlineAttributes : null,
+        );
+
+        final previousDelta = deltas.operations.lastOrNull;
+        if (previousDelta != null && !previousDelta.hasBlockFormats && newDelta.canMergeWith(previousDelta)) {
+          deltas.operations[deltas.operations.length - 1] = newDelta.mergeWith(previousDelta);
+          continue;
+        }
 
-      deltas.operations.add(newDelta);
+        deltas.operations.add(newDelta);
+      }
     }
 
     if (line.isNotEmpty && line.last == "\n") {
@@ -401,8 +441,13 @@ abstract interface class DeltaSerializer {
 abstract interface class InlineEmbedDeltaSerializer {
   /// Tries to serialize the given [text] into the given [deltas].
   ///
-  /// If this serializer doesn't apply to the given [text], the behavior is a no-op.
-  bool serialize(String text, Set<Attribution> attributions, Delta deltas);
+  /// If this serializer doesn't apply to the given [text], nothing happens.
+  bool serializeText(String text, Set<Attribution> attributions, Delta deltas);
+
+  /// Tries to serialize the given inline [placeholder] into the given [deltas].
+  ///
+  /// If this serialize doesn't apply to the given [placeholder], nothing happens.
+  bool serializeInlinePlaceholder(Object placeholder, Map<String, dynamic> attributes, Delta deltas);
 }
 
 extension DeltaSerialization on Operation {

super_editor_quill/pubspec.yaml

@@ -23,7 +23,7 @@ dependencies:
   flutter:
     sdk: flutter
 
-  super_editor: ^0.3.0-dev.13
+  super_editor: ^0.3.0-dev.18
   logging: ^1.3.0
   dart_quill_delta: ^9.4.1
   collection: ^1.18.0

super_editor_quill/test/serializing_test.dart

@@ -244,7 +244,7 @@ void main() {
     });
 
     group("custom serializers >", () {
-      test("can serialize inline embeds", () {
+      test("can serialize inline embeds from attributions", () {
         const userMentionAttribution = _UserTagAttribution("123456");
 
         final deltas = MutableDocument(
@@ -297,6 +297,164 @@ void main() {
         expect(deltas, quillDocumentEquivalentTo(expectedDeltas));
       });
 
+      group("inline placeholders >", () {
+        test("in the middle of text", () {
+          final deltas = MutableDocument(
+            nodes: [
+              ParagraphNode(
+                id: "1",
+                text: AttributedText(
+                  "Before images >< in between images >< after images.",
+                  null,
+                  {
+                    15: const _InlineImage("http://www.somedomain.com/image1.png"),
+                    37: const _InlineImage("http://www.somedomain.com/image2.png"),
+                  },
+                ),
+              ),
+            ],
+          ).toQuillDeltas(
+            serializers: _serializersWithInlineEmbeds,
+          );
+
+          final expectedDeltas = Delta.fromJson([
+            {"insert": "Before images >"},
+            {
+              "insert": {
+                "image": {
+                  "url": "http://www.somedomain.com/image1.png",
+                },
+              },
+            },
+            {"insert": "< in between images >"},
+            {
+              "insert": {
+                "image": {
+                  "url": "http://www.somedomain.com/image2.png",
+                },
+              },
+            },
+            {"insert": "< after images.\n"},
+          ]);
+
+          expect(deltas, quillDocumentEquivalentTo(expectedDeltas));
+        });
+
+        test("at the start and end of text", () {
+          final deltas = MutableDocument(
+            nodes: [
+              ParagraphNode(
+                id: "1",
+                text: AttributedText(
+                  " < Text between images > ",
+                  null,
+                  {
+                    0: const _InlineImage("http://www.somedomain.com/image1.png"),
+                    26: const _InlineImage("http://www.somedomain.com/image2.png"),
+                  },
+                ),
+              ),
+            ],
+          ).toQuillDeltas(
+            serializers: _serializersWithInlineEmbeds,
+          );
+
+          final expectedDeltas = Delta.fromJson([
+            {
+              "insert": {
+                "image": {
+                  "url": "http://www.somedomain.com/image1.png",
+                },
+              },
+            },
+            {"insert": " < Text between images > "},
+            {
+              "insert": {
+                "image": {
+                  "url": "http://www.somedomain.com/image2.png",
+                },
+              },
+            },
+            {"insert": "\n"},
+          ]);
+
+          expect(deltas, quillDocumentEquivalentTo(expectedDeltas));
+        });
+
+        test("within attribution spans", () {
+          final deltas = MutableDocument(
+            nodes: [
+              ParagraphNode(
+                id: "1",
+                text: AttributedText(
+                  "Before attribution |< text >< text >| after attribution.",
+                  AttributedSpans(
+                    attributions: [
+                      const SpanMarker(
+                        attribution: boldAttribution,
+                        offset: 20,
+                        markerType: SpanMarkerType.start,
+                      ),
+                      const SpanMarker(
+                        attribution: boldAttribution,
+                        offset: 38,
+                        markerType: SpanMarkerType.end,
+                      ),
+                    ],
+                  ),
+                  {
+                    20: const _InlineImage("http://www.somedomain.com/image1.png"),
+                    29: const _InlineImage("http://www.somedomain.com/image2.png"),
+                    38: const _InlineImage("http://www.somedomain.com/image3.png"),
+                  },
+                ),
+              ),
+            ],
+          ).toQuillDeltas(
+            serializers: _serializersWithInlineEmbeds,
+          );
+
+          final expectedDeltas = Delta.fromJson([
+            {"insert": "Before attribution |"},
+            {
+              "insert": {
+                "image": {
+                  "url": "http://www.somedomain.com/image1.png",
+                },
+              },
+              "attributes": {"bold": true},
+            },
+            {
+              "insert": "< text >",
+              "attributes": {"bold": true},
+            },
+            {
+              "insert": {
+                "image": {
+                  "url": "http://www.somedomain.com/image2.png",
+                },
+              },
+              "attributes": {"bold": true},
+            },
+            {
+              "insert": "< text >",
+              "attributes": {"bold": true},
+            },
+            {
+              "insert": {
+                "image": {
+                  "url": "http://www.somedomain.com/image3.png",
+                },
+              },
+              "attributes": {"bold": true},
+            },
+            {"insert": "| after attribution.\n"},
+          ]);
+
+          expect(deltas, quillDocumentEquivalentTo(expectedDeltas));
+        });
+      });
+
       test("doesn't merge custom block with previous delta", () {
         final deltas = MutableDocument(
           nodes: [
@@ -349,13 +507,49 @@ const _serializersWithInlineEmbeds = [
   fileDeltaSerializer,
 ];
 
-const _inlineEmbedSerializers = [_UserTagInlineEmbedSerializer()];
+const _inlineEmbedSerializers = [
+  _InlineImageEmbedSerializer(),
+  _UserTagInlineEmbedSerializer(),
+];
+
+class _InlineImageEmbedSerializer implements InlineEmbedDeltaSerializer {
+  const _InlineImageEmbedSerializer();
+
+  @override
+  bool serializeText(String text, Set<Attribution> attributions, Delta deltas) => false;
+
+  @override
+  bool serializeInlinePlaceholder(Object placeholder, Map<String, dynamic> attributes, Delta deltas) {
+    if (placeholder is! _InlineImage) {
+      return false;
+    }
+
+    deltas.operations.add(
+      Operation.insert(
+        {
+          "image": {
+            "url": placeholder.url,
+          },
+        },
+        attributes.isNotEmpty ? attributes : null,
+      ),
+    );
+
+    return true;
+  }
+}
+
+class _InlineImage {
+  const _InlineImage(this.url);
+
+  final String url;
+}
 
 class _UserTagInlineEmbedSerializer implements InlineEmbedDeltaSerializer {
   const _UserTagInlineEmbedSerializer();
 
   @override
-  bool serialize(String text, Set<Attribution> attributions, Delta deltas) {
+  bool serializeText(String text, Set<Attribution> attributions, Delta deltas) {
     final userTag = attributions.whereType<_UserTagAttribution>().firstOrNull;
     if (userTag == null) {
       return false;
@@ -373,6 +567,9 @@ class _UserTagInlineEmbedSerializer implements InlineEmbedDeltaSerializer {
 
     return true;
   }
+
+  @override
+  bool serializeInlinePlaceholder(Object placeholder, Map<String, dynamic> attributes, Delta deltas) => false;
 }
 
 class _UserTagAttribution implements Attribution {