@tolgee/core 4.7.0 → 4.7.2

package/src/helpers/encoderPolyfill.ts

@@ -0,0 +1,96 @@
+// TextEncoder/TextDecoder polyfills for utf-8 - an implementation of TextEncoder/TextDecoder APIs
+// Written in 2013 by Viktor Mukhachev <vic99999@yandex.ru>
+// To the extent possible under law, the author(s) have dedicated all copyright and related and neighboring rights to this software to the public domain worldwide. This software is distributed without any warranty.
+// You should have received a copy of the CC0 Public Domain Dedication along with this software. If not, see <http://creativecommons.org/publicdomain/zero/1.0/>.
+
+// Some important notes about the polyfill below:
+// Native TextEncoder/TextDecoder implementation is overwritten
+// String.prototype.codePointAt polyfill not included, as well as String.fromCodePoint
+// TextEncoder.prototype.encode returns a regular array instead of Uint8Array
+// No options (fatal of the TextDecoder constructor and stream of the TextDecoder.prototype.decode method) are supported.
+// TextDecoder.prototype.decode does not valid byte sequences
+// This is a demonstrative implementation not intended to have the best performance
+
+// http://encoding.spec.whatwg.org/#textencoder
+
+// http://encoding.spec.whatwg.org/#textencoder
+
+function PTextEncoder() {}
+
+PTextEncoder.prototype.encode = function (string) {
+  const octets = [];
+  const length = string.length;
+  let i = 0;
+  while (i < length) {
+    const codePoint = string.codePointAt(i);
+    let c = 0;
+    let bits = 0;
+    if (codePoint <= 0x0000007f) {
+      c = 0;
+      bits = 0x00;
+    } else if (codePoint <= 0x000007ff) {
+      c = 6;
+      bits = 0xc0;
+    } else if (codePoint <= 0x0000ffff) {
+      c = 12;
+      bits = 0xe0;
+    } else if (codePoint <= 0x001fffff) {
+      c = 18;
+      bits = 0xf0;
+    }
+    octets.push(bits | (codePoint >> c));
+    c -= 6;
+    while (c >= 0) {
+      octets.push(0x80 | ((codePoint >> c) & 0x3f));
+      c -= 6;
+    }
+    i += codePoint >= 0x10000 ? 2 : 1;
+  }
+  return octets;
+};
+
+function PTextDecoder() {}
+
+PTextDecoder.prototype.decode = function (octets) {
+  let string = '';
+  let i = 0;
+  while (i < octets.length) {
+    let octet = octets[i];
+    let bytesNeeded = 0;
+    let codePoint = 0;
+    if (octet <= 0x7f) {
+      bytesNeeded = 0;
+      codePoint = octet & 0xff;
+    } else if (octet <= 0xdf) {
+      bytesNeeded = 1;
+      codePoint = octet & 0x1f;
+    } else if (octet <= 0xef) {
+      bytesNeeded = 2;
+      codePoint = octet & 0x0f;
+    } else if (octet <= 0xf4) {
+      bytesNeeded = 3;
+      codePoint = octet & 0x07;
+    }
+    if (octets.length - i - bytesNeeded > 0) {
+      let k = 0;
+      while (k < bytesNeeded) {
+        octet = octets[i + k + 1];
+        codePoint = (codePoint << 6) | (octet & 0x3f);
+        k += 1;
+      }
+    } else {
+      codePoint = 0xfffd;
+      bytesNeeded = octets.length - i;
+    }
+    string += String.fromCodePoint(codePoint);
+    i += bytesNeeded + 1;
+  }
+  return string;
+};
+
+export const Encoder = (typeof TextEncoder === 'undefined'
+  ? PTextEncoder
+  : TextEncoder) as unknown as typeof TextEncoder;
+export const Decoder = (typeof TextDecoder === 'undefined'
+  ? PTextDecoder
+  : TextDecoder) as unknown as typeof TextDecoder;

package/src/helpers/secret.test.ts

