How does Azure DevOps handle HTML structure changes in Description fields?

Question

I've noticed a peculiar behavior in Azure DevOps regarding the Description field of elements. I add some content that is structured within div containers with various IDs and classes automatically via a program with REST API. However, if I add content manually to the Description field in Azure DevOps, the entire HTML structure gets altered. The IDs and classes of the divs are removed, and the style information contained within a style tag is added as attributes to individual elements.

Automatic Input:

<div id="automaticInput">
<div class="category">Category 1: </div><br>
   <table>
     <tr>
        <td class="text">Some information about the item. </td>
        <td class="comment"> </td>
     </tr>
   </table><br>
</div>
<style>
   /*Some style*/
</style>

When I add some text manually to it in Azure:

<div>
<div>Category 1: </div><br>
  <table style="border-collapse:collapse;width:100%;table-layout:fixed;">
    <tbody>
        <tr>
            <td style="vertical-align:top;text-align:left;width:80%;padding:10px;">Some 
                     information about the item.
                <br>Some new changes </td>
            <td
                style="vertical-align:top;text-align:left;padding:10px;border:1px solid 
                 rgb(221, 221, 221);background-color:beige;width:20%;">
            </td>
        </tr>
    </tbody>
  </table><br>
</div>

I'm curious about the rules or criteria Azure DevOps follows when making these alterations. Is there a way to prevent this from happening, or are there guidelines I should follow to ensure consistent HTML structure in the Description field?

Answer 1

Based on your description, I added a comment for a work item via API with some simple format like in the PowerShell script below. I then got that new comment and noticed the id=automaticInput and style were indeed kept in the response; still the custom styling was not refected in the web UI.

$addCommentURL = "https://dev.azure.com/$organization/$project/_apis/wit/workItems/259/comments/?api-version=$apiVersion"
$headers = @{
    'Authorization' = 'Bearer ' + "$token"
    'Content-Type' = 'application/json'
}
$htmlContent = @"
<div id="automaticInput">
   <style>
      .category {
         font-weight: bold;
         color: yellow;
      }
      .text {
         font-size: 14px;
         color: #333;
      }
      .comment {
         color: yellow;
      }
   </style>
   <div class="category">Category 1: </div><br>
   <table>
      <tr>
         <td class="text">Some information about the item.</td>
         <td class="comment">XXXXXX</td>
      </tr>
   </table><br>
</div>
"@

# Create the comment payload
$commentPayload = @{
    text = $htmlContent
} | ConvertTo-Json

$commentPayload

$addComment = Invoke-RestMethod -Method Post -Uri $addCommentURL -Headers $headers -Body $commentPayload
$newCommentId = $addComment.id

# Comments - Get Comments GET https://dev.azure.com/{organization}/{project}/_apis/wit/workItems/{workItemId}/comments?api-version=7.2-preview.4
$getCommentURL = "https://dev.azure.com/$organization/$project/_apis/wit/workItems/259/comments/$($newCommentId)?api-version=$apiVersion"

$newComment = Invoke-RestMethod -Method Get -Uri $getCommentURL -Headers $headers

$newComment | ConvertTo-Json -Depth 100 | Out-File "E:\Alvin\Desktop\newComment.json"

When editing this comment in the Web UI, we could check the request sent by the browser developer tool (F12) didn't convey the id=automaticInput and style sections in the payload.

It seems that the Azure DevOps work item comment field doesn't support such html styling for the web UI.