Parcourir la source

Merge 7ad134a5464efe4a523ca23bdce7dbfa6b6863d1 into 879369dd940f35fbdb2b9c18d1b99876a3f4979b

Jeffrey Chen il y a 6 mois
Parent
commit
6e34a2701b

+ 5 - 0
app/src/assets/scss/component/_list.scss

@@ -247,6 +247,11 @@
         color: var(--b3-theme-on-background);
         background-color: var(--b3-list-icon-hover);
       }
+
+      &--warning:hover {
+        color: var(--b3-theme-error);
+        background-color: var(--b3-list-icon-hover);
+      }
     }
 
     .counter {

+ 24 - 15
app/src/block/popover.ts

@@ -21,13 +21,16 @@ export const initBlockPopover = (app: App) => {
         }
         const aElement = hasClosestByAttribute(event.target, "data-type", "a", true) ||
             hasClosestByClassName(event.target, "ariaLabel") ||
-            hasClosestByAttribute(event.target, "data-type", "tab-header") ||
             hasClosestByAttribute(event.target, "data-type", "inline-memo") ||
             hasClosestByClassName(event.target, "av__calc--ashow") ||
-            hasClosestByClassName(event.target, "av__cell");
+            hasClosestByClassName(event.target, "av__cell")||
+            hasClosestByAttribute(event.target, "data-type", "setRelationCell");
         if (aElement) {
-            let tooltipClass = "";
-            let tip = aElement.getAttribute("aria-label");
+            const tooltipClasses: string[] = [];
+            let tip = aElement.getAttribute("aria-label") || "";
+            if (aElement.hasAttribute("data-tooltipclass")) {
+                tooltipClasses.push(...aElement.getAttribute("data-tooltipclass").split(" "));
+            }
             if (aElement.classList.contains("av__cell")) {
                 if (aElement.classList.contains("av__cell--header")) {
                     const textElement = aElement.querySelector(".av__celltext");
@@ -43,7 +46,7 @@ export const initBlockPopover = (app: App) => {
                     if (aElement.firstElementChild?.getAttribute("data-type") === "url") {
                         if (aElement.firstElementChild.textContent.indexOf("...") > -1) {
                             tip = Lute.EscapeHTMLStr(aElement.firstElementChild.getAttribute("data-href"));
-                            tooltipClass = "href";
+                            tooltipClasses.push("href");
                         }
                     }
                     if (!tip && aElement.dataset.wrap !== "true" && event.target.dataset.type !== "block-more" && !hasClosestByClassName(event.target, "block__icon")) {
@@ -65,15 +68,21 @@ export const initBlockPopover = (app: App) => {
                     }
                 }
             } else if (aElement.classList.contains("av__celltext--url")) {
-                tip = tip ? `<span style="word-break: break-all">${tip.substring(0, Constants.SIZE_TITLE)}</span><div class="fn__hr"></div>${aElement.getAttribute("data-name")}` : aElement.getAttribute("data-name");
-                tooltipClass = "href";
+                const title = aElement.getAttribute("data-name") || "";
+                tip = tip ? `<span style="word-break: break-all">${tip.substring(0, Constants.SIZE_TITLE)}</span>${title ? '<div class="fn__hr"></div><span>' + title + "</span>" : ""}` : title;
+                tooltipClasses.push("href");
             } else if (aElement.classList.contains("av__calc--ashow") && aElement.clientWidth + 2 < aElement.scrollWidth) {
                 tip = aElement.lastChild.textContent + " " + aElement.firstElementChild.textContent;
+            } else if (aElement.getAttribute("data-type") === "setRelationCell") {
+                const childElement = aElement.querySelector(".b3-menu__label");
+                if (childElement && childElement.clientWidth < childElement.scrollWidth) {
+                    tip = childElement.textContent;
+                }
             }
             if (!tip) {
                 tip = aElement.getAttribute("data-inline-memo-content");
                 if (tip) {
-                    tooltipClass = "memo"; // 为行级备注添加 class https://github.com/siyuan-note/siyuan/issues/6161
+                    tooltipClasses.push("memo"); // 为行级备注添加 class https://github.com/siyuan-note/siyuan/issues/6161
                 }
             }
             if (!tip) {
@@ -81,7 +90,7 @@ export const initBlockPopover = (app: App) => {
                 // 链接地址强制换行 https://github.com/siyuan-note/siyuan/issues/11539
                 if (href) {
                     tip = `<span style="word-break: break-all">${href.substring(0, Constants.SIZE_TITLE)}</span>`;
-                    tooltipClass = "href"; // 为超链接添加 class https://github.com/siyuan-note/siyuan/issues/11440#issuecomment-2119080691
+                    tooltipClasses.push("href"); // 为超链接添加 class https://github.com/siyuan-note/siyuan/issues/11440#issuecomment-2119080691
                 }
                 const title = aElement.getAttribute("data-title");
                 if (tip && isLocalPath(href) && !aElement.classList.contains("b3-tooltips")) {
@@ -89,25 +98,25 @@ export const initBlockPopover = (app: App) => {
                     fetchPost("/api/asset/statAsset", {path: href}, (response) => {
                         if (response.code === 1) {
                             if (title) {
-                                assetTip += '<div class="fn__hr"></div>' + title;
+                                assetTip += '<div class="fn__hr"></div><span>' + title + "</span>";
                             }
                         } else {
-                            assetTip += ` ${response.data.hSize}${title ? '<div class="fn__hr"></div>' + title : ""}<br>${window.siyuan.languages.modifiedAt} ${response.data.hUpdated}<br>${window.siyuan.languages.createdAt} ${response.data.hCreated}`;
+                            assetTip += ` ${response.data.hSize}${title ? '<div class="fn__hr"></div><span>' + title + "</span>" : ""}<br>${window.siyuan.languages.modifiedAt} ${response.data.hUpdated}<br>${window.siyuan.languages.createdAt} ${response.data.hCreated}`;
                         }
-                        showTooltip(assetTip, aElement, tooltipClass);
+                        showTooltip(assetTip, aElement, tooltipClasses);
                     });
                     tip = "";
                 } else if (title) {
-                    tip += '<div class="fn__hr"></div>' + title;
+                    tip += '<div class="fn__hr"></div><span>' + title + "</span>";
                 }
             }
             if (tip && !aElement.classList.contains("b3-tooltips")) {
                 // https://github.com/siyuan-note/siyuan/issues/11294
                 try {
-                    showTooltip(decodeURIComponent(tip), aElement, tooltipClass);
+                    showTooltip(decodeURIComponent(tip), aElement, tooltipClasses);
                 } catch (e) {
                     // https://ld246.com/article/1718235737991
-                    showTooltip(tip, aElement, tooltipClass);
+                    showTooltip(tip, aElement, tooltipClasses);
                 }
                 event.stopPropagation();
             } else {

+ 1 - 1
app/src/card/makeCard.ts

@@ -25,7 +25,7 @@ export const genCardItem = (item: ICardPackage) => {
 <span data-type="view" class="b3-list-item__action b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.cardPreview}">
     <svg><use xlink:href="#iconEye"></use></svg>
 </span>
-<span data-type="remove" class="b3-list-item__action b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.removeDeck}">
+<span data-type="remove" class="b3-list-item__action b3-list-item__action--warning b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.removeDeck}">
     <svg><use xlink:href="#iconMin"></use></svg>
 </span>
 <span data-type="add" style="display: flex" class="b3-list-item__action b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.addDeck}">

+ 2 - 2
app/src/card/viewCards.ts

@@ -264,7 +264,7 @@ ${unicode2Emoji(item.ial.icon, "b3-list-item__graphic", true)}
 <span data-position="parentE" data-type="reset" data-id="${item.id}" class="b3-list-item__action ariaLabel" aria-label="${window.siyuan.languages.reset}">
     <svg><use xlink:href="#iconUndo"></use></svg>
 </span>
-<span data-position="parentE" data-type="remove" data-id="${item.id}" class="b3-list-item__action ariaLabel" aria-label="${window.siyuan.languages.removeDeck}">
+<span data-position="parentE" data-type="remove" data-id="${item.id}" class="b3-list-item__action b3-list-item__action--warning ariaLabel" aria-label="${window.siyuan.languages.removeDeck}">
     <svg><use xlink:href="#iconTrashcan"></use></svg>
 </span>
 </div>`;
@@ -273,7 +273,7 @@ ${unicode2Emoji(item.ial.icon, "b3-list-item__graphic", true)}
             // 块被删除的情况
             listHTML += `<div data-type="card-item" class="b3-list-item${isMobile() ? "" : " b3-list-item--hide-action"}">
 <span class="b3-list-item__text">${item.content}</span>
-<span data-position="parentE" data-type="remove" data-id="${item.id}" class="b3-list-item__action ariaLabel" aria-label="${window.siyuan.languages.removeDeck}">
+<span data-position="parentE" data-type="remove" data-id="${item.id}" class="b3-list-item__action b3-list-item__action--warning ariaLabel" aria-label="${window.siyuan.languages.removeDeck}">
     <svg><use xlink:href="#iconTrashcan"></use></svg>
 </span>
 </div>`;

+ 13 - 11
app/src/dialog/tooltip.ts

@@ -1,7 +1,6 @@
 import {isMobile} from "../util/functions";
-import {Constants} from "../constants";
 
-export const showTooltip = (message: string, target: Element, tooltipClass?: string) => {
+export const showTooltip = (message: string, target: Element, tooltipClasses?: string[]) => {
     if (isMobile()) {
         return;
     }
@@ -11,7 +10,10 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
         return;
     }
 
-    const className = tooltipClass ? `tooltip tooltip--${tooltipClass}` : "tooltip";
+    // 合并默认类名和额外类名
+    const additionalClasses = tooltipClasses ? tooltipClasses.map(cls => `tooltip--${cls}`).join(" ") : "";
+    const className = ["tooltip", additionalClasses].filter(Boolean).join(" ");
+
     let messageElement = document.getElementById("tooltip");
     if (!messageElement) {
         document.body.insertAdjacentHTML("beforeend", `<div class="${className}" id="tooltip">${message}</div>`);
@@ -22,9 +24,9 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
         }
         if (messageElement.innerHTML !== message) {
             messageElement.innerHTML = message;
+            // 避免原本的 top 和 left 影响计算
+            messageElement.removeAttribute("style");
         }
-        // 避免原本的 top 和 left 影响计算
-        messageElement.removeAttribute("style");
     }
 
     let left = targetRect.left;
@@ -53,6 +55,10 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
     } else if (position?.endsWith("top")) {
         // 编辑器动态滚动条
         top = targetRect.top - messageElement.clientHeight;
+    } else if (position === "west") {
+        // 数据库属性视图 移除条目按钮
+        top = targetRect.top + (parseInt(position) || 0);
+        left = targetRect.left - messageElement.clientWidth - 8;
     }
 
     const topHeight = position === "parentE" ? top : targetRect.top;
@@ -60,12 +66,8 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
 
     messageElement.style.maxHeight = Math.max(topHeight, bottomHeight) + "px";
 
-    // 避免原本的 top 和 left 影响计算
-    messageElement.style.top = "0px";
-    messageElement.style.left = "0px";
-
     if (top + messageElement.clientHeight > window.innerHeight && topHeight > bottomHeight) {
-        messageElement.style.top = ((position === "parentE" ? parentRect.bottom : targetRect.top) - messageElement.clientHeight) + "px";
+        messageElement.style.top = ((position === "parentE" || position === "west" ? parentRect.bottom : targetRect.top) - messageElement.clientHeight) + "px";
     } else {
         messageElement.style.top = top + "px";
     }
@@ -84,6 +86,6 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
 export const hideTooltip = () => {
     const messageElement = document.getElementById("tooltip");
     if (messageElement) {
-        messageElement.remove();
+        messageElement.classList.add("fn__none");
     }
 };

+ 2 - 2
app/src/editor/rename.ts

@@ -16,7 +16,7 @@ import {getAllEditor} from "../layout/getAll";
 export const validateName = (name: string, targetElement?: HTMLElement) => {
     if (/\r\n|\r|\n|\u2028|\u2029|\t|\//.test(name)) {
         if (targetElement) {
-            showTooltip(window.siyuan.languages.fileNameRule, targetElement, "error");
+            showTooltip(window.siyuan.languages.fileNameRule, targetElement, ["error"]);
         } else {
             showMessage(window.siyuan.languages.fileNameRule);
         }
@@ -24,7 +24,7 @@ export const validateName = (name: string, targetElement?: HTMLElement) => {
     }
     if (name.length > Constants.SIZE_TITLE) {
         if (targetElement) {
-            showTooltip(window.siyuan.languages["_kernel"]["106"], targetElement, "error");
+            showTooltip(window.siyuan.languages["_kernel"]["106"], targetElement, ["error"]);
         } else {
             showMessage(window.siyuan.languages["_kernel"]["106"]);
         }

+ 7 - 7
app/src/emoji/index.ts

@@ -56,7 +56,7 @@ export const lazyLoadEmoji = (element: HTMLElement) => {
             if ((typeof entrie.isIntersecting === "undefined" ? entrie.intersectionRatio !== 0 : entrie.isIntersecting) && index) {
                 let html = "";
                 window.siyuan.emojis[parseInt(index)].items.forEach(emoji => {
-                    html += `<button data-unicode="${emoji.unicode}" class="emojis__item ariaLabel" aria-label="${getEmojiDesc(emoji)}">
+                    html += `<button data-unicode="${emoji.unicode}" class="emojis__item ariaLabel" data-tooltipclass="emoji" aria-label="${getEmojiDesc(emoji)}">
 ${unicode2Emoji(emoji.unicode)}</button>`;
                 });
                 entrie.target.innerHTML = html;
@@ -124,7 +124,7 @@ export const filterEmoji = (key = "", max?: number) => {
                     if (category.id === "custom") {
                         customStore.push(emoji);
                     } else {
-                        keyHTML += `<button data-unicode="${emoji.unicode}" class="emojis__item ariaLabel" aria-label="${getEmojiDesc(emoji)}">
+                        keyHTML += `<button data-unicode="${emoji.unicode}" class="emojis__item ariaLabel" data-tooltipclass="emoji" aria-label="${getEmojiDesc(emoji)}">
 ${unicode2Emoji(emoji.unicode, undefined, false, true)}</button>`;
                     }
                     maxCount++;
@@ -134,7 +134,7 @@ ${unicode2Emoji(emoji.unicode, undefined, false, true)}</button>`;
                     recentEmojis.push(emoji);
                 }
                 if (index < 2) {
-                    html += `<button data-unicode="${emoji.unicode}" class="emojis__item ariaLabel" aria-label="${getEmojiDesc(emoji)}">
+                    html += `<button data-unicode="${emoji.unicode}" class="emojis__item ariaLabel" data-tooltipclass="emoji" aria-label="${getEmojiDesc(emoji)}">
 ${unicode2Emoji(emoji.unicode, undefined, false, true)}</button>`;
                 }
             }
@@ -159,7 +159,7 @@ ${unicode2Emoji(emoji.unicode, undefined, false, true)}</button>`;
             }
             return 0;
         }).forEach(item => {
-            html += `<button data-unicode="${item.unicode}" class="emojis__item ariaLabel" aria-label="${getEmojiDesc(item)}">
+            html += `<button data-unicode="${item.unicode}" class="emojis__item ariaLabel" data-tooltipclass="emoji" aria-label="${getEmojiDesc(item)}">
 ${unicode2Emoji(item.unicode, undefined, false, true)}</button>`;
         });
         html = html + keyHTML + "</div>";
@@ -170,7 +170,7 @@ ${unicode2Emoji(item.unicode, undefined, false, true)}</button>`;
         window.siyuan.config.editor.emoji.forEach(emojiUnicode => {
             const emoji = recentEmojis.filter((item) => item.unicode === emojiUnicode);
             if (emoji[0]) {
-                recentHTML += `<button data-unicode="${emoji[0].unicode}" class="emojis__item ariaLabel" aria-label="${getEmojiDesc(emoji[0])}">
+                recentHTML += `<button data-unicode="${emoji[0].unicode}" class="emojis__item ariaLabel" data-tooltipclass="emoji" aria-label="${getEmojiDesc(emoji[0])}">
 ${unicode2Emoji(emoji[0].unicode, undefined, false, true)}
 </button>`;
             }
@@ -286,7 +286,7 @@ export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", posi
             ["267e-fe0f", getEmojiTitle(7)],
             ["1f6a9", getEmojiTitle(8)],
         ].map(([unicode, title], index) =>
-            `<div data-type="${index}" class="emojis__type ariaLabel" aria-label="${title}">${unicode2Emoji(unicode)}</div>`
+            `<div data-type="${index}" class="emojis__type ariaLabel" data-tooltipclass="emoji" aria-label="${title}">${unicode2Emoji(unicode)}</div>`
         ).join("")}
             </div>
         </div>
@@ -527,7 +527,7 @@ export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", posi
                     if (index) {
                         let html = "";
                         window.siyuan.emojis[parseInt(index)].items.forEach(emoji => {
-                            html += `<button data-unicode="${emoji.unicode}" class="emojis__item ariaLabel" aria-label="${getEmojiDesc(emoji)}">
+                            html += `<button data-unicode="${emoji.unicode}" class="emojis__item ariaLabel" data-tooltipclass="emoji" aria-label="${getEmojiDesc(emoji)}">
 ${unicode2Emoji(emoji.unicode)}</button>`;
                         });
                         titleElement.nextElementSibling.innerHTML = html;

+ 3 - 2
app/src/layout/Tab.ts

@@ -36,7 +36,8 @@ export class Tab {
             this.headElement.setAttribute("data-type", "tab-header");
             this.headElement.setAttribute("draggable", "true");
             this.headElement.setAttribute("data-id", this.id);
-            this.headElement.classList.add("item", "item--focus");
+            this.headElement.setAttribute("data-tooltipclass", "tab_header");
+            this.headElement.classList.add("item", "item--focus", "ariaLabel");
             let iconHTML = "";
             if (options.icon) {
                 iconHTML = `<svg class="item__graphic"><use xlink:href="#${options.icon}"></use></svg>`;
@@ -62,7 +63,7 @@ export class Tab {
                         id
                     }, (response) => {
                         if (!this.headElement.getAttribute("aria-label")) {
-                            showTooltip(escapeGreat(response.data), this.headElement);
+                            showTooltip(escapeGreat(response.data), this.headElement, ["tab_header"]);
                         }
                         this.headElement.setAttribute("aria-label", escapeGreat(response.data));
                     });

+ 1 - 1
app/src/layout/dock/Files.ts

@@ -446,7 +446,7 @@ export class Files extends Model {
                 item.style.opacity = "";
                 // https://github.com/siyuan-note/siyuan/issues/11587
                 if (index === 0) {
-                    const airaLabelElement = item.querySelector(".ariaLabel");
+                    const airaLabelElement = item.querySelector(".ariaLabel") || item.querySelector(".b3-list-item__text");
                     if (airaLabelElement) {
                         showTooltip(airaLabelElement.getAttribute("aria-label"), airaLabelElement);
                     }

+ 2 - 2
app/src/protyle/hint/index.ts

@@ -79,7 +79,7 @@ export class Hint {
                     if (index) {
                         let html = "";
                         window.siyuan.emojis[parseInt(index)].items.forEach(emoji => {
-                            html += `<button data-unicode="${emoji.unicode}" class="emojis__item ariaLabel" aria-label="${getEmojiDesc(emoji)}">
+                            html += `<button data-unicode="${emoji.unicode}" class="emojis__item ariaLabel" data-tooltipclass="emoji" aria-label="${getEmojiDesc(emoji)}">
 ${unicode2Emoji(emoji.unicode)}</button>`;
                         });
                         titleElement.nextElementSibling.innerHTML = html;
@@ -390,7 +390,7 @@ ${genHintItemHTML(item)}
                 ["267e-fe0f", getEmojiTitle(7)],
                 ["1f6a9", getEmojiTitle(8)],
             ].map(([unicode, title], index) =>
-                `<button data-type="${index}" class="emojis__type ariaLabel" aria-label="${title}">${unicode2Emoji(unicode)}</button>`
+                `<button data-type="${index}" class="emojis__type ariaLabel" data-tooltipclass="emoji" aria-label="${title}">${unicode2Emoji(unicode)}</button>`
             ).join("")}
 </div>
 </div>`;

+ 1 - 1
app/src/protyle/render/av/blockAttr.ts

@@ -186,7 +186,7 @@ export const renderAVAttribute = (element: HTMLElement, id: string, protyle: IPr
     </div>
     <div class="fn__flex-1"></div>
     <span class="fn__space"></span>
-    <span data-type="remove" class="block__icon block__icon--warning block__icon--show b3-tooltips__w b3-tooltips" aria-label="${window.siyuan.languages.removeAV}"><svg><use xlink:href="#iconTrashcan"></use></svg></span>
+    <span data-type="remove" class="block__icon block__icon--warning block__icon--show ariaLabel" data-position="west" aria-label="${window.siyuan.languages.removeAV}"><svg><use xlink:href="#iconTrashcan"></use></svg></span>
 </div>`;
             table.keyValues?.forEach(item => {
                 innerHTML += `<div class="block__icons av__row" data-id="${id}" data-col-id="${item.key.id}">

+ 5 - 5
app/src/protyle/render/av/relation.ts

@@ -224,7 +224,7 @@ const genSelectItemHTML = (type: "selected" | "empty" | "unselect", id?: string,
 </button>`;
     }
     if (type == "unselect") {
-        return `<button data-id="${id}" class="b3-menu__item" data-type="setRelationCell">
+        return `<button data-id="${id}" class="b3-menu__item" data-position="west" data-type="setRelationCell">
     <span class="b3-menu__label fn__ellipsis${isDetached ? "" : " popover__block"}" ${isDetached ? "" : 'style="color:var(--b3-protyle-inline-blockref-color)"'} data-id="${id}">${text}</span>
     <svg class="b3-menu__action"><use xlink:href="#iconAdd"></use></svg>
 </button>`;
@@ -242,7 +242,7 @@ const filterItem = (menuElement: Element, cellElement: HTMLElement, keyword: str
         const hasIds: string[] = [];
         cellElement.querySelectorAll("span").forEach((item) => {
             hasIds.push(item.dataset.id);
-            selectHTML += `<button data-id="${item.dataset.id}" data-type="setRelationCell" class="b3-menu__item${item.textContent.indexOf(keyword) > -1 ? "" : " fn__none"}" draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || window.siyuan.languages.untitled)}</button>`;
+            selectHTML += `<button data-id="${item.dataset.id}" data-position="west" data-type="setRelationCell" class="b3-menu__item${item.textContent.indexOf(keyword) > -1 ? "" : " fn__none"}" draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || window.siyuan.languages.untitled)}</button>`;
         });
         cells.forEach((item) => {
             if (!hasIds.includes(item.block.id)) {
@@ -273,7 +273,7 @@ export const bindRelationEvent = (options: {
         const hasIds: string[] = [];
         options.cellElements[0].querySelectorAll("span").forEach((item) => {
             hasIds.push(item.dataset.id);
-            selectHTML += `<button data-id="${item.dataset.id}" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || window.siyuan.languages.untitled)}</button>`;
+            selectHTML += `<button data-id="${item.dataset.id}" data-position="west" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || window.siyuan.languages.untitled)}</button>`;
         });
         cells.forEach((item) => {
             if (!hasIds.includes(item.block.id)) {
@@ -399,7 +399,7 @@ export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, tar
                 isDetached: !target.firstElementChild.getAttribute("style")
             });
             separatorElement.before(target);
-            target.outerHTML = `<button data-id="${targetId}" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", targetId, !target.querySelector(".popover__block"), target.querySelector(".b3-menu__label").textContent)}</button>`;
+            target.outerHTML = `<button data-id="${targetId}" data-position="west" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", targetId, !target.querySelector(".popover__block"), target.querySelector(".b3-menu__label").textContent)}</button>`;
             if (!separatorElement.nextElementSibling) {
                 separatorElement.insertAdjacentHTML("afterend", genSelectItemHTML("empty"));
             }
@@ -431,7 +431,7 @@ export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, tar
                 },
                 isDetached: true
             });
-            separatorElement.insertAdjacentHTML("beforebegin", `<button data-id="${rowId}" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", rowId, true, content)}</button>`);
+            separatorElement.insertAdjacentHTML("beforebegin", `<button data-id="${rowId}" data-position="west" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", rowId, true, content)}</button>`);
         }
         menuElement.querySelector(".b3-menu__item--current")?.classList.remove("b3-menu__item--current");
         menuElement.querySelector(".b3-menu__items .b3-menu__item:not(.fn__none)").classList.add("b3-menu__item--current");