From ba9f99682b396d3fb145359f8a5aa3f31ee03c00 Mon Sep 17 00:00:00 2001
From: charlie <xyhp915@qq.com>
Date: Tue, 22 Apr 2025 14:27:28 +0800
Subject: [PATCH] enhance(capacitor): edit block

---
 src/main/capacitor/app.cljs          |  2 +-
 src/main/capacitor/app.css           |  6 ++
 src/main/capacitor/pages/blocks.cljs | 84 ++++++++++++++++++++++++----
 src/main/capacitor/pages/utils.cljs  |  5 ++
 4 files changed, 85 insertions(+), 12 deletions(-)

diff --git a/src/main/capacitor/app.cljs b/src/main/capacitor/app.cljs
index d917e9b728..c478b888f3 100644
--- a/src/main/capacitor/app.cljs
+++ b/src/main/capacitor/app.cljs
@@ -126,7 +126,7 @@
                {:routerDirection "forward"
                 :class "w-full"
                 :component settings/page}
-               (ionic/tabler-icon "help" {:size 24 :class "opacity-70"})))))
+               (ionic/tabler-icon "upload" {:size 24 :class "opacity-70"})))))
        ;; main content
        (if db-restoring?
          (ionic/ion-content
diff --git a/src/main/capacitor/app.css b/src/main/capacitor/app.css
index ffdd2ba4c6..2409e5a45a 100644
--- a/src/main/capacitor/app.css
+++ b/src/main/capacitor/app.css
@@ -24,4 +24,10 @@ ul {
   li {
     @apply pl-0;
   }
+}
+
+ion-textarea {
+  textarea {
+    @apply !p-1 min-h-[120px];
+  }
 }
\ No newline at end of file
diff --git a/src/main/capacitor/pages/blocks.cljs b/src/main/capacitor/pages/blocks.cljs
index 69df68c2f8..2f1f85d3e6 100644
--- a/src/main/capacitor/pages/blocks.cljs
+++ b/src/main/capacitor/pages/blocks.cljs
@@ -4,9 +4,68 @@
             [rum.core :as rum]
             [frontend.db.async :as db-async]
             [frontend.db.utils :as db-utils]
+            [frontend.handler.editor :as editor-handler]
             [frontend.state :as fstate]
             [capacitor.ionic :as ionic]))
 
+(rum/defc edit-block-modal
+  [block {:keys [reload-page!]}]
+  (let [[^js nav] (state/use-nav-root)
+        title (:block/title block)
+        *input (rum/use-ref nil)
+        close! #(.pop nav)]
+
+    (rum/use-effect!
+      (fn []
+        (js/setTimeout
+          (fn []
+            (when-let [^js input (some-> (rum/deref *input)
+                                   (.querySelector "textarea"))]
+              (.focus input)
+              (let [len (.-length (.-value input))]
+                (.setSelectionRange input len len))))
+          100)
+        #())
+      [])
+
+    (ionic/ion-page
+      (ionic/ion-header
+        (ionic/ion-toolbar
+          (ionic/ion-buttons {:slot "end"}
+            (ionic/ion-button {:on-click #(close!)} "Cancel"))
+
+          (ionic/ion-title (or title "Untitled"))))
+
+      (ionic/ion-content {:class "ion-padding"}
+        [:div.py-2
+         (ionic/ion-textarea {:placeholder "block content"
+                              :ref *input
+                              :auto-grow true
+                              :autofocus true
+                              :value (:block/title block)})]
+        [:div.flex.py-2
+         (ionic/ion-button
+           {:on-click (fn []
+                        (let [new? (nil? (:db/id block))
+                              val (.-value (.querySelector (rum/deref *input) "textarea"))]
+                          (if-let [page (and new? (:block/page block))]
+                            (-> (editor-handler/api-insert-new-block! val {:page (:db/id page)
+                                                                           :sibling? true})
+                              (p/then (fn []
+                                        (close!)
+                                        (reload-page!))))
+                            (-> (editor-handler/save-block! (fstate/get-current-repo)
+                                  (:block/uuid block) val)
+                              (p/then (fn []
+                                        (close!)
+                                        (reload-page!)))))))
+            :class "w-full"} "Save")]))))
+
+(defn nav-to-edit-block!
+  [block opts]
+  (some-> @state/*nav-root
+    (.push #(edit-block-modal block opts))))
+
 (rum/defc page [block]
   (let [[^js nav] (state/use-nav-root)
         [page set-page!] (rum/use-state (db-utils/entity (:db/id block)))
@@ -46,14 +105,17 @@
       (ionic/ion-content {:class "ion-padding"}
         (if loading?
           [:p.text-xl.text-center "Loading ..."]
-          [:<>
-           [:code ":db/id " (:db/id page)]
-           (when-let [children (:block/_parent page)]
-             [:ul
-              (for [block children]
-                [:li.text-xl (:block/title block)])])
-           [:p.pt-2.flex.justify-center
-            (ionic/ion-button
-              {:fill "clear"
-               :class "w-full"}
-              "+ Add")]])))))
+          (let [edit-opts {:reload-page! rerender!}]
+            [:<>
+             (when-let [children (:block/_parent page)]
+               [:ul.mt-2
+                {:class "min-h-[80px]"}
+                (for [block children]
+                  [:li.text-xl {:on-click #(nav-to-edit-block! block edit-opts)} (:block/title block)])])
+             [:p.pt-3.flex
+              (ionic/ion-button
+                {:fill "outline"
+                 :on-click #(nav-to-edit-block! {:block/page page} edit-opts)
+                 :class "w-full"}
+                "+ Add")]]))
+        ))))
diff --git a/src/main/capacitor/pages/utils.cljs b/src/main/capacitor/pages/utils.cljs
index 669e7ca745..8ac1e6cc1b 100644
--- a/src/main/capacitor/pages/utils.cljs
+++ b/src/main/capacitor/pages/utils.cljs
@@ -6,3 +6,8 @@
   [page-or-block]
   (some-> @state/*nav-root
     (.push #(page-blocks/page page-or-block))))
+
+(defn nav-to-edit-block!
+  [block opts]
+  (some-> @state/*nav-root
+    (.push #(page-blocks/edit-block-modal block opts))))