public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: set key to iframes to fix browser history stack (back button navigation)

pull/11755/head
5war00p 2023-10-09 00:52:03 +05:30
parent 88d438f227
commit 63a4c79c92
No known key found for this signature in database
GPG Key ID: C8244F1AC5622CCD
2 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/components/apps/AppPage.tsx
View File

@ -126,7 +126,7 @@ export const AppPage = ({
<div <div
key={`iframe-${index}`} key={`iframe-${index}`}
className="mr-4 max-h-full min-h-[315px] min-w-[90%] max-w-full snap-center last:mb-0 lg:mb-4 lg:mr-0 [&_iframe]:h-full [&_iframe]:min-h-[315px] [&_iframe]:w-full"> className="mr-4 max-h-full min-h-[315px] min-w-[90%] max-w-full snap-center last:mb-0 lg:mb-4 lg:mr-0 [&_iframe]:h-full [&_iframe]:min-h-[315px] [&_iframe]:w-full">
<iframe allowFullScreen {...descriptionItem.iframe} /> <iframe key={`iframe_${index}`} allowFullScreen {...descriptionItem.iframe} />
</div> </div>
) : ( ) : (
<img <img

17
packages/features/embed/lib/EmbedTabs.tsx
View File

@ -47,19 +47,17 @@ export const tabs = [
className="text-default bg-default selection:bg-subtle h-[calc(100%-50px)] font-mono" className="text-default bg-default selection:bg-subtle h-[calc(100%-50px)] font-mono"
style={{ resize: "none", overflow: "auto" }} style={{ resize: "none", overflow: "auto" }}
readOnly readOnly
value={ value={`<!-- Cal ${embedType} embed code begins -->\n${
`<!-- Cal ${embedType} embed code begins -->\n` + embedType === "inline"
(embedType === "inline"
? `<div style="width:${getDimension(previewState.inline.width)};height:${getDimension( ? `<div style="width:${getDimension(previewState.inline.width)};height:${getDimension(
previewState.inline.height previewState.inline.height
)};overflow:scroll" id="my-cal-inline"></div>\n` )};overflow:scroll" id="my-cal-inline"></div>\n`
: "") + : ""
`<script type="text/javascript"> }<script type="text/javascript">
${embedSnippetString} ${embedSnippetString}
${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previewState, embedCalOrigin })} ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previewState, embedCalOrigin })}
</script> </script>
<!-- Cal ${embedType} embed code ends -->` <!-- Cal ${embedType} embed code ends -->`}
}
/> />
<p className="text-subtle hidden text-sm">{t("need_help_embedding")}</p> <p className="text-subtle hidden text-sm">{t("need_help_embedding")}</p>
</> </>
@ -95,10 +93,10 @@ export const tabs = [
readOnly readOnly
style={{ resize: "none", overflow: "auto" }} style={{ resize: "none", overflow: "auto" }}
value={`/* First make sure that you have installed the package */ value={`/* First make sure that you have installed the package */
/* If you are using yarn */ /* If you are using yarn */
// yarn add @calcom/embed-react // yarn add @calcom/embed-react
/* If you are using npm */ /* If you are using npm */
// npm install @calcom/embed-react // npm install @calcom/embed-react
${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, previewState, embedCalOrigin })} ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, previewState, embedCalOrigin })}
@ -126,6 +124,7 @@ export const tabs = [
} }
return ( return (
<iframe <iframe
key={EMBED_PREVIEW_HTML_URL}
ref={ref as typeof ref & MutableRefObject<HTMLIFrameElement>} ref={ref as typeof ref & MutableRefObject<HTMLIFrameElement>}
data-testid="embed-preview" data-testid="embed-preview"
className="h-[100vh] border" className="h-[100vh] border"