diff --git a/packages/builder/src/helpers/urlStateSync.js b/packages/builder/src/helpers/urlStateSync.js index f6357ae5d9..7618ee5155 100644 --- a/packages/builder/src/helpers/urlStateSync.js +++ b/packages/builder/src/helpers/urlStateSync.js @@ -10,6 +10,7 @@ export const syncURLToState = options => { fallbackUrl, store, routify, + beforeNavigate, } = options || {} if ( !urlParam || @@ -41,6 +42,15 @@ export const syncURLToState = options => { // Navigate to a certain URL const gotoUrl = (url, params) => { + if (beforeNavigate) { + const res = beforeNavigate(url, params) + if (res?.url) { + url = res.url + } + if (res?.params) { + params = res.params + } + } log("Navigating to", url, "with params", params) cachedGoto(url, params) } diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte index 530ef44452..e6cbbf71fe 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte @@ -7,6 +7,18 @@ import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte" import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte" + const cleanUrl = url => { + // Strip trailing slashes + if (url?.endsWith("/index")) { + url = url.replace("/index", "") + } + // Hide new component panel whenever component ID changes + if (url?.endsWith("/new")) { + url = url.replace("/new", "") + } + return { url } + } + // Keep URL and state in sync for selected component ID const stopSyncing = syncURLToState({ urlParam: "componentId", @@ -15,6 +27,7 @@ fallbackUrl: "../", store, routify, + beforeNavigate: cleanUrl, }) onDestroy(stopSyncing)