Studio: render embedded images in DOCX preview

docx-preview defaults to blob: URLs for embedded images, which DOMPurify
strips from img src (blob: isn't in its default allowed-URI list), so
figures vanished after sanitize. Switch docx-preview to useBase64URL so
images inline as data: URIs, and add ADD_DATA_URI_TAGS: ['img'] to the
DOMPurify config so those data: URIs survive sanitization. Script /
handler / javascript: stripping is unchanged.
This commit is contained in:
Roland Tannous 2026-05-28 14:59:52 +04:00
commit f4b34f71c5

View file

@ -26,14 +26,20 @@ export const PreviewDocxView: FC<{ target: PreviewTarget; blob: Blob }> = ({
void renderAsync(blob, offscreen, undefined, {
inWrapper: true,
ignoreLastRenderedPageBreak: true,
// Inline images as base64 data: URIs rather than blob: URLs.
// DOMPurify drops blob: from img src, so blob-backed images would
// vanish after sanitize; data: URIs survive (see ADD_DATA_URI_TAGS).
useBase64URL: true,
})
.then(() => {
if (cancelled || !ref.current) return;
// Keep <style> so docx-preview's scoped layout CSS survives the
// sanitize pass; everything else uses DOMPurify defaults (drops
// sanitize pass, and allow data: URIs on <img> so embedded
// figures render. Everything else uses DOMPurify defaults (drops
// <script>, event handlers, javascript: URLs, etc.).
const clean = DOMPurify.sanitize(offscreen.innerHTML, {
ADD_TAGS: ["style"],
ADD_DATA_URI_TAGS: ["img"],
});
ref.current.innerHTML = clean;
})