Merge pull request #5574 from penpot/luis-9234-visual-changes-in-comments-fixes

🐛 Fixes several bugs related to new comments

frontend/src/app/main/ui/comments.cljs

@@ -125,7 +125,9 @@
        (second)))
 
 ;; Component that renders the component content
-(mf/defc comment-content
+(mf/defc comment-content*
+  {::mf/props :obj
+   ::mf/private true}
   [{:keys [content]}]
   (let [comment-elements (mf/use-memo (mf/deps content) #(parse-comment content))]
     (for [[idx {:keys [type content]}] (d/enumerate comment-elements)]
@@ -138,11 +140,13 @@
          content]))))
 
 ;; Input text for comments with mentions
-(mf/defc comment-input
-  {::mf/wrap-props false}
-  [props]
+(mf/defc comment-input*
+  {::mf/props :obj
+   ::mf/private true
+   ::mf/wrap-props false}
+  [{:keys [value placeholder max-length autofocus? on-focus on-blur on-change on-esc on-ctrl-enter]}]
 
-  (let [value            (d/nilv (unchecked-get props "value") "")
+  (let [value            (d/nilv value "")
         prev-value       (h/use-previous value)
 
         local-ref        (mf/use-ref nil)
@@ -151,15 +155,6 @@
 
         prev-selection   (mf/use-var nil)
 
-        on-focus         (unchecked-get props "on-focus")
-        on-blur          (unchecked-get props "on-blur")
-        placeholder      (unchecked-get props "placeholder")
-        on-change        (unchecked-get props "on-change")
-        on-esc           (unchecked-get props "on-esc")
-        on-ctrl-enter    (unchecked-get props "on-ctrl-enter")
-        max-length       (unchecked-get props "max-length")
-        autofocus?       (unchecked-get props "autofocus")
-
         init-input
         (mf/use-callback
          (fn [node]
@@ -429,7 +424,9 @@
       :on-focus handle-focus
       :on-blur handle-blur}]))
 
-(mf/defc mentions-panel
+(mf/defc mentions-panel*
+  {::mf/props :obj
+   ::mf/private true}
   [{:keys [profiles]}]
 
   (let [mentions-str (mf/use-ctx mentions-context)
@@ -522,7 +519,9 @@
             [:div {:class (stl/css :comments-mentions-name)} fullname]
             [:div {:class (stl/css :comments-mentions-email)} email]]))])))
 
-(mf/defc mentions-button
+(mf/defc mentions-button*
+  {::mf/props :obj
+   ::mf/private true}
   []
   (let [mentions-str      (mf/use-ctx mentions-context)
         display-mentions* (mf/use-state false)
@@ -593,7 +592,7 @@
      [:div {:class (stl/css :author-timeago)} (dt/timeago (:modified-at item))]]]
 
    [:div {:class (stl/css :item)}
-    [:> comment-content {:content (:content item)}]]
+    [:> comment-content* {:content (:content item)}]]
 
    [:div {:class (stl/css :replies)}
     (let [total-comments (:count-comments item 1)
@@ -644,19 +643,18 @@
            (st/emit! (dcm/add-comment thread @content))
            (on-cancel)))]
     [:div {:class (stl/css :form)}
-     [:& comment-input
+     [:> comment-input*
       {:value @content
        :placeholder (tr "labels.reply.thread")
-       :autofocus true
+       :autofocus? true
        :on-blur on-blur
        :on-focus on-focus
-       :select-on-focus? false
        :on-ctrl-enter on-submit
        :on-change on-change
        :max-length 750}]
      (when (or @show-buttons? (seq @content))
        [:div {:class (stl/css :form-buttons-wrapper)}
-        [:> mentions-button]
+        [:> mentions-button*]
         [:> button* {:variant "ghost"
                      :on-click on-cancel}
          (tr "ds.confirm-cancel")]
@@ -684,16 +682,14 @@
                       (str/empty? @content))]
 
     [:div {:class (stl/css :form)}
-     [:& comment-input
+     [:> comment-input*
       {:value @content
-       :autofocus true
-       :select-on-focus true
-       :select-on-focus? false
+       :autofocus? true
        :on-ctrl-enter on-submit*
        :on-change on-change
        :max-length 750}]
      [:div {:class (stl/css :form-buttons-wrapper)}
-      [:> mentions-button]
+      [:> mentions-button*]
       [:> button* {:variant "ghost"
                    :on-click on-cancel}
        (tr "ds.confirm-cancel")]
@@ -740,7 +736,7 @@
          (mf/deps draft)
          (partial on-submit draft))]
 
-    [:& (mf/provider mentions-context) {:value mentions-str}
+    [:> (mf/provider mentions-context) {:value mentions-str}
      [:div
       {:class (stl/css :floating-preview-wrapper)
        :data-testid "floating-thread-bubble"
@@ -754,18 +750,17 @@
                     :left (str (+ pos-x 28) "px")}
             :on-click dom/stop-propagation}
       [:div {:class (stl/css :form)}
-       [:& comment-input
+       [:> comment-input*
         {:placeholder (tr "labels.write-new-comment")
          :value (or content "")
-         :autofocus true
-         :select-on-focus? false
+         :autofocus? true
          :on-esc on-esc
          :on-change on-change
          :on-ctrl-enter on-submit
          :max-length 750}]
 
        [:div {:class (stl/css :form-buttons-wrapper)}
-        [:> mentions-button]
+        [:> mentions-button*]
         [:> button* {:variant "ghost"
                      :on-click on-esc}
          (tr "ds.confirm-cancel")]
@@ -774,7 +769,7 @@
                      :disabled disabled?}
          (tr "labels.post")]]]
 
-      [:& mentions-panel {:profiles profiles}]]]))
+      [:> mentions-panel* {:profiles profiles}]]]))
 
 (mf/defc comment-floating-thread-header*
   {::mf/props :obj
@@ -911,7 +906,7 @@
                                  :on-submit on-submit
                                  :on-cancel on-cancel}]
          [:span {:class (stl/css :text)}
-          [:> comment-content {:content (:content comment)}]])]]
+          [:> comment-content* {:content (:content comment)}]])]]
 
      [:& dropdown {:show (= options (:id comment))
                    :on-close on-hide-options}
@@ -962,7 +957,7 @@
                         (some? position-modifier)
                         (gpt/transform position-modifier))
 
