fix: can't edit property value

src/main/frontend/components/property.cljs

@@ -22,7 +22,8 @@
             [rum.core :as rum]
             [frontend.handler.route :as route-handler]
             [frontend.components.icon :as icon-component]
-            [frontend.components.dnd :as dnd]))
+            [frontend.components.dnd :as dnd]
+            [dommy.core :as dom]))
 
 (defn- update-property!
   [property property-name property-schema]
@@ -301,7 +302,8 @@
                          add-new-property?)
         class? (contains? (:block/type block) "class")
         property-type (get-in property [:block/schema :type])]
-    [:div.property-configure.flex.flex-1.flex-col
+    [:div.property-configure.flex.flex-1.flex-col {:on-mouse-down #(state/set-state! :editor/mouse-down-from-property-configure? true)
+                                                   :on-mouse-up #(state/set-state! :editor/mouse-down-from-property-configure? nil)}
      [:div.grid.gap-2.p-1
       [:div.grid.grid-cols-4.gap-1.items-center.leading-8
        [:label.col-span-1 "Name:"]
@@ -335,7 +337,7 @@
                                        :selected (= type (:type @*property-schema))})))]
          [:div.col-span-2
           (if property-type
-           (property-type-label property-type) 
+            (property-type-label property-type)
             (ui/select schema-types
                        (fn [_e v]
                          (let [type (keyword (string/lower-case v))]
@@ -416,7 +418,9 @@
           :on-click (fn [e]
                       (util/stop e)
                       (update-property! property @*property-name @*property-schema)
-                      (when toggle-fn (toggle-fn)))))]
+                      (when toggle-fn (toggle-fn))
+                      (when-let [input (first (dom/by-tag "textarea"))]
+                        (.focus input)))))]
 
       (when-not hide-delete?
         [:hr])
