Mastodon の投稿欄をブックマークレットでいじるコツ

Mastodon には react が使われているため、度々それ由来の罠にはまることがあります。投稿欄の文言を変更する操作なんかがそれです。そのままだと変更できたように見えて実はできていない状態になってしまいます。

{
	const tootArea = document.querySelector('.compose-form textarea');
	const replacedText = tootArea.value.replace(/$/, ' #ハッシュタグ'); // 例として末尾にタグ付け 
	Object.getOwnPropertyDescriptor(Object.getPrototypeOf(tootArea), 'value').set.call(tootArea, replacedText);
	tootArea.dispatchEvent(new Event('input', { bubbles: true }));
}

解決策としては上記のような書き方をすると変更できるようになります。

参考までに以下のブックマークレットを参照してください。
[?]絵文字の隙間詰め - Hatena::Let
[?]となっているのは Hatena::Let の不具合で絵文字が消え去った名残で、はじめは[🐘]と書かれていました。

本当は過去五年の間にやたらめったら生み出したブックマークレットやユーザスクリプトを紹介したいのですが、なんなら他の方が生み出した資産も紹介したいのですが、私含め皆様 v4.0 に向けた対応や動作確認や放置等の作業の真っ最中で、タイミングが悪いので、本日は取り急ぎ要件のみということで。