enhance(ui): improve popup management and restore last saved cursor functionality

deps/shui/src/logseq/shui/popup/core.cljs

@@ -145,20 +145,6 @@
            auto-side? _auto-focus? _target root-props content-props
            _on-before-hide _on-after-hide]
     :as _props}]
-  ;; disableOutsidePointerEvents
-  ;(rum/use-effect!
-  ;  (fn []
-  ;    (when-not as-dropdown?
-  ;      (let [^js style js/document.body.style
-  ;            set-pointer-event! #(set! (. style -pointerEvents) %)
-  ;            try-unset! #(when (nil? (seq @*popups))
-  ;                          (set-pointer-event! nil))]
-  ;        (if open?
-  ;          (set-pointer-event! "none")
-  ;          (try-unset!))
-  ;        #(try-unset!))))
-  ;  [open?])
-
   (when-let [[x y _ height] position]
     (let [popup-root (if (not force-popover?) dropdown-menu popover)
           popup-trigger (if (not force-popover?) dropdown-menu-trigger popover-trigger)
@@ -173,7 +159,12 @@
           auto-side? (if (boolean? auto-side?) auto-side? true)
           content-props (cond-> content-props
                           auto-side? (assoc :side (auto-side-fn)))
-          hide (fn [] (hide! id 1))]
+          handle-key-escape! (fn [^js e]
+                               (when-not (false? (some-> content-props (:onEscapeKeyDown) (apply [e])))
+                                 (hide! id 1)))
+          handle-pointer-outside! (fn [^js e]
+                                    (when-not (false? (some-> content-props (:onPointerDownOutside) (apply [e])))
+                                      (hide! id 1)))]
       (popup-root
         (merge root-props {:open open?})
         (popup-trigger
@@ -185,10 +176,9 @@
                            :width 1
                            :top y
                            :left x}} ""))
-        (let [content-props (cond-> (merge {:onEscapeKeyDown hide
-                                            :disableOutsideScroll false
-                                            :onPointerDownOutside hide}
-                                      content-props)
+        (let [content-props (cond-> (merge content-props {:onEscapeKeyDown handle-key-escape!
+                                                          :disableOutsideScroll false
+                                                          :onPointerDownOutside handle-pointer-outside!})
                               (and (not force-popover?)
                                 (not as-dropdown?))
                               (assoc :on-key-down (fn [^js e]

resources/css/shui.css

@@ -284,11 +284,11 @@ div[data-radix-popper-content-wrapper] {
   @apply overflow-y-auto;
 
   &[data-side=top] {
-    max-height: calc(var(--radix-dropdown-menu-content-available-height) - 40px);
+    max-height: calc(var(--radix-dropdown-menu-content-available-height) - 20px);
   }
 
   &[data-side=bottom] {
-    max-height: calc(var(--radix-dropdown-menu-content-available-height) - 20px);
+    max-height: calc(var(--radix-dropdown-menu-content-available-height) - 10px);
   }
 
   &.text-popover-foreground {

src/main/frontend/components/editor.cljs

@@ -660,61 +660,63 @@
 (rum/defc shui-editor-popups
   [id format action _data]
   (hooks/use-effect!
-   (fn []
-     (let [pid (case action
-                 :commands
-                 (open-editor-popup! :commands
-                                     (commands id format)
-                                     {:content-props {:withoutAnimation false}})
-
-                 (:block-search :page-search :page-search-hashtag)
-                 (open-editor-popup! action
-                                     (if (= :block-search action)
-                                       (block-search id format)
-                                       (page-search id format))
-                                     {:root-props {:onOpenChange
-                                                   #(when-not %
-                                                      (when (contains?
-                                                             #{:block-search :page-search :page-search-hashtag}
-                                                             (state/get-editor-action))
-                                                        (state/clear-editor-action!)))}})
-
-                 :datepicker
-                 (open-editor-popup! :datepicker
-                                     (datetime-comp/date-picker id format nil) {})
-
-                 :input
-                 (open-editor-popup! :input
-                                     (editor-input id
-                                                   (fn [command m]
-                                                     (editor-handler/handle-command-input command id format m))
-                                                   (fn []
-                                                     (editor-handler/handle-command-input-close id)))
-                                     {:content-props {:onOpenAutoFocus #()}})
-
-                 :select-code-block-mode
-                 (open-editor-popup! :code-block-mode-picker
-                                     (code-block-mode-picker id format) {})
-
-                 :template-search
-                 (open-editor-popup! :template-search
-                                     (template-search id format) {})
-
-                 (:property-search :property-value-search)
-                 (open-editor-popup! action
-                                     (if (= :property-search action)
-                                       (property-search id) (property-value-search id))
-                                     {})
-
-                 :zotero
-                 (open-editor-popup! :zotero
-                                     (zotero/zotero-search id) {})
+    (fn []
+      (let [pid (case action
+                  :commands
+                  (open-editor-popup! :commands
+                    (commands id format)
+                    {:content-props {:withoutAnimation false}})
+
+                  (:block-search :page-search :page-search-hashtag)
+                  (open-editor-popup! action
+                    (if (= :block-search action)
+                      (block-search id format)
+                      (page-search id format))
+                    {:root-props {:onOpenChange
+                                  #(when-not %
+                                     (when (contains?
+                                             #{:block-search :page-search :page-search-hashtag}
+                                             (state/get-editor-action))
+                                       (state/clear-editor-action!)))}})
+
+                  :datepicker
+                  (open-editor-popup! :datepicker
+                    (datetime-comp/date-picker id format nil) {})
+
+                  :input
+                  (open-editor-popup! :input
+                    (editor-input id
+                      ;; on-submit
+                      (fn [command m]
+                        (editor-handler/handle-command-input command id format m))
+                      ;; on-cancel
+                      (fn []
+                        (editor-handler/handle-command-input-close id)))
+                    {:content-props {:onOpenAutoFocus #()}})
+
+                  :select-code-block-mode
+                  (open-editor-popup! :code-block-mode-picker
+                    (code-block-mode-picker id format) {})
+
+                  :template-search
+                  (open-editor-popup! :template-search
+                    (template-search id format) {})
+
+                  (:property-search :property-value-search)
+                  (open-editor-popup! action
+                    (if (= :property-search action)
+                      (property-search id) (property-value-search id))
+                    {})
+
+                  :zotero
+                  (open-editor-popup! :zotero
+                    (zotero/zotero-search id) {})
 
                   ;; TODO: try remove local model state
-                 false)]
-       #(when pid
-          (shui/popup-hide! pid))))
-   [action])
+                  false)]
+        #(when pid
+           (shui/popup-hide! pid))))
+    [action])
   [:<>])
 
 (rum/defc command-popups <

src/main/frontend/components/property/value.cljs

@@ -79,7 +79,9 @@
                        (db-property-handler/remove-block-property!
                         (:db/id block)
                         :logseq.property/icon))
-                     (clear-overlay!))]
+                     (clear-overlay!)
+                     (when editing?
+                       (editor-handler/restore-last-saved-cursor!)))]
 
     (hooks/use-effect!
      (fn []
@@ -94,13 +96,14 @@
                                             (.querySelector ".block-main-container"))]
                 (state/set-editor-action! :property-icon-picker)
                 (shui/popup-show! target
-                                  #(icon-component/icon-search
-                                    {:on-chosen on-chosen!
-                                     :icon-value icon
-                                     :del-btn? (some? icon)})
-                                  {:id :ls-icon-picker
-                                   :on-after-hide #(state/set-editor-action! nil)
-                                   :align :start})))))))
+                  #(icon-component/icon-search
+                     {:on-chosen on-chosen!
+                      :icon-value icon
+                      :del-btn? (some? icon)})
+                  {:id :ls-icon-picker
+                   :on-after-hide #(state/set-editor-action! nil)
+                   :content-props {:onEscapeKeyDown #(when editing? (editor-handler/restore-last-saved-cursor!))}
+                   :align :start})))))))
      [editing?])
 
     [:div.col-span-3.flex.flex-row.items-center.gap-2

src/main/frontend/handler/editor.cljs

@@ -1895,6 +1895,12 @@
 
   (handle-command-input-close id))
 
+(defn restore-last-saved-cursor!
+  ([] (restore-last-saved-cursor! (state/get-input)))
+  ([input]
+   (when-let [saved-cursor (and input (state/get-editor-last-pos))]
+     (cursor/move-cursor-to input saved-cursor true))))
+
 (defn- close-autocomplete-if-outside
   [input]
   (when (and input