Enable changing font colors inline

[tongyliu]

The Problem

Currently, in order to render differently colored text on a single line, a ColumnSet has to be used. While this mostly works, it makes the markup a little bit clunky, and in some cases also leads to text wrapping poorly:

Asks

• Bing

Potential Designs

Option 1:

Since Markdown syntax is already supported in TextBlocks, one option is to add support for some type of "Markdown-like" syntax for defining font colors.

{
    "type": "TextBlock",
    "text": "[color=good](The Huffington Post) · 5/23/2016",
    "wrap": true,
    "maxLines": 2
}

Option 2:

Alternatively, being able to create TextBlocks that display inline would also work. This option would likely be more difficult to implement with regard to handling wrap and maxLines parameters, though.

{
    "type": "TextBlock",
    "display": "inline",
    "color": "good",
    "text": "The Huffington Post",
    "wrap": true,
    "maxLines": 2
},
{
    "type": "TextBlock",
    "display": "inline",
    "text": " · 5/23/2016",
    "wrap": true,
    "maxLines": 2
}

Option 3

Mimick what XAML does with RichTextBlock...

{
  "type": "RichTextBlock",
  "wrap": true,
  "maxLines": 2,
  "paragraphs": [
    {
      "inlines": [
        {
          "type": "TextRun",
          "text": "The Huffington Post",
          "color": "good"
        },
        {
          "type": "TextRun",
          "text": "5/23/2016"
        }
      ]
    }
  ]
}

This could also be our solution for inline actions, #865, too, and inline advanced emojis #1645

[andrewleader]

Proposal needs more review. General debate about markdown.

[andrewleader]

Closing in favor of inline text runs to solve this: #1933