Markdown to Html Converter

Markdown to Html Converter

Inspiration

I wanted to build a WordPress website with posts managed from an Airtable base. Much of the content was in individual fields that were easy to put into HTML format, but I also wanted to be able to publish free-form content. I decided that Markdown was the best file format for storing and editing this free-form content

Prior to the availability of Custom Blocks, I experimented with different workflows that involved external editors and previewers, but all the workflows were too complicated.

I wanted a workflow where I could edit Markdown, convert to html automatically, and preview the result without having to switch apps or remembering to save or convert.

What it does

This block allows a user to edit text in markdown, preview it as html, and automatically save the resulting html in a different field. The block can apply custom css to the preview, so I can get a better feel for how the final post will look like.

How I built it

I built this using Airtable's Custom Blocks SDK, starting with the "Hello World" example. I used the marked library for the actual conversion of Markdown to html.

Challenges I ran into

An Airtable base could have multiple places where this block could be useful. At first I wasn't sure how to deal with this situation. Ultimately, I decided that the most straightforward implementation was to require a new instance of the block for each pair of Markdown to Html fields. Each block would handle only its own pair of fields.

I also knew that I wanted to convert only one record at a time, but I wasn't sure which technique to use to determine the active record (a button push, the currently selected record, or manually selecting a record in the block). After some testing, I decided that the best method was to only do the conversion when the markdown field was actively being edited.