🐛 Fix problem in firefox comments

backend/src/app/rpc/commands/comments.clj

@@ -22,6 +22,7 @@
    [app.loggers.webhooks :as-alias webhooks]
    [app.rpc :as-alias rpc]
    [app.rpc.commands.files :as files]
+   [app.rpc.commands.profile :as profile]
    [app.rpc.commands.teams :as teams]
    [app.rpc.doc :as-alias doc]
    [app.rpc.quotes :as quotes]
@@ -58,24 +59,10 @@
   [{:keys [seqn]} {:keys [file-name page-name]}]
   (str/ffmt "#%, %, %" seqn file-name page-name))
 
-(defn decode-user-row
-  [user]
-  (-> user
-      (d/update-when :props db/decode-transit-pgobject)
-      (update
-       :mention-email?
-       (fn [{:keys [props]}]
-         (not= :none (-> props :notifications :email-comments))))
-
-      (update
-       :notification-email?
-       (fn [{:keys [props]}]
-         (= :all (-> props :notifications :email-comments))))))
-
 (defn get-team-users
   [conn team-id]
   (->> (teams/get-users+props conn team-id)
-       (map decode-user-row)
+       (map profile/decode-row)
        (d/index-by :id)))
 
 (defn- resolve-profile-name
@@ -84,6 +71,16 @@
               {::sql/columns [:fullname]})
       (get :fullname)))
 
