🎨 fix https://github.com/siyuan-note/siyuan/issues/8082

app/src/layout/dock/Bookmark.ts

@@ -2,14 +2,12 @@ import {Tab} from "../Tab";
 import {Model} from "../Model";
 import {Tree} from "../../util/Tree";
 import {getDockByType, setPanelFocus} from "../util";
-import {MenuItem} from "../../menus/Menu";
 import {fetchPost} from "../../util/fetch";
 import {updateHotkeyTip} from "../../protyle/util/compatibility";
 import {openFileById} from "../../editor/util";
 import {Constants} from "../../constants";
-import {Dialog} from "../../dialog";
+import {hasClosestByClassName} from "../../protyle/util/hasClosest";
-import {confirmDialog} from "../../dialog/confirmDialog";
+import {openBookmarkMenu} from "../../menus/bookmark";
-import {escapeHtml} from "../../util/escape";
 
 export class Bookmark extends Model {
     private openNodes: string[];
@@ -75,79 +73,23 @@ export class Bookmark extends Model {
         this.tree = new Tree({
             element: this.element.lastElementChild as HTMLElement,
             data: null,
-            click(element: HTMLElement) {
+            click:(element: HTMLElement, event: MouseEvent)=> {
-                const id = element.getAttribute("data-node-id");
+                const actionElement = hasClosestByClassName(event.target as HTMLElement, "b3-list-item__action");
-                fetchPost("/api/block/checkBlockFold", {id}, (foldResponse) => {
+                if (actionElement) {
-                    openFileById({
+                    openBookmarkMenu(actionElement.parentElement, event, this);
-                        id,
+                } else {
-                        action: foldResponse.data ? [Constants.CB_GET_FOCUS, Constants.CB_GET_ALL] : [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT],
+                    const id = element.getAttribute("data-node-id");
-                        zoomIn: foldResponse.data
+                    fetchPost("/api/block/checkBlockFold", {id}, (foldResponse) => {
+                        openFileById({
+                            id,
+                            action: foldResponse.data ? [Constants.CB_GET_FOCUS, Constants.CB_GET_ALL] : [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT],
+                            zoomIn: foldResponse.data
+                        });
                     });
-                });
+                }
             },
             rightClick: (element: HTMLElement, event: MouseEvent) => {
-                window.siyuan.menus.menu.remove();
+                openBookmarkMenu(element, event, this)
-                const id = element.getAttribute("data-node-id");
-                if (!id) {
-                    window.siyuan.menus.menu.append(new MenuItem({
-                        label: window.siyuan.languages.rename,
-                        click: () => {
-                            const oldBookmark = element.querySelector(".b3-list-item__text").textContent;
-                            const dialog = new Dialog({
-                                title: window.siyuan.languages.rename,
-                                content: `<div class="b3-dialog__content"><input class="b3-text-field fn__block"></div>
-<div class="b3-dialog__action">
-    <button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
-    <button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
-</div>`,
-                                width: "520px",
-                            });
-                            const btnsElement = dialog.element.querySelectorAll(".b3-button");
-                            btnsElement[0].addEventListener("click", () => {
-                                dialog.destroy();
-                            });
-                            const inputElement = dialog.element.querySelector("input");
-                            dialog.bindInput(inputElement, () => {
-                                (btnsElement[1] as HTMLButtonElement).click();
-                            });
-                            inputElement.value = oldBookmark;
-                            inputElement.focus();
-                            inputElement.select();
-                            btnsElement[1].addEventListener("click", () => {
-                                fetchPost("/api/bookmark/renameBookmark", {
-                                    oldBookmark,
-                                    newBookmark: inputElement.value
-                                }, () => {
-                                    dialog.destroy();
-                                });
-                            });
-                        }
-                    }).element);
-                }
-                window.siyuan.menus.menu.append(new MenuItem({
-                    icon: "iconTrashcan",
-                    label: window.siyuan.languages.remove,
-                    click: () => {
-                        const bookmark = (id ? element.parentElement.previousElementSibling : element).querySelector(".b3-list-item__text").textContent;
-                        confirmDialog(window.siyuan.languages.deleteOpConfirm, `${window.siyuan.languages.confirmDelete} <b>${escapeHtml(bookmark)}</b>?`, () => {
-                            if (id) {
-                                fetchPost("/api/attr/setBlockAttrs", {id, attrs: {bookmark: ""}}, () => {
-                                    this.update();
-                                });
-                                document.querySelectorAll(`.protyle-wysiwyg [data-node-id="${id}"]`).forEach((item) => {
-                                    item.setAttribute("bookmark", "");
-                                    const bookmarkElement = item.querySelector(".protyle-attr--bookmark");
-                                    if (bookmarkElement) {
-                                        bookmarkElement.remove();
-                                    }
-                                });
-                            } else {
-                                fetchPost("/api/bookmark/removeBookmark", {bookmark});
-                            }
-                        });
-                    }
-                }).element);
-                window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY});
             },
             ctrlClick(element: HTMLElement) {
                 openFileById({
@@ -169,7 +111,9 @@ export class Bookmark extends Model {
                     position: "bottom",
                     action: [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT]
                 });
-            }
+            },
+            blockExtHTML: '<span class="b3-list-item__action"><svg><use xlink:href="#iconMore"></use></svg></span>',
+            topExtHTML: '<span class="b3-list-item__action"><svg><use xlink:href="#iconMore"></use></svg></span>',
         });
         // 为了快捷键的 dispatch
         this.element.querySelector('[data-type="collapse"]').addEventListener("click", () => {

app/src/menus/bookmark.ts

@@ -0,0 +1,84 @@
+import {MenuItem} from "./Menu";
+import {Dialog} from "../dialog";
+import {fetchPost} from "../util/fetch";
+import {confirmDialog} from "../dialog/confirmDialog";
+import {escapeHtml} from "../util/escape";
+import {copySubMenu} from "./commonMenuItem";
+import {Bookmark} from "../layout/dock/Bookmark";
+import {isMobile} from "../util/functions";
+import {MobileBookmarks} from "../mobile/dock/MobileBookmarks";
+
+export const openBookmarkMenu = (element: HTMLElement, event: MouseEvent, bookmarkObj: Bookmark | MobileBookmarks) => {
+    window.siyuan.menus.menu.remove();
+    const id = element.getAttribute("data-node-id");
+    if (!id && !window.siyuan.config.readonly) {
+        window.siyuan.menus.menu.append(new MenuItem({
+            label: window.siyuan.languages.rename,
+            click: () => {
+                const oldBookmark = element.querySelector(".b3-list-item__text").textContent;
+                const dialog = new Dialog({
+                    title: window.siyuan.languages.rename,
+                    content: `<div class="b3-dialog__content"><input class="b3-text-field fn__block"></div>
+<div class="b3-dialog__action">
+    <button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
+    <button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
+</div>`,
+                    width: isMobile() ? "92vw" : "520px",
+                });
+                const btnsElement = dialog.element.querySelectorAll(".b3-button");
+                btnsElement[0].addEventListener("click", () => {
+                    dialog.destroy();
+                });
+                const inputElement = dialog.element.querySelector("input");
+                dialog.bindInput(inputElement, () => {
+                    (btnsElement[1] as HTMLButtonElement).click();
+                });
+                inputElement.value = oldBookmark;
+                inputElement.focus();
+                inputElement.select();
+                btnsElement[1].addEventListener("click", () => {
+                    fetchPost("/api/bookmark/renameBookmark", {
+                        oldBookmark,
+                        newBookmark: inputElement.value
+                    }, () => {
+                        dialog.destroy();
+                    });
+                });
+            }
+        }).element);
+    }
+    window.siyuan.menus.menu.append(new MenuItem({
+        label: window.siyuan.languages.copy,
+        type: "submenu",
+        icon: "iconCopy",
+        submenu: copySubMenu(element.getAttribute("data-node-id"), false)
+    }).element);
+
+    if (!window.siyuan.config.readonly) {
+        window.siyuan.menus.menu.append(new MenuItem({
+            icon: "iconTrashcan",
+            label: window.siyuan.languages.remove,
+            click: () => {
+                const bookmarkText = (id ? element.parentElement.previousElementSibling : element).querySelector(".b3-list-item__text").textContent;
+                confirmDialog(window.siyuan.languages.deleteOpConfirm, `${window.siyuan.languages.confirmDelete} <b>${escapeHtml(bookmarkText)}</b>?`, () => {
+                    if (id) {
+                        fetchPost("/api/attr/setBlockAttrs", {id, attrs: {bookmark: ""}}, () => {
+                            bookmarkObj.update()
+                        });
+                        document.querySelectorAll(`.protyle-wysiwyg [data-node-id="${id}"]`).forEach((item) => {
+                            item.setAttribute("bookmark", "");
+                            const bookmarkElement = item.querySelector(".protyle-attr--bookmark");
+                            if (bookmarkElement) {
+                                bookmarkElement.remove();
+                            }
+                        });
+                    } else {
+                        fetchPost("/api/bookmark/removeBookmark", {bookmark: bookmarkText});
+                    }
+                });
+            }
+        }).element);
+    }
+    window.siyuan.menus.menu.element.style.zIndex = "221";  // 移动端被右侧栏遮挡
+    window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY});
+}

app/src/mobile/dock/MobileBookmarks.ts

@@ -3,9 +3,7 @@ import {fetchPost} from "../../util/fetch";
 import {Constants} from "../../constants";
 import {hasClosestByClassName} from "../../protyle/util/hasClosest";
 import {openMobileFileById} from "../editor";
-import {confirmDialog} from "../../dialog/confirmDialog";
+import {openBookmarkMenu} from "../../menus/bookmark";
-import {escapeHtml} from "../../util/escape";
-import {Dialog} from "../../dialog";
 
 export class MobileBookmarks {
     public element: HTMLElement;
@@ -34,62 +32,15 @@ export class MobileBookmarks {
                 const id = element.getAttribute("data-node-id");
                 const actionElement = hasClosestByClassName(event.target as HTMLElement, "b3-list-item__action");
                 if (actionElement) {
-                    const bookmark = (id ? element.parentElement.previousElementSibling : element).querySelector(".b3-list-item__text").textContent;
+                    openBookmarkMenu(actionElement.parentElement, event, this)
-                    if (actionElement.getAttribute("data-type") === "remove") {
-                        confirmDialog(window.siyuan.languages.deleteOpConfirm, `${window.siyuan.languages.confirmDelete} <b>${escapeHtml(bookmark)}</b>?`, () => {
-                            if (id) {
-                                fetchPost("/api/attr/setBlockAttrs", {id, attrs: {bookmark: ""}}, () => {
-                                    this.update();
-                                });
-                                document.querySelectorAll(`.protyle-wysiwyg [data-node-id="${id}"]`).forEach((item) => {
-                                    item.setAttribute("bookmark", "");
-                                    const bookmarkElement = item.querySelector(".protyle-attr--bookmark");
-                                    if (bookmarkElement) {
-                                        bookmarkElement.remove();
-                                    }
-                                });
-                            } else {
-                                fetchPost("/api/bookmark/removeBookmark", {bookmark});
-                            }
-                        });
-                    } else {
-                        const dialog = new Dialog({
-                            title: window.siyuan.languages.rename,
-                            content: `<div class="b3-dialog__content"><input class="b3-text-field fn__block"></div>
-<div class="b3-dialog__action">
-    <button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
-    <button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
-</div>`,
-                            width: "92vw",
-                        });
-                        const btnsElement = dialog.element.querySelectorAll(".b3-button");
-                        btnsElement[0].addEventListener("click", () => {
-                            dialog.destroy();
-                        });
-                        const inputElement = dialog.element.querySelector("input");
-                        dialog.bindInput(inputElement, () => {
-                            (btnsElement[1] as HTMLButtonElement).click();
-                        });
-                        inputElement.value = bookmark;
-                        inputElement.focus();
-                        inputElement.select();
-                        btnsElement[1].addEventListener("click", () => {
-                            fetchPost("/api/bookmark/renameBookmark", {
-                                oldBookmark: bookmark,
-                                newBookmark: inputElement.value
-                            }, () => {
-                                dialog.destroy();
-                            });
-                        });
-                    }
                 } else {
                     fetchPost("/api/block/checkBlockFold", {id}, (foldResponse) => {
                         openMobileFileById(id, foldResponse.data ? [Constants.CB_GET_FOCUS, Constants.CB_GET_ALL, Constants.CB_GET_HTML] : [Constants.CB_GET_FOCUS, Constants.CB_GET_SETID, Constants.CB_GET_CONTEXT, Constants.CB_GET_HTML]);
                     });
                 }
             },
-            blockExtHTML: window.siyuan.config.readonly ? undefined : '<span class="b3-list-item__action" data-type="remove"><svg><use xlink:href="#iconTrashcan"></use></svg></span>',
+            blockExtHTML: '<span class="b3-list-item__action"><svg><use xlink:href="#iconMore"></use></svg></span>',
-            topExtHTML: window.siyuan.config.readonly ? undefined : '<span class="b3-list-item__action" data-type="edit"><svg><use xlink:href="#iconEdit"></use></svg></span><span class="b3-list-item__action" data-type="remove"><svg><use xlink:href="#iconTrashcan"></use></svg></span>'
+            topExtHTML: '<span class="b3-list-item__action"><svg><use xlink:href="#iconMore"></use></svg></span>'
         });
         this.element.addEventListener("click", (event) => {
             let target = event.target as HTMLElement;

app/src/util/Tree.ts

@@ -82,7 +82,7 @@ export class Tree {
             } else {
                 style = `padding-left: ${(item.depth - 1) * 18 + 22}px;margin-right: 2px`;
             }
-            html += `<li class="b3-list-item" 
+            html += `<li class="b3-list-item${isMobile() ? "" : " b3-list-item--hide-action"}" 
 ${(item.nodeType !== "NodeDocument" && item.type === "backlink") ? 'draggable="true" ' : ""}
 ${item.id ? 'data-node-id="' + item.id + '"' : ""} 
 ${item.box ? 'data-notebook-id="' + item.box + '"' : ""} 
@@ -95,8 +95,8 @@ ${item.label ? "data-label='" + item.label + "'" : ""}>
     </span>
     ${iconHTML}
     <span class="b3-list-item__text"${titleTip}>${item.name}</span>
-    ${countHTML}
     ${this.topExtHTML || ""}
+    ${countHTML}
 </li>`;
             if (item.children && item.children.length > 0) {
                 html += this.genHTML(item.children) + "</ul>";
@@ -136,7 +136,7 @@ ${item.label ? "data-label='" + item.label + "'" : ""}>
                 style = `padding-left: ${(item.depth - 1) * 18 + 22}px;margin-right: 2px`;
             }
             html += `<li ${type === "backlink" ? 'draggable="true"' : ""} 
-class="b3-list-item ${isMobile() ? "" : "b3-list-item--hide-action"}"  
+class="b3-list-item${isMobile() ? "" : " b3-list-item--hide-action"}"  
 data-node-id="${item.id}" 
 data-ref-text="${encodeURIComponent(item.refText)}" 
 data-def-id="${item.defID}"