[web] Render RTL text correctly

ci/licenses_golden/licenses_flutter

@@ -587,6 +587,7 @@ FILE: ../../../flutter/lib/web_ui/lib/src/engine/text/measurement.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/text/paint_service.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/text/paragraph.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/text/ruler.dart
+FILE: ../../../flutter/lib/web_ui/lib/src/engine/text/text_direction.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/text/unicode_range.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/text/word_break_properties.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/text/word_breaker.dart

lib/web_ui/dev/goldens_lock.yaml

@@ -1,2 +1,2 @@
 repository: https://github.com/flutter/goldens.git
-revision: 8df047cbfb1edb34569f3170a26e718fef22ffa7
+revision: 2b69a902e4c70b4e29044e66837e6b64aab1f473

lib/web_ui/lib/src/engine.dart

@@ -165,6 +165,8 @@ export 'engine/text/canvas_paragraph.dart';
 
 export 'engine/text/ruler.dart';
 
+export 'engine/text/text_direction.dart';
+
 export 'engine/text/unicode_range.dart';
 
 export 'engine/text/word_break_properties.dart';

lib/web_ui/lib/src/engine/text/canvas_paragraph.dart

@@ -74,6 +74,8 @@ class CanvasParagraph implements EngineParagraph {
   @override
   bool isLaidOut = false;
 
+  bool get isRtl => paragraphStyle.effectiveTextDirection == ui.TextDirection.rtl;
+
   ui.ParagraphConstraints? _lastUsedConstraints;
 
   late final TextLayoutService _layoutService = TextLayoutService(this);
@@ -168,7 +170,7 @@ class CanvasParagraph implements EngineParagraph {
 
     // 2. Append all spans to the paragraph.
 
-    ParagraphSpan? span;
+    FlatTextSpan? span;
 
     html.HtmlElement element = rootElement;
     final List<EngineLineMetrics> lines = computeLineMetrics();
@@ -180,21 +182,34 @@ class CanvasParagraph implements EngineParagraph {
       }
 
       final EngineLineMetrics line = lines[i];
-      for (final RangeBox box in line.boxes!) {
+      final List<RangeBox> boxes = line.boxes!;
+      final StringBuffer buffer = StringBuffer();
+
+      int j = 0;
+      while (j < boxes.length) {
+        final RangeBox box = boxes[j++];
+        if (box is SpanBox && box.span == span) {
+          buffer.write(box.toText());
+          continue;
+        }
+
+        if (buffer.isNotEmpty) {
+          domRenderer.appendText(element, buffer.toString());
+          buffer.clear();
+        }
+
         if (box is SpanBox) {
-          if (box.span != span) {
-            span = box.span;
-            element = domRenderer.createElement('span') as html.HtmlElement;
-            applyTextStyleToElement(
-              element: element,
-              style: box.span.style,
-              isSpan: true
-            );
-            domRenderer.append(rootElement, element);
-          }
-          domRenderer.appendText(element, box.toText());
+          span = box.span;
+          element = domRenderer.createElement('span') as html.HtmlElement;
+          applyTextStyleToElement(
+            element: element,
+            style: box.span.style,
+            isSpan: true,
+          );
+          domRenderer.append(rootElement, element);
+          buffer.write(box.toText());
         } else if (box is PlaceholderBox) {
-          span = box.placeholder;
+          span = null;
           // If there's a line-end after this placeholder, we want the <BR> to
           // be inserted in the root paragraph element.
           element = rootElement;
@@ -207,6 +222,11 @@ class CanvasParagraph implements EngineParagraph {
         }
       }
 
+      if (buffer.isNotEmpty) {
+        domRenderer.appendText(element, buffer.toString());
+        buffer.clear();
+      }
+
       final String? ellipsis = line.ellipsis;
       if (ellipsis != null) {
         domRenderer.appendText(element, ellipsis);