I fixed the "Save draft" Button on dev.to - No Accidental Publishing Anymore 😇

Today I accidentally published an article AGAIN, because "publish" and "safe draft" are so close together.

I even opened a discussion, which got no responses so far (which I think existed somewhere else or I am the only one with this issue...).

Cover image by Francisco De Legarreta C. on Unsplash

How to fix it?

I use Greasemonkey and Tampermonkey, depending on the browser.
The fix script is rather simple:

• observe the DOM using MutationObserver in
• use body as observe target, in case the user navigates to the edit route from dashboard or preview route
• "wait" until the editor-actions are added as childList to the article-form
• if they're added, get the second button ("save draft" button) and update it's margin-left style

The script looks like the following:

// ==UserScript==
// @name     dev.to save button space
// @version  1
// @grant    none
// ==/UserScript==
const BUTTON_STYLE = '200px'
const target = document.querySelector('body')


const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {

    if (mutation.type === 'childList' && mutation.target.id === 'article-form') {
      const actions = mutation.addedNodes[0]

      if (actions && actions.id === 'editor-actions') {
        Array.from(actions.children)[1].style.marginLeft = BUTTON_STYLE
      }
    }
  }
}

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback)

// Start observing the target node for configured mutations
observer.observe(target, { attributes: true, childList: true, subtree: true })

Also available as gist: https://gist.github.com/jankapunkt/a442d10a2d3cda905843ca35645007d8

Feel free to comment or optimize in any way :-)

About me 👋

I regularly publish articles about Meteor.js and JavaScript here on dev.to. I also recently co-hosted the weekly Meteor.js Community Podcast, which covers the latest in Meteor.js and the community.

You can also find me (and contact me) on GitHub, Twitter/X and LinkedIn.

If you like what you read and want to support me, you can sponsor me on GitHub, send me a tip via PayPal or sponsor a book from my Amazon wishlist.