scrapbox-cursor-position

new version: scrapbox-cursor-position-2

hr

scrapboxのcursorがいる行と列を返す関数

ScrapVimなどで使う

引数

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.'}

開発ログ：scrapboxのcursorの位置を計算する

getCursorInfo.js

export 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, // 改行文字として、最後の文字より一つ後ろの番号を返す

};

}

#2020-12-24 04:22:51

#2020-11-21 23:17:45