I created a bookmarklet to create the table of content for forum posts

Dev
9

Hi @RBoy, thank you for the feedback and the suggestion!

An editor plugin would be great, but it’d be a lot of effort to read the source code of discourse to understand the logic of handling emojis and defining the heading/anchor text and create a repository of the plugin.

A (seemingly) simple plugin like Spoiler Alert is a big repo and I don’t have a bandwidth to fully commit to the development. So, I hope Discourse can prioritize feature requests like Automatic Table of Contents generation and develop an native feature in the meantime :pray:

Below is the version with the bullet points. The spaces between <ul> and <ul> are rather too large, so I preferred the original unbulleted version.

Screenshot:

Screenshot 2023-07-10 at 7.49.59
Screenshot 2023-07-10 at 7.49.592322×800 132 KB

Code:

javascript:(function() {
	const copyForumTocToClipboard = function() {
		const urlMatch = window.location.href.match(/\/t\/[^\/]*\/\d+\/?(\d*)/);
		if (!urlMatch) return;

		const postIndex = 1;
		const anchors = document.querySelectorAll('#post_' + postIndex + ' div.cooked h6>a.anchor,h5>a.anchor,h4>a.anchor,h3>a.anchor,h2>a.anchor,h1>a.anchor');

		let toc = '';
		let currentLevel = 1;
		anchors.forEach(anchor => {
			newLevel = anchor.parentNode.nodeName[1];
			levelChange = newLevel - currentLevel;
			toc +=
				((levelChange >= 0) ? '<ul>'.repeat(levelChange) : '</ul>'.repeat(levelChange * -1)) +
				`<li><a href="${anchor.href}">${anchor.parentNode.textContent}</a></li>`;
			currentLevel = newLevel;
		});
		if (newLevel > 1) toc += '</ul>'.repeat(newLevel - 1);
		toc = '<details open><summary>Table of contents: </summary><ul>\n' + toc + '</ul></details>';

		navigator.clipboard.writeText(toc);
	};

	copyForumTocToClipboard();
})();
5 Likes