6ba3fb0722
couple interesting things here as followups to the CSP work. - first of all, again, good call on doing the report-only to start with @SomeHats 🤘 - I combed through all the Sentry logs, looking for issues. a lot of them were browser extensions and could be ignored. - there were some other ones that needed fixing up though. fixes in this PR: - [x] CSP emulation in dev: make sure it's running in development so that we can catch things locally. this is done via the meta tag. - [x] `connect-src` add `blob`: this was breaking copy/export as svg/png - [x] image testing: expand list of pasted image extensions to include avif and some others - [x] image pasting: this didn't really work in the first place because typically even with CSP disabled, you'll mainly run into CORS issues. I think it's a pretty crap user experience. So, I moved this logic to actually be in the URL unfurling. Lemme know what you think! I don't think we should proxy the actual image data - that sounds ... intense 😬 even though it would produce a better user experience technically. - [x] investigated `manifest-src` errors: but it actually seems fine? Weird thing here is that `manifest-src` isn't explicitly in the CSP so it falls back to the `default-src` of `self` which is fine. Trying it on tldraw.com it seems just fine with no errors but inexplicably some users are hitting these errors. I'm guessing maybe it's an ad-blocker type behavior maybe. - [x] `font-src` add `data`: I'm actually unsure if this is quite necessary but I _think_ embedded fonts in SVGs are causing the problem. However, I can't reproduce this, I just don't mind adding this. Before / After for pasting image URLs (not a CSP issue, to be clear, but a CORS issue) ## Before <img width="448" alt="Screenshot 2024-07-12 at 17 59 42" src="https://github.com/user-attachments/assets/e8ce267b-48fd-49cd-b0f7-0fd20c0b9a1d"> ## After <img width="461" alt="Screenshot 2024-07-12 at 18 00 06" src="https://github.com/user-attachments/assets/9956590d-fe37-4708-bc26-0c454f8151b4"> ### Change type - [ ] `bugfix` - [ ] `improvement` - [ ] `feature` - [ ] `api` - [x] `other` ### Release notes - Security: more CSP work on dotcom |
||
|---|---|---|
| .. | ||
| .vscode | ||
| assets | ||
| examples | ||
| scripts | ||
| src | ||
| .gitignore | ||
| .vscodeignore | ||
| CHANGELOG.md | ||
| icon.png | ||
| LICENSE.md | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
Introduction
tldraw is a very good whiteboard for the web. This extension will let you use tldraw inside of VS Code, using offline .tldr files. Create drawings, diagrams, or visual documentation, and then commit the files alongside your code!
Usage
- To create a new tldraw file, use the provided command: "tldraw: New tldraw File".
- To view an existing tldraw file, open a file with the
.tldrextension in VS Code.
Tip: The
.tldrfiles you create with this extension can also be opened in the tldraw web app. You can also use this extension to open.tldrfiles saved from the web app.
Contribution
Please see our contributing guide. Found a bug? Please submit an issue.
License
The tldraw source code and its distributions are provided under the tldraw license. This license does not permit commercial use. To purchase a commercial license or learn more, please fill out this form.
Trademarks
Copyright (c) 2023-present tldraw Inc. The tldraw name and logo are trademarks of tldraw. Please see our trademark guidelines for info on acceptable usage.
Contact
Find us on Twitter/X at @tldraw.
Community
Have questions, comments or feedback? Join our discord or start a discussion. For the latest news and release notes, check out our Substack.