fix(files): preserve PDF image links and table alignment

Author: Bill Leoutsakos

apps/sim/app/api/files/export/[id]/markdown-pdf.test.ts

@@ -150,6 +150,61 @@ ${repeatedParagraphs}`
     expect(text).toContain('Value')
   })
 
+  it('preserves links on linked-image fallbacks', async () => {
+    const destination = 'https://sim.ai/docs'
+    const buffer = await renderMarkdownPdf({
+      markdown: `[![Documentation badge](https://example.com/badge.svg)](${destination})`,
+      title: 'Linked image',
+    })
+
+    const document = await getDocument({ data: new Uint8Array(buffer), disableWorker: true })
+      .promise
+    try {
+      const annotations = await (await document.getPage(1)).getAnnotations()
+      expect(annotations.some((annotation) => annotation.url === destination)).toBe(true)
+    } finally {
+      await document.destroy()
+    }
+  })
+
+  it('preserves GFM table-cell alignment', async () => {
+    const buffer = await renderMarkdownPdf({
+      markdown: `| LEFTVALUE |
+| :--- |
+| left |
+
+| CENTERVALUE |
+| :---: |
+| center |
+
+| RIGHTVALUE |
+| ---: |
+| right |`,
+      title: 'Aligned tables',
+    })
+
+    const document = await getDocument({ data: new Uint8Array(buffer), disableWorker: true })
+      .promise
+    try {
+      const content = await (await document.getPage(1)).getTextContent()
+      const textX = (value: string) => {
+        const item = content.items.find(
+          (candidate) => 'str' in candidate && candidate.str === value
+        )
+        expect(item && 'transform' in item).toBe(true)
+        return item && 'transform' in item ? item.transform[4] : 0
+      }
+      const leftX = textX('LEFTVALUE')
+      const centerX = textX('CENTERVALUE')
+      const rightX = textX('RIGHTVALUE')
+
+      expect(centerX - leftX).toBeGreaterThan(100)
+      expect(rightX - centerX).toBeGreaterThan(100)
+    } finally {
+      await document.destroy()
+    }
+  })
+
   it('falls back instead of decoding an image above the pixel ceiling', async () => {
     const oversizedSvg = Buffer.from(
       '<svg xmlns="http://www.w3.org/2000/svg" width="20000" height="20000"><rect width="100%" height="100%" fill="red"/></svg>'

apps/sim/app/api/files/export/[id]/markdown-pdf.tsx

@@ -249,6 +249,8 @@ const styles = StyleSheet.create({
     minWidth: 0,
     padding: 5,
   },
+  tableCellCenter: { textAlign: 'center' },
+  tableCellRight: { textAlign: 'right' },
   tableHeader: { backgroundColor: '#f1f3f5', fontWeight: 700 },
   imageBlock: { marginBottom: 11 },
   image: { maxHeight: 430, objectFit: 'contain', width: '100%' },
@@ -451,10 +453,24 @@ function renderImage(
   key: string
 ): ReactNode {
   const src = stringAttr(node, 'src') ?? ''
+  const rawHref = stringAttr(node, 'href')
+  const href = rawHref ? safeLink(rawHref) : undefined
   const ref = extractEmbeddedFileRef(src)
   const image = ref ? images.get(markdownPdfImageKey(ref)) : undefined
   if (!image) {
     const alt = stringAttr(node, 'alt')
+    const fallback = (
+      <Text style={styles.imageFallback}>
+        {renderText(alt ? `Image: ${alt}` : 'Image unavailable', key)}
+      </Text>
+    )
+    if (href) {
+      return (
+        <Link key={key} src={href}>
+          {fallback}
+        </Link>
+      )
+    }
     return (
       <Text key={key} style={styles.imageFallback}>
         {renderText(alt ? `Image: ${alt}` : 'Image unavailable', key)}
@@ -466,6 +482,18 @@ function renderImage(
   const width = Number.isFinite(requestedWidth)
     ? Math.min(Math.max(requestedWidth, 1), PDF_TABLE_CONTENT_WIDTH)
     : undefined
+  const renderedImage = (
+    <View style={styles.imageBlock}>
+      <Image src={image} style={[styles.image, ...(width ? [{ width }] : [])]} />
+    </View>
+  )
+  if (href) {
+    return (
+      <Link key={key} src={href}>
+        {renderedImage}
+      </Link>
+    )
+  }
   return (
     <View key={key} style={styles.imageBlock}>
       <Image src={image} style={[styles.image, ...(width ? [{ width }] : [])]} />
@@ -515,19 +543,31 @@ function renderList(
 function renderTableRow(row: JSONContent, key: string, header: boolean): ReactNode {
   return (
     <View key={key} minPresenceAhead={header ? 16 : undefined} style={styles.tableRow}>
-      {(row.content ?? []).map((cell, index) => (
-        <Text
-          key={`${key}-${index}`}
-          style={[styles.tableCell, ...(header ? [styles.tableHeader] : [])]}
-        >
-          {(cell.content ?? []).map((child, childIndex) => (
-            <Text key={`${key}-${index}-${childIndex}`}>
-              {childIndex > 0 ? '\n' : null}
-              {renderInline(`${key}-${index}-${childIndex}`, child.content)}
-            </Text>
-          ))}
-        </Text>
-      ))}
+      {(row.content ?? []).map((cell, index) => {
+        const alignmentStyle =
+          cell.attrs?.align === 'center'
+            ? styles.tableCellCenter
+            : cell.attrs?.align === 'right'
+              ? styles.tableCellRight
+              : undefined
+        return (
+          <Text
+            key={`${key}-${index}`}
+            style={[
+              styles.tableCell,
+              ...(header ? [styles.tableHeader] : []),
+              ...(alignmentStyle ? [alignmentStyle] : []),
+            ]}
+          >
+            {(cell.content ?? []).map((child, childIndex) => (
+              <Text key={`${key}-${index}-${childIndex}`}>
+                {childIndex > 0 ? '\n' : null}
+                {renderInline(`${key}-${index}-${childIndex}`, child.content)}
+              </Text>
+            ))}
+          </Text>
+        )
+      })}
     </View>
   )
 }