roam-bookmarklet.md

Roam Snippet 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.
• If you select things, your selection will be restored after copying.

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";
		document.body.appendChild(toaster);

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

		setTimeout(function() {
			document.body.removeChild(toaster);
		}, 4000);
	}
)();