@tolgee/core 1.2.4 → 1.5.1

package/dist/tolgee.umd.js

@@ -126,6 +126,7 @@
     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() {
@@ -412,6 +413,7 @@
             this.TRANSLATION_CHANGED = new EventEmitterImpl();
             this.LANGUAGE_CHANGED = new EventEmitterImpl();
             this.LANGUAGE_LOADED = new EventEmitterImpl();
+            this.ELEMENT_REGISTERED = new EventEmitterImpl();
         }
         return EventService;
     }());
@@ -539,9 +541,10 @@
     }());
 
     var TranslationData = /** @class */ (function () {
-        function TranslationData(key, translations) {
+        function TranslationData(key, translations, id) {
             this.key = key;
             this.translations = translations;
+            this.id = id;
         }
         return TranslationData;
     }());
@@ -552,16 +555,26 @@
         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) {
@@ -572,13 +585,23 @@
             }
             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;
     }());
@@ -595,59 +618,66 @@
             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 '';
             }
@@ -690,7 +720,7 @@
                 });
             });
         };
-        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 () {
@@ -712,21 +742,25 @@
                             _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
@@ -745,17 +779,34 @@
                                     }
                                 }
                             });
-                            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 () {
@@ -3285,7 +3336,9 @@
             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') {
@@ -3312,7 +3365,90 @@
                 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;
@@ -3320,19 +3456,19 @@
                     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:
@@ -3344,35 +3480,43 @@
                             _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];
@@ -3380,44 +3524,24 @@
             })
                 .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;
     }());
 
@@ -3488,16 +3612,12 @@
             }
         };
         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;
             }
         };
@@ -3564,13 +3684,9 @@
     }());
 
     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) {
@@ -3594,9 +3710,27 @@
                 });
             }); };
         }
+        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()];
@@ -3609,6 +3743,9 @@
                 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 })];
@@ -3624,40 +3761,20 @@
                 });
             });
         };
-        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' &&
@@ -3665,6 +3782,7 @@
                 this.translationHighlighter.listen(element);
             }
             this.registeredElements.add(element);
+            this.eventService.ELEMENT_REGISTERED.emit(element);
         };
         ElementRegistrar.prototype.refreshAll = function () {
             var e_1, _a;
@@ -3672,7 +3790,8 @@
                 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);
                     }
                 }
@@ -3701,6 +3820,43 @@
                 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));
@@ -3716,8 +3872,8 @@
             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:
@@ -3737,14 +3893,14 @@
                         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*/];
                 }
@@ -3995,13 +4151,14 @@
     }(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));
         }
@@ -4014,6 +4171,9 @@
                             _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*/];
                     }
@@ -4234,6 +4394,208 @@
         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(); }
@@ -4244,14 +4606,19 @@
             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;
     }());
@@ -4259,34 +4626,6 @@
     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();
@@ -4341,6 +4680,13 @@
             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;
@@ -4386,13 +4732,16 @@
                         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();
@@ -4409,6 +4758,57 @@
                 });
             });
         };
+        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;
@@ -4430,8 +4830,10 @@
         return Tolgee;
     }());
 
+    exports.TOLGEE_WRAPPED_ONLY_DATA_ATTRIBUTE = TOLGEE_WRAPPED_ONLY_DATA_ATTRIBUTE;
     exports.Tolgee = Tolgee;
     exports.TolgeeConfig = TolgeeConfig;
+    exports.TranslationData = TranslationData;
 
     Object.defineProperty(exports, '__esModule', { value: true });