Styling for text fragments

sky/sdk/lib/rendering/paragraph.dart

Index: sky/sdk/lib/rendering/paragraph.dart
diff --git a/sky/sdk/lib/rendering/paragraph.dart b/sky/sdk/lib/rendering/paragraph.dart
index 8ef6d4eeb1c55bf517009385f07782537ec87e76..cc04d050801ae0db57fd9ae3a30856dc8003c590 100644
--- a/sky/sdk/lib/rendering/paragraph.dart
+++ b/sky/sdk/lib/rendering/paragraph.dart
@@ -7,11 +7,6 @@ import 'dart:sky' as sky;
 import 'box.dart';
 import 'object.dart';
 
-class RenderInline extends RenderObject {
-  RenderInline(this.data);
-  String data;
-}
-
 enum FontWeight {
   light, // 300
   regular, // 400
@@ -69,6 +64,29 @@ class TextStyle {
     return value;
   }
 
+  void _applyToCSSStyle(sky.CSSStyleDeclaration cssStyle) {
+    if (color != null) {
+      cssStyle['color'] = 'rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha / 255.0})';
+    }
+    if (fontSize != null) {
+      cssStyle['font-size'] = "${fontSize}px";
+    }
+    if (fontWeight != null) {
+      cssStyle['font-weight'] = const {
+        FontWeight.light: '300',
+        FontWeight.regular: '400',
+        FontWeight.medium: '500',
+      }[fontWeight];
+    }
+    if (textAlign != null) {
+      cssStyle['text-align'] = const {
+        TextAlign.left: 'left',
+        TextAlign.right: 'right',
+        TextAlign.center: 'center',
+      }[textAlign];
+    }
+  }
+
   String toString([String prefix = '']) {
     List<String> result = [];
     if (color != null)
@@ -76,15 +94,63 @@ class TextStyle {
     if (fontSize != null)
       result.add('${prefix}fontSize: $fontSize');
     if (fontWeight != null)
-      result.add('${prefix}fontWeight: fontWeight');
+      result.add('${prefix}fontWeight: $fontWeight');
     if (textAlign != null)
-      result.add('${prefix}textAlign: textAlign');
+      result.add('${prefix}textAlign: $textAlign');
     if (result.isEmpty)
       return '${prefix}<no style specified>';
     return result.join('\n');
   }
 }
 
+class InlineBase {
+  sky.Node _toDOM(sky.Document owner);
+  String toString([String prefix = '']);
+}
+
+class InlineText extends InlineBase {
+  InlineText(this.text) {
+    assert(text != null);
+  }
+
+  final String text;
+
+  sky.Node _toDOM(sky.Document owner) {
+    return owner.createText(text);
+  }
+
+  String toString([String prefix = '']) => '${prefix}InlineText: "${text}"';
+}
+
+class InlineStyle extends InlineBase {
+  InlineStyle(this.style, this.children) {
+    assert(style != null && children != null);
+  }
+
+  final TextStyle style;
+  final List<InlineBase> children;
+
+  sky.Node _toDOM(sky.Document owner) {
+    sky.Element parent = owner.createElement('t');
+    style._applyToCSSStyle(parent.style);
+    for (InlineBase child in children) {
+      parent.appendChild(child._toDOM(owner));
+    }
+    return parent;
+  }
+
+  String toString([String prefix = '']) {
+    List<String> result = [];
+    result.add('${prefix}InlineStyle:');
+    var indent = '${prefix}  ';
+    result.add('${style.toString(indent)}');
+    for (InlineBase child in children) {
+      result.add(child.toString(indent));
+    }
+    return result.join('\n');
+  }
+}
+
 // Unfortunately, using full precision floating point here causes bad layouts
 // because floating point math isn't associative. If we add and subtract
 // padding, for example, we'll get different values when we estimate sizes and
@@ -98,36 +164,24 @@ double _applyFloatingPointHack(double layoutValue) {
 
 class RenderParagraph extends RenderBox {
 
-  RenderParagraph({
-    String text,
-    Color color,
-    TextStyle style
-  }) : _style = style {
+  RenderParagraph(InlineBase inlineValue) {
     _layoutRoot.rootElement = _document.createElement('p');
-    this.text = text;
+    inline = inlineValue;
   }
 
   final sky.Document _document = new sky.Document();
   final sky.LayoutRoot _layoutRoot = new sky.LayoutRoot();
 
-  String get text => (_layoutRoot.rootElement.firstChild as sky.Text).data;
-  void set text (String value) {
-    _layoutRoot.rootElement.setChild(_document.createText(value));
-    markNeedsLayout();
-  }
+  InlineBase _inline;
+  BoxConstraints _constraintsForCurrentLayout;
 
-  TextStyle _style;
-  TextStyle get style => _style;
-  void set style (TextStyle value) {
-    if (_style != value) {
-      // TODO(hansmuller): decide if a new layout or paint is needed
-      markNeedsLayout();
-      _style = value;
-    }
+  String get inline => _inline;
+  void set inline (InlineBase value) {
+    _inline = value;
+    _layoutRoot.rootElement.setChild(_inline._toDOM(_document));
+    markNeedsLayout();
   }
 
-  BoxConstraints _constraintsForCurrentLayout;
-
   sky.Element _layout(BoxConstraints constraints) {
     _layoutRoot.maxWidth = constraints.maxWidth;
     _layoutRoot.minWidth = constraints.minWidth;
@@ -182,31 +236,6 @@ class RenderParagraph extends RenderBox {
     if (_constraintsForCurrentLayout != constraints && constraints != null)
       _layout(constraints);
 
-    if (style != null) {
-      var cssStyle = _layoutRoot.rootElement.style;
-      if (style.color != null) {
-        Color c = style.color;
-        cssStyle['color'] =
-            'rgba(${c.red}, ${c.green}, ${c.blue}, ${c.alpha / 255.0})';
-      }
-      if (style.fontSize != null) {
-        cssStyle['font-size'] = "${style.fontSize}px";
-      }
-      if (style.fontWeight != null) {
-        cssStyle['font-weight'] = const {
-          FontWeight.light: '300',
-          FontWeight.regular: '400',
-          FontWeight.medium: '500',
-        }[style.fontWeight];
-      }
-      if (style.textAlign != null) {
-        cssStyle['text-align'] = const {
-          TextAlign.left: 'left',
-          TextAlign.right: 'right',
-          TextAlign.center: 'center',
-        }[style.textAlign];
-      }
-    }
     _layoutRoot.paint(canvas);
   }
 
@@ -214,9 +243,7 @@ class RenderParagraph extends RenderBox {
 
   String debugDescribeSettings(String prefix) {
     String result = '${super.debugDescribeSettings(prefix)}';
-    if (style != null)
-      result += '${prefix}style:\n' + style.toString('$prefix  ') + '\n';
-    result += '${prefix}text: ${text}\n';
+    result += '${prefix}inline: ${inline}\n';
     return result;
   }
 }