diff --git a/apps/desktop/changelog/next.md b/apps/desktop/changelog/next.md index 8f5eac449..ff44a8577 100644 --- a/apps/desktop/changelog/next.md +++ b/apps/desktop/changelog/next.md @@ -2,6 +2,8 @@ ## Shiny new things +- Add iframe renderer support + ## Improvements ## No longer broken diff --git a/apps/desktop/layer/renderer/src/lib/parse-html.ts b/apps/desktop/layer/renderer/src/lib/parse-html.ts index 4397eb514..c11b5bf02 100644 --- a/apps/desktop/layer/renderer/src/lib/parse-html.ts +++ b/apps/desktop/layer/renderer/src/lib/parse-html.ts @@ -125,6 +125,25 @@ export const parseHtml = ( } return createElement("input", props) }, + iframe: ({ node, ...props }) => { + const { width, height, src, ...rest } = props + + // Apply security sandbox attributes and responsive styling + return createElement("iframe", { + ...rest, + src, + width: width || "100%", + height: height || "315", + className: "max-w-full rounded", + sandbox: "allow-scripts allow-same-origin allow-popups allow-forms", + allowFullScreen: true, + loading: "lazy", + style: { + aspectRatio: width && height ? `${width} / ${height}` : "16 / 9", + ...rest.style, + }, + }) + }, pre: ({ node, ...props }) => { if (!props.children) return null diff --git a/packages/internal/utils/src/html.ts b/packages/internal/utils/src/html.ts index 85541335e..29f2e6922 100644 --- a/packages/internal/utils/src/html.ts +++ b/packages/internal/utils/src/html.ts @@ -59,6 +59,7 @@ export const parseHtml = (content: string, options?: ParseHtmlOptions) => { rehypeSchema.tagNames = [ ...rehypeSchema.tagNames!, "video", + "iframe", "style", "figure", // SVG @@ -80,6 +81,18 @@ export const parseHtml = (content: string, options?: ParseHtmlOptions) => { ? [...rehypeSchema.attributes!["*"]!, "style", "class"] : rehypeSchema.attributes!["*"]!, video: ["src", "poster"], + iframe: [ + "src", + "width", + "height", + "frameborder", + "allowfullscreen", + "sandbox", + "loading", + "title", + "id", + "class", + ], source: ["src", "type"], svg: [