feat: /add new property

src/main/frontend/commands.cljs

@@ -5,10 +5,11 @@
             [frontend.date :as date]
             [frontend.db :as db]
             [frontend.db.utils :as db-utils]
+            [frontend.extensions.video.youtube :as youtube]
             [frontend.handler.draw :as draw]
             [frontend.handler.notification :as notification]
             [frontend.handler.plugin :as plugin-handler]
-            [frontend.extensions.video.youtube :as youtube]
+            [frontend.handler.property :as property-handler]
             [frontend.search :as search]
             [frontend.state :as state]
             [frontend.util :as util]
@@ -16,13 +17,13 @@
             [frontend.util.marker :as marker]
             [frontend.util.priority :as priority]
             [frontend.util.property-edit :as property-edit]
-            [logseq.graph-parser.util :as gp-util]
-            [logseq.graph-parser.config :as gp-config]
-            [logseq.graph-parser.property :as gp-property]
-            [logseq.graph-parser.util.page-ref :as page-ref]
-            [logseq.graph-parser.util.block-ref :as block-ref]
             [goog.dom :as gdom]
             [goog.object :as gobj]
+            [logseq.graph-parser.config :as gp-config]
+            [logseq.graph-parser.property :as gp-property]
+            [logseq.graph-parser.util :as gp-util]
+            [logseq.graph-parser.util.block-ref :as block-ref]
+            [logseq.graph-parser.util.page-ref :as page-ref]
             [promesa.core :as p]))
 
 ;; TODO: move to frontend.handler.editor.commands
@@ -241,7 +242,6 @@
 
        ;; ["Upload an image" [[:editor/click-hidden-file-input :id]]]
 
-
     (headings)
 
     ;; time & date
@@ -297,7 +297,8 @@
      ["Embed Youtube timestamp" [[:youtube/insert-timestamp]]]
 
      ["Embed Twitter tweet" [[:editor/input "{{tweet }}" {:last-pattern command-trigger
-                                                          :backward-pos 2}]]]]
+                                                          :backward-pos 2}]]]
+     ["Add new property" property-handler/editing-new-property!]]
 
     @*extend-slash-commands
     ;; Allow user to modify or extend, should specify how to extend.

src/main/frontend/components/block.cljs

@@ -2854,7 +2854,7 @@
         (block-right-menu config block edit?))]
 
      (when (config/db-based-graph? repo)
-       (property-component/properties-area block (:block/properties block)))
+       (property-component/properties-area block (:block/properties block) edit-input-id))
 
      (block-children config block children collapsed?)
 

src/main/frontend/components/property.cljs

@@ -222,15 +222,18 @@
 ;;     (properties-area entity properties refs-properties' block-components-m)))
 
 (rum/defcs properties-area <
-  rum/static
-  (rum/local nil ::new-property)
+  rum/reactive
   (rum/local nil ::properties)
+  (rum/local nil ::property-key)
+  (rum/local nil ::property-value)
   {:will-mount (fn [state]
                  (reset! (::properties state) (second (:rum/args state)))
                  state)}
-  [state block _properties]
-  (let [*new-property (::new-property state)
+  [state block _properties edit-input-id]
+  (let [new-property? (state/sub edit-input-id :path-in-sub-atom :ui/new-property)
         *properties (::properties state)
+        *property-key (::property-key state)
+        *property-value (::property-value state)
         repo (state/get-current-repo)]
     [:div.ls-properties-area.pl-6
      (when (seq @*properties)
@@ -251,17 +254,23 @@
             [:div
              [:a.mr-2 (str prop-uuid-or-built-in-prop)]
              [:span v]]))])
-     (if (nil? @*new-property)
-       [:a {:title "Add another value"
-            :on-click (fn [] (reset! *new-property {}))}
-        (ui/icon "circle-plus")]
-
+     (cond
+       new-property?
        [:div
-        [:input.block-properties {:on-change #(swap! *new-property assoc :k (util/evalue %))}]
-        [:input.block-properties {:on-change #(swap! *new-property assoc :v (util/evalue %))}]
+        [:input.block-properties {:on-change #(reset! *property-key (util/evalue %))}]
+        [:input.block-properties {:on-change #(reset! *property-value (util/evalue %))}]
         [:a {:on-click (fn []
-                         (when (and (:k @*new-property) (:k @*new-property))
-                           (property-handler/add-property! repo block (:k @*new-property) (:v @*new-property))
-                           (reset! *properties (:block/properties (db/pull [:block/uuid (:block/uuid block)])))
-                           (reset! *new-property nil)))}
-         "Save"]])]))
+                         (when (and @*property-key @*property-value)
+                           (property-handler/add-property! repo block @*property-key @*property-value)
+                           (reset! *properties (:block/properties (db/pull [:block/uuid (:block/uuid block)]))))
+                         (reset! *property-key nil)
+                         (reset! *property-value nil))}
+         "Save"]]
+
+       (seq @*properties)
+       [:a {:title "Add another value"
+            :on-click (fn []
+                        (state/set-state! edit-input-id true :path-in-sub-atom :ui/new-property)
+                        (reset! *property-key nil)
+                        (reset! *property-value nil))}
+        (ui/icon "circle-plus")])]))

src/main/frontend/handler/property.cljs

@@ -134,3 +134,9 @@
                  :block/refs refs}))))
           (state/clear-editor-action!)
           (state/clear-edit!))))))
+
+(defn editing-new-property!
+  []
+  (when-let [edit-input-id (state/get-edit-input-id)]
+    (state/set-state! edit-input-id true :path-in-sub-atom :ui/new-property)
+    (state/clear-edit!)))

src/main/frontend/state.cljs

@@ -102,6 +102,7 @@
                                                false
                                                true)
       :ui/scrolling?                         (atom false)
+      :ui/new-property                       (atom {})
       :document/mode?                        document-mode?
 
       :config                                {}