From 1c69c2bbdcc10de494960b127bdbea9b456d2d94 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Mon, 26 Sep 2022 15:32:49 +0800
Subject: [PATCH] :bug: https://github.com/siyuan-note/siyuan/issues/5964
 inline memo

---
 app/src/protyle/toolbar/InlineMemo.ts | 61 +--------------------------
 app/src/protyle/toolbar/index.ts      | 21 +++++++++
 2 files changed, 23 insertions(+), 59 deletions(-)

diff --git a/app/src/protyle/toolbar/InlineMemo.ts b/app/src/protyle/toolbar/InlineMemo.ts
index 0eda473d8..78cdc163d 100644
--- a/app/src/protyle/toolbar/InlineMemo.ts
+++ b/app/src/protyle/toolbar/InlineMemo.ts
@@ -28,66 +28,9 @@ export class InlineMemo extends ToolbarItem {
                 return;
             }
 
-            fixTableRange(range);
-
-            if (!["DIV", "TD", "TH", "TR"].includes(range.startContainer.parentElement.tagName) && range.startOffset === 0 && !hasPreviousSibling(range.startContainer)) {
-                range.setStartBefore(range.startContainer.parentElement);
-            }
-            if (!["DIV", "TD", "TH", "TR"].includes(range.endContainer.parentElement.tagName) && range.endOffset === range.endContainer.textContent.length && !hasNextSibling(range.endContainer)) {
-                range.setEndAfter(range.endContainer.parentElement);
-            }
-            const oldHTML = nodeElement.outerHTML;
-            const newNodes: Element[] = [];
-            const contents = range.extractContents();
-            contents.childNodes.forEach((item: HTMLElement) => {
-                if (item.nodeType === 3) {
-                    if (item.textContent) {
-                        const inlineElement = document.createElement("span");
-                        inlineElement.setAttribute("data-type", "inline-memo");
-                        inlineElement.textContent = item.textContent;
-                        newNodes.push(inlineElement);
-                    }
-                } else {
-                    let types = (item.getAttribute("data-type") || "").split(" ");
-                    types.push("inline-memo");
-                    types = [...new Set(types)];
-                    if (item.tagName !== "BR" && item.tagName !== "WBR" && !types.includes("inline-math")) {
-                        item.setAttribute("data-type", types.join(" "));
-                        newNodes.push(item);
-                    } else if (item.tagName !== "WBR") {
-                        newNodes.push(item);
-                    }
-                }
+            protyle.toolbar.setInlineMark(protyle, "inline-memo", "range", {
+                type: "inline-memo",
             });
-            for (let i = 0; i < newNodes.length; i++) {
-                const currentNewNode = newNodes[i] as HTMLElement;
-                const nextNewNode = newNodes[i + 1] as HTMLElement;
-                if (currentNewNode.nodeType !== 3 && nextNewNode && nextNewNode.nodeType !== 3 &&
-                    isArrayEqual(nextNewNode.getAttribute("data-type").split(" "), currentNewNode.getAttribute("data-type").split(" ")) &&
-                    currentNewNode.style.fontSize === nextNewNode.style.fontSize &&
-                    currentNewNode.style.color === nextNewNode.style.color &&
-                    currentNewNode.style.webkitTextFillColor === nextNewNode.style.webkitTextFillColor &&
-                    currentNewNode.style.webkitTextStroke === nextNewNode.style.webkitTextStroke &&
-                    currentNewNode.style.textShadow === nextNewNode.style.textShadow &&
-                    currentNewNode.style.backgroundColor === nextNewNode.style.backgroundColor) {
-                    // 合并相同的 node
-                    nextNewNode.innerHTML = currentNewNode.innerHTML + nextNewNode.innerHTML;
-                    newNodes.splice(i, 1);
-                    i--;
-                } else {
-                    range.insertNode(newNodes[i]);
-                    range.collapse(false);
-                    // 数学公式不允许备注
-                    if (currentNewNode.nodeType !== 3 && (currentNewNode.getAttribute("data-type") || "").indexOf("inline-math") > -1) {
-                        newNodes.splice(i, 1);
-                        i--;
-                    }
-                }
-            }
-            if (newNodes[0]) {
-                range.setStart(newNodes[0].firstChild, 0);
-                protyle.toolbar.showRender(protyle, newNodes[0], newNodes, oldHTML);
-            }
         });
     }
 }
diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts
index 19ddc66b3..5511535c0 100644
--- a/app/src/protyle/toolbar/index.ts
+++ b/app/src/protyle/toolbar/index.ts
@@ -434,6 +434,23 @@ export class Toolbar {
                                     return true;
                                 }
                             });
+                        } else if (type === "inline-memo" && types.includes("inline-math")) {
+                            // 数学公式和备注不能同时存在
+                            types.find((item, index) => {
+                                if (item === "inline-math") {
+                                    types.splice(index, 1);
+                                    return true;
+                                }
+                            });
+                            item.textContent = item.getAttribute("data-content");
+                        } else if (type === "inline-math" && types.includes("inline-memo")) {
+                            // 数学公式和备注不能同时存在
+                            types.find((item, index) => {
+                                if (item === "inline-memo") {
+                                    types.splice(index, 1);
+                                    return true;
+                                }
+                            });
                         }
                         types = [...new Set(types)];
                         if (index === 0 && previousElement && previousElement.nodeType !== 3 &&
@@ -553,6 +570,10 @@ export class Toolbar {
                 return;
             }
         }
+        if (type === "inline-memo") {
+            protyle.toolbar.showRender(protyle, newNodes[0] as HTMLElement, newNodes as Element[], html);
+            return;
+        }
         nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
         updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, html);
         const wbrElement = nodeElement.querySelector("wbr");