improve(ux): WIP slash command for the code block

src/main/frontend/commands.cljs

@@ -296,7 +296,11 @@
      ["Embed Youtube timestamp" [[:youtube/insert-timestamp]]]
 
      ["Embed Twitter tweet" [[:editor/input "{{tweet }}" {:last-pattern (state/get-editor-command-trigger)
-                                                          :backward-pos 2}]]]]
+                                                          :backward-pos 2}]]]
+
+     ["Code block" [[:editor/input "```\n```" {:type         "block"
+                                               :backward-pos 4}]
+                    [:editor/select-code-block-mode]] "Insert code block"]]
 
     @*extend-slash-commands
     ;; Allow user to modify or extend, should specify how to extend.
@@ -691,6 +695,9 @@
       (state/set-timestamp-block! nil)
       (state/set-editor-action! :datepicker))))
 
+(defmethod handle-step :editor/select-code-block-mode [[_]]
+  (state/set-editor-action! :select-code-block-mode))
+
 (defmethod handle-step :editor/click-hidden-file-input [[_ _input-id]]
   (when-let [input-file (gdom/getElement "upload-file")]
     (.click input-file)))

src/main/frontend/components/editor.cljs

@@ -14,6 +14,7 @@
             [frontend.handler.editor.lifecycle :as lifecycle]
             [frontend.handler.page :as page-handler]
             [frontend.handler.paste :as paste-handler]
+            [frontend.search :as search-handler]
             [frontend.mixins :as mixins]
             [frontend.modules.shortcut.core :as shortcut]
             [frontend.state :as state]
@@ -289,8 +290,31 @@
           :item-render (fn [property-value] property-value)
           :class       "black"})))))
 
+(rum/defc code-block-mode-picker < rum/reactive
+  [id]
+  (when-let [modes (some->> js/window.CodeMirror (.-modes) (js/Object.keys) (js->clj) (remove #(= "null" %)))]
+    (when-let [input (gdom/getElement id)]
+      (let [pos          (state/get-editor-last-pos)
+            current-pos  (cursor/pos input)
+            edit-content (or (state/sub [:editor/content id]) "")
+            q            (or (editor-handler/get-selected-text)
+                             (gp-util/safe-subs edit-content pos current-pos)
+                             "")
+            matched      (seq (search-handler/fuzzy-search modes q))
+            matched      (or matched (if (string/blank? q) modes [q]))]
+        [:div
+         (ui/auto-complete matched
+                           {:on-chosen   (fn [chosen _click?]
+                                           (js/console.log chosen _click?))
+                            :on-enter    (fn []
+                                           (state/clear-editor-action!)
+                                           (commands/handle-step [:codemirror/focus]))
+                            :item-render (fn [mode chosen?]
+                                           [:strong mode])
+                            :class       "code-block-mode-picker"})]))))
+
 (rum/defcs input < rum/reactive
-  (rum/local {} ::input-value)
+                   (rum/local {} ::input-value)
   (mixins/event-mixin
    (fn [state]
      (mixins/on-key-down
@@ -577,6 +601,9 @@
       (= :datepicker action)
       (animated-modal "date-picker" (datetime-comp/date-picker id format nil) false)
 
+      (= :select-code-block-mode action)
+      (animated-modal "select-code-block-mode" (code-block-mode-picker id) true)
+
       (= :input action)
       (animated-modal "input" (input id
                                      (fn [command m]

src/main/frontend/components/editor.css

@@ -1,13 +1,13 @@
 #audio-record-toolbar {
-    position: fixed;
-    background-color: var(--ls-secondary-background-color);
-    width: 90px;
-    justify-content: left;
-    left: 5px;
-    transition: none;
-    z-index: 9999;
-    padding: 5px 5px 5px 8px;
-    border-radius: 5px;
+  position: fixed;
+  background-color: var(--ls-secondary-background-color);
+  width: 90px;
+  justify-content: left;
+  left: 5px;
+  transition: none;
+  z-index: 9999;
+  padding: 5px 5px 5px 8px;
+  border-radius: 5px;
 }
 
 .editor-wrapper {
@@ -41,7 +41,8 @@
     transform: translateY(calc(-100% - 2rem));
   }
 
-  &[data-modal-name="commands"] {
+  &[data-modal-name="commands"],
+  &[data-modal-name="select-code-block-mode"] {
     @screen sm {
       width: 380px !important;
       max-width: 90vw !important;
@@ -76,11 +77,11 @@ pre {
 }
 
 #time-repeater {
-    width: 135px;
-    
-    @screen sm {
-        min-width: 300px;
-    }
+  width: 135px;
+
+  @screen sm {
+    min-width: 300px;
+  }
 }