Fixes #1063 Make URLs in topic clickable

CHANGES.md

@@ -4,6 +4,7 @@
 
 - Bugfix. Handler not triggered when submitting MUC password form 2nd time
 - Bugfix. MUC features weren't being refreshed when saving the config form
+- #1063 URLs in the topic / subject are not clickable
 - #1190 MUC Participants column disappears in certain viewport widths
 - #1199 Can't get back from to login screen from registration screen
 - #1214 Setting `allow_contact_requests` to `false` has no effect

css/converse.css

@@ -10394,6 +10394,9 @@ body.reset {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap; }
+    #conversejs.converse-embedded .chat-head-chatroom .chatroom-description a,
+    #conversejs .chat-head-chatroom .chatroom-description a {
+      color: white; }
   #conversejs.converse-embedded .chat-head-chatroom a.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:visited.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:hover.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
   #conversejs .chat-head-chatroom a.chatbox-btn.fa,
   #conversejs .chat-head-chatroom a:visited.chatbox-btn.fa,

dist/converse.js

@@ -68850,7 +68850,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
             'info_close': __('Close and leave this groupchat'),
             'info_configure': __('Configure this groupchat'),
             'info_details': __('Show more details about this groupchat'),
-            'description': _.get(this.model.get('subject'), 'text') || ''
+            'description': u.addHyperlinks(xss.filterXSS(_.get(this.model.get('subject'), 'text'), {
+              'whiteList': {}
+            }))
           }));
         },
 
@@ -69880,7 +69882,10 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
               'data': '',
               'isodate': date,
               'extra_classes': 'chat-topic',
-              'message': subject.text
+              'message': u.addHyperlinks(xss.filterXSS(_.get(this.model.get('subject'), 'text'), {
+                'whiteList': {}
+              })),
+              'render_message': true
             }));
           }
 
@@ -78970,10 +78975,10 @@ __e( o.Strophe.getNodeFromJid(o.jid) ) +
 __e( o.Strophe.getDomainFromJid(o.jid) ) +
 '\n        ';
  } ;
-__p += '\n    </div>\n    <p class="chatroom-description" title="' +
+__p += '\n    </div>\n    <!-- Sanitized in converse-muc-views. We want to render links. -->\n    <p class="chatroom-description" title="' +
 __e(o.description) +
 '">' +
-__e(o.description) +
+((__t = (o.description)) == null ? '' : __t) +
 '</p>\n</div>\n<div class="chatbox-buttons row no-gutters">\n    <a class="chatbox-btn close-chatbox-button fa fa-sign-out-alt" title="' +
 __e(o.info_close) +
 '"></a>\n    ';
@@ -79670,16 +79675,31 @@ return __p
 
 var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./node_modules/lodash/escape.js")};
 module.exports = function(o) {
-var __t, __p = '', __e = _.escape;
-__p += '<!-- src/templates/info.html -->\n<div class="message chat-info ' +
+var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
+function print() { __p += __j.call(arguments, '') }
+__p += '<!-- src/templates/info.html -->\n';
+ if (o.render_message) { ;
+__p += '\n    <!-- XXX: Should only ever be rendered if the message text has been sanitized already -->\n    <div class="message chat-info ' +
+__e(o.extra_classes) +
+'"\n        data-isodate="' +
+__e(o.isodate) +
+'"\n        ' +
+__e(o.data) +
+'>' +
+((__t = (o.message)) == null ? '' : __t) +
+'</div>\n';
+ } else { ;
+__p += '\n    <div class="message chat-info ' +
 __e(o.extra_classes) +
-'"\n     data-isodate="' +
+'"\n        data-isodate="' +
 __e(o.isodate) +
-'"\n     ' +
+'"\n        ' +
 __e(o.data) +
 '>' +
 __e(o.message) +
 '</div>\n';
+ } ;
+__p += '\n';
 return __p
 };
 

sass/_chatrooms.scss

@@ -44,6 +44,9 @@
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            a {
+                color: white;
+            }
         }
 
         a, a:visited, a:hover, a:not([href]):not([tabindex]) {

src/converse-muc-views.js

@@ -694,7 +694,7 @@
                             'info_close': __('Close and leave this groupchat'),
                             'info_configure': __('Configure this groupchat'),
                             'info_details': __('Show more details about this groupchat'),
-                            'description': _.get(this.model.get('subject'), 'text') || ''
+                            'description': u.addHyperlinks(xss.filterXSS(_.get(this.model.get('subject'), 'text'), {'whiteList': {}})),
                     }));
                 },
 
@@ -1665,7 +1665,8 @@
                                 'data': '',
                                 'isodate': date,
                                 'extra_classes': 'chat-topic',
-                                'message': subject.text
+                                'message': u.addHyperlinks(xss.filterXSS(_.get(this.model.get('subject'), 'text'), {'whiteList': {}})),
+                                'render_message': true
                             }));
                     }
                     this.scrollDown();

src/templates/chatroom_head.html

@@ -7,7 +7,8 @@
             {{{ o.Strophe.getNodeFromJid(o.jid) }}}@{{{ o.Strophe.getDomainFromJid(o.jid) }}}
         {[ } ]}
     </div>
-    <p class="chatroom-description" title="{{{o.description}}}">{{{o.description}}}</p>
+    <!-- Sanitized in converse-muc-views. We want to render links. -->
+    <p class="chatroom-description" title="{{{o.description}}}">{{o.description}}</p>
 </div>
 <div class="chatbox-buttons row no-gutters">
     <a class="chatbox-btn close-chatbox-button fa fa-sign-out-alt" title="{{{o.info_close}}}"></a>

src/templates/info.html

@@ -1,3 +1,10 @@
-<div class="message chat-info {{{o.extra_classes}}}"
-     data-isodate="{{{o.isodate}}}"
-     {{{o.data}}}>{{{o.message}}}</div>
+{[ if (o.render_message) { ]}
+    <!-- XXX: Should only ever be rendered if the message text has been sanitized already -->
+    <div class="message chat-info {{{o.extra_classes}}}"
+        data-isodate="{{{o.isodate}}}"
+        {{{o.data}}}>{{o.message}}</div>
+{[ } else { ]}
+    <div class="message chat-info {{{o.extra_classes}}}"
+        data-isodate="{{{o.isodate}}}"
+        {{{o.data}}}>{{{o.message}}}</div>
+{[ } ]}