enhance(ux): incorrect break line for the property key editor

src/main/frontend/components/block.cljs

@@ -2819,6 +2819,19 @@
     (when-not edit?
       [:div.more (ui/icon "dots-circle-horizontal" {:size 18})])]])
 
+(rum/defc block-content-size-observer
+  [*wrap-ref config]
+  (rum/use-effect!
+    (fn []
+      (when-let [^js el (and (:property? config) (rum/deref *wrap-ref))]
+        (util/schedule
+          (fn []
+            (let [w (.-clientWidth el)]
+              (dom/set-attr! el :data-width w)
+              (dom/set-style! el :width (str w ".5px"))))))
+      []))
+  [:<>])
+
 (rum/defcs ^:large-vars/cleanup-todo block-content-or-editor < rum/reactive
   (rum/local false ::hover?)
   {:init (fn [state]
@@ -2857,12 +2870,15 @@
         raw-mode-block (state/sub :editor/raw-mode-block)
         type-block-editor? (and (contains? #{:code} (:logseq.property.node/display-type block))
                                 (not= (:db/id block) (:db/id raw-mode-block)))
-        config (assoc config :block-parent-id block-id)]
+        config (assoc config :block-parent-id block-id)
+        *inner-el (rum/create-ref)]
     [:div.block-content-or-editor-wrap
      {:class (when (:page-title? config) "ls-page-title-container")
       :data-node-type (some-> (:logseq.property.node/display-type block) name)}
      (when (and db-based? (not table?)) (block-positioned-properties config block :block-left))
+     (block-content-size-observer *inner-el config)
      [:div.block-content-or-editor-inner
+      {:ref *inner-el}
       [:div.flex.flex-1.flex-row.gap-1.items-center
        (if (and editor-box edit? (not type-block-editor?))
          [:div.editor-wrapper.flex.flex-1

src/main/frontend/components/editor.cljs

@@ -738,6 +738,23 @@
          (some-> config :on-escape-editing
                  (apply [(str uuid) (= type :esc)])))))))
 
+(rum/defc editor-box-size-observer
+  [*wrap-ref _config]
+  (rum/use-effect!
+    (fn []
+      (let [^js wrap (rum/deref *wrap-ref)
+            ^js content-wrap (some-> wrap (.closest ".block-content-or-editor-inner"))]
+        (when-let [content-width (some-> content-wrap (.-dataset) (.-width))]
+          (dom/set-style! wrap :width (str (inc (js/parseInt content-width)) "px"))
+          ;; clear content wrap width
+          (fn []
+            (util/schedule
+              (fn []
+                (dom/set-attr! content-wrap :data-width (.-clientWidth content-wrap))
+                (dom/set-style! content-wrap :width "auto")))))))
+    [])
+  [:<>])
+
 (rum/defcs box < rum/reactive
   {:init (fn [state]
            (assoc state
@@ -761,7 +778,9 @@
   lifecycle/lifecycle
   [state {:keys [format block parent-block]} id config]
   (let [*ref (::ref state)
+        *wrap-ref (rum/create-ref)
         content (state/sub-edit-content (:block/uuid block))
+        property? (:property? config)
         heading-class (get-editor-style-class block content format)
         opts (cond->
               {:id                id
@@ -784,11 +803,15 @@
 
                true
                (merge (:editor-opts config)))]
-    [:div.editor-inner.flex.flex-1 {:class (if block "block-editor" "non-block-editor")}
-
+    [:div.editor-inner.flex.flex-1
+     {:class (str (if block "block-editor" "non-block-editor")
+               (when property? " as-property"))
+      :ref *wrap-ref}
      (ui/ls-textarea opts)
      (mock-textarea content)
      (command-popups id format)
 
      (when format
-       (image-uploader id format))]))
+       (image-uploader id format))
+     (when property?
+       (editor-box-size-observer *wrap-ref config))]))