scrapbox-line-clicker

/icons/hr.icon

mouse clickをscriptから発生させて、scrapbox edtor内の行頭 or 行末にcursorを移動させるAPI

リンク、code blockの先頭、画像、動画、tableの先頭の内部をクリックしてもcursorを移動できないので、行内へのjumpは出来ないようにしている

使用できる関数一覧

行頭に飛ぶ

jumpHeadChar()

行末に飛ぶ

jumpLastChar()

最初の非空白文字に飛ぶ

jumpHeadCharWithoutBlank()

最後の非空白文字に飛ぶ

jumpLastCharWithoutBlank()

scroll処理をomitした

関数を実行する前に、目的の行が画面上に表示されるようにscroll処理を行う必要が生じるようになった

行idではなく行のDOMを渡す

なにか変化するのかどうかはわからない

実装したいもの

任意の文字に飛ぶ関数

import

code:script.js

import {line} from '/api/code/takker/scrapbox-line-info-2/script.js';

行頭行末移動

code:script.js

export function jumpHeadChar({lineDOM, shiftKey = false, ctrlKey = false, altKey = false} = {}) {

const {left, top, height} = lineDOM.getBoundingClientRect();

execClick({element: lineDOM, X: left, Y: top + height - height / (2 * line(lineDOM).breakNum + 2), shiftKey, ctrlKey, altKey});

}

export function jumpLastChar({lineDOM, shiftKey = false, ctrlKey = false, altKey = false} = {}) {

const {right, top, height} = textDOM.getBoundingClientRect();

execClick({element: textDOM, X: right, Y: top + height - height / (2 * line(lineDOM).breakNum + 2), shiftKey, ctrlKey, altKey});

}

非空白文字を除いた場所に移動

code:script.js

export function jumpHeadCharWithoutBlank({

lineDOM, shiftKey = false, ctrlKey = false, altKey = false} = {}) {

const {left, top, height} = line(lineDOM).headNonBlankCharDOM.getBoundingClientRect();

execClick({element: textDOM, X: left, Y: top + height / 2, shiftKey, ctrlKey, altKey});

}

export function jumpLastCharWithoutBlank({

lineDOM, shiftKey = false, ctrlKey = false, altKey = false} = {}) {

const {right, top, height} = line(lineDOM).lastNonBlankCharDOM.getBoundingClientRect();

execClick({element: textDOM, X: right, Y: top + height / 2, shiftKey, ctrlKey, altKey});

}

code:script.js

function execClick({element, X, Y, shiftKey, ctrlKey, altKey}) {

const mouseOptions = {

button: 0,

clientX: X,

clientY: Y,

bubbles: true,

cancelable: true,

shiftKey: shiftKey,

ctrlKey: ctrlKey,

altKey: altKey,

view: window,

};

element.dispatchEvent(new MouseEvent("mousedown", mouseOptions));

element.dispatchEvent(new MouseEvent("mouseup", mouseOptions));

element.dispatchEvent(new MouseEvent("click", mouseOptions));

}

/icons/hr.icon

テストコード

code:test.js

import {installCDN} from '/api/code/villagepump/install-CDN/script.js'

import {

jumpHeadChar,

jumpLastChar,

jumpHeadCharWithoutBlank,

jumpLastCharWithoutBlank,

} from '/api/code/takker/scrapbox-line-clicker/script.js';

import {scrapboxDOM} from '/api/code/takker/scrapbox-dom-accessor/script.js';

(async () => {

await installCDN({

id: 'mousetrap-for-scrapbox',

src: '//cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.5/mousetrap.min.js',

});

const moustrapOnEdit = new Mousetrap(scrapboxDOM.editor);

for (let i = 0; i < 10; i++) {

e.stopPropagation();

e.preventDefault();

getLine(i).scrollIntoView({block: 'center'});

jumpHeadChar({lineDOM: getLine(i)})

});

e.stopPropagation();

e.preventDefault();

getLine(lines.children.length - 1 - i).scrollIntoView({block: 'center'});

jumpLastChar({lineDOM: getLine(lines.children.length - 1 - i)})

});

e.stopPropagation();

e.preventDefault();

getLine(i).scrollIntoView({block: 'center'});

jumpHeadCharWithoutBlank({lineDOM: getLine(i)})

});

e.stopPropagation();

e.preventDefault();

getLine(lines.children.length - 1 - i).scrollIntoView({block: 'center'});

jumpLastCharWithoutBlank({lineDOM: getLine(lines.children.length - 1 - i)})

});

}

function _log(msg, ...objects){

if (objects.length > 0) {

return;

}

}

function getLine(number) {

}

_log('ready to start');

})();