@@ -0,0 +1,61 @@
+jest.disableAutomock();
+
+import {
+  decodeFromText,
+  encodeMessage,
+  INVISIBLE_CHARACTERS,
+  removeSecrets,
+  stringToCodePoints,
+} from './secret';
+
+describe('Invisible encoder/decoder', () => {
+  it('Works with simple text', () => {
+    const message = 'Tolgee' + encodeMessage('secret');
+    expect(decodeFromText(message)).toEqual(['secret']);
+  });
+
+  it('Works with utf-8 text', () => {
+    const message = '💩💩💩' + encodeMessage('💩💩');
+    expect(decodeFromText(message)).toEqual(['💩💩']);
+  });
+
+  it('Works with joiners in text', () => {
+    const message = '👩‍👩‍👦‍👦👩‍👩‍👦‍👦👩‍👩‍👦‍👦' + encodeMessage('💩💩');
+    expect(decodeFromText(message)).toEqual(['💩💩']);
+  });
+
+  it('Removes secrets correctly', () => {
+    const message = '👩‍👩‍👦‍👦👩‍👩‍👦‍👦👩‍👩‍👦‍👦' + encodeMessage('💩💩');
+    const cleanedMessage = removeSecrets(message);
+    expect(cleanedMessage).toEqual('👩‍👩‍👦‍👦👩‍👩‍👦‍👦👩‍👩‍👦‍👦');
+    expect(decodeFromText(cleanedMessage)).toEqual([]);
+  });
+
+  it('works correctly with numbers', () => {
+    [...Array(3)].map((_, i) => {
+      const numbers = [i, i + 10, i + 100, i + 1_000, i + 10_000, i + 100_000];
+      const message =
+        '👩‍👩‍👦‍👦👩‍👩‍👦‍👦👩‍👩‍👦‍👦' + encodeMessage(String.fromCodePoint(...numbers));
+      expect(decodeFromText(message)).toEqual([
+        String.fromCodePoint(...numbers),
+      ]);
+    });
+  });
+
+  it('works with unicode numbers', () => {
+    const message =
+      '👩‍👩‍👦‍👦👩‍👩‍👦‍👦👩‍👩‍👦‍👦' + encodeMessage(String.fromCodePoint(10, 500_000, 1_000_000));
+    const decodedString = decodeFromText(message)[0];
+    expect(stringToCodePoints(decodedString)).toEqual([10, 500_000, 1_000_000]);
+  });
+
+  it('works correctly with multiple non-joiners in row', () => {
+    // valid secret byte is 8 + 1 (non-joiner), so 8 should be ignored
+    const originalMessage = `a${INVISIBLE_CHARACTERS[0].repeat(8)}bcd`;
+    const message = originalMessage + encodeMessage('💩💩');
+    const cleanedMessage = removeSecrets(message);
+    expect(decodeFromText(message)).toEqual(['💩💩']);
+    expect(decodeFromText(cleanedMessage)).toEqual([]);
+    expect(cleanedMessage).toEqual(originalMessage);
+  });
+});

package/src/helpers/secret.ts

@@ -0,0 +1,68 @@
+import { Encoder, Decoder } from './encoderPolyfill';
+
+export const INVISIBLE_CHARACTERS = ['\u200C', '\u200D'];
+
+export const INVISIBLE_REGEX = RegExp(
+  `([${INVISIBLE_CHARACTERS.join('')}]{9})+`,
+  'gu'
+);
+
+const toBytes = (text: string) => {
+  return Array.from(new Encoder().encode(text));
+};
+
+const fromBytes = (bytes) => {
+  return new Decoder().decode(new Uint8Array(bytes));
+};
+
+const padToWholeBytes = (binary: string) => {
+  const needsToAdd = 8 - binary.length;
+  return '0'.repeat(needsToAdd) + binary;
+};
+
+export const encodeMessage = (text: string) => {
+  const bytes = toBytes(text).map(Number);
+  const binary = bytes
+    .map((byte) => padToWholeBytes(byte.toString(2)) + '0')
+    .join('');
+
+  const result = Array.from(binary)
+    .map((b) => INVISIBLE_CHARACTERS[Number(b)])
+    .join('');
+
+  return result;
+};
+
+const decodeMessage = (message: string) => {
+  const binary = Array.from(message)
+    .map((character) => {
+      return INVISIBLE_CHARACTERS.indexOf(character);
+    })
+    .map(String)
+    .join('');
+
+  const textBytes = binary.match(/(.{9})/g);
+  const codes = Uint8Array.from(
+    textBytes.map((byte) => parseInt(byte.slice(0, 8), 2))
+  );
+  return fromBytes(codes);
+};
+
+export const decodeFromText = (text: string) => {
+  const invisibleMessages = text
+    .match(INVISIBLE_REGEX)
+    ?.filter((m) => m.length > 8);
+  return invisibleMessages?.map(decodeMessage) || [];
+};
+
+export const removeSecrets = (text: string) => {
+  return text.replace(INVISIBLE_REGEX, '');
+};
+
+export const stringToCodePoints = (text: string) => {
+  const result: number[] = [];
+  for (const codePoint of text) {
+    result.push(codePoint.codePointAt(0));
+  }
+  return result;
+};

