アウトライナー的なtabインデントについて

tabでインデント

shift+tabでアンインデント

可能な例

<ul>

<li>項目<ul>

<li>動かす項目

親項目の親項目がliなら動かせる

code:script.js

///編集領域でのtabキーの動作

function tabindent(e, obj){

selection= window.getSelection()

item = window.getSelection().focusNode.parentNode

startpoint = selection.anchorOffset

endpoint = selection.focusOffset

preitem = item.previousElementSibling

if(!(e.key === "Tab" && !(e.shiftKey))){ return; }

e.preventDefault();

e.stopPropagation();

if (item.nodeName == "LI" && preitem){

var newul = document.createElement("UL")

preitem.append(newul)

newul.append(item)

range = document.createRange();

range.setStart(item.firstChild, startpoint) // キャレットの開始位置を設定

range.setEnd(item.firstChild, endpoint)

selection.removeAllRanges()

selection.addRange(range);

}

}

不可能な例

<ul>

<li>項目

<li>動かす項目

親項目の親項目がliでない場合は動かせない

code:script.js

function tabunindent(e, obj){

selection= window.getSelection()

item = window.getSelection().focusNode.parentNode//li

startpoint = selection.anchorOffset

endpoint = selection.focusOffset

preitem = item.parentNode//ul

if(!(e.key === "Tab" && e.shiftKey)){ return; }

e.preventDefault();

e.stopPropagation();

if (item.nodeName == "LI" && preitem){

Hypreitem = preitem.parentNode//liこの兄弟要素次にliを移動させる。

if (!(Hypreitem.parentNode.nodeName == "UL")){return;}

Hypreitem.parentNode.insertBefore(item, Hypreitem.nextElementSibling);

range = document.createRange();

range.setStart(item.firstChild, startpoint) // キャレットの開始位置を設定

range.setEnd(item.firstChild, endpoint)

selection.removeAllRanges()

selection.addRange(range);

console.log(preitem.childNodes)

if (preitem.childNodes.length == 0){

preitem.remove();

}

}