フォーラム投稿の目次を作成するブックマークレットを作成しました

開発
9

@RBoy様、フィードバックとご提案ありがとうございます！

エディタプラグインは素晴らしいですが、絵文字の処理や見出し/アンカーテキストの定義のロジックを理解するためにDiscourseのソースコードを読むのは大変な作業であり、プラグインのリポジトリを作成する必要があります。

Spoiler Alertのような（一見）シンプルなプラグインでも大きなリポジトリであり、開発に完全にコミットする帯域幅がありません。そのため、Discourseがhttps://meta.discourse.org/t/automatic-table-of-contents-generation/79626のような機能リクエストを優先し、その間にネイティブ機能を開発してくれることを願っています🙏

以下は箇条書きバージョンです。<ul>と</ul>の間のスペースが大きすぎるため、元の箇条書きなしバージョンを好みました。

スクリーンショット：

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

コード：

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