@replohq/sandbox-runtime 1.7.10 → 1.7.11

package/select-mode/selectionFrame.js

@@ -1,164 +1,40 @@
-const FUCHSIA_HEX = "#c026d3";
-const EDITING_FUCHSIA_HEX = "#e879f9";
-const FRAMES_CONTAINER_ID = "replo-select-mode-selection-frames";
-let isEditing = false;
-function getFrameBorderHex() {
-  return isEditing ? EDITING_FUCHSIA_HEX : FUCHSIA_HEX;
-}
-function applyVariantStyle({
-  frame,
+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({
+  elements,
+  scrollOffset,
   variant
 }) {
-  frame.style.border = `2px solid ${getFrameBorderHex()}`;
-  frame.style.background = variant === "area" ? "rgba(192, 38, 211, 0.08)" : "transparent";
-}
-function setSelectionFrameEditing(editing) {
-  if (isEditing === editing) {
-    return;
-  }
-  isEditing = editing;
-  if (typeof document === "undefined") {
-    return;
-  }
-  const container = document.getElementById(FRAMES_CONTAINER_ID);
-  if (!(container instanceof HTMLDivElement)) {
-    return;
-  }
-  for (const child of container.children) {
-    if (child instanceof HTMLDivElement) {
-      child.style.borderColor = getFrameBorderHex();
-    }
-  }
-}
-function getOrCreateFramesLayerContainer({
-  id,
-  zIndex
-}) {
-  if (typeof document === "undefined") {
-    return null;
-  }
-  const existing = document.getElementById(id);
-  if (existing instanceof HTMLDivElement) {
-    return existing;
-  }
-  if (!document.body) {
-    return null;
-  }
-  const container = document.createElement("div");
-  container.id = id;
-  container.setAttribute("aria-hidden", "true");
-  container.style.cssText = [
-    "position: absolute",
-    "top: 0",
-    "left: 0",
-    "width: 0",
-    "height: 0",
-    "margin: 0",
-    "padding: 0",
-    "pointer-events: none",
-    `z-index: ${zIndex}`
-  ].join(";");
-  document.body.append(container);
-  return container;
-}
-function getOrCreateContainer() {
-  return getOrCreateFramesLayerContainer({
-    id: FRAMES_CONTAINER_ID,
-    zIndex: 2147483646
+  return elements.map((element) => {
+    const rect = element.getBoundingClientRect();
+    return {
+      variant,
+      pageRect: {
+        x: rect.left + scrollOffset.left,
+        y: rect.top + scrollOffset.top,
+        width: rect.width,
+        height: rect.height
+      }
+    };
   });
 }
-function createFrameNode() {
-  const frame = document.createElement("div");
-  frame.setAttribute("aria-hidden", "true");
-  frame.style.cssText = [
-    "position: absolute",
-    "top: 0",
-    "left: 0",
-    "box-sizing: border-box",
-    "border-radius: 2px",
-    "pointer-events: none",
-    "margin: 0",
-    "padding: 0"
-  ].join(";");
-  return frame;
-}
-function showSelectionFrames({
-  frames
-}) {
-  const container = getOrCreateContainer();
-  if (!container) {
-    return;
-  }
-  while (container.childElementCount > frames.length) {
-    container.lastElementChild?.remove();
-  }
-  while (container.childElementCount < frames.length) {
-    container.append(createFrameNode());
-  }
-  frames.forEach((spec, index) => {
-    const frame = container.children[index];
-    if (!(frame instanceof HTMLDivElement)) {
-      return;
-    }
-    applyVariantStyle({ frame, variant: spec.variant });
-    frame.style.left = `${spec.pageRect.x}px`;
-    frame.style.top = `${spec.pageRect.y}px`;
-    frame.style.width = `${spec.pageRect.width}px`;
-    frame.style.height = `${spec.pageRect.height}px`;
-  });
-}
-function showElementSelectionFrames({
+function getElementSelectionFrameSpecs({
   elements,
   scrollOffset
 }) {
-  showSelectionFrames({
-    frames: elements.map((element) => {
-      const rect = element.getBoundingClientRect();
-      return {
-        variant: "element",
-        pageRect: {
-          x: rect.left + scrollOffset.left,
-          y: rect.top + scrollOffset.top,
-          width: rect.width,
-          height: rect.height
-        }
-      };
-    })
-  });
+  return getFrameSpecs({ elements, scrollOffset, variant: "element" });
 }
-function showAreaSelectionFrames({
+function getAreaSelectionFrameSpecs({
   elements,
   scrollOffset
 }) {
-  showSelectionFrames({
-    frames: elements.map((element) => {
-      const rect = element.getBoundingClientRect();
-      return {
-        variant: "area",
-        pageRect: {
-          x: rect.left + scrollOffset.left,
-          y: rect.top + scrollOffset.top,
-          width: rect.width,
-          height: rect.height
-        }
-      };
-    })
-  });
-}
-function hideSelectionFrame() {
-  if (typeof document === "undefined") {
-    return;
-  }
-  const container = document.getElementById(FRAMES_CONTAINER_ID);
-  if (container instanceof HTMLDivElement) {
-    container.replaceChildren();
-  }
+  return getFrameSpecs({ elements, scrollOffset, variant: "area" });
 }
 export {
-  getOrCreateFramesLayerContainer,
-  hideSelectionFrame,
-  setSelectionFrameEditing,
-  showAreaSelectionFrames,
-  showElementSelectionFrames,
-  showSelectionFrames
+  SELECTION_FRAMES_CONTAINER_ID,
+  SELECTION_FRAME_BORDER_HEX,
+  SELECTION_FRAME_EDITING_BORDER_HEX,
+  getAreaSelectionFrameSpecs,
+  getElementSelectionFrameSpecs
 };

package/select-mode/symbolicate.js

@@ -47,6 +47,10 @@ function normalizeFilePathForSymbolicator(filePath) {
   let normalized = filePath;
   if (normalized.startsWith("about://React/Server/")) {
     normalized = normalized.slice("about://React/Server/".length);
+    try {
+      normalized = decodeURI(normalized);
+    } catch {
+    }
   }
   normalized = normalized.replace(/\?\d+$/, "");
   return rewriteBrowserChunkUrlToDistPath(normalized);

package/select-mode/tiptapInlineEditor.js

@@ -1,4 +1,4 @@
-import { Editor, Mark } from "@tiptap/core";
+import { Editor, Mark, Node } from "@tiptap/core";
 import Bold from "@tiptap/extension-bold";
 import Document from "@tiptap/extension-document";
 import Italic from "@tiptap/extension-italic";
@@ -8,6 +8,20 @@ import Underline from "@tiptap/extension-underline";
 const InlineDocument = Document.extend({
   content: "inline*"
 });
+const InlineBreak = Node.create({
+  name: "hardBreak",
+  inline: true,
+  group: "inline",
+  selectable: false,
+  parseHTML: () => [{ tag: "br" }],
+  renderHTML: () => ["br"],
+  renderText: () => "\n",
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => this.editor.commands.insertContent({ type: this.name })
+    };
+  }
+});
 const InlineLink = Mark.create({
   name: "link",
   inclusive: false,
@@ -51,6 +65,7 @@ function createInlineTiptapEditor({
     extensions: [
       InlineDocument,
       Text,
+      InlineBreak,
       Bold,
       Italic,
       Underline,

package/select-mode/hooks/useCrosshairCursor.d.ts

@@ -1,10 +0,0 @@
-import type { DisplayMode } from "../../_vendor/schemas/generated/selectMode";
-/**
- * Forces a crosshair cursor + disables text selection / drag while the iframe
- * is in `selection` mode. We inject a `<style>` tag into the iframe document
- * (rather than toggling a class on `<html>`) so that the `!important` rule
- * wins against any per-element cursor styling on the page being edited.
- */
-export declare function useCrosshairCursor({ displayMode, }: {
-    displayMode: DisplayMode;
-}): void;

package/select-mode/hooks/useCrosshairCursor.js

@@ -1,23 +0,0 @@
-import { useEffect } from "react";
-function useCrosshairCursor({
-  displayMode
-}) {
-  useEffect(() => {
-    if (displayMode !== "selection") {
-      return;
-    }
-    const styleElement = document.createElement("style");
-    styleElement.textContent = `
-      * { cursor: crosshair !important; user-select: none !important; -webkit-user-drag: none !important; }
-      [data-select-mode-inline-editor][contenteditable="true"],
-      [data-select-mode-inline-editor][contenteditable="true"] * { cursor: text !important; }
-    `;
-    document.head.append(styleElement);
-    return () => {
-      styleElement.remove();
-    };
-  }, [displayMode]);
-}
-export {
-  useCrosshairCursor
-};

package/select-mode/hooks/useEditModeStateMachine.d.ts

@@ -1,16 +0,0 @@
-import type { MutableRefObject } from "react";
-import type { DisplayMode, SelectableData, SelectModeFormatCommand } from "../../_vendor/schemas/generated/selectMode";
-import type { SelectModeInteractionSession } from "../selectModeSession";
-export declare function isTextEditableElement(element: Element): element is HTMLElement;
-export declare function useEditModeStateMachine({ displayMode, interactionSessionRef, }: {
-    displayMode: DisplayMode;
-    interactionSessionRef: MutableRefObject<SelectModeInteractionSession>;
-}): {
-    beginEditing: ({ element, descriptorPromise, }: {
-        element: Element;
-        descriptorPromise: Promise<SelectableData>;
-    }) => void;
-    editingElementRef: import("react").RefObject<HTMLElement | null>;
-    formatCommand: (command: SelectModeFormatCommand) => void;
-    revert: () => void;
-};

package/select-mode/hooks/useEditModeStateMachine.js

@@ -1,228 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-import {
-  getWebsiteBuilderRpc,
-  requestInlineTextEdit
-} from "../iframeRpcChannel";
-import { setSelectionFrameEditing } from "../selectionFrame";
-import { symbolicateSelectedElement } from "../symbolicate";
-import { createInlineTiptapEditor } from "../tiptapInlineEditor";
-import { getRepetitionSiblingElements } from "./useSiblingResolution";
-const EMPTY_ACTIVE_MARKS = {
-  bold: false,
-  italic: false,
-  underline: false,
-  strike: false
-};
-function postEditorState({
-  activeMarks,
-  isEditing
-}) {
-  getWebsiteBuilderRpc()?.editorStateUpdate({ activeMarks, isEditing });
-}
-function isTextEditableElement(element) {
-  const tagName = element.tagName.toLowerCase();
-  return element instanceof HTMLElement && Boolean(element.textContent?.trim()) && ![
-    "input",
-    "textarea",
-    "select",
-    "option",
-    "img",
-    "video",
-    "canvas"
-  ].includes(tagName);
-}
-const FOCUS_STEAL_GUARD_MS = 1500;
-function useEditModeStateMachine({
-  displayMode,
-  interactionSessionRef
-}) {
-  const editorRef = useRef(null);
-  const editingElementRef = useRef(null);
-  const editIdRef = useRef(null);
-  const pendingEditRef = useRef(null);
-  const originalInnerHTMLRef = useRef(null);
-  const initialHTMLRef = useRef(null);
-  const isCommittingRef = useRef(false);
-  const beginEditingAtRef = useRef(0);
-  const destroyEditor = useCallback(() => {
-    editorRef.current?.destroy();
-    editorRef.current = null;
-    editingElementRef.current = null;
-    editIdRef.current = null;
-    if (pendingEditRef.current) {
-      clearTimeout(pendingEditRef.current.timeout);
-      pendingEditRef.current = null;
-    }
-    originalInnerHTMLRef.current = null;
-    initialHTMLRef.current = null;
-    isCommittingRef.current = false;
-    setSelectionFrameEditing(false);
-    postEditorState({ activeMarks: EMPTY_ACTIVE_MARKS, isEditing: false });
-  }, []);
-  const commit = useCallback(() => {
-    const editor = editorRef.current;
-    const editingElement = editingElementRef.current;
-    const originalInnerHTML = originalInnerHTMLRef.current;
-    const editId = editIdRef.current;
-    if (!editor || !editId || originalInnerHTML === null || isCommittingRef.current) {
-      return;
-    }
-    isCommittingRef.current = true;
-    const committedHTML = editor.getHTML();
-    if (committedHTML === initialHTMLRef.current) {
-      destroyEditor();
-      if (editingElement) {
-        editingElement.innerHTML = originalInnerHTML;
-      }
-      return;
-    }
-    const committedJSON = editor.getJSON();
-    getWebsiteBuilderRpc()?.textCommitted({
-      editId,
-      html: committedHTML,
-      json: committedJSON,
-      originalInnerHTML
-    });
-    destroyEditor();
-    if (editingElement) {
-      editingElement.innerHTML = committedHTML;
-    }
-  }, [destroyEditor]);
-  const revert = useCallback(() => {
-    const editingElement = editingElementRef.current;
-    const originalInnerHTML = originalInnerHTMLRef.current;
-    destroyEditor();
-    if (editingElement && originalInnerHTML !== null) {
-      editingElement.innerHTML = originalInnerHTML;
-    }
-  }, [destroyEditor]);
-  const handleBlur = useCallback(() => {
-    if (isCommittingRef.current) {
-      return;
-    }
-    if (typeof document !== "undefined" && document.hasFocus()) {
-      commit();
-      return;
-    }
-    if (Date.now() - beginEditingAtRef.current < FOCUS_STEAL_GUARD_MS) {
-      editorRef.current?.focus();
-    }
-  }, [commit]);
-  const formatCommand = useCallback((command) => {
-    editorRef.current?.runFormatCommand(command);
-  }, []);
-  const clearPendingEdit = useCallback((editId) => {
-    if (pendingEditRef.current?.editId !== editId) {
-      return;
-    }
-    clearTimeout(pendingEditRef.current.timeout);
-    pendingEditRef.current = null;
-  }, []);
-  const resolveEditRequest = useCallback(
-    ({ editId, allowed }) => {
-      const pendingEdit = pendingEditRef.current;
-      if (!pendingEdit || pendingEdit.editId !== editId) {
-        return;
-      }
-      clearTimeout(pendingEdit.timeout);
-      pendingEditRef.current = null;
-      if (!allowed || !pendingEdit.element.isConnected) {
-        return;
-      }
-      const element = pendingEdit.element;
-      const originalInnerHTML = element.innerHTML;
-      editingElementRef.current = element;
-      editIdRef.current = editId;
-      originalInnerHTMLRef.current = originalInnerHTML;
-      editorRef.current = createInlineTiptapEditor({
-        element,
-        content: originalInnerHTML,
-        onCommit: commit,
-        onEscape: revert,
-        onBlur: handleBlur,
-        onSelectionUpdate: (activeMarks) => {
-          postEditorState({ activeMarks, isEditing: true });
-        }
-      });
-      initialHTMLRef.current = editorRef.current.getHTML();
-      beginEditingAtRef.current = Date.now();
-      editorRef.current.focusAndSelectAll();
-      setSelectionFrameEditing(true);
-      postEditorState({ activeMarks: EMPTY_ACTIVE_MARKS, isEditing: true });
-    },
-    [commit, handleBlur, revert]
-  );
-  const beginEditing = useCallback(
-    ({
-      element,
-      descriptorPromise
-    }) => {
-      if (editingElementRef.current === element) {
-        return;
-      }
-      if (!isTextEditableElement(element)) {
-        return;
-      }
-      if (pendingEditRef.current?.element === element) {
-        return;
-      }
-      void descriptorPromise.then((descriptor) => {
-        if (descriptor.kind !== "react-element" || !element.isConnected) {
-          return;
-        }
-        interactionSessionRef.current = {
-          type: "element",
-          element,
-          siblingElements: getRepetitionSiblingElements({ element }),
-          clickPosition: null,
-          data: descriptor
-        };
-        const editId = crypto.randomUUID();
-        if (pendingEditRef.current) {
-          clearTimeout(pendingEditRef.current.timeout);
-        }
-        const timeout = window.setTimeout(() => {
-          clearPendingEdit(editId);
-        }, 5e3);
-        pendingEditRef.current = { editId, element, timeout };
-        void symbolicateSelectedElement(descriptor).then(
-          (symbolicated) => {
-            if (pendingEditRef.current?.editId !== editId) {
-              return;
-            }
-            void requestInlineTextEdit({
-              editId,
-              element: symbolicated
-            }).then(
-              ({ allowed }) => {
-                resolveEditRequest({ editId, allowed });
-              },
-              () => {
-                resolveEditRequest({ editId, allowed: false });
-              }
-            );
-          },
-          () => {
-            clearPendingEdit(editId);
-          }
-        );
-      });
-    },
-    [clearPendingEdit, interactionSessionRef, resolveEditRequest]
-  );
-  useEffect(() => {
-    if (displayMode !== "selection") {
-      revert();
-    }
-  }, [displayMode, revert]);
-  return {
-    beginEditing,
-    editingElementRef,
-    formatCommand,
-    revert
-  };
-}
-export {
-  isTextEditableElement,
-  useEditModeStateMachine
-};

package/select-mode/hooks/useSelectModeController.d.ts

@@ -1,11 +0,0 @@
-import type { DisplayMode, SelectModeSelectionType } from "../../_vendor/schemas/generated/selectMode";
-import type { SelectModeInteractionSession } from "../selectModeSession";
-export declare function useSelectModeController(): {
-    displayMode: DisplayMode;
-    interactionSessionRef: import("react").RefObject<SelectModeInteractionSession>;
-    setDisplayMode: (nextDisplayMode: DisplayMode) => void;
-    setSelectionType: ({ selectionType, selectors, }: {
-        selectionType: SelectModeSelectionType;
-        selectors?: string[];
-    }) => void;
-};

package/select-mode/hooks/useSelectModeController.js

@@ -1,72 +0,0 @@
-import { useCallback, useRef } from "react";
-import { displayModeStore, useDisplayMode } from "../displayModeStore";
-import { getWebsiteBuilderRpc } from "../iframeRpcChannel";
-import { getDocumentScrollOffset } from "../interactions/selectionGeometry";
-import { hideSelectionFrame, showAreaSelectionFrames } from "../selectionFrame";
-import { IDLE_SESSION } from "../selectModeSession";
-import { resetHoverRectDedup } from "./useSelectionHover";
-function resetInteractionSession({
-  interactionSessionRef
-}) {
-  const currentSession = interactionSessionRef.current;
-  if (currentSession.type === "drag" && currentSession.hasExceededThreshold) {
-    getWebsiteBuilderRpc()?.dragRectUpdated({
-      dragRect: null,
-      selectionRects: []
-    });
-  }
-  hideSelectionFrame();
-  resetHoverRectDedup();
-  interactionSessionRef.current = IDLE_SESSION;
-}
-function useSelectModeController() {
-  const displayMode = useDisplayMode();
-  const interactionSessionRef = useRef(IDLE_SESSION);
-  const setSelectionType = useCallback(
-    ({
-      selectionType,
-      selectors
-    }) => {
-      if (selectionType === "none") {
-        resetInteractionSession({ interactionSessionRef });
-        return;
-      }
-      const session = interactionSessionRef.current;
-      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({ interactionSessionRef });
-        return;
-      }
-      interactionSessionRef.current = { ...session, items };
-      showAreaSelectionFrames({
-        elements: items.map((item) => item.element),
-        scrollOffset: getDocumentScrollOffset()
-      });
-    },
-    []
-  );
-  const setDisplayMode = useCallback((nextDisplayMode) => {
-    if (displayModeStore.getSnapshot() === "selection" && nextDisplayMode !== "selection") {
-      resetInteractionSession({ interactionSessionRef });
-    }
-    displayModeStore.setDisplayMode(nextDisplayMode);
-  }, []);
-  return {
-    displayMode,
-    interactionSessionRef,
-    setDisplayMode,
-    setSelectionType
-  };
-}
-export {
-  useSelectModeController
-};