From 0370d203c4a50f8091c9628a8cbce141d060973a Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Sat, 22 Jul 2023 00:36:21 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/8621

---
 app/src/mobile/util/keyboardToolbar.ts | 39 +++++++++++++++-----------
 app/src/protyle/gutter/index.ts        |  4 +--
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/app/src/mobile/util/keyboardToolbar.ts b/app/src/mobile/util/keyboardToolbar.ts
index 049f366de..c08a0aea3 100644
--- a/app/src/mobile/util/keyboardToolbar.ts
+++ b/app/src/mobile/util/keyboardToolbar.ts
@@ -505,13 +505,33 @@ export const initKeyboardToolbar = () => {
             return;
         }
         const buttonElement = hasClosestByMatchTag(target, "BUTTON");
-        if (!buttonElement || buttonElement.getAttribute("disabled") || getSelection().rangeCount === 0) {
+        if (!buttonElement || buttonElement.getAttribute("disabled")) {
             return;
         }
+        const type = buttonElement.getAttribute("data-type");
+        // appearance
+        if (["clear", "style2", "style4", "color", "backgroundColor", "fontSize", "style1"].includes(type)) {
+            const nodeElements = getFontNodeElements(protyle);
+            if (type === "style1") {
+                fontEvent(protyle, nodeElements, type, buttonElement.firstElementChild.style.backgroundColor + Constants.ZWSP + buttonElement.firstElementChild.style.color);
+            } else if (type === "fontSize") {
+                fontEvent(protyle, nodeElements, type, buttonElement.firstElementChild.textContent.trim());
+            } else if (type === "backgroundColor") {
+                fontEvent(protyle, nodeElements, type, buttonElement.firstElementChild.style.backgroundColor);
+            } else if (type === "color") {
+                fontEvent(protyle, nodeElements, type, buttonElement.firstElementChild.style.color);
+            } else {
+                fontEvent(protyle, nodeElements, type);
+            }
+        }
+
         event.preventDefault();
         event.stopPropagation();
+        if (getSelection().rangeCount === 0) {
+            return;
+        }
+
         const range = getSelection().getRangeAt(0);
-        const type = buttonElement.getAttribute("data-type");
         if (type === "done") {
             if (toolbarElement.clientHeight > 100) {
                 hideKeyboardToolbarUtil();
@@ -623,20 +643,5 @@ export const initKeyboardToolbar = () => {
             focusByRange(range);
             return;
         }
-        // appearance
-        if (["clear", "style2", "style4", "color", "backgroundColor", "fontSize", "style1"].includes(type)) {
-            const nodeElements = getFontNodeElements(protyle);
-            if (type === "style1") {
-                fontEvent(protyle, nodeElements, type, buttonElement.firstElementChild.style.backgroundColor + Constants.ZWSP + buttonElement.firstElementChild.style.color);
-            } else if (type === "fontSize") {
-                fontEvent(protyle, nodeElements, type, buttonElement.firstElementChild.textContent.trim());
-            } else if (type === "backgroundColor") {
-                fontEvent(protyle, nodeElements, type, buttonElement.firstElementChild.style.backgroundColor);
-            } else if (type === "color") {
-                fontEvent(protyle, nodeElements, type, buttonElement.firstElementChild.style.color);
-            } else {
-                fontEvent(protyle, nodeElements, type);
-            }
-        }
     });
 };
diff --git a/app/src/protyle/gutter/index.ts b/app/src/protyle/gutter/index.ts
index 8d0b2d66f..039d52db6 100644
--- a/app/src/protyle/gutter/index.ts
+++ b/app/src/protyle/gutter/index.ts
@@ -433,10 +433,10 @@ export class Gutter {
         dynamicElements[1].classList.remove("fn__none");
         toolbarElement.querySelector('.keyboard__action[data-type="text"]').classList.add("protyle-toolbar__item--current");
         toolbarElement.querySelector('.keyboard__action[data-type="done"] use').setAttribute("xlink:href", "#iconCloseRound");
-        const oldScrollTop = protyle.contentElement.scrollTop;
+        toolbarElement.classList.remove("fn__none");
+        const oldScrollTop = protyle.contentElement.scrollTop + 333.5;  // toolbarElement.clientHeight
         renderTextMenu(protyle, toolbarElement);
         showKeyboardToolbarUtil(oldScrollTop);
-        toolbarElement.classList.remove("fn__none");
     }
 
     public renderMultipleMenu(protyle: IProtyle, selectsElement: Element[]) {