feat(ui): keep the caret position when insert chars by mobile bar

src/main/frontend/components/editor.cljs

@@ -223,25 +223,13 @@
     {:on-click #(editor-handler/move-up-down parent-state % false)}
     svg/move-down-block]
    [:button.bottom-action
-    {:on-click (fn [e]
-                 (let [old-content (state/sub [:editor/content parent-id])
-                       new-content (str old-content "\n")]
-                   (state/set-state! :editor/content {parent-id new-content}))
-                 (.stopPropagation e))}
+    {:on-click #(commands/simple-insert! parent-id "\n" {})}
     svg/multi-line-input]
    [:button.font-extrabold.bottom-action.-mt-1
-    {:on-click (fn [e]
-                 (let [old-content (state/sub [:editor/content parent-id])
-                       new-content (str old-content "[[]]")]
-                   (state/set-state! :editor/content {parent-id new-content}))
-                 (.stopPropagation e))}
+    {:on-click #(commands/simple-insert! parent-id "[[]]" {:backward-pos 2})}
     "[[]]"]
    [:button.font-extrabold.bottom-action.-mt-1
-    {:on-click (fn [e]
-                 (let [old-content (state/sub [:editor/content parent-id])
-                       new-content (str old-content "(())")]
-                   (state/set-state! :editor/content {parent-id new-content}))
-                 (.stopPropagation e))}
+    {:on-click #(commands/simple-insert! parent-id "(())" {:backward-pos 2})}
     "(())"]])
 
 (rum/defcs input < rum/reactive
@@ -633,7 +621,7 @@
                                 (state/clear-edit!))))))
                       :node (gdom/getElement id)
                       ;; :visibilitychange? true
-                      ))
+))
                    100)
 
                   (when-let [element (gdom/getElement id)]

src/main/frontend/page.cljs

@@ -14,7 +14,7 @@
                    (state/set-root-component! (:rum/react-component state))
                    (ui/inject-document-devices-envs!)
                    (ui/inject-dynamic-style-node!)
-                   (let [teardown-fn (comp (ui/setup-patch-ios-fixed-bottom-position))]
+                   (let [teardown-fn (comp (ui/setup-patch-ios-fixed-bottom-position!))]
                      (assoc state ::teardown teardown-fn)))
    :will-unmount (fn [state]
                    (let [teardown (::teardown state)]

src/main/frontend/ui.cljs

@@ -212,7 +212,7 @@
         (.appendChild js/document.head node))
       style)))
 
-(defn setup-patch-ios-fixed-bottom-position
+(defn setup-patch-ios-fixed-bottom-position!
   "fix a common issue about ios webpage viewport
    when soft keyboard setup"
   []
@@ -220,23 +220,22 @@
        (util/ios?)
        (not (nil? js/window.visualViewport)))
     (let [viewport js/visualViewport
-          style (get-dynamic-style-node)]
-      (let [sheet (.-sheet style)
-            type "resize"
-            handler
-            (fn []
-              (let [f (fn []
-                        (let [vh (+ (.-offsetTop viewport) (.-height viewport))
-                              rule (.. sheet -rules (item 0))
-                              set-top #(set! (.. rule -style -top) (str % "px"))]
-                          (set-top vh)))]
-                (js/setTimeout f 200)))
-            timer (js/setInterval handler 1000)]
-        (.insertRule sheet ".fix-ios-fixed-bottom {bottom:unset !important; transform: translateY(-100%); top: 0px;}")
-        (.addEventListener viewport type handler false)
-        (fn []
-          (.removeEventListener viewport type handler)
-          (js/clearInterval timer))))))
+          style (get-dynamic-style-node)
+          sheet (.-sheet style)
+          type "resize"
+          handler (fn []
+                    (let [f (fn []
+                              (let [vh (+ (.-offsetTop viewport) (.-height viewport))
+                                    rule (.. sheet -rules (item 0))
+                                    set-top #(set! (.. rule -style -top) (str % "px"))]
+                                (set-top vh)))]
+                      (js/setTimeout f 200)))
+          timer (js/setInterval handler 1000)]
+      (.insertRule sheet ".fix-ios-fixed-bottom {bottom:unset !important; transform: translateY(-100%); top: 0px;}")
+      (.addEventListener viewport type handler false)
+      (fn []
+        (.removeEventListener viewport type handler)
+        (js/clearInterval timer)))))
 
 ;; FIXME: compute the right scroll position when scrolling back to the top
 (defn on-scroll