From ae960beb4745aa631ba786fb7a5c872f323d7944 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Thu, 6 Oct 2022 21:07:47 +0800
Subject: [PATCH] :iphone: https://github.com/siyuan-note/siyuan/issues/2621

---
 app/src/assets/scss/mobile.scss            | 21 ++++++++----
 app/src/assets/template/mobile/index.tpl   | 12 ++++---
 app/src/mobile/util/showKeyboardToolbar.ts | 40 ++++++++++++++++++++--
 3 files changed, 58 insertions(+), 15 deletions(-)

diff --git a/app/src/assets/scss/mobile.scss b/app/src/assets/scss/mobile.scss
index 79d0b3514..d32345cad 100644
--- a/app/src/assets/scss/mobile.scss
+++ b/app/src/assets/scss/mobile.scss
@@ -254,15 +254,22 @@
   width: 100%;
   box-sizing: border-box;
   height: 32px;
-  background: var(--b3-theme-background-light);
+  background: var(--b3-theme-background);
   z-index: 221;
+  display: flex;
 
-  svg {
-    height: 18px;
-    width: 18px;
-    padding: 4px;
-    margin: 4px;
-    color: var(--b3-theme-on-surface);
+  button {
+    background: transparent;
+    padding: 0;
+    border: 0;
+
+    svg {
+      height: 18px;
+      width: 18px;
+      padding: 4px;
+      margin: 4px;
+      color: var(--b3-theme-on-surface);
+    }
   }
 }
 
diff --git a/app/src/assets/template/mobile/index.tpl b/app/src/assets/template/mobile/index.tpl
index fcaf092e9..d8948d6c0 100644
--- a/app/src/assets/template/mobile/index.tpl
+++ b/app/src/assets/template/mobile/index.tpl
@@ -55,11 +55,13 @@
 <div id="commonMenu" class="b3-menu fn__none"></div>
 <div id="message" class="b3-snackbars"></div>
 <div id="status" class="status status--hide"></div>
-<div id="keyboardToolbar" class="fn__none">
-    <svg data-type="undo"><use xlink:href="#iconUndo"></use></svg>
-    <svg data-type="redo"><use xlink:href="#iconRedo"></use></svg>
-    <svg data-type="outdent"><use xlink:href="#iconOutdent"></use></svg>
-    <svg data-type="indent"><use xlink:href="#iconIndent"></use></svg>
+<div id="keyboardToolbar" class="">
+    <span class="fn__flex-1"></span>
+    <button data-type="undo"><svg><use xlink:href="#iconUndo"></use></svg></button>
+    <button data-type="redo"><svg><use xlink:href="#iconRedo"></use></svg></button>
+    <button data-type="indent"><svg><use xlink:href="#iconIndent"></use></svg></button>
+    <button data-type="outdent"><svg><use xlink:href="#iconOutdent"></use></svg></button>
+    <span class="fn__flex-1"></span>
 </div>
 </body>
 </html>
diff --git a/app/src/mobile/util/showKeyboardToolbar.ts b/app/src/mobile/util/showKeyboardToolbar.ts
index a87ed0144..aca6f89f3 100644
--- a/app/src/mobile/util/showKeyboardToolbar.ts
+++ b/app/src/mobile/util/showKeyboardToolbar.ts
@@ -1,3 +1,7 @@
+import {getEventName} from "../../protyle/util/compatibility";
+import {listIndent, listOutdent} from "../../protyle/wysiwyg/list";
+import {hasClosestBlock, hasClosestByMatchTag} from "../../protyle/util/hasClosest";
+
 export const showKeyboardToolbar = (bottom = 0) => {
     const toolbarElement = document.getElementById("keyboardToolbar");
     toolbarElement.classList.remove("fn__none");
@@ -11,10 +15,40 @@ export const hideKeyboardToolbar = () => {
 
 export const initKeyboardToolbar = () => {
     const toolbarElement = document.getElementById("keyboardToolbar");
-    toolbarElement.addEventListener("click", (event) => {
+    toolbarElement.addEventListener(getEventName(), (event) => {
         const target = event.target as HTMLElement
-        if (target.tagName === "svg") {
-
+        const buttonElement = hasClosestByMatchTag(target, "BUTTON")
+        if (!buttonElement || !window.siyuan.mobileEditor) {
+            return;
+        }
+        const type = buttonElement.getAttribute("data-type");
+        const protyle = window.siyuan.mobileEditor.protyle
+        if (type === "undo") {
+            protyle.undo.undo(protyle)
+            return;
+        }
+        if (type === "redo") {
+            protyle.undo.redo(protyle)
+            return;
+        }
+        let range: Range
+        if (getSelection().rangeCount > 0) {
+            range = getSelection().getRangeAt(0)
+        }
+        if (!range) {
+            return;
+        }
+        const nodeElement = hasClosestBlock(range.startContainer);
+        if (!nodeElement) {
+            return;
+        }
+        if (!nodeElement.parentElement.classList.contains("li") || nodeElement.getAttribute("data-type") === "NodeCodeBlock") {
+            return;
+        }
+        if (type === "outdent") {
+            listOutdent(protyle, [nodeElement.parentElement], range);
+        } else if (type === "indent") {
+            listIndent(protyle, [nodeElement.parentElement], range);
         }
     })
 }