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: Node;
Default: document
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"]