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.
What I learned
I had to learn React to build this project, including managing state and using hooks.
What's next for Markdown Converter
Now that I have the text in html format, I want to write a partner block that pushes the html content to a WordPress post.
Built With
- airtable
- custom-block
- javascript
- marked
- react
Log in or sign up for Devpost to join the conversation.