モバイル版Scrapboxでキャレットを外してみたい
from 2022/03/20
試してみる
jsconst textInput = document.getElementById("text-input");
textInput.addEventListener("keydown", (e) => {
if (e.key !== "[" || !e.ctrlKey) return;
e.preventDefault();
e.stopPropagation();
textInput.blur();
});
あ！できた
なんだ。めちゃくちゃ簡単じゃないか
明日自分のUserScriptに入れておこうっと
作ろうと思って検証していたら既に作られていた件について
使わせてもらいます
これはEscキーを押すとって感じか
物理キーボード向けかー、自分でも考えないと
これだとだめだ
文字入力はできなくなるけど、caretは依然swipeで動かせてしまう
caretそのものはいったん別のページに飛ばないと消えない
スワイプでカーソル動く部分はswipeCursorで検索すると出てくる
別にこれを読みたかったわけではないのだけど、迷走しているな
あ、カーソルの動かし方知りたかったんだ
37633行あたりか
カーソルオブジェクトのhide()呼べばいいのは分かったけどアクセス方法がわからん
アクセスした所でだめということを理解した
javascripthide() {
v.When.touch_device && (this.focusTextarea = !1),
this.visible = !1,
this.emitChange();
}該当箇所がこうなっているので中の人にどうにかしてもらうしかなさそう
いやこれは関係ないのか、モバイル版だと到達していない気が
MobileTextInputのonBlurがこうなってて
javascriptonBlur(t) {
if (t.preventDefault(),
t.stopPropagation(),
ce("onBlur"),
this.keepFocus)
return ce("onBlur: force focus back"),
void this.textarea.focus();
this.state.focusTextarea && !(0,
ae.isModalOpen)() && (Y.default.Cursor.hidePopupMenu(),
Y.default.Cursor.blur(),
this.setState({
focusTextarea: !1
}))
}keepFocusで引っかかってる
カーソルオブジェクトにさえアクセスできればclear()叩くかvisible以下を再現することで優勝できる
延々と調べてるけどなんもわからん、Scrapboxの中核らしきオブジェクトは見付けたけど当然ながら外には露出してないし
お疲れ様です
う～んだめかあ
__webpack_require__(22852) したら手に入るんですが、当然これは index.js が更新されたら変わるだろうからだめだろうし…嘘だ、これデバッガで止めてたから見えてただけだ
React Componentにhide()が生えているのなら、/takker/開発コンソールからreactの内部情報を得ればワンチャンいけるかも
これComponentじゃない気がする
MobileTextInputはComponentなのでこれで優勝できる気がしてきた
よく見たらこちらで呼ばれているのはhideじゃなくてblurだ、つらい
ん、行けた？
カーソルオブジェクト手に入れたぞ
MobileTextInputがCursorオブジェクトをsubscribeしていたのでそこから抜き出した
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();これでキャレット消せる
後はこれをUserScriptに仕立て上げればいい
どんなUIにしたらいいのかわからんので誰か頼んだ
気が向いたらやるかも
しっかし明日使えなくなるかもしれないハックに全力を注ぎ込みすぎた
余談だけどこの邪悪な方法を使えばカーソルや選択範囲を動かし放題
選択範囲も取れる
scrapbox-userscript-stdの邪悪なハック方法でやれちゃったのか
ページの領域外をタップしたら発動してほしい
スマホだと狭いかも？
今そんな感じで仕込んでみた所
script.jsfunction hideCaret() {
const 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();
}
document.getElementById("app-container").addEventListener("touchstart", (e) => {
// ページの外をタッチするとキャレットを外す
if (!e.target.closest(".page")) {
hideCaret();
}
});これを自己責任でUserScriptに書き込んでみてください
変なことはしてないはずだけどいつ動かなくなるか分からない
scrapbox-userscript-stdに変なやつ入れるのやめたほうがいいかな
一度乗り切ってはいるけど
どんどんやろう
把握してメンテできるのならいいのではと思ってる
(UserScriptもっと書きやすくなってくれーという気持ち(他力本願))
VivaldiのDevToolsとPixel 4aのChromeで動作確認してます
おお～消えた！
Porter for Scrapboxが上手く行くのはそもそもデスクトップ版のふりしてるからか
そういうことが