Multiple Matches in One Element Bug

[benjamin-chavez]

Fix started in multiple-matches-in-one-element-bug branch.

Specifially in the src/contentScripts/utils/serialization/serializeTabState.ts file, the following update fixes the bug. However, in making this change the xpaths that are saved to local storage when the layover is closed get corrupted. So with the following fix, you can update the code so that a completely new search is performed when the layover is re-opened instead of restoring the highlight spans.

Part 1 of the fix:

// src/utils/serializeTabState.ts

import {
  JSONString,
  SerializedTabState,
  TabState,
  XPathMatchObject,
} from '../../types/tab.types';

function getXPath(element: Node): string {
  if (element.nodeType !== Node.ELEMENT_NODE) {
    return '';
  }

  const htmlElement = element as HTMLElement;

  if (htmlElement.id !== '') {
    return `//*[@id="${htmlElement.id}"]`;
  }

  if (htmlElement === document.body) {
    return htmlElement.tagName;
  }

  let index = 1;
  let sibling = htmlElement.previousElementSibling;
  while (sibling) {
    if (sibling.tagName === htmlElement.tagName) {
      index += 1;
    }
    sibling = sibling.previousElementSibling;
  }

  return `${getXPath(htmlElement.parentNode as Node)}/${
    htmlElement.tagName
  }[${index}]`;
}

function generateXPaths(matchesObj: HTMLSpanElement[]): XPathMatchObject[] {
  const xpaths: XPathMatchObject[] = matchesObj.map((el) => {
    const xpath: string = getXPath(el as Node); // generate XPath for the span element itself
    const text = el.textContent || '';
    const spanClasses = Array.from(el.classList);
    return { xpath, text, spanClasses };
  });

  return xpaths;
}

export default function serializeTabState(
  shallowStateObject: TabState
): SerializedTabState {
  const { matchesObj, ...otherProperties } = shallowStateObject;
  console.log('matchesObj', matchesObj);
  console.log('otherProperties', otherProperties);
  const xpaths: XPathMatchObject[] = generateXPaths(matchesObj);
  const serializedXPaths: JSONString = JSON.stringify(xpaths);
  const serializedState: SerializedTabState = {
    ...otherProperties,
    serializedMatches: serializedXPaths,
  };
  return serializedState;
}```