[New] Code and quote blocks in rich text

English Forum Developers & API Changelog
, , , , ,
1

Summary

  • To support both quote blocks and code blocks in the Asana product, the HTML tags <blockquote> and <pre> have been added to all Asana objects that interact with rich text!
  • Developers now have more powerful rich text functionality, being able to mark quoted text and large chunks of code.

Who is affected

  • All consumers of Asana objects that support rich text (i.e., surface areas that expose html_notes, html_text, and html_description) will be able to read and write the tags <blockquote> and <pre>
  • While no existing data are altered by this change, consumers should be prepared to handle these new HTML tags in their systems.

Timeline

We are launching this functionality today!

Usage

Both read and write endpoints for rich text will remain the same. That is, endpoints now support <blockquote> and <pre> tags in both requests and responses.

Example

Here is a sample task with both a code block and a quote block in its description:

Screenshot 2024-09-23 at 2.36.17 PM
Screenshot 2024-09-23 at 2.36.17 PM793×731 29.1 KB

If we make a GET /tasks/{task_gid} request for this particular task, using html_notes as an opt_field:

curl --request GET \
     --url 'https://app.asana.com/api/1.0/tasks/<task_gid>?opt_fields=html_notes' \
     --header 'accept: application/json' \
     --header 'authorization: Bearer <personal_access_token>'

We see the following response:

{
  "data": {
    "gid": "<task_gid>",
    "html_notes": "<body><pre>function myFunction() {\n    console.log(&quot;This is a code block&quot;);\n}</pre>\n<blockquote>This is a quote block</blockquote>\n</body>"
  }
}

Migration steps

Ensure that the systems that read and parse rich text are able to handle the tags <blockquote> and <pre>. These are HTML tags that are widely supported in browsers.

Resources

5 Likes
2

Very exciting! It was so hard to deal with multi-line code blocks before so this will be a big help.

Are you considering allowing code highlighting in the future, or is that too dev-centric to make it into the product?

For example:

```javascript
console.log('Hello world')
``` (end)

This syntax that works on GitHub is very convenient. The way the interaction works now in the editor could support this by just auto-detecting the first line if it’s a supported language. Some editors have a dropdown to select the language, which could work with this as well, but the convention to type it out or detect from pastes is much easier than point and click once you know.

2 Likes
3

This sounded very exciting since it’s something many users have long wanted to have. Unfortunately, it does not seem to work for me :frowning:

pre_in_comments

4

pre_in_task_description
pre_in_task_description810×508 6.83 KB

5

Hi @Mike_Dickey,

Can you post your code that created this, especially the complete html_text string that you’re sending to Asana?

6

Hi Phil, I’m just typing it into Asana’s web interface.

7

Happy to see this! Please include a ‘COPY’ button in a future release.

8

Ah, OK - you’'re in the Developers/API forum section so I assumed…

Those are HTML tags, you can’t type them into the UI; they have to be added into the HTML source of the html_notes field (that’s the API field name for the UI Description field) via the API.

In terms of the UI, the code block is already there now (just recently added):

image

Quote block isn’t there yet but I imagine they’ll probably be adding it since the underlying platform now supports it.

9

Yes, the UI is what I was referring to. Especially given the screenshots, it looked like the “Code” button (which currently just applies ugly styles) was made to work for blocks of code. I hope you are right that this represents a step in the right direction, and that the UI will follow shortly!

10

Why (more) rich text and not just Markdown?