Highlight spots by veronika-tseleva-cleantalk · Pull Request #105 · CleanTalk/SpotFix

veronika-tseleva-cleantalk · 2026-05-12T19:13:28Z

https://app.doboard.com/1/task/49256
https://app.doboard.com/1/task/49187
https://app.doboard.com/1/task/48689

Copilot

Pull request overview

This PR updates the SpotFix doBoard widget to improve “spot” highlighting behavior (especially around finished spots), adjusts selection/highlight internals, and tweaks the widget layout/badge count behavior.

Changes:

Add a minimum height to the widget container to stabilize layout.
Update highlighting logic to (de)highlight fixed spots depending on whether the finished section is expanded.
Rework text highlighting to use DOM Ranges/TreeWalker instead of string-based HTML insertion; adjust selection prechecks; update the wrap badge to show notification count.

Reviewed changes

Copilot reviewed 3 out of 7 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
styles/doboard-widget.css	Adds `min-height` to the widget container.
js/src/widget.js	Changes task loading, finished-section highlighting toggles, and badge count logic (notifications).
js/src/selections.js	Relaxes selection constraints and rewrites text highlighting to use DOM operations.
js/src/api.js	Minor whitespace cleanup.
dist/doboard-widget-bundle.js	Rebuilt bundle reflecting the source changes.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

    const range = selection.getRangeAt(0);
    // Selection must be within a single DOM element.
-    if (range.startContainer !== range.endContainer) { spotFixDebugLog('`spotFixGetSelectedData` skip by `Selection within several tags nodes`'); return null; }
+    const commonNode = range.commonAncestorContainer;
+    const commonElement = commonNode.nodeType === Node.ELEMENT_NODE ? commonNode : commonNode.parentElement;
+    if (commonElement === document.body && range.startContainer !== range.endContainer) {
+        spotFixDebugLog('`spotFixGetSelectedData` skip: Selection is too broad');
+        return null;
+    }
+
+    // if (range.startContainer !== range.endContainer) { spotFixDebugLog('`spotFixGetSelectedData` skip by `Selection within several tags nodes`'); return null; }


+        const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
+


Copilot

Pull request overview

Copilot reviewed 3 out of 7 changed files in this pull request and generated 10 comments.

+        } else {
+            notificationsCount = localStorage.getItem('spotfix-tasks-notifications-count');
+        }
+
        const taskCountElement = document.getElementById('doboard_task_widget-task_count');
