Home
Head's Up: I'm in the middle of upgrading my site. Most things are in place, but there are something missing and/or broken including image alt text. Please bear with me while I'm getting things fixed.

Turn On Spellcheck For Your Preview Website with designMode

Introduction

I use Neovim 1 to write and edit my posts. Unfortunately, I did something with my configuration that broke spellcheck. After writing a draft I'd been copying and pasting the text into another editor to look for errors. It's tedious, but it works.

Then, I heard a fantastic tip on the ShopTalk Show 2 podcast. You can turn on something called "Design Mode" in a browser to make the entire page editable. This has the nice side effect of activating spellcheck for all the text on the page.

You can turn design mode on manually by opening a browser's developer console and entering :

javascript 
document.designMode = "on"

Full Time Preview

I'm using that code as the starting point for turning on spellcheck full time for the local version of my site. That's the one I use to preview everything before publishing. The way I'm doing that is by adding this snippet of code to a <script> tag inside the <head> element of my site templates :

javascript 
document.addEventListener('DOMContentLoaded', () => {
  if (window.location.hostname === 'localhost') {
      const currentToggle = localStorage.getItem('designModeToggle') 
        ? localStorage.getItem('designModeToggle') 
        : 'on'
      document.designMode = currentToggle
      const designModeToggle = document.createElement('button')
      designModeToggle.innerHTML = `Design Mode: ${currentToggle}`
      designModeToggle.addEventListener('click', (event) => {
        const newMode = document.designMode === 'on' ? 'off' : 'on'
        localStorage.setItem('designModeToggle', newMode)
        document.designMode = newMode
        event.target.innerHTML = `Design Mode: ${newMode}`
      }) 
      document.body.insertBefore(
          designModeToggle,
          document.body.firstChild
      )
  }
})

The software I'm using for my site provides a preview at what's called a "localhost" address. It's a draft copy of my website that's only accessible from my computer. "localhost" addresses look a lot like regular addresses, but they often have an extra number in them.

For example, the address for this post on my site is :

alanwsmith.com/en/2fhbmvvw

The localhost version of the page simply replaces the "alanwsmith.com" portion of the address with "localhost : 1989". It looks like this :

localhost:1989/en/2fhbmvvw/

If you click on that link, your browser will try to open the page. But, since you're super unlikely to be running the preview version of my site on your computer, you'll almost certainly get an error 3 .

The Mechanics

The way the snippet works is by looking at a page's address to see if it's a "localhost" address or not. If it is , it runs the [TODO: Code shorthand span ] line and adds a button to the top of the page to toggle it on and off. If not, it doesn't make any changes.

That means I don't have to set up anything to remove the code from the site when publishing it. I'd do that if I was worried about making the most optimized site possible. But, leaving that little snippet of code is fine even though it'll never do anything on the actual site. I'll probably address that at some point, but for now, I'd rather spend time making more content.

The code snippet uses [TODO: Code shorthand span ] to keep track of if you've turned it off or on across multiple pages or refreshes

Footnotes And References