Skip to content

Instantly share code, notes, and snippets.

@ryanguill
Last active December 13, 2020 08:57
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ryanguill/f82ce1a356c36d9258415168f3da9d27 to your computer and use it in GitHub Desktop.
Save ryanguill/f82ce1a356c36d9258415168f3da9d27 to your computer and use it in GitHub Desktop.

Roam Capture Bookmarklet

Building on the work of the +Roam bookmarklet, here is a version that allows you to capture text from webpages and articles in a few different ways:

  • It will copy the text automatically. A red "copied!" pill will show in the top right of the page to let you know it worked.
  • If you do not select anything it will give you only a markdown link to the page
  • If you select something it will give you the selected text in italics with a markdown link to the page
  • If you select more than one thing (firefox only I believe) it will give you a markdown link to the page with the selected text as child blocks nested underneath.

To try it, drag this link to your bookmarks and then select text on a page and then click the bookmark.

Roam Capture

Would love to hear any thoughts about how to improve this even futher. Contact me on twitter or fork this code here on gist.github.com

Ryan Guill @ryanguill

Here is the actual code if you're interested - you only need this if you are going to try to make changes.

javascript: (
	function () {
		let sel = document.getSelection();
		let selText = "";
		const reference = `[${document.title}](${location.href}) #[[Roam Capture]]`;
		const selectedRanges = [];

		if (sel.rangeCount > 1) {
			selText = reference + "\n";
			//more than one thing selected
			for (let i = 0; i < sel.rangeCount; i++) {
				selText += `\t__${sel.getRangeAt(i).toString().trim()}__ \n`;
				selectedRanges.push(sel.getRangeAt(i));
			}
		} else {
			selText = sel.toString().trim();

			//0 or 1 thing selected
			if (selText.length) {
				selectedRanges.push(sel.getRangeAt(0));
				selText = `__${selText}__ via `;
			}
			selText += reference;
		}


		const ta = document.createElement("textarea")
		ta.textContent = `${selText}`;

		document.body.appendChild(ta);
		const docSel = document.getSelection();
		docSel.removeAllRanges();
		ta.select();
		document.execCommand("copy");
		docSel.removeAllRanges();
		document.body.removeChild(ta);

		//reselect the selected text
		let newSel = document.getSelection();
		for (let i = 0; i < selectedRanges.length; i++) {
			newSel.addRange(selectedRanges[i]);
		}

		let toaster = document.createElement("div");
		toaster.innerHTML = `Copied!`;
		toaster.style.position = "fixed";
		toaster.style.display = "block";
		toaster.style.right = "10px";
		toaster.style.top = "10px";
		toaster.style.backgroundColor = "red";
		toaster.style.color = "#FFFFFF";
		toaster.style.padding = "5px";
		toaster.style.borderRadius = "5px";
		toaster.style.zIndex = "99999";
		document.body.appendChild(toaster);

		setTimeout(function() {
			toaster.style.opacity = 0;
			toaster.style.transition = "opacity 2s";
		}, 2000);

		setTimeout(function() {
			document.body.removeChild(toaster);
		}, 4000);
	}
)();
@tombarys
Copy link

Hi, Ryan, is possible that the code stopped working? Or am I doing something wrong? Thank you!! Tomáš

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment