fix: sync web preview URL without iframe reloads (#394)

Author: itayadler

.changeset/webpreview-url-navigation-sync.md

@@ -0,0 +1,5 @@
+---
+"@frontman/client": patch
+---
+
+Fix web preview URL bar syncing so iframe link navigations update the displayed URL without forcing iframe reloads. The URL input is now editable and supports Enter-to-navigate while preserving in-iframe navigation state.

CLAUDE.md

@@ -41,6 +41,13 @@ cd .worktrees/feature/my-feature
 - Story files: `*.story.res` (co-located with components)
 - Prefer `switch` over `if/else` — use pattern matching for control flow, even for simple boolean/option checks
 
+## Raw JS vs ReScript
+
+- Prefer ReScript/WebAPI bindings and typed externals over `%raw` JavaScript.
+- Use `%raw` only when there is no practical typed binding or the browser API cannot be expressed cleanly in ReScript.
+- Keep `%raw` blocks minimal and isolated to small interop boundaries; keep business logic and event handling in ReScript.
+- For DOM/browser events, prefer typed ReScript handlers plus small externals for missing fields instead of full raw listener implementations.
+
 ## Error Handling Philosophy
 
 **Crash early and obviously. Never swallow exceptions.**

libs/client/src/Client__Hooks.res

@@ -276,94 +276,71 @@ module Scroll = {
   }
 }
 
-// Helper to safely get iframe contentWindow - returns None for cross-origin iframes
-// Cross-origin iframes throw SecurityError when accessing contentWindow properties
-let getIframeWindowSafe: WebAPI.DOMAPI.element => option<WebAPI.DOMAPI.window> = %raw(`
-  function(iframe) {
-    try {
-      var win = iframe.contentWindow;
-      // Verify we have access by reading location (throws if cross-origin)
-      if (win && win.location && win.location.href) {
-        return win;
-      }
-      return undefined;
-    } catch (e) {
-      // Expected for cross-origin iframes - log for debugging
-      console.debug('[useIFrameLocation] Cross-origin iframe access denied:', e.message);
-      return undefined;
+module NavigateEvent = {
+  type destination
+  type t
+
+  @get external destination: t => destination = "destination"
+  @get external url: destination => string = "url"
+}
+
+let getIframeWindowSafe = (iframe: WebAPI.DOMAPI.element): option<WebAPI.DOMAPI.window> => {
+  let iframeElement = iframe->Obj.magic
+  try {
+    switch WebAPI.HTMLIFrameElement.contentWindow(iframeElement)->Null.toOption {
+    | None => None
+    | Some(iframeWindow) =>
+      ignore(iframeWindow->WebAPI.Window.location->WebAPI.Location.href)
+      Some(iframeWindow)
     }
+  } catch {
+  | _ => None
   }
-`)
+}
 
-let useIFrameLocation = (~iframeRef: Nullable.t<WebAPI.DOMAPI.element>) => {
+let useIFrameLocation = (~iframeElement: option<WebAPI.DOMAPI.element>, ~attachmentKey: int) => {
   let (location, setLocation) = React.useState(() => None)
 
   React.useEffect(() => {
-    let iframeWindow =
-      iframeRef
-      ->Nullable.toOption
-      ->Option.flatMap(iframe => getIframeWindowSafe(iframe))
-
-    switch iframeWindow {
-    | Some(iframeWindow) =>
-      // Get initial location (safe since getIframeWindowSafe verified access)
-      let initialLocation = Some(iframeWindow->WebAPI.Window.location->WebAPI.Location.href)
-      setLocation(_ => initialLocation)
-
-      // Listen for navigation events
-      let onPopState = _ev => {
-        let currentLocation = Some(iframeWindow->WebAPI.Window.location->WebAPI.Location.href)
-        setLocation(_ => currentLocation)
-      }
-      let onNavigation = ev => {
-        let url = ev["destination"]["url"]
-        let currentLocation = Some(url)
-        setLocation(_ => currentLocation)
-      }
-
-      // Check if Navigation API is supported (not available in Firefox/Safari)
-      let navigationSupported = %raw(`typeof iframeWindow.navigation !== 'undefined'`)
-
-      WebAPI.Window.addEventListener(
-        iframeWindow,
-        Custom("popstate"),
-        onPopState,
-        ~options={capture: false},
-      )
+    switch iframeElement {
+    | None =>
+      setLocation(_ => None)
+      None
+    | Some(iframe) =>
+      switch getIframeWindowSafe(iframe) {
+      | None =>
+        setLocation(_ => None)
+        None
+      | Some(iframeWindow) =>
+        let initialLocation = Some(iframeWindow->WebAPI.Window.location->WebAPI.Location.href)
+        setLocation(_ => initialLocation)
+
+        let onNavigation = (ev: WebAPI.EventAPI.event) => {
+          let navigateEvent: NavigateEvent.t = ev->Obj.magic
+          let destinationUrl = navigateEvent->NavigateEvent.destination->NavigateEvent.url
+          setLocation(_ => Some(destinationUrl))
+        }
 
-      // Only use Navigation API if supported
-      if navigationSupported {
         WebAPI.Navigation.addEventListener(
           iframeWindow.navigation,
           Custom("navigate"),
           onNavigation,
           ~options={capture: false},
         )
-      }
-
-      Some(
-        () => {
-          WebAPI.Window.removeEventListener(
-            iframeWindow,
-            Custom("popstate"),
-            onPopState,
-            ~options={capture: false},
-          )
 
-          // Only remove Navigation API listener if it was added
-          if navigationSupported {
+        Some(
+          () => {
             WebAPI.Navigation.removeEventListener(
               iframeWindow.navigation,
               Custom("navigate"),
               onNavigation,
               ~options={capture: false},
             )
-          }
-        },
-      )
-    | None => None
+          },
+        )
+      }
     }
-  }, (iframeRef, setLocation))
+  }, (iframeElement, attachmentKey))
 
   location
 }

