Rich text formatting (Airtable to Softr)

Ask the community
21

I’m building my own app with Cursor ai and it was a hassle, but not too hard solving this without airtable’s help. Please if you can, pass this to the softer dev team.

Here’s a comprehensive guide for developers working with Airtable rich text fields:

Troubleshooting Airtable Rich Text Line Breaks

Issue

When fetching rich text content from Airtable, line breaks may not display properly in your frontend application.

Diagnosis Steps

  • First, inspect the raw data from Airtable:

// Add this logging to your fetch response

console.log(‘Raw field content:’, JSON.stringify(yourAirtableField, null, 2));

  • Check if line breaks appear as:

  • \n (most common)

  • \r\n (Windows-style)

  • HTML tags like
    or

Solutions

Solution 1: CSS Approach (Recommended)

.rich-text-content {

white-space: pre-line;

}

Solution 2: String Replacement

If the CSS approach doesn’t work, the line breaks might need manual conversion:

function formatAirtableText(text) {

return text

.replace(/\r\n/g, ‘\n’) // Normalize Windows line endings

.replace(/\n/g, ‘
’); // Convert to HTML breaks

}

// Usage with dangerouslySetInnerHTML

Solution 3: For Rich Text Fields with HTML

If Airtable is returning HTML-formatted content:

// Ensure your content-security-policy allows inline styles if needed

Common Pitfalls

  • Content Type: Verify you’re using the correct field type in Airtable (Long Text vs Rich Text)

  • API Response: Some Airtable clients might need explicit configuration to return rich text content

  • Sanitization: If you’re sanitizing the content, ensure your sanitizer preserves line breaks

Testing

Create a test record in Airtable with:

  • Single line breaks

  • Multiple consecutive line breaks

  • Mixed content (text, line breaks, and formatting)

This will help verify your solution handles all cases correctly.

Additional Notes

  • If using TypeScript, you might need to handle null/undefined cases

  • Consider accessibility implications when formatting text

  • Test across different browsers as whitespace handling can vary

Feel free to reach out if you need clarification on any of these steps!

22

I build an app that properly fixes this on the import side. Could you please pass this fix to the Softr dev’s? Shouldn’t be too difficult.

Airtable Markdown Processing Guide

Overview

Airtable’s markdown implementation has some peculiarities that require special handling, particularly around bold text formatting. This guide explains the issues and our solutions.

Key Issues

1. Space Handling in Bold Text

Airtable allows spaces to be included within bold markers (**), which standard markdown processors don’t handle well. For example:

Standard input from Airtable:
"Het doel van **Healthy Habits: Text Necks **is..."

Standard markdown processing result:
"Het doel van **Healthy Habits: Text Necks**is..."  // Space is lost!

Our processed result:
"Het doel van **Healthy Habits: Text Necks** is..."  // Space is preserved

2. Solution Implementation

We use a preprocessing step before passing the content to ReactMarkdown. Here’s the complete implementation:

const processAirtableMarkdown = (content: string | unknown): string => {
  if (!content) return '';
  if (content === 'false') return '';
  
  if (typeof content === 'string') {
    // Move spaces that are inside bold markers to outside
    return content.replace(/\*\*(.*?)\*\*/g, (_, p1) => {
      // Split content into text and trailing spaces
      const [, text, spaces] = p1.match(/^(.*?)([\s]*)$/);
      return `**${text}**${spaces}`;
    });
  }
  
  if (typeof content === 'object' && content !== null) {
    try {
      return JSON.stringify(content);
    } catch {
      return '';
    }
  }
  
  return String(content);
};

3. How It Works

  1. Pattern Matching:

    • /\*\*(.*?)\*\*/g matches any content between ** markers
    • The .*? is non-greedy to handle multiple bold sections in one line

  2. Space Extraction:

    • /^(.*?)([\s]*)$/ splits the content into:
      • text: The actual content without trailing spaces
      • spaces: Any trailing spaces that were inside the markers

  3. Reconstruction:

    • Rebuilds the string with spaces moved outside the bold markers
    • Preserves the original spacing while fixing the markdown format

Usage Example

import ReactMarkdown from 'react-markdown';

const MarkdownContent: React.FC<{ content: string }> = ({ content }) => {
  const processedContent = processAirtableMarkdown(content);
  
  return <ReactMarkdown>{processedContent}</ReactMarkdown>;
};

Common Patterns from Airtable

// Airtable Input vs Processed Output

// Input from Airtable:
**Bold text **with space
**Multiple **bold **sections**
**Text with space ** in between**

// After processing:
**Bold text** with space
**Multiple** **bold** **sections**
**Text with space** **in between**

Notes

  • This solution maintains compatibility with other markdown features (lists, links, etc.)
  • The preprocessing step is lightweight and runs only once per content render
  • The solution is resilient to various edge cases in Airtable’s content formatting
23

Any update on this?
Looks like a solution was proposed? I I don’t think it’s implemented Yet.

Airtable Rick Text is still showing up as plain text in Softr.