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 |
||
|---|---|---|
| .github | ||
| .husky | ||
| .yarn/patches | ||
| apps | ||
| assets | ||
| config | ||
| packages | ||
| scripts | ||
| templates | ||
| .dockerignore | ||
| .eslintignore | ||
| .eslintplugin.js | ||
| .eslintrc.js | ||
| .gitignore | ||
| .ignore | ||
| .prettierignore | ||
| .prettierrc | ||
| .yarnrc.yml | ||
| CHANGELOG.md | ||
| CLA.md | ||
| CODE_OF_CONDUCT.md | ||
| CONTRIBUTING.md | ||
| lazy.config.ts | ||
| lerna.json | ||
| LICENSE.md | ||
| package.json | ||
| README.md | ||
| RELEASES.md | ||
| TRADEMARKS.md | ||
| tsdoc.json | ||
| yarn.config.cjs | ||
| yarn.lock | ||
tldraw
Welcome to the public monorepo for tldraw. tldraw is a library for creating infinite canvas experiences in React. It's the software behind the digital whiteboard tldraw.com.
- Read the docs and learn more at tldraw.dev.
- Learn about our license.
🤵 Interested in purchasing a commercial license for the tldraw SDK? Fill out this form.
Installation
npm i tldraw
Usage
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
export default function App() {
return (
<div style={{ position: 'fixed', inset: 0 }}>
<Tldraw />
</div>
)
}
Learn more at tldraw.dev.
Local development
The local development server will run our examples app. The basic example will show any changes you've made to the codebase.
To run the local development server, first clone this repo.
Enable corepack to make sure you have the right version of yarn:
corepack enable
Install dependencies:
yarn
Start the local development server:
yarn dev
Open the example project at localhost:5420.
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.
Contribution
Please see our contributing guide. Found a bug? Please submit an issue.