generated at
scrapbox-cursor-position-3
scrapboxのcursorの縦棒の位置を取得する関数
ScrapVimなどで使う
返り値
ts
type Return = { left?: HTMLSpanElement; // cursorの左側のDOM right?: HTMLSpanElement; // cursorの右側のDOM line: HTMLDivElement; // cursorのいる行 index?: number; // cursorの縦棒がいる位置 };
cursorの縦棒の位置が特定できなかったら line 以外 undefined となる
縦棒の左側のDOMを取得するようにしていたので、行頭に縦棒が来たときエラーになる不具合があった

2021-05-08
15:32:44 コピペしやすいように相対パスに変えた
2020-12-29
10:22:18 cursorが見えないときでも座標を取得できるようにした
Element.getBoundingClientRect()ではなく、.cursorのinline styleに指定されている top left を使う
この値は#editorElement.getBoundingClientRect() top left からの相対座標になっている

dependencies
script.js
import {char as c} from '../scrapbox-char-info/script.js'; import {getCharBorder} from '../scrapbox-position/script.js'; import {scrapboxDOM} from '../scrapbox-dom-accessor/script.js'; export const cursor = () => { const origin = scrapboxDOM.editor.getBoundingClientRect(); const x = origin.left + parseInt(scrapboxDOM.cursor.style.left); const y = origin.top + parseInt(scrapboxDOM.cursor.style.top);
2020-12-29
10:22:18 cursorが見えないときでも座標を取得できるようにした
Element.getBoundingClientRect()ではなく、.cursorのinline styleに指定されている top left を使う
この値は#editorElement.getBoundingClientRect() top left からの相対座標になっている
script.js
const {left, right, line, message} = getCharBorder({x, y}); if (message) return {line, message}; const index = right ? c(right).index : c(left).index + 1;
right === undefined のときは常に行末である
折返し地点においたcursorは常に先頭に表示されるので、折り返し地点の末尾である可能性はない

script.js
return {left, right, line, index}; }

テストコードtakker
test.js
import {cursor} from '../scrapbox-cursor-position-3/script.js'; document.addEventListener('keydown', () => { const c = cursor(); if (!c.left && ! c.right) throw Error('[test:scrapbox-cursor-position-3] Both char DOMs are undefined.'); console.log('[test:scrapbox-cursor-position-3] %o', c); });

#2021-05-08 15:32:39
#2021-01-01 10:25:17
#2020-12-29 06:27:32