-        if ( taskCountElement && +tasksCount ) {
-            taskCountElement.innerText = ksesFilter(tasksCount);
+        if ( taskCountElement && +notificationsCount ) {
+            taskCountElement.innerText = ksesFilter(notificationsCount);


+    validRanges.forEach(rangeData => {
+        const { startPos, endPos } = rangeData;
+
+        const highlightWrapper = document.createElement('span');
+        highlightWrapper.className = 'doboard_task_widget-text_selection';
+
+        const tooltipSpan = document.createElement('span');
+        tooltipSpan.className = 'doboard_task_widget-text_selection_tooltip';
+        tooltipSpan.innerHTML = tooltipHtml;
+
+        highlightWrapper.appendChild(tooltipSpan);
+
+        const range = document.createRange();
+        const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
+
+        let node;
+        let currentPos = 0;
+        let startNode = null, startOffset = 0;
+        let endNode = null, endOffset = 0;
+
+        while ((node = walker.nextNode())) {
+            let nodeLength = node.nodeValue.length;
+
+            if (!startNode && currentPos + nodeLength >= startPos) {
+                startNode = node;
+                startOffset = startPos - currentPos;
+            }
+            if (!endNode && currentPos + nodeLength >= endPos) {
+                endNode = node;
+                endOffset = endPos - currentPos;
+                break;
+            }
+            currentPos += nodeLength;
+        }
+
+        if (startNode && endNode) {
+            try {
+                range.setStart(startNode, startOffset);
+                range.setEnd(endNode, endOffset);
+
+                const contents = range.extractContents();
+                highlightWrapper.appendChild(contents);
+
+                range.insertNode(highlightWrapper);


+    const commonNode = range.commonAncestorContainer;
+    const commonElement = commonNode.nodeType === Node.ELEMENT_NODE ? commonNode : commonNode.parentElement;
+    if (commonElement === document.body && range.startContainer !== range.endContainer) {
+        spotFixDebugLog('`spotFixGetSelectedData` skip: Selection is too broad');
+        return null;
+    }
+
+    // if (range.startContainer !== range.endContainer) { spotFixDebugLog('`spotFixGetSelectedData` skip by `Selection within several tags nodes`'); return null; }


+    // if (range.startContainer !== range.endContainer) { spotFixDebugLog('`spotFixGetSelectedData` skip by `Selection within several tags nodes`'); return null; }



    display: flex;
    flex-direction: column;
    -moz-flex-direction: column;
+    min-height: 490px;


-        const insertText = marker.type === 'start'
-            ? spotfixHighlightOpen
-            : spotfixHighlightClose;
+    let tooltipTitleText = spots[0].isFixed


-            ? spotfixHighlightOpen
-            : spotfixHighlightClose;
+    let tooltipTitleText = spots[0].isFixed
+        ? `This issue already fixed.`


    } catch (error) {
        spotFixDebugLog('Error updating element content: ' + error);
    }


+            localStorage.setItem('spotfix-tasks-notifications-count', `${notificationsCount}`);
+        } else {
+            notificationsCount = localStorage.getItem('spotfix-tasks-notifications-count');


Copilot

Pull request overview

Copilot reviewed 3 out of 7 changed files in this pull request and generated 13 comments.

Comments suppressed due to low confidence (1)

js/src/selections.js:231

Indentation of the case clauses (lines 213–227) was changed to a shallower level than the surrounding switch body, while default: (line 229) was left at the original deeper indentation. The mixed indentation makes the block hard to read and inconsistent.

        switch (selectionType) {
        case 'image':
            this.spotFixHighlightImageElement(element);
            break;

        case 'element':
            this.spotFixHighlightNestedElement(element);
            break;

        case 'text':
            const uniqueSpot = [spots[0]];
            try {
                this.spotFixHighlightTextInElement(element, uniqueSpot, widgetInstance);
            } catch (e) {
            }
            break;

            default:
                spotFixDebugLog('Unknown selection type: ' + selectionType);
        }

+        case 'text':
+            const uniqueSpot = [spots[0]];
+            try {
+                this.spotFixHighlightTextInElement(element, uniqueSpot, widgetInstance);
+            } catch (e) {
+            }
+            break;

            default:
                spotFixDebugLog('Unknown selection type: ' + selectionType);


+            const uniqueSpot = [spots[0]];
+            try {
+                this.spotFixHighlightTextInElement(element, uniqueSpot, widgetInstance);
+            } catch (e) {


+            const uniqueSpot = [spots[0]];
+            try {
+                this.spotFixHighlightTextInElement(element, uniqueSpot, widgetInstance);


+    // if (range.startContainer !== range.endContainer) { spotFixDebugLog('`spotFixGetSelectedData` skip by `Selection within several tags nodes`'); return null; }



+    const tooltipHtml = `
+        <div class="doboard_task_widget-text_selection_tooltip_element">
+            <span class="doboard_task_widget-text_selection_tooltip_icon"></span>
+            <span>
+                <div>${tooltipTitleText}</div>
+                <div>You can see history <span class="doboard_task_widget-see-task doboard_task_widget-see-task__task-id-${spots[0].taskId}">Here</span></div>
+            </span>
+        </div>
+    `;
+
+    validRanges.forEach(rangeData => {
+        const { startPos, endPos } = rangeData;
+
+        const highlightWrapper = document.createElement('span');
+        highlightWrapper.className = 'doboard_task_widget-text_selection';
+
+        const tooltipSpan = document.createElement('span');
+        tooltipSpan.className = 'doboard_task_widget-text_selection_tooltip';
+
+        // Convert block-level divs to inline-block spans to prevent list breakages
+        const safeTooltipHtml = tooltipHtml
+            .replace(/<div/g, '<span style="display:block"')
+            .replace(/<\/div>/g, '</span>');
+        tooltipSpan.innerHTML = safeTooltipHtml;
+
+        highlightWrapper.appendChild(tooltipSpan);
+
+        const range = document.createRange();
+        const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
+
+        let node;
+        let currentPos = 0;
+        let startNode = null, startOffset = 0;
+        let endNode = null, endOffset = 0;
+


+            notificationsCount = await getNotificationsDoboard(this.params.projectToken, sessionId, this.params.accountId, this.params.projectId);
+            notificationsCount = [...new Map(notificationsCount.map((item) => [item.task_id, item])).values()];


+                    if (finishedSpotsListHeader?.classList?.contains('expanded')) {
+                        spotFixHighlightElements(spotsToBeHighlighted, this);
+                    } else {
+                        spotFixRemoveHighlights();
+                        spotFixHighlightElements(spotsToBeHighlighted.filter(item => !item.isFixed), this);
+                    }


+            localStorage.setItem('spotfix-tasks-notifications-count', `${notificationsCount}`);
+        } else {
+            notificationsCount = localStorage.getItem('spotfix-tasks-notifications-count');
+        }


+        if ( taskCountElement && +notificationsCount ) {
+            taskCountElement.innerText = ksesFilter(notificationsCount);
            taskCountElement.classList.remove('hidden');
            if (localStorage.getItem('horizontalPosition') === 'left' || window.SpotfixWidgetConfig?.horizontalPosition === 'left') taskCountElement.style.left = '10px';


    display: flex;
    flex-direction: column;
    -moz-flex-direction: column;
+    min-height: 490px;


Copilot

Pull request overview

Copilot reviewed 3 out of 7 changed files in this pull request and generated 7 comments.

Comments suppressed due to low confidence (4)

js/src/selections.js:269

Replacing the LI/OL/UL element with a plain text node permanently destroys the page's list structure (markers, nesting, sibling list items). When spotFixHighlightTextInElement is called for a <li> whose nodePath resolves to that element, the entire list item — including any unrelated children/markup — is collapsed into a flat text node before highlighting. This mutation is not reversible by spotFixRemoveHighlights, will visibly alter the host page, and will break subsequent re-highlight passes (e.g. when toggling the "finished tasks" panel) because the original element no longer exists in the DOM. Consider walking the inner text nodes (as the else branch already does) instead of replacing the list element.

    const listTags = ['LI', 'OL', 'UL'];
    if (listTags.includes(element.tagName)) {
        const textNode = document.createTextNode(element.textContent);
        element.parentNode.replaceChild(textNode, element);
        element = textNode;
    }

js/src/selections.js:226

The catch (e) {} swallows every error from spotFixHighlightTextInElement without even calling spotFixDebugLog. Other catches in this file consistently log via spotFixDebugLog, so silent failures here will make highlight bugs very hard to diagnose. At minimum log the error.

            try {
                this.spotFixHighlightTextInElement(element, uniqueSpot, widgetInstance);
            } catch (e) {
            }

js/src/selections.js:227

Declaring const uniqueSpot directly inside a case clause without a block scope is a known footgun (lexical declarations leak to sibling case clauses and trigger no-case-declarations). Wrap the body of this case in { ... } to avoid hoisting/TDZ issues if more cases are added.

        case 'text':
            const uniqueSpot = [spots[0]];
            try {
                this.spotFixHighlightTextInElement(element, uniqueSpot, widgetInstance);
            } catch (e) {
            }
            break;

js/src/selections.js:70

Leaving the old guard as a commented-out line adds noise without any explanation. Either delete it or add a comment explaining why the broader-selection check was relaxed so future readers understand the intent.

    // if (range.startContainer !== range.endContainer) { spotFixDebugLog('`spotFixGetSelectedData` skip by `Selection within several tags nodes`'); return null; }

+            const uniqueSpot = [spots[0]];
+            try {
+                this.spotFixHighlightTextInElement(element, uniqueSpot, widgetInstance);


+                    if (finishedSpotsListHeader?.classList?.contains('expanded')) {
+                        spotFixHighlightElements(spotsToBeHighlighted, this);
+                    } else {
+                        spotFixRemoveHighlights();
+                        spotFixHighlightElements(spotsToBeHighlighted.filter(item => !item.isFixed), this);
+                    }
                const headerSpan = document.querySelector('.doboard_task_widget-header span');
                if (headerSpan) {
                headerSpan.innerHTML = ksesFilter('All spots ' + getIssuesCounterString(this.savedIssuesQuantityOnPage, this.savedIssuesQuantityAll));


        tasksCount = filteredTasks.length;

+        let notificationsCount = 0;
+
+        if(!this.nonRequesting) {
+            const activeTasksIds = filteredTasks.map(item => item.taskId);
+            notificationsCount = await getNotificationsDoboard(this.params.projectToken, sessionId, this.params.accountId, this.params.projectId);
+            notificationsCount = [...new Map(notificationsCount.map((item) => [item.task_id, item])).values()];
+            notificationsCount = notificationsCount.filter((item) => activeTasksIds.includes(item.task_id)).length;
+            localStorage.setItem('spotfix-tasks-notifications-count', `${notificationsCount}`);
+        } else {
+            notificationsCount = localStorage.getItem('spotfix-tasks-notifications-count');
+        }
+
        const taskCountElement = document.getElementById('doboard_task_widget-task_count');
-        if ( taskCountElement && +tasksCount ) {
-            taskCountElement.innerText = ksesFilter(tasksCount);
+        if ( taskCountElement && +notificationsCount ) {
+            taskCountElement.innerText = ksesFilter(notificationsCount);


+            localStorage.setItem('spotfix-tasks-notifications-count', `${notificationsCount}`);
+        } else {
+            notificationsCount = localStorage.getItem('spotfix-tasks-notifications-count');
+        }


+    const commonNode = range.commonAncestorContainer;
+    const commonElement = commonNode.nodeType === Node.ELEMENT_NODE ? commonNode : commonNode.parentElement;
+    if (commonElement === document.body && range.startContainer !== range.endContainer) {
+        spotFixDebugLog('`spotFixGetSelectedData` skip: Selection is too broad');
+        return null;
+    }
+
+    // if (range.startContainer !== range.endContainer) { spotFixDebugLog('`spotFixGetSelectedData` skip by `Selection within several tags nodes`'); return null; }


+
+        if(!this.nonRequesting) {
+            const activeTasksIds = filteredTasks.map(item => item.taskId);
+            notificationsCount = await getNotificationsDoboard(this.params.projectToken, sessionId, this.params.accountId, this.params.projectId);


    display: flex;
    flex-direction: column;
    -moz-flex-direction: column;
+    min-height: 490px;


veronika-tseleva-cleantalk added 6 commits May 12, 2026 19:04

Fix. fixed widget appearance

b74d06b

Fix. fixed min widget size

9c25be1

Fix. fixed highlight

3d577b7

Fix. fixed widget count indicator

4a1f15c

Fix. fixed widget count indicator

e1d2439

Fix. fixed widget count indicator

0ffc874

Copilot AI review requested due to automatic review settings May 12, 2026 19:13

Copilot started reviewing on behalf of veronika-tseleva-cleantalk May 12, 2026 19:14 View session

Copilot AI reviewed May 12, 2026

View reviewed changes

Fix. fixed by review

82f14c6

veronika-tseleva-cleantalk requested review from AntonV1211, Glomberg, alexander-b-clean, alexandergull and svfcode May 12, 2026 19:30

Glomberg approved these changes May 13, 2026

View reviewed changes

alexander-b-clean approved these changes May 14, 2026

View reviewed changes

svfcode approved these changes May 14, 2026

View reviewed changes

Fix. fixed by review

64b5bd0

Copilot AI review requested due to automatic review settings May 14, 2026 09:33

Copilot started reviewing on behalf of veronika-tseleva-cleantalk May 14, 2026 09:33 View session

Fix. fixed by review

999f4c1

Copilot AI reviewed May 14, 2026

View reviewed changes

veronika-tseleva-cleantalk added 2 commits May 14, 2026 14:04

Fix. fixed by review

174e0e6

Fix. fixed by review

9d2619c

Copilot AI review requested due to automatic review settings May 14, 2026 10:19

Copilot started reviewing on behalf of veronika-tseleva-cleantalk May 14, 2026 10:19 View session

Copilot AI reviewed May 14, 2026

View reviewed changes

veronika-tseleva-cleantalk added 2 commits May 14, 2026 14:35

Fix. fixed by review

70a8784

Fix. fixed by review

6a7c310

Copilot AI review requested due to automatic review settings May 14, 2026 21:09

Copilot started reviewing on behalf of veronika-tseleva-cleantalk May 14, 2026 21:10 View session

Copilot AI reviewed May 14, 2026

View reviewed changes

Fix. fixed by review

76576c4

veronika-tseleva-cleantalk merged commit bf5f8db into dev May 14, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Highlight spots#105

Highlight spots#105
veronika-tseleva-cleantalk merged 14 commits into
devfrom
highlight-spots

veronika-tseleva-cleantalk commented May 12, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

		const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);

		// if (range.startContainer !== range.endContainer) { spotFixDebugLog('`spotFixGetSelectedData` skip by `Selection within several tags nodes`'); return null; }

		notificationsCount = await getNotificationsDoboard(this.params.projectToken, sessionId, this.params.accountId, this.params.projectId);
		notificationsCount = [...new Map(notificationsCount.map((item) => [item.task_id, item])).values()];

Conversation

veronika-tseleva-cleantalk commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

veronika-tseleva-cleantalk commented May 12, 2026 •

edited

Loading