[@atlaskit/comment] Unable to render HTML content

Hello,

I’m currently implementing the @atlaskit/comment package within my Forge Custom UI application. However, the backend response does return data with HTML tags / elements, but the UI isn’t able to render it accordingly. I’m wondering if I have to use JIRATransformer for this, like, editor-core.

const CommentSection = (props) => {
  return (
    <Fragment>
      {
        props.comments.map(
          (comment) => (
            <div
              style={
                comment.isPublicComment
                ? {
                  'padding': '8px 0px 4px 18px',
                  'margin': '20px 0px -4px -8px',
                  'borderRadius': '4px'
                } 
                : {
                  'padding': '8px 0px 4px 18px',
                  'margin': '20px 0px -4px -8px',
                  'borderRadius': '4px',
                  'backgroundColor': '#FFFAE6'
                }
              }
            >
              <Comment
                id={comment.id}
                restrictedTo={ comment.isPublicComment ? "" : "Internal note" }
                time={
                  <CommentTime>
                    {
                      new Date(
                        comment.created
                      )
                      .toLocaleDateString(
                        "en-US", {
                          year: 'numeric',
                          month: 'long',
                          day: 'numeric'
                        }
                      )
                      .toString()
                    }
                  </CommentTime>
                }
                avatar={
                  <Avatar 
                    name={comment.author.displayName}
                    src={comment.author.avatarUrl}
                  />
                }
                author={
                  <CommentAuthor>
                    {comment.author.displayName}
                  </CommentAuthor>
                }
                content={
                  comment.body
                }
                actions={
                  [
                    <CommentAction>Edit</CommentAction>,
                    <CommentAction>Delete</CommentAction>
                  ]
                }
              />
            </div>
          )
        )
      }
    </Fragment>
  )
}

Current UI:


I have read the documentation catered at atlassian design page, but unable to achieve the same behavior. Refer to the page [here](https://atlassian.design/components/comment/examples).

Thanks!

UPDATE:

I was able to resolve this issue by wrapping the HTML Element by using

<div dangerouslySetInnerHTML={{'__html': comment.body}}></div>

It seems like by default the Jira API returns the raw HTML elements in string. Hence, we will need to inject the HTML Element through a div so " " can be eliminated so it could render it.