diff --git a/CHANGES.md b/CHANGES.md index 026fdc1b8e..b81ad93aa3 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -27,6 +27,7 @@ - Fix warnings for unsupported token $type (by @Dexterity104) [Github #8790](https://github.com/penpot/penpot/issues/8790) - Add per-group add button for typographies (by @eureka928) [Github #5275](https://github.com/penpot/penpot/issues/5275) - Use page name for multi-export ZIP/PDF downloads (by @Dexterity104) [Github #8773](https://github.com/penpot/penpot/issues/8773) +- Make links in comments clickable (by @eureka928) [Github #1602](https://github.com/penpot/penpot/issues/1602) ### :bug: Bugs fixed diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs index 8f34c41277..45660b3bb8 100644 --- a/frontend/src/app/main/ui/comments.cljs +++ b/frontend/src/app/main/ui/comments.cljs @@ -45,20 +45,34 @@ (def mentions-context (mf/create-context nil)) (def r-mentions-split #"@\[[^\]]*\]\([^\)]*\)") (def r-mentions #"@\[([^\]]*)\]\(([^\)]*)\)") +(def r-url-split #"https?://[^\s\)\]]+[^\s\)\]\.,;:!?]") (def zero-width-space \u200B) -(defn- parse-comment - "Parse a comment into its elements (texts and mentions)" - [comment] - (d/interleave-all - (->> (str/split comment r-mentions-split) - (map #(hash-map :type :text :content %))) +(defn- parse-urls + "Split a text element into text and url sub-elements" + [element] + (if (= (:type element) :text) + (let [text (:content element) + parts (str/split text r-url-split) + urls (re-seq r-url-split text)] + (d/interleave-all + (map #(hash-map :type :text :content %) parts) + (map #(hash-map :type :url :content %) urls))) + [element])) - (->> (re-seq r-mentions comment) - (map (fn [[_ user id]] - {:type :mention - :content user - :data {:id id}}))))) +(defn- parse-comment + "Parse a comment into its elements (texts, mentions and urls)" + [comment] + (->> (d/interleave-all + (->> (str/split comment r-mentions-split) + (map #(hash-map :type :text :content %))) + + (->> (re-seq r-mentions comment) + (map (fn [[_ user id]] + {:type :mention + :content user + :data {:id id}})))) + (mapcat parse-urls))) (defn- parse-nodes "Parse the nodes to format a comment" @@ -146,7 +160,13 @@ [{:keys [content]}] (let [comment-elements (mf/use-memo (mf/deps content) #(parse-comment content))] (for [[idx {:keys [type content]}] (d/enumerate comment-elements)] - (case type + (if (= type :url) + [:a {:key idx + :href content + :target "_blank" + :rel "noopener noreferrer" + :class (stl/css :comment-link)} + content] [:span {:key idx :class (stl/css-case @@ -177,6 +197,7 @@ (doseq [{:keys [type content data]} (parse-comment value)] (case type :text (dom/append-child! node (create-text-node content)) + :url (dom/append-child! node (create-text-node content)) :mention (dom/append-child! node (create-mention-node (:id data) content)) nil))))) diff --git a/frontend/src/app/main/ui/comments.scss b/frontend/src/app/main/ui/comments.scss index 79abfc420f..051a6cd613 100644 --- a/frontend/src/app/main/ui/comments.scss +++ b/frontend/src/app/main/ui/comments.scss @@ -418,6 +418,12 @@ color: var(--color-accent-primary); } +.comment-link { + color: var(--color-accent-primary); + text-decoration: underline; + cursor: pointer; +} + .comments-mentions-empty { font-size: deprecated.$fs-12; color: var(--color-foreground-secondary);