diff --git a/packages/ui/src/custom/org-landing-page/embed-frame.svelte b/packages/ui/src/custom/org-landing-page/embed-frame.svelte new file mode 100644 index 00000000..2eb23978 --- /dev/null +++ b/packages/ui/src/custom/org-landing-page/embed-frame.svelte @@ -0,0 +1,29 @@ + + +
+
+ {@html sanitizedCode} +
+
+ + diff --git a/packages/ui/src/custom/org-landing-page/embed.svelte b/packages/ui/src/custom/org-landing-page/embed.svelte index 0475451f..e2f9a209 100644 --- a/packages/ui/src/custom/org-landing-page/embed.svelte +++ b/packages/ui/src/custom/org-landing-page/embed.svelte @@ -2,7 +2,7 @@ import type { OrgLandingPageLabels, OrgLandingPageTheme, LandingPageEmbed } from './types'; import SecondaryActionButton from './secondary-action-button.svelte'; import EditableLandingSection from './editable-section.svelte'; - import { sanitizeEmbedHtml } from '../../tools/sanitize'; + import EmbedFrame from './embed-frame.svelte'; let { embed, @@ -52,7 +52,7 @@ style="border: 1px solid #262a35; background: #0f1218; box-shadow: 0 30px 90px -30px rgba(0,0,0,0.7);" >
- {@html sanitizeEmbedHtml(embed.code)} +
{/if} @@ -76,9 +76,7 @@ {/if} {#if embed.code} -
- {@html sanitizeEmbedHtml(embed.code)} -
+ {/if} @@ -95,9 +93,7 @@ {/if} {#if embed.code} -
- {@html sanitizeEmbedHtml(embed.code)} -
+ {/if} diff --git a/packages/ui/src/custom/org-landing-page/landing-page-utils.ts b/packages/ui/src/custom/org-landing-page/landing-page-utils.ts index 7e3dfd21..cce0c661 100644 --- a/packages/ui/src/custom/org-landing-page/landing-page-utils.ts +++ b/packages/ui/src/custom/org-landing-page/landing-page-utils.ts @@ -84,3 +84,42 @@ export function defaultExercisesLabel(count: number): string { export function defaultEnrolledLabel(count: number): string { return `${count.toLocaleString()} enrolled`; } + +export type EmbedIframeDimensions = { + width?: string; + height?: string; +}; + +function toCssSize(value: string | undefined): string | undefined { + if (!value) { + return undefined; + } + + const trimmed = value.trim(); + if (!trimmed) { + return undefined; + } + + if (/^\d+(\.\d+)?$/.test(trimmed)) { + return `${trimmed}px`; + } + + return trimmed; +} + +/** Reads width/height from the first iframe in a pasted embed snippet. */ +export function parseEmbedIframeDimensions(html: string): EmbedIframeDimensions { + const iframeMatch = html.match(/]*>/i); + if (!iframeMatch) { + return {}; + } + + const tag = iframeMatch[0]; + const widthRaw = tag.match(/\bwidth\s*=\s*["']?([^"'\s>]+)["']?/i)?.[1]; + const heightRaw = tag.match(/\bheight\s*=\s*["']?([^"'\s>]+)["']?/i)?.[1]; + + return { + width: toCssSize(widthRaw), + height: toCssSize(heightRaw) + }; +}