DEV Community

Cover image for I fixed the "Save draft" Button on dev.to - No Accidental Publishing Anymore 😇
Jan Küster
Jan Küster

Posted on

4 1 1 1 1

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 })
Enter fullscreen mode Exit fullscreen mode

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.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay