Merge pull request #916 from tneotia/feature/revamp-ruby-rendering

Revamp ruby rendering to support text-based and container-based styling

Author: erickok

lib/html_parser.dart

@@ -216,7 +216,7 @@ class HtmlParser extends StatelessWidget {
       } else if (INTERACTABLE_ELEMENTS.contains(node.localName)) {
         return parseInteractableElement(node, children);
       } else if (REPLACED_ELEMENTS.contains(node.localName)) {
-        return parseReplacedElement(node, navigationDelegateForIframe);
+        return parseReplacedElement(node, children, navigationDelegateForIframe);
       } else if (LAYOUT_ELEMENTS.contains(node.localName)) {
         return parseLayoutElement(node, children);
       } else if (TABLE_CELL_ELEMENTS.contains(node.localName)) {

lib/src/html_elements.dart

@@ -22,6 +22,7 @@ const STYLED_ELEMENTS = [
   "kbd",
   "mark",
   "q",
+  "rt",
   "s",
   "samp",
   "small",

lib/src/replaced_element.dart

@@ -29,9 +29,10 @@ abstract class ReplacedElement extends StyledElement {
     required String name,
     required Style style,
     required String elementId,
+    List<StyledElement>? children,
     dom.Element? node,
     this.alignment = PlaceholderAlignment.aboveBaseline,
-  }) : super(name: name, children: [], style: style, node: node, elementId: elementId);
+  }) : super(name: name, children: children ?? [], style: style, node: node, elementId: elementId);
 
   static List<String?> parseMediaSources(List<dom.Element> elements) {
     return elements
@@ -230,22 +231,24 @@ class EmptyContentElement extends ReplacedElement {
 class RubyElement extends ReplacedElement {
   dom.Element element;
 
-  RubyElement({required this.element, String name = "ruby"})
-      : super(name: name, alignment: PlaceholderAlignment.middle, style: Style(), elementId: element.id);
+  RubyElement({
+    required this.element,
+    required List<StyledElement> children,
+    String name = "ruby"
+  }) : super(name: name, alignment: PlaceholderAlignment.middle, style: Style(), elementId: element.id, children: children);
 
   @override
   Widget toWidget(RenderContext context) {
-    dom.Node? textNode;
+    String? textNode;
     List<Widget> widgets = <Widget>[];
-    //TODO calculate based off of parent font size.
     final rubySize = max(9.0, context.style.fontSize!.size! / 2);
     final rubyYPos = rubySize + rubySize / 2;
-    element.nodes.forEach((c) {
-      if (c.nodeType == dom.Node.TEXT_NODE) {
-        textNode = c;
+    context.tree.children.forEach((c) {
+      if (c is TextContentElement) {
+        textNode = c.text;
       }
-      if (c is dom.Element) {
-        if (c.localName == "rt" && textNode != null) {
+      if (!(c is TextContentElement)) {
+        if (c.name == "rt" && textNode != null) {
           final widget = Stack(
             alignment: Alignment.center,
             children: <Widget>[
@@ -255,12 +258,23 @@ class RubyElement extends ReplacedElement {
                       child: Transform(
                           transform:
                               Matrix4.translationValues(0, -(rubyYPos), 0),
-                          child: Text(c.innerHtml,
-                              style: context.style
-                                  .generateTextStyle()
-                                  .copyWith(fontSize: rubySize))))),
-              Container(
-                  child: Text(textNode!.text!.trim(),
+                          child: ContainerSpan(
+                            newContext: RenderContext(
+                              buildContext: context.buildContext,
+                              parser: context.parser,
+                              style: c.style,
+                              tree: c,
+                            ),
+                            style: c.style,
+                            child: Text(c.element!.innerHtml,
+                                style: c.style
+                                    .generateTextStyle()
+                                    .copyWith(fontSize: rubySize)),
+                          )))),
+              ContainerSpan(
+                  newContext: context,
+                  style: context.style,
+                  child: Text(textNode!.trim(),
                       style: context.style.generateTextStyle())),
             ],
           );
@@ -361,6 +375,7 @@ class MathElement extends ReplacedElement {
 
 ReplacedElement parseReplacedElement(
   dom.Element element,
+  List<StyledElement> children,
   NavigationDelegate? navigationDelegateForIframe,
 ) {
   switch (element.localName) {
@@ -435,6 +450,7 @@ ReplacedElement parseReplacedElement(
     case "ruby":
       return RubyElement(
         element: element,
+        children: children,
       );
     case "math":
       return MathElement(

lib/src/styled_element.dart

@@ -24,7 +24,7 @@ class StyledElement {
   }) : this._node = node;
 
   bool matchesSelector(String selector) =>
-      _node != null && matches(_node as dom.Element, selector);
+      (_node != null && matches(_node as dom.Element, selector)) || name == selector;
 
   Map<String, String> get attributes =>
       _node?.attributes.map((key, value) {

test/html_parser_test.dart

@@ -82,6 +82,7 @@ void testNewParser(BuildContext context) {
        Your browser does not support the video tag.
       </video>
     """).getElementsByTagName("video")[0],
+    [],
     null,
   );
 
@@ -101,6 +102,7 @@ void testNewParser(BuildContext context) {
         Your browser does not support the audio tag.
       </audio>
     """).getElementsByTagName("audio")[0],
+    [],
     null,
   );
   expect(audioContentElement, isA<AudioContentElement>());