How etherpad recognizes author color?

So I have googled it and i didn't find any solution there so I am posting my question in here. So when you write in etherpad, it creates markup which looks like this:

<div id="magicdomid17" class="ace-line">
   <span class="author-a-w3z75zz84z95z83zpz77zz89zz66zz79zxz90zz66zcz76z">
         Author1.
   </span>
   <span class="author-a-1z74zz83zuz82z2z67zz815zsz89zz70zz65z8z69zz87z9">
         Author2.
   </span>
</div>

Now It will output this:

Author1.Author2.

Having different background colors for Author1. and Author2. texts depending upon what writers chose when they started using etherpad.

My question is how etherpad process the data to put background color on specific text. I know it has something to do with classes given to span as: author-a-w3z75zz84z95z83zpz77zz89zz66zz79zxz90zz66zcz76z for first author

and

author-a-1z74zz83zuz82z2z67zz81zsz89zz750zz65z8z659zz87z9for second author.

Can anyone explain how the background-color is being put for these texts depending upon these classes name? and which file is responsible for that?

Thanks in advance

Solution

So as most of the etherpad questions, no one answered this question either. I got the solution if anyone got same problem for deciding text color depending upon class name.

All you need is define a object variable in your front end js file where you are using the etherpad. In this var we will take author class name as key and its respective color as value.

var window.authClassColorObj = {};

Now go into ace2_inner.js file and find function setAuthorStyle() , add these lines in that function after var authorSelector = getAuthorColorClassSelector(getAuthorClassName(author)); line:

parent.parent.parent.window.authorClassColorObj[getAuthorClassName(author)] = info.bgcolor;

Now i am accessing my front end object var by three layer in, so i am using parent.parent.parent. , it can be different for you depending upon you file structure.

Idea is that this is the place where you can populate your object with proper values.

and then you can access your object from front end, for example for my case, it will out put this:

console.log(window.authClassColorObj);

Output:

object{
    author-a-w3z75zz84z95z83zpz77zz89zz66zz79zxz90zz66zcz76z:"#f50966"
    author-a-1z74zz83zuz82z2z67zz815zsz89zz70zz65z8z69zz87z9:"#20a251"
}

This info can be used further for any changes you want to make in pad html code.