scrapbox-cursor-position
scrapboxのcursorがいる行と列を返す関数
引数
cursor
: div.cursor
を入れる
cursorの縦棒
lines
: div.lines
を入れる
scrapboxの行が入っているやつ
返り値
cursorがある場合
{id, column}
id
:cursorがいる 行のid
column
cursorの右側の文字の位置
先頭を0とする
最後の文字のindex+1は改行文字を表す
ない場合
{error: 'The cursor doesn\'t has a focus.'}
getCursorInfo.jsexport function getCursorInfo({lines, cursor}) {
// cursorのいる行を取得する
const cursorLine = lines.getElementsByClassName('cursor-line')?.[0];
if (!cursorLine) return {error: 'The cursor doesn\'t has a focus.'};
// 行内の文字を<span>のまま取得する
const chars = [...cursorLine.querySelectorAll('span[class^="c-"]')];
// cursorのいる<span>を検索する
const cursorLeft = Math.round(cursor.getBoundingClientRect().left);
const targetChar = chars.find(char => {
const {left, right} = char.getBoundingClientRect();
return Math.round(left) <= cursorLeft && cursorLeft < Math.round(right);});
return {
id: cursorLine.id,
column: targetChar?
parseInt(targetChar.className.replace(/c-(\d+)/,'$1')) :
chars.length, // 改行文字として、最後の文字より一つ後ろの番号を返す
};
}