Resolved an issue related with Underline

[prmkishor]

@fchasen I am using epubjs in my react application where I tried to impliment underline feature of epubjs. below are the problems which I was facing:

Unable to set color of underline
After marking as underline, rectangle shape is created like below

After these changes:

Able to pass color of underline by setting below css
.epubjs-ul { stroke: red; stroke-width: 2px; stroke-linecap: square; stroke-opacity: 0.8; }
This solution will support dark mode
Clicking on underline can be resolved by increasing stroke-width

Below are the output:

[victorsoares96]

Due to the library author's delay in resolving this problem, i published this fix at: https://www.npmjs.com/package/@victorsoares96/marks-pane

npm i @victorsoares96/marks-pane

Thanks! @prmkishor

[victorsoares96]

update!

remove rect element cause issues in onclick event, other alternative is add attribute stroke: transparent to rect svg element like this:

for (var i = 0, len = filtered.length; i < len; i++) {
   var r = filtered[i];

   var rect = svg.createElement('rect');
   rect.setAttribute('x', r.left - offset.left + container.left);
   rect.setAttribute('y', r.top - offset.top + container.top);
   rect.setAttribute('height', r.height);
   rect.setAttribute('width', r.width);
   rect.setAttribute('fill', 'none');
   rect.setAttribute('stroke', 'transparent'); // add this


   var line = svg.createElement('line');
   line.setAttribute('x1', r.left - offset.left + container.left);
   line.setAttribute('x2', r.left - offset.left + container.left + r.width);
   line.setAttribute('y1', r.top - offset.top + container.top + r.height - 1);
   line.setAttribute('y2', r.top - offset.top + container.top + r.height - 1);

   line.setAttribute('stroke-width', 1);
   line.setAttribute('stroke', 'black'); //TODO: match text color?
   line.setAttribute('stroke-linecap', 'square');

   docFrag.appendChild(rect);

   docFrag.appendChild(line);
}