Skip to main content
Version: 5.x.x

Observer options

Tolgee Observer options which are part of tolgee options. Allows you to influence ObserverPlugin if present.

targetElement​

Element where wrapped strings are expected in development mode.

targetElement: HTMLElement;

Default: document.body

fullKeyEncode​

Encode full key info into the wrapped translation (read more about wrapping). This option allows you to wrap translations on the server and then unwrap on the client. The option is important for the wrapping side (server), the unwrapping side can handle both cases.

By default Tolgee encodes only key indexes and that requires the usage of the same instance for wrapping and unwrapping.

Default: false

tagAttributes​

Tolgee is able to watch also for wrapped localization strings in attributes of DOM elements. These attributes must be specified in these configuration properties.

tagAttributes: Record<string, string[]>;

Default:

tagAttributes: {
    textarea: ['placeholder'],
    input: ['value', 'placeholder'],
    img: ['alt'],
    '*': ['aria-label', 'title'],
}

highlightKeys​

By default, in development mode, when you move mouse over an element containing translated text and key ALT is down, this element is highlighted by changing its background color. To modify the key use highlightKeys property.

highlightKeys: ModifierKey[];

Example:

import { ModifierKey } from '../clients/js/packages/core/lib/index';

highlightKeys: [ModifierKey.Shift, ModifierKey.Alt];

Default: [ModifierKey.Alt]

highlightColor​

Highlighter border color.

highlightColor: string;

Default: rgb(255 0 0)  

highlightWidth​

Border width of highlighter.

highlightWidth: number;

Default: 5px

restrictedElements​

Array of elements in which you don't want Tolgee to replace wrapped strings.

restrictedElements: string[];

Default: ['script', 'style']

inputPrefix and inputSuffix​

Only for TextObserver

In development mode, strings to be translated are wrapped by @tolgee/core library at first and then parsed and replaced with translated value. This mechanism is called wrapping.

inputPrefix is inserted before the encoded string and inputSuffix is inserted after the string. By those 2 strings Tolgee recognises strings, which are meant to be translated, so its good idea to make them unique enough not to collide with any other strings, which can appear in DOM.

Example:

inputPrefix = '%-%tolgee:';
inputSuffix = '%-%';

These strings are unique enough to not clash with any other strings in your DOM, so it will not break your document.

inputPrefix: string;

passToParent​

There are elements which can contain wrapped string to be translated, but user is not able to click on them. For example an option of select HTML element cannot be used for capturing click even with ALT down. For these reasons you can configure Tolgee to "pass" these strings to parent and listen for click events on the parent.

passToParent: (keyof HTMLElementTagNameMap)[] | ((node: Element) => boolean);

Default: ["option", "optgroup"]