Turn On Spellcheck For Your Preview Website with designMode

Introduction

I use Neovim1 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 Show2 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 {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} tag inside the {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} 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 error3.

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 {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} , it runs the document.designMode 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.

Endnotes

  • The code snippet uses localStorage to keep track of if you've turned it off or on across multiple pages or refreshes

Footnotes

  • 1
    Neovim
    ↩

    The "hyperextensible Vim-based text editor". I use VS Code and Sublime Text a lot, but Neovim is my daily driver.

  • 2
    The ShopTalk Show Podcast
    ↩

    As of April, 2024 there's over six-hundred episodes of excellent discussion about building websites from Dave Rupert and Chris Coyier. It's one of the first podcasts I remember listening too and it's still one of my favorites. They've also got a wonderful Discord server you can join through Patreon

  • It's possible you're running software that'll make something show up at localhost:1989/en/2fhbmvvw/. It'll be whatever your computer is set up to show though compared to mine which shows a preview of this page

References

  • MDN: designMode

    The quick MDN docs page for designMode. There's not much to it other than "on" and "off". Details about older stuff are there though if you need them

  • The ShopTalk Show Patreon Discord

    On the "putting my money where my mouth is" side of things, I like ShopTalk show enough to support them on Patreon. It's $10/month and also provides access to the show's Discord server which is both a fun place to hang out and also full of helpful folks who really know their stuff about web tech

  • ChrisCoyier.net

    Chris' personal website. I love the card style layout. I can neither confirm nor deny that I'm totally in the process of stealing it

  • DaveRupert.com

    Dave's personal website. Dave reads {# type: standard #} {%- import "includes/theme-macros.neojinja" as theme -%} {% for span in span.content.spans %} {{- theme.output_spans(site, page_id, span) -}} {% endfor %} . Be sure to check out the bookshelf