カーソル行をUserScriptで取得するテスト

カーソル行の文字列をリアルタイムで取得する

実装

window

windowの位置

cursor行の文字列

document.getElementsByClassName('cursor-line')[0].textContent.trim()

で取得できる

2020-8-22 17:14 出来たー！

code:script.js

class suggestWindow{

constructor() {

this.box = document.createElement('div');

this.box.classList.add('form-group');

this.box.style.position = 'absolute';

this.container = document.createElement('div');

this.container.classList.add('dropdown');

this.box.appendChild(this.container);

this.items = document.createElement('ul');

this.items.classList.add('dropdown-menu');

this.items.style.whiteSpace='nowrap'; // 文字列を折り返さない

this.container.appendChild(this.items);

this.editor = document.getElementById('editor');

this.editor.appendChild(this.box);

}

// 入力補完window を開く

open() {

this.container.classList.add('open');

}

close() {

this.container.classList.remove('open');

}

// 入力候補に表示するアイテムを更新する

updateItems(items) {

const newList = document.createElement('ul');

newList.classList.add('dropdown-menu');

newList.style.whiteSpace='nowrap';

for(const item of items) {

let listItem = document.createElement('li');

listItem.classList.add('dropdown-item');

listItem.innerHTML = item;

newList.appendChild(listItem)

}

this.items.replaceWith(newList);

this.items = newList; // これを書かないと置き換えが完了しない

}

}

const suggestion=new suggestWindow();

suggestion.editor.addEventListener('keyup',() => {

let text= 'No line is focused.'

if(suggestion.editor.getElementsByClassName('cursor-line').length!=0){

if(!noIndentLine) {

} else {

text = noIndentLine.textContent;

}

}

if(!/\[\//.test(text)) {

suggestion.close();

return;

}

suggestion.open();

const cursor = document.getElementById('text-input');

// 入力補完windowの位置を更新する

});