<template>
	<div style="white-space: pre-line;" v-html="result"></div>
</template>

<script>
import * as Diff from 'diff'
	export default {
		props:{
			newText:{
				type:String,
				default:""
			},
			oldData:{
				type:String,
				default:""
			},
		},
		data(){
			return {
				text:"",
			}
		},
		computed:{
			result(){
				let w = "";
        let a = Diff.diffWordsWithSpace(this.oldData,this.newText);
        for(var k = 0;k<a.length;k++){
          if(a.length > 1){
              if(a[k].added == true){
                w += '<span style="background-color: green;color:#fff">' + a[k].value + '</span>';
              }else if(a[k].removed == true){
                w += '<span style="text-decoration: line-through;color:red">' + a[k].value + '</span>';
              }else{
                w += '<span>' + a[k].value + '</span>';
              }
          }else{
            w = this.newText
          }
        }
        return w;
			}
		},
	}
</script>

<style scoped>

</style>