@replohq/sandbox-runtime 1.7.10 → 1.7.12

package/select-mode/selectModeStore.js

@@ -0,0 +1,586 @@
+"use client";
+import { createShallowStore } from "../_vendor/replo-utils/react/zustand.mjs";
+import {
+  buildElementDescriptor,
+  buildSelector
+} from "./descriptor/elementDescriptor";
+import { getRepetitionSiblingElements } from "./hooks/useSiblingResolution";
+import {
+  getWebsiteBuilderRpc,
+  requestInlineTextEdit
+} from "./iframeRpcChannel";
+import { reportInlineEditFeedback } from "./inlineEditFeedback";
+import { getDocumentScrollOffset } from "./interactions/selectionGeometry";
+import { isTextEditableElement } from "./isTextEditableElement";
+import {
+  getAreaSelectionFrameSpecs,
+  getElementSelectionFrameSpecs
+} from "./selectionFrame";
+import { getConnectedSelectedElement, IDLE_SESSION } from "./selectModeSession";
+import {
+  isUserSourceLocation,
+  symbolicateSelectedElement
+} from "./symbolicate";
+import { createInlineTiptapEditor } from "./tiptapInlineEditor";
+import { useShallowStore } from "./useShallowStore";
+const EMPTY_ACTIVE_MARKS = {
+  bold: false,
+  italic: false,
+  underline: false,
+  strike: false
+};
+const FOCUS_STEAL_GUARD_MS = 1500;
+function isPendingEdit({
+  editId,
+  request
+}) {
+  return request?.status === "pending" && request.editId === editId;
+}
+function stopInlineEditRequest(request) {
+  if (!request) {
+    return;
+  }
+  if (request.status === "pending") {
+    clearTimeout(request.timeout);
+  }
+  request.stopFeedback();
+}
+function reportInlineEditingState({
+  activeMarks,
+  isInlineEditing,
+  request
+}) {
+  getWebsiteBuilderRpc()?.editorStateUpdate({
+    activeMarks,
+    isInlineEditing,
+    isInlineEditPending: request?.status === "pending"
+  });
+}
+const INITIAL_STATE = {
+  displayMode: "browse",
+  interactionSession: IDLE_SESSION,
+  selectionFrames: [],
+  isSelectionFrameEditing: false,
+  lastPointerClientPosition: null,
+  lastPostedHoverRect: void 0,
+  hoverSyncAnimationFrameId: null,
+  lastClick: null,
+  dragCandidates: [],
+  committedSelectionAtPointerDown: [],
+  dragAnimationFrameId: null,
+  editingPointerIds: /* @__PURE__ */ new Set(),
+  scrollSyncAnimationFrameId: null,
+  inlineEditRequest: null,
+  editor: null,
+  editingElement: null,
+  editId: null,
+  originalInnerHTML: null,
+  initialHTML: null,
+  isCommitting: false,
+  beginEditingAt: 0,
+  activeMarks: EMPTY_ACTIVE_MARKS
+};
+const selectModeStore = createShallowStore(
+  (set, get) => {
+    const setInlineEditRequest = ({
+      activeMarks,
+      isInlineEditing,
+      next
+    }) => {
+      stopInlineEditRequest(get().inlineEditRequest);
+      if (!next) {
+        set({ inlineEditRequest: null });
+        reportInlineEditingState({
+          activeMarks,
+          isInlineEditing,
+          request: null
+        });
+        return;
+      }
+      const assigned = {
+        ...next,
+        stopFeedback: reportInlineEditFeedback({
+          element: next.element,
+          status: next.status,
+          onDisconnected: () => {
+            const current = get().inlineEditRequest;
+            if (next.status === "pending") {
+              if (!isPendingEdit({ editId: next.editId, request: current })) {
+                return;
+              }
+            } else if (current?.element !== next.element) {
+              return;
+            }
+            setInlineEditRequest({
+              activeMarks: EMPTY_ACTIVE_MARKS,
+              isInlineEditing: false,
+              next: null
+            });
+          }
+        })
+      };
+      set({ inlineEditRequest: assigned });
+      reportInlineEditingState({
+        activeMarks,
+        isInlineEditing,
+        request: assigned
+      });
+    };
+    const destroyEditor = () => {
+      const { editor } = get();
+      editor?.destroy();
+      set({
+        editor: null,
+        editingElement: null,
+        editId: null,
+        originalInnerHTML: null,
+        initialHTML: null,
+        isCommitting: false,
+        isSelectionFrameEditing: false,
+        activeMarks: EMPTY_ACTIVE_MARKS
+      });
+      setInlineEditRequest({
+        activeMarks: EMPTY_ACTIVE_MARKS,
+        isInlineEditing: false,
+        next: null
+      });
+    };
+    const revertInlineEdit = () => {
+      const { editingElement, originalInnerHTML } = get();
+      destroyEditor();
+      if (editingElement && originalInnerHTML !== null) {
+        editingElement.innerHTML = originalInnerHTML;
+      }
+    };
+    const commitInlineEdit = () => {
+      const {
+        editor,
+        editingElement,
+        originalInnerHTML,
+        editId,
+        isCommitting,
+        initialHTML
+      } = get();
+      if (!editor || !editId || originalInnerHTML === null || isCommitting) {
+        return;
+      }
+      set({ isCommitting: true });
+      const committedHTML = editor.getHTML();
+      if (committedHTML === initialHTML) {
+        destroyEditor();
+        if (editingElement) {
+          editingElement.innerHTML = originalInnerHTML;
+        }
+        return;
+      }
+      getWebsiteBuilderRpc()?.textCommitted({
+        editId,
+        html: committedHTML,
+        json: editor.getJSON(),
+        originalInnerHTML
+      });
+      destroyEditor();
+      if (editingElement) {
+        editingElement.innerHTML = committedHTML;
+      }
+    };
+    const handleBlur = () => {
+      const { isCommitting, beginEditingAt, editor } = get();
+      if (isCommitting) {
+        return;
+      }
+      if (typeof document !== "undefined" && document.hasFocus()) {
+        commitInlineEdit();
+        return;
+      }
+      if (Date.now() - beginEditingAt < FOCUS_STEAL_GUARD_MS) {
+        editor?.focus();
+      }
+    };
+    const finishPendingEdit = ({
+      editId,
+      status
+    }) => {
+      const pending = get().inlineEditRequest;
+      if (pending?.status !== "pending" || pending.editId !== editId) {
+        return;
+      }
+      if (!pending.element.isConnected) {
+        setInlineEditRequest({
+          activeMarks: EMPTY_ACTIVE_MARKS,
+          isInlineEditing: false,
+          next: null
+        });
+        return;
+      }
+      setInlineEditRequest({
+        activeMarks: EMPTY_ACTIVE_MARKS,
+        isInlineEditing: false,
+        next: {
+          status,
+          element: pending.element
+        }
+      });
+    };
+    const resolveEditRequest = ({
+      editId,
+      allowed
+    }) => {
+      const pending = get().inlineEditRequest;
+      if (pending?.status !== "pending" || pending.editId !== editId) {
+        return;
+      }
+      if (!allowed) {
+        finishPendingEdit({ editId, status: "unavailable" });
+        return;
+      }
+      if (!pending.element.isConnected) {
+        setInlineEditRequest({
+          activeMarks: EMPTY_ACTIVE_MARKS,
+          isInlineEditing: false,
+          next: null
+        });
+        return;
+      }
+      stopInlineEditRequest(pending);
+      set({ inlineEditRequest: null });
+      const element = pending.element;
+      const originalInnerHTML = element.innerHTML;
+      const editor = createInlineTiptapEditor({
+        element,
+        content: originalInnerHTML,
+        onCommit: commitInlineEdit,
+        onEscape: revertInlineEdit,
+        onBlur: handleBlur,
+        onSelectionUpdate: (activeMarks) => {
+          set({ activeMarks });
+          reportInlineEditingState({
+            activeMarks,
+            isInlineEditing: true,
+            request: null
+          });
+        }
+      });
+      set({
+        editor,
+        editingElement: element,
+        editId,
+        originalInnerHTML,
+        initialHTML: editor.getHTML(),
+        beginEditingAt: Date.now(),
+        isSelectionFrameEditing: true,
+        activeMarks: EMPTY_ACTIVE_MARKS
+      });
+      editor.focusAndSelectAll();
+      reportInlineEditingState({
+        activeMarks: EMPTY_ACTIVE_MARKS,
+        isInlineEditing: true,
+        request: null
+      });
+    };
+    const resetInteractionSession = () => {
+      const session = get().interactionSession;
+      if (session.type === "drag" && session.hasExceededThreshold) {
+        getWebsiteBuilderRpc()?.dragRectUpdated({
+          dragRect: null,
+          selectionRects: []
+        });
+      }
+      const hoverFrameId = get().hoverSyncAnimationFrameId;
+      if (hoverFrameId !== null) {
+        cancelAnimationFrame(hoverFrameId);
+      }
+      const dragFrameId = get().dragAnimationFrameId;
+      if (dragFrameId !== null) {
+        cancelAnimationFrame(dragFrameId);
+      }
+      set({
+        interactionSession: IDLE_SESSION,
+        selectionFrames: [],
+        lastPostedHoverRect: void 0,
+        hoverSyncAnimationFrameId: null,
+        dragAnimationFrameId: null,
+        dragCandidates: []
+      });
+    };
+    return {
+      ...INITIAL_STATE,
+      actions: {
+        reset: () => {
+          const state = get();
+          stopInlineEditRequest(state.inlineEditRequest);
+          state.editor?.destroy();
+          if (state.hoverSyncAnimationFrameId !== null) {
+            cancelAnimationFrame(state.hoverSyncAnimationFrameId);
+          }
+          if (state.dragAnimationFrameId !== null) {
+            cancelAnimationFrame(state.dragAnimationFrameId);
+          }
+          if (state.scrollSyncAnimationFrameId !== null) {
+            cancelAnimationFrame(state.scrollSyncAnimationFrameId);
+          }
+          set({
+            ...INITIAL_STATE,
+            editingPointerIds: /* @__PURE__ */ new Set(),
+            actions: state.actions
+          });
+        },
+        setDisplayMode: (displayMode) => {
+          if (get().displayMode === "selection" && displayMode !== "selection") {
+            resetInteractionSession();
+            revertInlineEdit();
+          }
+          set({ displayMode });
+        },
+        setSelectionType: ({ selectionType, selectors }) => {
+          if (selectionType === "none") {
+            resetInteractionSession();
+            return;
+          }
+          const session = get().interactionSession;
+          if (selectionType !== "area" || !selectors || session.type !== "area") {
+            return;
+          }
+          const retainedSelectors = new Set(selectors);
+          const items = session.items.filter((item) => {
+            return item.data.kind !== "react-element" || retainedSelectors.has(item.data.selector);
+          });
+          if (items.length === session.items.length) {
+            return;
+          }
+          if (items.length === 0) {
+            resetInteractionSession();
+            return;
+          }
+          set({ interactionSession: { ...session, items } });
+          get().actions.showAreaSelectionFrames({
+            elements: items.map((item) => item.element),
+            scrollOffset: getDocumentScrollOffset()
+          });
+        },
+        setInteractionSession: (interactionSession) => {
+          set({ interactionSession });
+        },
+        resetInteractionSession,
+        postSelectedElementSnapshot: ({ clearMissing = false } = {}) => {
+          const { interactionSession } = get();
+          if (interactionSession.type !== "element") return true;
+          const element = getConnectedSelectedElement(interactionSession);
+          if (!element) {
+            if (!clearMissing) return false;
+            get().actions.setSelectionType({ selectionType: "none" });
+            getWebsiteBuilderRpc()?.areaSelected({
+              rect: interactionSession.data.rect,
+              items: []
+            });
+            return true;
+          }
+          const siblingElements = getRepetitionSiblingElements({ element });
+          const descriptor = buildElementDescriptor({
+            element,
+            clickPosition: interactionSession.clickPosition ?? (interactionSession.data.kind === "react-element" ? interactionSession.data.clickPosition : { x: 0, y: 0 }),
+            siblingSelectors: siblingElements.map(buildSelector)
+          });
+          if (descriptor.kind !== "react-element") return true;
+          const refreshedSession = {
+            ...interactionSession,
+            element,
+            siblingElements
+          };
+          set({ interactionSession: refreshedSession });
+          get().actions.showElementSelectionFrames({
+            elements: [element, ...siblingElements],
+            scrollOffset: getDocumentScrollOffset()
+          });
+          void symbolicateSelectedElement(descriptor).then((symbolicated) => {
+            if (get().interactionSession !== refreshedSession) return;
+            if (symbolicated.sourceLocation && !isUserSourceLocation(symbolicated.sourceLocation))
+              return;
+            set({
+              interactionSession: { ...refreshedSession, data: symbolicated }
+            });
+            getWebsiteBuilderRpc()?.elementSelected({ data: symbolicated });
+          });
+          return true;
+        },
+        showElementSelectionFrames: ({ elements, scrollOffset }) => {
+          set({
+            selectionFrames: getElementSelectionFrameSpecs({
+              elements,
+              scrollOffset
+            })
+          });
+        },
+        showAreaSelectionFrames: ({ elements, scrollOffset }) => {
+          set({
+            selectionFrames: getAreaSelectionFrameSpecs({
+              elements,
+              scrollOffset
+            })
+          });
+        },
+        hideSelectionFrames: () => {
+          set({ selectionFrames: [] });
+        },
+        setLastPointerClientPosition: (lastPointerClientPosition) => {
+          set({ lastPointerClientPosition });
+        },
+        setLastPostedHoverRect: (lastPostedHoverRect) => {
+          set({ lastPostedHoverRect });
+        },
+        resetHoverRectDedup: () => {
+          set({ lastPostedHoverRect: void 0 });
+        },
+        setHoverSyncAnimationFrameId: (hoverSyncAnimationFrameId) => {
+          set({ hoverSyncAnimationFrameId });
+        },
+        setLastClick: (lastClick) => {
+          set({ lastClick });
+        },
+        setDragCandidates: (dragCandidates) => {
+          set({ dragCandidates });
+        },
+        setCommittedSelectionAtPointerDown: (committedSelectionAtPointerDown) => {
+          set({ committedSelectionAtPointerDown });
+        },
+        setDragAnimationFrameId: (dragAnimationFrameId) => {
+          set({ dragAnimationFrameId });
+        },
+        setScrollSyncAnimationFrameId: (scrollSyncAnimationFrameId) => {
+          set({ scrollSyncAnimationFrameId });
+        },
+        beginEditing: ({ element, descriptorPromise }) => {
+          const { editingElement, inlineEditRequest } = get();
+          if (editingElement === element) {
+            return;
+          }
+          if (!isTextEditableElement(element)) {
+            return;
+          }
+          if (inlineEditRequest?.status === "pending" && inlineEditRequest.element === element) {
+            return;
+          }
+          if (editingElement) {
+            revertInlineEdit();
+          }
+          const editId = crypto.randomUUID();
+          const timeout = window.setTimeout(
+            () => finishPendingEdit({ editId, status: "failed" }),
+            5e3
+          );
+          setInlineEditRequest({
+            activeMarks: EMPTY_ACTIVE_MARKS,
+            isInlineEditing: false,
+            next: {
+              status: "pending",
+              editId,
+              element,
+              timeout
+            }
+          });
+          void descriptorPromise.then(async (descriptor) => {
+            if (!isPendingEdit({
+              editId,
+              request: get().inlineEditRequest
+            })) {
+              return;
+            }
+            if (!element.isConnected) {
+              setInlineEditRequest({
+                activeMarks: EMPTY_ACTIVE_MARKS,
+                isInlineEditing: false,
+                next: null
+              });
+              return;
+            }
+            if (descriptor.kind !== "react-element") {
+              finishPendingEdit({ editId, status: "unavailable" });
+              return;
+            }
+            get().actions.setInteractionSession({
+              type: "element",
+              element,
+              siblingElements: getRepetitionSiblingElements({ element }),
+              clickPosition: null,
+              data: descriptor
+            });
+            const symbolicated = await symbolicateSelectedElement(descriptor);
+            if (!isPendingEdit({
+              editId,
+              request: get().inlineEditRequest
+            })) {
+              return;
+            }
+            const { allowed } = await requestInlineTextEdit({
+              editId,
+              element: symbolicated
+            });
+            resolveEditRequest({ editId, allowed });
+          }).catch(() => {
+            if (get().editId === editId) {
+              revertInlineEdit();
+            } else {
+              finishPendingEdit({ editId, status: "failed" });
+            }
+          });
+        },
+        commitInlineEdit,
+        revertInlineEdit,
+        formatCommand: (command) => {
+          get().editor?.runFormatCommand(command);
+        },
+        dismissInlineEditRequest: () => {
+          if (!get().inlineEditRequest) {
+            return;
+          }
+          setInlineEditRequest({
+            activeMarks: EMPTY_ACTIVE_MARKS,
+            isInlineEditing: Boolean(get().editor),
+            next: null
+          });
+        }
+      }
+    };
+  }
+);
+function useSelectModeStore() {
+  return selectModeStore;
+}
+const useSelectModeStoreActions = () => {
+  return useShallowStore(useSelectModeStore(), (state) => state.actions);
+};
+const useDisplayMode = () => {
+  return useShallowStore(useSelectModeStore(), (state) => state.displayMode);
+};
+const useSelectionFrames = () => {
+  return useShallowStore(
+    useSelectModeStore(),
+    (state) => state.selectionFrames
+  );
+};
+const useIsSelectionFrameEditing = () => {
+  return useShallowStore(
+    useSelectModeStore(),
+    (state) => state.isSelectionFrameEditing
+  );
+};
+const useEditingElement = () => {
+  return useShallowStore(useSelectModeStore(), (state) => state.editingElement);
+};
+const useInteractionSession = () => {
+  return useShallowStore(
+    useSelectModeStore(),
+    (state) => state.interactionSession
+  );
+};
+export {
+  EMPTY_ACTIVE_MARKS,
+  selectModeStore,
+  useDisplayMode,
+  useEditingElement,
+  useInteractionSession,
+  useIsSelectionFrameEditing,
+  useSelectModeStore,
+  useSelectModeStoreActions,
+  useSelectionFrames
+};

