From 8ab2e228eb8462a3d4c4f390ba685c45913070a9 Mon Sep 17 00:00:00 2001
From: "Joey@macstudio" <4296411@qq.com>
Date: Wed, 15 Jul 2026 08:15:28 +0800
Subject: [PATCH] fix: sync fullscreen routes

---
 src/components/app-shell.tsx         |  2 ++
 src/components/renderer/renderer.tsx | 11 ++++-----
 tests/e2e/test-runtime/urls.test.ts  | 35 +++++++++++++++++-----------
 3 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/src/components/app-shell.tsx b/src/components/app-shell.tsx
index 2e63a4a8c..4155e15fa 100644
--- a/src/components/app-shell.tsx
+++ b/src/components/app-shell.tsx
@@ -9,8 +9,10 @@ export default function AppShell() {
     <>
       <Routes>
         <Route path="/" element={<App showExample={false} />} />
+        <Route path="/view" element={<App showExample={false} />} />
         <Route path="/reset" element={<Reset />} />
         <Route path="/edited" element={<App showExample={false} />} />
+        <Route path="/edited/view" element={<App showExample={false} />} />
         <Route path="/gist/:id/:filename" element={<App showExample={false} />} />
         <Route path="/gist/:id/:filename/view" element={<App showExample={false} />} />
         <Route path="/gist/:id/:revision/:filename" element={<App showExample={false} />} />
diff --git a/src/components/renderer/renderer.tsx b/src/components/renderer/renderer.tsx
index 494963277..49242ce2c 100644
--- a/src/components/renderer/renderer.tsx
+++ b/src/components/renderer/renderer.tsx
@@ -126,17 +126,14 @@ export default function Renderer(props: RendererProps) {
 
   const openPortal = useCallback(() => {
     const pathname = location.pathname;
-    if (pathname !== '/' && pathname !== '/edited' && !pathname.endsWith('/view')) {
-      navigate(pathname + '/view', {replace: false});
+    if (!pathname.endsWith('/view')) {
+      navigate(pathname === '/' ? '/view' : pathname + '/view', {replace: false});
     }
   }, [location.pathname, navigate]);
 
   const closePortal = useCallback(() => {
-    const pathname = location.pathname
-      .split('/')
-      .filter((e) => e !== 'view')
-      .join('/');
-    if (pathname !== '/' && pathname !== '/edited') {
+    const pathname = location.pathname.replace(/\/view$/, '') || '/';
+    if (pathname !== location.pathname) {
       navigate(pathname, {replace: false});
     }
   }, [location.pathname, navigate]);
diff --git a/tests/e2e/test-runtime/urls.test.ts b/tests/e2e/test-runtime/urls.test.ts
index e748fc622..ce24944be 100644
--- a/tests/e2e/test-runtime/urls.test.ts
+++ b/tests/e2e/test-runtime/urls.test.ts
@@ -55,21 +55,30 @@ test.describe('URL behavior', () => {
     expect(page.url()).toMatch(/#\/custom\/vega-lite$/);
   });
 
-  // Need to implement this in the editor first: https://github.com/vega/editor/issues/1508
-  // test('fullscreen appends /view to the current route and is removed on exit', async ({page}) => {
-  //   await homePage.typeInEditor(vlSpec);
-  //   await homePage.waitForVisualizationUpdate();
+  test('fullscreen appends /view to the root route and removes it on exit', async ({page}) => {
+    await page.locator('.fullscreen-open').click();
+    await homePage.waitForStableUI();
+
+    expect(page.url()).toMatch(/#\/view$/);
+
+    await page.getByRole('button', {name: 'Edit Visualization'}).click();
+    await homePage.waitForStableUI();
+
+    expect(page.url()).toMatch(/#\/$/);
+  });
 
-  //   await page.locator('.fullscreen-open').click();
-  //   await homePage.waitForStableUI();
+  test('fullscreen appends /view to the edited route and removes it on exit', async ({page}) => {
+    await homePage.typeInEditor(vlSpec);
+    await homePage.waitForVisualizationUpdate();
+
+    await page.locator('.fullscreen-open').click();
+    await homePage.waitForStableUI();
 
-  //   const urlAfterOpen = page.url();
-  //   expect(urlAfterOpen).toMatch(/\/view$/);
+    expect(page.url()).toMatch(/#\/edited\/view$/);
 
-  //   await page.getByRole('button', {name: 'Edit Visualization'}).click();
-  //   await homePage.waitForStableUI();
+    await page.getByRole('button', {name: 'Edit Visualization'}).click();
+    await homePage.waitForStableUI();
 
-  //   const urlAfterClose = page.url();
-  //   expect(urlAfterClose).not.toMatch(/\/view$/);
-  // });
+    expect(page.url()).toMatch(/#\/edited$/);
+  });
 });