@8ux-co/eelzap 0.10.2 → 0.11.1

package/dist/preview.js

@@ -4,9 +4,12 @@ import {
   EDITOR_MESSAGE_TYPES,
   FIELD_KEY_RE,
   MAX_ANCHORS,
+  MAX_ANCHOR_NTH,
   MAX_DRAFT_ROUTE_LENGTH,
   MAX_EMAIL_LENGTH,
   MAX_LABELS,
+  MAX_MARKS,
+  MAX_MARK_LABEL,
   MAX_MESSAGE_BYTES,
   MAX_PINS,
   MAX_QUOTE_CONTEXT,
@@ -32,6 +35,7 @@ import {
   emptyDropStats,
   envelope,
   findAnchorElement,
+  isDiffMark,
   isDomAnchor,
   isDraftRoutePath,
   isFieldKey,
@@ -60,7 +64,7 @@ import {
   textQuoteFor,
   utf8Length,
   zapAttrs
-} from "./chunk-T6S3S5RH.js";
+} from "./chunk-G2JAAZKS.js";
 import {
   NEST_PRODUCTION_ORIGIN,
   PENDING_STORAGE_KEY,
@@ -77,7 +81,7 @@ var isLocalHost = (hostname) => LOCAL_ORIGIN.test(`http://${hostname}`);
 
 // src/preview/site/load.ts
 function loadChunk(name, _base) {
-  return name === "signin" ? import("./signin-XOGBCGBL.js") : import("./suggest-KLS6B7AM.js");
+  return name === "signin" ? import("./signin-XOGBCGBL.js") : import("./suggest-FDD4MBRP.js");
 }
 
 // src/preview/site/boot.ts
@@ -213,6 +217,121 @@ function createPageBridge(options) {
   };
 }
 
+// src/preview/scroll.ts
+var round = (value) => Math.round(value * 1e4) / 1e4;
+function createScrollSync(win, doc, index, post) {
+  let enabled = false;
+  let frame = null;
+  let last = "";
+  let placed = null;
+  let target = null;
+  const at = () => `${Math.round(win.scrollX)},${Math.round(win.scrollY)}`;
+  const range = (size, view) => Math.max(0, size - view);
+  const nextFrame = (fn) => typeof win.requestAnimationFrame === "function" ? win.requestAnimationFrame(fn) : win.setTimeout(fn, 16);
+  function fieldRef(tagged) {
+    const { recordRef, fieldKey } = tagged;
+    return { recordRef, fieldKey, nth: index.byField(recordRef, fieldKey).indexOf(tagged) };
+  }
+  function topOf(ref) {
+    const element = ref && index.byField(ref.recordRef, ref.fieldKey)[ref.nth]?.element;
+    return element?.isConnected ? element.getBoundingClientRect().top : void 0;
+  }
+  function measure() {
+    const root = doc.documentElement;
+    const fraction = (pos, size, view) => {
+      const max = range(size, view);
+      return max > 0 ? round(Math.min(1, Math.max(0, pos / max))) : 0;
+    };
+    const payload = { y: fraction(win.scrollY, root.scrollHeight, win.innerHeight) };
+    if (range(root.scrollWidth, win.innerWidth) > 0) {
+      payload.x = fraction(win.scrollX, root.scrollWidth, win.innerWidth);
+    }
+    let above = null;
+    let below = null;
+    let up = -Infinity;
+    let down = Infinity;
+    for (const tagged of index.elements) {
+      const { top, height } = tagged.element.getBoundingClientRect();
+      if (height <= 0) continue;
+      if (top > 0) {
+        if (top < down) {
+          below = tagged;
+          down = top;
+        }
+      } else if (top > up) {
+        above = tagged;
+        up = top;
+      }
+    }
+    const anchor = above ?? (down < win.innerHeight ? below : null);
+    if (anchor) {
+      payload.anchor = { ...fieldRef(anchor), offset: Math.round(above ? up : down) };
+      if (above && below) {
+        payload.next = fieldRef(below);
+        payload.progress = round(-up / (down - up));
+      }
+    }
+    return payload;
+  }
+  function flush() {
+    frame = null;
+    if (!enabled) return;
+    if (at() === placed) return;
+    placed = null;
+    const payload = measure();
+    const key = JSON.stringify(payload);
+    if (key === last) return;
+    last = key;
+    post(payload);
+  }
+  function apply() {
+    const next = target;
+    target = null;
+    if (!next) return;
+    const root = doc.documentElement;
+    const { y, x, anchor, progress } = next;
+    let top = y * range(root.scrollHeight, win.innerHeight);
+    const from = topOf(anchor);
+    const to = topOf(next.next);
+    if (from !== void 0) {
+      top = win.scrollY + from + (to !== void 0 && progress !== void 0 ? progress * (to - from) : -anchor.offset);
+    }
+    const left = x === void 0 ? win.scrollX : x * range(root.scrollWidth, win.innerWidth);
+    try {
+      win.scrollTo({ top, left, behavior: "instant" });
+    } catch {
+      win.scrollTo(left, top);
+    }
+    placed = at();
+    last = JSON.stringify(measure());
+  }
+  const onScroll = () => {
+    if (!enabled || frame !== null) return;
+    frame = nextFrame(flush);
+  };
+  return {
+    setEnabled(next) {
+      if (next === enabled) return;
+      enabled = next;
+      if (next) {
+        win.addEventListener("scroll", onScroll, { passive: true });
+        last = "";
+        placed = null;
+        flush();
+      } else win.removeEventListener("scroll", onScroll);
+    },
+    scrollTo(next) {
+      if (!target) nextFrame(apply);
+      target = next;
+    },
+    destroy() {
+      enabled = false;
+      target = null;
+      win.removeEventListener("scroll", onScroll);
+    }
+  };
+}
+
 // src/preview/sanitize.ts
 var RICH_TEXT_ALLOWED_TAGS = /* @__PURE__ */ new Set([
   "p",
@@ -383,6 +502,7 @@ var ValueApplier = class {
   }
   write(tagged, locale, value) {
     if (tagged.locale && tagged.locale !== locale) return false;
+    if (tagged.siteRenders) return false;
     const element = tagged.element;
     if (tagged.textNode) {
       const text2 = plainText(value);
@@ -419,7 +539,7 @@ var ValueApplier = class {
 function plainText(value) {
   if (value === null || typeof value !== "object") return value === null ? "" : String(value);
   const v = value;
-  return v.text ?? v.url ?? v.email ?? null;
+  return v.text ?? v.label ?? v.url ?? v.email ?? null;
 }
 function writeLink(element, value, base) {
   const email = "email" in value;
@@ -472,7 +592,7 @@ function writeImage(element, image, base) {
 }
 
 // src/preview/runtime.ts
-var CLIENT_VERSION = "0.10.0";
+var CLIENT_VERSION = "0.11.1";
 var MAX_PROBLEM_REPORTS = 20;
 function startRuntime(config, options = {}) {
   const win = options.win ?? window;
@@ -525,6 +645,13 @@ function startRuntime(config, options = {}) {
       config.onMessage?.(message);
     }
   });
+  const scroll = createScrollSync(win, doc, index, (payload) => bridge.post("zap:scroll", payload));
+  let marks = [];
+  const drawMarks = () => overlay.setMarks(
+    marks.flatMap(
+      ({ recordRef, fieldKey, tone, label, active }) => index.byField(recordRef, fieldKey).map(({ element }) => ({ element, tone, label, active: !!active }))
+    )
+  );
   function handle(message) {
     switch (message.type) {
       case "zap:hello": {
@@ -572,6 +699,16 @@ function startRuntime(config, options = {}) {
         overlay.setPins(pins);
         return;
       }
+      case "zap:scroll-sync":
+        scroll.setEnabled(message.payload.enabled);
+        return;
+      case "zap:scroll-to":
+        scroll.scrollTo(message.payload);
+        return;
+      case "zap:marks":
+        marks = message.payload.marks;
+        drawMarks();
+        return;
     }
   }
   function report(why, force = false) {
@@ -608,6 +745,7 @@ function startRuntime(config, options = {}) {
   function refresh(page = true) {
     if (!scan(page)) return;
     values.reapply();
+    if (marks.length) drawMarks();
     report(page ? "mutation" : "reapply");
     const url = config.pageUrl();
     if (url !== lastUrl) {
@@ -667,6 +805,7 @@ function startRuntime(config, options = {}) {
     destroy() {
       for (const id of retries) win.clearTimeout(id);
       stopObserving();
+      scroll.destroy();
       win.removeEventListener("pagehide", onPageHide);
       win.removeEventListener("pageshow", onPageShow);
       overlay.destroy();
@@ -796,8 +935,13 @@ function initZap(options, runtimeOptions = {}) {
             if (token) store?.setItem(PREVIEW_TOKEN_STORAGE_KEY, token);
             else forgetPreviewToken(win);
             if (token && last && last !== token && draftRoute) {
-              const query = new URLSearchParams({ token, path: win.location.pathname });
-              void win.fetch(`${draftRoute}?${query}`, { credentials: "same-origin", redirect: "manual" }).catch(() => {
+              const body = new URLSearchParams({ token, path: win.location.pathname });
+              void win.fetch(draftRoute, {
+                method: "POST",
+                body,
+                credentials: "same-origin",
+                redirect: "manual"
+              }).catch(() => {
               });
             }
           } catch {
@@ -867,9 +1011,12 @@ export {
   EDITOR_MESSAGE_TYPES,
   FIELD_KEY_RE,
   MAX_ANCHORS,
+  MAX_ANCHOR_NTH,
   MAX_DRAFT_ROUTE_LENGTH,
   MAX_EMAIL_LENGTH,
   MAX_LABELS,
+  MAX_MARKS,
+  MAX_MARK_LABEL,
   MAX_MESSAGE_BYTES,
   MAX_PINS,
   MAX_QUOTE_CONTEXT,
@@ -906,6 +1053,7 @@ export {
   findAnchorElement,
   getPreviewToken,
   initZap,
+  isDiffMark,
   isDomAnchor,
   isDraftRoutePath,
   isFieldKey,