Experimental pdf exports v2 #639

MTRNord · 2024-11-20T01:03:56Z

Untitled-58.pdf

TODOs:

Lines
Remove the old code
Load the fonts
Remove debug code
Text rendering occasionally seems to still behave different in the PDF. ~~I am for now blaming it on using a different font in the pdf vs on the svg canvas~~ This was partially the calculation code being still buggy but also SVG Text doesn't have a way to wrap diegomura/react-pdf#2971 seems to be causing this.
Wrapping of text is different -> Spaces at the beginning of strings are not rendering for <Text /> components diegomura/react-pdf#2789

For our internal tracking

NEO-829 is fixed using the new calculation code for font sizes
NEO-819 is fixed because the lib supports image based emoji for that. It uses tweemoji currently
NEO-885 I believe is fixed. Hard to tell but so far not a single image failing
NEO-893 fixed
NEO-941 fixed and can be easily split into a new PR if we want to land this early

✔️ Checklist

A changeset describing the change and affected packages (more info).
Added or updated documentation.
Tests for new functionality and regression tests for bug fixes.
Screenshots or videos attached (for UI changes).
All your commits have a Signed-off-by line in the message (more info).

Signed-off-by: MTRNord <[email protected]>

changeset-bot · 2024-11-20T01:04:00Z

⚠️ No Changeset found

Latest commit: 398c47b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

MTRNord · 2024-11-20T01:07:00Z

packages/react-sdk/src/components/BoardBar/pdf/utils.ts

@@ -40,17 +40,74 @@ export function image(element: ImageElement, base64content: string): Content {
  };
 }

