Render annotation markdown text to HTML when exporting to that format

src/sidebar/services/annotations-exporter.tsx

@@ -14,6 +14,7 @@ import {
 import { annotationDisplayName } from '../helpers/annotation-user';
 import { stripInternalProperties } from '../helpers/strip-internal-properties';
 import { VersionData } from '../helpers/version-data';
+import { renderMathAndMarkdown } from '../render-markdown';
 import { formatDateTime } from '../util/time';
 
 export type JSONExportContent = {
@@ -203,7 +204,7 @@ export class AnnotationsExporter {
             </p>
 
             <table>
-              <tbody>
+              <tbody style={{ verticalAlign: 'top' }}>
                 <tr>
                   <td>Group:</td>
                   <td>{groupName}</td>
@@ -233,12 +234,21 @@ export class AnnotationsExporter {
             {annotations.map((annotation, index) => {
               const page = pageLabel(annotation);
               const annotationQuote = quote(annotation);
+              const renderedComment = renderMathAndMarkdown(annotation.text);
+
+              // When the result of rendering the text's markdown is just a
+              // single paragraph, we fall back to the annotation text, to
+              // avoid extra margins added by some editors, like Google Docs
+              const comment =
+                renderedComment === `<p>${annotation.text}</p>`
+                  ? annotation.text
+                  : renderedComment;
 
               return (
                 <article key={annotation.id}>
                   <h2>Annotation {index + 1}:</h2>
                   <table>
-                    <tbody>
+                    <tbody style={{ verticalAlign: 'top' }}>
                       <tr>
                         <td>Created at:</td>
                         <td>
@@ -273,7 +283,11 @@ export class AnnotationsExporter {
                       )}
                       <tr>
                         <td>Comment:</td>
-                        <td>{annotation.text}</td>
+                        <td
+                          dangerouslySetInnerHTML={{
+                            __html: comment,
+                          }}
+                        />
                       </tr>
                       {annotation.tags.length > 0 && (
                         <tr>

src/sidebar/services/test/annotations-exporter-test.js

@@ -291,6 +291,12 @@ ${formattedNow},John Doe,,http://example.com,My group,Annotation,,Annotation tex
       const annotations = [
         {
           ...baseAnnotation,
+          text: `This includes markdown
+
+1. First item
+2. Second item
+
+**bold text** and [a link](https://example.com)`,
           user: 'acct:jane@localhost',
           tags: ['foo', 'bar'],
           target: targetWithSelectors(quoteSelector('The quote')),
@@ -343,7 +349,7 @@ ${formattedNow},John Doe,,http://example.com,My group,Annotation,,Annotation tex
         </a>
       </p>
       <table>
-        <tbody>
+        <tbody style="vertical-align:top;">
           <tr>
             <td>Group:</td>
             <td>My group</td>
@@ -373,7 +379,7 @@ ${formattedNow},John Doe,,http://example.com,My group,Annotation,,Annotation tex
       <article>
         <h2>Annotation 1:</h2>
         <table>
-          <tbody>
+          <tbody style="vertical-align:top;">
             <tr>
               <td>Created at:</td>
               <td>
@@ -396,7 +402,14 @@ ${formattedNow},John Doe,,http://example.com,My group,Annotation,,Annotation tex
             </tr>
             <tr>
               <td>Comment:</td>
-              <td>Annotation text</td>
+              <td>
+                <p>This includes markdown</p>
+                <ol>
+                <li>First item</li>
+                <li>Second item</li>
+                </ol>
+                <p><strong>bold text</strong> and <a href="https://example.com" target="_blank">a link</a></p>
+              </td>
             </tr>
             <tr>
               <td>Tags:</td>
@@ -408,7 +421,7 @@ ${formattedNow},John Doe,,http://example.com,My group,Annotation,,Annotation tex
       <article>
         <h2>Annotation 2:</h2>
         <table>
-          <tbody>
+          <tbody style="vertical-align:top;">
             <tr>
               <td>Created at:</td>
               <td>
@@ -447,7 +460,7 @@ ${formattedNow},John Doe,,http://example.com,My group,Annotation,,Annotation tex
       <article>
         <h2>Annotation 3:</h2>
         <table>
-          <tbody>
+          <tbody style="vertical-align:top;">
             <tr>
               <td>Created at:</td>
               <td>