Refactor content viewer components and use for multpart and request body (#333)

This commit is contained in:
Gregory Schier
2025-12-28 13:25:24 -08:00
committed by GitHub
parent 6869aa49ec
commit 394fbbd55d
16 changed files with 325 additions and 116 deletions

View File

@@ -1,26 +1,22 @@
import type { HttpResponse } from '@yaakapp-internal/models';
import { useMemo } from 'react';
import { useResponseBodyText } from '../../hooks/useResponseBodyText';
interface Props {
response: HttpResponse;
html: string;
baseUrl?: string;
}
export function WebPageViewer({ response }: Props) {
const { url } = response;
const body = useResponseBodyText({ response, filter: null }).data ?? '';
export function WebPageViewer({ html, baseUrl }: Props) {
const contentForIframe: string | undefined = useMemo(() => {
if (body.includes('<head>')) {
return body.replace(/<head>/gi, `<head><base href="${url}"/>`);
if (baseUrl && html.includes('<head>')) {
return html.replace(/<head>/gi, `<head><base href="${baseUrl}"/>`);
}
return body;
}, [url, body]);
return html;
}, [baseUrl, html]);
return (
<div className="h-full pb-3">
<iframe
key={body ? 'has-body' : 'no-body'}
key={html ? 'has-body' : 'no-body'}
title="Yaak response preview"
srcDoc={contentForIframe}
sandbox="allow-scripts allow-forms"