Markdown: Copy code to clipboard

We use DT with markdown for a documentation which also includes a lot of passwords. Selecting those passwords for copy & paste can be a bit challenging as they may include special characters etc. So I was looking for an easy way to create “password fields”, which can be clicked and their content then get’s copied to the clipboard, like in most popular password applications. Could not find way to do this or did I miss something?

I ended up in writing a small javascript code:

// Create dummy element with a value, which can be selected and copied. 

function copyToClipboard(text) {
    var dummy = document.createElement("textarea");
    document.body.appendChild(dummy);
    dummy.value = text;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

// Traverse document and append "onclick" to each <cpy> element.

window.onload = function()
{
	pwds = document.querySelectorAll("cpy");
	pwds.forEach(pwd => {
		// Styling for cpy fields.
		pwd.style.fontFamily = "Menlo";
		pwd.style.background = "#fdd";
		pwd.style.border = "1px solid #800";
		pwd.style.borderRadius = "4px";
		pwd.style.paddingLeft = ".25em";
		pwd.style.paddingRight = ".25em";

		// Adding click event to copy its content to clipboard.
		pwd.addEventListener('click', () => {
			copyToClipboard(pwd.innerText)
			document.execCommand("copy");
			pwd.style.background = "#000";
			pwd.style.color = "#f00";
			pwd.style.borderColor = "#f00";

			// Change styling back after a moment.
			setTimeout(function(){
				pwd.style.background = "#fdd";
				pwd.style.color = "#000";
				pwd.style.border = "1px solid #800";
				},250)
		})
	})
}

In my markdown file I have to include this script at the beginning and use tags around these texts:

<script type="text/javascript" src="x-devonthink-item://703B6ACA-…"></script>

# Some Example
Username: <cpy>John Doe</cpy>, password: <cpy>123</cpy>

I hope this helps others, too. And maybe it can get integrated into DT in the future.

User names and passwords in a cleartext file? I see more problems with this approach then it could possibly solve.

2 Likes

Well, you’re not forced to use it for usernames and passwords. Anyone else’s workflow may vary.

Apart from the fact that it is just plain wrong to put passwords in plaintext and also in the clipboard, I see some issues with your code.

  • execCommand is deprecated (Document.execCommand() - Web APIs | MDN)
  • execCommand depends on the document being in designMode (same reference)
  • since select() can handle password elements, why use a textarea?
  • styling HTML elements in JavaScript is bad style, that’s what CSS is for
  • querySelectorAll grabs all cpy elements from the DOM. But cpy is not a HTML element. No one except you can know what cpy even is in this context.
  • copyToClipboard creates a visible element which is completely useless and probably causes layout reflows.
  • The whole process is far too complicated: var promise = navigator.clipboard.writeText(pwd.innerText); would have been largely sufficient, no need for bogus HTML elements to be introduced etc.

Thanks for your comments. I’m not a coder – last attempts somewhere in the mid-80s… so this is much appreciated! I put this together from pieces I found in the www.

But a few words for explanation though: I know about the styling by javascript concerns and the custom element “cpy”. I wanted an easy way to add such functionality to a markdown document by inserting just a one-liner at the beginning, which should include everything, possibly. And an easy way to create that fields while typing, that’s why i’ve chosen a short custom element name. This way it’s a minimal disruption in my daily workflow, not only for crendentials, but also for configuration paths, parameter names, phrases and so on.

So I’m open for improvment, if there’s a more elegant approach.