Improve handling of overlapping highlight colors (2)

Author: samuelbradshaw

demo.html

@@ -187,18 +187,18 @@ <h1>Select One</h1>
           startParagraphId: 'p3', startParagraphOffset: 56,
           endParagraphId: 'p3', endParagraphOffset: 65,
         },
-        {
-          highlightId: 'hh-1735379721523',
-          color: 'red', style: 'fill',
-          startParagraphId: 'p1', startParagraphOffset: 237,
-          endParagraphId: 'p1', endParagraphOffset: 250,
-        },
         {
           highlightId: 'hh-1735379727958',
           color: 'yellow', style: 'fill',
           startParagraphId: 'p1', startParagraphOffset: 246,
           endParagraphId: 'p1', endParagraphOffset: 259,
         },
+        {
+          highlightId: 'hh-1735379721523',
+          color: 'red', style: 'fill',
+          startParagraphId: 'p1', startParagraphOffset: 237,
+          endParagraphId: 'p1', endParagraphOffset: 250,
+        },
         {
           highlightId: 'hh-1735479727958',
           color: 'yellow', style: 'fill',

highlight-helper.js

@@ -404,7 +404,7 @@ function Highlighter(options = hhDefaultOptions) {
       // Set variables that depend on the range
       const temporaryHtmlElement = document.createElement('div');
       temporaryHtmlElement.appendChild(highlightRange.cloneContents());
-      for (const hyperlink of temporaryHtmlElement.querySelectorAll('a')) hyperlink.setAttribute('onclick', 'event.preventDefault();');
+      for (const element of temporaryHtmlElement.querySelectorAll(`a, [data-highlight-id]:not([data-highlight-id=${highlightId}])`)) element.outerHTML = element.innerHTML;
       rangeText = highlightRange.toString();
       rangeHtml = temporaryHtmlElement.innerHTML;
       let startParagraphIndex = annotatableParagraphIds.indexOf(startParagraphId);
@@ -859,7 +859,7 @@ function Highlighter(options = hhDefaultOptions) {
       } else if (activeHighlightId) {
         const styleTemplate = getStyleTemplate(style, 'css', null);
         selectionStylesheet.replaceSync(`
-          ${options.containerSelector} ::selection { --hh-color: ${colorString}; ${styleTemplate} }
+          ${options.containerSelector} ::selection { background-color: hsl(from ${colorString} h s l / 20%); --hh-color: ${colorString}; ${styleTemplate} }
           ${options.containerSelector} rt::selection, ${options.containerSelector} img::selection { background-color: transparent; }
         `);
       } else {