@tolgee/core 1.2.4 → 1.5.1

package/dist/tolgee.cjs.js

@@ -124,6 +124,7 @@ function __spreadArray(to, from, pack) {
 var RESTRICTED_ASCENDANT_ATTRIBUTE = 'data-tolgee-restricted';
 var TOLGEE_ATTRIBUTE_NAME = '_tolgee';
 var TOLGEE_TARGET_ATTRIBUTE = '_tolgee-target';
+var TOLGEE_WRAPPED_ONLY_DATA_ATTRIBUTE = 'data-tolgee-key-only';
 
 var NodeHelper = /** @class */ (function () {
     function NodeHelper() {
@@ -410,6 +411,7 @@ var EventService = /** @class */ (function () {
         this.TRANSLATION_CHANGED = new EventEmitterImpl();
         this.LANGUAGE_CHANGED = new EventEmitterImpl();
         this.LANGUAGE_LOADED = new EventEmitterImpl();
+        this.ELEMENT_REGISTERED = new EventEmitterImpl();
     }
     return EventService;
 }());
@@ -537,9 +539,10 @@ var ApiHttpService = /** @class */ (function () {
 }());
 
 var TranslationData = /** @class */ (function () {
-    function TranslationData(key, translations) {
+    function TranslationData(key, translations, id) {
         this.key = key;
         this.translations = translations;
+        this.id = id;
     }
     return TranslationData;
 }());
@@ -550,16 +553,26 @@ var TextHelper = /** @class */ (function () {
     TextHelper.splitOnNonEscapedDelimiter = function (string, delimiter) {
         var result = [];
         var actual = '';
+        var escaped = false;
         for (var i = 0; i < string.length; i++) {
             var char = string[i];
-            if (char === delimiter && !this.isCharEscaped(i, string)) {
-                result.push(this.removeEscapes(actual));
+            if (char === '\\' && !escaped) {
+                escaped = true;
+                continue;
+            }
+            if (escaped) {
+                escaped = false;
+                actual += char;
+                continue;
+            }
+            if (char === delimiter) {
+                result.push(actual);
                 actual = '';
                 continue;
             }
-            actual += string[i];
+            actual += char;
         }
-        result.push(this.removeEscapes(actual));
+        result.push(actual);
         return result;
     };
     TextHelper.isCharEscaped = function (position, fullString) {
@@ -570,13 +583,23 @@ var TextHelper = /** @class */ (function () {
         }
         return escapeCharsCount % 2 == 1;
     };
-    TextHelper.removeEscapes = function (text) {
-        return text.replace(/\\?\\?/g, function (match) {
-            if (match == '\\\\') {
-                return '\\';
+    TextHelper.removeEscapes = function (string) {
+        var result = '';
+        var escaped = false;
+        for (var i = 0; i < string.length; i++) {
+            var char = string[i];
+            if (char === '\\' && !escaped) {
+                escaped = true;
+                continue;
             }
-            return '';
-        });
+            if (escaped) {
+                escaped = false;
+                result += char;
+                continue;
+            }
+            result += char;
+        }
+        return result;
     };
     return TextHelper;
 }());
@@ -593,59 +616,66 @@ var TranslationService = /** @class */ (function () {
         this.getTranslationsOfKey = function (key, languages) {
             if (languages === void 0) { languages = new Set([_this.properties.currentLanguage]); }
             return __awaiter(_this, void 0, void 0, function () {
-                var languagesArray, languagesQuery, data, translationData_1, fetchedData, e_1, _a;
-                var _b, _c, _d, _e, _f, _g;
-                return __generator(this, function (_h) {
-                    switch (_h.label) {
+                var languagesArray, languagesQuery, data, translationData_1, firstItem, fetchedData, e_1, _a;
+                var _b, _c, _d, _e, _f;
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
                         case 0:
                             this.coreService.checkScope('translations.view');
-                            _h.label = 1;
+                            _g.label = 1;
                         case 1:
-                            _h.trys.push([1, 3, , 6]);
+                            _g.trys.push([1, 3, , 7]);
                             languagesArray = __spreadArray([], __read(languages));
                             languagesQuery = languagesArray
                                 .map(function (l) { return "languages=" + l; })
                                 .join('&');
                             return [4 /*yield*/, this.apiHttpService.fetchJson("v2/projects/translations?" + languagesQuery + "&filterKeyName=" + encodeURIComponent(key))];
                         case 2:
-                            data = _h.sent();
+                            data = _g.sent();
                             translationData_1 = languagesArray.reduce(function (acc, curr) {
                                 var _a;
                                 return (__assign(__assign({}, acc), (_a = {}, _a[curr] = '', _a)));
                             }, {});
-                            fetchedData = (_d = (_c = (_b = data._embedded) === null || _b === void 0 ? void 0 : _b.keys) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.translations;
+                            firstItem = (_c = (_b = data._embedded) === null || _b === void 0 ? void 0 : _b.keys) === null || _c === void 0 ? void 0 : _c[0];
+                            fetchedData = firstItem === null || firstItem === void 0 ? void 0 : firstItem.translations;
                             if (fetchedData) {
-                                Object.entries((_g = (_f = (_e = data._embedded) === null || _e === void 0 ? void 0 : _e.keys) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.translations).forEach(function (_a) {
+                                Object.entries((_f = (_e = (_d = data._embedded) === null || _d === void 0 ? void 0 : _d.keys) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.translations).forEach(function (_a) {
                                     var _b = __read(_a, 2), language = _b[0], translation = _b[1];
                                     return (translationData_1[language] = translation.text);
                                 });
                             }
-                            return [2 /*return*/, new TranslationData(key, translationData_1)];
+                            return [2 /*return*/, new TranslationData(key, translationData_1, firstItem === null || firstItem === void 0 ? void 0 : firstItem.keyId)];
                         case 3:
-                            e_1 = _h.sent();
-                            if (!(e_1 instanceof ApiHttpError)) return [3 /*break*/, 5];
-                            if (!(e_1.response.status === 404)) return [3 /*break*/, 5];
-                            if (!(e_1.code === 'language_not_found')) return [3 /*break*/, 5];
+                            e_1 = _g.sent();
+                            if (!(e_1 instanceof ApiHttpError &&
+                                e_1.response.status === 404 &&
+                                e_1.code === 'language_not_found')) return [3 /*break*/, 5];
+                            //only possible reason for this error is, that languages definition is changed, but the old value is stored in preferred languages
                             _a = this.properties;
                             return [4 /*yield*/, this.coreService.getLanguages()];
                         case 4:
+                            //only possible reason for this error is, that languages definition is changed, but the old value is stored in preferred languages
                             _a.preferredLanguages =
-                                _h.sent();
+                                _g.sent();
                             // eslint-disable-next-line no-console
                             console.error('Requested language not found, refreshing the page!');
                             location.reload();
-                            return [2 /*return*/];
+                            return [3 /*break*/, 6];
                         case 5: throw e_1;
-                        case 6: return [2 /*return*/];
+                        case 6: return [3 /*break*/, 7];
+                        case 7: return [2 /*return*/];
                     }
                 });
             });
         };
     }
-    TranslationService.translationByValue = function (message, key, orEmpty) {
+    TranslationService.translationByValue = function (message, key, orEmpty, defaultValue) {
         if (message) {
             return message;
         }
+        if (defaultValue) {
+            return defaultValue;
+        }
         if (orEmpty) {
             return '';
         }
@@ -688,7 +718,7 @@ var TranslationService = /** @class */ (function () {
             });
         });
     };
-    TranslationService.prototype.getTranslation = function (key, lang, orEmpty) {
+    TranslationService.prototype.getTranslation = function (key, lang, orEmpty, defaultValue) {
         if (lang === void 0) { lang = this.properties.currentLanguage; }
         if (orEmpty === void 0) { orEmpty = false; }
         return __awaiter(this, void 0, void 0, function () {
@@ -710,21 +740,25 @@ var TranslationService = /** @class */ (function () {
                         _a.sent();
                         message = this.getFromCache(key, this.properties.config.fallbackLanguage);
                         _a.label = 3;
-                    case 3: return [2 /*return*/, TranslationService.translationByValue(message, key, orEmpty)];
+                    case 3: return [2 /*return*/, TranslationService.translationByValue(message, key, orEmpty, defaultValue)];
                 }
             });
         });
     };
     TranslationService.prototype.setTranslations = function (translationData) {
         return __awaiter(this, void 0, void 0, function () {
+            var result;
             var _this = this;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         this.coreService.checkScope('translations.edit');
-                        return [4 /*yield*/, this.apiHttpService.post('v2/projects/translations', translationData)];
+                        return [4 /*yield*/, this.apiHttpService.postJson('v2/projects/translations', {
+                                key: translationData.key,
+                                translations: translationData.translations,
+                            })];
                     case 1:
-                        _a.sent();
+                        result = _a.sent();
                         Object.keys(translationData.translations).forEach(function (lang) {
                             if (_this.translationsCache.get(lang)) {
                                 // if the language is not loaded, then ignore the change
@@ -743,17 +777,34 @@ var TranslationService = /** @class */ (function () {
                                 }
                             }
                         });
-                        return [2 /*return*/];
+                        return [2 /*return*/, result];
                 }
             });
         });
     };
-    TranslationService.prototype.getFromCacheOrFallback = function (key, lang, orEmpty) {
+    TranslationService.prototype.uploadScreenshot = function (key, data) {
+        return __awaiter(this, void 0, void 0, function () {
+            var formData, blob;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        this.coreService.checkScope('translations.edit');
+                        formData = new FormData();
+                        return [4 /*yield*/, fetch(data).then(function (r) { return r.blob(); })];
+                    case 1:
+                        blob = _a.sent();
+                        formData.append('screenshot', blob);
+                        return [2 /*return*/, this.apiHttpService.post("v2/projects/keys/" + key + "/screenshots", undefined, { headers: {}, body: formData })];
+                }
+            });
+        });
+    };
+    TranslationService.prototype.getFromCacheOrFallback = function (key, lang, orEmpty, defaultValue) {
         if (lang === void 0) { lang = this.properties.currentLanguage; }
         if (orEmpty === void 0) { orEmpty = false; }
         var message = this.getFromCache(key, lang) ||
             this.getFromCache(key, this.properties.config.fallbackLanguage);
-        return TranslationService.translationByValue(message, key, orEmpty);
+        return TranslationService.translationByValue(message, key, orEmpty, defaultValue);
     };
     TranslationService.prototype.fetchTranslations = function (lang) {
         return __awaiter(this, void 0, void 0, function () {
@@ -3283,7 +3334,9 @@ var TextService = /** @class */ (function () {
         this.translationService = translationService;
         this.format = function (translation, params) {
             try {
-                return new IntlMessageFormat(translation, _this.properties.currentLanguage).format(params);
+                return new IntlMessageFormat(translation, _this.properties.currentLanguage, undefined, {
+                    ignoreTag: true,
+                }).format(params);
             }
             catch (e) {
                 if (e.code === 'MISSING_VALUE') {
@@ -3310,7 +3363,90 @@ var TextService = /** @class */ (function () {
             return param;
         };
     }
-    TextService.prototype.translate = function (key, params, lang, orEmpty) {
+    Object.defineProperty(TextService.prototype, "rawUnWrapRegex", {
+        get: function () {
+            var escapedPrefix = this.escapeForRegExp(this.properties.config.inputPrefix);
+            var escapedSuffix = this.escapeForRegExp(this.properties.config.inputSuffix);
+            return "(\\\\?)(" + escapedPrefix + "(.*?)" + escapedSuffix + ")";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TextService.parseUnwrapped = function (unwrappedString) {
+        var e_1, _a;
+        var escaped = false;
+        var actual = '';
+        var paramName = '';
+        var readingState = 'KEY';
+        var result = {
+            key: '',
+            params: {},
+            defaultValue: undefined,
+        };
+        try {
+            for (var unwrappedString_1 = __values(unwrappedString), unwrappedString_1_1 = unwrappedString_1.next(); !unwrappedString_1_1.done; unwrappedString_1_1 = unwrappedString_1.next()) {
+                var char = unwrappedString_1_1.value;
+                if (char === '\\' && !escaped) {
+                    escaped = true;
+                    continue;
+                }
+                if (escaped) {
+                    escaped = false;
+                    actual += char;
+                    continue;
+                }
+                if (readingState === 'KEY' && char === ',') {
+                    readingState = 'DEFAULT_VALUE';
+                    result.key = actual;
+                    actual = '';
+                    continue;
+                }
+                if (readingState === 'KEY' && char === ':') {
+                    readingState = 'PARAM_NAME';
+                    result.key = actual;
+                    actual = '';
+                    continue;
+                }
+                if (readingState === 'DEFAULT_VALUE' && char === ':') {
+                    readingState = 'PARAM_NAME';
+                    result.defaultValue = actual;
+                    actual = '';
+                    continue;
+                }
+                if (readingState === 'PARAM_NAME' && char === ':') {
+                    readingState = 'PARAM_VALUE';
+                    paramName = actual;
+                    actual = '';
+                    continue;
+                }
+                if (readingState === 'PARAM_VALUE' && char === ',') {
+                    readingState = 'PARAM_NAME';
+                    result.params[paramName] = actual;
+                    actual = '';
+                    continue;
+                }
+                actual += char;
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (unwrappedString_1_1 && !unwrappedString_1_1.done && (_a = unwrappedString_1.return)) _a.call(unwrappedString_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        if (readingState === 'KEY') {
+            result.key = actual;
+        }
+        if (readingState === 'DEFAULT_VALUE') {
+            result.defaultValue = actual;
+        }
+        if (readingState === 'PARAM_VALUE') {
+            result.params[paramName] = actual;
+        }
+        return result;
+    };
+    TextService.prototype.translate = function (key, params, lang, orEmpty, defaultValue) {
         if (lang === void 0) { lang = this.properties.currentLanguage; }
         return __awaiter(this, void 0, void 0, function () {
             var _a;
@@ -3318,19 +3454,19 @@ var TextService = /** @class */ (function () {
                 switch (_b.label) {
                     case 0:
                         _a = this.format;
-                        return [4 /*yield*/, this.translationService.getTranslation(key, lang, orEmpty)];
+                        return [4 /*yield*/, this.translationService.getTranslation(key, lang, orEmpty, defaultValue)];
                     case 1: return [2 /*return*/, _a.apply(this, [_b.sent(), params])];
                 }
             });
         });
     };
-    TextService.prototype.instant = function (key, params, lang, orEmpty) {
+    TextService.prototype.instant = function (key, params, lang, orEmpty, defaultValue) {
         if (lang === void 0) { lang = this.properties.currentLanguage; }
-        return this.format(this.translationService.getFromCacheOrFallback(key, lang, orEmpty), params);
+        return this.format(this.translationService.getFromCacheOrFallback(key, lang, orEmpty, defaultValue), params);
     };
     TextService.prototype.replace = function (text) {
         return __awaiter(this, void 0, void 0, function () {
-            var matchRegexp, keysAndParams, matched, match, start, result, _a, fullMatch, pre, wrapped, unwrapped, index, input, translated, withoutEscapes;
+            var matchRegexp, keysAndParams, matched, match, start, result, pre, _a, fullMatch, wrapped, unwrapped, index, input, translated;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
@@ -3342,35 +3478,43 @@ var TextService = /** @class */ (function () {
                         _b.label = 1;
                     case 1:
                         if (!((match = matchRegexp.exec(text)) !== null)) return [3 /*break*/, 3];
-                        _a = __read(match, 4), fullMatch = _a[0], pre = _a[1], wrapped = _a[2], unwrapped = _a[3];
+                        pre = match[1];
+                        _a = __read(match, 4), fullMatch = _a[0], wrapped = _a[2], unwrapped = _a[3];
                         index = match.index, input = match.input;
                         result += input.substr(start, index - start);
                         start = index + fullMatch.length;
-                        if (pre === '\\' && !TextHelper.isCharEscaped(index, text)) {
-                            result += wrapped;
-                            return [3 /*break*/, 1];
+                        if (pre === '\\') {
+                            if (!TextHelper.isCharEscaped(index, text)) {
+                                result += wrapped;
+                                return [3 /*break*/, 1];
+                            }
+                            pre = '';
                         }
                         return [4 /*yield*/, this.getTranslatedWithMetadata(unwrapped)];
                     case 2:
                         translated = _b.sent();
-                        keysAndParams.push({ key: translated.key, params: translated.params });
+                        keysAndParams.push({
+                            key: translated.key,
+                            params: translated.params,
+                            defaultValue: translated.defaultValue,
+                        });
                         matched = true;
                         result += pre + translated.translated;
                         return [3 /*break*/, 1];
                     case 3:
                         result += text.substring(start);
-                        withoutEscapes = TextHelper.removeEscapes(result);
                         if (matched) {
-                            return [2 /*return*/, { text: withoutEscapes, keys: keysAndParams }];
+                            return [2 /*return*/, { text: result, keys: keysAndParams }];
                         }
                         return [2 /*return*/, undefined];
                 }
             });
         });
     };
-    TextService.prototype.wrap = function (key, params) {
+    TextService.prototype.wrap = function (key, params, defaultValue) {
         var _this = this;
         if (params === void 0) { params = {}; }
+        if (defaultValue === void 0) { defaultValue = undefined; }
         var paramString = Object.entries(params)
             .map(function (_a) {
             var _b = __read(_a, 2), name = _b[0], value = _b[1];
@@ -3378,44 +3522,24 @@ var TextService = /** @class */ (function () {
         })
             .join(',');
         paramString = paramString.length ? ":" + paramString : '';
-        return "" + this.properties.config.inputPrefix + this.escapeParam(key) + paramString + this.properties.config.inputSuffix;
+        var defaultString = defaultValue !== undefined ? "," + this.escapeParam(defaultValue) : '';
+        return "" + this.properties.config.inputPrefix + this.escapeParam(key) + defaultString + paramString + this.properties.config.inputSuffix;
     };
     TextService.prototype.getTranslatedWithMetadata = function (text) {
         return __awaiter(this, void 0, void 0, function () {
-            var _a, key, params, translated;
+            var _a, key, params, defaultValue, translated;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
-                        _a = TextService.parseUnwrapped(text), key = _a.key, params = _a.params;
-                        return [4 /*yield*/, this.translate(key, params, undefined, false)];
+                        _a = TextService.parseUnwrapped(text), key = _a.key, params = _a.params, defaultValue = _a.defaultValue;
+                        return [4 /*yield*/, this.translate(key, params, undefined, false, defaultValue)];
                     case 1:
                         translated = _b.sent();
-                        return [2 /*return*/, { translated: translated, key: key, params: params }];
+                        return [2 /*return*/, { translated: translated, key: key, params: params, defaultValue: defaultValue }];
                 }
             });
         });
     };
-    TextService.parseUnwrapped = function (unWrappedString) {
-        var strings = unWrappedString.match(/(?:[^\\,:\n]|\\.)+/g);
-        var result = {
-            key: TextHelper.removeEscapes(strings.shift()),
-            params: {},
-        };
-        while (strings.length) {
-            var _a = __read(strings.splice(0, 2), 2), name_1 = _a[0], value = _a[1];
-            result.params[name_1] = value;
-        }
-        return result;
-    };
-    Object.defineProperty(TextService.prototype, "rawUnWrapRegex", {
-        get: function () {
-            var escapedPrefix = this.escapeForRegExp(this.properties.config.inputPrefix);
-            var escapedSuffix = this.escapeForRegExp(this.properties.config.inputSuffix);
-            return "(\\\\?)(" + escapedPrefix + "(.*?)" + escapedSuffix + ")";
-        },
-        enumerable: false,
-        configurable: true
-    });
     return TextService;
 }());
 
@@ -3486,16 +3610,12 @@ var MouseEventHandler = /** @class */ (function () {
         }
     };
     MouseEventHandler.prototype.highlight = function () {
-        this.highlightedInitialBackgroundColor =
-            this.getMouseOn().style.backgroundColor;
-        this.getMouseOn().style.backgroundColor =
-            this.properties.config.highlightColor;
+        this.getMouseOn()._tolgee.highlight();
         this.highlighted = this.getMouseOn();
     };
     MouseEventHandler.prototype.unhighlight = function () {
         if (this.highlighted) {
-            this.highlighted.style.backgroundColor =
-                this.highlightedInitialBackgroundColor;
+            this.highlighted._tolgee.unhighlight();
             this.highlighted = null;
         }
     };
@@ -3562,13 +3682,9 @@ var MouseEventHandler = /** @class */ (function () {
 }());
 
 var TranslationHighlighter = /** @class */ (function () {
-    function TranslationHighlighter(service, properties, eventService, translationService, mouseEventHandler) {
+    function TranslationHighlighter(dependencies) {
         var _this = this;
-        this.service = service;
-        this.properties = properties;
-        this.eventService = eventService;
-        this.translationService = translationService;
-        this.mouseEventHandler = mouseEventHandler;
+        this.dependencies = dependencies;
         this.translationEdit = function (e, element) { return __awaiter(_this, void 0, void 0, function () {
             var key;
             return __generator(this, function (_a) {
@@ -3592,9 +3708,27 @@ var TranslationHighlighter = /** @class */ (function () {
             });
         }); };
     }
+    Object.defineProperty(TranslationHighlighter.prototype, "renderer", {
+        get: function () {
+            if (this._renderer === undefined) {
+                if (typeof this.dependencies.properties.config.ui === 'function') {
+                    this._renderer = new this.dependencies.properties.config.ui(this.dependencies);
+                }
+            }
+            return this._renderer;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TranslationHighlighter.getKeyOptions = function (node) {
+        var nodes = Array.from(node._tolgee.nodes);
+        var keys = nodes.reduce(function (acc, curr) { return __spreadArray(__spreadArray([], __read(acc)), __read(curr._tolgee.keys.map(function (k) { return k.key; }))); }, []);
+        return new Set(keys);
+    };
     TranslationHighlighter.prototype.listen = function (element) {
         var _this = this;
-        this.mouseEventHandler.handle(element, function (e) { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
+        this.dependencies.highlightFunctionInitializer.initFunctions(element);
+        this.dependencies.mouseEventHandler.handle(element, function (e) { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0: return [4 /*yield*/, this.translationEdit(e, element)];
                 case 1: return [2 /*return*/, _a.sent()];
@@ -3607,6 +3741,9 @@ var TranslationHighlighter = /** @class */ (function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
+                        if (element._tolgee.wrappedWithElementOnlyKey) {
+                            return [2 /*return*/, element._tolgee.wrappedWithElementOnlyKey];
+                        }
                         keys = TranslationHighlighter.getKeyOptions(element);
                         if (!(keys.size > 1)) return [3 /*break*/, 2];
                         return [4 /*yield*/, this.renderer.getKey({ keys: keys, openEvent: mouseEvent })];
@@ -3622,40 +3759,20 @@ var TranslationHighlighter = /** @class */ (function () {
             });
         });
     };
-    TranslationHighlighter.getKeyOptions = function (node) {
-        var nodes = Array.from(node._tolgee.nodes);
-        var keys = nodes.reduce(function (acc, curr) { return __spreadArray(__spreadArray([], __read(acc)), __read(curr._tolgee.keys.map(function (k) { return k.key; }))); }, []);
-        return new Set(keys);
-    };
-    Object.defineProperty(TranslationHighlighter.prototype, "renderer", {
-        get: function () {
-            if (this._renderer === undefined) {
-                if (typeof this.properties.config.ui === 'function') {
-                    this._renderer = new this.properties.config.ui({
-                        coreService: this.service,
-                        properties: this.properties,
-                        eventService: this.eventService,
-                        translationService: this.translationService,
-                    });
-                }
-            }
-            return this._renderer;
-        },
-        enumerable: false,
-        configurable: true
-    });
     return TranslationHighlighter;
 }());
 
 var ElementRegistrar = /** @class */ (function () {
-    function ElementRegistrar(properties, translationHighlighter) {
+    function ElementRegistrar(properties, translationHighlighter, eventService) {
         this.properties = properties;
         this.translationHighlighter = translationHighlighter;
+        this.eventService = eventService;
         this.registeredElements = new Set();
     }
     ElementRegistrar.prototype.register = function (element) {
         //ignore element with no active nodes
-        if (this.getActiveNodes(element).next().value === undefined) {
+        if (this.getActiveNodes(element).next().value === undefined &&
+            !element._tolgee.wrappedWithElementOnlyKey) {
             return;
         }
         if (this.properties.config.mode === 'development' &&
@@ -3663,6 +3780,7 @@ var ElementRegistrar = /** @class */ (function () {
             this.translationHighlighter.listen(element);
         }
         this.registeredElements.add(element);
+        this.eventService.ELEMENT_REGISTERED.emit(element);
     };
     ElementRegistrar.prototype.refreshAll = function () {
         var e_1, _a;
@@ -3670,7 +3788,8 @@ var ElementRegistrar = /** @class */ (function () {
             for (var _b = __values(this.registeredElements), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var element = _c.value;
                 this.cleanElementInactiveNodes(element);
-                if (element._tolgee.nodes.size === 0) {
+                if (element._tolgee.nodes.size === 0 &&
+                    !element._tolgee.wrappedWithElementOnlyKey) {
                     this.cleanElement(element);
                 }
             }
@@ -3699,6 +3818,43 @@ var ElementRegistrar = /** @class */ (function () {
             finally { if (e_2) throw e_2.error; }
         }
     };
+    ElementRegistrar.prototype.findAllByKey = function (key) {
+        var e_3, _a, e_4, _b;
+        var result = [];
+        try {
+            for (var _c = __values(this.registeredElements), _d = _c.next(); !_d.done; _d = _c.next()) {
+                var registeredElement = _d.value;
+                if (registeredElement._tolgee.wrappedWithElementOnlyKey === key) {
+                    result.push(registeredElement);
+                    continue;
+                }
+                try {
+                    for (var _e = (e_4 = void 0, __values(registeredElement._tolgee.nodes)), _f = _e.next(); !_f.done; _f = _e.next()) {
+                        var node = _f.value;
+                        if (node._tolgee.keys.findIndex(function (keyWithParams) { return keyWithParams.key === key; }) > -1) {
+                            result.push(registeredElement);
+                            break;
+                        }
+                    }
+                }
+                catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                finally {
+                    try {
+                        if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+                    }
+                    finally { if (e_4) throw e_4.error; }
+                }
+            }
+        }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        finally {
+            try {
+                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+            }
+            finally { if (e_3) throw e_3.error; }
+        }
+        return result;
+    };
     ElementRegistrar.prototype.cleanElementInactiveNodes = function (element) {
         if (this.isElementActive(element)) {
             element._tolgee.nodes = new Set(this.getActiveNodes(element));
@@ -3714,8 +3870,8 @@ var ElementRegistrar = /** @class */ (function () {
         this.registeredElements.delete(element);
     };
     ElementRegistrar.prototype.getActiveNodes = function (element) {
-        var _a, _b, node, e_3_1;
-        var e_3, _c;
+        var _a, _b, node, e_5_1;
+        var e_5, _c;
         return __generator(this, function (_d) {
             switch (_d.label) {
                 case 0:
@@ -3735,14 +3891,14 @@ var ElementRegistrar = /** @class */ (function () {
                     return [3 /*break*/, 1];
                 case 4: return [3 /*break*/, 7];
                 case 5:
-                    e_3_1 = _d.sent();
-                    e_3 = { error: e_3_1 };
+                    e_5_1 = _d.sent();
+                    e_5 = { error: e_5_1 };
                     return [3 /*break*/, 7];
                 case 6:
                     try {
                         if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
                     }
-                    finally { if (e_3) throw e_3.error; }
+                    finally { if (e_5) throw e_5.error; }
                     return [7 /*endfinally*/];
                 case 7: return [2 /*return*/];
             }
@@ -3993,13 +4149,14 @@ var AttributeHandler = /** @class */ (function (_super) {
 }(AbstractHandler));
 
 var CoreHandler = /** @class */ (function () {
-    function CoreHandler(service, textHandler, eventService, properties, attributeHandler, textService) {
+    function CoreHandler(service, textHandler, eventService, properties, attributeHandler, textService, wrappedHandler) {
         this.service = service;
         this.textHandler = textHandler;
         this.eventService = eventService;
         this.properties = properties;
         this.attributeHandler = attributeHandler;
         this.textService = textService;
+        this.wrappedHandler = wrappedHandler;
         eventService.LANGUAGE_CHANGED.subscribe(this.refresh.bind(this));
         eventService.TRANSLATION_CHANGED.subscribe(this.refresh.bind(this));
     }
@@ -4012,6 +4169,9 @@ var CoreHandler = /** @class */ (function () {
                         _a.sent();
                         return [4 /*yield*/, this.textHandler.handle(target)];
                     case 2:
+                        _a.sent();
+                        return [4 /*yield*/, this.wrappedHandler.handle(target)];
+                    case 3:
                         _a.sent();
                         return [2 /*return*/];
                 }
@@ -4232,6 +4392,208 @@ var CoreService = /** @class */ (function () {
     return CoreService;
 }());
 
+var WrappedHandler = /** @class */ (function (_super) {
+    __extends(WrappedHandler, _super);
+    function WrappedHandler(properties, translationHighlighter, textService, elementRegistrar) {
+        var _this = _super.call(this, properties, textService, elementRegistrar, translationHighlighter) || this;
+        _this.properties = properties;
+        _this.translationHighlighter = translationHighlighter;
+        _this.textService = textService;
+        _this.elementRegistrar = elementRegistrar;
+        return _this;
+    }
+    WrappedHandler.prototype.handle = function (node) {
+        return __awaiter(this, void 0, void 0, function () {
+            var xPath, nodes, filtered;
+            var _this = this;
+            return __generator(this, function (_a) {
+                xPath = "./descendant-or-self::*[@" + TOLGEE_WRAPPED_ONLY_DATA_ATTRIBUTE + "]";
+                nodes = NodeHelper.evaluate(xPath, node);
+                filtered = this.filterRestricted(nodes);
+                filtered.forEach(function (element) {
+                    var elementWithMeta = AbstractHandler.initParentElement(element);
+                    elementWithMeta._tolgee.wrappedWithElementOnlyKey = element.getAttribute(TOLGEE_WRAPPED_ONLY_DATA_ATTRIBUTE);
+                    _this.elementRegistrar.register(elementWithMeta);
+                });
+                return [2 /*return*/];
+            });
+        });
+    };
+    return WrappedHandler;
+}(AbstractHandler));
+
+var PluginManager = /** @class */ (function () {
+    function PluginManager(messages, properties, eventService, elementRegistrar) {
+        var _this = this;
+        this.messages = messages;
+        this.properties = properties;
+        this.eventService = eventService;
+        this.elementRegistrar = elementRegistrar;
+        this.handshakeSucceed = false;
+        this.takeScreenshot = function () {
+            return new Promise(function (resolve, reject) {
+                try {
+                    _this.messages.send('TOLGEE_TAKE_SCREENSHOT');
+                    _this.messages.listen('TOLGEE_SCREENSHOT_TAKEN', function (data) {
+                        resolve(data);
+                    });
+                }
+                catch (e) {
+                    reject(e);
+                }
+            });
+        };
+        this.handshake = function () {
+            var sharedConfiguration = __assign(__assign({}, _this.properties), { config: __assign(__assign({}, _this.properties.config), { 
+                    //remove properties, which cannot be sent by window.postMessage
+                    staticData: undefined, targetElement: undefined, _targetElement: undefined, ui: undefined }) });
+            _this.messages.send('TOLGEE_READY', sharedConfiguration);
+            _this.messages.listen('TOLGEE_PLUGIN_READY', function () {
+                _this.handshakeSucceed = true;
+                _this.messages.send('TOLGEE_READY', sharedConfiguration);
+                _this.initListeners();
+            });
+        };
+    }
+    PluginManager.prototype.run = function () {
+        try {
+            this.messages.startListening();
+            this.handshake();
+            this.initOnRegisterKeyEmit();
+        }
+        catch (e) {
+            // eslint-disable-next-line no-console
+            console.warn(e);
+            // eslint-disable-next-line no-console
+            console.warn('Can not start communication with browser plugin. Check waning above.');
+        }
+    };
+    PluginManager.prototype.initOnRegisterKeyEmit = function () {
+        var _this = this;
+        this.eventService.ELEMENT_REGISTERED.subscribe(function (element) {
+            element._tolgee.nodes.forEach(function (node) {
+                node._tolgee.keys.forEach(function (key) { return _this.messages.send('NEW_KEY', key); });
+            });
+        });
+    };
+    PluginManager.prototype.stop = function () {
+        this.messages.stopListening();
+    };
+    PluginManager.prototype.initListeners = function () {
+        var _this = this;
+        this.messages.listenPopup('HIGHLIGHT_KEY', function (key) {
+            var e_1, _a;
+            try {
+                for (var _b = __values(_this.elementRegistrar.findAllByKey(key)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var element = _c.value;
+                    element._tolgee.highlight();
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        });
+        this.messages.listenPopup('UNHIGHLIGHT_KEY', function (key) {
+            var e_2, _a;
+            try {
+                for (var _b = __values(_this.elementRegistrar.findAllByKey(key)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var element = _c.value;
+                    element._tolgee.unhighlight();
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+        });
+    };
+    return PluginManager;
+}());
+
+var Messages = /** @class */ (function () {
+    function Messages() {
+        var _this = this;
+        this.listeners = [];
+        this.listenersPopup = [];
+        this.startListening = function () {
+            var receiveMessage = function (event) {
+                if (event.source != window) {
+                    return;
+                }
+                _this.listeners.forEach(function (listener) {
+                    if (listener.type == event.data.type) {
+                        listener.callback(event.data.data);
+                    }
+                });
+            };
+            window.addEventListener('message', receiveMessage, false);
+            typeof _this._stopListening === 'function' && _this._stopListening();
+            _this._stopListening = function () {
+                window.removeEventListener('message', receiveMessage, false);
+            };
+            _this.startPopupListening();
+        };
+        this.startPopupListening = function () {
+            _this.listen('POPUP_TO_LIB', function (data) {
+                _this.listenersPopup.forEach(function (listener) {
+                    if (data.type == listener.type) {
+                        listener.callback(data.data);
+                    }
+                });
+            });
+        };
+        this.listenPopup = function (type, callback) {
+            _this.listenersPopup.push({ type: type, callback: callback });
+        };
+        this.listen = function (type, callback) {
+            _this.listeners.push({ type: type, callback: callback });
+        };
+        this.send = function (type, data) {
+            try {
+                window.postMessage({ type: type, data: data }, window.origin);
+            }
+            catch (e) {
+                // eslint-disable-next-line no-console
+                console.warn('Can not send message.', e);
+            }
+        };
+    }
+    Messages.prototype.stopListening = function () {
+        this._stopListening();
+    };
+    return Messages;
+}());
+
+var HighlightFunctionsInitializer = /** @class */ (function () {
+    function HighlightFunctionsInitializer(properties) {
+        this.properties = properties;
+    }
+    HighlightFunctionsInitializer.prototype.initFunctions = function (element) {
+        this.initHighlightFunction(element);
+        this.initUnhighlightFunction(element);
+    };
+    HighlightFunctionsInitializer.prototype.initHighlightFunction = function (element) {
+        var _this = this;
+        element._tolgee.highlight = function () {
+            element._tolgee.initialBackgroundColor = element.style.backgroundColor;
+            element.style.backgroundColor = _this.properties.config.highlightColor;
+        };
+    };
+    HighlightFunctionsInitializer.prototype.initUnhighlightFunction = function (element) {
+        element._tolgee.unhighlight = function () {
+            element.style.backgroundColor = element._tolgee.initialBackgroundColor;
+        };
+    };
+    return HighlightFunctionsInitializer;
+}());
+
 var DependencyStore = /** @class */ (function () {
     function DependencyStore(config) {
         if (config === void 0) { config = new TolgeeConfig(); }
@@ -4242,14 +4604,19 @@ var DependencyStore = /** @class */ (function () {
         this.coreService = new CoreService(this.properties, this.apiHttpService);
         this.translationService = new TranslationService(this.properties, this.coreService, this.apiHttpService, this.eventService);
         this.textService = new TextService(this.properties, this.translationService);
-        this.translationHighlighter = new TranslationHighlighter(this.coreService, this.properties, this.eventService, this.translationService, this.mouseEventHandler);
-        this.elementRegistrar = new ElementRegistrar(this.properties, this.translationHighlighter);
+        this.highlightFunctionInitializer = new HighlightFunctionsInitializer(this.properties);
+        this.translationHighlighter = new TranslationHighlighter(this);
+        this.elementRegistrar = new ElementRegistrar(this.properties, this.translationHighlighter, this.eventService);
         this.textHandler = new TextHandler(this.properties, this.translationHighlighter, this.textService, this.elementRegistrar);
         this.attributeHandler = new AttributeHandler(this.properties, this.textService, this.elementRegistrar, this.translationHighlighter);
-        this.coreHandler = new CoreHandler(this.coreService, this.textHandler, this.eventService, this.properties, this.attributeHandler, this.textService);
+        this.wrappedHandler = new WrappedHandler(this.properties, this.translationHighlighter, this.textService, this.elementRegistrar);
+        this.coreHandler = new CoreHandler(this.coreService, this.textHandler, this.eventService, this.properties, this.attributeHandler, this.textService, this.wrappedHandler);
         this.observer = new Observer(this.properties, this.coreHandler, this.textHandler, this.attributeHandler, this.elementRegistrar);
+        this.messages = new Messages();
+        this.pluginManager = new PluginManager(this.messages, this.properties, this.eventService, this.elementRegistrar);
         this.properties.config = config;
         this.translationService.initStatic();
+        this.translationHighlighter.pluginManager = this.pluginManager;
     }
     return DependencyStore;
 }());
@@ -4257,34 +4624,6 @@ var DependencyStore = /** @class */ (function () {
 var Tolgee = /** @class */ (function () {
     function Tolgee(config) {
         var _this = this;
-        this.translate = function (key, params, noWrap) {
-            if (params === void 0) { params = {}; }
-            if (noWrap === void 0) { noWrap = false; }
-            return __awaiter(_this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!(this.properties.config.mode === 'development' && !noWrap)) return [3 /*break*/, 3];
-                            return [4 /*yield*/, this.loadScopes()];
-                        case 1:
-                            _a.sent();
-                            return [4 /*yield*/, this.translationService.loadTranslations()];
-                        case 2:
-                            _a.sent();
-                            return [2 /*return*/, this.dependencyStore.textService.wrap(key, params)];
-                        case 3: return [2 /*return*/, this.dependencyStore.textService.translate(key, params)];
-                    }
-                });
-            });
-        };
-        this.instant = function (key, params, noWrap, orEmpty) {
-            if (params === void 0) { params = {}; }
-            if (noWrap === void 0) { noWrap = false; }
-            if (_this.properties.config.mode === 'development' && !noWrap) {
-                return _this.dependencyStore.textService.wrap(key, params);
-            }
-            return _this.dependencyStore.textService.instant(key, params, undefined, orEmpty);
-        };
         this.stop = function () {
             _this.dependencyStore.observer.stopObserving();
             _this.dependencyStore.elementRegistrar.cleanAll();
@@ -4339,6 +4678,13 @@ var Tolgee = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Tolgee.prototype, "onTranslationChange", {
+        get: function () {
+            return this.dependencyStore.eventService.TRANSLATION_CHANGED;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Tolgee.prototype, "onLangLoaded", {
         get: function () {
             return this.dependencyStore.eventService.LANGUAGE_LOADED;
@@ -4384,13 +4730,16 @@ var Tolgee = /** @class */ (function () {
                     case 2: return [4 /*yield*/, this.translationService.loadTranslations()];
                     case 3:
                         _a.sent();
-                        if (!this.properties.config.preloadFallback) return [3 /*break*/, 5];
-                        return [4 /*yield*/, this.translationService.loadTranslations(this.properties.config.fallbackLanguage)];
+                        return [4 /*yield*/, this.dependencyStore.pluginManager.run()];
                     case 4:
                         _a.sent();
-                        _a.label = 5;
-                    case 5: return [4 /*yield*/, this.refresh()];
-                    case 6:
+                        if (!this.properties.config.preloadFallback) return [3 /*break*/, 6];
+                        return [4 /*yield*/, this.translationService.loadTranslations(this.properties.config.fallbackLanguage)];
+                    case 5:
+                        _a.sent();
+                        _a.label = 6;
+                    case 6: return [4 /*yield*/, this.refresh()];
+                    case 7:
                         _a.sent();
                         if (this.properties.config.watch) {
                             this.dependencyStore.observer.observe();
@@ -4407,6 +4756,57 @@ var Tolgee = /** @class */ (function () {
             });
         });
     };
+    Tolgee.prototype.translate = function (keyOrProps, params, noWrap, defaultValue) {
+        if (params === void 0) { params = {}; }
+        if (noWrap === void 0) { noWrap = false; }
+        if (defaultValue === void 0) { defaultValue = undefined; }
+        return __awaiter(this, void 0, void 0, function () {
+            var key, props;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        key = typeof keyOrProps === 'string' ? keyOrProps : keyOrProps.key;
+                        if (typeof keyOrProps === 'object') {
+                            props = keyOrProps;
+                            // if values are not provided in props object, get them from function
+                            // params defaults
+                            params = props.params !== undefined ? props.params : params;
+                            noWrap = props.noWrap !== undefined ? props.noWrap : noWrap;
+                            defaultValue =
+                                props.defaultValue !== undefined ? props.defaultValue : defaultValue;
+                        }
+                        if (!(this.properties.config.mode === 'development' && !noWrap)) return [3 /*break*/, 3];
+                        return [4 /*yield*/, this.loadScopes()];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, this.translationService.loadTranslations()];
+                    case 2:
+                        _a.sent();
+                        return [2 /*return*/, this.dependencyStore.textService.wrap(key, params, defaultValue)];
+                    case 3: return [2 /*return*/, this.dependencyStore.textService.translate(key, params, undefined, undefined, defaultValue)];
+                }
+            });
+        });
+    };
+    Tolgee.prototype.instant = function (keyOrProps, params, noWrap, orEmpty, defaultValue) {
+        if (params === void 0) { params = {}; }
+        if (noWrap === void 0) { noWrap = false; }
+        var key = typeof keyOrProps === 'string' ? keyOrProps : keyOrProps.key;
+        if (typeof keyOrProps === 'object') {
+            var props = keyOrProps;
+            // if values are not provided in props object, get them from function
+            // params defaults
+            params = props.params !== undefined ? props.params : params;
+            noWrap = props.noWrap !== undefined ? props.noWrap : noWrap;
+            defaultValue =
+                props.defaultValue !== undefined ? props.defaultValue : defaultValue;
+            orEmpty = props.orEmpty !== undefined ? props.orEmpty : orEmpty;
+        }
+        if (this.properties.config.mode === 'development' && !noWrap) {
+            return this.dependencyStore.textService.wrap(key, params, defaultValue);
+        }
+        return this.dependencyStore.textService.instant(key, params, undefined, orEmpty, defaultValue);
+    };
     Tolgee.prototype.loadScopes = function () {
         return __awaiter(this, void 0, void 0, function () {
             var _a;
@@ -4428,6 +4828,8 @@ var Tolgee = /** @class */ (function () {
     return Tolgee;
 }());
 
+exports.TOLGEE_WRAPPED_ONLY_DATA_ATTRIBUTE = TOLGEE_WRAPPED_ONLY_DATA_ATTRIBUTE;
 exports.Tolgee = Tolgee;
 exports.TolgeeConfig = TolgeeConfig;
+exports.TranslationData = TranslationData;
 //# sourceMappingURL=tolgee.cjs.js.map