🎨 https://github.com/siyuan-note/siyuan/issues/13791

app/src/block/Panel.ts

@@ -19,8 +19,7 @@ import {resize} from "../protyle/util/resize";
 export class BlockPanel {
     public element: HTMLElement;
     public targetElement: HTMLElement;
-    public nodeIds: string[];
-    public defIds: string[] = [];
+    public refDefs: IRefDefs[];
     public id: string;
     private app: App;
     public x: number;
@@ -35,17 +34,15 @@ export class BlockPanel {
     constructor(options: {
         app: App,
         targetElement?: HTMLElement,
-        nodeIds?: string[],
-        defIds?: string[],
+        refDefs: IRefDefs[]
         isBacklink: boolean,
+        originalRefBlockIDs?: IObject,  // isBacklink 为 true 时有效
         x?: number,
         y?: number,
-        originalRefBlockIDs?: IObject,  // isBacklink 为 true 时有效
     }) {
         this.id = genUUID();
         this.targetElement = options.targetElement;
-        this.nodeIds = options.nodeIds;
-        this.defIds = options.defIds || [];
+        this.refDefs = options.refDefs;
         this.app = options.app;
         this.x = options.x;
         this.y = options.y;
@@ -61,7 +58,7 @@ export class BlockPanel {
             this.element.setAttribute("data-oid", parentElement.getAttribute("data-oid"));
             level = parseInt(parentElement.getAttribute("data-level")) + 1;
         } else {
-            this.element.setAttribute("data-oid", this.nodeIds[0]);
+            this.element.setAttribute("data-oid", this.refDefs[0].refID);
         }
         // 移除同层级其他更高级的 block popover
         this.element.setAttribute("data-level", level.toString());
@@ -121,13 +118,13 @@ export class BlockPanel {
                         }
                     } else if (type === "open") {
                         /// #if !BROWSER
-                        openNewWindowById(this.nodeIds[0]);
+                        openNewWindowById(this.refDefs[0].refID);
                         /// #endif
                     } else if (type === "stickTab") {
                         openFileById({
                             app: options.app,
-                            id: this.nodeIds[0],
-                            action: this.editors[0].protyle.block.rootID !== this.nodeIds[0] ? [Constants.CB_GET_ALL, Constants.CB_GET_FOCUS] : [Constants.CB_GET_CONTEXT],
+                            id: this.refDefs[0].refID,
+                            action: this.editors[0].protyle.block.rootID !== this.refDefs[0].refID ? [Constants.CB_GET_ALL, Constants.CB_GET_FOCUS] : [Constants.CB_GET_CONTEXT],
                         });
                     }
                     event.preventDefault();
@@ -150,7 +147,7 @@ export class BlockPanel {
 
     private initProtyle(editorElement: HTMLElement, afterCB?: () => void) {
         const index = parseInt(editorElement.getAttribute("data-index"));
-        fetchPost("/api/block/getBlockInfo", {id: this.nodeIds[index]}, (response) => {
+        fetchPost("/api/block/getBlockInfo", {id: this.refDefs[index].refID}, (response) => {
             if (response.code === 3) {
                 showMessage(response.msg);
                 return;
@@ -159,7 +156,7 @@ export class BlockPanel {
                 return;
             }
             const action: TProtyleAction[] = [];
-            if (response.data.rootID !== this.nodeIds[index]) {
+            if (response.data.rootID !== this.refDefs[index].refID) {
                 action.push(Constants.CB_GET_ALL);
             } else {
                 action.push(Constants.CB_GET_CONTEXT);
@@ -170,8 +167,8 @@ export class BlockPanel {
                 action.push(Constants.CB_GET_BACKLINK);
             }
             const editor = new Protyle(this.app, editorElement, {
-                blockId: this.nodeIds[index],
-                defId: this.defIds[index] || this.defIds[0] || "",
+                blockId: this.refDefs[index].refID,
+                defIds: this.refDefs[index].defIDs || [],
                 originalRefBlockIDs: this.isBacklink ? this.originalRefBlockIDs : undefined,
                 action,
                 render: {
@@ -181,7 +178,7 @@ export class BlockPanel {
                 },
                 typewriterMode: false,
                 after: (editor) => {
-                    if (response.data.rootID !== this.nodeIds[index]) {
+                    if (response.data.rootID !== this.refDefs[index].refID) {
                         editor.protyle.breadcrumb.element.parentElement.lastElementChild.classList.remove("fn__none");
                     }
                     if (afterCB) {
@@ -235,7 +232,7 @@ export class BlockPanel {
             return;
         }
         let openHTML = "";
-        if (this.nodeIds.length === 1) {
+        if (this.refDefs.length === 1) {
             openHTML = `<span data-type="stickTab" class="block__icon block__icon--show b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.openBy}"><svg><use xlink:href="#iconOpen"></use></svg></span>
 <span class="fn__space"></span>`;
             /// #if !BROWSER
@@ -250,10 +247,10 @@ export class BlockPanel {
     <span data-type="close" class="block__icon block__icon--show b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.close}"><svg style="width: 12px;margin: 0 1px;"><use xlink:href="#iconClose"></use></svg></span>
 </div>
 <div class="block__content">`;
-        if (this.nodeIds.length === 0) {
+        if (this.refDefs.length === 0) {
             html += `<div class="ft__smaller ft__smaller ft__secondary b3-form__space--small" contenteditable="false">${window.siyuan.languages.refExpired}</div>`;
         } else {
-            this.nodeIds.forEach((item, index) => {
+            this.refDefs.forEach((item, index) => {
                 html += `<div class="block__edit fn__flex-1 protyle" data-index="${index}"></div>`;
             });
         }

app/src/block/popover.ts

@@ -334,24 +334,23 @@ export const showPopover = async (app: App, showRef = false) => {
     if (!popoverTargetElement || window.siyuan.menus.menu.data?.isSameNode(popoverTargetElement)) {
         return;
     }
-    let ids: string[];
-    let defIds: string[];
+    let refDefs: IRefDefs[];
     let originalRefBlockIDs: IObject
     const dataId = popoverTargetElement.getAttribute("data-id");
     if (dataId) {
         // backlink/util/hint/正文标题 上的弹层
         if (showRef) {
             const postResponse = await fetchSyncPost("/api/block/getRefIDs", {id: dataId});
-            ids = postResponse.data.refIDs;
-            defIds = postResponse.data.defIDs;
+            refDefs = postResponse.data.refIDs;
             originalRefBlockIDs = postResponse.data.originalRefBlockIDs;
         } else {
             if (dataId.startsWith("[")) {
-                ids = JSON.parse(dataId);
+                JSON.parse(dataId).forEach((item: string) => {
+                    refDefs.push({refID: item});
+                });
             } else {
-                ids = [dataId];
+                refDefs = [{refID: dataId}];
             }
-            defIds = JSON.parse(popoverTargetElement.getAttribute("data-defids") || "[]");
         }
     } else if (popoverTargetElement.getAttribute("data-type")?.indexOf("virtual-block-ref") > -1) {
         const nodeElement = hasClosestBlock(popoverTargetElement);
@@ -360,18 +359,18 @@ export const showPopover = async (app: App, showRef = false) => {
                 anchor: popoverTargetElement.textContent,
                 excludeIDs: [nodeElement.getAttribute("data-node-id")]
             });
-            ids = postResponse.data;
+            refDefs = postResponse.data.refDefs;
         }
     } else if (popoverTargetElement.getAttribute("data-type")?.split(" ").includes("a")) {
         // 以思源协议开头的链接
-        ids = [getIdFromSYProtocol(popoverTargetElement.getAttribute("data-href"))];
+        refDefs = [{refID: getIdFromSYProtocol(popoverTargetElement.getAttribute("data-href"))}];
     } else if (popoverTargetElement.dataset.type === "url") {
         // 在 database 的 url 列中以思源协议开头的链接
-        ids = [getIdFromSYProtocol(popoverTargetElement.textContent.trim())];
+        refDefs = [{refID: getIdFromSYProtocol(popoverTargetElement.textContent.trim())}];
     } else if (popoverTargetElement.dataset.popoverUrl) {
         // 镜像数据库
         const postResponse = await fetchSyncPost(popoverTargetElement.dataset.popoverUrl, {avID: popoverTargetElement.dataset.avId});
-        ids = postResponse.data;
+        refDefs = postResponse.data.refDefs;
     } else {
         // pdf
         let targetId;
@@ -382,7 +381,9 @@ export const showPopover = async (app: App, showRef = false) => {
         } else if (popoverTargetElement.classList.contains("pdf__rect")) {
             const relationIds = popoverTargetElement.getAttribute("data-relations");
             if (relationIds) {
-                ids = relationIds.split(",");
+                relationIds.split(",").forEach((item: string) => {
+                    refDefs.push({refID: item});
+                });
                 url = "";
             } else {
                 targetId = popoverTargetElement.getAttribute("data-node-id");
@@ -394,8 +395,7 @@ export const showPopover = async (app: App, showRef = false) => {
         }
         if (url) {
             const postResponse = await fetchSyncPost(url, {id: targetId});
-            ids = postResponse.data.refIDs;
-            defIds = postResponse.data.defIDs;
+            refDefs = postResponse.data.refIDs;
             originalRefBlockIDs = postResponse.data.originalRefBlockIDs;
         }
     }
@@ -403,7 +403,7 @@ export const showPopover = async (app: App, showRef = false) => {
     let hasPin = false;
     window.siyuan.blockPanels.find((item) => {
         if ((item.targetElement || typeof item.x === "number") && item.element.getAttribute("data-pin") === "true"
-            && JSON.stringify(ids) === JSON.stringify(item.nodeIds)) {
+            && JSON.stringify(refDefs) === JSON.stringify(item.refDefs)) {
             hasPin = true;
             return true;
         }
@@ -415,8 +415,7 @@ export const showPopover = async (app: App, showRef = false) => {
             app,
             targetElement: popoverTargetElement,
             isBacklink: showRef || popoverTargetElement.classList.contains("protyle-attr--refcount") || popoverTargetElement.classList.contains("counter"),
-            nodeIds: ids,
-            defIds,
+            refDefs,
             originalRefBlockIDs,
         }));
     }

app/src/dialog/processSystem.ts

@@ -184,7 +184,7 @@ export const setDefRefCount = (data: {
                     countElement.setAttribute("data-id", JSON.stringify(data.rootRefIDs));
                 }
             } else if (data.rootRefCount > 0) {
-                attrElement.insertAdjacentHTML("beforeend", `<div class="protyle-attr--refcount popover__block" data-defids="[&quot;${data.rootID}&quot;]" data-id="${JSON.stringify(data.rootRefIDs)}" style="">${data.rootRefCount}</div>`);
+                attrElement.insertAdjacentHTML("beforeend", `<div class="protyle-attr--refcount popover__block">${data.rootRefCount}</div>`);
             }
         }
         if (data.rootID === data.blockID) {

app/src/layout/dock/Files.ts

@@ -798,7 +798,7 @@ data-type="navigation-root" data-path="/">
         } else {
             counterElement.classList.add("fn__none");
         }
-        window.siyuan.storage[Constants.LOCAL_FILESPATHS].forEach((item: filesPath) => {
+        window.siyuan.storage[Constants.LOCAL_FILESPATHS].forEach((item: IFilesPath) => {
             item.openPaths.forEach((openPath) => {
                 this.selectItem(item.notebookId, openPath, undefined, false);
             });
@@ -1137,9 +1137,9 @@ data-type="navigation-root" data-path="/">
     }
 
     private getOpenPaths() {
-        const filesPaths: filesPath[] = [];
+        const filesPaths: IFilesPath[] = [];
         this.element.querySelectorAll(".b3-list[data-url]").forEach((item: HTMLElement) => {
-            const notebookPaths: filesPath = {
+            const notebookPaths: IFilesPath = {
                 notebookId: item.getAttribute("data-url"),
                 openPaths: []
             };

app/src/layout/dock/Graph.ts

@@ -755,7 +755,7 @@ export class Graph extends Model {
                         isBacklink: false,
                         x: params.event.center.x,
                         y: params.event.center.y,
-                        nodeIds: [node.id],
+                        refDefs: [{refID: node.id}]
                     }));
                 } else {
                     checkFold(node.id, (zoomIn, action: TProtyleAction[]) => {

app/src/mobile/dock/MobileFiles.ts

@@ -314,7 +314,7 @@ export class MobileFiles extends Model {
         } else {
             counterElement.classList.add("fn__none");
         }
-        window.siyuan.storage[Constants.LOCAL_FILESPATHS].forEach((item: filesPath) => {
+        window.siyuan.storage[Constants.LOCAL_FILESPATHS].forEach((item: IFilesPath) => {
             item.openPaths.forEach((openPath) => {
                 this.selectItem(item.notebookId, openPath, undefined, false);
             });
@@ -684,9 +684,9 @@ export class MobileFiles extends Model {
     }
 
     private getOpenPaths() {
-        const filesPaths: filesPath[] = [];
+        const filesPaths: IFilesPath[] = [];
         this.element.querySelectorAll(".b3-list[data-url]").forEach((item: HTMLElement) => {
-            const notebookPaths: filesPath = {
+            const notebookPaths: IFilesPath = {
                 notebookId: item.getAttribute("data-url"),
                 openPaths: []
             };

app/src/plugin/index.ts

@@ -379,13 +379,12 @@ export class Plugin {
     }
 
     public addFloatLayer = (options: {
-        ids: string[],
-        defIds?: string[],
+        refDefs: IRefDefs[],
         x?: number,
         y?: number,
         targetElement?: HTMLElement,
-        isBacklink: boolean,
         originalRefBlockIDs?: IObject,
+        isBacklink: boolean,
     }) => {
         window.siyuan.blockPanels.push(new BlockPanel({
             app: this.app,
@@ -393,8 +392,7 @@ export class Plugin {
             isBacklink: options.isBacklink,
             x: options.x,
             y: options.y,
-            nodeIds: options.ids,
-            defIds: options.defIds,
+            refDefs: options.refDefs,
         }));
     };
 

app/src/protyle/header/Title.ts

@@ -346,7 +346,7 @@ export class Title {
         }
         this.element.querySelector(".protyle-attr").innerHTML = nodeAttrHTML;
         if (response.data.refCount !== 0) {
-            this.element.querySelector(".protyle-attr").insertAdjacentHTML("beforeend", `<div class="protyle-attr--refcount popover__block" data-defids='${JSON.stringify([protyle.block.rootID])}' data-id='${JSON.stringify(response.data.refIDs)}'>${response.data.refCount}</div>`);
+            this.element.querySelector(".protyle-attr").insertAdjacentHTML("beforeend", `<div class="protyle-attr--refcount popover__block">${response.data.refCount}</div>`);
         }
         // 存在设置新建文档名模板，不能使用 Untitled 进行判断，https://ld246.com/article/1649301009888
         if (this.editElement && new Date().getTime() - dayjs(response.data.id.split("-")[0]).toDate().getTime() < 2000) {

app/src/protyle/util/compatibility.ts

@@ -233,7 +233,7 @@ export const getLocalStorage = (cb: () => void) => {
             dark: "dark",
             annoColor: "var(--b3-pdf-background1)"
         };
-        defaultStorage[Constants.LOCAL_LAYOUTS] = [];   // {name: "", layout:{}, time: number, filespaths: filesPath[]}
+        defaultStorage[Constants.LOCAL_LAYOUTS] = [];   // {name: "", layout:{}, time: number, filespaths: IFilesPath[]}
         defaultStorage[Constants.LOCAL_AI] = [];   // {name: "", memo: ""}
         defaultStorage[Constants.LOCAL_PLUGIN_DOCKS] = {};  // { pluginName: {dockId: IPluginDockTab}}
         defaultStorage[Constants.LOCAL_PLUGINTOPUNPIN] = [];
@@ -284,7 +284,7 @@ export const getLocalStorage = (cb: () => void) => {
             currentTab: "emoji"
         };
         defaultStorage[Constants.LOCAL_FONTSTYLES] = [];
-        defaultStorage[Constants.LOCAL_FILESPATHS] = [];    // filesPath[]
+        defaultStorage[Constants.LOCAL_FILESPATHS] = [];    // IFilesPath[]
         defaultStorage[Constants.LOCAL_SEARCHDATA] = {
             page: 1,
             sort: 0,

app/src/protyle/util/onGet.ts

@@ -233,12 +233,12 @@ const setHTML = (options: {
         protyle.block.id = protyle.block.rootID;
         protyle.wysiwyg.element.setAttribute("data-doc-type", "NodeDocument");
     }
-    if (protyle.options.defId) {
-        protyle.wysiwyg.element.querySelectorAll(`[data-id="${protyle.options.defId}"]`).forEach(item => {
+    protyle.options.defIds?.forEach(item => {
+        protyle.wysiwyg.element.querySelectorAll(`[data-id="${item}"]`).forEach(item => {
             item.classList.add("def--mark");
         });
-        protyle.options.defId = undefined;
-    }
+    });
+    protyle.options.defIds = [];
     if (options.action.includes(Constants.CB_GET_APPEND) || options.action.includes(Constants.CB_GET_BEFORE)) {
         protyle.app.plugins.forEach(item => {
             item.eventBus.emit("loaded-protyle-dynamic", {

app/src/protyle/wysiwyg/index.ts

@@ -2436,7 +2436,7 @@ export class WYSIWYG {
                             app: protyle.app,
                             targetElement: embedItemElement,
                             isBacklink: false,
-                            nodeIds: [embedId],
+                            refDefs: [{refID: embedId}]
                         }));
                     }
                     /// #endif

app/src/protyle/wysiwyg/keydown.ts

@@ -1775,7 +1775,7 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
                     app: protyle.app,
                     isBacklink: false,
                     targetElement: refElement,
-                    nodeIds: [id],
+                    refDefs: [{refID: id}]
                 }));
                 event.preventDefault();
                 event.stopPropagation();

app/src/types/index.d.ts

@@ -217,7 +217,12 @@ interface Window {
     destroyTheme(): Promise<void>
 }
 
-interface filesPath {
+interface IRefDefs {
+    refID: string,
+    defIDs?: string[]
+}
+
+interface IFilesPath {
     notebookId: string,
     openPaths: string[]
 }
@@ -234,7 +239,7 @@ interface ISaveLayout {
     name: string,
     layout: IObject
     time: number
-    filesPaths: filesPath[]
+    filesPaths: IFilesPath[]
 }
 
 interface IWorkspace {

app/src/types/protyle.d.ts

@@ -448,7 +448,7 @@ interface IProtyleOptions {
     rootId?: string
     originalRefBlockIDs?: IObject
     key?: string
-    defId?: string
+    defIds?: string[]
     render?: {
         background?: boolean
         title?: boolean

app/src/util/Tree.ts

@@ -126,12 +126,12 @@ ${item.label ? "data-label='" + item.label + "'" : ""}>
             }
             let iconHTML;
             if (type === "outline") {
-                iconHTML = `<svg data-defids='["${item.defID}"]' class="b3-list-item__graphic popover__block" data-id="${item.id}" style="height: 22px;width: 10px;"><use xlink:href="#${getIconByType(item.type, item.subType)}"></use></svg>`;
+                iconHTML = `<svg data-showref="true" class="b3-list-item__graphic popover__block" data-id="${item.id}" style="height: 22px;width: 10px;"><use xlink:href="#${getIconByType(item.type, item.subType)}"></use></svg>`;
             } else {
                 if (item.type === "NodeDocument") {
-                    iconHTML = `<span data-defids='["${item.defID}"]' class="b3-list-item__graphic popover__block" data-id="${item.id}">${unicode2Emoji(item.ial.icon || window.siyuan.storage[Constants.LOCAL_IMAGES].file)}</span>`;
+                    iconHTML = `<span data-showref="true" class="b3-list-item__graphic popover__block" data-id="${item.id}">${unicode2Emoji(item.ial.icon || window.siyuan.storage[Constants.LOCAL_IMAGES].file)}</span>`;
                 } else {
-                    iconHTML = `<svg data-defids='["${item.defID}"]' class="b3-list-item__graphic popover__block" data-id="${item.id}"><use xlink:href="#${getIconByType(item.type, item.subType)}"></use></svg>`;
+                    iconHTML = `<svg data-showref="true" class="b3-list-item__graphic popover__block" data-id="${item.id}"><use xlink:href="#${getIconByType(item.type, item.subType)}"></use></svg>`;
                 }
             }
             let style = "";