From 39a3d6fdd4e5fd9be6c42f87d329c62b7b3a4450 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 24 May 2016 00:54:20 +0100
Subject: [PATCH] multiple URL preview support

---
 src/components/views/messages/TextualBody.js | 49 ++++++++++++--------
 1 file changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 223eabdc36..58e33f7eb3 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -45,9 +45,9 @@ module.exports = React.createClass({
 
     getInitialState: function() {
         return {
-            // the URL (if any) to be previewed with a LinkPreviewWidget
+            // the URLs (if any) to be previewed with a LinkPreviewWidget
             // inside this TextualBody.
-            link: null,
+            links: null,
 
             // track whether the preview widget is hidden
             widgetHidden: false,
@@ -57,9 +57,11 @@ module.exports = React.createClass({
     componentDidMount: function() {
         linkifyElement(this.refs.content, linkifyMatrix.options);
 
-        var link = this.findLink(this.refs.content.children);
-        if (link) {
-            this.setState({ link: link.getAttribute("href") });
+        var links = this.findLinks(this.refs.content.children);
+        if (links.length) {
+            this.setState({ links: links.map((link)=>{
+                return link.getAttribute("href");
+            })});
 
             // lazy-load the hidden state of the preview widget from localstorage
             if (global.localStorage) {
@@ -77,24 +79,28 @@ module.exports = React.createClass({
         return (nextProps.mxEvent.getId() !== this.props.mxEvent.getId() ||
                 nextProps.highlights !== this.props.highlights ||
                 nextProps.highlightLink !== this.props.highlightLink ||
-                nextState.link !== this.state.link ||
+                nextState.links !== this.state.links ||
                 nextState.widgetHidden !== this.state.widgetHidden);
     },
 
-    findLink: function(nodes) {
+    findLinks: function(nodes) {
+        var links = [];
         for (var i = 0; i < nodes.length; i++) {
             var node = nodes[i];
             if (node.tagName === "A" && node.getAttribute("href"))
             {
-                return this.isLinkPreviewable(node) ? node : undefined;
+                if (this.isLinkPreviewable(node)) {
+                    links.push(node);
+                }
             }
             else if (node.tagName === "PRE" || node.tagName === "CODE") {
-                return;
+                continue;
             }
             else if (node.children && node.children.length) {
-                return this.findLink(node.children)
+                links = links.concat(this.findLinks(node.children));
             }
         }
+        return links;
     },
 
     isLinkPreviewable: function(node) {
@@ -160,14 +166,17 @@ module.exports = React.createClass({
                                        {highlightLink: this.props.highlightLink});
 
 
-        var widget;
-        if (this.state.link && !this.state.widgetHidden) {
+        var widgets;
+        if (this.state.links && !this.state.widgetHidden) {
             var LinkPreviewWidget = sdk.getComponent('rooms.LinkPreviewWidget');
-            widget = <LinkPreviewWidget
-                link={ this.state.link }
-                mxEvent={ this.props.mxEvent }
-                onCancelClick={ this.onCancelClick }
-                onWidgetLoad={ this.props.onWidgetLoad }/>;
+            widgets = this.state.links.map((link)=>{
+                return <LinkPreviewWidget
+                            key={ link }
+                            link={ link }
+                            mxEvent={ this.props.mxEvent }
+                            onCancelClick={ this.onCancelClick }
+                            onWidgetLoad={ this.props.onWidgetLoad }/>;
+            });
         }
 
         switch (content.msgtype) {
@@ -176,21 +185,21 @@ module.exports = React.createClass({
                 return (
                     <span ref="content" className="mx_MEmoteBody mx_EventTile_content">
                         * { name } { body }
-                        { widget }
+                        { widgets }
                     </span>
                 );
             case "m.notice":
                 return (
                     <span ref="content" className="mx_MNoticeBody mx_EventTile_content">
                         { body }
-                        { widget }
+                        { widgets }
                     </span>
                 );
             default: // including "m.text"
                 return (
                     <span ref="content" className="mx_MTextBody mx_EventTile_content">
                         { body }
-                        { widget }
+                        { widgets }
                     </span>
                 );
         }