Textboxのアウトライナー機能
option + 上下で項目を上下移動させる
https://gyazo.com/a5046b56b4b2577471cb4c992b9ff550
code:scipt.js
//編集領域でのoption+上下の処理
function optionUpDonw(e,obj){
if(!((e.key === "ArrowUp" || e.key === "ArrowDown" )&& e.altKey)){ return; }
e.preventDefault();
e.stopPropagation();
selection= window.getSelection()
textnode = selection.focusNode
parent = selection.focusNode.parentNode
console.log(parent)
len = selection.focusOffset
if (e.key === "ArrowUp" && parent.previousElementSibling){
parent.previousElementSibling.before(parent)
}
if (e.key === "ArrowDown" && parent.nextElementSibling){
parent.nextElementSibling.after(parent)
}
range = document.createRange();
range.setStart(textnode,len) // キャレットの開始位置を設定
range.setEnd(textnode,len)
selection.removeAllRanges()
selection.addRange(range);
}
ref.
enterkeyで新規項目の作成
code:script.js
//編集領域でのエンターキーの動作(Liを新規作成する)
function enterNewLine(e,obj){
if(!(e.key === "Enter" && !(e.shiftKey) && !(e.metaKey))){ return; }
e.preventDefault();
e.stopPropagation();
selection= window.getSelection()
item = window.getSelection().focusNode.parentNode//Liなはず。
if (item.nodeName != "LI"){return;}
const cl = item.children
var hasUl = (function () {
for (i=0;i < cl.length;i++){
if (cli.nodeName == "UL"){return cli} }
return false
})();
newLine = document.createElement("li")
newLine.innerHTML ="<br>"
if(hasUl == false || (hasUl && item.classList.contains("closed"))){
//兄弟項目に新規項目
item.after(newLine)
}
if(hasUl && !(item.classList.contains("closed"))){
//子要素に新規項目
hasUl.prepend(newLine)
}
range = document.createRange();
range.setStart(newLine, 0) // キャレットの開始位置を設定
range.setEnd(newLine, 0)
selection.removeAllRanges()
selection.addRange(range);
}