From 0e39c31c6e4fd2d6c7f1599aeee1c5bf9e7bb504 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Wed, 8 Nov 2023 12:47:00 +0100
Subject: [PATCH] Fix printing. (#2177)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes printing. The issue is that SPA added an additional `root` div to
the body and all our elements now live inside of that. The following css
stopped working because of that.
```css
body > * {
   display: none;
}
```

For now I just added a rule to hide the `tldraw__editor`, which should
be a relatively safe thing to do.

We should think about improving this down the line:
1. We should allow the user to tell us about the root of where the
tldraw lives and then target elements based on that (or allow users to
customize the `usePrint` and other similar features)
2. We probably should not append stuff directly to the `body` as we
currently do.

Fixes https://github.com/tldraw/tldraw/issues/2147

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Add some shapes to the doc.
2. Use print and check that we only show the shapes / frames in the
print preview. There should be no UI visible.

### Release Notes

- Fixes printing of shapes.
---
 packages/tldraw/src/lib/ui/hooks/usePrint.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/tldraw/src/lib/ui/hooks/usePrint.ts b/packages/tldraw/src/lib/ui/hooks/usePrint.ts
index ef3580741..987c2d1b4 100644
--- a/packages/tldraw/src/lib/ui/hooks/usePrint.ts
+++ b/packages/tldraw/src/lib/ui/hooks/usePrint.ts
@@ -59,6 +59,10 @@ export function usePrint() {
 					display: none;
 				}
 
+				.tldraw__editor {
+					display: none;
+				}
+
 				.${className} {
 					display: block !important;
 					background: white;