locize 3.0.4 → 3.1.0

package/dist/esm/locizePlugin.js

@@ -3,6 +3,7 @@ import { PostProcessor } from 'i18next-subliminal';
 export { unwrap } from 'i18next-subliminal';
 import { start } from './process.js';
 import { startLegacy } from './processLegacy.js';
+import { getQsParameterByName } 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; }
@@ -10,89 +11,94 @@ var isInIframe = typeof window !== 'undefined';
 try {
   isInIframe = self !== top;
 } catch (e) {}
+function configurePostProcessor(i18next, options) {
+  i18next.use(PostProcessor);
+  if (typeof options.postProcess === 'string') {
+    options.postProcess = [options.postProcess, 'subliminal'];
+  } else if (Array.isArray(options.postProcess)) {
+    options.postProcess.push('subliminal');
+  } else {
+    options.postProcess = 'subliminal';
+  }
+  options.postProcessPassResolved = true;
+}
+function getImplementation(i18n) {
+  var impl = {
+    getResource: function getResource(lng, ns, key) {
+      return i18n.getResource(lng, ns, key);
+    },
+    setResource: function setResource(lng, ns, key, value) {
+      return i18n.addResource(lng, ns, key, value, {
+        silent: true
+      });
+    },
+    getResourceBundle: function getResourceBundle(lng, ns, cb) {
+      i18n.loadNamespaces(ns, function () {
+        cb(i18n.getResourceBundle(lng, ns));
+      });
+    },
+    getLng: function getLng() {
+      return i18n.languages[0];
+    },
+    getSourceLng: function getSourceLng() {
+      var fallback = i18n.options.fallbackLng;
+      if (typeof fallback === 'string') return fallback;
+      if (Array.isArray(fallback)) return fallback[fallback.length - 1];
+      if (fallback && fallback["default"]) {
+        if (typeof fallback["default"] === 'string') return fallback;
+        if (Array.isArray(fallback["default"])) return fallback["default"][fallback["default"].length - 1];
+      }
+      if (typeof fallback === 'function') {
+        var res = fallback(i18n.resolvedLanguage);
+        if (typeof res === 'string') return res;
+        if (Array.isArray(res)) return res[res.length - 1];
+      }
+      return 'dev';
+    },
+    getLocizeDetails: function getLocizeDetails() {
+      var backendName;
+      if (i18n.services.backendConnector.backend && i18n.services.backendConnector.backend.options && i18n.services.backendConnector.backend.options.loadPath && i18n.services.backendConnector.backend.options.loadPath.indexOf('.locize.') > 0) {
+        backendName = 'I18NextLocizeBackend';
+      } else {
+        backendName = i18n.services.backendConnector.backend ? i18n.services.backendConnector.backend.constructor.name : 'options.resources';
+      }
+      var opts = {
+        backendName: backendName,
+        sourceLng: impl.getSourceLng(),
+        i18nFormat: i18n.options.compatibilityJSON === 'v3' ? 'i18next_v3' : 'i18next_v4',
+        i18nFramework: 'i18next',
+        isLocizify: i18n.options.isLocizify,
+        defaultNS: i18n.options.defaultNS
+      };
+      if (!i18n.options.backend && !i18n.options.editor) return opts;
+      var pickFrom = i18n.options.backend || i18n.options.editor;
+      return _objectSpread(_objectSpread({}, opts), {}, {
+        projectId: pickFrom.projectId,
+        version: pickFrom.version
+      });
+    },
+    bindLanguageChange: function bindLanguageChange(cb) {
+      i18n.on('languageChanged', cb);
+    },
+    bindMissingKeyHandler: function bindMissingKeyHandler(cb) {
+      i18n.options.missingKeyHandler = function (lng, ns, k, val, isUpdate, opts) {
+        if (!isUpdate) cb(lng, ns, k, val);
+      };
+    },
+    triggerRerender: function triggerRerender() {
+      i18n.emit('editorSaved');
+    }
+  };
+  return impl;
+}
 var i18next;
 var locizePlugin = {
   type: '3rdParty',
   init: function init(i18n) {
     var options = i18n.options;
     i18next = i18n;
-    if (!isInIframe) {
-      i18next.use(PostProcessor);
-      if (typeof options.postProcess === 'string') {
-        options.postProcess = [options.postProcess, 'subliminal'];
-      } else if (Array.isArray(options.postProcess)) {
-        options.postProcess.push('subliminal');
-      } else {
-        options.postProcess = 'subliminal';
-      }
-      options.postProcessPassResolved = true;
-    }
-    var impl = {
-      getResource: function getResource(lng, ns, key) {
-        return i18n.getResource(lng, ns, key);
-      },
-      setResource: function setResource(lng, ns, key, value) {
-        return i18n.addResource(lng, ns, key, value, {
-          silent: true
-        });
-      },
-      getResourceBundle: function getResourceBundle(lng, ns, cb) {
-        i18n.loadNamespaces(ns, function () {
-          cb(i18n.getResourceBundle(lng, ns));
-        });
-      },
-      getLng: function getLng() {
-        return i18n.languages[0];
-      },
-      getSourceLng: function getSourceLng() {
-        var fallback = i18n.options.fallbackLng;
-        if (typeof fallback === 'string') return fallback;
-        if (Array.isArray(fallback)) return fallback[fallback.length - 1];
-        if (fallback && fallback["default"]) {
-          if (typeof fallback["default"] === 'string') return fallback;
-          if (Array.isArray(fallback["default"])) return fallback["default"][fallback["default"].length - 1];
-        }
-        if (typeof fallback === 'function') {
-          var res = fallback(i18n.resolvedLanguage);
-          if (typeof res === 'string') return res;
-          if (Array.isArray(res)) return res[res.length - 1];
-        }
-        return 'dev';
-      },
-      getLocizeDetails: function getLocizeDetails() {
-        var backendName;
-        if (i18n.services.backendConnector.backend && i18n.services.backendConnector.backend.options && i18n.services.backendConnector.backend.options.loadPath && i18n.services.backendConnector.backend.options.loadPath.indexOf('.locize.') > 0) {
-          backendName = 'I18NextLocizeBackend';
-        } else {
-          backendName = i18n.services.backendConnector.backend ? i18n.services.backendConnector.backend.constructor.name : 'options.resources';
-        }
-        var opts = {
-          backendName: backendName,
-          sourceLng: impl.getSourceLng(),
-          i18nFormat: i18n.options.compatibilityJSON === 'v3' ? 'i18next_v3' : 'i18next_v4',
-          i18nFramework: 'i18next',
-          isLocizify: i18n.options.isLocizify,
-          defaultNS: i18n.options.defaultNS
-        };
-        if (!i18n.options.backend && !i18n.options.editor) return opts;
-        var pickFrom = i18n.options.backend || i18n.options.editor;
-        return _objectSpread(_objectSpread({}, opts), {}, {
-          projectId: pickFrom.projectId,
-          version: pickFrom.version
-        });
-      },
-      bindLanguageChange: function bindLanguageChange(cb) {
-        i18n.on('languageChanged', cb);
-      },
-      bindMissingKeyHandler: function bindMissingKeyHandler(cb) {
-        i18n.options.missingKeyHandler = function (lng, ns, k, val, isUpdate, opts) {
-          if (!isUpdate) cb(lng, ns, k, val);
-        };
-      },
-      triggerRerender: function triggerRerender() {
-        i18n.emit('editorSaved');
-      }
-    };
+    if (!isInIframe) configurePostProcessor(i18next, options);
+    var impl = getImplementation(i18n);
     if (!isInIframe) {
       start(impl);
     } else {
@@ -100,5 +106,24 @@ var locizePlugin = {
     }
   }
 };
+var locizeEditorPlugin = function locizeEditorPlugin() {
+  var opt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  opt.qsProp = opt.qsProp || 'incontext';
+  return {
+    type: '3rdParty',
+    init: function init(i18n) {
+      var options = i18n.options;
+      i18next = i18n;
+      var showInContext = getQsParameterByName(opt.qsProp) === 'true';
+      if (!isInIframe && showInContext) configurePostProcessor(i18next, options);
+      var impl = getImplementation(i18n);
+      if (!isInIframe && showInContext) {
+        start(impl);
+      } else {
+        startLegacy(impl);
+      }
+    }
+  };
+};
 
-export { locizePlugin };
+export { locizeEditorPlugin, locizePlugin };

package/dist/esm/observer.js

@@ -1,7 +1,18 @@
 import { debounce } from './utils.js';
 import { validAttributes } from './vars.js';
 
+var mutationTriggeringElements = {};
 function ignoreMutation(ele) {
+  if (ele.uniqueID) {
+    var info = mutationTriggeringElements[ele.uniqueID];
+    if (info && info.triggered > 10 && info.lastTriggerDate + 500 < Date.now()) {
+      if (!info.warned && console) {
+        console.warn('locize ::: ignoring element change - an element is rerendering too often in short interval', '\n', 'consider adding the "data-locize-editor-ignore:" attribute to the element:', ele);
+        info.warned = true;
+      }
+      return true;
+    }
+  }
   var ret = ele.dataset && (ele.dataset.i18nextEditorElement === 'true' || ele.dataset.locizeEditorIgnore === 'true');
   if (!ret && ele.parentElement) return ignoreMutation(ele.parentElement);
   return ret;
@@ -30,6 +41,12 @@ function createObserver(ele, handle) {
       if (mutation.type === 'attributes' && !validAttributes.includes(mutation.attributeName)) {
         return;
       }
+      Object.keys(mutationTriggeringElements).forEach(function (k) {
+        var info = mutationTriggeringElements[k];
+        if (info.lastTriggerDate + 60000 < Date.now()) {
+          delete mutationTriggeringElements[k];
+        }
+      });
       if (mutation.type === 'childList') {
         var notOurs = 0;
         if (!ignoreMutation(mutation.target)) {
@@ -45,8 +62,18 @@ function createObserver(ele, handle) {
         if (notOurs === 0) return;
       }
       triggerMutation = true;
+      if (mutation.target && mutation.target.uniqueID) {
+        var info = mutationTriggeringElements[mutation.target.uniqueID] || {
+          triggered: 0
+        };
+        info.triggered = info.triggered + 1;
+        info.lastTriggerDate = Date.now();
+        mutationTriggeringElements[mutation.target.uniqueID] = info;
+      }
       var includedAlready = targetEles.reduce(function (mem, element) {
-        if (mem || element.contains(mutation.target) || !mutation.target.parentElement) return true;
+        if (mem || element.contains(mutation.target) || !mutation.target.parentElement) {
+          return true;
+        }
         return false;
       }, false);
       if (!includedAlready) {

package/dist/esm/ui/utils.js

@@ -1,6 +1,10 @@
-function isInViewport(element) {
-  var rect = element.getBoundingClientRect();
-  return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+function isInViewport(el) {
+  var rect = el.getBoundingClientRect();
+  var windowHeight = window.innerHeight || document.documentElement.clientHeight;
+  var windowWidth = window.innerWidth || document.documentElement.clientWidth;
+  var vertInView = rect.top <= windowHeight && rect.top + rect.height >= 0;
+  var horInView = rect.left <= windowWidth && rect.left + rect.width >= 0;
+  return vertInView && horInView;
 }
 function mouseDistanceFromElement(mouseEvent, element) {
   var $n = element,
@@ -11,9 +15,9 @@ function mouseDistanceFromElement(mouseEvent, element) {
       y: mY
     },
     off = $n.getBoundingClientRect(),
-    ny1 = off.top + document.body.scrollTop,
+    ny1 = off.top + document.documentElement.scrollTop,
     ny2 = ny1 + $n.offsetHeight,
-    nx1 = off.left + document.body.scrollLeft,
+    nx1 = off.left + document.documentElement.scrollLeft,
     nx2 = nx1 + $n.offsetWidth,
     maxX1 = Math.max(mX, nx1),
     minX2 = Math.min(mX, nx2),

package/dist/esm/utils.js

@@ -119,5 +119,15 @@ function getElementNamespace(el) {
   find(el);
   return found;
 }
+function getQsParameterByName(name, url) {
+  if (typeof window === 'undefined') return null;
+  if (!url) url = window.location.href.toLowerCase();
+  name = name.replace(/[\[\]]/g, '\\$&');
+  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
+  var results = regex.exec(url);
+  if (!results) return null;
+  if (!results[2]) return '';
+  return decodeURIComponent(results[2].replace(/\+/g, ' '));
+}
 
-export { debounce, getClickedElement, getElementI18nKey, getElementNamespace, getElementText, getWindow, isWindow, offset };
+export { debounce, getClickedElement, getElementI18nKey, getElementNamespace, getElementText, getQsParameterByName, getWindow, isWindow, offset };

package/dist/umd/locize.js

@@ -281,10 +281,14 @@
     },
     requestInitialize: function requestInitialize(payload) {
       sendMessage('requestInitialize', payload);
+      if (api.initInterval) return;
       api.initInterval = setInterval(function () {
         repeat = repeat - 1;
         api.requestInitialize(payload);
-        if (repeat < 0 && api.initInterval) clearInterval(api.initInterval);
+        if (repeat < 0 && api.initInterval) {
+          clearInterval(api.initInterval);
+          delete api.initInterval;
+        }
       }, 1000);
     },
     selectKey: function selectKey(meta) {
@@ -489,6 +493,7 @@
   function handler$6(payload) {
     api.initialized = true;
     clearInterval(api.initInterval);
+    delete api.initInterval;
     api.sendCurrentParsedContent();
     api.sendCurrentTargetLanguage();
   }
@@ -2394,8 +2399,29 @@
     find(el);
     return found;
   }
+  function getQsParameterByName(name, url) {
+    if (typeof window === 'undefined') return null;
+    if (!url) url = window.location.href.toLowerCase();
+    name = name.replace(/[\[\]]/g, '\\$&');
+    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
+    var results = regex.exec(url);
+    if (!results) return null;
+    if (!results[2]) return '';
+    return decodeURIComponent(results[2].replace(/\+/g, ' '));
+  }
 
+  var mutationTriggeringElements = {};
   function ignoreMutation(ele) {
+    if (ele.uniqueID) {
+      var info = mutationTriggeringElements[ele.uniqueID];
+      if (info && info.triggered > 10 && info.lastTriggerDate + 500 < Date.now()) {
+        if (!info.warned && console) {
+          console.warn('locize ::: ignoring element change - an element is rerendering too often in short interval', '\n', 'consider adding the "data-locize-editor-ignore:" attribute to the element:', ele);
+          info.warned = true;
+        }
+        return true;
+      }
+    }
     var ret = ele.dataset && (ele.dataset.i18nextEditorElement === 'true' || ele.dataset.locizeEditorIgnore === 'true');
     if (!ret && ele.parentElement) return ignoreMutation(ele.parentElement);
     return ret;
@@ -2424,6 +2450,12 @@
         if (mutation.type === 'attributes' && !validAttributes.includes(mutation.attributeName)) {
           return;
         }
+        Object.keys(mutationTriggeringElements).forEach(function (k) {
+          var info = mutationTriggeringElements[k];
+          if (info.lastTriggerDate + 60000 < Date.now()) {
+            delete mutationTriggeringElements[k];
+          }
+        });
         if (mutation.type === 'childList') {
           var notOurs = 0;
           if (!ignoreMutation(mutation.target)) {
@@ -2439,8 +2471,18 @@
           if (notOurs === 0) return;
         }
         triggerMutation = true;
+        if (mutation.target && mutation.target.uniqueID) {
+          var info = mutationTriggeringElements[mutation.target.uniqueID] || {
+            triggered: 0
+          };
+          info.triggered = info.triggered + 1;
+          info.lastTriggerDate = Date.now();
+          mutationTriggeringElements[mutation.target.uniqueID] = info;
+        }
         var includedAlready = targetEles.reduce(function (mem, element) {
-          if (mem || element.contains(mutation.target) || !mutation.target.parentElement) return true;
+          if (mem || element.contains(mutation.target) || !mutation.target.parentElement) {
+            return true;
+          }
           return false;
         }, false);
         if (!includedAlready) {
@@ -2468,9 +2510,13 @@
     };
   }
 
-  function isInViewport(element) {
-    var rect = element.getBoundingClientRect();
-    return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+  function isInViewport(el) {
+    var rect = el.getBoundingClientRect();
+    var windowHeight = window.innerHeight || document.documentElement.clientHeight;
+    var windowWidth = window.innerWidth || document.documentElement.clientWidth;
+    var vertInView = rect.top <= windowHeight && rect.top + rect.height >= 0;
+    var horInView = rect.left <= windowWidth && rect.left + rect.width >= 0;
+    return vertInView && horInView;
   }
   function mouseDistanceFromElement(mouseEvent, element) {
     var $n = element,
@@ -2481,9 +2527,9 @@
         y: mY
       },
       off = $n.getBoundingClientRect(),
-      ny1 = off.top + document.body.scrollTop,
+      ny1 = off.top + document.documentElement.scrollTop,
       ny2 = ny1 + $n.offsetHeight,
-      nx1 = off.left + document.body.scrollLeft,
+      nx1 = off.left + document.documentElement.scrollLeft,
       nx2 = nx1 + $n.offsetWidth,
       maxX1 = Math.max(mX, nx1),
       minX2 = Math.min(mX, nx2),
@@ -2854,89 +2900,94 @@
   try {
     isInIframe = self !== top;
   } catch (e) {}
+  function configurePostProcessor(i18next, options) {
+    i18next.use(SubliminalPostProcessor);
+    if (typeof options.postProcess === 'string') {
+      options.postProcess = [options.postProcess, 'subliminal'];
+    } else if (Array.isArray(options.postProcess)) {
+      options.postProcess.push('subliminal');
+    } else {
+      options.postProcess = 'subliminal';
+    }
+    options.postProcessPassResolved = true;
+  }
+  function getImplementation(i18n) {
+    var impl = {
+      getResource: function getResource(lng, ns, key) {
+        return i18n.getResource(lng, ns, key);
+      },
+      setResource: function setResource(lng, ns, key, value) {
+        return i18n.addResource(lng, ns, key, value, {
+          silent: true
+        });
+      },
+      getResourceBundle: function getResourceBundle(lng, ns, cb) {
+        i18n.loadNamespaces(ns, function () {
+          cb(i18n.getResourceBundle(lng, ns));
+        });
+      },
+      getLng: function getLng() {
+        return i18n.languages[0];
+      },
+      getSourceLng: function getSourceLng() {
+        var fallback = i18n.options.fallbackLng;
+        if (typeof fallback === 'string') return fallback;
+        if (Array.isArray(fallback)) return fallback[fallback.length - 1];
+        if (fallback && fallback["default"]) {
+          if (typeof fallback["default"] === 'string') return fallback;
+          if (Array.isArray(fallback["default"])) return fallback["default"][fallback["default"].length - 1];
+        }
+        if (typeof fallback === 'function') {
+          var res = fallback(i18n.resolvedLanguage);
+          if (typeof res === 'string') return res;
+          if (Array.isArray(res)) return res[res.length - 1];
+        }
+        return 'dev';
+      },
+      getLocizeDetails: function getLocizeDetails() {
+        var backendName;
+        if (i18n.services.backendConnector.backend && i18n.services.backendConnector.backend.options && i18n.services.backendConnector.backend.options.loadPath && i18n.services.backendConnector.backend.options.loadPath.indexOf('.locize.') > 0) {
+          backendName = 'I18NextLocizeBackend';
+        } else {
+          backendName = i18n.services.backendConnector.backend ? i18n.services.backendConnector.backend.constructor.name : 'options.resources';
+        }
+        var opts = {
+          backendName: backendName,
+          sourceLng: impl.getSourceLng(),
+          i18nFormat: i18n.options.compatibilityJSON === 'v3' ? 'i18next_v3' : 'i18next_v4',
+          i18nFramework: 'i18next',
+          isLocizify: i18n.options.isLocizify,
+          defaultNS: i18n.options.defaultNS
+        };
+        if (!i18n.options.backend && !i18n.options.editor) return opts;
+        var pickFrom = i18n.options.backend || i18n.options.editor;
+        return _objectSpread(_objectSpread({}, opts), {}, {
+          projectId: pickFrom.projectId,
+          version: pickFrom.version
+        });
+      },
+      bindLanguageChange: function bindLanguageChange(cb) {
+        i18n.on('languageChanged', cb);
+      },
+      bindMissingKeyHandler: function bindMissingKeyHandler(cb) {
+        i18n.options.missingKeyHandler = function (lng, ns, k, val, isUpdate, opts) {
+          if (!isUpdate) cb(lng, ns, k, val);
+        };
+      },
+      triggerRerender: function triggerRerender() {
+        i18n.emit('editorSaved');
+      }
+    };
+    return impl;
+  }
   var i18next;
   var locizePlugin = {
     type: '3rdParty',
     init: function init(i18n) {
       var options = i18n.options;
       i18next = i18n;
-      if (!isInIframe) {
-        i18next.use(SubliminalPostProcessor);
-        if (typeof options.postProcess === 'string') {
-          options.postProcess = [options.postProcess, 'subliminal'];
-        } else if (Array.isArray(options.postProcess)) {
-          options.postProcess.push('subliminal');
-        } else {
-          options.postProcess = 'subliminal';
-        }
-        options.postProcessPassResolved = true;
-      }
-      var impl = {
-        getResource: function getResource(lng, ns, key) {
-          return i18n.getResource(lng, ns, key);
-        },
-        setResource: function setResource(lng, ns, key, value) {
-          return i18n.addResource(lng, ns, key, value, {
-            silent: true
-          });
-        },
-        getResourceBundle: function getResourceBundle(lng, ns, cb) {
-          i18n.loadNamespaces(ns, function () {
-            cb(i18n.getResourceBundle(lng, ns));
-          });
-        },
-        getLng: function getLng() {
-          return i18n.languages[0];
-        },
-        getSourceLng: function getSourceLng() {
-          var fallback = i18n.options.fallbackLng;
-          if (typeof fallback === 'string') return fallback;
-          if (Array.isArray(fallback)) return fallback[fallback.length - 1];
-          if (fallback && fallback["default"]) {
-            if (typeof fallback["default"] === 'string') return fallback;
-            if (Array.isArray(fallback["default"])) return fallback["default"][fallback["default"].length - 1];
-          }
-          if (typeof fallback === 'function') {
-            var res = fallback(i18n.resolvedLanguage);
-            if (typeof res === 'string') return res;
-            if (Array.isArray(res)) return res[res.length - 1];
-          }
-          return 'dev';
-        },
-        getLocizeDetails: function getLocizeDetails() {
-          var backendName;
-          if (i18n.services.backendConnector.backend && i18n.services.backendConnector.backend.options && i18n.services.backendConnector.backend.options.loadPath && i18n.services.backendConnector.backend.options.loadPath.indexOf('.locize.') > 0) {
-            backendName = 'I18NextLocizeBackend';
-          } else {
-            backendName = i18n.services.backendConnector.backend ? i18n.services.backendConnector.backend.constructor.name : 'options.resources';
-          }
-          var opts = {
-            backendName: backendName,
-            sourceLng: impl.getSourceLng(),
-            i18nFormat: i18n.options.compatibilityJSON === 'v3' ? 'i18next_v3' : 'i18next_v4',
-            i18nFramework: 'i18next',
-            isLocizify: i18n.options.isLocizify,
-            defaultNS: i18n.options.defaultNS
-          };
-          if (!i18n.options.backend && !i18n.options.editor) return opts;
-          var pickFrom = i18n.options.backend || i18n.options.editor;
-          return _objectSpread(_objectSpread({}, opts), {}, {
-            projectId: pickFrom.projectId,
-            version: pickFrom.version
-          });
-        },
-        bindLanguageChange: function bindLanguageChange(cb) {
-          i18n.on('languageChanged', cb);
-        },
-        bindMissingKeyHandler: function bindMissingKeyHandler(cb) {
-          i18n.options.missingKeyHandler = function (lng, ns, k, val, isUpdate, opts) {
-            if (!isUpdate) cb(lng, ns, k, val);
-          };
-        },
-        triggerRerender: function triggerRerender() {
-          i18n.emit('editorSaved');
-        }
-      };
+      if (!isInIframe) configurePostProcessor(i18next, options);
+      var impl = getImplementation(i18n);
       if (!isInIframe) {
         start(impl);
       } else {
@@ -2944,6 +2995,25 @@
       }
     }
   };
+  var locizeEditorPlugin = function locizeEditorPlugin() {
+    var opt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    opt.qsProp = opt.qsProp || 'incontext';
+    return {
+      type: '3rdParty',
+      init: function init(i18n) {
+        var options = i18n.options;
+        i18next = i18n;
+        var showInContext = getQsParameterByName(opt.qsProp) === 'true';
+        if (!isInIframe && showInContext) configurePostProcessor(i18next, options);
+        var impl = getImplementation(i18n);
+        if (!isInIframe && showInContext) {
+          start(impl);
+        } else {
+          startLegacy(impl);
+        }
+      }
+    };
+  };
 
   function startStandalone() {
     startLegacy({
@@ -2969,6 +3039,7 @@
     PostProcessor: SubliminalPostProcessor,
     addLocizeSavedHandler: addLocizeSavedHandler,
     locizePlugin: locizePlugin,
+    locizeEditorPlugin: locizeEditorPlugin,
     turnOn: turnOn,
     turnOff: turnOff,
     setEditorLng: setEditorLng,
@@ -2979,6 +3050,7 @@
   exports.addLocizeSavedHandler = addLocizeSavedHandler;
   exports.containsHiddenMeta = containsHiddenMeta;
   exports["default"] = index;
+  exports.locizeEditorPlugin = locizeEditorPlugin;
   exports.locizePlugin = locizePlugin;
   exports.setEditorLng = setEditorLng;
   exports.startStandalone = startStandalone;