+(defn- notification-email?
+  [profile-id owner-id props]
+  (if (= profile-id owner-id)
+    (not= :none (-> props :notifications :email-comments))
+    (= :all (-> props :notifications :email-comments))))
+
+(defn- mention-email?
+  [props]
+  (not= :none (-> props :notifications :email-comments)))
+
 (defn send-comment-emails!
   [conn {:keys [profile-id team-id] :as params} comment thread]
 
@@ -115,8 +112,8 @@
             (disj profile-id))]
 
     (doseq [mention comment-mentions]
-      (let [{:keys [fullname email mention-email?]} (get team-users mention)]
+      (let [{:keys [fullname email props]} (get team-users mention)]
-        (when mention-email?
+        (when (mention-email? props)
           (eml/send!
            {::eml/conn conn
             ::eml/factory eml/comment-mention
@@ -129,8 +126,8 @@
 
     ;; Send to the thread users
     (doseq [mention thread-mentions]
-      (let [{:keys [fullname email mention-email?]} (get team-users mention)]
+      (let [{:keys [fullname email props]} (get team-users mention)]
-        (when mention-email?
+        (when (mention-email? props)
           (eml/send!
            {::eml/conn conn
             ::eml/factory eml/comment-thread
@@ -143,8 +140,8 @@
 
     ;; Send to users with the "all" flag activated
     (doseq [user-id notificate-users-ids]
-      (let [{:keys [fullname email notification-email?]} (get team-users user-id)]
+      (let [{:keys [id fullname email props]} (get team-users user-id)]
-        (when notification-email?
+        (when (notification-email? id (:owner-id thread) props)
           (eml/send!
            {::eml/conn conn
             ::eml/factory eml/comment-notification
@@ -313,7 +310,7 @@
 (defn- get-unread-comment-threads
   [conn profile-id team-id]
   (let [profile (-> (db/get conn :profile {:id profile-id})
-                    (decode-user-row))
+                    (profile/decode-row))
         notify  (or (-> profile :props :notifications :dashboard-comments) :all)]
 
     (case notify

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

@@ -584,7 +584,10 @@
       (filter (comp not :is-resolved))
 
       (= :yours mode)
-      (filter #(contains? (:participants %) (:id profile))))))
+      (filter #(contains? (:participants %) (:id profile)))
+
+      (= :mentions mode)
+      (filter #(contains? (set (:mentions %)) (:id profile))))))
 
 (defn update-comment-thread-frame
   ([thread]

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

@@ -94,9 +94,11 @@
 (defn current-text-node
   "Retrieves the text node and the offset that the cursor is positioned on"
   [node]
+
   (let [selection     (wapi/get-selection)
-        anchor-node   (wapi/get-anchor-node selection)
+        range         (wapi/get-range selection 0)
-        anchor-offset (wapi/get-anchor-offset selection)]
+        anchor-node   (wapi/range-start-container range)
+        anchor-offset (wapi/range-start-offset range)]
     (when (and node (.contains node anchor-node))
       (let [span-node
             (if (instance? js/Text anchor-node)
@@ -203,6 +205,13 @@
         handle-select
         (mf/use-callback
          (fn []
+           (let [node          (mf/ref-val local-ref)
+                 selection     (wapi/get-selection)
+                 range         (wapi/get-range selection 0)
+                 anchor-node   (wapi/range-start-container range)]
+             (when (and (= node anchor-node) (.-collapsed range))
+               (wapi/set-cursor-after! anchor-node)))
+
            (let [node (mf/ref-val local-ref)
                  [span-node offset] (current-text-node node)
                  [prev-span prev-offset] @prev-selection]
@@ -285,13 +294,13 @@
                     (subs node-text (+ current-at-symbol (count mention)))
 
                     mention-span (create-mention-node (-> data :user :id) (-> data :user :fullname))
-                    after-span (create-text-node (dm/str "​" suffix))
+                    after-span (create-text-node (dm/str " " suffix))
                     sel (wapi/get-selection)]
 
                 (dom/set-html! span-node (if (empty? prefix) "​" prefix))
                 (dom/insert-after! node span-node mention-span)
                 (dom/insert-after! node mention-span after-span)
-                (wapi/set-cursor-before! after-span)
+                (wapi/set-cursor-after! after-span)
                 (wapi/collapse-end! sel)
 
                 (when on-change
@@ -299,7 +308,7 @@
 
         handle-key-down
         (mf/use-fn
-         (mf/deps on-esc on-ctrl-enter handle-select)
+         (mf/deps on-esc on-ctrl-enter handle-select handle-input)
          (fn [event]
            (handle-select event)
 
@@ -333,6 +342,21 @@
                (and (kbd/mod? event) (kbd/enter? event) (fn? on-ctrl-enter))
                (on-ctrl-enter event)
 
+               (kbd/enter? event)
+               (let [sel (wapi/get-selection)
+                     range (.getRangeAt sel 0)]
+                 (dom/prevent-default event)
+                 (dom/stop-propagation event)
+                 (let [[span-node offset] (current-text-node node)]
+                   (.deleteContents range)
+                   (handle-input)
+
+                   (when span-node
+                     (let [txt (.-textContent span-node)]
+                       (dom/set-html! span-node (dm/str (subs txt 0 offset) "\n​" (subs txt offset)))
+                       (wapi/set-cursor! span-node (inc offset))
+                       (handle-input)))))
+
                (kbd/backspace? event)
                (let [prev-node (get-prev-node node span-node)]
                  (when (and (some? prev-node)
@@ -397,7 +421,7 @@
     [:div
      {:role "textbox"
       :class (stl/css :comment-input)
-      :content-editable "plaintext-only"
+      :content-editable "true"
       :suppress-content-editable-warning true
       :on-input handle-input
       :ref init-input

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

@@ -321,6 +321,7 @@
 
 .comment-input {
   @include bodySmallTypography;
+  white-space: pre;
   background: var(--input-background-color);
   border-radius: $br-8;
   border: $s-1 solid var(--input-border-color);

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

@@ -63,6 +63,12 @@
            :on-click update-mode}
       [:span {:class (stl/css :label)}  (tr "labels.show-your-comments")]
       [:span {:class (stl/css :icon)} i/tick]]
+     [:li {:class (stl/css-case :dropdown-item true
+                                :selected (= :mentions cmode))
+           :data-value "mentions"
+           :on-click update-mode}
+      [:span {:class (stl/css :label)} (tr "labels.show-mentions")]
+      [:span {:class (stl/css :icon)} i/tick]]
      [:li {:class (stl/css :separator)}]
      [:li {:class (stl/css-case :dropdown-item true
                                 :selected (= :pending cshow))
@@ -137,9 +143,11 @@
      [:button {:class (stl/css :mode-dropdown-wrapper)
                :on-click toggle-mode-selector}
 
-      [:span {:class (stl/css :mode-label)} (case (:mode local)
+      [:span {:class (stl/css :mode-label)}
-                                              (nil :all) (tr "labels.show-all-comments")
+       (case (:mode local)
-                                              :yours     (tr "labels.show-your-comments"))]
+         (nil :all) (tr "labels.show-all-comments")
+         :yours     (tr "labels.show-your-comments")
+         :mentions     (tr "labels.show-mentions"))]
       [:div {:class (stl/css :arrow-icon)} i/arrow]]
 
      [:& dropdown {:show options?

frontend/src/app/util/webapi.cljs

@@ -266,9 +266,6 @@
 
 (def empty-png-size (memoize empty-png-size*))
 
-
-
-
 (defn create-range
   []
   (let [document globals/document]
@@ -328,7 +325,7 @@
              (remove-all-ranges! sel)
              (add-range! sel r))
 
-         (let [text-node   (aget child-nodes 0)]
+         (let [text-node (aget child-nodes 0)]
            (.setStart r text-node offset)
            (.setEnd r text-node offset)
            (remove-all-ranges! sel)
@@ -344,3 +341,27 @@
         first-child (aget child-nodes 0)
         offset (if first-child (.-length first-child) 0)]
     (set-cursor! node offset)))
+
+(defn get-range
+  [^js selection idx]
+  (.getRangeAt selection idx))
+
+(defn range-start-container
+  [^js range]
+  (when range
+    (.-startContainer range)))
+
+(defn range-start-offset
+  [^js range]
+  (when range
+    (.-startOffset range)))
+
+(defn range-end-container
+  [^js range]
+  (when range
+    (.-endContainer range)))
+
+(defn range-end-offset
+  [^js range]
+  (when range
+    (.-endOffset range)))

frontend/translations/en.po

@@ -2117,6 +2117,9 @@ msgstr "Show comments list"
 msgid "labels.show-your-comments"
 msgstr "Show only your comments"
 
+msgid "labels.show-mentions"
+msgstr "Show only your mentions"
+
 #: src/app/main/ui/onboarding/questions.cljs:167
 msgid "labels.sketch"
 msgstr "Sketch"

frontend/translations/es.po

@@ -2122,6 +2122,9 @@ msgstr "Mostrar lista de comentarios"
 msgid "labels.show-your-comments"
 msgstr "Mostrar sólo tus comentarios"
 
+msgid "labels.show-mentions"
+msgstr "Mostrar sólo tus menciones"
+
 #: src/app/main/ui/onboarding/questions.cljs:167
 msgid "labels.sketch"
 msgstr "Sketch"