livelocale 0.8.0 → 0.9.0

package/dist/react/index.cjs

@@ -154,6 +154,15 @@ function stripWatermark(text) {
 function sanitizeZeroWidth(text) {
   return text.replace(ZW_RE, "");
 }
+function removeWatermarks(text) {
+  return text.replace(WATERMARK_RE, "");
+}
+function containsWatermark(text) {
+  WATERMARK_RE.lastIndex = 0;
+  const found = WATERMARK_RE.test(text);
+  WATERMARK_RE.lastIndex = 0;
+  return found;
+}
 function hasWatermark(text) {
   return text.startsWith(DELIM);
 }
@@ -169,14 +178,137 @@ function unwrap(value) {
   }
   return value;
 }
-var DELIM, BIT_0, BIT_1, ZW_RE;
+var DELIM, BIT_0, BIT_1, WATERMARK_DELIMITER, ZW_RE, WATERMARK_RE;
 var init_watermark = __esm({
   "src/client/watermark.ts"() {
     "use strict";
-    DELIM = "\u200D";
+    DELIM = "\u200C";
     BIT_0 = "\u200B";
-    BIT_1 = "\u200C";
+    BIT_1 = "\u200D";
+    WATERMARK_DELIMITER = DELIM;
     ZW_RE = /[\u200B\u200C\u200D]/g;
+    WATERMARK_RE = /\u200C(?:[\u200B\u200D]{8})+\u200C/g;
+  }
+});
+
+// src/client/iframe-bridge.ts
+function toHttpOrigin(value) {
+  if (!value) return null;
+  try {
+    const url = new URL(value);
+    return url.protocol === "http:" || url.protocol === "https:" ? url.origin : null;
+  } catch {
+    return null;
+  }
+}
+function readSameOriginParent(win) {
+  try {
+    const parent = win.parent;
+    if (!parent || parent === win) return null;
+    const own = toHttpOrigin(win.location.origin);
+    if (!own) return null;
+    return parent.location.origin === own ? own : null;
+  } catch {
+    return null;
+  }
+}
+function resolveStudioOrigin(search, storage, sameOriginParent) {
+  const fromParent = toHttpOrigin(sameOriginParent);
+  if (fromParent) return fromParent;
+  const fromQuery = toHttpOrigin(new URLSearchParams(search).get("livelocale-origin"));
+  if (fromQuery) {
+    try {
+      storage?.setItem(STUDIO_ORIGIN_STORAGE_KEY, fromQuery);
+    } catch {
+    }
+    return fromQuery;
+  }
+  let remembered = null;
+  try {
+    remembered = toHttpOrigin(storage?.getItem(STUDIO_ORIGIN_STORAGE_KEY));
+  } catch {
+  }
+  return remembered ?? DEFAULT_STUDIO_ORIGIN;
+}
+var DEFAULT_STUDIO_ORIGIN, STUDIO_ORIGIN_STORAGE_KEY, MAX_VISIBLE_TEXTS, MAX_VISIBLE_TEXT_LENGTH, KEY_PATTERN, IframeBridge;
+var init_iframe_bridge = __esm({
+  "src/client/iframe-bridge.ts"() {
+    "use strict";
+    DEFAULT_STUDIO_ORIGIN = "http://localhost:3010";
+    STUDIO_ORIGIN_STORAGE_KEY = "livelocale-studio-origin";
+    MAX_VISIBLE_TEXTS = 100;
+    MAX_VISIBLE_TEXT_LENGTH = 200;
+    KEY_PATTERN = /^[a-zA-Z0-9._-]+$/;
+    IframeBridge = class {
+      allowedOrigin;
+      constructor(allowedOrigin) {
+        this.allowedOrigin = allowedOrigin;
+      }
+      /**
+       * Sends a message from the iframe client to the parent Studio window.
+       */
+      sendToParent(type, payload) {
+        if (typeof window === "undefined" || !window.parent || window.parent === window) {
+          return;
+        }
+        if (type === "ELEMENT_SELECTED") {
+          const p = payload;
+          if (!p || typeof p.key !== "string" || p.key.trim() === "" || !/^[a-zA-Z0-9._-]+$/.test(p.key) || typeof p.currentValue !== "string") {
+            return;
+          }
+        }
+        if (type === "VISIBLE_KEYS_CHANGED") {
+          if (!Array.isArray(payload)) return;
+          const validKeys = payload.filter(
+            (k) => typeof k === "string" && /^[a-zA-Z0-9._-]+$/.test(k)
+          );
+          payload = validKeys;
+        }
+        if (type === "VISIBLE_TEXTS_CHANGED") {
+          if (!Array.isArray(payload)) return;
+          const texts = [];
+          for (const entry of payload) {
+            if (texts.length >= MAX_VISIBLE_TEXTS) break;
+            if (!entry || typeof entry !== "object") continue;
+            const { key, text } = entry;
+            if (typeof key !== "string" || !KEY_PATTERN.test(key) || typeof text !== "string") {
+              continue;
+            }
+            texts.push({ key, text: text.slice(0, MAX_VISIBLE_TEXT_LENGTH) });
+          }
+          payload = texts;
+        }
+        const message = {
+          source: "livelocale-client",
+          type,
+          payload
+        };
+        window.parent.postMessage(message, this.allowedOrigin);
+      }
+      /**
+       * Sets up a listener for messages originating from the parent Studio dashboard.
+       */
+      listenToParent(callback) {
+        if (typeof window === "undefined") {
+          return () => {
+          };
+        }
+        const listener = (event) => {
+          if (event.origin !== this.allowedOrigin) {
+            return;
+          }
+          if (event.data?.source !== "livelocale-studio") {
+            return;
+          }
+          const { type, payload } = event.data;
+          callback(type, payload);
+        };
+        window.addEventListener("message", listener);
+        return () => {
+          window.removeEventListener("message", listener);
+        };
+      }
+    };
   }
 });
 
