モバイル版Scrapboxでキャレットを外
すUserScriptの草稿
/villagepump/モバイル版Scrapboxでキャレットを外してみたいでやっていた研究の成果
hide.jsconst textarea = document.getElementById('text-input');
// from https://github.com/takker99/scrapbox-userscript-std/blob/58ede69911a63600acb39745dc7fdec3fcf8cf6d/browser/dom/caret.ts#L50
const reactKey = Object.keys(textarea)
.find((key) => key.startsWith("__reactFiber"));
const input = textarea[reactKey].return.return.stateNode;
const cursor = input._stores.find((obj) => obj.hide);
cursor.hide();DevToolsでキャレットが外れる動作を探っていたらCursorというオブジェクトに行き当たった
hide() を叩けばキャレットが外れる当然内部オブジェクトなのでアクセスはできない
呼ばれている箇所からどうにかアクセスできないかと探っていたらDesktopTextInputというオブジェクトを見付けた
DesktopということはMobileもあるかと探したらあった
そもそもキャレットが外れないのはMobile側のblur処理で
Cursor.hide() を叩かないためよく見たらReactのComponentだったので/takker/scrapbox-userscript-stdにあったReactのオブジェクトにアクセスする方法を試した所あっさり取れた
感謝
更によく見たらCursorオブジェクト(これが目的)をsubscribeする処理があって、subscribeを覗いたらComponentの中に入れ込んでたので取ってみたらこれもあっさり取れた
さらっと書いたけどだいぶ苦労した
外からどうにかイベントを流し込めないか→上に書いてる通り無理
window.scrapbox からどうにかアクセスできないか→無理どこかに内部オブジェクトへの参照生えてないか→あるわけない
webpackの入口がないか→無理
実装した