@replohq/sandbox-runtime 1.7.12 → 1.8.0

package/select-mode/hooks/useOptimisticOverrides.js

@@ -1,6 +1,7 @@
 import { useCallback } from "react";
 import { buildGoogleFontsCssUrl, quoteFontFamily } from "../../_vendor/replo-utils/lib/fonts.mjs";
 import { buildSelector } from "../descriptor/elementDescriptor";
+import { createImagePreview } from "../imageOverridePreview";
 import {
   SELECT_MODE_OVERRIDE_ATTRIBUTE,
   SELECT_MODE_OVERRIDE_STYLE_ATTRIBUTE
@@ -10,6 +11,7 @@ const OVERRIDE_REGISTRATION_TIMEOUT_MS = 15e3;
 const SESSION_OUTCOME_RETENTION_MS = 6e4;
 const OVERRIDE_REGISTRY_KEY = "reploSelectOverrideRegistryV2";
 const SESSION_OUTCOME_REGISTRY_KEY = "reploSelectOverrideSessionOutcomesV2";
+const imagePreviews = /* @__PURE__ */ new Map();
 function getOverrideList() {
   const existing = Reflect.get(window, OVERRIDE_REGISTRY_KEY);
   if (Array.isArray(existing)) {
@@ -45,18 +47,12 @@ function getElementsForTargetMode({
     })
   ];
 }
-function isImageSourcePayload({
-  element,
-  payload
-}) {
-  return payload.kind === "attribute" && payload.name.toLowerCase() === "src" && element instanceof HTMLImageElement;
-}
 function getOriginalState({
   element,
   payload
 }) {
   if (payload.kind === "attribute") {
-    const names = isImageSourcePayload({ element, payload }) ? [payload.name, "srcset"] : [payload.name];
+    const names = [payload.name];
     return {
       kind: "attributes",
       values: names.map((name) => ({
@@ -95,14 +91,12 @@ function applyPayload({
   payload,
   token
 }) {
+  if (payload.kind === "image") return;
   if (payload.kind === "css") {
     addToken(element, token);
     return;
   }
   if (payload.kind === "attribute") {
-    if (isImageSourcePayload({ element, payload })) {
-      element.removeAttribute("srcset");
-    }
     element.setAttribute(payload.name, payload.value);
     return;
   }
@@ -207,6 +201,7 @@ function reapplyOverride({
   override,
   skipElement
 }) {
+  if (override.payload.kind === "image") return;
   for (const target of override.targets) {
     const element = resolveTarget(target);
     if (!element || skipElement && element.contains(skipElement)) {
@@ -222,6 +217,51 @@ function reapplyOverride({
     applyPayload({ element, payload: override.payload, token: override.token });
   }
 }
+function syncImagePreviews() {
+  const configurations = /* @__PURE__ */ new Map();
+  for (const override of getOverrideList()) {
+    if (override.payload.kind !== "image") continue;
+    for (const target of override.targets) {
+      const element = resolveTarget(target);
+      if (!(element instanceof HTMLImageElement)) continue;
+      const previous = configurations.get(element);
+      configurations.set(element, {
+        image: override.payload.image,
+        pending: !override.settled || Boolean(previous?.pending)
+      });
+    }
+  }
+  for (const [element, preview] of imagePreviews) {
+    if (configurations.has(element)) continue;
+    preview.dispose();
+    imagePreviews.delete(element);
+  }
+  const acknowledged = /* @__PURE__ */ new Set();
+  for (const [element, configuration] of configurations) {
+    let preview = imagePreviews.get(element);
+    if (!preview) {
+      preview = createImagePreview(element);
+      imagePreviews.set(element, preview);
+    }
+    if (!configuration.pending && preview.isPersisted(configuration.image)) {
+      preview.dispose();
+      imagePreviews.delete(element);
+      acknowledged.add(element);
+    } else {
+      preview.render(configuration.image);
+    }
+  }
+  setOverrideList(
+    getOverrideList().filter((entry) => {
+      if (entry.payload.kind !== "image") return true;
+      entry.targets = entry.targets.filter((target) => {
+        const element = resolveTarget(target);
+        return !element || !acknowledged.has(element);
+      });
+      return entry.targets.length > 0;
+    })
+  );
+}
 function removeOverride({
   editId,
   outcome
@@ -233,6 +273,16 @@ function removeOverride({
     return;
   }
   clearTimeout(override.registrationTimeout);
+  if (override.payload.kind === "image") {
+    override.settled = true;
+    setOverrideList(
+      getOverrideList().filter(
+        (entry) => entry !== override || outcome === "persisted"
+      )
+    );
+    syncImagePreviews();
+    return;
+  }
   getStyleElement(override.token)?.remove();
   for (const target of override.targets) {
     const element = resolveTarget(target);
@@ -279,6 +329,7 @@ function useOptimisticOverrides() {
       });
       const token = `override-${editId}`;
       const override = {
+        settled: false,
         editId,
         injectedFontFamily: null,
         payload,
@@ -286,7 +337,6 @@ function useOptimisticOverrides() {
           removeOverride({ editId, outcome: "failed" });
         }, OVERRIDE_REGISTRATION_TIMEOUT_MS),
         sessionId: null,
-        state: "live",
         targets: elements.map((element) => ({
           element,
           originalState: getOriginalState({ element, payload }),
@@ -297,6 +347,7 @@ function useOptimisticOverrides() {
       getOverrideList().push(override);
       installCssRule(override);
       reapplyOverride({ override, skipElement: null });
+      syncImagePreviews();
     },
     []
   );
@@ -305,6 +356,7 @@ function useOptimisticOverrides() {
       for (const override of getOverrideList()) {
         reapplyOverride({ override, skipElement });
       }
+      syncImagePreviews();
     },
     []
   );
@@ -317,7 +369,6 @@ function useOptimisticOverrides() {
     }
     clearTimeout(override.registrationTimeout);
     override.sessionId = sessionId;
-    override.state = "fired";
     const outcome = getSessionOutcomes().get(sessionId);
     if (outcome) {
       removeOverride({ editId, outcome });

package/select-mode/hooks/useSelectionInteractions.js

@@ -402,16 +402,7 @@ function useSelectionInteractions() {
       const scrollOffset = snapshot.type === "drag" ? snapshot.scrollOffset : getDocumentScrollOffset();
       const candidates = store().dragCandidates;
       resetDragState({ notifyParentDragCleared: false });
-      if (!dragStart || snapshot.type !== "drag") {
-        const targetElement = event.target;
-        if (!(targetElement instanceof Element)) {
-          return;
-        }
-        commitClickSelection({
-          targetElement,
-          pointerEvent: event,
-          candidates
-        });
+      if (snapshot.type !== "drag" || !dragStart) {
         return;
       }
       const resolvedDragCurrent = dragCurrent ?? dragStart;

package/select-mode/iframeRpcChannel.d.ts

@@ -1,8 +1,8 @@
 import type { SelectedElement } from "../_vendor/schemas/generated/selectMode";
 import type { IframeRpcChannelInputHandlers, IframeRpcChannelRemote } from "../_vendor/schemas/iframeRpcChannel";
-import { canopyToWebsiteBuilderMethodConfig, websiteBuilderToCanopyMethodConfig } from "../_vendor/schemas/selectModeIframeRpc";
-export type WebsiteBuilderRpcRemote = IframeRpcChannelRemote<typeof canopyToWebsiteBuilderMethodConfig>;
-type SelectModeParentMessagingHandlers = Omit<IframeRpcChannelInputHandlers<typeof websiteBuilderToCanopyMethodConfig>, "symbolicateSelectedElement" | "navigateToRoute">;
+import { previewIframeToWebsiteBuilderMethodConfig, websiteBuilderToPreviewIframeMethodConfig } from "../_vendor/schemas/selectModeIframeRpc";
+export type WebsiteBuilderRpcRemote = IframeRpcChannelRemote<typeof previewIframeToWebsiteBuilderMethodConfig>;
+type SelectModeParentMessagingHandlers = Omit<IframeRpcChannelInputHandlers<typeof websiteBuilderToPreviewIframeMethodConfig>, "symbolicateSelectedElement" | "navigateToRoute">;
 export declare function setNavigateToRouteHandler(handler: ((input: {
     pathname: string;
 }) => void) | null): void;
@@ -32,6 +32,20 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
                     lineHeight: import("zod").ZodNumber;
                 }, import("zod/v4/core").$strip>>;
                 outerHTML: import("zod").ZodString;
+                image: import("zod").ZodOptional<import("zod").ZodObject<{
+                    src: import("zod").ZodString;
+                    currentSrc: import("zod").ZodString;
+                    srcSet: import("zod").ZodString;
+                    sizes: import("zod").ZodString;
+                    previewUrl: import("zod").ZodNullable<import("zod").ZodString>;
+                    sources: import("zod").ZodArray<import("zod").ZodObject<{
+                        srcSet: import("zod").ZodString;
+                        sizes: import("zod").ZodString;
+                        media: import("zod").ZodString;
+                        type: import("zod").ZodString;
+                        previewUrl: import("zod").ZodNullable<import("zod").ZodString>;
+                    }, import("zod/v4/core").$strip>>;
+                }, import("zod/v4/core").$strip>>;
                 definedStyles: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodObject<{
                     property: import("zod").ZodString;
                     variant: import("zod").ZodNullable<import("zod").ZodObject<{
@@ -109,6 +123,20 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
                     lineHeight: import("zod").ZodNumber;
                 }, import("zod/v4/core").$strip>>;
                 outerHTML: import("zod").ZodString;
+                image: import("zod").ZodOptional<import("zod").ZodObject<{
+                    src: import("zod").ZodString;
+                    currentSrc: import("zod").ZodString;
+                    srcSet: import("zod").ZodString;
+                    sizes: import("zod").ZodString;
+                    previewUrl: import("zod").ZodNullable<import("zod").ZodString>;
+                    sources: import("zod").ZodArray<import("zod").ZodObject<{
+                        srcSet: import("zod").ZodString;
+                        sizes: import("zod").ZodString;
+                        media: import("zod").ZodString;
+                        type: import("zod").ZodString;
+                        previewUrl: import("zod").ZodNullable<import("zod").ZodString>;
+                    }, import("zod/v4/core").$strip>>;
+                }, import("zod/v4/core").$strip>>;
                 definedStyles: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodObject<{
                     property: import("zod").ZodString;
                     variant: import("zod").ZodNullable<import("zod").ZodObject<{
@@ -274,6 +302,20 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
                     lineHeight: import("zod").ZodNumber;
                 }, import("zod/v4/core").$strip>>;
                 outerHTML: import("zod").ZodString;
+                image: import("zod").ZodOptional<import("zod").ZodObject<{
+                    src: import("zod").ZodString;
+                    currentSrc: import("zod").ZodString;
+                    srcSet: import("zod").ZodString;
+                    sizes: import("zod").ZodString;
+                    previewUrl: import("zod").ZodNullable<import("zod").ZodString>;
+                    sources: import("zod").ZodArray<import("zod").ZodObject<{
+                        srcSet: import("zod").ZodString;
+                        sizes: import("zod").ZodString;
+                        media: import("zod").ZodString;
+                        type: import("zod").ZodString;
+                        previewUrl: import("zod").ZodNullable<import("zod").ZodString>;
+                    }, import("zod/v4/core").$strip>>;
+                }, import("zod/v4/core").$strip>>;
                 definedStyles: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodObject<{
                     property: import("zod").ZodString;
                     variant: import("zod").ZodNullable<import("zod").ZodObject<{

package/select-mode/iframeRpcChannel.js

@@ -3,10 +3,10 @@ import {
   createIframeRpcRemote
 } from "../_vendor/schemas/iframeRpcChannel.mjs";
 import {
-  canopyToWebsiteBuilderMethodConfig,
+  previewIframeToWebsiteBuilderMethodConfig,
   SELECT_MODE_IFRAME_RPC_CHANNEL_ID,
   SELECT_MODE_IFRAME_RPC_CHANNEL_VERSION,
-  websiteBuilderToCanopyMethodConfig
+  websiteBuilderToPreviewIframeMethodConfig
 } from "../_vendor/schemas/selectModeIframeRpc.mjs";
 import { symbolicateSelectedElement } from "./symbolicate";
 let messagingHandlers = null;
@@ -22,8 +22,8 @@ function createSelectModeIframeRpcChannel() {
     getTargetWindow: () => window.parent === window ? null : window.parent,
     targetOrigin: "*",
     isExpectedMessage: (event) => event.source === window.parent,
-    outgoingMethods: canopyToWebsiteBuilderMethodConfig,
-    incomingMethods: websiteBuilderToCanopyMethodConfig,
+    outgoingMethods: previewIframeToWebsiteBuilderMethodConfig,
+    incomingMethods: websiteBuilderToPreviewIframeMethodConfig,
     handlers: {
       setDisplayMode: (input) => {
         messagingHandlers?.setDisplayMode(input);

package/select-mode/imageOverridePreview.d.ts

@@ -0,0 +1,6 @@
+import type { SelectModeImage } from "../_vendor/schemas/generated/selectMode";
+export declare function createImagePreview(image: HTMLImageElement): {
+    render(config: SelectModeImage): void;
+    isPersisted(config: SelectModeImage): boolean;
+    dispose(): void;
+};

package/select-mode/imageOverridePreview.js

@@ -0,0 +1,77 @@
+import { getImageEditSnapshot } from "../_vendor/schemas/selectModeImage.mjs";
+import { getImageDescriptor, getPictureSources } from "./imageSources";
+function createImagePreview(image) {
+  const picture = document.createElement("picture");
+  picture.hidden = true;
+  picture.dataset.reploImageResolver = "true";
+  const resolver = document.createElement("img");
+  resolver.alt = "";
+  const style = document.createElement("style");
+  const token = crypto.randomUUID();
+  image.dataset.reploImagePreview = token;
+  document.head.append(style);
+  let configuration = "";
+  let disposed = false;
+  function paint() {
+    if (disposed) return;
+    const url = resolver.currentSrc || resolver.src;
+    if (!url) return;
+    const rule = `[data-replo-image-preview="${token}"] { content: url(${JSON.stringify(url)}) !important; }`;
+    if (style.textContent !== rule) style.textContent = rule;
+  }
+  resolver.addEventListener("load", paint);
+  return {
+    render(config) {
+      const next = JSON.stringify(config);
+      if (configuration !== next) {
+        configuration = next;
+        const originals = getPictureSources(image);
+        const sources = config.sources.map((source, index) => {
+          const original = originals.find((candidate) => {
+            return candidate.media.trim() === source.media && candidate.type === source.type;
+          }) ?? originals[index];
+          const node = document.createElement("source");
+          node.media = source.media;
+          node.type = resolveMetadata(source.type, original?.type);
+          node.srcset = resolveMetadata(source.srcSet, original?.srcset);
+          node.sizes = resolveMetadata(source.sizes, original?.sizes);
+          return node;
+        });
+        resolver.setAttribute(
+          "src",
+          resolveMetadata(config.src, image.getAttribute("src"))
+        );
+        resolver.setAttribute(
+          "srcset",
+          resolveMetadata(config.srcSet, image.getAttribute("srcset"))
+        );
+        resolver.setAttribute(
+          "sizes",
+          resolveMetadata(config.sizes, image.sizes)
+        );
+        picture.replaceChildren(...sources, resolver);
+        if (!picture.isConnected) document.body.append(picture);
+      }
+      paint();
+    },
+    isPersisted(config) {
+      return JSON.stringify(
+        getImageEditSnapshot(getImageDescriptor(image), image.baseURI)
+      ) === JSON.stringify(getImageEditSnapshot(config, image.baseURI));
+    },
+    dispose() {
+      disposed = true;
+      resolver.removeEventListener("load", paint);
+      picture.remove();
+      style.remove();
+      if (image.dataset.reploImagePreview === token)
+        delete image.dataset.reploImagePreview;
+    }
+  };
+}
+function resolveMetadata(value, original) {
+  return value === "[image metadata omitted]" ? original ?? "" : value;
+}
+export {
+  createImagePreview
+};

package/select-mode/imageSources.d.ts

@@ -0,0 +1,3 @@
+import type { SelectModeImage } from "../_vendor/schemas/generated/selectMode";
+export declare function getPictureSources(image: HTMLImageElement): HTMLSourceElement[];
+export declare function getImageDescriptor(element: Element): SelectModeImage | undefined;

package/select-mode/imageSources.js

@@ -0,0 +1,68 @@
+function getPictureSources(image) {
+  const parent = image.parentElement;
+  if (parent?.tagName !== "PICTURE") {
+    return [];
+  }
+  return Array.from(parent.children).filter(
+    (child) => {
+      return child instanceof HTMLSourceElement && Boolean(
+        child.compareDocumentPosition(image) & Node.DOCUMENT_POSITION_FOLLOWING
+      );
+    }
+  );
+}
+const MAX_IMAGE_METADATA_LENGTH = 2048;
+const MAX_PICTURE_SOURCES = 16;
+function boundedImageMetadata(value) {
+  if (value.length > MAX_IMAGE_METADATA_LENGTH || /data:/i.test(value)) {
+    return "[image metadata omitted]";
+  }
+  return value;
+}
+function getPreviewUrl({
+  src,
+  srcSet,
+  baseURI
+}) {
+  if (src.length > MAX_IMAGE_METADATA_LENGTH || srcSet.length > MAX_IMAGE_METADATA_LENGTH)
+    return null;
+  const candidate = src || srcSet.trim().split(/\s+/)[0]?.replace(/,+$/, "");
+  if (!candidate) {
+    return null;
+  }
+  try {
+    const url = new URL(candidate, baseURI);
+    return ["http:", "https:"].includes(url.protocol) ? url.href : null;
+  } catch {
+    return null;
+  }
+}
+function getImageDescriptor(element) {
+  if (!(element instanceof HTMLImageElement)) {
+    return void 0;
+  }
+  const src = element.getAttribute("src") ?? "";
+  const srcSet = element.getAttribute("srcset") ?? "";
+  return {
+    src: boundedImageMetadata(src),
+    srcSet: boundedImageMetadata(srcSet),
+    sizes: boundedImageMetadata(element.sizes),
+    currentSrc: boundedImageMetadata(element.currentSrc),
+    previewUrl: getPreviewUrl({ src, srcSet, baseURI: element.baseURI }),
+    sources: getPictureSources(element).filter((source) => source.media.length <= MAX_IMAGE_METADATA_LENGTH).slice(0, MAX_PICTURE_SOURCES).map((source) => ({
+      srcSet: boundedImageMetadata(source.srcset),
+      sizes: boundedImageMetadata(source.sizes),
+      media: source.media.trim(),
+      type: boundedImageMetadata(source.type),
+      previewUrl: getPreviewUrl({
+        src: "",
+        srcSet: source.srcset,
+        baseURI: source.baseURI
+      })
+    }))
+  };
+}
+export {
+  getImageDescriptor,
+  getPictureSources
+};

package/select-mode/selectModeStore.d.ts

@@ -1,25 +1,20 @@
-import type { DisplayMode, SelectableData, SelectModeBoundingRect, SelectModeFormatCommand, SelectModeSelectionType } from "../_vendor/schemas/generated/selectMode";
+import type { DisplayMode, SelectableData, SelectModeBoundingRect, SelectModeFormatCommand, SelectModeSelectionType, SelectModeTiptapActiveMarks } from "../_vendor/schemas/generated/selectMode";
 import type { InlineEditFeedback } from "../_vendor/schemas/generated/selectModeIframeRpc";
 import type { DragCandidate } from "./interactions/selectionGeometry";
 import type { SelectionFrameSpec } from "./selectionFrame";
 import type { SelectModeInteractionSession } from "./selectModeSession";
 import type { InlineTiptapEditor } from "./tiptapInlineEditor";
-export type ActiveMarks = {
-    bold: boolean;
-    italic: boolean;
-    underline: boolean;
-    strike: boolean;
-};
-export declare const EMPTY_ACTIVE_MARKS: ActiveMarks;
-type InlineEditRequest = {
+export declare const EMPTY_ACTIVE_MARKS: SelectModeTiptapActiveMarks;
+type InlineEditDraft = {
     status: "pending";
     editId: string;
     element: HTMLElement;
     timeout: number;
-    stopFeedback: () => void;
 } | {
     status: Exclude<InlineEditFeedback["status"], "pending">;
     element: HTMLElement;
+};
+type InlineEditRequest = InlineEditDraft & {
     stopFeedback: () => void;
 };
 type LastClick = {
@@ -52,7 +47,7 @@ interface SelectModeStoreState {
     initialHTML: string | null;
     isCommitting: boolean;
     beginEditingAt: number;
-    activeMarks: ActiveMarks;
+    activeMarks: SelectModeTiptapActiveMarks;
     actions: {
         reset: () => void;
         setDisplayMode: (displayMode: DisplayMode) => void;

package/select-mode/selectModeStore.js

@@ -12,10 +12,7 @@ import {
 import { reportInlineEditFeedback } from "./inlineEditFeedback";
 import { getDocumentScrollOffset } from "./interactions/selectionGeometry";
 import { isTextEditableElement } from "./isTextEditableElement";
-import {
-  getAreaSelectionFrameSpecs,
-  getElementSelectionFrameSpecs
-} from "./selectionFrame";
+import { getSelectionFrameSpecs } from "./selectionFrame";
 import { getConnectedSelectedElement, IDLE_SESSION } from "./selectModeSession";
 import {
   isUserSourceLocation,
@@ -405,17 +402,19 @@ const selectModeStore = createShallowStore(
         },
         showElementSelectionFrames: ({ elements, scrollOffset }) => {
           set({
-            selectionFrames: getElementSelectionFrameSpecs({
+            selectionFrames: getSelectionFrameSpecs({
               elements,
-              scrollOffset
+              scrollOffset,
+              variant: "element"
             })
           });
         },
         showAreaSelectionFrames: ({ elements, scrollOffset }) => {
           set({
-            selectionFrames: getAreaSelectionFrameSpecs({
+            selectionFrames: getSelectionFrameSpecs({
               elements,
-              scrollOffset
+              scrollOffset,
+              variant: "area"
             })
           });
         },

package/select-mode/selectionFrame.d.ts

@@ -12,17 +12,11 @@ export type SelectionFrameSpec = {
     pageRect: SelectionFramePageRect;
     variant: SelectionFrameVariant;
 };
-export declare function getElementSelectionFrameSpecs({ elements, scrollOffset, }: {
-    elements: Element[];
-    scrollOffset: {
-        left: number;
-        top: number;
-    };
-}): SelectionFrameSpec[];
-export declare function getAreaSelectionFrameSpecs({ elements, scrollOffset, }: {
+export declare function getSelectionFrameSpecs({ elements, scrollOffset, variant, }: {
     elements: Element[];
     scrollOffset: {
         left: number;
         top: number;
     };
+    variant: SelectionFrameVariant;
 }): SelectionFrameSpec[];

package/select-mode/selectionFrame.js

@@ -1,7 +1,7 @@
 const SELECTION_FRAMES_CONTAINER_ID = "replo-select-mode-selection-frames";
 const SELECTION_FRAME_BORDER_HEX = "#c026d3";
 const SELECTION_FRAME_EDITING_BORDER_HEX = "#e879f9";
-function getFrameSpecs({
+function getSelectionFrameSpecs({
   elements,
   scrollOffset,
   variant
@@ -19,22 +19,9 @@ function getFrameSpecs({
     };
   });
 }
-function getElementSelectionFrameSpecs({
-  elements,
-  scrollOffset
-}) {
-  return getFrameSpecs({ elements, scrollOffset, variant: "element" });
-}
-function getAreaSelectionFrameSpecs({
-  elements,
-  scrollOffset
-}) {
-  return getFrameSpecs({ elements, scrollOffset, variant: "area" });
-}
 export {
   SELECTION_FRAMES_CONTAINER_ID,
   SELECTION_FRAME_BORDER_HEX,
   SELECTION_FRAME_EDITING_BORDER_HEX,
-  getAreaSelectionFrameSpecs,
-  getElementSelectionFrameSpecs
+  getSelectionFrameSpecs
 };