Scrapboxの選択範囲を検知する
Scrapboxの選択範囲が表示されているかどうかを判定する
UserScript Eventsでは実装されていないので、自前でなんとかしなければならない
方法
scrapbox-userscript-stdの
takeSelection() を使う Selection が BaseStore から継承している addChangeListener() に函数を登録すると、選択範囲が変更されるたびにその函数が呼び出されるようになる使用例
右下の通信ステータスに選択範囲を表示する
test.tsimport {
Selection,
takeSelection,
useStatusBar,
} from "../scrapbox-userscript-std/dom.ts";
const selection = takeSelection();
const { render } = useStatusBar();
selection.addChangeListener(
({ store }) => render(
{ type: "text", text: (store as Selection).getSelectedText() }
)
);(非推奨) MutationObserverを使う 2020-11-17
ScrapVimではこれを使ったらしい
2020-12-26 07:56:42 削除も検知できるようにした
.selections の有無でなんとかなる？これで検知できる
script.jsconst observer = new MutationObserver(mutations => {
mutations.flatMap(mutation => [...mutation.addedNodes])
.filter(element =>element.classList.contains('selections'))
.forEach(selections => console.log('Added: %o',selections));
mutations.flatMap(mutation => [...mutation.removedNodes])
.filter(element =>element.classList.contains('selections'))
.forEach(selections => console.log('Removed: %o',selections));
});
observer.observe(document.getElementById('editor'), { childList: true });#2022-05-11 10:01:31
#2020-12-26 07:56:52