4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T1f93,"use client" import * as React from "react" import { TriangleAlert } from "lucide-react" import { cn } from "@/lib/utils" export type DocxResult = { html: string messages?: string[] } export type DocxConverter = (source: ArrayBuffer) => Promise export type DocxViewerProps = Omit< React.HTMLAttributes, "children" > & { source?: ArrayBuffer | Blob result?: DocxResult converter?: DocxConverter allowedTags?: readonly string[] label?: string loadingLabel?: React.ReactNode showWarnings?: boolean } /** Hold the loading state back so a fast result never flashes it. */ const LOADING_DELAY_MS = 120 const MISSING_MAMMOTH = 'DocxViewer needs the "mammoth" package, or a `converter` prop that returns { html }.' /** * Converted documents come from files this app did not write, so the HTML is * rebuilt as React elements through this allowlist rather than injected. Any * tag, attribute, or URL scheme not named here is dropped. */ const ALLOWED_TAGS = [ "p", "br", "strong", "b", "em", "i", "u", "s", "sub", "sup", "h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol", "li", "blockquote", "pre", "code", "table", "thead", "tbody", "tr", "th", "td", "a", "img", ] as const const ALLOWED_ATTRIBUTES: Record = { a: ["href", "title"], img: ["src", "alt", "width", "height"], th: ["colspan", "rowspan"], td: ["colspan", "rowspan"], } /** Tags whose contents are discarded rather than unwrapped into text. */ const DROPPED_SUBTREES = new Set([ "script", "style", "iframe", "object", "embed", ]) /** Tags where a stray whitespace text node is invalid HTML. */ const STRUCTURAL = new Set([ "table", "thead", "tbody", "tfoot", "tr", "ul", "ol", ]) const REACT_ATTRIBUTE: Record = { colspan: "colSpan", rowspan: "rowSpan", } /** DOMParser is browser-only, so the body is built after hydration. */ const subscribeToNothing = () => () => {} function isSafeUrl(value: string) { const trimmed = value.trim().toLowerCase() if (trimmed.startsWith("#") || trimmed.startsWith("/")) return true if (trimmed.startsWith("data:image/")) return true return /^https?:/.test(trimmed) || /^mailto:/.test(trimmed) } function toElements( nodes: readonly ChildNode[], allowed: ReadonlySet, keyPrefix = "n", parentTag?: string ): React.ReactNode[] { return nodes.flatMap((node, index) => { const key = `${keyPrefix}-${index}` if (node.nodeType === 3) { const text = node.textContent ?? "" // A table or list may not hold loose text, and the source markup is // usually indented, so whitespace between rows would break hydration. if (parentTag && STRUCTURAL.has(parentTag) && !text.trim()) return [] return [text] } if (node.nodeType !== 1) return [] const element = node as Element const tag = element.tagName.toLowerCase() if (DROPPED_SUBTREES.has(tag)) return [] const children = toElements([...element.childNodes], allowed, key, tag) // An unknown tag loses its wrapper but keeps whatever text it held. if (!allowed.has(tag)) return children const props: Record = { key } for (const name of ALLOWED_ATTRIBUTES[tag] ?? []) { const value = element.getAttribute(name) if (value == null) continue if ((name === "href" || name === "src") && !isSafeUrl(value)) continue props[REACT_ATTRIBUTE[name] ?? name] = value } if (tag === "a") { props.rel = "noreferrer noopener" props.target = "_blank" } if (tag === "br" || tag === "img") return [React.createElement(tag, props)] return [React.createElement(tag, props, ...children)] }) } async function convertWithMammoth(source: ArrayBuffer): Promise { let mammoth: typeof import("mammoth") try { mammoth = await import("mammoth") } catch { throw new Error(MISSING_MAMMOTH) } const convert = ( "default" in mammoth ? mammoth.default : mammoth ) as typeof mammoth const result = await convert.convertToHtml({ arrayBuffer: source }) return { html: result.value, messages: result.messages.map( (message: { message: string }) => message.message ), } } export function DocxViewer({ source, result, converter = convertWithMammoth, allowedTags = ALLOWED_TAGS, label = "Document", loadingLabel = "Reading the document…", showWarnings = false, className, ...rootProps }: DocxViewerProps) { const [converted, setConverted] = React.useState(null) const [error, setError] = React.useState(null) const [loading, setLoading] = React.useState(false) const output = result ?? converted React.useEffect(() => { if (result || source == null) return const controller = new AbortController() const spinner = window.setTimeout(() => setLoading(true), LOADING_DELAY_MS) void (async () => { try { const buffer = source instanceof Blob ? await source.arrayBuffer() : source const next = await converter(buffer) if (controller.signal.aborted) return setConverted(next) setError(null) } catch (cause) { if (controller.signal.aborted) return setError(cause instanceof Error ? cause.message : String(cause)) } finally { window.clearTimeout(spinner) if (!controller.signal.aborted) setLoading(false) } })() return () => { controller.abort() window.clearTimeout(spinner) } }, [source, result, converter]) const isClient = React.useSyncExternalStore( subscribeToNothing, () => true, () => false ) const body = React.useMemo(() => { if (!isClient || !output) return null const parsed = new DOMParser().parseFromString(output.html, "text/html") return toElements([...parsed.body.childNodes], new Set(allowedTags)) }, [isClient, output, allowedTags]) if (error) { return (

) } return (

{loading && !output ? (

{loadingLabel}

) : null} {body ? (

{body}

) : null} {showWarnings && output?.messages?.length ? (

{message}

) : null}

) } 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react@^1.31.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^1.31.0"}]]}]}],["$","li","mammoth@^1.12.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/mammoth","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"mammoth@^1.12.1"}]]}]}]]}],["$","$L4c",null,{"namespace":"@mischief","registryDependencies":["utils"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"registry/default/docx-viewer/docx-viewer.tsx","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]