getCharPositionUnderCursor

cursor直下の文字が行先頭から数えて何番目に位置しているかを返す

2020-11-21 20:04:04 <span>から直接取得できないのか？

span[class^="c-"]だけ取り出して、それらの座標を比較すればいい

code:script.js

export 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) - pos0), pos1])

.sort((a,b) => a0 - b0);

const targetIndex = charDistances01;

return targetIndex;

}