Creating a spell checker plugin for Gatsby

#react #javascript #html #gatsby

I occasionally write blogs at my website, lenvingonsalves.me, but with a lot of spelling mistakes. Since I use a code editor to write most of my content, using Grammarly is not an option.

Being the developer that I am, I couldn't help but follow the first law of our religion

If a task takes 5 minutes to do manually, and takes 5 hrs to automate, then you must automate it.

So, from there I thought of creating a Gatsby plugin, that would find out spelling mistakes in the content I write, and then show it to me. This would also provide a very good learning experience for me, as I have never created a Gatsby plugin that dealt with remark & markdown.

How to use it

For now, I haven't published the plugin in npm, because it still needs a lot of work. If you are curious, you can clone the plugin from the Github repository here

After that, navigate to the root of the project, install the dependencies using yarn or npm. Once you are done installing, link it. Here are the steps for yarn users

yarn && yarn link

Then navigate to your gatsby project's directory and run

yarn link gatsby-remark-hunspell

Then add gatsby-remark-hunspell to the gatsby config.js, it should be in the gatsby-transformer-remark object.

    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          `gatsby-remark-hunspell`,
           ]
         }
      }

Then start your development server, the errors in the markdown will be shown in the following way.

Implementation

I was able to put up a first version of the plugin. To be honest, I have taken a lot of inspiration from Gatsby's official plugins. The plugin does the following -

Traverses the nodes in Markdown AST generated by gatsby-transformer-remark
If the node is of type paragraph, list, heading, or blockquote, then find its child node which contains the text.
From the text, remove all special characters (including ', which is not good) and then split it into an Array using space as the delimiter
Here, we will be passing each word to the Nodejs library called nodehun which is a wrapper around Hunspell (It is a spellchecker used in a lot of other applications)
If there are suggestions we add them to the suggestion array.
Then we create a node in the markdown AST with all the suggestions for the paragraph, blockquote, etc

This is only a brief explanation, you can check out the source code here, which is having comments to help you understand.

Drawbacks

There are a few drawbacks, and here are the improvements that will be made -

On projects with too many markdown files, it runs out of memory, I need help to understand and fix this.
Use a better regular expression to remove special characters from the words before passing them to Hunspell.
Need to work on the style such that it doesn't look like Grammarly
Need to provide an option to run this plugin only in development or staging environments.

Thanks for taking the time to read through my experience of creating a gatsby plugin