fix: stop affecting tooltips by higlighter (#3323)

packages/web/src/app/App.tsx

@@ -1,42 +1,30 @@
 import { useEffect } from 'react';
-import { secrets, tolgee, useTolgee } from './basicTolgee';
+import { useTolgee } from './basicTolgee';
 import { styled } from '@mui/material';
-import { InContextUi } from '../package/ui/InContextUi';
 
 const StyledContainer = styled('div')`
   margin: 100px auto;
   max-width: 300px;
 `;
 
-const ui = InContextUi({
-  ...secrets,
-  projectId: undefined,
-  highlight: tolgee.highlight,
-  findPositions: tolgee.findPositions,
-  changeTranslation: tolgee.changeTranslation,
-  onPermanentChange: undefined,
-});
-
 export const App = () => {
   const tolgee = useTolgee(['update', 'language']);
 
   useEffect(() => {
     tolgee.run();
-    ui.openKeyDialog({
-      key: 'on-the-road-title',
-      defaultValue: 'Default value',
-      fallbackNamespaces: [''],
-      namespace: '',
-    });
   }, []);
 
   return (
     <StyledContainer>
-      <div>{tolgee.t('on-the-road-title')}</div>
+      <div title="test">{tolgee.t('on-the-road-title')}</div>
       <div>
         {tolgee.t('on-the-road-title')}
         {tolgee.t('on-the-road-subtitle')}
       </div>
+      <button disabled>{tolgee.t('app-title')}</button>
+      <div style={{ pointerEvents: 'none' }}>
+        <div>{tolgee.t('app-title')}</div>
+      </div>
     </StyledContainer>
   );
 };

packages/web/src/package/observers/general/ElementHighlighter.ts

@@ -1,5 +1,6 @@
 import { TOLGEE_HIGHLIGHTER_CLASS } from '../../constants';
 import { ElementMeta, TolgeeElement } from '../../types';
+import { elementClickable } from './helpers';
 
 const HIGHLIGHTER_BASE_STYLE: Partial<CSSStyleDeclaration> = {
   position: 'fixed',
@@ -25,6 +26,7 @@ export function ElementHighlighter({ highlightColor, highlightWidth }: Props) {
       if (!element.isConnected) {
         return;
       }
+      const clickable = elementClickable(element);
       let highlightEl = elementMeta.highlightEl;
       if (!highlightEl) {
         highlightEl = document.createElement('div');
@@ -41,6 +43,7 @@ export function ElementHighlighter({ highlightColor, highlightWidth }: Props) {
 
       const shape = element.getBoundingClientRect();
 
+      highlightEl.style.pointerEvents = clickable ? 'none' : 'auto';
       highlightEl.style.borderWidth = highlightWidth + 'px';
       highlightEl.style.top = shape.top - highlightWidth + 'px';
       highlightEl.style.left = shape.left - highlightWidth + 'px';

packages/web/src/package/observers/general/helpers.ts

@@ -1,45 +1,5 @@
 import { KeyDescriptorInternal } from '../../types';
 
-export function xPathEvaluate<T extends Node>(
-  expression: string,
-  targetNode: Node
-): Node[] {
-  const searchableElement = closestElement(targetNode);
-
-  const result: Node[] = [];
-  if (!searchableElement) {
-    return result;
-  }
-
-  const evaluated = document?.evaluate(
-    expression,
-    searchableElement,
-    undefined,
-    XPathResult.ANY_TYPE
-  );
-
-  let node: Node | null | undefined;
-  while ((node = evaluated?.iterateNext?.())) {
-    result.push(node as T);
-  }
-  return result;
-}
-
-export function closestElement(node: Node): Element | undefined {
-  switch (node.nodeType) {
-    case Node.ATTRIBUTE_NODE:
-      return (node as Attr).ownerElement || undefined;
-    case Node.TEXT_NODE:
-      return (node.parentElement as Element) || undefined;
-    case Node.DOCUMENT_NODE:
-    case Node.ELEMENT_NODE:
-      return node as Element;
-    default:
-      // we are not interested in other nodes
-      return undefined;
-  }
-}
-
 export function getNodeText(node: Node) {
   return node.textContent;
 }
@@ -48,21 +8,6 @@ export function setNodeText(node: Node, text: string) {
   node.textContent = text;
 }
 
-export function nodeContains(descendant: Node, node: Node) {
-  if (descendant.contains(node)) {
-    return true;
-  }
-  if (node instanceof Attr) {
-    const ownerContainsAttr =
-      node.ownerElement &&
-      Object.values(node.ownerElement.attributes).indexOf(node) > -1;
-    if (descendant.contains(node.ownerElement) && ownerContainsAttr) {
-      return true;
-    }
-  }
-  return false;
-}
-
 export function compareDescriptors(
   descriptor: KeyDescriptorInternal,
   criteria: KeyDescriptorInternal
@@ -78,3 +23,13 @@ export function compareDescriptors(
 
   return keyMatches && nsMatches;
 }
+
+export function elementClickable(el: HTMLElement) {
+  while (el) {
+    if (el.getAttribute('disabled') !== null) {
+      return false;
+    }
+    el = el.parentElement;
+  }
+  return true;
+}

packages/web/src/package/types.ts

@@ -13,10 +13,9 @@ export type NodeLock = {
   locked?: boolean;
 };
 
-export type TolgeeElement = Element &
-  ElementCSSInlineStyle & {
-    _tolgee?: boolean;
-  };
+export type TolgeeElement = HTMLElement & {
+  _tolgee?: boolean;
+};
 
 export type BackendOptions = Omit<RequestInfo, 'headers'> & {
   /**