From 14be58e0ee39ef150279958d63a6b0e7deea95a6 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Fri, 9 Sep 2022 19:46:54 +0800
Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/5847

---
 app/src/protyle/wysiwyg/transaction.ts | 30 +++++++++++++++++++++++++-
 app/src/types/index.d.ts               | 12 +++++++++--
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/app/src/protyle/wysiwyg/transaction.ts b/app/src/protyle/wysiwyg/transaction.ts
index 68a46cbda..322624fdd 100644
--- a/app/src/protyle/wysiwyg/transaction.ts
+++ b/app/src/protyle/wysiwyg/transaction.ts
@@ -303,6 +303,34 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, focus: b
         updateRef(protyle, operation.id);
         return;
     }
+    if (operation.action === "updateAttrs") { // 调用接口才推送
+        protyle.wysiwyg.element.querySelectorAll(`[data-node-id="${operation.id}"]`).forEach(item => {
+            const data = operation.data as any
+            Object.keys(data.old).forEach(key => {
+                item.removeAttribute(key)
+            })
+            let nodeAttrHTML = ""
+            Object.keys(data.new).forEach(key => {
+                item.setAttribute(key, data.new[key]);
+                const escapeHTML = data.new[key]
+                if (key === "bookmark") {
+                    nodeAttrHTML += `<div class="protyle-attr--bookmark">${escapeHTML}</div>`;
+                } else if (key === "name") {
+                    nodeAttrHTML += `<div class="protyle-attr--name"><svg><use xlink:href="#iconN"></use></svg>${escapeHTML}</div>`;
+                } else if (key === "alias") {
+                    nodeAttrHTML += `<div class="protyle-attr--alias"><svg><use xlink:href="#iconA"></use></svg>${escapeHTML}</div>`;
+                } else if (key === "memo") {
+                    nodeAttrHTML += `<div class="protyle-attr--memo b3-tooltips b3-tooltips__sw" aria-label="${escapeHTML}"><svg><use xlink:href="#iconM"></use></svg></div>`;
+                }
+            })
+            const refElement = item.lastElementChild.querySelector(".protyle-attr--refcount");
+            if (refElement) {
+                nodeAttrHTML += refElement.outerHTML;
+            }
+            item.lastElementChild.innerHTML = nodeAttrHTML + Constants.ZWSP;
+        });
+        return;
+    }
     if (operation.action === "move") {
         let cloneRange;
         let range;
@@ -561,7 +589,7 @@ export const turnsIntoOneTransaction = (options: { protyle: IProtyle, selectsEle
     hideElements(["gutter"], options.protyle);
 };
 
-const removeUnfoldRepeatBlock = (html:string, protyle:IProtyle) => {
+const removeUnfoldRepeatBlock = (html: string, protyle: IProtyle) => {
     const temp = document.createElement("template");
     temp.innerHTML = html;
     Array.from(temp.content.children).forEach(item => {
diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts
index 5502ba73f..537004c98 100644
--- a/app/src/types/index.d.ts
+++ b/app/src/types/index.d.ts
@@ -4,7 +4,15 @@ type TDockType = "file" | "outline" | "bookmark" | "tag" | "graph" | "globalGrap
 type TDockPosition = "Left" | "Right" | "Top" | "Bottom"
 type TWS = "main" | "filetree" | "protyle"
 type TEditorMode = "preview" | "wysiwyg"
-type TOperation = "insert" | "update" | "delete" | "move" | "foldHeading" | "unfoldHeading" | "setAttrs" | "append"
+type TOperation = "insert"
+    | "update"
+    | "delete"
+    | "move"
+    | "foldHeading"
+    | "unfoldHeading"
+    | "setAttrs"
+    | "updateAttrs"
+    | "append"
 type TBazaarType = "templates" | "icons" | "widgets" | "themes"
 declare module "blueimp-md5"
 
@@ -140,7 +148,7 @@ interface IScrollAttr {
 interface IOperation {
     action: TOperation, // move， delete 不需要传 data
     id: string,
-    data?: string,
+    data?: string, // updateAttr 时为  { old: IObject, new: IObject }
     parentID?: string
     previousID?: string
     retData?: any