@preprio/toolkit 0.5.0-rc.10 → 0.5.0-rc.12

package/dist/index.cjs

@@ -51,7 +51,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/version.ts
-var VERSION = "0.5.0-rc.10";
+var VERSION = "0.5.0-rc.12";
 
 // src/core/features.ts
 function isEnabled(config) {
@@ -427,6 +427,7 @@ function createIframeBridge(store, options = {}) {
   const onReferences = options.onReferences;
   const onAssets = options.onAssets;
   const onAllowNavigation = options.onAllowNavigation;
+  const onItemChanged = options.onItemChanged;
   let parentOrigin = null;
   const onKeyDown = (event) => {
     const key = event.key.toLowerCase();
@@ -517,6 +518,14 @@ function createIframeBridge(store, options = {}) {
         debug.warn("allowNavigation handler failed", error);
       }
     }
+    if (data?.event === "prepr:itemChanged") {
+      if (typeof data.itemId !== "string" || !data.itemId) return;
+      try {
+        onItemChanged?.(data.itemId);
+      } catch (error) {
+        debug.warn("itemChanged handler failed", error);
+      }
+    }
   };
   return {
     start() {
@@ -2664,6 +2673,7 @@ var ABSOLUTE_HTTP = /^https?:\/\//i;
 var SOURCE_URL_ATTRIBUTES = ["src", "data-src"];
 var SOURCE_SET_ATTRIBUTES = ["srcset", "data-srcset"];
 var ASSET_ATTR = "data-prepr-asset";
+var REMOVED_ATTR = "data-prepr-removed";
 var ASSET_SOURCE_ATTRIBUTES = [
   ...SOURCE_URL_ATTRIBUTES,
   ...SOURCE_SET_ATTRIBUTES
@@ -2673,7 +2683,8 @@ var TAG_ATTRIBUTES = [
   "data-prepr-id",
   "data-prepr-field",
   "data-prepr-entry-id",
-  ASSET_ATTR
+  ASSET_ATTR,
+  REMOVED_ATTR
 ];
 function decodeSegment(segment) {
   try {
@@ -2792,11 +2803,22 @@ function besideOtherItem(img, isCurrentItem) {
   return false;
 }
 function tagAssetImages(index, itemId, keys, options = {}) {
-  const { isCurrentItem } = options;
+  const { isCurrentItem, removed } = options;
+  let showsRemoved = false;
   for (const img of document.getElementsByTagName("img")) {
     const ours = img.hasAttribute(ASSET_ATTR);
-    if (!ours && img.hasAttribute("data-prepr-encoded")) continue;
-    const match = index.size ? matchAsset(img, index, keys) : void 0;
+    let match = index.size ? matchAsset(img, index, keys) : void 0;
+    let isRemoved = false;
+    if (!match && removed?.size) {
+      match = matchAsset(img, removed, keys);
+      isRemoved = match !== void 0;
+    }
+    if (!ours && img.hasAttribute("data-prepr-encoded")) {
+      const mark = isRemoved && (!isCurrentItem || isCurrentItem(img));
+      setIfChanged(img, REMOVED_ATTR, mark ? "" : null);
+      showsRemoved || (showsRemoved = mark);
+      continue;
+    }
     const asset = match && isCurrentItem && besideOtherItem(img, isCurrentItem) ? void 0 : match;
     if (!asset) {
       if (ours) untagAssetImage(img);
@@ -2807,10 +2829,14 @@ function tagAssetImages(index, itemId, keys, options = {}) {
     setIfChanged(img, "data-prepr-id", itemId);
     setIfChanged(img, "data-prepr-field", asset.field);
     setIfChanged(img, "data-prepr-entry-id", asset.entryId ?? null);
+    setIfChanged(img, REMOVED_ATTR, isRemoved ? "" : null);
+    showsRemoved || (showsRemoved = isRemoved);
   }
+  return showsRemoved;
 }
 function untagAssetImages() {
   document.querySelectorAll(`img[${ASSET_ATTR}]`).forEach(untagAssetImage);
+  document.querySelectorAll(`img[${REMOVED_ATTR}]`).forEach((img) => img.removeAttribute(REMOVED_ATTR));
 }
 
 // src/core/visual-editor/navigation-guard.ts
@@ -2980,12 +3006,19 @@ var debug8 = createScopedLogger("visual-editor");
 var ENCODED_SELECTOR2 = "[data-prepr-encoded]";
 var REFERENCE_ATTR = "data-prepr-reference";
 var REFERENCE_SELECTOR = `[${REFERENCE_ATTR}]`;
+var OTHER_ITEM_ATTR = "data-prepr-other-item";
+var OTHER_ITEM_SELECTOR = `[${OTHER_ITEM_ATTR}="on"],[${OTHER_ITEM_ATTR}="off"]`;
+var CHROME_SELECTOR = "header, footer, nav, [role=banner], [role=contentinfo], [role=navigation]";
+var SECTIONING_SELECTOR = "article, aside, main, nav, section";
+var PLAIN_HEADER_FOOTER = "header:not([role]), footer:not([role])";
 var CURSOR_STYLE_MARKER = "data-prepr-visual-editor";
-var CURSOR_STYLES = `${ENCODED_SELECTOR2}{cursor:pointer}html[data-prepr-ve-suspended] ${ENCODED_SELECTOR2}{cursor:auto}`;
+var REMOVED_STYLES = `img[${REMOVED_ATTR}]{opacity:.2!important;transition:opacity .2s ease}@media (prefers-reduced-motion:reduce){img[${REMOVED_ATTR}]{transition:none}}`;
+var CURSOR_STYLES = `${ENCODED_SELECTOR2}{cursor:pointer}html[data-prepr-ve-suspended] ${ENCODED_SELECTOR2}{cursor:auto}${REMOVED_STYLES}`;
 var SUSPENDED_ATTR = "data-prepr-ve-suspended";
 var FIND_RETRY_MS = 150;
 var FIND_RETRIES = 6;
 var MAX_CACHED_KEYS = 2e3;
+var SAVED_FADE_MS = 1e4;
 var LAYOUT_MUTATIONS = {
   childList: true,
   subtree: true,
@@ -3028,6 +3061,9 @@ function createVisualEditor(opts) {
   let guardEnabled = false;
   let assetIndex = /* @__PURE__ */ new Map();
   const assetKeys = /* @__PURE__ */ new Map();
+  const removedAssets = /* @__PURE__ */ new Map();
+  let saved = false;
+  let savedTimeout = null;
   const guard = createNavigationGuard({
     onBlocked: (href) => opts.onNavigationBlocked?.(href),
     showsEditedContent: () => showsEditedContent()
@@ -3059,10 +3095,26 @@ function createVisualEditor(opts) {
     }
     return null;
   };
+  const inSiteChrome = (el) => {
+    let chrome = el.closest(CHROME_SELECTOR);
+    while (chrome) {
+      if (!chrome.matches(PLAIN_HEADER_FOOTER) || !chrome.parentElement?.closest(SECTIONING_SELECTOR)) {
+        return true;
+      }
+      chrome = chrome.parentElement?.closest(CHROME_SELECTOR) ?? null;
+    }
+    return false;
+  };
+  const showsOtherItem = (el) => {
+    const choice = el.closest(OTHER_ITEM_SELECTOR);
+    if (choice) return choice.getAttribute(OTHER_ITEM_ATTR) === "on";
+    return !inSiteChrome(el);
+  };
   const itemKind = (el) => {
     if (isCurrentItem(el)) return "current";
     if (!references) return "other";
-    return linkedIdOf(el) ? "referenced" : null;
+    if (linkedIdOf(el)) return "referenced";
+    return showsOtherItem(el) ? "other" : null;
   };
   const referenceFieldOf = (el) => {
     const linked = linkedIdOf(el);
@@ -3135,6 +3187,7 @@ function createVisualEditor(opts) {
       }
       return;
     }
+    if (kind === "other" && (e2.ctrlKey || e2.metaKey || e2.shiftKey)) return;
     e2.preventDefault();
     e2.stopPropagation();
     const item = listItemIn(encoded, e2.target);
@@ -3142,11 +3195,13 @@ function createVisualEditor(opts) {
       select(item?.element ?? encoded, encoded, item?.index);
     const referenceField = kind === "referenced" ? referenceFieldOf(encoded) : void 0;
     const linkedId = kind === "referenced" ? linkedIdOf(encoded) : null;
+    const linkHref = kind === "other" ? leavingLinkHref(e2.target) : null;
     opts.onEdit({
       ...readEditPayload(encoded),
       ...linkedId && { id: linkedId },
       ...item && { block: item.index },
-      ...referenceField && { referenceField }
+      ...referenceField && { referenceField },
+      ...linkHref && { linkHref }
     });
   };
   const handleKey = (e2) => {
@@ -3207,15 +3262,32 @@ function createVisualEditor(opts) {
     const el = block !== void 0 ? nthListItem(found, block) ?? found : found;
     select(el, found, block);
   }
+  const hasAssets = () => assetIndex.size > 0 || removedAssets.size > 0;
   function tagAssets() {
     if (assetKeys.size > MAX_CACHED_KEYS) assetKeys.clear();
-    tagAssetImages(assetIndex, currentItemId, assetKeys, {
-      isCurrentItem: (el) => isCurrentItem(el)
+    const showsRemoved = tagAssetImages(assetIndex, currentItemId, assetKeys, {
+      isCurrentItem: (el) => isCurrentItem(el),
+      removed: removedAssets
     });
+    if (saved && !showsRemoved) forgetRemoved();
+  }
+  function forgetRemoved() {
+    saved = false;
+    if (savedTimeout) clearTimeout(savedTimeout);
+    savedTimeout = null;
+    if (!removedAssets.size) return;
+    removedAssets.clear();
+    if (running) tagAssets();
+  }
+  function itemSaved() {
+    if (!removedAssets.size) return;
+    saved = true;
+    if (savedTimeout) clearTimeout(savedTimeout);
+    savedTimeout = setTimeout(forgetRemoved, SAVED_FADE_MS);
   }
   const handleLayoutFrame = () => {
     mutationFrame = null;
-    if (assetIndex.size) tagAssets();
+    if (hasAssets()) tagAssets();
     reselect();
     const hovered = overlay.getHoverTarget();
     if (hovered && !hovered.isConnected) {
@@ -3227,7 +3299,7 @@ function createVisualEditor(opts) {
   };
   const handleMutations = () => {
     if (mutationFrame !== null) return;
-    if (!selection && !overlay.getHoverTarget() && !assetIndex.size) return;
+    if (!selection && !overlay.getHoverTarget() && !hasAssets()) return;
     mutationFrame = requestAnimationFrame(handleLayoutFrame);
   };
   function injectCursorStyles() {
@@ -3268,7 +3340,7 @@ function createVisualEditor(opts) {
     });
     mutationObserver = new MutationObserver(handleMutations);
     mutationObserver.observe(document.body, LAYOUT_MUTATIONS);
-    if (assetIndex.size) tagAssets();
+    if (hasAssets()) tagAssets();
     syncGuard();
     debug8.log("visual editor started");
   }
@@ -3344,18 +3416,24 @@ function createVisualEditor(opts) {
     });
   }
   function setCurrentItem(itemId, referenceList, componentIds) {
+    if (itemId !== currentItemId) forgetRemoved();
     currentItemId = itemId;
     if (referenceList) setReferences(referenceList, componentIds);
     else if (componentIds) ownComponents = new Set(componentIds);
-    if (running && assetIndex.size) tagAssets();
+    if (running && hasAssets()) tagAssets();
     const selected = overlay.getSelectedTarget();
     const owner = selected ? encodedFrom(selected) : null;
     if (owner && !isCurrentItem(owner)) clearSelection();
   }
   function setAssets(assets) {
-    const hadAssets = assetIndex.size > 0;
-    assetIndex = createAssetIndex(assets);
-    if (running && (hadAssets || assetIndex.size)) tagAssets();
+    const hadAssets = hasAssets();
+    const next = createAssetIndex(assets);
+    for (const [key, asset] of assetIndex) {
+      if (!next.has(key)) removedAssets.set(key, asset);
+    }
+    for (const key of next.keys()) removedAssets.delete(key);
+    assetIndex = next;
+    if (running && (hadAssets || hasAssets())) tagAssets();
   }
   function setReferences(referenceList, componentIds) {
     if (componentIds) ownComponents = new Set(componentIds);
@@ -3381,6 +3459,7 @@ function createVisualEditor(opts) {
     setCurrentItem,
     setReferences,
     setAssets,
+    itemSaved,
     setLocale,
     focusField,
     setNavigationGuard,
@@ -3467,7 +3546,8 @@ function createPreprPreview(opts = {}) {
     locale: contentLocale,
     block,
     entryId,
-    referenceField
+    referenceField,
+    linkHref
   }) => {
     const safeHref = href ? safeEditUrl(href) : null;
     if (href && !safeHref) {
@@ -3481,7 +3561,8 @@ function createPreprPreview(opts = {}) {
         locale: contentLocale,
         ...block !== void 0 && { block },
         ...entryId && { entryId },
-        ...referenceField && { referenceField }
+        ...referenceField && { referenceField },
+        ...linkHref && { linkHref }
       });
     } else if (safeHref) {
       window.open(safeHref, "_blank", "noopener,noreferrer");
@@ -3536,6 +3617,7 @@ function createPreprPreview(opts = {}) {
     },
     onAssets: (assets) => visualEditor?.setAssets(assets),
     onAllowNavigation: (href) => visualEditor?.allowNavigation(href),
+    onItemChanged: () => visualEditor?.itemSaved(),
     onReferences: (referencedIds, componentIds) => visualEditor?.setReferences(referencedIds, componentIds),
     // The editor selecting a field scrolls the matching element into view. The
     // lookup relies on the attributes the stega scan writes, so it finds
@@ -3702,8 +3784,32 @@ function shapeLike(template, incoming) {
   }
   return out;
 }
+function isAsset(value) {
+  return isPlainObject(value) && (typeof value.url === "string" || value.__typename === "Asset");
+}
+function hasId(list, entry) {
+  return entry._id !== void 0 && list.some((c2) => isPlainObject(c2) && c2._id === entry._id);
+}
+function isAssetValue(value) {
+  return Array.isArray(value) ? value.length > 0 && value.every(isAsset) : isAsset(value);
+}
+function keepRemovedAssets(current, next) {
+  const listed = /* @__PURE__ */ new Set();
+  for (const entry of next) {
+    if (isPlainObject(entry) && entry._id !== void 0) listed.add(entry._id);
+  }
+  let out = next;
+  current.forEach((entry, position) => {
+    if (!isPlainObject(entry) || entry._id === void 0) return;
+    if (listed.has(entry._id)) return;
+    if (out === next) out = [...next];
+    out.splice(Math.min(position, out.length), 0, entry);
+  });
+  return out;
+}
 function mergeStructured(current, incoming) {
   if (incoming === null || Array.isArray(incoming) && !incoming.length) {
+    if (isAssetValue(current)) return current;
     if (Array.isArray(current)) return current.length ? [] : current;
     return null;
   }
@@ -3711,13 +3817,18 @@ function mergeStructured(current, incoming) {
   if (current === null || current === void 0) return incoming;
   if (Array.isArray(current)) {
     const template = current.find(isPlainObject);
-    return list.map((entry) => {
+    const next = list.map((entry) => {
       const match = current.find(
         (c2) => isPlainObject(c2) && c2._id !== void 0 && c2._id === entry._id
       );
       if (isPlainObject(match)) return mergeObject(match, entry);
       return isPlainObject(template) ? shapeLike(template, entry) : entry;
     });
+    if (!isAssetValue(current) || list.some((entry) => !hasId(current, entry))) {
+      return next;
+    }
+    const kept = keepRemovedAssets(current, next);
+    return kept.length === current.length && kept.every((entry, i2) => entry === current[i2]) ? current : kept;
   }
   if (isPlainObject(current)) return mergeObject(current, list[0]);
   return current;

package/dist/index.d.cts

@@ -5,7 +5,7 @@ export { g as PreprEnvironment, h as PreprEventType, i as PreprFeatureConfig, j
  * Package version; must match package.json. Lives in its own leaf module so
  * core can import it without cycling through the barrel.
  */
-declare const VERSION = "0.5.0-rc.10";
+declare const VERSION = "0.5.0-rc.12";
 
 /**
  * Resolve a `PreprFeatures` bag to plain booleans, defaulting every omitted key
@@ -233,6 +233,11 @@ interface IframeBridgeOptions {
      * string; its scheme is not checked here.
      */
     onAllowNavigation?: (href: string) => void;
+    /**
+     * The editor saved the open item (`prepr:itemChanged`), with that item's
+     * id. The page shows stored content from its next render on.
+     */
+    onItemChanged?: (itemId: string) => void;
 }
 
 interface PreviewAttrsTarget {

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { g as PreprEnvironment, h as PreprEventType, i as PreprFeatureConfig, j
  * Package version; must match package.json. Lives in its own leaf module so
  * core can import it without cycling through the barrel.
  */
-declare const VERSION = "0.5.0-rc.10";
+declare const VERSION = "0.5.0-rc.12";
 
 /**
  * Resolve a `PreprFeatures` bag to plain booleans, defaulting every omitted key
@@ -233,6 +233,11 @@ interface IframeBridgeOptions {
      * string; its scheme is not checked here.
      */
     onAllowNavigation?: (href: string) => void;
+    /**
+     * The editor saved the open item (`prepr:itemChanged`), with that item's
+     * id. The page shows stored content from its next render on.
+     */
+    onItemChanged?: (itemId: string) => void;
 }
 
 interface PreviewAttrsTarget {

package/dist/index.js

@@ -18,7 +18,7 @@ import {
   setTrackingParam,
   stegaClean,
   trackEvent
-} from "./chunk-IDEC77LZ.js";
+} from "./chunk-M7FT7XXV.js";
 import {
   PreprError,
   extractAccessToken,
@@ -29,22 +29,22 @@ import {
   getPreprUUIDFromHeaders,
   getToolbarPropsFromHeaders,
   validatePreprToken
-} from "./chunk-TBBU3LDD.js";
+} from "./chunk-TJ7VALNA.js";
 import {
   VERSION,
   resolveFeatures
-} from "./chunk-F46GJS6Y.js";
+} from "./chunk-HVTNUCF7.js";
 import {
   createLiveBridge,
   createLiveStore
-} from "./chunk-IPMB32AZ.js";
-import "./chunk-URXSDJOU.js";
+} from "./chunk-LWUSRWFE.js";
+import "./chunk-H3AFUPYD.js";
 import {
   collectFields,
   normalizeQuery,
   parsePatchLog,
   readQueryDocument
-} from "./chunk-KD3GK6TO.js";
+} from "./chunk-CABGJW5X.js";
 import {
   createScopedLogger
 } from "./chunk-S3VT4UWM.js";

package/dist/{live-preview-DLXGXRE5.js → live-preview-SFBGATWC.js}

@@ -1,13 +1,13 @@
 import {
   createLiveBridge,
   createLiveStore
-} from "./chunk-IPMB32AZ.js";
-import "./chunk-URXSDJOU.js";
+} from "./chunk-LWUSRWFE.js";
+import "./chunk-H3AFUPYD.js";
 import {
   applyPatchLog,
   normalizeQuery,
   parsePatchLog
-} from "./chunk-KD3GK6TO.js";
+} from "./chunk-CABGJW5X.js";
 import "./chunk-S3VT4UWM.js";
 export {
   applyPatchLog,