BotFramework-WebChat: Cards: unable to render D. M. YYYY date properly

Screenshots

When Title or Subtitle in HeroCard starts with date in European format (D. M. YYYY):

It gets evaluated with Markdown as ordered list and produces wrong HTML:

Version

webchat-stable
Bot Framework emulator

Describe the bug

When Title or Subtitle in HeroCard begins with date in the form of D. M. YYYY it’s recognized as Markdown ordered list and rendered completely out of place (see screenshots).

To Reproduce

Steps to reproduce the behavior:

Connect your bot to proper channel registration
Start Bot Framework Emulator or deploy web chat to a website
Make sure your regional settings are European D. M. YYYY

Generate a Hero Card and set Title and/or Subtitle to today’s date

var reply = stepContext.Context.Activity.CreateReply();
var card = new HeroCard
{
    Title = string.Format(DateTime.Now.ToShortDateString()),
    Subtitle = DateTime.Now.ToShortDateString(),
};

reply.Attachments.Add(card.ToAttachment());
await stepContext.Context.SendActivityAsync(reply);

Send it to user
See incorrect display in Web Chat

Expected behavior

Date should be displayed properly, not as an ordered list.

Additional context

Workaround: Prepend date with invisible character ⁣

[Bug]

About this issue

Original URL
State: open
Created 5 years ago
Comments: 20 (20 by maintainers)

Most upvoted comments

@msimecek , the reason it converts 26. 6. 2019 into 1. 1. 2019 is because Markdown interprets a number followed by a . as one item in a list. Items in a list are enumerated in Markdown.

One special thing about how it interprets this syntax is that it does not matter what number is before the ., the list will start at 1 and increment upwards for each subsequent item in the list.

For example: try the following in the GitHub comment box and click “Preview” to see what it renders:

1.
3.
10.

This should render as:

Markdown also understands the concept of nested lists, which means that enumerated items with different indentations will be seen as sub-lists of the parent list.

So in the case of your hero card (feel free to try this in GitHub as well):

1. 1. year
1. 1. year

Will render as:

1. year
1. year

because the first 1. on each line is seen as the first item in the parent-level list, and the second 1. is seen as the first item in the child-level list for each row.

So when you type 26. 6. 2019, the 26. gets converted to a 1. and the 6. also gets converted into a 1. because they are both seen as the first item in an ordered list.

===

Regarding the actual issue, I will try to bump the Web Chat version within the Emulator and see if that fixes it.

tonyanziano on Jun 27, 2019

@tonyanziano Thanks for point that out! You can add a plain text attachment to the activity if you don’t want the string to be passed through the markdown renderer. I’m not sure that will work in an Hero Card though.

await context.sendActivity({
    attachments: [{
        content: "26. 6. 2019",
        contentType: 'text/plain'
    }]
})

tdurnford on Jun 26, 2019

I did it differently, but can confirm, that v4 works fine.

Thanks for investigating and for the transfer!

msimecek on Jun 24, 2019

I think @tdurnford 's approach is reasonable as well, however I’m not sure how to achieve the same layout / look as the Hero Card with a plain text attachment.

I tried setting the Hero Card’s content type to text/plain manually using the following code:

var reply = Activity.CreateMessageActivity();
var card = new HeroCard
{
    Title = "26. 6. 2019",
    Subtitle = "26. 6. 2019",
};

reply.Attachments.Add(card.ToAttachment());
reply.Attachments[0].ContentType = "text/plain";
await turnContext.SendActivityAsync(reply);

However, this activity caused Web Chat to throw, and consequently kill the Emulator.

tonyanziano on Jun 26, 2019