Merge pull request framer#359 from framer/airtable-rich-text

Airtable: improve markdown parsing

Author: madebyisaacr

.yarn/cache/marked-npm-16.1.1-b649d2bcae-9f4d2d8f86.zip

@@ -14,6 +14,7 @@
     },
     "dependencies": {
         "framer-plugin": "^3.5.2",
+        "marked": "^16.1.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "valibot": "^1.1.0"

plugins/airtable/package.json

@@ -1,3 +1,4 @@
+import { marked } from "marked"
 import type { PossibleField } from "./fields"
 
 /**
@@ -20,40 +21,14 @@ export function assert(condition: boolean, message?: string): asserts condition
  * Converts markdown-style rich text to HTML
  */
 export function richTextToHTML(cellValue: string): string {
-    let html = cellValue
-        .replace(/^###### (.*)$/gim, "<h6>$1</h6>") // H6
-        .replace(/^##### (.*)$/gim, "<h5>$1</h5>") // H5
-        .replace(/^#### (.*)$/gim, "<h4>$1</h4>") // H4
-        .replace(/^### (.*)$/gim, "<h3>$1</h3>") // H3
-        .replace(/^## (.*)$/gim, "<h2>$1</h2>") // H2
-        .replace(/^# (.*)$/gim, "<h1>$1</h1>") // H1
-        .replace(/^> (.*)$/gim, "<blockquote>$1</blockquote>") // Blockquote
-        .replace(/\*\*(.*?)\*\*/gim, "<strong>$1</strong>") // Bold
-        .replace(/\*(.*?)\*/gim, "<em>$1</em>") // Italic
-        .replace(/~~(.*?)~~/gim, "<del>$1</del>") // Strikethrough
-        .replace(/`([^`]+)`/gim, "<code>$1</code>") // Inline code
-        .replace(/```([\s\S]*?)```/gim, "<pre><code>$1</code></pre>") // Code block
-        .replace(/\[(.*?)\]\((.*?)\)/gim, '<a href="$2">$1</a>') // Links
-
-    // Handle unordered and ordered lists separately
-    html = html.replace(/^\s*[-*]\s+(.*)$/gim, "<ul><li>$1</li></ul>")
-    html = html.replace(/^\s*\d+\.\s+(.*)$/gim, "<ol><li>$1</li></ol>")
-
-    // Combine consecutive <ul> or <ol> items
-    html = html.replace(/<\/ul>\s*<ul>/gim, "").replace(/<\/ol>\s*<ol>/gim, "")
-
-    // Ensure paragraphs are correctly wrapped
-    html = html
-        .split("\n\n") // Assume two newlines is a new paragraph
-        .map(paragraph => {
-            if (!/^<.*>.*<\/.*>$/.test(paragraph)) {
-                return `<p>${paragraph}</p>`
-            }
-            return paragraph
-        })
-        .join("")
-
-    return html
+    return marked.parse(cellValue, {
+        // This is needed for proper typing.
+        async: false,
+        // This adds support for tables and code blocks with language tags (```javascript ... ```).
+        gfm: true,
+        // This ensures single-line line breaks are preserved.
+        breaks: true,
+    })
 }
 
 // Allowed file types for attachments

plugins/airtable/src/utils.ts

@@ -3169,6 +3169,7 @@ __metadata:
     "@types/react": "npm:^18.3.23"
     "@types/react-dom": "npm:^18.3.7"
     framer-plugin: "npm:^3.5.2"
+    marked: "npm:^16.1.1"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
     valibot: "npm:^1.1.0"
@@ -5414,6 +5415,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"marked@npm:^16.1.1":
+  version: 16.1.1
+  resolution: "marked@npm:16.1.1"
+  bin:
+    marked: bin/marked.js
+  checksum: 10/9f4d2d8f862e1d874f03f1b8614fbf859ae788b4a1b4174be83a65c8ea5ecabf0c991c455dcb6b650e7106fb5b65a94865b9de45667bb2471ca2272e1798971d
+  languageName: node
+  linkType: hard
+
 "material-colors@npm:^1.2.1":
   version: 1.2.6
   resolution: "material-colors@npm:1.2.6"