This commit is contained in:
Vanessa 2022-12-09 11:52:57 +08:00
parent 5ec6eea6ad
commit ceb1523071

View file

@ -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">&ZeroWidthSpace;</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">&ZeroWidthSpace;</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">&ZeroWidthSpace;</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">&ZeroWidthSpace;</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);