diff --git a/app/src/protyle/render/av/cell.ts b/app/src/protyle/render/av/cell.ts index 31f517740..3c6d9c390 100644 --- a/app/src/protyle/render/av/cell.ts +++ b/app/src/protyle/render/av/cell.ts @@ -993,10 +993,10 @@ export const renderCell = (cellValue: IAVCellValue, rowIndex = 0, showIcon = tru if (item && item.block) { const rowID = cellValue.relation.blockIDs[index]; if (item?.isDetached) { - text += `${Lute.EscapeHTMLStr(item.block.content || window.siyuan.languages.untitled)}`; + text += `${Lute.EscapeHTMLStr(item.block.content || window.siyuan.languages.untitled)}`; } else { // data-block-id 用于更新 emoji - text += `${unicode2Emoji(item.block.icon || window.siyuan.storage[Constants.LOCAL_IMAGES].file)}${Lute.EscapeHTMLStr(item.block.content || window.siyuan.languages.untitled)}`; + text += `${unicode2Emoji(item.block.icon || window.siyuan.storage[Constants.LOCAL_IMAGES].file)}${Lute.EscapeHTMLStr(item.block.content || window.siyuan.languages.untitled)}`; } } }); diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts index dda4883f0..64602a49d 100644 --- a/app/src/protyle/render/av/openMenuPanel.ts +++ b/app/src/protyle/render/av/openMenuPanel.ts @@ -417,7 +417,7 @@ export const openMenuPanel = (options: { const contents: IAVCellValue[] = []; targetElement.parentElement.querySelectorAll(".fn__grab").forEach(item => { const dateElement = item.nextElementSibling as HTMLElement; - blockIDs.push(dateElement.dataset.id); + blockIDs.push(dateElement.parentElement.dataset.rowId); contents.push({ isDetached: !dateElement.style.color, type: "block", diff --git a/app/src/protyle/render/av/relation.ts b/app/src/protyle/render/av/relation.ts index 6f69e6802..401df9380 100644 --- a/app/src/protyle/render/av/relation.ts +++ b/app/src/protyle/render/av/relation.ts @@ -214,25 +214,33 @@ export const toggleUpdateRelationBtn = (menuItemsElement: HTMLElement, avId: str } }; -const genSelectItemHTML = (type: "selected" | "empty" | "unselect", id?: string, isDetached?: boolean, text?: string, className?: string) => { - if (type === "selected") { +const genSelectItemHTML = (options: { + type: "selected" | "empty" | "unselect", + id?: string, + isDetached?: boolean, + text?: string, + className?: string, + rowId?: string, + newName?: string +}) => { + if (options.type === "selected") { return ` -${text} +${options.text} `; } - if (type === "empty") { - if (id) { + if (options.type === "empty") { + if (options.newName) { return ``; } return ``; } - if (type == "unselect") { - return ``; } @@ -249,20 +257,35 @@ const filterItem = (menuElement: Element, cellElement: HTMLElement, keyword: str const hasIds: string[] = []; cellElement.querySelectorAll(".av__cell--relation").forEach((relationItem: HTMLElement) => { const item = relationItem.querySelector(".av__celltext") as HTMLElement; - hasIds.push(item.dataset.id); - selectHTML += ``; +draggable="true">${genSelectItemHTML({ + type: "selected", + id: item.dataset.id, + isDetached: !item.classList.contains("av__celltext--ref"), + text: Lute.EscapeHTMLStr(item.textContent || window.siyuan.languages.untitled) + })}`; }); cells.forEach((item) => { if (!hasIds.includes(item.blockID)) { - html += genSelectItemHTML("unselect", item.blockID, item.isDetached, Lute.EscapeHTMLStr(item.block.content || window.siyuan.languages.untitled)); + html += genSelectItemHTML({ + type: "unselect", + rowId: item.blockID, + id: item.block.id, + isDetached: item.isDetached, + text: Lute.EscapeHTMLStr(item.block.content || window.siyuan.languages.untitled) + }); } }); menuElement.querySelector(".b3-menu__items").innerHTML = `${selectHTML} ${html} -${keyword ? genSelectItemHTML("empty", Lute.EscapeHTMLStr(keyword), undefined, menuElement.querySelector(".popover__block").outerHTML) : (html ? "" : genSelectItemHTML("empty"))}`; +${keyword ? genSelectItemHTML({ + type: "empty", + newName: Lute.EscapeHTMLStr(keyword), + text: menuElement.querySelector(".popover__block").outerHTML + }) : (html ? "" : genSelectItemHTML({type: "empty"}))}`; menuElement.querySelector(".b3-menu__items .b3-menu__item:not(.fn__none)").classList.add("b3-menu__item--current"); }); }; @@ -283,18 +306,29 @@ export const bindRelationEvent = (options: { const hasIds: string[] = []; options.cellElements[0].querySelectorAll(".av__cell--relation").forEach((relationItem: HTMLElement) => { const item = relationItem.querySelector(".av__celltext") as HTMLElement; - hasIds.push(item.dataset.id); - selectHTML += ``; + hasIds.push(relationItem.dataset.rowId); + selectHTML += ``; }); cells.forEach((item) => { if (!hasIds.includes(item.blockID)) { - html += genSelectItemHTML("unselect", item.blockID, item.isDetached, Lute.EscapeHTMLStr(item.block.content || window.siyuan.languages.untitled)); + html += genSelectItemHTML({ + type: "unselect", + rowId: item.blockID, + id: item.block.id, + isDetached: item.isDetached, + text: Lute.EscapeHTMLStr(item.block.content || window.siyuan.languages.untitled) + }); } }); options.menuElement.querySelector(".b3-menu__items").innerHTML = `${selectHTML} -${html || genSelectItemHTML("empty")}`; +${html || genSelectItemHTML({type: "empty"})}`; const cellRect = options.cellElements[options.cellElements.length - 1].getBoundingClientRect(); setPosition(options.menuElement, cellRect.left, cellRect.bottom, cellRect.height); options.menuElement.querySelector(".b3-menu__items .b3-menu__item:not(.fn__none)").classList.add("b3-menu__item--current"); @@ -376,45 +410,60 @@ export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, tar const newValue: IAVCellRelationValue = {blockIDs: [], contents: []}; menuElement.querySelectorAll('[draggable="true"]').forEach(item => { - const id = item.getAttribute("data-id"); - newValue.blockIDs.push(id); + const rowId = item.getAttribute("data-row-id"); + const blockPopElement = item.querySelector(".b3-menu__label"); + newValue.blockIDs.push(rowId); newValue.contents.push({ type: "block", block: { - id, - content: item.querySelector(".b3-menu__label").textContent + id: blockPopElement.getAttribute("data-id"), + content: blockPopElement.textContent }, - isDetached: !item.querySelector(".popover__block") + isDetached: !blockPopElement.classList.contains("popover__block") }); }); if (target.classList.contains("b3-menu__item")) { - const targetId = target.getAttribute("data-id"); + const rowId = target.getAttribute("data-row-id"); + const id = target.querySelector(".b3-menu__label").getAttribute("data-id"); const separatorElement = menuElement.querySelector(".b3-menu__separator"); const searchValue = menuElement.querySelector("input").value; if (target.getAttribute("draggable")) { - if (!separatorElement.nextElementSibling.getAttribute("data-id") && !searchValue) { + if (!separatorElement.nextElementSibling.getAttribute("data-row-id") && !searchValue) { separatorElement.nextElementSibling.remove(); } - const removeIndex = newValue.blockIDs.indexOf(targetId); + const removeIndex = newValue.blockIDs.indexOf(rowId); newValue.blockIDs.splice(removeIndex, 1); newValue.contents.splice(removeIndex, 1); separatorElement.after(target); - target.outerHTML = genSelectItemHTML("unselect", targetId, !target.querySelector(".popover__block"), Lute.EscapeHTMLStr(target.querySelector(".b3-menu__label").textContent), target.className); - } else if (targetId) { - newValue.blockIDs.push(targetId); + target.outerHTML = genSelectItemHTML({ + type: "unselect", + rowId, + id, + isDetached: !target.querySelector(".popover__block"), + text: Lute.EscapeHTMLStr(target.querySelector(".b3-menu__label").textContent), + className: target.className + }); + } else if (rowId) { + newValue.blockIDs.push(rowId); newValue.contents.push({ type: "block", block: { - id: targetId, + id, content: target.firstElementChild.textContent }, isDetached: !target.firstElementChild.getAttribute("style") }); separatorElement.before(target); - target.outerHTML = ``; + target.outerHTML = ``; if (!separatorElement.nextElementSibling) { - separatorElement.insertAdjacentHTML("afterend", genSelectItemHTML("empty")); + separatorElement.insertAdjacentHTML("afterend", genSelectItemHTML({type: "empty"})); } } else { const blockID = target.querySelector(".popover__block").getAttribute("data-id"); @@ -425,8 +474,8 @@ draggable="true">${genSelectItemHTML("selected", targetId, !target.querySelector action: "insertAttrViewBlock", avID: menuElement.firstElementChild.getAttribute("data-av-id"), srcs: [{ - itemID: Lute.NewNodeID(), - id: rowId, + itemID: rowId, + id: Lute.NewNodeID(), isDetached: true, content }], @@ -441,13 +490,17 @@ draggable="true">${genSelectItemHTML("selected", targetId, !target.querySelector newValue.contents.push({ type: "block", block: { - id: rowId, content }, isDetached: true }); - separatorElement.insertAdjacentHTML("beforebegin", ``); + separatorElement.insertAdjacentHTML("beforebegin", ``); } } updateCellsValue(protyle, nodeElement, newValue, cellElements);