From 38f568635da16c1f07a58ee96ca1c780d0c18275 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Mon, 26 Jun 2017 14:08:14 +0200
Subject: [PATCH] Fix duplicate media-tag in slides when adding or removing a
 slide

---
 www/common/diffMarked.js | 32 ++++++++++++++++++++++++++++----
 www/slide/slide.js       | 20 ++++++++++++--------
 2 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/www/common/diffMarked.js b/www/common/diffMarked.js
index 4adbbc18f..d760c0f5c 100644
--- a/www/common/diffMarked.js
+++ b/www/common/diffMarked.js
@@ -19,6 +19,8 @@ define([
         return Marked(md);
     };
 
+    var mediaMap = {};
+
     // Tasks list
     var checkedTaskItemPtn = /^\s*\[x\]\s*/;
     var uncheckedTaskItemPtn = /^\s*\[ \]\s*/;
@@ -40,7 +42,14 @@ define([
         if (href.slice(0,6) === '/file/') {
             var parsed = Cryptpad.parsePadUrl(href);
             var hexFileName = Cryptpad.base64ToHex(parsed.hashData.channel);
-            var mt = '<media-tag src="/blob/' + hexFileName.slice(0,2) + '/' + hexFileName + '" data-crypto-key="cryptpad:' + parsed.hashData.key + '"></media-tag>';
+            var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName;
+            var mt = '<media-tag src="' + src + '" data-crypto-key="cryptpad:' + parsed.hashData.key + '">';
+            if (mediaMap[src]) {
+                mediaMap[src].forEach(function (n) {
+                    mt += n.outerHTML;
+                });
+            }
+            mt += '</media-tag>';
             return mt;
         }
         var out = '<img src="' + href + '" alt="' + text + '"';
@@ -51,19 +60,20 @@ define([
         return out;
     };
 
+    var MutationObserver = window.MutationObserver;
     var forbiddenTags = [
         'SCRIPT',
         'IFRAME',
         'OBJECT',
         'APPLET',
-        'VIDEO',
+        //'VIDEO',
         'AUDIO',
     ];
     var unsafeTag = function (info) {
-        if (info.node && $(info.node).parents('media-tag').length) {
+        /*if (info.node && $(info.node).parents('media-tag').length) {
             // Do not remove elements inside a media-tag
             return true;
-        }
+        }*/
         if (['addAttribute', 'modifyAttribute'].indexOf(info.diff.action) !== -1) {
             if (/^on/.test(info.diff.name)) {
                 console.log("Rejecting forbidden element attribute with name", info.diff.name);
@@ -144,6 +154,20 @@ define([
             var $mts = $content.find('media-tag:not(:has(*))');
             $mts.each(function (i, el) {
                 MediaTag(el);
+                var observer = new MutationObserver(function(mutations) {
+                    mutations.forEach(function(mutation) {
+                        console.log(mutation);
+                        if (mutation.type === 'childList') {
+                            var list_values = [].slice.call(el.children);
+                            mediaMap[el.getAttribute('src')] = list_values;
+                        }
+                    });
+                });
+                observer.observe(el, {
+                    attributes: false,
+                    childList: true,
+                    characterData: false
+                });
             });
         }
     };
diff --git a/www/slide/slide.js b/www/slide/slide.js
index f0e47a272..87d9405a2 100644
--- a/www/slide/slide.js
+++ b/www/slide/slide.js
@@ -63,8 +63,14 @@ define([
         var append2 = '.cp div#modal #content .slide-frame ';
         return css.replace(/(\n*)([^\n}]+)\s*\{/g, '$1' + append + '$2,' + append2 + '$2 {');
     };
-    var draw = Slide.draw =  function (i) {
+
+    var goTo = Slide.goTo = function (i) {
         i = i || 0;
+        $content.find('.slide-container').first().css('margin-left', -(i*100)+'%');
+        updateFontSize();
+        change(Slide.lastIndex, Slide.index);
+    };
+    var draw = Slide.draw =  function (i) {
         if (typeof(Slide.content) !== 'string') { return; }
 
         var c = Slide.content;
@@ -95,9 +101,7 @@ define([
         //$content.find('.' + slideClass).hide();
         //$content.find('.' + slideClass + ':eq( ' + i + ' )').show();
         //$content.css('margin-left', -(i*100)+'vw');
-        $content.find('.slide-container').first().css('margin-left', -(i*100)+'%');
-        updateFontSize();
-        change(Slide.lastIndex, Slide.index);
+        goTo(i);
     };
 
     Slide.updateOptions = function () {
@@ -162,7 +166,7 @@ define([
         Slide.lastIndex = Slide.index;
 
         var i = Slide.index = Math.max(0, Slide.index - 1);
-        Slide.draw(i);
+        Slide.goTo(i);
     };
 
     Slide.right = function () {
@@ -170,7 +174,7 @@ define([
         Slide.lastIndex = Slide.index;
 
         var i = Slide.index = Math.min(getNumberOfSlides() -1, Slide.index + 1);
-        Slide.draw(i);
+        Slide.goTo(i);
     };
 
     Slide.first = function () {
@@ -178,7 +182,7 @@ define([
         Slide.lastIndex = Slide.index;
 
         var i = Slide.index = 0;
-        Slide.draw(i);
+        Slide.goTo(i);
     };
 
     Slide.last = function () {
@@ -186,7 +190,7 @@ define([
         Slide.lastIndex = Slide.index;
 
         var i = Slide.index = getNumberOfSlides() - 1;
-        Slide.draw(i);
+        Slide.goTo(i);
     };
 
     var addEvent = function () {