Scrapboxの選択範囲を検知する

Scrapboxの選択範囲が表示されているかどうかを判定する

UserScript Eventsでは実装されていないので、自前でなんとかしなければならない

方法

scrapbox-userscript-stdのtakeSelection()を使う

takeSelection()はassets/index.js、つまりscrapbox内部で使われているScrapboxの選択範囲を管理しているクラスSelectionを引っこ抜く邪悪な函数

SelectionがBaseStoreから継承しているaddChangeListener()に函数を登録すると、選択範囲が変更されるたびにその函数が呼び出されるようになる

使用例

右下の通信ステータスに選択範囲を表示する

code:test.ts

import {

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ではこれを使ったらしい

/icons/hr.icon

2020-12-26 07:56:42 削除も検知できるようにした

.selectionsの有無でなんとかなる？

これで検知できる

code:script.js

const 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 });