Skip to content

Commit 78b33d8

Browse files
Improve comments and remove unneeded CSS property
1 parent c899d5d commit 78b33d8

File tree

1 file changed

+4
-3
lines changed

1 file changed

+4
-3
lines changed

highlight-helper.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -916,7 +916,7 @@ function Highlighter(options = hhDefaultOptions) {
916916
if (changeType === 'appearance') {
917917
this.annotatableContainer.style.setProperty('--hh-color', `${colorString}`);
918918

919-
// Update selection background
919+
// Hide the active highlight (and wrappers), and set a selection style that mimics the highlight. This avoids the need to redraw the highlight while actively editing it (especially important for <mark> highlights, because DOM manipulation around the selection can make the selection UI unstable).
920920
if (activeHighlightId && options.drawingMode === 'svg') {
921921
selectionStylesheet.replaceSync(`
922922
${options.containerSelector} g[data-highlight-id="${activeHighlightId}"][data-style] { display: none; }
@@ -925,14 +925,15 @@ function Highlighter(options = hhDefaultOptions) {
925925
`);
926926
} else if (activeHighlightId) {
927927
const styleTemplate = getStyleTemplate(style, 'css', null, true);
928-
// Hide the active highlight (and wrappers), and set a selection style that mimics the highlight. This avoids the need to redraw the highlight while actively editing it (especially important for <mark> highlights, because DOM manipulation around the selection can make the selection UI unstable).
929928
selectionStylesheet.replaceSync(`
930929
${options.containerSelector} ::highlight(${highlightInfo.escapedHighlightId}) { all: unset; }
931930
${options.containerSelector} mark[data-highlight-id="${activeHighlightId}"][data-style] { all: unset; }
932931
${options.containerSelector} .hh-wrapper-start[data-highlight-id="${activeHighlightId}"], .hh-wrapper-end[data-highlight-id="${activeHighlightId}"] { display: none; }
933-
${options.containerSelector} ::selection { background-color: hsl(from ${colorString} h s l / 0.25); --hh-color: ${colorString}; ${styleTemplate} }
932+
${options.containerSelector} ::selection { --hh-color: ${colorString}; ${styleTemplate} }
934933
${options.containerSelector} rt::selection, ${options.containerSelector} img::selection { background-color: transparent; }
935934
`);
935+
936+
// No active highlight (show the regular selection UI)
936937
} else {
937938
selectionStylesheet.replaceSync(`
938939
${options.containerSelector} ::selection { background-color: Highlight; color: inherit; }

0 commit comments

Comments
 (0)