package/src/helpers/sleep.ts

@@ -0,0 +1,2 @@
+export const sleep = (ms: number) =>
+  new Promise((resolve) => setTimeout(resolve, ms));

package/src/highlighter/HighlightFunctionsInitializer.test.ts

@@ -0,0 +1,40 @@
+jest.dontMock('./HighlightFunctionsInitializer');
+jest.dontMock('../services/DependencyService');
+
+import { HighlightFunctionsInitializer } from './HighlightFunctionsInitializer';
+import { ElementWithMeta } from '../types';
+import { DependencyService } from '../services/DependencyService';
+
+describe('HighlightFunctionsInitializer', () => {
+  let highlightFunctionInitializer: HighlightFunctionsInitializer;
+  let mockedElement: ElementWithMeta;
+
+  beforeEach(async () => {
+    document.body.appendChild = jest.fn();
+    jest.clearAllMocks();
+    const dependencyService = new DependencyService();
+    dependencyService.init({});
+    highlightFunctionInitializer =
+      dependencyService.highlightFunctionInitializer;
+    mockedElement = document.createElement('div') as Element as ElementWithMeta;
+    (mockedElement._tolgee as any) = {};
+    highlightFunctionInitializer.initFunctions(mockedElement);
+  });
+
+  afterEach(async () => {
+    jest.clearAllMocks();
+  });
+
+  test('Will reset to correct initial color', async () => {
+    mockedElement.style.backgroundColor = '#222222';
+    mockedElement._tolgee.highlight();
+    mockedElement._tolgee.unhighlight();
+    expect(mockedElement.style.backgroundColor).toEqual('rgb(34, 34, 34)');
+  });
+
+  test('Will highlight', async () => {
+    jest.spyOn(mockedElement, 'isConnected', 'get').mockReturnValue(true);
+    mockedElement._tolgee.highlight();
+    expect(document.body.appendChild).toBeCalled();
+  });
+});

package/src/highlighter/HighlightFunctionsInitializer.ts

@@ -0,0 +1,61 @@
+import { TOLGEE_HIGHLIGHTER_CLASS } from '../Constants/Global';
+import { Properties } from '../Properties';
+import { ElementWithMeta } from '../types';
+
+const HIGHLIGHTER_BASE_STYLE: Partial<CSSStyleDeclaration> = {
+  pointerEvents: 'none',
+  position: 'fixed',
+  boxSizing: 'content-box',
+  zIndex: String(Number.MAX_SAFE_INTEGER),
+  contain: 'layout',
+  display: 'block',
+  borderStyle: 'solid',
+  borderRadius: '4px',
+};
+
+export class HighlightFunctionsInitializer {
+  constructor(private properties: Properties) {}
+
+  initFunctions(element: ElementWithMeta) {
+    this.initHighlightFunction(element);
+    this.initUnhighlightFunction(element);
+  }
+
+  borderElement: HTMLDivElement | null;
+  private initHighlightFunction(element: ElementWithMeta) {
+    element._tolgee.highlight = () => {
+      const highlightColor = this.properties.config.highlightColor;
+      const highlightWidth = this.properties.config.highlightWidth;
+      if (!element.isConnected) {
+        return;
+      }
+      let highlightEl = element._tolgee.highlightEl;
+      if (!highlightEl) {
+        highlightEl = document.createElement('div');
+        highlightEl.classList.add(TOLGEE_HIGHLIGHTER_CLASS);
+        Object.entries(HIGHLIGHTER_BASE_STYLE).forEach(([key, value]) => {
+          highlightEl.style[key] = value;
+        });
+        highlightEl.style.borderColor = highlightColor;
+
+        element._tolgee.highlightEl = highlightEl;
+        document.body.appendChild(highlightEl);
+      }
+
+      const shape = element.getBoundingClientRect();
+
+      highlightEl.style.borderWidth = highlightWidth + 'px';
+      highlightEl.style.top = shape.top - highlightWidth + 'px';
+      highlightEl.style.left = shape.left - highlightWidth + 'px';
+      highlightEl.style.width = shape.width + 'px';
+      highlightEl.style.height = shape.height + 'px';
+    };
+  }
+
+  private initUnhighlightFunction(element: ElementWithMeta) {
+    element._tolgee.unhighlight = () => {
+      element._tolgee.highlightEl?.remove();
+      element._tolgee.highlightEl = null;
+    };
+  }
+}

