getCharPositionUnderCursor
cursor直下の文字が行先頭から数えて何番目に位置しているかを返す
2020-11-21 20:04:04 <span> から直接取得できないのか？
span[class^="c-"] だけ取り出して、それらの座標を比較すればいい
script.jsexport function getCharPositionUnderCursor(editor,cursor){
const cursorLine = editor.getElementsByClassName('cursor-line')[0];
// Scrapbox標準の入力補完候補が出ていると、それが行内のテキストに混じってしまうので、それを取り除いたテキストを取得する
const cursorLine_ = cursorLine.cloneNode(true);
const popup_menu = cursorLine_.getElementsByClassName('popup-menu')[0];
popup_menu?.remove();
const text = cursorLine_.textContent;
if (text === '' ) return undefined;
// 要素の左端の相対座標を取得する関数
const getLeftPosition = target => target.getBoundingClientRect().left - cursorLine.getBoundingClientRect().left;
// テキストから、それぞれの文字の座標を入れた配列を作る
const charPostions = text.match(/./ug).map((char,index) =>
[getLeftPosition(cursorLine.getElementsByClassName(`c-${index}`)[0]), index]);
// cursorに一番近い位置にある文字の通し番号を取得する
const charDistances = charPostions
.map(pos => [Math.abs(parseInt(cursor.style.left) - pos[0]), pos[1]])
.sort((a,b) => a[0] - b[0]);
const targetIndex = charDistances[0][1];
return targetIndex;
}