--- a/src_js/iconolab-bundle/src/components/mergetool/MergeTool.vue	Fri Aug 26 18:48:30 2016 +0200
+++ b/src_js/iconolab-bundle/src/components/mergetool/MergeTool.vue	Tue Aug 30 16:58:59 2016 +0200
@@ -1,6 +1,7 @@
 <script>
 
 import Typeahead from '../typeahead/Typeahead.vue'
+import DiffViewer from '../diffviewer/diffviewer.vue'
 
 export default {
 
@@ -9,7 +10,8 @@
 	},
 	
 	components: {
-		Typeahead: Typeahead
+		Typeahead: Typeahead,
+		'diffviewer': DiffViewer
 	},
 
 	mounted () {
@@ -76,6 +78,38 @@
 			}
 		},
 
+		showDiffviewer: function (refId, sourceId, targetKey) {
+
+			var sourceField = document.getElementById(sourceId);
+			var targetField = this.$refs[this.targetKeyMap[targetKey]];
+			var targetType = this.targetFieldTypeMap[targetKey];
+			var diffViewer = this.$refs[refId];
+			
+			if (!diffViewer) { throw new Error("The DiffViewer can't be found for " + targetKey); }
+
+			if (targetType === "input") {
+				diffViewer.showTextDiff(sourceField.value, targetField.value);
+			}
+
+			if (targetKey === "tag") {
+				var source = this.$refs[sourceId];
+				var target = this.$refs['proposal-tags'];
+				if ((source.tags.length !== 0) && (target.tags.length !== 0)) {
+					diffViewer.showTagDiff(source.tags, target.tags);
+				}
+			}
+			/* frag */
+			if ( targetKey === "frag") {
+				
+				var originalPath = targetField.getAttribute("d");
+				var modifiedPath = sourceField.getAttribute("d");
+				diffViewer.showFragmentDiff(originalPath, modifiedPath);
+			}
+
+			diffViewer.show();
+		},
+
+
 		hightlightSource: function (source) {
 			source.className += "highlight";
 		},