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:
// @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.