package/select-mode/selectionFrame.d.ts

@@ -1,77 +1,28 @@
-/**
- * In-iframe selection frame renderer.
- *
- * Lives in the canopy iframe (not in agent-ui) because the previous
- * parent-side overlay had to be re-anchored on every scroll frame via
- * postMessage hop -> Zustand update -> React reconciliation, which
- * shows up as visible lag when the user scrolls quickly.
- *
- * By rendering directly inside the canopy iframe's document we get two
- * properties for free:
- *
- *  1. `position: absolute` + page coordinates means the document's own
- *     scroll naturally translates the frames — zero JavaScript per
- *     scroll frame, the browser composites them with the underlying page
- *     content.
- *  2. No bridge serialization: the only cost when selection commits is
- *     a handful of style writes on the frame nodes.
- *
- * A click resolves to one frame per repeated element; an area drag resolves
- * to one frame per captured element. The renderer keeps a pool of nodes under
- * a shared container and reconciles it on each call.
- *
- * The canopy iframe loads a customer page and doesn't include lattice /
- * tailwind, so styling is intentionally vanilla inline CSS rather than
- * Tailwind classes.
- */
-type SelectionFrameVariant = "element" | "area";
-type SelectionFramePageRect = {
+export declare const SELECTION_FRAMES_CONTAINER_ID = "replo-select-mode-selection-frames";
+export declare const SELECTION_FRAME_BORDER_HEX = "#c026d3";
+export declare const SELECTION_FRAME_EDITING_BORDER_HEX = "#e879f9";
+export type SelectionFrameVariant = "element" | "area";
+export type SelectionFramePageRect = {
     x: number;
     y: number;
     width: number;
     height: number;
 };
-type SelectionFrameSpec = {
+export type SelectionFrameSpec = {
     pageRect: SelectionFramePageRect;
     variant: SelectionFrameVariant;
 };
-/**
- * Toggle the brighter inline-edit border and re-color any frames already on
- * screen so the change is immediate, not deferred to the next redraw.
- */
-export declare function setSelectionFrameEditing(editing: boolean): void;
-/**
- * Shared body-level layer container for in-iframe editor overlays (selection
- * frames, annotation frames). Zero-size and pointer-transparent so it never
- * affects the page; children opt into pointer events individually.
- */
-export declare function getOrCreateFramesLayerContainer({ id, zIndex, }: {
-    id: string;
-    zIndex: number;
-}): HTMLDivElement | null;
-/**
- * Position selection frames at the given *page* coordinates, one node per
- * spec. Page coords don't shift during scroll, so the caller is free to
- * call this once at commit time and let the browser handle the rest of the
- * scroll lifetime. Reconciles the node pool against `frames.length` so group
- * updates reuse the existing nodes when the repetition count stays stable.
- */
-export declare function showSelectionFrames({ frames, }: {
-    frames: SelectionFrameSpec[];
-}): void;
-export declare function showElementSelectionFrames({ elements, scrollOffset, }: {
+export declare function getElementSelectionFrameSpecs({ elements, scrollOffset, }: {
     elements: Element[];
     scrollOffset: {
         left: number;
         top: number;
     };
-}): void;
-export declare function showAreaSelectionFrames({ elements, scrollOffset, }: {
+}): SelectionFrameSpec[];
+export declare function getAreaSelectionFrameSpecs({ elements, scrollOffset, }: {
     elements: Element[];
     scrollOffset: {
         left: number;
         top: number;
     };
-}): void;
-export declare function hideSelectionFrame(): void;
-export {};
+}): SelectionFrameSpec[];