diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts index a92e10cde..453ede0b9 100644 --- a/app/src/protyle/render/av/openMenuPanel.ts +++ b/app/src/protyle/render/av/openMenuPanel.ts @@ -307,7 +307,13 @@ export const openMenuPanel = (options: { return; } if (targetElement.getAttribute("data-type") === "setRelationCell") { - + if (isTop) { + targetElement.before(sourceElement); + } else { + targetElement.after(sourceElement); + } + targetElement.classList.remove("dragover__bottom", "dragover__top"); + setRelationCell(options.protyle, options.blockElement as HTMLElement, sourceElement.parentElement); return; } @@ -873,7 +879,7 @@ export const openMenuPanel = (options: { event.stopPropagation(); break; } else if (type === "setRelationCell") { - setRelationCell(options.protyle, data, options.blockElement as HTMLElement, target); + setRelationCell(options.protyle, options.blockElement as HTMLElement, target); event.preventDefault(); event.stopPropagation(); break; diff --git a/app/src/protyle/render/av/relation.ts b/app/src/protyle/render/av/relation.ts index 84293027a..ca1675ea0 100644 --- a/app/src/protyle/render/av/relation.ts +++ b/app/src/protyle/render/av/relation.ts @@ -255,7 +255,7 @@ export const getRelationHTML = (data: IAV, cellElements?: HTMLElement[]) => { } } -export const setRelationCell = (protyle: IProtyle, data: IAV, nodeElement: HTMLElement, target: HTMLElement) => { +export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, target: HTMLElement) => { const menuElement = hasClosestByClassName(target, "b3-menu__items"); if (!menuElement) { return @@ -274,31 +274,34 @@ export const setRelationCell = (protyle: IProtyle, data: IAV, nodeElement: HTMLE newValue.contents.push(item.textContent.trim()); } }) - const targetId = target.getAttribute("data-id") - const separatorElement = menuElement.querySelector(".b3-menu__separator"); - if (target.getAttribute("draggable")) { - if (!separatorElement.nextElementSibling.getAttribute("data-id")) { - separatorElement.nextElementSibling.remove(); - } - const removeIndex = newValue.blockIDs.indexOf(targetId); - newValue.blockIDs.splice(removeIndex, 1); - newValue.contents.splice(removeIndex, 1); - separatorElement.after(target); - target.outerHTML = genSelectItemHTML("unselect", targetId, target.querySelector(".b3-menu__label").textContent); - if (!separatorElement.previousElementSibling) { - separatorElement.insertAdjacentHTML("beforebegin", genSelectItemHTML("empty")); - } - } else { - if (!separatorElement.previousElementSibling.getAttribute("data-id")) { - separatorElement.previousElementSibling.remove(); - } - newValue.blockIDs.push(targetId); - newValue.contents.push(target.textContent.trim()); - separatorElement.before(target); - target.outerHTML = genSelectItemHTML("selected", targetId, target.querySelector(".b3-menu__label").textContent); - if (!separatorElement.nextElementSibling) { - separatorElement.insertAdjacentHTML("afterend", genSelectItemHTML("empty")); + if (target.classList.contains("b3-menu__item")) { + const targetId = target.getAttribute("data-id") + const separatorElement = menuElement.querySelector(".b3-menu__separator"); + if (target.getAttribute("draggable")) { + if (!separatorElement.nextElementSibling.getAttribute("data-id")) { + separatorElement.nextElementSibling.remove(); + } + const removeIndex = newValue.blockIDs.indexOf(targetId); + newValue.blockIDs.splice(removeIndex, 1); + newValue.contents.splice(removeIndex, 1); + separatorElement.after(target); + target.outerHTML = genSelectItemHTML("unselect", targetId, target.querySelector(".b3-menu__label").textContent); + if (!separatorElement.previousElementSibling) { + separatorElement.insertAdjacentHTML("beforebegin", genSelectItemHTML("empty")); + } + } else { + if (!separatorElement.previousElementSibling.getAttribute("data-id")) { + separatorElement.previousElementSibling.remove(); + } + newValue.blockIDs.push(targetId); + newValue.contents.push(target.textContent.trim()); + separatorElement.before(target); + target.outerHTML = genSelectItemHTML("selected", targetId, target.querySelector(".b3-menu__label").textContent); + if (!separatorElement.nextElementSibling) { + separatorElement.insertAdjacentHTML("afterend", genSelectItemHTML("empty")); + } } } + updateCellsValue(protyle, nodeElement, newValue); };