@@ -204,6 +336,7 @@ var init_dom_interceptor = __esm({
     "use strict";
     init_watermark();
     init_env();
+    init_iframe_bridge();
     DOMInterceptor = class {
       onElementSelected;
       onVisibleKeysChanged;
@@ -238,6 +371,35 @@ var init_dom_interceptor = __esm({
         });
         return Array.from(keys);
       }
+      /**
+       * Returns one `{ key, text }` per translation key on the page, in document
+       * order, with the text it shows now (watermark removed, trimmed, cut to
+       * `MAX_VISIBLE_TEXT_LENGTH`). The first element carrying a key wins; its
+       * text is the first descendant text node whose watermark names that key.
+       * Elements without such a node, and blank texts, are skipped. At most
+       * `limit` entries are returned.
+       */
+      getVisibleTexts(limit = MAX_VISIBLE_TEXTS) {
+        const texts = [];
+        const seen = /* @__PURE__ */ new Set();
+        const elements = document.querySelectorAll("[data-i18n-key]");
+        for (const el of elements) {
+          if (texts.length >= limit) break;
+          const key = el.getAttribute("data-i18n-key");
+          if (!key || seen.has(key)) continue;
+          seen.add(key);
+          const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null);
+          let node;
+          while ((node = walker.nextNode()) !== null) {
+            const decoded = decodeKey(node.nodeValue ?? "");
+            if (decoded?.key !== key) continue;
+            const text = decoded.cleanText.trim().slice(0, MAX_VISIBLE_TEXT_LENGTH);
+            if (text) texts.push({ key, text });
+            break;
+          }
+        }
+        return texts;
+      }
       /**
        * Initializes the DOM event interceptors in development mode.
        * Also launches the watermark scanner and MutationObserver.
@@ -408,7 +570,7 @@ var init_dom_interceptor = __esm({
       }
       processTextNode(node) {
         const raw = node.nodeValue ?? "";
-        if (!raw.includes("\u200D")) return;
+        if (!raw.includes(WATERMARK_DELIMITER)) return;
         const decoded = decodeKey(raw);
         if (!decoded) return;
         const parent = node.parentElement;
@@ -481,10 +643,10 @@ var init_dom_interceptor = __esm({
         Object.defineProperty(proto, "value", {
           get() {
             const raw = original.get.call(this);
-            return sanitizeZeroWidth(raw);
+            return removeWatermarks(raw);
           },
           set(val) {
-            const clean = typeof val === "string" ? sanitizeZeroWidth(val) : val;
+            const clean = typeof val === "string" ? removeWatermarks(val) : val;
             original.set.call(this, clean);
           },
           configurable: true
@@ -495,7 +657,7 @@ var init_dom_interceptor = __esm({
         if (!form) return;
         const inputs = form.querySelectorAll("input, textarea");
         inputs.forEach((input) => {
-          const cleaned = sanitizeZeroWidth(input.value);
+          const cleaned = removeWatermarks(input.value);
           if (cleaned !== input.value) {
             const proto = input instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
             const descriptor = Object.getOwnPropertyDescriptor(proto, "value");
@@ -586,17 +748,17 @@ var init_dom_interceptor = __esm({
       };
       handleCopy = (event) => {
         const selection = window.getSelection()?.toString() || "";
-        if (selection.includes("\u200D") || selection.includes("\u200B") || selection.includes("\u200C")) {
-          const clean = sanitizeZeroWidth(selection);
+        if (containsWatermark(selection)) {
+          const clean = removeWatermarks(selection);
           event.clipboardData?.setData("text/plain", clean);
           event.preventDefault();
         }
       };
       handlePaste = (event) => {
         const text = event.clipboardData?.getData("text/plain") || "";
-        if (text.includes("\u200D") || text.includes("\u200B") || text.includes("\u200C")) {
+        if (containsWatermark(text)) {
           event.preventDefault();
-          const cleaned = sanitizeZeroWidth(text);
+          const cleaned = removeWatermarks(text);
           const targetInput = event.target;
           if (targetInput && "value" in targetInput) {
             const proto = targetInput instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
@@ -617,70 +779,6 @@ var init_dom_interceptor = __esm({
   }
 });
 
-// src/client/iframe-bridge.ts
-var IframeBridge;
-var init_iframe_bridge = __esm({
-  "src/client/iframe-bridge.ts"() {
-    "use strict";
-    IframeBridge = class {
-      allowedOrigin;
-      constructor(allowedOrigin) {
-        this.allowedOrigin = allowedOrigin;
-      }
-      /**
-       * Sends a message from the iframe client to the parent Studio window.
-       */
-      sendToParent(type, payload) {
-        if (typeof window === "undefined" || !window.parent || window.parent === window) {
-          return;
-        }
-        if (type === "ELEMENT_SELECTED") {
-          const p = payload;
-          if (!p || typeof p.key !== "string" || p.key.trim() === "" || !/^[a-zA-Z0-9._-]+$/.test(p.key) || typeof p.currentValue !== "string") {
-            return;
-          }
-        }
-        if (type === "VISIBLE_KEYS_CHANGED") {
-          if (!Array.isArray(payload)) return;
-          const validKeys = payload.filter(
-            (k) => typeof k === "string" && /^[a-zA-Z0-9._-]+$/.test(k)
-          );
-          payload = validKeys;
-        }
-        const message = {
-          source: "livelocale-client",
-          type,
-          payload
-        };
-        window.parent.postMessage(message, this.allowedOrigin);
-      }
-      /**
-       * Sets up a listener for messages originating from the parent Studio dashboard.
-       */
-      listenToParent(callback) {
-        if (typeof window === "undefined") {
-          return () => {
-          };
-        }
-        const listener = (event) => {
-          if (event.origin !== this.allowedOrigin) {
-            return;
-          }
-          if (event.data?.source !== "livelocale-studio") {
-            return;
-          }
-          const { type, payload } = event.data;
-          callback(type, payload);
-        };
-        window.addEventListener("message", listener);
-        return () => {
-          window.removeEventListener("message", listener);
-        };
-      }
-    };
-  }
-});
-
 // src/client/wrap.ts
 function extractKey(arg, keyPrefix) {
   if (typeof arg === "string") {
@@ -799,6 +897,7 @@ __export(client_exports, {
   decodeKey: () => decodeKey,
   encodeKey: () => encodeKey,
   hasWatermark: () => hasWatermark,
+  removeWatermarks: () => removeWatermarks,
   sanitizeZeroWidth: () => sanitizeZeroWidth,
   stripWatermark: () => stripWatermark,
   unwrap: () => unwrap,
@@ -850,8 +949,16 @@ var init_client = __esm({
     init_wrap();
     previewNodes = /* @__PURE__ */ new Map();
     if (typeof window !== "undefined" && isLiveLocaleEnabled() && window.parent !== window) {
-      const urlParams = new URLSearchParams(window.location.search);
-      const allowedOrigin = urlParams.get("livelocale-origin") || "http://localhost:3010";
+      let storage = null;
+      try {
+        storage = window.sessionStorage;
+      } catch {
+      }
+      const allowedOrigin = resolveStudioOrigin(
+        window.location.search,
+        storage,
+        readSameOriginParent(window)
+      );
       const bridge = new IframeBridge(allowedOrigin);
       const interceptor = new DOMInterceptor(
         (payload) => {
@@ -859,6 +966,7 @@ var init_client = __esm({
         },
         (keys) => {
           bridge.sendToParent("VISIBLE_KEYS_CHANGED", keys);
+          bridge.sendToParent("VISIBLE_TEXTS_CHANGED", interceptor.getVisibleTexts());
         }
       );
       interceptor.init();