enhance(ui): polish the editor slash commands cp

src/main/frontend/commands.cljs

@@ -190,7 +190,7 @@
 (defn- headings
   []
   (mapv (fn [level]
-          (let [heading (str "h" level)]
+          (let [heading (str "Heading " level)]
             [heading (->heading level)])) (range 1 7)))
 
 (defonce *matched-commands (atom nil))
@@ -277,27 +277,23 @@
          ["Page embed" (embed-page) "Embed a page here"]
          ["Block reference" [[:editor/input block-ref/left-and-right-parens {:backward-pos 2}]
                              [:editor/search-block :reference]] "Create a backlink to a block"]
-       ["Block embed" (embed-block) "Embed a block here" "Embed a block here"]
-       ["Link" (link-steps) "Create a HTTP link"]
+         ["Block embed" (embed-block) "Embed a block here"]]
+
+        ;; format
+        [["Link" (link-steps) "Create a HTTP link" "FORMAT"]
          ["Image link" (image-link-steps) "Create a HTTP link to a image"]
          (when (state/markdown?)
            ["Underline" [[:editor/input "<ins></ins>"
                           {:last-pattern command-trigger
                            :backward-pos 6}]] "Create a underline text decoration"])
-       (when-not db?
-         ["Template" [[:editor/input command-trigger nil]
-                      [:editor/search-template]] "Insert a created template here"])
-       (cond
-         (and (util/electron?) (config/local-file-based-graph? (state/get-current-repo)))
-
-         ["Upload an asset" [[:editor/click-hidden-file-input :id]] "Upload file types like image, pdf, docx, etc.)"])]
-
-       ;; ["Upload an image" [[:editor/click-hidden-file-input :id]]]
+         ["Code block" [[:editor/input "```\n```\n" {:type "block"
+                                                     :backward-pos 5
+                                                     :only-breakline? true}]
+                        [:editor/select-code-block-mode]] "Insert code block"]]
 
         (headings)
 
         ;; time & date
-
         [["Tomorrow"
           #(get-page-ref-text (date/tomorrow))
           "Insert the date of tomorrow"
@@ -345,6 +341,16 @@
                      (p/let [_ (draw/create-draw-with-default-content path)]
                        (println "draw file created, " path))
                      text)) "Draw a graph with Excalidraw"]
+
+         (cond
+           (and (util/electron?) (config/local-file-based-graph? (state/get-current-repo)))
+
+           ["Upload an asset" [[:editor/click-hidden-file-input :id]] "Upload file types like image, pdf, docx, etc.)"])
+
+         (when-not db?
+           ["Template" [[:editor/input command-trigger nil]
+                        [:editor/search-template]] "Insert a created template here"])
+
          ["Embed HTML " (->inline "html")]
 
          ["Embed Video URL" [[:editor/input "{{video }}" {:last-pattern command-trigger
@@ -355,12 +361,7 @@
          ["Embed Twitter tweet" [[:editor/input "{{tweet }}" {:last-pattern command-trigger
                                                               :backward-pos 2}]]]
          ["Add new property" [[:editor/clear-current-slash]
-                            [:editor/new-property]]]
-
-       ["Code block" [[:editor/input "```\n```\n" {:type            "block"
-                                                   :backward-pos    5
-                                                   :only-breakline? true}]
-                      [:editor/select-code-block-mode]] "Insert code block"]]
+                              [:editor/new-property]]]]
 
         @*extend-slash-commands
         ;; Allow user to modify or extend, should specify how to extend.

src/main/frontend/components/editor.css

@@ -94,6 +94,11 @@ pre {
 .ui__popover-content, .ui__dropdown-menu-content {
   &[data-editor-popup-ref] {
     @apply p-1 w-72;
+
+    &[data-side=top] {
+      position: relative;
+      top: -18px;
+    }
   }
 
   &[data-editor-popup-ref=commands] {
@@ -101,8 +106,6 @@ pre {
 
     &[data-side=top] {
       max-height: min(calc(var(--radix-popover-content-available-height) - 60px), 460px);
-      position: relative;
-      top: -18px;
     }
 
     &[data-side=bottom] {