locizify 10.0.1 → 10.0.3

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+### 10.0.3
+
+- update locize dep
+
+### 10.0.2
+
+- update locize deps
+
 ### 10.0.1
 
 - update locize dep

package/locizify.js

@@ -5929,21 +5929,26 @@ var locizify = (function() {
 		while (stack.length > 1) {
 			if (!object) return {};
 			const key = cleanKey(stack.shift());
+			if (UNSAFE_KEYS.indexOf(key) > -1) return {};
 			if (!object[key] && Empty) object[key] = new Empty();
 			object = object[key];
 		}
 		if (!object) return {};
+		const k = cleanKey(stack.shift());
+		if (UNSAFE_KEYS.indexOf(k) > -1) return {};
 		return {
 			obj: object,
-			k: cleanKey(stack.shift())
+			k
 		};
 	}
 	function setPath(object, path, newValue) {
 		const { obj, k } = getLastOfPath(object, path, Object);
+		if (obj === void 0) return;
 		obj[k] = newValue;
 	}
 	function pushPath(object, path, newValue, concat) {
 		const { obj, k } = getLastOfPath(object, path, Object);
+		if (obj === void 0) return;
 		obj[k] = obj[k] || [];
 		if (concat) obj[k] = obj[k].concat(newValue);
 		if (!concat) obj[k].push(newValue);
@@ -6887,14 +6892,25 @@ var locizify = (function() {
 		warning: "#e67a00",
 		gray: "#ccc"
 	};
-	var getIframeUrl = function getIframeUrl() {
+	var resolveEnv = function resolveEnv() {
 		var _prc$env;
 		var p;
 		if (typeof process !== "undefined") p = process;
 		if (!p && typeof window !== "undefined") p = window.process;
-		var env = ((_prc$env = (p || {}).env) === null || _prc$env === void 0 ? void 0 : _prc$env.locizeIncontext) || "production";
+		return ((_prc$env = (p || {}).env) === null || _prc$env === void 0 ? void 0 : _prc$env.locizeIncontext) || "production";
+	};
+	var getIframeUrl = function getIframeUrl() {
+		var env = resolveEnv();
 		return env === "development" ? "http://localhost:3003/" : env === "staging" ? "https://incontext-dev.locize.app" : "https://incontext.locize.app";
 	};
+	var getEditorOrigins = function getEditorOrigins() {
+		var env = resolveEnv();
+		return env === "development" ? ["http://localhost:3003", "http://localhost:3000"] : env === "staging" ? ["https://incontext-dev.locize.app", "https://dev.locize.app"] : [
+			"https://incontext.locize.app",
+			"https://www.locize.app",
+			"https://locize.app"
+		];
+	};
 	//#endregion
 	//#region node_modules/locize/dist/esm/ui/stylesheet.js
 	var sheet = function() {
@@ -7120,6 +7136,19 @@ var locizify = (function() {
 		if (!results[2]) return "";
 		return decodeURIComponent(results[2].replace(/\+/g, " "));
 	}
+	var isDebug = function() {
+		if (typeof window === "undefined") return false;
+		try {
+			return window.localStorage.getItem("locize-debug") === "true" || getQsParameterByName$1("locizedebug") === "true";
+		} catch (e) {
+			return false;
+		}
+	}();
+	function debugLog() {
+		var _console;
+		for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
+		if (isDebug) (_console = console).warn.apply(_console, ["[locize]"].concat(args));
+	}
 	var _isInIframe = false;
 	if (typeof window !== "undefined") try {
 		_isInIframe = self !== top;
@@ -7169,12 +7198,14 @@ var locizify = (function() {
 		}
 		if (!api.origin) api.origin = getIframeUrl();
 		if (!api.source || !api.source.postMessage || !api.initialized && allowedActionsBeforeInit.indexOf(action) < 0) {
-			pendingMsgs.push({
+			debugLog("queueing (editor not connected yet)", action, payload);
+			if (pendingMsgs.length < 100) pendingMsgs.push({
 				action,
 				payload
 			});
 			return;
 		}
+		debugLog("out", action, payload);
 		if (api.legacy) api.source.postMessage(_objectSpread$5({ message: action }, payload), api.origin);
 		else api.source.postMessage({
 			sender: "i18next-editor",
@@ -7223,6 +7254,7 @@ var locizify = (function() {
 				if (repeat < 0 && api.initInterval) {
 					clearInterval(api.initInterval);
 					delete api.initInterval;
+					if (!api.initialized) debugLog("handshake gave up: editor never answered requestInitialize");
 				}
 			}, 2e3);
 		},
@@ -7255,17 +7287,24 @@ var locizify = (function() {
 			});
 		}
 	};
-	var getExpectedIframeOrigin = function getExpectedIframeOrigin() {
+	var getExpectedEditorOrigins = function getExpectedEditorOrigins() {
 		try {
-			return new URL(getIframeUrl()).origin;
+			return getEditorOrigins().map(function(url) {
+				return new URL(url).origin;
+			});
 		} catch (err) {
-			return null;
+			return [];
 		}
 	};
 	if (typeof window !== "undefined") window.addEventListener("message", function(e) {
-		var expectedOrigin = getExpectedIframeOrigin();
-		if (!expectedOrigin || e.origin !== expectedOrigin) return;
-		var _e$data = e.data, sender = _e$data.sender, action = _e$data.action, message = _e$data.message, payload = _e$data.payload;
+		var expectedOrigins = getExpectedEditorOrigins();
+		if (!expectedOrigins.length || expectedOrigins.indexOf(e.origin) < 0) {
+			var _e$data;
+			if (((_e$data = e.data) === null || _e$data === void 0 ? void 0 : _e$data.sender) === "i18next-editor-frame") debugLog("dropped editor message from unexpected origin", e.origin, "expected one of", expectedOrigins);
+			return;
+		}
+		var _e$data2 = e.data, sender = _e$data2.sender, action = _e$data2.action, message = _e$data2.message, payload = _e$data2.payload;
+		debugLog("in", action || message, payload);
 		if (message) {
 			var usedEventName = getMappedLegacyEvent(message);
 			if (handlers[usedEventName]) handlers[usedEventName].forEach(function(fc) {
@@ -7429,9 +7468,11 @@ var locizify = (function() {
 	//#endregion
 	//#region node_modules/locize/dist/esm/api/handleConfirmInitialized.js
 	function handler$5(payload) {
+		var _document$querySelect;
 		api.initialized = true;
 		clearInterval(api.initInterval);
 		delete api.initInterval;
+		(_document$querySelect = document.querySelector(".locize-incontext-error")) === null || _document$querySelect === void 0 || _document$querySelect.remove();
 		api.sendCurrentParsedContent();
 		api.sendCurrentTargetLanguage();
 	}
@@ -7542,12 +7583,15 @@ var locizify = (function() {
 		sheet.insertRule(".i18next-editor-popup * { \n      -webkit-touch-callout: none; /* iOS Safari */\n      -webkit-user-select: none; /* Safari */\n      -khtml-user-select: none; /* Konqueror HTML */\n      -moz-user-select: none; /* Firefox */\n      -ms-user-select: none; /* Internet Explorer/Edge */\n      user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */\n    }");
 		sheet.insertRule(".i18next-editor-popup .resizer-right {\n      width: 15px;\n      height: 100%;\n      background: transparent;\n      position: absolute;\n      right: -15px;\n      bottom: 0;\n      cursor: e-resize;\n    }");
 		sheet.insertRule(".i18next-editor-popup .resizer-both {\n      width: 15px;\n      height: 15px;\n      background: transparent;\n      z-index: 10;\n      position: absolute;\n      right: -15px;\n      bottom: -15px;\n      cursor: se-resize;\n    }");
+		sheet.insertRule(".locize-incontext-ribbon {\n      cursor: pointer;\n      position: fixed;\n      bottom: 25px;\n      right: 25px;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 50px;\n      height: 50px;\n      background-color: rgba(249, 249, 249, 0.8);\n      -webkit-backdrop-filter: blur(3px);\n      backdrop-filter: blur(3px);\n      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);\n      border-radius: 50%;\n    }");
+		sheet.insertRule(".locize-incontext-ribbon.locize-incontext-ribbon-left {\n      right: auto;\n      left: 25px;\n    }");
 		sheet.insertRule(".i18next-editor-popup .resizer-bottom {\n      width: 100%;\n      height: 15px;\n      background: transparent;\n      position: absolute;\n      right: 0;\n      bottom: -15px;\n      cursor: s-resize;\n    }");
 	}
-	function Ribbon(popupEle, onMaximize) {
+	function Ribbon(popupEle, onMaximize, ribbonPosition) {
 		var ribbon = document.createElement("div");
 		ribbon.setAttribute("data-i18next-editor-element", "true");
-		ribbon.style = "\n  cursor: pointer;\n  position: fixed;\n  bottom: 25px;\n  right: 25px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 50px;\n  height: 50px;\n  background-color:  rgba(249, 249, 249, 0.2);\n  backdrop-filter: blur(3px);\n  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);\n  border-radius: 50%;\n  ";
+		ribbon.classList.add("locize-incontext-ribbon");
+		if (ribbonPosition === "bottom-left") ribbon.classList.add("locize-incontext-ribbon-left");
 		ribbon.onclick = function() {
 			onMaximize();
 		};
@@ -7572,7 +7616,18 @@ var locizify = (function() {
 		return image;
 	}
 	var popupId = "i18next-editor-popup";
+	function showPopupError(msg) {
+		var popup = document.getElementById(popupId);
+		if (!popup || popup.querySelector(".locize-incontext-error")) return;
+		var err = document.createElement("div");
+		err.className = "locize-incontext-error";
+		err.setAttribute("data-i18next-editor-element", "true");
+		err.textContent = msg;
+		err.style = "\n  position: absolute;\n  top: 32px;\n  left: 0;\n  right: 0;\n  z-index: 102;\n  padding: 8px 10px;\n  background-color: ".concat(colors.warning, ";\n  color: #fff;\n  font: 13px sans-serif;\n  ");
+		popup.appendChild(err);
+	}
 	function Popup(url, cb) {
+		var opt = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
 		var popup = document.createElement("div");
 		popup.setAttribute("id", popupId);
 		popup.classList.add("i18next-editor-popup");
@@ -7589,7 +7644,7 @@ var locizify = (function() {
 				setTimeout(function() {
 					document.body.removeChild(ribbon);
 				}, 1e3);
-			});
+			}, opt.ribbonPosition);
 			document.body.appendChild(ribbon);
 			stopMouseTracking();
 		}));
@@ -9153,6 +9208,10 @@ var locizify = (function() {
 					var meta = unwrap(trimmedTxt);
 					uninstrumentedStore.remove(node.uniqueID, node);
 					store.save(node.uniqueID, meta.invisibleMeta, "text", extractHiddenMeta(node.uniqueID, "text", meta), node);
+				} else if (hasHiddenMeta && !merge.length) {
+					var _meta = unwrap(trimmedTxt);
+					uninstrumentedStore.remove(node.uniqueID, node);
+					store.save(node.uniqueID, _meta.invisibleMeta, "text", extractHiddenMeta(node.uniqueID, "text", _meta), node);
 				} else if (hasHiddenStartMarker) merge.push({
 					childIndex: i,
 					child,
@@ -9169,11 +9228,11 @@ var locizify = (function() {
 						child,
 						text: txt
 					});
-					var _meta = unwrap(merge.reduce(function(mem, item) {
+					var _meta2 = unwrap(merge.reduce(function(mem, item) {
 						return mem + item.text;
 					}, ""));
 					uninstrumentedStore.removeKey(node.uniqueID, "html", node, txt);
-					store.save(node.uniqueID, _meta.invisibleMeta, "html", extractHiddenMeta(node.uniqueID, "html", _meta, merge), node, merge);
+					store.save(node.uniqueID, _meta2.invisibleMeta, "html", extractHiddenMeta(node.uniqueID, "html", _meta2, merge), node, merge);
 					merge = [];
 				}
 			});
@@ -9332,13 +9391,9 @@ var locizify = (function() {
 		var popups = document.getElementsByClassName("i18next-editor-popup");
 		var elmnt = null;
 		var overlay = null;
-		var currentZIndex = 1e5;
 		for (var i = 0; i < popups.length; i++) {
 			var popup = popups[i];
 			var header = getHeader(popup);
-			popup.onmousedown = function() {
-				this.style.zIndex = "" + ++currentZIndex;
-			};
 			if (header) {
 				header.parentPopup = popup;
 				header.onmousedown = dragMouseDown;
@@ -9349,7 +9404,6 @@ var locizify = (function() {
 			if (overlay) overlay.style.display = "block";
 			stopMouseTracking();
 			elmnt = this.parentPopup;
-			elmnt.style.zIndex = "" + ++currentZIndex;
 			e = e || window.event;
 			pos3 = e.clientX;
 			pos4 = e.clientY;
@@ -9490,7 +9544,11 @@ var locizify = (function() {
 		var showInContext = opt.show || getQsParameterByName$1(opt.qsProp || "incontext") === "true";
 		var scriptEle = document.getElementById("locize");
 		var config = {};
-		["projectId", "version"].forEach(function(attr) {
+		[
+			"projectId",
+			"version",
+			"ribbonPosition"
+		].forEach(function(attr) {
 			if (!scriptEle) return;
 			var value = scriptEle.getAttribute(attr.toLowerCase()) || scriptEle.getAttribute("data-" + attr.toLowerCase());
 			if (value === "true") value = true;
@@ -9515,6 +9573,13 @@ var locizify = (function() {
 			observer.start();
 			startMouseTracking(observer);
 			if (!isInIframe && !document.getElementById("i18next-editor-popup")) {
+				debugLog("starting InContext popup with config", config, "iframe:", getIframeUrl());
+				if (!config.projectId) console.error("[locize] InContext editor: no projectId configured (script tag attribute, i18next editor/backend options or startStandalone options) - the editor will not find your project.");
+				setTimeout(function() {
+					if (api.initialized) return;
+					console.error("[locize] InContext editor did not connect within 15s. Likely causes: you are not logged in at locize (open https://www.locize.app in another tab and log in), the page CSP blocks frame-src " + getIframeUrl() + ", or an adblocker blocked the iframe. Enable diagnostics via localStorage.setItem('locize-debug', 'true').");
+					showPopupError("Could not connect to the locize editor. Are you logged in at locize.app? See the browser console for details.");
+				}, 15e3);
 				var popupEl = Popup(getIframeUrl(), function() {
 					var _document$getElementB;
 					api.source = (_document$getElementB = document.getElementById("i18next-editor-iframe")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.contentWindow;
@@ -9524,7 +9589,7 @@ var locizify = (function() {
 						delete api.initInterval;
 					}
 					api.requestInitialize(config);
-				});
+				}, config);
 				document.documentElement.append(popupEl);
 				initDragElement();
 				initResizeElement();
@@ -9648,7 +9713,7 @@ var locizify = (function() {
 					})
 				};
 				if (!i18n.options.backend && !i18n.options.editor) return opts;
-				var pickFrom = i18n.options.editor || i18n.options.backend;
+				var pickFrom = _objectSpread(_objectSpread({}, i18n.options.backend), i18n.options.editor);
 				return _objectSpread(_objectSpread({}, opts), {}, {
 					projectId: pickFrom.projectId,
 					version: pickFrom.version