fix: can't add property if there're multiple same block properties

This commit also adds :editor/properties-container so that we can
focus on the properties area and introduce keyboard navigation.

src/main/frontend/components/property.cljs

@@ -437,14 +437,14 @@
                              nil))}]
          (property-select exclude-properties on-chosen input-opts)))]))
 
-(rum/defcs new-property < rum/reactive
+(rum/defcs new-property < rum/reactive rum/static
   (rum/local false ::new-property?)
   (rum/local nil ::property-key)
   (rum/local nil ::property-value)
-  [state block edit-input-id opts]
+  [state block id opts]
   (let [*new-property? (::new-property? state)
-        mode (state/sub :editor/mode)
-        new-property? (and @*new-property? (= mode :properties))]
+        container-id (state/sub :editor/properties-container)
+        new-property? (and @*new-property? (= container-id id))]
     [:div.ls-new-property
      (let [*property-key (::property-key state)
            *property-value (::property-value state)]
@@ -457,10 +457,9 @@
               (not config/publishing?)
               (not (:in-block-container? opts)))
          [:a.fade-link.flex.add-property
-          {:class edit-input-id
-           :on-click (fn []
+          {:on-click (fn []
                        (state/set-state! :editor/block block)
-                       (state/set-state! :editor/mode :properties)
+                       (state/set-state! :editor/properties-container id)
                        (reset! *new-property? true)
                        (reset! *property-key nil)
                        (reset! *property-value nil))}
@@ -627,8 +626,11 @@
 
 ;; TODO: Remove :page-configure? as it only ever seems to be set to true
 (rum/defcs ^:large-vars/cleanup-todo properties-area < rum/reactive
-  [state target-block edit-input-id {:keys [in-block-container? page-configure? class-schema?] :as opts}]
-  (let [block (resolve-linked-block-if-exists target-block)
+  {:init (fn [state]
+           (assoc state ::id (str (random-uuid))))}
+  [state target-block _edit-input-id {:keys [in-block-container? page-configure? class-schema?] :as opts}]
+  (let [id (::id state)
+        block (resolve-linked-block-if-exists target-block)
         block-properties (:block/properties block)
         properties (if (and class-schema? page-configure?)
                      (let [properties (:properties (:block/schema block))]
@@ -693,8 +695,9 @@
                    (empty? class->properties)
                    (not (:page-configure? opts)))
       [:div.ls-properties-area (cond-> (if in-block-container?
-                                         {}
-                                         {:class (when class-schema?  "class-properties")})
+                                         {:id id}
+                                         {:id id
+                                          :class (when class-schema?  "class-properties")})
                                  (:selected? opts)
                                  (update :class conj "select-none"))
        (properties-section block (if class-schema? properties own-properties) opts)
@@ -703,7 +706,7 @@
          (hidden-properties block full-hidden-properties opts))
 
        (when (not in-block-container?)
-         (rum/with-key (new-property block edit-input-id opts) (str (random-uuid))))
+         (rum/with-key (new-property block id opts) (str id "-add-property")))
 
        (when (and (seq class->properties) (not one-class?))
          (let [page-cp (:page-cp opts)]

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

@@ -343,7 +343,7 @@
            esc? (= (util/ekey e) "Escape")
            backspace? (= (util/ekey e) "Backspace")
            new-value (util/evalue e)
-           new-property? (= @(:editor/mode @state/state) :properties)]
+           new-property? (:editor/properties-container @state/state)]
        (when (and (or enter? esc? backspace?)
                   (not (state/get-editor-action)))
          (when-not backspace? (util/stop e))

src/main/frontend/state.cljs

@@ -130,7 +130,7 @@
       :editor/in-composition?                false
       :editor/content                        (atom {})
       :editor/block                          (atom nil)
-      :editor/mode                           (atom nil)
+      :editor/properties-container                           (atom nil)
       :editor/block-dom-id                   (atom nil)
       :editor/set-timestamp-block            (atom nil) ;; click rendered block timestamp-cp to set timestamp
       :editor/last-input-time                (atom {})
@@ -1286,7 +1286,7 @@ Similar to re-frame subscriptions"
   (swap! state merge {:editor/last-saved-cursor nil})
   (set-state! :editor/content {})
   (set-state! :editor/block nil)
-  (set-state! :editor/mode nil)
+  (set-state! :editor/properties-container nil)
   (set-state! :ui/select-query-cache {}))
 
 (defn into-code-editor-mode!