diff --git a/apps/web/components/Embed.tsx b/apps/web/components/Embed.tsx index 780ca6af3e..1405fe1ac0 100644 --- a/apps/web/components/Embed.tsx +++ b/apps/web/components/Embed.tsx @@ -1,6 +1,6 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible"; import classNames from "classnames"; -import { useRouter } from "next/router"; +import { NextRouter, useRouter } from "next/router"; import { createRef, forwardRef, MutableRefObject, RefObject, useRef, useState } from "react"; import { components, ControlProps } from "react-select"; @@ -45,6 +45,23 @@ const getDimension = (dimension: string) => { return dimension; }; +const goto = (router: NextRouter, searchParams: Record) => { + const newQuery = new URLSearchParams(router.asPath.split("?")[1]); + Object.keys(searchParams).forEach((key) => { + newQuery.set(key, searchParams[key]); + }); + router.push(`${router.asPath.split("?")[0]}?${newQuery.toString()}`, undefined, { + shallow: true, + }); +}; + +const removeQueryParams = (router: NextRouter, queryParams: string[]) => { + queryParams.forEach((param) => { + delete router.query[param]; + }); + router.push(`${router.asPath.split("?")[0]}?${router.query.toString()}`); +}; + /** * It allows us to show code with certain reusable blocks indented according to the block variable placement * So, if you add a variable ${abc} with indentation of 4 spaces, it will automatically indent all newlines in `abc` with the same indent before constructing the final string @@ -605,9 +622,9 @@ const ChooseEmbedTypesDialogContent = () => { key={index} data-testid={embed.type} onClick={() => { - const newQuery = new URLSearchParams(router.asPath); - newQuery.set("embedType", embed.type); - router.push(`${router.asPath.split("?")[0]}?${newQuery.toString()}`); + goto(router, { + embedType: embed.type, + }); }}>
{embed.illustration} @@ -632,7 +649,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({ const router = useRouter(); const iframeRef = useRef(null); const s = (href: string) => { - const searchParams = new URLSearchParams(router.asPath); + const searchParams = new URLSearchParams(router.asPath.split("?")[1] || ""); const [a, b] = href.split("="); searchParams.set(a, b); return `${router.asPath.split("?")[0]}?${searchParams.toString()}`; @@ -664,21 +681,16 @@ const EmbedTypeCodeAndPreviewDialogContent = ({ }); const close = () => { - const noPopupQuery = { - ...router.query, - }; - - delete noPopupQuery.dialog; - - queryParamsForDialog.forEach((queryParam) => { - delete noPopupQuery[queryParam]; - }); - - router.push({ - query: noPopupQuery, - }); + removeQueryParams(router, ["dialog", ...queryParamsForDialog]); }; + // Use embed-code as default tab + if (!router.query.embedTabName) { + goto(router, { + embedTabName: "embed-code", + }); + } + if (!embed || !embedUrl) { close(); return null; @@ -778,10 +790,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({