studio/docs
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛(frontend) fix svg export

Browse Source 
Last upgrade of Blocknote to 0.30.0 broke the SVG
export. The previewWidth can be undefined, which causes the
export to fail. This commit adds a fallback
width in case previewWidth is undefined.
This commit is contained in:
Anthony LC
2025-05-15 14:16:00 +02:00
parent 62d1bc6473
commit 10b088599c
3 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/frontend/apps/e2e/__tests__/app-impress/assets/test.svg
View File

@@ -1,4 +1,9 @@
<svg width="100" height="100" viewBox="0 0 100 100">
<svg
width="100"
height="100"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="50" cy="30" r="20" fill="#3498db" />
<polygon
points="50,10 55,20 65,20 58,30 60,40 50,35 40,40 42,30 35,20 45,20"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 292 B

After

Width:  |  Height:  |  Size: 336 B

12
src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/imageDocx.tsx
View File

@@ -21,6 +21,7 @@ export const blockMappingImageDocx: DocsExporterDocx['mappings']['blockMapping']
const blob = await exporter.resolveFile(block.props.url);
let pngConverted: string | undefined;
let dimensions: { width: number; height: number } | undefined;
let previewWidth = block.props.previewWidth || undefined;
if (!blob.type.includes('image')) {
return [];
@@ -28,7 +29,9 @@ export const blockMappingImageDocx: DocsExporterDocx['mappings']['blockMapping']
if (blob.type.includes('svg')) {
const svgText = await blob.text();
pngConverted = await convertSvgToPng(svgText, block.props.previewWidth);
const FALLBACK_SIZE = 536;
previewWidth = previewWidth || blob.size || FALLBACK_SIZE;
pngConverted = await convertSvgToPng(svgText, previewWidth);
const img = new Image();
img.src = pngConverted;
await new Promise((resolve) => {
@@ -47,8 +50,7 @@ export const blockMappingImageDocx: DocsExporterDocx['mappings']['blockMapping']
const { width, height } = dimensions;
let previewWidth = block.props.previewWidth;
if (previewWidth > MAX_WIDTH) {
if (previewWidth && previewWidth > MAX_WIDTH) {
previewWidth = MAX_WIDTH;
}
@@ -69,8 +71,8 @@ export const blockMappingImageDocx: DocsExporterDocx['mappings']['blockMapping']
}
: undefined,
transformation: {
width: previewWidth,
height: (previewWidth / width) * height,
width: previewWidth || width,
height: ((previewWidth || width) / width) * height,
},
}),
],

7
src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/imagePDF.tsx
View File

@@ -12,6 +12,7 @@ export const blockMappingImagePDF: DocsExporterPDF['mappings']['blockMapping']['
async (block, exporter) => {
const blob = await exporter.resolveFile(block.props.url);
let pngConverted: string | undefined;
let width = block.props.previewWidth || undefined;
if (!blob.type.includes('image')) {
return <View wrap={false} />;
@@ -19,7 +20,9 @@ export const blockMappingImagePDF: DocsExporterPDF['mappings']['blockMapping']['
if (blob.type.includes('svg')) {
const svgText = await blob.text();
pngConverted = await convertSvgToPng(svgText, block.props.previewWidth);
const FALLBACK_SIZE = 536;
width = width || blob.size || FALLBACK_SIZE;
pngConverted = await convertSvgToPng(svgText, width);
}
return (
@@ -27,7 +30,7 @@ export const blockMappingImagePDF: DocsExporterPDF['mappings']['blockMapping']['
<Image
src={pngConverted || blob}
style={{
width: block.props.previewWidth * PIXELS_PER_POINT,
width: width ? width * PIXELS_PER_POINT : undefined,
maxWidth: '100%',
}}
/>