-        max-height    (when (some? viewport) (int (* (get viewport :height) 0.75)))
+        max-height    (when (some? viewport) (int (* (:height viewport) 0.5)))
 
         ;; We should probably look for a better way of doing this.
         bubble-margin {:x 24 :y 24}
@@ -1020,7 +1015,7 @@
 
         [:> comment-reply-form* {:thread thread}]
 
-        [:& mentions-panel {:profiles profiles}]])]))
+        [:> mentions-panel* {:profiles profiles}]])]))
 
 (mf/defc comment-floating-bubble*
   {::mf/props :obj

frontend/src/app/main/ui/comments.scss

@@ -333,6 +333,8 @@
   padding: $s-8;
   resize: vertical;
   width: 100%;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
 
   &:focus {
     border: $s-1 solid var(--input-border-color-active);

frontend/src/app/main/ui/workspace/viewport/comments.cljs

@@ -55,6 +55,8 @@
                (mapv (partial update-position positions))
                (dcm/apply-filters local profile)))
 
+        viewport (assoc vport :offset-x pos-x :offset-y pos-y)
+
         on-draft-cancel
         (mf/use-fn #(st/emit! :interrupt))
 
@@ -86,7 +88,7 @@
            (when (seq (dcm/apply-filters local profile [thread]))
              [:> cmt/comment-floating-thread* {:thread (update-position positions thread)
                                                :profiles profiles
-                                               :viewport {:offset-x pos-x :offset-y pos-y :width (:width vport) :height (:height vport)}
+                                               :viewport viewport
                                                :zoom zoom}])))
 
        (when-let [draft (:comment drawing)]

frontend/src/app/main/ui/workspace/viewport/comments.scss

@@ -19,9 +19,5 @@
 }
 
 .threads {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  position: fixed;
 }