refactor: simplify HtmlPreview component by extracting render logic into a separate function (#6740)

* refactor: simplify HtmlPreview component by extracting render logic into a separate function

* refactor: wrap renderHtmlPreview in a fragment for improved JSX structure

* fix: update preview visibility check in response format tests
This commit is contained in:
Abhishek S Lal
2026-01-08 20:04:38 +05:30
committed by GitHub
parent 39a6fc837d
commit 7328988e59
2 changed files with 5 additions and 9 deletions

View File

@@ -30,7 +30,7 @@ const HtmlPreview = React.memo(({ data, baseUrl }) => {
return () => mutationObserver.disconnect();
}, []);
if (typeof data === 'string') {
const renderHtmlPreview = (data, baseUrl, isDragging, webviewContainerRef) => {
const htmlContent = data.includes('<head>')
? data.replace('<head>', `<head><base href="${escapeHtml(baseUrl)}">`)
: `<head><base href="${escapeHtml(baseUrl)}"></head>${data}`;
@@ -51,7 +51,7 @@ const HtmlPreview = React.memo(({ data, baseUrl }) => {
/>
</div>
);
}
};
// For all other data types, render safely as formatted text
let displayContent = '';
@@ -64,11 +64,7 @@ const HtmlPreview = React.memo(({ data, baseUrl }) => {
}
return (
<pre
className="bg-white font-mono text-[13px] whitespace-pre-wrap break-words overflow-auto overflow-x-hidden p-4 text-[#24292f] w-full max-w-full h-full box-border relative"
>
{displayContent}
</pre>
<>{renderHtmlPreview(displayContent, baseUrl, isDragging, webviewContainerRef)}</>
);
});

View File

@@ -43,7 +43,7 @@ test.describe.serial('Response Format Select and Preview', () => {
await switchResponseFormat(page, 'HTML');
await expect(codeLine.nth(1)).toContainText('"hello": "bruno"');
await switchToPreviewTab(page);
await expect(previewContainer).toContainText('{"hello":"bruno"}');
await expect(previewContainer.locator('webview')).toBeVisible();
});
await test.step('Switch to Editor, select XML, verify editor and preview error', async () => {
@@ -59,7 +59,7 @@ test.describe.serial('Response Format Select and Preview', () => {
await switchResponseFormat(page, 'JavaScript');
await expect(codeLine.nth(1)).toContainText('"hello": "bruno"');
await switchToPreviewTab(page);
await expect(previewContainer).toContainText('{"hello":"bruno"}');
await expect(previewContainer.locator('webview')).toBeVisible();
});
await test.step('Switch to Editor, select Raw, verify editor and preview', async () => {