選択範囲に似ているリンクを入力補完するUserScript
選択範囲中の文字列に近いリンクを表示してリンクの入力補完を行うUserScript
https://github.com/takker99/scrapbox-select-suggestion
機能
ページ中の文字を選択すると、選択した文字に近いリンクが表示される
defaultで5個まで表示される。
一番下に、表示されなかったリンクの個数がでる
https://gyazo.com/7f054fd41e9c006c9f6c9cd2b0b6f905
表示されたリンクを押すと、そのリンクで選択範囲が置き換わる
https://gyazo.com/f6e9f2523064121350fdb36e84e60b18
右クリックメニューやCtrl+クリックで、リンク先ページを新しいタブで開いたり、リンクをコピーしたり、ドラッグアンドドロップでリンクを挿入できたりもする
https://gyazo.com/fae419ef2172c791cc0cd7694b7d799c
注意
コードブロック中、ページタイトル、テーブル記法のタイトルでは起動しない
複数行選択しているときも起動しない
使い方
簡単な方法
ここを押して生成されたコードを、/help-jp/自分のページのscript.jsに貼り付ける
やっていること
このコードをbundleしているだけ
カスタマイズ
table:css変数
default
--select-suggest-bg #111
--select-suggest-font-family "Open Sans", Helvetica, Arial, "Hiragino Sans", sans-serif
--select-suggest-text-color #eee
--select-suggest-border-color #eee
--select-suggest-selected-bg #222
--select-suggest-information-text-color #aaa
setup()にoptionを渡して制御できる
設定方法はSetupInitの型定義を参照
操作函数はawait setup()の戻り値に入っている
これを使って、各自でショートカットなどを実装する
キーボードショートカットの設定例
このサンプルコードをbuildする
takker.iconの設定例はfor-any-project#630ba6401280f00000b0c7f2を参照
動機
これと同じ不満を持っていた
[]を書いてからリンクする語を書くのではなく,書いた語を選択してリンクする場合はpopupが出ないので難しい?/yosider/yosider.icon
どこから引用したか書き忘れてた
井戸端に置いたページにソースがある
で、最近(2022-08中旬)「選択中に入力補完が表示されればいいのでは?」と思いついた
codingに集中すると7時間使ってしまうので、一旦アイデアとして温めた状態にしていた
2022-08-28体調が悪く、なんとなくこれを実装してみたくなった
体調が悪くて他のことができそうになかった
2023-01-26 08:20:10 えっこれ作ったの8月ってマジ?takker.icon
もっと最近に作ったscriptだと思ってた
時間の流れを速く感じる
光陰矢のごとし
選択範囲に対してwindowを表示するtestで試した結果、もうreleaseできる段階までcodeを組めたので、本番コードを書いて実装してしまうことにした
バグ
bracket入力補完時にproject絞り込みパネルを押すと補完が中断されてしまう
https://gyazo.com/a8619e1029ee5f0f26a570f4c59ecaa3
projectの絞り込み操作自体は成功しているようだな
おそらくcursorからfocusが外れた瞬間に、補完が終了したと誤判定されている
dispatch({ type: "confirming" })と同等の命令を発行してからボタン操作すべきか?
いや、ボタンを押した時点で補完が終了してしまう。後の祭りだ。
なーんか検索アルゴリズムがおかしいような
例が見つかったら書く
userscript-std
https://gyazo.com/809c166b40a49d57ca4aa01dc40f293f
おいおい、選択経由かbracket経由かでも検索結果が著しく変わっているぞ
https://gyazo.com/5e8d2c93afbeee7c725ae22f486c42c5
多分同じ検索語句を検出できていない
debugで語句を確認する必要がある
さすがにこれはScrapbox Drinkupまでに直したい
✅bracket内の文字列取得処理がバグっている@2023-01-31
userscript -std
https://gyazo.com/94cd74bfeef8ee36a13a09a1d9fd14f7
検索アルゴリズム周りの単体テストを作れば解決しそう
順不同検索のアルゴリズムのミスが原因
でもこれ、まともに計算しようとすると$ O(N^N)くらいになりそうなんだよなあ……
Myersのbit-parallel法による順不同AND検索のalgorithm検討
今の実装でも2重ループしてるし、気にしなくてもよさそう
https://github.com/takker99/scrapbox-select-suggestion/blob/main/search.ts#L82-L97
⬜️状態遷移再設計 (scrapbox-select-suggestion)
⬜️キーを打つと、補完の有効化と無効化が1キーずつ繰り返される
実装したいこと
文字入力補完のスクショも撮る
popupmenuが表示されているときでも補完を有効にする
simple.tsに実装する
popup menuの(先頭|末尾)候補を選択しているときに次候補へ移動しようとしたら、このuserscriptの補完候補へ移動できるようにする
✅ショートカットキーの導入
選択・確定操作を外部から操作できるようにする
ショートカットキーの設定はユーザーに任せる
ddc.vim形式
Promiseを使って吐き出す
workerを使う
モチベ
debounceではカクツキを低減できない
2022-09-18 07:56:03 requestAnimationFrame()でなんとかなった
外部projectのリンクも補完できるようになる
ソース取得先を変えればいいだけ
external-completionの代わりとして使いたい
実装
検索結果のやりとり
やってもいいんじゃない?
中断処理なしなら、補完候補を選んでいる途中にアイテムが変わって誤クリックする確率が減る
たぶん500ms以内で計算し終わるなら、中断処理なしでも動く
https://github.com/takker99/scrapbox-select-suggestion/blob/main/storage.ts#L25-L32
export不要
📝検索処理のrefactoring (scrapbox-select-suggestion)
⬜ソース更新時は、新しい検索結果を検索が終了するまでUIに反映させない (scrapbox-select-suggestion)
検索の進捗状況を出す
動機
すべての候補を検索し終えたのか、まだ検索していない候補があるのかがわかりづらい
文字選択してからしばらく待つ必要がある
UI
補完windowの下辺にバーを表示する
厚みは1px程度でいい
divで組み立てればいいだろう
目立たないように表示する
project絞り込みパネル
project絞り込みパネルで有効になっているprojectから先に検索する
project絞り込みパネルに表示するprojectの順番を、より正確にマッチしたリンクが多い順に並び替える
検索した語句をよく話題にしているprojectを一目で確認できる
現状だと、そのprojectを有効にしないと、どんなリンクにマッチしたのかがわからない
有効にしても、編集距離が遠く、あまり関係のないリンクがとマッチしていることもある
アイコン補完 (scrapbox-select-suggestion)
補完ソースのデータ形式
現在
{...; projects: string[]; }[]
ヒットしたリンクの統計データをprojectごとに計算するのが難しい
例:編集距離$ dでマッチしたリンク数を各projectで計算する
検索と同時にカウントすれば、あまり難しくないかも
案
Map<string/* project name */, Link[]>
projectごとに絞り込む処理が高速になる
検索するリンク数が増える
重複しているリンクを、project数回検索しなければならなくなる
大したoverheadではないだろうtakker.icon
重複しているリンク数なんて、たかが知れている
ddc-sourceの概念を導入する?
project一つ一つを、独立したsourceとみなす
選択範囲に似ているリンクを入力補完するUserScriptの開発ログ兼作業ログ
code:mod.tsx
export * from "https://raw.githubusercontent.com/takker99/scrapbox-select-suggestion/0.7.1/mod.tsx";
#scrapbox-select-suggestion
#2023-03-21 21:12:45
#2023-03-20 18:16:19
#2023-03-18 21:33:19
#2023-03-17 23:01:43
#2023-02-26 07:33:28
#2023-02-15 11:23:43
#2023-02-11 07:18:00
#2023-01-31 05:58:09
#2023-01-26 08:40:58
#2023-01-07 06:38:18
#2023-01-05 12:38:00
#2022-12-28 08:02:42
#2022-12-08 07:39:57
#2022-11-18 16:15:16
#2022-11-13 06:04:33
#2022-11-12 18:04:34
#2022-11-11 21:05:57
#2022-11-03 18:21:46
#2022-11-03 02:56:44
#2022-10-31 22:45:23
#2022-10-27 11:46:02
#2022-10-18 08:50:16
#2022-10-14 12:52:04
#2022-10-09 06:29:21
#2022-10-06 08:48:12
#2022-09-24 17:31:19
#2022-09-18 07:54:26
#2022-09-14 15:20:32
#2022-09-06 18:00:37
#2022-09-03 06:55:33
#2022-08-29 18:07:21
#2022-08-29 00:07:10