enhance(ux): polish workflow for the code type block

src/main/frontend/commands.cljs

@@ -195,7 +195,7 @@
   []
   [[:editor/input "" {:last-pattern command-trigger}]
    [:editor/upsert-type-block :code]
-   [:codemirror/focus]])
+   [:editor/exit]])
 
 (defn file-based-code-block
   []

src/main/frontend/components/block.cljs

@@ -3545,59 +3545,74 @@
                        :class "px-1.5 h-7 text-xs mb-0.5"})]
          [:div.max-h-72.overflow-auto
           (ui/auto-complete matched
-            {:on-chosen (fn [chosen]
+            {:on-chosen (fn [chosen e]
                           (when (and (= :code (:logseq.property.node/display-type block))
                                   (not= chosen (:logseq.property.code/mode block)))
-                            (on-select! chosen))
+                            (on-select! chosen e))
                           (shui/popup-hide!))
              :item-render (fn [mode]
                             [:strong mode])})]]))))
 
 (rum/defc src-cp < rum/static
   [config options]
-  (when options
-    (let [html-export? (:html-export? config)
-          {:keys [lines language]} options
-          attr (when language
-                 {:data-lang language})
-          block (:block config)
-          code (if lines (apply str lines) (:block/title block))
-          [inside-portal? set-inside-portal?] (rum/use-state nil)]
-      (cond
-        html-export?
-        (highlight/html-export attr code)
+  (let [block (:block config)
+        *mode-ref (rum/use-ref nil)]
 
-        :else
-        (let [language (if (contains? #{"edn" "clj" "cljc" "cljs"} language) "clojure" language)]
-          [:div.ui-fenced-code-editor.flex.flex-1
-           {:ref (fn [el]
-                   (set-inside-portal? (and el (whiteboard-handler/inside-portal? el))))}
-           (cond
-             (nil? inside-portal?) nil
-
-             (or (:slide? config) inside-portal?)
-             (highlight/highlight (str (random-uuid))
-                                  {:class     (str "language-" language)
-                                   :data-lang language}
-                                  code)
-
-             :else
-             [:div.ls-code-editor-wrap.border.w-full
-              [:a.select-language
-               {:on-click (fn [^js e]
-                            (shui/popup-show! (.-target e)
-                              #(src-lang-picker block
-                                 (fn [mode]
-                                   (when-let [^js cm (get-cm-instance (.-target e))]
-                                     (.setOption cm "mode" mode)
-                                     (db-property-handler/set-block-property!
-                                       (:db/id block) :logseq.property.code/mode mode))))
-                              {:align :end}))}
-               (or language "Select a language")]
-              (lazy-editor/editor config (str (d/squuid)) attr code options)
-              (let [options (:options options) block (:block config)]
-                (when (and (= language "clojure") (contains? (set options) ":results"))
-                  (sci/eval-result code block)))])])))))
+    (rum/use-effect!
+      (fn []
+        (when (= (some-> (state/sub :editor/pending-type-block) :block :block/uuid) (:block/uuid block))
+          (util/schedule #(some-> (rum/deref *mode-ref) (.click)))
+          (state/set-state! :editor/pending-type-block nil)))
+      [])
+
+    (when options
+      (let [html-export? (:html-export? config)
+            {:keys [lines language]} options
+            attr (when language
+                   {:data-lang language})
+            code (if lines (apply str lines) (:block/title block))
+            [inside-portal? set-inside-portal?] (rum/use-state nil)]
+        (cond
+          html-export?
+          (highlight/html-export attr code)
+
+          :else
+          (let [language (if (contains? #{"edn" "clj" "cljc" "cljs"} language) "clojure" language)]
+            [:div.ui-fenced-code-editor.flex.flex-1
+             {:ref (fn [el]
+                     (set-inside-portal? (and el (whiteboard-handler/inside-portal? el))))}
+             (cond
+               (nil? inside-portal?) nil
+
+               (or (:slide? config) inside-portal?)
+               (highlight/highlight (str (random-uuid))
+                 {:class (str "language-" language)
+                  :data-lang language}
+                 code)
+
+               :else
+               [:div.ls-code-editor-wrap
+                [:a.select-language
+                 {:ref *mode-ref
+                  :on-click (fn [^js e]
+                              (let [target (.-target e)]
+                                (shui/popup-show! target
+                                  #(src-lang-picker block
+                                     (fn [mode ^js e]
+                                       (when-let [^js cm (get-cm-instance target)]
+                                         (.setOption cm "mode" mode)
+                                         (when (or (string/blank? (util/trim-safe code))
+                                                 (not= (some-> e (.-type)) "click"))
+                                           (.focus cm)
+                                           (.setCursor cm (.lineCount cm) 0))
+                                         (db-property-handler/set-block-property!
+                                           (:db/id block) :logseq.property.code/mode mode))))
+                                  {:align :end})))}
+                 (or language "Select a language")]
+                (lazy-editor/editor config (str (d/squuid)) attr code options)
+                (let [options (:options options) block (:block config)]
+                  (when (and (= language "clojure") (contains? (set options) ":results"))
+                    (sci/eval-result code block)))])]))))))
 
 (defn ^:large-vars/cleanup-todo markup-element-cp
   [{:keys [html-export?] :as config} item]

src/main/frontend/components/block.css

@@ -945,7 +945,7 @@ html.is-mac {
 }
 
 .ls-code-editor-wrap {
-  @apply relative;
+  @apply relative w-full;
 
   .extensions__code-lang {
     @apply hidden;

src/main/frontend/handler/events.cljs

@@ -959,8 +959,12 @@
             (not (string/blank? block-title)))
         ;; insert block
         (let [[p _ block'] (editor-handler/insert-new-block-aux! {} block "")]
-          (some-> p (p/then (fn [] (turn-type! block')))))
-        (turn-type! block)))))
+          (some-> p
+            (p/then #(turn-type! block'))
+            (p/then #(state/set-pending-type-block! block'))))
+        (-> (turn-type! block)
+          (p/then #(when (string/blank? block-title)
+                     (state/set-pending-type-block! block))))))))
 
 (rum/defc multi-tabs-dialog
   []

src/main/frontend/state.cljs

@@ -164,6 +164,7 @@
       :editor/cursor-range                   (atom nil)
       :editor/container-id                   (atom nil)
       :editor/next-edit-block                (atom nil)
+      :editor/pending-type-block             {}
 
       :selection/mode                        (atom false)
       ;; Warning: blocks order is determined when setting this attribute
@@ -2398,6 +2399,12 @@ Similar to re-frame subscriptions"
   []
   (:ui/handbooks-open? @state))
 
+(defn set-pending-type-block!
+  [block]
+  (when block
+    (set-state! :editor/pending-type-block
+      {:block block :at (js/Date.now)})))
+
 (defn get-handbook-route-chan
   []
   (:handbook/route-chan @state))