enhance(ui): refactor the block/page/hashtag search modals with the shui popups

src/main/frontend/components/editor.cljs

@@ -744,6 +744,24 @@
                                        :data-editor-popup-ref "commands"}
                        :force-popover? true})
 
+                    (:block-search :page-search :page-search-hashtag)
+                    (shui/popup-show!
+                      pos (if (= :block-search action)
+                            (block-search id format)
+                            (page-search id format))
+                      {:id :editor.commands/block-search
+                       :align :start
+                       :root-props {:onOpenChange
+                                    #(when-not %
+                                       (when (contains?
+                                               #{:block-search :page-search :page-search-hashtag}
+                                               (state/get-editor-action))
+                                         (state/clear-editor-action!)))}
+                       :content-props {:onOpenAutoFocus #(.preventDefault %)
+                                       :onCloseAutoFocus #(.preventDefault %)
+                                       :data-editor-popup-ref (name action)}
+                       :force-popover? true})
+
                     :datepicker
                     (shui/popup-show!
                       pos (datetime-comp/date-picker id format nil)
@@ -798,10 +816,10 @@
        (= action :block-commands-classic)
        (animated-modal "block-commands" (block-commands id format) true)
 
-       (contains? #{:page-search :page-search-hashtag} action)
+       (contains? #{:page-search-classic :page-search-hashtag-classic} action)
        (animated-modal "page-search" (page-search id format) true)
 
-       (= :block-search action)
+       (= :block-search-classic action)
        (animated-modal "block-search" (block-search id format) true)
 
        (= :template-search action)

src/main/frontend/components/editor.css

@@ -35,22 +35,6 @@
   &[data-modal-name] {
     @apply bg-popover border overflow-x-hidden overflow-y-auto rounded-lg py-1;
   }
-
-  &[data-modal-name="commands"],
-  &[data-modal-name="select-code-block-mode"] {
-    @screen sm {
-      width: 380px !important;
-      max-width: 90vw !important;
-    }
-  }
-
-  &[data-modal-name="date-picker"] {
-    @apply py-0;
-
-    .rc-datepicker {
-      @apply my-0;
-    }
-  }
 }
 
 .is-mobile {
@@ -109,6 +93,12 @@ pre {
     }
   }
 
+  &[data-editor-popup-ref=page-search],
+  &[data-editor-popup-ref=block-search],
+  &[data-editor-popup-ref=page-search-hashtag] {
+    @apply px-1 py-1 w-96;
+  }
+
   &[data-editor-popup-ref=datepicker] {
     @apply w-auto;
   }