[New] Rich text in task comments

Original announcement

Summary

We’re thrilled to introduce an exciting update to the Asana web app UI: we’ve launched rich text formatting in task comments, allowing you to work and communicate in a more organized and structured manner.

Task comments will now be structured into independently-draggable “blocks.” These changes bring several new whitespace standards into play, and while your application won’t necessarily require adjustments to its whitespace behavior, it’s crucial to understand how these changes will impact your usage of stories in the API.

Usage

A story’s html_text field will now be able to contain rich text.

Task comments in the Asana web app are now divided into distinct “blocks,” each representing a specific content element:

  • Each header (<h1>/<h2> tag)
  • Each horizontal rule (<hr> tag)
  • Each list item (<li> tag)
  • Each inline image (<img> tag)
  • Each media embed (<object> tag)

Using rich text elements, you can create well-structured and organized task comments, allowing for enhanced exchange of ideas and information.

Special considerations:

Along with these UI “blocks,” there are some special considerations to keep in mind:

  • Content sequences that don’t include any of the specified tags are implicitly treated as a “paragraph block”
  • Multiple “paragraph blocks” can appear consecutively, indicated by a double-newline (\n\n), which signals a division between them. This is in contrast to a single line break (\n), which represents a new line within the same block.
  • To represent multiple sequential line breaks within the same block, we utilize the unicode zero-width-space (\u200b) as a line’s content.
  • Example: Line one\n\u200b\nLine three\n\nA separate block

By recognizing the double-newlines and zero-width spaces, you can ensure that your application can display task comments with the intended formatting intact. Be sure to review the documentation for rich text for additional usage details.

Questions & feedback

If you have any questions, feedback, or need further assistance, please don’t hesitate to share your thoughts with the community. Your input is valuable, and we’re here to support your development efforts.

Best,
Andrew

1 Like

Is there a way to use line breaks in html_text? \n
tags are not working.

Hi @Teja_Korgaonkar,

I just tested and confirmed that \n still works to put a line break within the html_text property. So there is something else going on in your particular implementation. If you can share more details and/or code, we might be able to diagnose the issue.

1 Like

The following line is simply added to html_text as “This is a message. \n this is second line” by using Create a story on a task (asana.com), But both sentences appear on the same line and ‘\n’ include as a text.

Did you wrap your html_text string inside a <body></body> tag pair?

yes

As mentioned, if you can share your specific code and tell us the details of your environment, we might be able to get some clues.