package/src/highlighter/MouseEventHandler.test.ts

@@ -0,0 +1,151 @@
+jest.dontMock('./MouseEventHandler');
+jest.dontMock('../Constants/ModifierKey');
+jest.dontMock('../services/EventEmitter');
+jest.dontMock('../services/Subscription');
+jest.dontMock('../services/DependencyService');
+
+import { ElementMeta, ElementWithMeta } from '../types';
+import { getMockedInstance } from '@testFixtures/mocked';
+import { Properties } from '../Properties';
+import { ModifierKey } from '../Constants/ModifierKey';
+import { DependencyService } from '../services/DependencyService';
+
+describe('MouseEventHandler', () => {
+  let mockedElement: ElementWithMeta;
+  const key = 'Alt';
+
+  const mockedCallback = jest.fn();
+  const mockedClick = new MouseEvent('click');
+  const mockedMouseMove = new MouseEvent('mousemove', {
+    clientX: 15,
+    clientY: 15,
+  });
+  const mockedKeydown = new KeyboardEvent('keydown', { key });
+  const mockedKeyup = new KeyboardEvent('keyup', { key });
+  const mockedHighlight = jest.fn();
+  const mockedUnhighlight = jest.fn();
+
+  const withMeta = (element: Element) => {
+    (element as ElementWithMeta)._tolgee = {
+      highlight: mockedHighlight,
+      unhighlight: mockedUnhighlight,
+    } as any as ElementMeta;
+    return element as Element as ElementWithMeta;
+  };
+
+  const moveMouseAway = () => {
+    document.elementFromPoint = jest.fn(() => undefined);
+    mockedElement.dispatchEvent(mockedMouseMove);
+  };
+
+  const moveMouseOn = () => {
+    document.elementFromPoint = jest.fn(() => mockedElement);
+    mockedElement.dispatchEvent(mockedMouseMove);
+  };
+
+  let dependencyService: DependencyService;
+
+  beforeEach(async () => {
+    dependencyService = new DependencyService();
+    dependencyService.translationHighlighter.translationEdit = mockedCallback;
+    dependencyService.init({});
+    dependencyService.run();
+    mockedElement = withMeta(document.createElement('div'));
+    mockedElement.style.width = '20px';
+    mockedElement.style.height = '20px';
+    document.body.appendChild(mockedElement);
+    getMockedInstance(Properties).config.highlightKeys = [ModifierKey[key]];
+    mockedElement.dispatchEvent(mockedKeydown);
+    moveMouseOn();
+  });
+
+  afterEach(async () => {
+    dependencyService.mouseEventHandler.stop();
+    jest.clearAllMocks();
+  });
+
+  describe('highlighting', () => {
+    test('Will highlight', async () => {
+      expect(mockedHighlight).toBeCalledTimes(1);
+    });
+
+    test('Will unhighlight', async () => {
+      moveMouseAway();
+      expect(mockedUnhighlight).toBeCalled();
+    });
+
+    test('Will not highlight just on mouseover', async () => {
+      moveMouseAway();
+      document.dispatchEvent(mockedKeyup);
+      mockedHighlight.mockClear();
+      moveMouseOn();
+      expect(mockedHighlight).toBeCalledTimes(0);
+    });
+
+    test('Will prevent clean on mouseover', async () => {
+      expect(mockedElement._tolgee.preventClean).toBeTruthy();
+      moveMouseAway();
+      expect(mockedElement._tolgee.preventClean).toBeFalsy();
+    });
+
+    test('Will remove prevent clean on mouseout', async () => {
+      moveMouseAway();
+      expect(mockedElement._tolgee.preventClean).toBeFalsy();
+    });
+
+    test('Will not highlight just on keydown', async () => {
+      mockedHighlight.mockClear();
+      moveMouseAway();
+      mockedElement.dispatchEvent(mockedKeyup);
+      mockedElement.dispatchEvent(mockedKeydown);
+      expect(mockedHighlight).toBeCalledTimes(0);
+    });
+
+    test('Will highlight when keydown first', async () => {
+      mockedHighlight.mockClear();
+      moveMouseAway();
+      mockedElement.dispatchEvent(mockedKeyup);
+      document.dispatchEvent(mockedKeydown);
+      moveMouseOn();
+      expect(mockedHighlight).toBeCalledTimes(1);
+    });
+
+    test('Will clear keys on window blur', async () => {
+      document.dispatchEvent(new Event('blur'));
+      mockedElement.dispatchEvent(mockedClick);
+      expect(mockedCallback).not.toBeCalledTimes(1);
+    });
+  });
+
+  describe('click', () => {
+    test('Will call callback on click', async () => {
+      mockedElement.dispatchEvent(mockedClick);
+      expect(mockedCallback).toBeCalledTimes(1);
+    });
+  });
+
+  describe('eventHandler stopping', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    test("will not handle click after it's call", () => {
+      dependencyService.mouseEventHandler.stop();
+      mockedElement.dispatchEvent(mockedClick);
+      expect(mockedCallback).toBeCalledTimes(0);
+    });
+
+    test("will not handle mouse over after it's call", () => {
+      moveMouseAway();
+      dependencyService.mouseEventHandler.stop();
+      moveMouseOn();
+      expect(mockedHighlight).toBeCalledTimes(0);
+    });
+
+    test("will not handle mouse leave after it's call", () => {
+      dependencyService.mouseEventHandler.stop();
+      moveMouseAway();
+      expect(mockedCallback).toBeCalledTimes(0);
+    });
+  });
+});

