enhance(ux): block inline editing in table

1. Click to edit block title, click the right arrow button in the
popup to redirect to the block if needed
2. Click sidebar icon or shift+click to open in sidebar
3. mod+click to redirect to the block

src/main/frontend/components/block.cljs

@@ -2964,7 +2964,8 @@
                    (not hidden?))
                  (not (and block-ref? (or (seq ast-title) (seq ast-body))))
                  (not (:slide? config))
-                 (not= block-type :whiteboard-shape))
+                 (not= block-type :whiteboard-shape)
+                 (not (:table-block-title? config)))
         (properties-cp config block))
 
       (block-content-inner config block ast-body plugin-slotted? collapsed? block-ref-with-title?)
@@ -3060,7 +3061,8 @@
            (block-content config block edit-input-id block-id slide? *show-query?))
 
           (when (and (not hide-block-refs-count?)
-                     (not named?))
+                     (not named?)
+                     (not (:table-block-title? config)))
             [:div.flex.flex-row.items-center
              (when (and (:embed? config)
                         (:embed-parent config))
@@ -3078,16 +3080,17 @@
                                     (editor-handler/edit-block! block :max))}
                 svg/edit])])])
 
-       [:div.flex.flex-row.items-center.self-start.gap-1
-        (when (and db-based? (not table?)) (block-positioned-properties config block :block-right))
+       (when-not (:table-block-title? config)
+         [:div.flex.flex-row.items-center.self-start.gap-1
+          (when (and db-based? (not table?)) (block-positioned-properties config block :block-right))
 
-        (when-not (or (:table? config) (:property? config) (:page-title? config))
-          (block-refs-count block refs-count *hide-block-refs?))
+          (when-not (or (:table? config) (:property? config) (:page-title? config))
+            (block-refs-count block refs-count *hide-block-refs?))
 
-        (when-not (or (:block-ref? config) (:table? config) (:gallery-view? config)
-                      (:property? config))
-          (when (and db-based? (seq (:block/tags block)))
-            (tags-cp (assoc config :block/uuid (:block/uuid block)) block)))]]]]))
+          (when-not (or (:block-ref? config) (:table? config) (:gallery-view? config)
+                        (:property? config))
+            (when (and db-based? (seq (:block/tags block)))
+              (tags-cp (assoc config :block/uuid (:block/uuid block)) block)))])]]]))
 
 (rum/defcs single-block-cp < mixins/container-id
   [state _config block-uuid]
@@ -3586,7 +3589,7 @@
          :on-mouse-leave (fn [_e]
                            (block-mouse-leave *control-show? block-id doc-mode?))}
 