@@ -446,18 +450,16 @@
                                 *show-new-property-config?]}]
   (let [repo (state/get-current-repo)]
     ;; existing property selected or entered
-    (if-let [property (get-property-from-db property-name)]
+    (if-let [_property (get-property-from-db property-name)]
       (if (contains? db-property/hidden-built-in-properties (keyword property-name))
         (do (notification/show! "This is a built-in property that can't be used." :error)
             (pv/exit-edit-property))
         ;; Both conditions necessary so that a class can add its own page properties
-        (if (and (contains? (:block/type entity) "class") class-schema?)
+        (when (and (contains? (:block/type entity) "class") class-schema?)
           (pv/add-property! entity property-name "" {:class-schema? class-schema?
-                                                  ;; Only enter property names from sub-modal as inputting
-                                                  ;; property values is buggy in sub-modal
-                                                     :exit-edit? page-configure?})
-          (let [editor-id (str "ls-property-" (:db/id entity) "-" (:db/id property))]
-            (pv/set-editing! property editor-id "" ""))))
+                                                     ;; Only enter property names from sub-modal as inputting
+                                                     ;; property values is buggy in sub-modal
+                                                     :exit-edit? page-configure?})))
       ;; new property entered
       (if (db-property/valid-property-name? property-name)
         (if (and (contains? (:block/type entity) "class") page-configure?)

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

@@ -11,7 +11,6 @@
             [frontend.handler.editor :as editor-handler]
             [frontend.handler.page :as page-handler]
             [frontend.handler.property :as property-handler]
-            [frontend.modules.outliner.core :as outliner-core]
             [frontend.state :as state]
             [frontend.ui :as ui]
             [frontend.util :as util]
@@ -30,12 +29,12 @@
   (state/clear-edit!))
 
 (defn set-editing!
-  [property editor-id dom-id v]
+  [property editor-id dom-id v opts]
   (let [v (str v)
         cursor-range (if dom-id
                        (some-> (gdom/getElement dom-id) util/caret-range)
                        "")]
-    (state/set-editing! editor-id v property cursor-range)))
+    (state/set-editing! editor-id v property cursor-range opts)))
 
 (defn add-property!
   "If a class and in a class schema context, add the property to its schema.
@@ -130,7 +129,8 @@
 
 (defn- select-aux
   [block property {:keys [items selected-choices multiple-choices?] :as opts}]
-  (let [clear-value (str "No " (:block/original-name property))
+  (let [selected-choices (remove nil? selected-choices)
+        clear-value (str "No " (:block/original-name property))
         items' (if (and (seq selected-choices) (not multiple-choices?))
                  (cons {:value clear-value
                         :label clear-value}
@@ -251,16 +251,13 @@
 
 (defn- save-text!
   [repo block property value editor-id e]
-  (let [new-value (util/evalue e)
-        blank? (string/blank? new-value)]
+  (let [new-value (util/evalue e)]
     (when (not (state/get-editor-action))
       (util/stop e)
-      (when-not blank?
-        (when (not= (string/trim new-value) (and value (string/trim value)))
-          (property-handler/set-block-property! repo (:block/uuid block)
-                                                (:block/original-name property)
-                                                new-value
-                                                :old-value value)))
+      (when (not= new-value value)
+        (property-handler/set-block-property! repo (:block/uuid block)
+                                              (:block/original-name property)
+                                              (string/trim new-value)))
       (when (= js/document.activeElement (gdom/getElement editor-id))
         (exit-edit-property)))))
 
@@ -287,7 +284,8 @@
            :background "none"}
    :on-blur
    (fn [e]
-     (save-text! repo block property value editor-id e))
+     (when-not (:editor/mouse-down-from-property-configure? @state/state)
+       (save-text! repo block property value editor-id e)))
    :on-key-down
    (fn [e]
      (let [enter? (= (util/ekey e) "Enter")
@@ -444,19 +442,21 @@
        select-f
        dropdown-opts))))
 
-(rum/defc property-scalar-value < rum/reactive db-mixins/query
-  [block property value {:keys [inline-text block-cp
-                                editor-id dom-id row?
-                                editor-box editor-args editing?
-                                on-chosen]
-                         :as opts}]
-  (let [property (model/sub-block (:db/id property))
+(rum/defcs property-scalar-value < rum/reactive db-mixins/query
+  (rum/local nil ::ref)
+  [state block property value {:keys [inline-text block-cp
+                                      editor-id dom-id row?
+                                      editor-box editor-args editing?
+                                      on-chosen]
+                               :as opts}]
+  (let [*ref (::ref state)
+        property (model/sub-block (:db/id property))
         repo (state/get-current-repo)
         schema (:block/schema property)
         type (get schema :type :default)
         multiple-values? (= :many (:cardinality schema))
         editor-id (or editor-id (str "ls-property-" (:db/id block) "-" (:db/id property)))
-        editing? (or editing? (state/sub-editing? editor-id))
+        editing? (or editing? (and @*ref (state/sub-editing? @*ref)))
         select-type? (select-type? type)
         select-opts {:on-chosen on-chosen}]
     (if (and select-type? (not= type :date))
@@ -479,52 +479,54 @@
                                        (when (= (util/ekey e) "Enter")
                                          (add-property!)))}))
         ;; :others
-        (if editing?
-          [:div.flex.flex-1
-           (case type
-             :template
-             (let [id (first (:classes schema))
-                   template (when id (db/entity [:block/uuid id]))]
-               (when template
-                 (create-new-block-from-template! block property template)))
-
-             (let [config {:editor-opts (new-text-editor-opts repo block property value editor-id)}]
-               [:div
-                (editor-box editor-args editor-id (cond-> config
-                                                    multiple-values?
-                                                    (assoc :property-value value)))]))]
-          (let [class (str (when-not row? "flex flex-1 ")
-                           (when multiple-values? "property-value-content"))]
-            [:div {:id (or dom-id (random-uuid))
-                   :class class
-                   :style {:min-height 24}
-                   :on-click (fn []
-                               (when (and (= type :default) (not (uuid? value)))
-                                 (set-editing! property editor-id dom-id value)))}
-             (let [type (or (when (and (= type :default) (uuid? value)) :block)
-                            type
-                            :default)]
-               (if (string/blank? value)
-                 (if (= :template type)
-                   (let [id (first (:classes schema))
-                         template (when id (db/entity [:block/uuid id]))]
-                     (when template
-                       [:a.fade-link.pointer.text-sm
-                        {:on-click (fn [e]
-                                     (util/stop e)
-                                     (create-new-block-from-template! block property template))}
-                        (str "Use template #" (:block/original-name template))]))
-                   [:div.opacity-50.pointer.text-sm "Empty"])
-                 (case type
-                   :template
-                   (property-template-value {:editor-id editor-id}
-                                            value
-                                            opts)
-
-                   :block
-                   (property-block-value value block-cp editor-box opts)
-
-                   (inline-text {} :markdown (str value)))))]))))))
+        [:div.flex.flex-1 {:ref #(when-not @*ref (reset! *ref %))}
+         (if editing?
+           [:div.flex.flex-1
+            (case type
+              :template
+              (let [id (first (:classes schema))
+                    template (when id (db/entity [:block/uuid id]))]
+                (when template
+                  (create-new-block-from-template! block property template)))
+
+              (let [config {:editor-opts (new-text-editor-opts repo block property value editor-id)}]
+                [:div
+                 (editor-box editor-args editor-id (cond-> config
+                                                     multiple-values?
+                                                     (assoc :property-value value)))]))]
+           (let [class (str (when-not row? "flex flex-1 ")
+                            (when multiple-values? "property-value-content"))]
+             [:div.cursor-text
+              {:id (or dom-id (random-uuid))
+               :class class
+               :style {:min-height 24}
+               :on-click (fn []
+                           (when (and (= type :default) (not (uuid? value)))
+                             (set-editing! property editor-id dom-id value {:ref @*ref})))}
+              (let [type (or (when (and (= type :default) (uuid? value)) :block)
+                             type
+                             :default)]
+                (if (string/blank? value)
+                  (if (= :template type)
+                    (let [id (first (:classes schema))
+                          template (when id (db/entity [:block/uuid id]))]
+                      (when template
+                        [:a.fade-link.pointer.text-sm
+                         {:on-click (fn [e]
+                                      (util/stop e)
+                                      (create-new-block-from-template! block property template))}
+                         (str "Use template #" (:block/original-name template))]))
+                    [:div.opacity-50.pointer.text-sm "Empty"])
+                  (case type
+                    :template
+                    (property-template-value {:editor-id editor-id}
+                                             value
+                                             opts)
+
+                    :block
+                    (property-block-value value block-cp editor-box opts)
+
+                    (inline-text {} :markdown (str value)))))]))]))))
 
 (rum/defc multiple-values < rum/reactive
   [block property v {:keys [on-chosen dropdown? editing?]