This commit is contained in:
parent
5ec6eea6ad
commit
ceb1523071
1 changed files with 43 additions and 18 deletions
|
@ -6,8 +6,9 @@ import {preventScroll} from "../scroll/preventScroll";
|
|||
import {scrollCenter} from "../../util/highlightById";
|
||||
import {focusByWbr} from "../util/selection";
|
||||
|
||||
export const moveToUp = (protyle:IProtyle, nodeElement:HTMLElement, range:Range) => {
|
||||
export const moveToUp = (protyle: IProtyle, nodeElement: HTMLElement, range: Range) => {
|
||||
let previousElement: Element;
|
||||
let oldListHTML = "";
|
||||
let sourceElements = Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select"));
|
||||
if (sourceElements.length === 0) {
|
||||
let sourceElement = getTopAloneElement(nodeElement);
|
||||
|
@ -27,8 +28,14 @@ export const moveToUp = (protyle:IProtyle, nodeElement:HTMLElement, range:Range
|
|||
sourceElements[0].parentElement.previousElementSibling?.previousElementSibling?.classList.contains("protyle-action")) {
|
||||
if (sourceElements[0].parentElement.parentElement.previousElementSibling?.classList.contains("li")) {
|
||||
previousElement = sourceElements[0].parentElement.parentElement.previousElementSibling.querySelector(".list");
|
||||
}
|
||||
if (!previousElement) {
|
||||
range.insertNode(document.createElement("wbr"));
|
||||
oldListHTML = sourceElements[0].parentElement.parentElement.parentElement.outerHTML;
|
||||
if (!previousElement) {
|
||||
const newId = Lute.NewNodeID();
|
||||
sourceElements[0].parentElement.parentElement.previousElementSibling.lastElementChild.insertAdjacentHTML("beforebegin", `<div data-subtype="${sourceElements[0].getAttribute("data-subtype")}" data-node-id="${newId}" data-type="NodeList" class="list" updated="${newId.split("-")[0]}"><div id="moveTempLi"></div><div class="protyle-attr" contenteditable="false">​</div></div>`);
|
||||
previousElement = sourceElements[0].parentElement.parentElement.previousElementSibling.querySelector(".list")
|
||||
}
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
@ -36,16 +43,20 @@ export const moveToUp = (protyle:IProtyle, nodeElement:HTMLElement, range:Range
|
|||
sourceElements[0].previousElementSibling?.previousElementSibling?.classList.contains("protyle-action")) {
|
||||
if (sourceElements[0].parentElement.previousElementSibling?.classList.contains("li")) {
|
||||
previousElement = sourceElements[0].parentElement.previousElementSibling.querySelector(".list");
|
||||
}
|
||||
if (!previousElement) {
|
||||
range.insertNode(document.createElement("wbr"));
|
||||
oldListHTML = sourceElements[0].parentElement.parentElement.outerHTML;
|
||||
if (!previousElement) {
|
||||
const newId = Lute.NewNodeID();
|
||||
sourceElements[0].parentElement.previousElementSibling.lastElementChild.insertAdjacentHTML("beforebegin", `<div data-subtype="${sourceElements[0].getAttribute("data-subtype")}" data-node-id="${newId}" data-type="NodeList" class="list" updated="${newId.split("-")[0]}"><div id="moveTempLi"></div><div class="protyle-attr" contenteditable="false">​</div></div>`);
|
||||
previousElement = sourceElements[0].parentElement.previousElementSibling.querySelector(".list")
|
||||
}
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (previousElement) {
|
||||
previousElement = previousElement.lastElementChild.previousElementSibling;
|
||||
const sourceParentElement = sourceElements[0].classList.contains("list") ? sourceElements[0] : sourceElements[0].parentElement;
|
||||
range.insertNode(document.createElement("wbr"));
|
||||
const html = previousElement.parentElement.parentElement.parentElement.outerHTML;
|
||||
sourceElements.reverse().forEach(item => {
|
||||
if (item.classList.contains("list")) {
|
||||
previousElement.after(item.firstElementChild);
|
||||
|
@ -53,6 +64,10 @@ export const moveToUp = (protyle:IProtyle, nodeElement:HTMLElement, range:Range
|
|||
previousElement.after(item);
|
||||
}
|
||||
});
|
||||
if (previousElement.id === "moveTempLi") {
|
||||
previousElement = previousElement.nextElementSibling;
|
||||
previousElement.previousElementSibling.remove();
|
||||
}
|
||||
if (sourceParentElement.childElementCount === 1) {
|
||||
sourceParentElement.remove();
|
||||
} else if (sourceParentElement.getAttribute("data-subtype") === "o" && sourceParentElement.classList.contains("list")) {
|
||||
|
@ -61,8 +76,7 @@ export const moveToUp = (protyle:IProtyle, nodeElement:HTMLElement, range:Range
|
|||
if (previousElement.getAttribute("data-subtype") === "o") {
|
||||
updateListOrder(previousElement.parentElement);
|
||||
}
|
||||
|
||||
updateTransaction(protyle, previousElement.parentElement.parentElement.parentElement.getAttribute("data-node-id"), previousElement.parentElement.parentElement.parentElement.outerHTML, html);
|
||||
updateTransaction(protyle, previousElement.parentElement.parentElement.parentElement.getAttribute("data-node-id"), previousElement.parentElement.parentElement.parentElement.outerHTML, oldListHTML);
|
||||
preventScroll(protyle);
|
||||
scrollCenter(protyle);
|
||||
focusByWbr(previousElement.parentElement, range);
|
||||
|
@ -95,8 +109,9 @@ export const moveToUp = (protyle:IProtyle, nodeElement:HTMLElement, range:Range
|
|||
scrollCenter(protyle);
|
||||
};
|
||||
|
||||
export const moveToDown = (protyle:IProtyle, nodeElement:HTMLElement, range:Range) => {
|
||||
export const moveToDown = (protyle: IProtyle, nodeElement: HTMLElement, range: Range) => {
|
||||
let nextElement: Element;
|
||||
let oldListHTML = "";
|
||||
let sourceElements = Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select"));
|
||||
if (sourceElements.length === 0) {
|
||||
let sourceElement = getTopAloneElement(nodeElement);
|
||||
|
@ -116,24 +131,34 @@ export const moveToDown = (protyle:IProtyle, nodeElement:HTMLElement, range:Ran
|
|||
sourceElements[0].parentElement.parentElement?.classList.contains("li")) {
|
||||
if (sourceElements[0].parentElement.parentElement.nextElementSibling?.classList.contains("li")) {
|
||||
nextElement = sourceElements[0].parentElement.parentElement.nextElementSibling.querySelector(".list > .li");
|
||||
}
|
||||
if (!nextElement) {
|
||||
return;
|
||||
range.insertNode(document.createElement("wbr"));
|
||||
oldListHTML = sourceElements[0].parentElement.parentElement.parentElement.outerHTML;
|
||||
if (!nextElement) {
|
||||
const newId = Lute.NewNodeID();
|
||||
sourceElements[0].parentElement.parentElement.nextElementSibling.lastElementChild.insertAdjacentHTML("beforebegin", `<div data-subtype="${sourceElements[0].getAttribute("data-subtype")}" data-node-id="${newId}" data-type="NodeList" class="list" updated="${newId.split("-")[0]}"><div class="protyle-attr" contenteditable="false">​</div></div>`);
|
||||
nextElement = sourceElements[0].parentElement.parentElement.nextElementSibling.querySelector(".list > div")
|
||||
}
|
||||
} else {
|
||||
return
|
||||
}
|
||||
}
|
||||
if (type === "NodeList" && sourceElements[sourceElements.length - 1].nextElementSibling.classList.contains("protyle-attr") &&
|
||||
sourceElements[0].parentElement?.classList.contains("li")) {
|
||||
if (sourceElements[0].parentElement.nextElementSibling?.classList.contains("li")) {
|
||||
nextElement = sourceElements[0].parentElement.nextElementSibling.querySelector(".list > .li");
|
||||
}
|
||||
if (!nextElement) {
|
||||
range.insertNode(document.createElement("wbr"));
|
||||
oldListHTML = sourceElements[0].parentElement.parentElement.outerHTML;
|
||||
if (!nextElement) {
|
||||
const newId = Lute.NewNodeID();
|
||||
sourceElements[0].parentElement.nextElementSibling.lastElementChild.insertAdjacentHTML("beforebegin", `<div data-subtype="${sourceElements[0].getAttribute("data-subtype")}" data-node-id="${newId}" data-type="NodeList" class="list" updated="${newId.split("-")[0]}"><div class="protyle-attr" contenteditable="false">​</div></div>`);
|
||||
nextElement = sourceElements[0].parentElement.nextElementSibling.querySelector(".list > div");
|
||||
}
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (nextElement) {
|
||||
const sourceParentElement = sourceElements[0].classList.contains("list") ? sourceElements[0] : sourceElements[0].parentElement;
|
||||
range.insertNode(document.createElement("wbr"));
|
||||
const html = nextElement.parentElement.parentElement.parentElement.outerHTML;
|
||||
sourceElements.forEach(item => {
|
||||
if (item.classList.contains("list")) {
|
||||
nextElement.before(item.firstElementChild);
|
||||
|
@ -149,7 +174,7 @@ export const moveToDown = (protyle:IProtyle, nodeElement:HTMLElement, range:Ran
|
|||
if (nextElement.getAttribute("data-subtype") === "o") {
|
||||
updateListOrder(nextElement.parentElement, 1);
|
||||
}
|
||||
updateTransaction(protyle, nextElement.parentElement.parentElement.parentElement.getAttribute("data-node-id"), nextElement.parentElement.parentElement.parentElement.outerHTML, html);
|
||||
updateTransaction(protyle, nextElement.parentElement.parentElement.parentElement.getAttribute("data-node-id"), nextElement.parentElement.parentElement.parentElement.outerHTML, oldListHTML);
|
||||
preventScroll(protyle);
|
||||
scrollCenter(protyle);
|
||||
focusByWbr(nextElement.parentElement, range);
|
||||
|
|
Loading…
Add table
Reference in a new issue