libs/client/src/webpreview/Client__WebPreview.res

@@ -7,6 +7,9 @@
 module Nav = Client__WebPreview__Nav
 module RadixUI__Icons = Bindings__RadixUI__Icons
 
+@send external locationAssign: ('a, string) => unit = "assign"
+@send external blur: (Dom.element) => unit = "blur"
+
 module BackButton = {
   @react.component
   let make = (~onClick: unit => unit) => {
@@ -128,7 +131,6 @@ let useContainerSize = (ref: React.ref<Nullable.t<Dom.element>>): (int, int) =>
 
 @react.component
 let make = () => {
-  // Use primitive selectors for efficient comparison (strings compare by value)
   let currentTaskClientId = Client__State.useSelector(Client__State.Selectors.currentTaskClientId)
   let isNewTask = Client__State.useSelector(Client__State.Selectors.isNewTask)
   let persistedTasks = Client__State.useSelector(Client__State.Selectors.tasks)
@@ -143,12 +145,51 @@ let make = () => {
   let containerRef: React.ref<Nullable.t<Dom.element>> = React.useRef(Nullable.null)
   let (availableWidth, availableHeight) = useContainerSize(containerRef)
 
-  // Persist device mode changes to localStorage
   React.useEffect(() => {
     Client__DeviceMode.persist(deviceMode, deviceOrientation)
     None
   }, (deviceMode, deviceOrientation))
 
+  let (editableUrl, setEditableUrl) = React.useState(() => previewUrl)
+  let (isEditingUrl, setIsEditingUrl) = React.useState(() => false)
+
+  let displayedUrl = switch isEditingUrl {
+  | true => editableUrl
+  | false => previewUrl
+  }
+
+  let handleUrlChange = (e: ReactEvent.Form.t) => {
+    let value = (e->ReactEvent.Form.target)["value"]
+    setEditableUrl(_ => value)
+  }
+
+  let handleUrlKeyDown = (e: ReactEvent.Keyboard.t) => {
+    switch ReactEvent.Keyboard.key(e) {
+    | "Enter" =>
+      let url = editableUrl
+      previewFrame.contentWindow->Option.forEach(contentWindow => {
+        contentWindow.location->locationAssign(url)
+      })
+      Client__State.Actions.setPreviewUrl(~url)
+      Client__State.Actions.setSelectedElement(~selectedElement=None)
+      let target: Dom.element = ReactEvent.Keyboard.target(e)->Obj.magic
+      target->blur
+    | "Escape" =>
+      let target: Dom.element = ReactEvent.Keyboard.target(e)->Obj.magic
+      target->blur
+    | _ => ()
+    }
+  }
+
+  let handleUrlFocus = (_e: ReactEvent.Focus.t) => {
+    setIsEditingUrl(_ => true)
+    setEditableUrl(_ => previewUrl)
+  }
+
+  let handleUrlBlur = (_e: ReactEvent.Focus.t) => {
+    setIsEditingUrl(_ => false)
+  }
+
   let handleBack = () => {
     previewFrame.contentWindow->Option.forEach(contentWindow => {
       WebAPI.History.back(contentWindow.history)
@@ -182,20 +223,25 @@ let make = () => {
 
   let deviceModeActive = Client__DeviceMode.isActive(deviceMode)
   let effectiveDims = Client__DeviceMode.getEffectiveDimensions(deviceMode, deviceOrientation)
-  
+
     <Nav.Container>
       <Nav.Navigation>
         <Nav.TrafficLights />
         <BackButton onClick={handleBack} />
         <ForwardButton onClick={handleForward} />
         <ReloadButton onClick={handleReload} />
-        <Nav.UrlInput value={previewUrl} />
+        <Nav.UrlInput
+          value={displayedUrl}
+          onChange={handleUrlChange}
+          onKeyDown={handleUrlKeyDown}
+          onFocus={handleUrlFocus}
+          onBlur={handleUrlBlur}
+        />
         <DeviceModeToggle isActive={deviceModeActive} onClick={handleToggleDeviceMode} />
         <SelectElement onClick={handleSelect} isSelecting={webPreviewIsSelecting} />
         <OpenInNewWindow onClick={handleOpenInNewTab} />
       </Nav.Navigation>
 
-      // Device bar (only when device mode is active)
       <Client__WebPreview__DeviceBar deviceMode orientation=deviceOrientation />
 
       <div