'use client'
import { useMemo } from 'react'
import { ExternalLink } from 'lucide-react'
interface HtmlPreviewProps {
content: string
/** Absolute file path (including workspace root) used to inject tag */
filePath?: string
/** Workspace ID for building raw API base URLs */
workspaceId?: string
onOpenExternal?: () => void
}
/**
* Inject a tag so that relative paths (CSS, JS, images) in the HTML
* resolve against the file's directory via the workspace raw API.
*/
function injectBaseTag(html: string, filePath?: string, workspaceId?: string): string {
if (!filePath || !workspaceId) return html
const lastSlash = filePath.lastIndexOf('/')
const dirPath = lastSlash >= 0 ? filePath.substring(0, lastSlash + 1) : ''
if (!dirPath) return html
const baseHref = `/api/workspaces/${workspaceId}/raw?path=${encodeURIComponent(dirPath)}`
const baseTag = ``
if (html.includes('')) {
return html.replace('', `\n ${baseTag}`)
}
// Prepend if no present
return baseTag + '\n' + html
}
/**
* Isolated HTML preview for project file editors.
*
* Security design:
* - Uses iframe srcDoc for isolation from the main Forge UI.
* - sandbox="allow-same-origin" intentionally disables scripts.
* (allow-same-origin + allow-scripts would let the iframe break out of
* the sandbox and access host APIs.)
* - A "Open in browser" button is provided for users who need script execution.
*/
export function HtmlPreview({ content, filePath, workspaceId, onOpenExternal }: HtmlPreviewProps) {
const srcDoc = useMemo(
() => injectBaseTag(content, filePath, workspaceId),
[content, filePath, workspaceId]
)
return (
HTML Preview (scripts disabled)
{onOpenExternal && (
)}