package/src/highlighter/MouseEventHandler.ts

@@ -0,0 +1,191 @@
+import { ElementMeta, ElementWithMeta } from '../types';
+import { ModifierKey } from '../Constants/ModifierKey';
+import { EventEmitterImpl } from '../services/EventEmitter';
+import { DependencyService } from '../services/DependencyService';
+import { DEVTOOLS_ID } from '../Constants/Global';
+
+const eCapture = {
+  capture: true,
+};
+
+const ePassive = {
+  capture: true,
+  passive: true,
+};
+
+type Coordinates = {
+  x: number;
+  y: number;
+};
+
+type TolgeeElement = Element &
+  ElementCSSInlineStyle & { _tolgee?: ElementMeta };
+
+export class MouseEventHandler {
+  private keysDown = new Set<ModifierKey>();
+  private highlighted: ElementWithMeta;
+  private mouseOnChanged = new EventEmitterImpl<ElementWithMeta>();
+  private keysChanged: EventEmitterImpl<boolean> =
+    new EventEmitterImpl<boolean>();
+  private cursorPosition: Coordinates | undefined;
+
+  constructor(private dependencies: DependencyService) {}
+
+  run() {
+    if (typeof window !== 'undefined') {
+      this.initEventListeners();
+    }
+  }
+
+  stop() {
+    if (typeof window !== 'undefined') {
+      this.removeEventListeners();
+    }
+  }
+
+  private readonly highlight = (el: ElementWithMeta | undefined) => {
+    if (this.highlighted !== el) {
+      this.unhighlight();
+      if (el) {
+        el._tolgee.preventClean = true;
+        el._tolgee.highlight();
+        this.highlighted = el;
+        this.mouseOnChanged.emit(el);
+      }
+    }
+  };
+
+  private readonly unhighlight = () => {
+    if (this.highlighted) {
+      this.highlighted._tolgee.preventClean = false;
+      this.highlighted._tolgee.unhighlight();
+      this.highlighted = undefined;
+      this.mouseOnChanged.emit(this.highlighted);
+    }
+  };
+
+  private updateHighlight() {
+    const position = this.cursorPosition;
+
+    let newHighlighted: ElementWithMeta;
+    if (position && this.areKeysDown()) {
+      newHighlighted = this.getClosestTolgeeElement(
+        document.elementFromPoint(position.x, position.y)
+      );
+    }
+    this.highlight(newHighlighted);
+  }
+
+  private updateCursorPosition(position: Coordinates) {
+    this.cursorPosition = position;
+    this.updateHighlight();
+  }
+
+  private blockEvents = (e: MouseEvent) => {
+    if (this.areKeysDown() && !this.isInUiDialog(e.target as Element)) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  };
+  private onMouseMove = (e: MouseEvent) => {
+    this.updateCursorPosition({ x: e.clientX, y: e.clientY });
+  };
+  private onBlur = () => {
+    this.keysDown = new Set();
+    this.keysChanged.emit(this.areKeysDown());
+    this.updateHighlight();
+  };
+  private onKeyDown = (e: KeyboardEvent) => {
+    const modifierKey = ModifierKey[e.key];
+    if (modifierKey !== undefined) {
+      this.keysDown.add(modifierKey);
+      this.keysChanged.emit(this.areKeysDown());
+    }
+    this.updateHighlight();
+  };
+  private onKeyUp = (e: KeyboardEvent) => {
+    this.keysDown.delete(ModifierKey[e.key]);
+    this.keysChanged.emit(this.areKeysDown());
+    this.updateHighlight();
+  };
+  private onScroll = () => {
+    this.highlighted?._tolgee.highlight();
+  };
+  private onClick = (e: MouseEvent) => {
+    this.blockEvents(e);
+    if (this.areKeysDown()) {
+      const element = this.getClosestTolgeeElement(e.target as TolgeeElement);
+      if (element && element === this.highlighted) {
+        this.dependencies.translationHighlighter.translationEdit(e, element);
+        this.unhighlight();
+      }
+    }
+  };
+
+  private initEventListeners() {
+    window.addEventListener('blur', this.onBlur, eCapture);
+    window.addEventListener('keydown', this.onKeyDown, eCapture);
+    window.addEventListener('keyup', this.onKeyUp, eCapture);
+    window.addEventListener('mousemove', this.onMouseMove, ePassive);
+    window.addEventListener('scroll', this.onScroll, ePassive);
+    window.addEventListener('click', this.onClick, eCapture);
+
+    window.addEventListener('mouseenter', this.blockEvents, eCapture);
+    window.addEventListener('mouseover', this.blockEvents, eCapture);
+    window.addEventListener('mouseout', this.blockEvents, eCapture);
+    window.addEventListener('mouseleave', this.blockEvents, eCapture);
+    window.addEventListener('mousedown', this.blockEvents, eCapture);
+    window.addEventListener('mouseup', this.blockEvents, eCapture);
+  }
+
+  private removeEventListeners() {
+    window.removeEventListener('blur', this.onBlur, eCapture);
+    window.removeEventListener('keydown', this.onKeyDown, eCapture);
+    window.removeEventListener('keyup', this.onKeyUp, eCapture);
+    window.removeEventListener('mousemove', this.onMouseMove, ePassive);
+    window.removeEventListener('scroll', this.onScroll, ePassive);
+    window.removeEventListener('click', this.onClick, eCapture);
+
+    window.removeEventListener('mouseenter', this.blockEvents, eCapture);
+    window.removeEventListener('mouseover', this.blockEvents, eCapture);
+    window.removeEventListener('mouseout', this.blockEvents, eCapture);
+    window.removeEventListener('mouseleave', this.blockEvents, eCapture);
+    window.removeEventListener('mousedown', this.blockEvents, eCapture);
+    window.removeEventListener('mouseup', this.blockEvents, eCapture);
+  }
+
+  private isInUiDialog(element: Element) {
+    return Boolean(this.findAncestor(element, (el) => el.id === DEVTOOLS_ID));
+  }
+
+  private getClosestTolgeeElement(
+    element: Element
+  ): ElementWithMeta | undefined {
+    return this.findAncestor(
+      element,
+      (el) => (el as ElementWithMeta)?._tolgee
+    ) as ElementWithMeta;
+  }
+
+  private findAncestor(
+    element,
+    func: (el: Element) => any
+  ): Element | undefined {
+    if (func(element)) {
+      return element;
+    }
+    if (element?.parentElement) {
+      return this.findAncestor(element.parentElement, func);
+    }
+    return undefined;
+  }
+
+  private areKeysDown() {
+    for (const key of this.dependencies.properties.config.highlightKeys) {
+      if (!this.keysDown.has(key)) {
+        return false;
+      }
+    }
+    return true;
+  }
+}