locize 3.2.5 → 4.0.0

package/dist/cjs/ui/elements/ribbonBox.js

@@ -12,17 +12,16 @@ require('../../api/handleRequestPopupChanges.js');
 require('../../api/handleRequestResourceBundle.js');
 require('../../api/handleSelectedKeys.js');
 require('../../api/handleIsLocizeEnabled.js');
-require('../../api/handleTurnOn.js');
-require('../../api/handleTurnOff.js');
+require('../../api/handleSendMatchedUninstrumented.js');
 var postMessage = require('../../api/postMessage.js');
 var icons = require('./icons.js');
 
 if (stylesheet.sheet) {
-  stylesheet.sheet.insertRule('.i18next-editor-button:hover { background-color: rgba(38, 166, 154, 1) !important; }');
+  stylesheet.sheet.insertRule('.i18next-editor-button:hover { background-color: rgba(21, 65, 154, 1) !important; }');
 }
 function RibbonButton(text, attrTitle, onClick) {
   var btn = document.createElement('button');
-  btn.style = 'font-family: Arial; position: relative; backdrop-filter: blur(3px); cursor: pointer; padding: 2px 10px 2px 20px; font-size: 15px; font-weight: 300; text-transform: uppercase; color: #fff; background-color: rgba(38, 166, 154, 0.8); border: none; border-radius: 12px';
+  btn.style = 'font-family: Arial; position: relative; backdrop-filter: blur(3px); cursor: pointer; padding: 2px 10px 2px 20px; font-size: 15px; font-weight: 300; text-transform: uppercase; color: #fff; background-color: rgba(25, 118, 210, 0.8); border: none; border-radius: 12px; z-index: 99999;';
   btn.classList.add('i18next-editor-button');
   btn.setAttribute('data-i18next-editor-element', 'true');
   btn.setAttribute('title', attrTitle);
@@ -44,8 +43,6 @@ function RibbonBox() {
   var arrow = document.createElement('div');
   arrow.style = "\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-top-width: 7px;\n    border-bottom-width: 7px;\n    border-left-width: 10px;\n    border-right-width: 10px;\n    border-style: solid;\n    border-color: transparent ".concat(vars.colors.highlight, " transparent\n      transparent;\n    ");
   box.appendChild(arrow);
-  var logo = icons.RibbonLogo();
-  box.appendChild(logo);
   var btnbox = document.createElement('div');
   btnbox.style = 'display: flex; flex-direction: column; align-items: flex-start; margin-left: 2px; margin-top: 1px';
   Object.keys(keys).forEach(function (k) {

package/dist/cjs/ui/highlightNode.js

@@ -5,56 +5,29 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var vars = require('../vars.js');
 var ribbonBox = require('./elements/ribbonBox.js');
+var highlightBox = require('./elements/highlightBox.js');
 var dom = require('@floating-ui/dom');
+var utils = require('./utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 
-var eleToOutline = ['DIV', 'P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'OL', 'UL', 'ADDRESS', 'BLOCKQUOTE', 'DL', 'PRE'];
-var overriddenStyles = ['outline', 'border-radius', 'outline-offset', 'filter'];
-var originalStyles = {};
 var selected = {};
 function highlight(item, node, keys) {
-  var id = item.id;
-  if (selected[id]) return;
-  if (!originalStyles[id]) {
-    originalStyles[id] = overriddenStyles.reduce(function (mem, s) {
-      mem[s] = node.style[s];
-      return mem;
-    }, {});
-  }
-  if (eleToOutline.includes(node.nodeName)) {
-    node.style.outline = "".concat(vars.colors.highlight, " solid 1px");
-    node.style.setProperty('border-radius', '1px');
-    node.style.setProperty('outline-offset', '2px');
-    node.style.filter = 'brightness(110%)';
-  } else {
-    node.style.outline = "".concat(vars.colors.highlight, " solid 1px");
-    node.style.setProperty('border-radius', '1px');
-    node.style.setProperty('outline-offset', '1px');
-    node.style.filter = 'brightness(110%)';
+  item.id;
+  var rectEle = utils.getOptimizedBoundingRectEle(node);
+  if (!item.highlightBox) {
+    var box = highlightBox.HighlightBox(rectEle, vars.colors.highlight);
+    document.body.appendChild(box);
+    item.highlightBox = box;
   }
   if (!item.ribbonBox) {
     var _RibbonBox = ribbonBox.RibbonBox(keys),
       actions = _RibbonBox.box,
       arrowEle = _RibbonBox.arrow;
     document.body.appendChild(actions);
-    var refEle = node;
-    if (node.childNodes.length === 1) {
-      var childNode = node.childNodes[0];
-      if (childNode && childNode.nodeName === '#text') {
-        var range = document.createRange();
-        range.selectNode(childNode);
-        var rect = range.getBoundingClientRect();
-        refEle = {
-          getBoundingClientRect: function getBoundingClientRect() {
-            return rect;
-          }
-        };
-      }
-    }
-    dom.computePosition(refEle, actions, {
+    dom.computePosition(rectEle, actions, {
       placement: 'right',
       middleware: [dom.flip({
         fallbackPlacements: ['left', 'bottom']
@@ -101,58 +74,35 @@ function highlight(item, node, keys) {
 function highlightUninstrumented(item, node, keys) {
   var id = item.id;
   if (selected[id]) return;
-  if (!originalStyles[id]) {
-    originalStyles[id] = overriddenStyles.reduce(function (mem, s) {
-      mem[s] = node.style[s];
-      return mem;
-    }, {});
-  }
-  if (eleToOutline.includes(node.nodeName)) {
-    node.style.outline = "".concat(vars.colors.warning, " solid 1px");
-    node.style.setProperty('border-radius', '1px');
-    node.style.setProperty('outline-offset', '2px');
-    node.style.filter = 'brightness(110%)';
-  } else {
-    node.style.outline = "".concat(vars.colors.warning, " solid 1px");
-    node.style.setProperty('border-radius', '1px');
-    node.style.setProperty('outline-offset', '1px');
-    node.style.filter = 'brightness(110%)';
+  var rectEle = utils.getOptimizedBoundingRectEle(node);
+  if (!item.highlightBox) {
+    var box = highlightBox.HighlightBox(rectEle, vars.colors.warning);
+    document.body.appendChild(box);
+    item.highlightBox = box;
   }
 }
 function selectedHighlight(item, node, keys) {
   var id = item.id;
-  if (!originalStyles[id]) {
-    originalStyles[id] = overriddenStyles.reduce(function (mem, s) {
-      mem[s] = node.style[s];
-      return mem;
-    }, {});
-  }
-  if (eleToOutline.includes(node.nodeName)) {
-    node.style.outline = "".concat(vars.colors.highlight, " solid 1px");
-    node.style.setProperty('border-radius', '1px');
-    node.style.setProperty('outline-offset', '2px');
-    node.style.filter = "brightness(110%) drop-shadow(0px 0px 2px ".concat(vars.colors.highlight, " )");
-  } else {
-    node.style.outline = "".concat(vars.colors.highlight, " solid 1px");
-    node.style.setProperty('border-radius', '1px');
-    node.style.setProperty('outline-offset', '1px');
-    node.style.filter = "brightness(110%) drop-shadow(0px 0px 2px ".concat(vars.colors.highlight, " )");
-  }
-  if (item.ribbonBox) {
-    document.body.removeChild(item.ribbonBox);
-    delete item.ribbonBox;
+  var rectEle = utils.getOptimizedBoundingRectEle(node);
+  if (!item.highlightBox) {
+    var box = highlightBox.HighlightBox(rectEle, vars.colors.highlight, vars.colors.gray);
+    document.body.appendChild(box);
+    item.highlightBox = box;
   }
   selected[id] = true;
 }
+function recalcSelectedHighlight(item, node, keys) {
+  if (!selected[item.id]) return;
+  resetHighlight(item, node, keys, false);
+  selectedHighlight(item, node);
+}
 function resetHighlight(item, node, keys) {
   var ignoreSelected = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
   var id = item.id;
   if (ignoreSelected && selected[id]) return;
-  if (originalStyles[id]) {
-    overriddenStyles.forEach(function (s) {
-      node.style.setProperty(s, originalStyles[id][s]);
-    });
-    delete originalStyles[id];
+  if (item.highlightBox) {
+    document.body.removeChild(item.highlightBox);
+    delete item.highlightBox;
   }
   if (item.ribbonBox) {
     document.body.removeChild(item.ribbonBox);
@@ -163,5 +113,6 @@ function resetHighlight(item, node, keys) {
 
 exports.highlight = highlight;
 exports.highlightUninstrumented = highlightUninstrumented;
+exports.recalcSelectedHighlight = recalcSelectedHighlight;
 exports.resetHighlight = resetHighlight;
 exports.selectedHighlight = selectedHighlight;

package/dist/cjs/ui/popup.js

@@ -51,6 +51,11 @@ function initDragElement() {
   function closeDragElement() {
     mouseDistance.startMouseTracking();
     if (overlay) overlay.style.display = 'none';
+    var ele = document.getElementById('i18next-editor-popup');
+    localStorage.setItem('locize_popup_pos', JSON.stringify({
+      top: parseInt(document.defaultView.getComputedStyle(ele).top, 10),
+      left: parseInt(document.defaultView.getComputedStyle(ele).left, 10)
+    }));
     document.onmouseup = null;
     document.onmousemove = null;
   }
@@ -104,6 +109,11 @@ function initResizeElement() {
   function stopDrag() {
     mouseDistance.startMouseTracking();
     if (overlay) overlay.style.display = 'none';
+    var ele = document.getElementById('i18next-editor-popup');
+    localStorage.setItem('locize_popup_size', JSON.stringify({
+      width: parseInt(document.defaultView.getComputedStyle(ele).width, 10),
+      height: parseInt(document.defaultView.getComputedStyle(ele).height, 10)
+    }));
     document.documentElement.removeEventListener('mousemove', doDrag, false);
     document.documentElement.removeEventListener('mouseup', stopDrag, false);
   }

package/dist/cjs/ui/utils.js

@@ -38,6 +38,24 @@ function mouseDistanceFromElement(mouseEvent, element) {
     hypot = Math.pow(Math.pow(distX, 2) + Math.pow(distY, 2), 1 / 2);
   return Math.floor(hypot);
 }
+function getOptimizedBoundingRectEle(node) {
+  var refEle = node;
+  if (node.childNodes.length === 1) {
+    var childNode = node.childNodes[0];
+    if (childNode && childNode.nodeName === '#text') {
+      var range = document.createRange();
+      range.selectNode(childNode);
+      var rect = range.getBoundingClientRect();
+      refEle = {
+        getBoundingClientRect: function getBoundingClientRect() {
+          return rect;
+        }
+      };
+    }
+  }
+  return refEle;
+}
 
+exports.getOptimizedBoundingRectEle = getOptimizedBoundingRectEle;
 exports.isInViewport = isInViewport;
 exports.mouseDistanceFromElement = mouseDistanceFromElement;

package/dist/cjs/uninstrumentedStore.js

@@ -20,7 +20,7 @@ function clean() {
     }
   });
 }
-function save(id, type, node) {
+function save(id, type, node, txt) {
   if (!id || !type || !node) return;
   if (!data[id]) {
     data[id] = {
@@ -28,13 +28,29 @@ function save(id, type, node) {
       node: node
     };
   }
-  data[id].keys = _objectSpread(_objectSpread({}, data[id].keys), {}, _defineProperty__default["default"]({}, "".concat(type), 'uninstrumented'));
+  data[id].keys = _objectSpread(_objectSpread({}, data[id].keys), {}, _defineProperty__default["default"]({}, "".concat(type), {
+    value: txt,
+    eleUniqueID: id,
+    textType: type
+  }));
+}
+function remove(id, node) {
+  highlightNode.resetHighlight(id, node);
+  delete data[id];
+}
+function removeKey(id, key, node) {
+  var item = get(id);
+  if (!item) return;
+  delete item.keys["".concat(key)];
+  if (!Object.keys(item.keys).length) remove(id, node);
 }
 function get(id) {
   return data[id];
 }
 var uninstrumentedStore = {
   save: save,
+  remove: remove,
+  removeKey: removeKey,
   clean: clean,
   get: get,
   data: data

package/dist/cjs/utils.js

@@ -2,10 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _typeof = require('@babel/runtime/helpers/typeof');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
 
 function debounce(func, wait, immediate) {
@@ -104,6 +106,57 @@ function getElementI18nKey(el) {
   }
   return undefined;
 }
+function parseAttrFromKey(key) {
+  var attr = 'text';
+  if (key.indexOf('[') == 0) {
+    var parts = key.split(']');
+    key = parts[1];
+    attr = parts[0].substr(1, parts[0].length - 1);
+  }
+  var newKey = key.indexOf(';') == key.length - 1 ? key.substr(0, key.length - 2) : key;
+  return [newKey, attr];
+}
+function getI18nMetaFromNode(el) {
+  var hasNamespacePrependToKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var key = getElementI18nKey(el);
+  var ns = getElementNamespace(el);
+  var allKeys = {};
+  if (key && key.indexOf(';') >= 0) {
+    var keys = key.split(';');
+    for (var ix = 0, l_ix = keys.length; ix < l_ix; ix++) {
+      if (keys[ix] != '') {
+        var _parseAttrFromKey = parseAttrFromKey(keys[ix]),
+          _parseAttrFromKey2 = _slicedToArray__default["default"](_parseAttrFromKey, 2),
+          usedKey = _parseAttrFromKey2[0],
+          attr = _parseAttrFromKey2[1];
+        allKeys[attr] = usedKey;
+      }
+    }
+  } else if (key) {
+    var _parseAttrFromKey3 = parseAttrFromKey(key),
+      _parseAttrFromKey4 = _slicedToArray__default["default"](_parseAttrFromKey3, 2),
+      _usedKey = _parseAttrFromKey4[0],
+      _attr = _parseAttrFromKey4[1];
+    allKeys[_attr] = _usedKey;
+  }
+  if (Object.keys(allKeys).length < 1) return null;
+  var res = Object.keys(allKeys).reduce(function (mem, attr) {
+    var key = allKeys[attr];
+    var usedNS = ns;
+    var usedKey = key;
+    if (hasNamespacePrependToKey && key.indexOf(':') > -1) {
+      var parts = key.split(':');
+      usedKey = parts[1];
+      usedNS = parts[0];
+    }
+    mem[attr] = {
+      key: usedKey,
+      ns: usedNS
+    };
+    return mem;
+  }, {});
+  return res;
+}
 function getElementNamespace(el) {
   var found;
   var find = function find(ele) {
@@ -143,6 +196,7 @@ exports.getClickedElement = getClickedElement;
 exports.getElementI18nKey = getElementI18nKey;
 exports.getElementNamespace = getElementNamespace;
 exports.getElementText = getElementText;
+exports.getI18nMetaFromNode = getI18nMetaFromNode;
 exports.getQsParameterByName = getQsParameterByName;
 exports.getWindow = getWindow;
 exports.isWindow = isWindow;

package/dist/cjs/vars.js

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var validAttributes = ['placeholder', 'title', 'alt'];
+var ignoreElements = ['SCRIPT'];
 var colors = {
-  highlight: '#26a69a',
-  warning: '#e67a00'
+  highlight: '#1976d2',
+  warning: '#e67a00',
+  gray: '#ccc'
 };
 var getIframeUrl = function getIframeUrl() {
   var _prc$env;
@@ -19,4 +21,5 @@ var getIframeUrl = function getIframeUrl() {
 
 exports.colors = colors;
 exports.getIframeUrl = getIframeUrl;
+exports.ignoreElements = ignoreElements;
 exports.validAttributes = validAttributes;

package/dist/esm/{processLegacy.js → _processLegacy.js}

@@ -7,8 +7,7 @@ import './api/handleRequestPopupChanges.js';
 import './api/handleRequestResourceBundle.js';
 import './api/handleSelectedKeys.js';
 import './api/handleIsLocizeEnabled.js';
-import './api/handleTurnOn.js';
-import './api/handleTurnOff.js';
+import './api/handleSendMatchedUninstrumented.js';
 import { api, sendMessage } from './api/postMessage.js';
 import { createClickHandler } from './clickHandler.js';
 

package/dist/esm/{startStandalone.js → _startStandalone.js}

@@ -1,4 +1,4 @@
-import { startLegacy } from './processLegacy.js';
+import { startLegacy } from './_processLegacy.js';
 
 function startStandalone() {
   startLegacy({

package/dist/esm/api/handleCommitKeys.js

@@ -2,6 +2,7 @@ import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
 import { api } from './postMessage.js';
 import { store } from '../store.js';
 import { setValueOnNode } from './handleEditKey.js';
+import { recalcSelectedHighlight } from '../ui/highlightNode.js';
 
 function handler(payload) {
   var updated = payload.updated;
@@ -19,6 +20,12 @@ function handler(payload) {
       });
     }
     api.i18n.setResource(lng, ns, key, data.value);
+    if (metas) {
+      Object.values(metas).forEach(function (m) {
+        var sItem = store.get(m.eleUniqueID);
+        recalcSelectedHighlight(sItem, sItem.node, sItem.keys);
+      });
+    }
   });
   Object.values(store.data).forEach(function (item) {
     if (item.originalChildNodes) {

package/dist/esm/api/handleEditKey.js

@@ -5,7 +5,7 @@ import { store } from '../store.js';
 function setValueOnNode(meta, value) {
   var item = store.get(meta.eleUniqueID);
   if (!item || !item.keys[meta.textType]) return;
-  var txtWithHiddenMeta = wrap(value, item.subliminal);
+  var txtWithHiddenMeta = item.subliminal ? wrap(value, item.subliminal) : value;
   if (meta.textType === 'text') {
     item.node.textContent = txtWithHiddenMeta;
   } else if (meta.textType.indexOf('attr:') === 0) {

package/dist/esm/api/handleIsLocizeEnabled.js

@@ -3,7 +3,7 @@ import { api } from './postMessage.js';
 function handler(payload, e) {
   api.source = e.source;
   api.origin = e.origin;
-  api.legacy = true;
-  api.sendLocizeIsEnabled();
+  api.sendLocizeIsEnabled(payload);
+  api.requestInitialize(api.config);
 }
 api.addHandler('isLocizeEnabled', handler);

package/dist/esm/api/handleRequestPopupChanges.js

@@ -5,6 +5,15 @@ function handler(payload) {
   var containerStyle = payload.containerStyle;
   if (containerStyle) {
     var popup = document.getElementById(popupId);
+    if (!popup) return;
+    var storedPos = localStorage.getItem('locize_popup_pos');
+    if (storedPos) storedPos = JSON.parse(storedPos);
+    var storedSize = localStorage.getItem('locize_popup_size');
+    if (storedSize) storedSize = JSON.parse(storedSize);
+    if (storedSize && storedSize.height && storedSize.width) {
+      containerStyle.height = storedSize.height + 'px';
+      containerStyle.width = storedSize.width + 'px';
+    }
     if (containerStyle.height) {
       var diff = "calc(".concat(containerStyle.height, " - ").concat(popup.style.height, ")");
       popup.style.setProperty('top', "calc(".concat(popup.style.top, " - ").concat(diff, ")"));
@@ -15,6 +24,8 @@ function handler(payload) {
       popup.style.setProperty('left', "calc(".concat(popup.style.left, " - ").concat(_diff, ")"));
       popup.style.setProperty('width', containerStyle.width);
     }
+    if (storedPos && storedPos.top && storedPos.top < window.innerHeight - containerStyle.height.replace('px', '')) popup.style.setProperty('top', storedPos.top + 'px');
+    if (storedPos && storedPos.left && storedPos.left < window.innerWidth - containerStyle.width.replace('px', '')) popup.style.setProperty('left', storedPos.left + 'px');
   }
 }
 api.addHandler('requestPopupChanges', handler);

package/dist/esm/api/handleSendMatchedUninstrumented.js

@@ -0,0 +1,20 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { api } from './postMessage.js';
+import { store } from '../store.js';
+import { uninstrumentedStore } from '../uninstrumentedStore.js';
+import { extractNodeMeta } from '../parser.js';
+
+function handler(payload) {
+  if (!payload.length) return;
+  payload.forEach(function (item) {
+    var uni = uninstrumentedStore.get(item.eleUniqueID);
+    store.save(item.eleUniqueID, undefined, item.textType, extractNodeMeta(item.eleUniqueID, item.textType, _defineProperty({}, "".concat(item.textType), {
+      ns: item.ns,
+      key: item.key
+    }), item.value), uni === null || uni === void 0 ? void 0 : uni.node);
+    delete uni.keys["".concat(item.textType)];
+    if (!Object.keys(uni.keys).length) uninstrumentedStore.remove(item.eleUniqueID, uni.node);
+  });
+  api.sendCurrentParsedContent();
+}
+api.addHandler('sendMatchedUninstrumented', handler);

package/dist/esm/api/postMessage.js

@@ -1,6 +1,8 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import { getIframeUrl } from '../vars.js';
 import { store } from '../store.js';
+import { uninstrumentedStore } from '../uninstrumentedStore.js';
+import { debounce } from '../utils.js';
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -14,27 +16,18 @@ function getMappedLegacyEvent(msg) {
 function addLocizeSavedHandler(handler) {
   api.locizeSavedHandler = handler;
 }
-function turnOn() {
-  api.scriptTurnedOff = false;
-  api.turnOn();
-  return api.scriptTurnedOff;
-}
-function turnOff() {
-  api.turnOff();
-  api.scriptTurnedOff = true;
-  return api.scriptTurnedOff;
-}
 function setEditorLng(lng) {
   api.sendCurrentTargetLanguage(lng);
 }
 var pendingMsgs = [];
+var allowedActionsBeforeInit = ['locizeIsEnabled', 'requestInitialize'];
 function sendMessage(action, payload) {
   if (!api.source) {
     var _document$getElementB;
     api.source = (_document$getElementB = document.getElementById('i18next-editor-iframe')) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.contentWindow;
   }
   if (!api.origin) api.origin = getIframeUrl();
-  if (!api.source || !api.source.postMessage) {
+  if (!api.source || !api.source.postMessage || !api.initialized && allowedActionsBeforeInit.indexOf(action) < 0) {
     pendingMsgs.push({
       action: action,
       payload: payload
@@ -48,7 +41,7 @@ function sendMessage(action, payload) {
   } else {
     api.source.postMessage({
       sender: 'i18next-editor',
-      senderAPIVersion: 'v1',
+      senderAPIVersion: 'v2',
       action: action,
       message: action,
       payload: payload
@@ -62,6 +55,22 @@ function sendMessage(action, payload) {
     sendMessage(action, payload);
   });
 }
+var sendCurrentParsedContentDebounced = function sendCurrentParsedContentDebounced() {
+  sendMessage('sendCurrentParsedContent', {
+    content: Object.values(store.data).map(function (item) {
+      return {
+        id: item.id,
+        keys: item.keys
+      };
+    }),
+    uninstrumented: Object.values(uninstrumentedStore.data).map(function (item) {
+      return {
+        id: item.id,
+        keys: item.keys
+      };
+    })
+  });
+};
 var handlers = {};
 var repeat = 5;
 var api = {
@@ -79,7 +88,7 @@ var api = {
         clearInterval(api.initInterval);
         delete api.initInterval;
       }
-    }, 1000);
+    }, 2000);
   },
   selectKey: function selectKey(meta) {
     sendMessage('selectKey', meta);
@@ -87,45 +96,25 @@ var api = {
   confirmResourceBundle: function confirmResourceBundle(payload) {
     sendMessage('confirmResourceBundle', payload);
   },
-  sendCurrentParsedContent: function sendCurrentParsedContent() {
-    sendMessage('sendCurrentParsedContent', {
-      content: Object.values(store.data).map(function (item) {
-        return {
-          id: item.id,
-          keys: item.keys
-        };
-      })
-    });
-  },
+  sendCurrentParsedContent: debounce(sendCurrentParsedContentDebounced, 500),
   sendCurrentTargetLanguage: function sendCurrentTargetLanguage(lng) {
     sendMessage('sendCurrentTargetLanguage', {
       targetLng: lng || api.i18n.getLng()
     });
   },
+  sendHrefchanged: function sendHrefchanged(href) {
+    sendMessage('hrefChanged', {
+      href: href
+    });
+  },
   addHandler: function addHandler(action, fc) {
     if (!handlers[action]) handlers[action] = [];
     handlers[action].push(fc);
   },
-  sendLocizeIsEnabled: function sendLocizeIsEnabled() {
-    sendMessage('locizeIsEnabled', {
+  sendLocizeIsEnabled: function sendLocizeIsEnabled(payload) {
+    sendMessage('locizeIsEnabled', _objectSpread(_objectSpread({}, payload), {}, {
       enabled: true
-    });
-  },
-  turnOn: function turnOn() {
-    if (api.scriptTurnedOff) return sendMessage('forcedOff');
-    if (!api.clickInterceptionEnabled) {
-      window.document.body.addEventListener('click', api.clickHandler, true);
-    }
-    api.clickInterceptionEnabled = true;
-    sendMessage('turnedOn');
-  },
-  turnOff: function turnOff() {
-    if (api.scriptTurnedOff) return sendMessage('forcedOff');
-    if (api.clickInterceptionEnabled) {
-      window.document.body.removeEventListener('click', api.clickHandler, true);
-    }
-    api.clickInterceptionEnabled = false;
-    sendMessage('turnedOff');
+    }));
   },
   onAddedKey: function onAddedKey(lng, ns, key, value) {
     var msg = {
@@ -153,10 +142,10 @@ if (typeof window !== 'undefined') {
       }
     } else if (sender === 'i18next-editor-frame' && handlers[action]) {
       handlers[action].forEach(function (fc) {
-        fc(payload);
+        fc(payload, e);
       });
     }
   });
 }
 
-export { addLocizeSavedHandler, api, sendMessage, setEditorLng, turnOff, turnOn };
+export { addLocizeSavedHandler, api, sendMessage, setEditorLng };

package/dist/esm/clickHandler.js

@@ -1,3 +1,4 @@
+import { containsHiddenMeta, unwrap } from 'i18next-subliminal';
 import { getClickedElement, getElementText, getElementI18nKey, getElementNamespace } from './utils.js';
 
 function createClickHandler(cb) {
@@ -7,8 +8,17 @@ function createClickHandler(cb) {
     if (!el) return {};
     e.preventDefault();
     e.stopPropagation();
+    function getFallbackNS() {
+      if (options.isLocizify) return options.defaultNS;
+    }
     var text = getElementText(el);
     var key = getElementI18nKey(el);
+    var ns = getElementNamespace(el) || getFallbackNS();
+    if (containsHiddenMeta(text)) {
+      var meta = unwrap(text);
+      if (meta && meta.invisibleMeta && meta.invisibleMeta.key) key = meta.invisibleMeta.key;
+      if (meta && meta.invisibleMeta && meta.invisibleMeta.ns) ns = meta.invisibleMeta.ns;
+    }
     var rectEl = el.getBoundingClientRect ? el : el.parentElement;
     var _rectEl$getBoundingCl = rectEl.getBoundingClientRect(),
       top = _rectEl$getBoundingCl.top,
@@ -21,14 +31,11 @@ function createClickHandler(cb) {
     var pR = parseFloat(style.getPropertyValue('padding-right'));
     var pL = parseFloat(style.getPropertyValue('padding-left'));
     var sizing = style.getPropertyValue('box-sizing');
-    function getFallbackNS() {
-      if (options.isLocizify) return options.defaultNS;
-    }
     cb({
       tagName: rectEl.tagName,
       text: text,
       key: key,
-      ns: getElementNamespace(el) || getFallbackNS(),
+      ns: ns,
       box: {
         top: top,
         left: left,