+function preprocessSvg(element: ImageElement, svg: string): string {


Canvas requires there to be a width and height on the svg element. Otherwise it wont draw it.

MTRNord · 2024-11-20T01:07:29Z

packages/react-sdk/src/components/BoardBar/pdf/utils.ts

+  const svgString = atob(svg);
+
+  // We lied in the past about the mimetype, so we need to check if the svg is actually an svg and otherwise return the original string
+  if (!svgString.startsWith('<svg')) {


Apaprently we had nwb files which lied and marked png files as svg. This is a sanity check for it...

MTRNord · 2024-11-20T01:07:55Z

packages/react-sdk/src/components/BoardBar/pdf/utils.ts

+  }
+
+  // If we now end up with a png or jpeg image we can return it early
+  if (element.mimeType === 'image/png' || element.mimeType === 'image/jpeg') {


This is the short-circuit for files which lied about being an svg.

MTRNord · 2024-11-20T01:08:44Z

packages/react-sdk/src/components/BoardBar/pdfv2/elements/PDFElementShape.tsx

+        >
+          {element.text && (
+            <Text
+              x={element.position.x + element.width / 2 - textWidth / 2}


For some reason (bug?) react-sdk doesnt seem to position this correctly inside the rectangle so i had to do it myself.

MTRNord · 2024-11-20T01:09:13Z

packages/react-sdk/src/components/BoardBar/pdfv2/getPDFComponent.tsx

+                );
+              })}
+            </Svg>
+            {imageElements.map((element, j) => (


react-pdf will not work if the image is inside of the svg.

MTRNord · 2024-11-20T01:09:35Z

packages/react-sdk/src/components/BoardBar/pdfv2/pdf.local.ts

+  Font.registerEmojiSource({
+    format: 'png',
+    // TODO: Replace with something we serve ourselves
+    url: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/72x72/',


TODO: Replace with something hosted by us inside of the neoboard.

MTRNord · 2024-11-20T01:10:07Z

packages/react-sdk/src/components/BoardBar/pdfv2/pdf.worker.ts

+
+import { renderPDF } from './pdf.local';
+
+if (import.meta.hot) {


This is a whole bunch of hacking because HMR for react in vite currently is totally messed up with webworkers.

This makes it explicitly error out which is intended here. Otherwise it would crash the webworker when using react.

MTRNord · 2024-11-20T01:11:35Z

packages/react-sdk/src/components/BoardBar/pdfv2/pdf.local.ts

+import { WhiteboardDocumentExport } from '../../../state/export/whiteboardDocumentExport';
+
+const renderPDF = async (exportData: WhiteboardDocumentExport) => {
+  const { pdf, Font } = await import('@react-pdf/renderer');


We can not use any file level imports for things that interact with react in anyway as this will break HMR on the webworker due to vite bugs.

This ensures the bundles are split correctly across the 2 worlds

Signed-off-by: MTRNord <[email protected]>

MTRNord · 2024-11-20T01:15:16Z

matrix-neoboard-widget/package.json

@@ -23,7 +23,8 @@
    "react-redux": "^9.1.2"
  },
  "resolutions": {
-    "fork-ts-checker-webpack-plugin": "^6.5.3"
+    "fork-ts-checker-webpack-plugin": "^6.5.3",
+    "@vitejs/plugin-react-swc": "git+https://github.com/vitejs/vite-plugin-react-swc.git"


This is required as we require vitejs/vite-plugin-react-swc@beb09db

Signed-off-by: MTRNord <[email protected]>

…omewhere Signed-off-by: MTRNord <[email protected]>

…Text stuff Signed-off-by: MTRNord <[email protected]>

Signed-off-by: MTRNord <[email protected]>

MTRNord added 2 commits November 19, 2024 17:36

Initial support for react-pdf export

e50de6e

Signed-off-by: MTRNord <[email protected]>

Replace the pdf renderer with react-pdf

9a48c87

Signed-off-by: MTRNord <[email protected]>

MTRNord commented Nov 20, 2024

View reviewed changes

MTRNord added 2 commits November 20, 2024 02:12

File formatting

da54650

Signed-off-by: MTRNord <[email protected]>

Use git react-swc plugin due to bug in vite

56153b3

Signed-off-by: MTRNord <[email protected]>

MTRNord force-pushed the marcel/ex/react-pdf-export branch from 723eb8d to 56153b3 Compare November 20, 2024 01:15

MTRNord commented Nov 20, 2024

View reviewed changes

MTRNord added 8 commits November 20, 2024 02:23

Readd the getTemporaryElement method to the tests

b302396

Signed-off-by: MTRNord <[email protected]>

Improve text rendering and add path rendering and font loading

b04c13b

Signed-off-by: MTRNord <[email protected]>

Correctly calculate the y position of text elements

c050a94

Signed-off-by: MTRNord <[email protected]>

Add missing x offset and also the weird extra 10px that exist from $s…

a72fc4f

…omewhere Signed-off-by: MTRNord <[email protected]>

Add canvas dependency so jsdom can deal with canvas stuff for the fit…

66c6b7e

…Text stuff Signed-off-by: MTRNord <[email protected]>

Fallback to normal canvas if the offscreen canvas is not available

b44f8a3

Signed-off-by: MTRNord <[email protected]>

Fix types

e5ca32c

Signed-off-by: MTRNord <[email protected]>

Fix some of the test cases

398c47b

Signed-off-by: MTRNord <[email protected]>

jaller94 changed the title ~~Experiemental pdf exports v2~~ Experimental pdf exports v2 Dec 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Experimental pdf exports v2 #639

Experimental pdf exports v2 #639

MTRNord commented Nov 20, 2024 •

edited

Loading

changeset-bot bot commented Nov 20, 2024 •

edited

Loading

MTRNord Nov 20, 2024

MTRNord Nov 20, 2024

MTRNord Nov 20, 2024

MTRNord Nov 20, 2024

MTRNord Nov 20, 2024

MTRNord Nov 20, 2024

MTRNord Nov 20, 2024

MTRNord Nov 20, 2024

MTRNord Nov 20, 2024

MTRNord Nov 20, 2024

MTRNord Nov 20, 2024


		import { renderPDF } from './pdf.local';

		if (import.meta.hot) {

Experimental pdf exports v2 #639

Are you sure you want to change the base?

Experimental pdf exports v2 #639

Conversation

MTRNord commented Nov 20, 2024 • edited Loading

TODOs:

For our internal tracking

changeset-bot bot commented Nov 20, 2024 • edited Loading

⚠️ No Changeset found

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MTRNord commented Nov 20, 2024 •

edited

Loading

changeset-bot bot commented Nov 20, 2024 •

edited

Loading