Converting HTML to Richtext JSON

When working with the Storyblok Richtext field, directly adding raw HTML does not work. Hence, it's necessary to convert HTML content to a format compatible with the Storyblok Richtext field. This can be achieved as follows:

1. HTML to Markdown Conversion: First, the HTML data needs to be converted to Markdown format. Various libraries, such as turndown, facilitate this conversion process effectively.
2. Utilize Storyblok Markdown Richtext Converter: Once the content is available in Markdown format, the storyblok-markdown-richtext library can be utilized. This tool aids in transforming Markdown data into the JSON format expected by the Storyblok Richtext field.

Following these steps ensures seamless integration of our HTML content with the Storyblok RichText editor, enabling efficient content management and editing capabilities.

        
      import TurndownService from 'turndown';
import { markdownToRichtext } from 'storyblok-markdown-richtext';

// Sample HTML content
const htmlContent = `
    <h1>Hello, World!</h1>
    <p>This is a <strong>sample</strong> HTML content.</p>
`;

// Step 1: Convert HTML to Markdown
const turndownService = new TurndownService();
const markdownContent = turndownService.turndown(htmlContent);

// Step 2: Convert Markdown to Storyblok RichText JSON format
const richtextJson = markdownToRichtext(markdownContent);

console.log(richtextJson);