-        (when (and (not slide?) (not in-whiteboard?) (not property?))
+        (when (and (not slide?) (not in-whiteboard?) (not property?) (not (:table-block-title? config)))
           (let [edit? (or editing?
                           (= uuid (:block/uuid (state/get-edit-block))))]
             (block-control (assoc config :hide-bullet? (:page-title? config))

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

@@ -1198,7 +1198,7 @@
        (inline-text {} :markdown (macro-util/expand-value-if-macro (str value) (state/get-macros))))]))
 
 (rum/defc single-number-input
-  [block property value-block]
+  [block property value-block table-view?]
   (let [[editing? set-editing!] (rum/use-state false)
         *ref (rum/use-ref nil)
         *input-ref (rum/use-ref nil)
@@ -1223,7 +1223,8 @@
        (shui/input
         {:ref *input-ref
          :auto-focus true
-         :class "ls-number-input h-6 px-0 py-0 border-none bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 text-base"
+         :class (str "ls-number-input h-6 px-0 py-0 border-none bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 text-base"
+                     (when table-view? " text-sm"))
          :value value
          :on-change (fn [e] (set-value! (util/evalue e)))
          :on-blur (fn [_e] (set-property-value! value))
@@ -1272,7 +1273,7 @@
       (icon-row block editing?)
 
       (and (= type :number) (not editing?))
-      (single-number-input block property value)
+      (single-number-input block property value (:table-view? opts))
 
       :else
       (if (and select-type?'

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

@@ -31,3 +31,8 @@
 .ls-property-key .cp__select-input, .property-select .cp__select-input {
     @apply text-sm;
 }
+
+.ls-number {
+  @apply cursor-text;
+  min-height: 20px;
+}

src/main/frontend/components/views.cljs

@@ -191,36 +191,69 @@
 
 (rum/defc block-title
   "Used on table view"
-  [block {:keys [create-new-block property-ident width sidebar?]}]
-  (let [inline-title (state/get-component :block/inline-title)]
-    [:div.table-block-title.flex.items-center.w-full.h-full.cursor-pointer.items-center
-     {:on-click (fn [e]
-                  (p/let [block (or block (and (fn? create-new-block) (create-new-block)))]
+  [block {:keys [create-new-block width]}]
+  (let [inline-title (state/get-component :block/inline-title)
+        [opacity set-opacity!] (hooks/use-state 0)
+        add-to-sidebar! #(state/sidebar-add-block! (state/get-current-repo) (:db/id block) :block)]
+    [:div.table-block-title.relative.flex.items-center.w-full.h-full.cursor-pointer.items-center
+     {:on-mouse-over #(set-opacity! 100)
+      :on-mouse-out #(set-opacity! 0)
+      :on-click (fn [e]
+                  (p/let [block (or block (and (fn? create-new-block) (create-new-block)))
+                          redirect! #(some-> (:block/uuid block) route-handler/redirect-to-page!)]
                     (when block
                       (cond
-                        (and (= property-ident :block/title) sidebar?)
-                        (route-handler/redirect-to-page! (:block/uuid block))
-                        (= property-ident :block/title)
-                        (let [selection-type (some-> (js/window.getSelection)
-                                                     (gobj/get "type"))]
-                          (when-not (= selection-type "Range")
-                            (state/sidebar-add-block! (state/get-current-repo) (:db/id block) :block)))
+                        (util/meta-key? e)
+                        (redirect!)
+
+                        (.-shiftKey e)
+                        (add-to-sidebar!)
+
                         :else
                         (p/do!
                          (shui/popup-show!
                           (.-target e)
                           (fn []
-                            [:div {:style {:min-width (max 160 width)}}
-                             (block-container {:popup? true} block)])
+                            (let [width (-> (max 160 width)
+                                            (- 18))]
+                              [:div.ls-table-block.flex.flex-row.items-start
+                               {:style {:width width :max-width width}
+                                :on-click util/stop-propagation}
+                               (block-container {:popup? true
+                                                 :view? true
+                                                 :table-block-title? true} block)
+                               (shui/button
+                                {:variant :ghost
+                                 :title "Open node"
+                                 :on-click (fn [e]
+                                             (util/stop-propagation e)
+                                             (shui/popup-hide!)
+                                             (redirect!))
+                                 :class (str "h-6 w-6 !p-0 text-muted-foreground transition-opacity duration-100 ease-in bg-gray-01 "
+                                             "opacity-" opacity)}
+                                (ui/icon "arrow-right"))]))
                           {:align :start})
                          (editor-handler/edit-block! block :max {:container-id :unknown-container}))))))}
      (if block
-       [:div (inline-title
-              (some->> (:block/title block)
-                       string/trim
-                       string/split-lines
-                       first))]
-       [:div])]))
+       [:div
+        (inline-title
+         (some->> (:block/title block)
+                  string/trim
+                  string/split-lines
+                  first))]
+       [:div])
+
+     [:div.absolute.right-0.p-1
+      {:on-click (fn [e]
+                   (util/stop-propagation e)
+                   (add-to-sidebar!))}
+      [:div.flex.items-center
+       (shui/button
+        {:variant :ghost
+         :title "Open in sidebar"
+         :class (str "h-5 w-5 !p-0 text-muted-foreground transition-opacity duration-100 ease-in bg-gray-01 "
+                     "opacity-" opacity)}
+        (ui/icon "layout-sidebar-right"))]]]))
 
 (defn build-columns
   [config properties & {:keys [with-object-name? with-id? add-tags-column?]
@@ -254,8 +287,10 @@
               :name "Name"
               :type :string
               :header header-cp
-              :cell (fn [_table row _column]
-                      (block-title row {:property-ident :block/title :sidebar? (:sidebar? config)}))
+              :cell (fn [_table row _column style]
+                      (block-title row {:property-ident :block/title
+                                        :sidebar? (:sidebar? config)
+                                        :width (:width style)}))
               :disable-hide? true})]
           (keep
            (fn [property]

src/main/frontend/handler/editor.cljs

@@ -4029,9 +4029,10 @@
   (let [block (or (db/entity (:db/id block)) block)]
     (or
      (util/collapsed? block)
-     (and (:view? config)
+     (and (or (:view? config) (:popup? config))
           (or (ldb/page? block)
-              (some? (:block/_parent block)))))))
+              (some? (:block/_parent block))
+              (:table-block-title? config))))))
 
 (defn batch-set-heading!
   [block-ids heading]

src/main/frontend/handler/route.cljs

@@ -17,12 +17,14 @@
             [logseq.common.util :as common-util]
             [logseq.db :as ldb]
             [logseq.graph-parser.text :as text]
+            [logseq.shui.ui :as shui]
             [reitit.frontend.easy :as rfe]))
 
 (defn redirect!
   "If `push` is truthy, previous page will be left in history."
   [{:keys [to path-params query-params push]
     :or {push true}}]
+  (shui/popup-hide!)
   (let [route-fn (if push rfe/push-state rfe/replace-state)]
     (route-fn to path-params query-params))
   ;; force return nil for usage in render phase of React