This PR adds the docs app back into the tldraw monorepo.

## Deploying

We'll want to update our deploy script to update the SOURCE_SHA to the
newest release sha... and then deploy the docs pulling api.json files
from that release. We _could_ update the docs on every push to main, but
we don't have to unless something has changed. Right now there's no
automated deployments from this repo.

## Side effects

To make this one work, I needed to update the lock file. This might be
ok (new year new lock file), and everything builds as expected, though
we may want to spend some time with our scripts to be sure that things
are all good.

I also updated our prettier installation, which decided to add trailing
commas to every generic type. Which is, I suppose, [correct
behavior](https://github.com/prettier/prettier-vscode/issues/955)? But
that caused diffs in every file, which is unfortunate.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]
This commit is contained in:
Steve Ruiz 2024-01-15 12:33:15 +00:00 committed by GitHub
parent 1f425dcab3
commit 29044867dd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
221 changed files with 108461 additions and 3103 deletions

View file

@ -3,6 +3,7 @@
**/dist/*
**/dist-cjs/*
**/dist-esm/*
**/.next/*
**/api/*
!**/pages/api/*
**/.tsbuild*
@ -13,3 +14,5 @@ apps/docs/api-content.json
apps/docs/content.json
apps/vscode/extension/editor/*
apps/examples/www
content.json
apps/docs/utils/vector-db/index.json

View file

@ -0,0 +1,32 @@
diff --git a/lib/sloppy.js b/lib/sloppy.js
index b5d8950a8ea98d2d58723c1f96eeabb260699e24..81e57113edc1b16d681f157cd9b923dba190567c 100644
--- a/lib/sloppy.js
+++ b/lib/sloppy.js
@@ -1,24 +1,4 @@
-/* Domino uses sloppy-mode features (in particular, `with`) for a few
- * minor things. This file encapsulates all the sloppiness; every
- * other module should be strict. */
-/* jshint strict: false */
-/* jshint evil: true */
-/* jshint -W085 */
module.exports = {
- Window_run: function _run(code, file) {
- if (file) code += '\n//@ sourceURL=' + file;
- with(this) eval(code);
- },
- EventHandlerBuilder_build: function build() {
- try {
- with(this.document.defaultView || Object.create(null))
- with(this.document)
- with(this.form)
- with(this.element)
- return eval("(function(event){" + this.body + "})");
- }
- catch (err) {
- return function() { throw err; };
- }
- }
-};
+ Window_run: function _run(code, file) {},
+ EventHandlerBuilder_build: function build() {},
+}

View file

@ -0,0 +1,30 @@
diff --git a/lib/index.js b/lib/index.js
index 2229f15f097650cf726e2a153b70ca5546696224..08d966f9546acb8caed69e73e06c12ed55e45832 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -14,15 +14,15 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
};
Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./FileFetcher"), exports);
-__exportStar(require("./GPT3Tokenizer"), exports);
-__exportStar(require("./ItemSelector"), exports);
+// __exportStar(require("./FileFetcher"), exports);
+// __exportStar(require("./GPT3Tokenizer"), exports);
+// __exportStar(require("./ItemSelector"), exports);
__exportStar(require("./LocalIndex"), exports);
-__exportStar(require("./LocalDocument"), exports);
-__exportStar(require("./LocalDocumentIndex"), exports);
-__exportStar(require("./LocalDocumentResult"), exports);
-__exportStar(require("./OpenAIEmbeddings"), exports);
-__exportStar(require("./TextSplitter"), exports);
+// __exportStar(require("./LocalDocument"), exports);
+// __exportStar(require("./LocalDocumentIndex"), exports);
+// __exportStar(require("./LocalDocumentResult"), exports);
+// __exportStar(require("./OpenAIEmbeddings"), exports);
+// __exportStar(require("./TextSplitter"), exports);
__exportStar(require("./types"), exports);
-__exportStar(require("./WebFetcher"), exports);
+// __exportStar(require("./WebFetcher"), exports);
//# sourceMappingURL=index.js.map
\ No newline at end of file

5
apps/docs/.gitignore vendored Normal file
View file

@ -0,0 +1,5 @@
content/gen
api-content.json
content.db
.env
.next

View file

@ -0,0 +1,6 @@
.next/*
.lazy/*
content.db
node_modules
utils/vector-db/index.json
**/*.api.json

1
apps/docs/CHANGELOG.md Normal file
View file

@ -0,0 +1 @@
# @tldraw/docs

1
apps/docs/LICENSE.md Normal file
View file

@ -0,0 +1 @@
See [tldraw license](https://github.com/tldraw/tldraw/blob/master/LICENSE.md)

150
apps/docs/README.md Normal file
View file

@ -0,0 +1,150 @@
# tldraw-docs
<div alt style="text-align: center; transform: scale(.5);">
<picture>
<img alt="tldraw" src="https://github.com/tldraw/tldraw-lite/raw/main/docs/public/card_repo.png" />
</picture>
</div>
Welcome to the source for the [tldraw docs site](https://tldraw.dev).
This site is a [Next.js](https://nextjs.org/) app that uses [MDX](https://mdxjs.com/) for content. It contains human-written docs in the `content` folder as well as generated docs in the `api` folder.
We have several scripts that build these files into a SQLite database that is used to generate the site's pages.
To pull the most recent docs from the tldraw repo, create an .env file with a GitHub personal access token and the SHA of the commit or branch that you'd like to pull from.
```
ACCESS_TOKEN=your_github_access_token
SOURCE_SHA=main
```
The files are also provided in this repo.
## Building the content
You can build the markdown and API content using the following scripts:
- `yarn refresh-all` to reset the database, generate the markdown from the API docs, and populate the database with articles from both the regular content and the generated API content
- `yarn refresh-api-content` to refresh just the API content
- `yarn refresh-content` to generate just the regular content
# Content
The docs has two types of content: regular content that is written by the team and auto-generated content that is created using [tsdoc](https://tsdoc.org/) and [API extractor](https://api-extractor.com/).
The `content` folder contains all content in the form of MDX files. All articles belong to a "section" and a "category". The `sections.json` defines each section and any categories belonging to that section.
A section looks like this:
```json
{
"id": "community",
"title": "Community",
"description": "Guides for contributing to tldraw's open source project.",
"categories": []
}
```
The content is organized into folders for each section. The `gen` folder contains auto-generated content.
## Regular Content
The `content` folder contains all "regular" content in the form of MDX files.All articles belong to a "section" and a "category". The content is organized into folders for each "section".
An article's frontmatter looks like this:
```md
---
title: User Interface
description: How to customize the tldraw user interface using overrides.
status: published
author: steveruizok
date: 3/22/2023
order: 8
keywords:
- ui
- interface
- tools
- shapes
- custom
- button
- toolbar
- styles
---
```
### Title
The `title` is displayed in the article's header, in the page title, in the search bar, and in search results. It is used to find an article through the site's search feature.
### Description
The `description` is hidden in the article's frontmatter, but is used to populate the article's meta description tag. It is also used to find an article through the site's search feature.
### Hero
The `hero` is used for the article's social media image. It is not displayed in the article. It should refer to a page in the `public/images` folder.
### Category
An article may declare its `category` in its frontmatter. Any article that does not declare a category will be placed into the "ucg" category for "uncategorized" articles.
### Order
The `order` property defines the article's order in its category. Uncategorized articles are placed at the end of the list of categories sorted by its `order`. For a section without categories, the `order` keyword effectively defines the order that the article will appear in the section list.
### Author
The `author` must refer to an author named in the `content/authors.json` file.
An author looks like this:
```json
"steveruizok": {
"name": "Steve Ruiz",
"email": "steve@tldraw.com",
"twitter": "steveruizok",
"image": "steve_ruiz.jpg"
}
```
The image should refer to an image in `public/avatars`.
### Date
The `date` is formatted as DD/MM/YYYY.
### Status
An article's `status` may be either `draft` or `published`. A `draft` article is hidden in production.
### Keywords
The `keywords` are used to find an article through the site's search feature.
## Auto-generated content
The auto-generated docs content is created using [tsdoc](https://tsdoc.org/) and [API extractor](https://api-extractor.com/). The source is the API documentation created by `yarn build` or `yarn build-api`. The output is placed in the `gen` folder.
## Developing the docs
When developing the docs, any change to the `content` folder will cause the page to refresh. This is a little shitty but it mostly works.
## Contribution
Please see our [contributing guide](https://github.com/tldraw/tldraw/blob/main/CONTRIBUTING.md). Found a bug? Please [submit an issue](https://github.com/tldraw/tldraw/issues/new).
## License
The tldraw source code and its distributions are provided under the [tldraw license](https://github.com/tldraw/tldraw/blob/master/LICENSE.md). This license does not permit commercial use.
If you wish to use this project in commercial product, you need to purchase a commercial license. matPlease contact us at [hello@tldraw.com](mailto:hello@tldraw.com) for more inforion about obtaining a commercial license.
## Trademarks
Copyright (c) 2023-present tldraw Inc. The tldraw name and logo are trademarks of tldraw. Please see our [trademark guidelines](https://github.com/tldraw/tldraw/blob/main/TRANDEMARKS.md) for info on acceptable usage.
## Contact
Find us on Twitter at [@tldraw](https://twitter.com/tldraw) or email [hello@tldraw.com](mailto://hello@tldraw.com). You can also [join our discord](https://discord.gg/rhsyWMUJxd) for quick help and support.

49082
apps/docs/api/editor.api.json Normal file

File diff suppressed because it is too large Load diff

5684
apps/docs/api/store.api.json Normal file

File diff suppressed because it is too large Load diff

22193
apps/docs/api/tldraw.api.json Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,119 @@
import { ArticleDocsPage } from '@/components/ArticleDocsPage'
import { CategoryDocsPage } from '@/components/CategoryDocsPage'
import { SectionDocsPage } from '@/components/SectionDocsPage'
import { getDb } from '@/utils/ContentDatabase'
import { Metadata } from 'next'
import { notFound } from 'next/navigation'
async function getContentForPath(path: string) {
const db = await getDb()
const section = await db.db.get(`SELECT * FROM sections WHERE sections.path = ?`, path)
if (section) return { type: 'section', section } as const
const category = await db.db.get(`SELECT * FROM categories WHERE categories.path = ?`, path)
if (category) return { type: 'category', category } as const
const article = await db.db.get(`SELECT * FROM articles WHERE articles.path = ?`, path)
if (article) return { type: 'article', article } as const
throw Error(`No content found for ${path}`)
}
export async function generateMetadata({ params }: { params: { id: string | string[] } }) {
const path = typeof params.id === 'string' ? [params.id] : params.id
const pathString = '/' + path.join('/')
const content = await getContentForPath(pathString)
if (!content) return {}
let title: string | undefined
let description: string | undefined
let hero: string | undefined
switch (content.type) {
case 'section': {
const { section } = content
title = section.title
description = section.description ?? undefined
hero = section.hero ?? undefined
break
}
case 'category': {
const { category } = content
title = category.title
description = category.description ?? undefined
hero = category.hero ?? undefined
break
}
case 'article': {
const { article } = content
title = article.title
description = article.description ?? undefined
hero = article.hero ?? undefined
break
}
}
const metadata: Metadata = {
title,
description: description,
openGraph: {
title: title,
description: description,
images: hero,
},
twitter: {
description: description,
images: hero,
},
}
return metadata
}
export async function generateStaticParams() {
const db = await getDb()
const sections = await db.db.all(`SELECT * FROM sections`)
const categories = await db.db.all(`SELECT * FROM categories`)
const articles = await db.db.all(`SELECT * FROM articles`)
const paths = [] as string[]
for (const section of sections) {
paths.push(section.path)
}
for (const category of categories) {
paths.push(category.path)
}
for (const article of articles) {
paths.push(article.path)
}
return paths.map((path) => ({ params: { id: path.split('/').filter((p) => p) } }))
}
export default async function ContentPage({ params }: { params: { id: string | string[] } }) {
const path = typeof params.id === 'string' ? [params.id] : params.id
const pathString = '/' + path.join('/')
const content = await getContentForPath(pathString)
if (!content) throw notFound()
switch (content.type) {
case 'section': {
return <SectionDocsPage section={content.section} />
}
case 'category': {
return <CategoryDocsPage category={content.category} />
}
case 'article': {
return <ArticleDocsPage article={content.article} />
}
default: {
throw notFound()
}
}
}

View file

@ -0,0 +1,170 @@
import { SearchResult } from '@/types/search-types'
import { getDb } from '@/utils/ContentDatabase'
import assert from 'assert'
import { NextRequest } from 'next/server'
type Data = {
results: {
articles: SearchResult[]
apiDocs: SearchResult[]
}
status: 'success' | 'error' | 'no-query'
}
const BANNED_HEADINGS = ['new', 'constructor', 'properties', 'example', 'methods']
export async function GET(req: NextRequest) {
const { searchParams } = new URL(req.url)
const query = searchParams.get('q')?.toLowerCase()
if (!query) {
return new Response(
JSON.stringify({
results: {
articles: [],
apiDocs: [],
},
status: 'error',
error: 'No query',
}),
{
status: 400,
}
)
}
try {
const results: Data['results'] = {
articles: [],
apiDocs: [],
}
const db = await getDb()
const getVectorDb = (await import('@/utils/ContentVectorDatabase')).getVectorDb
const vdb = await getVectorDb()
const queryResults = await vdb.query(query, 25)
queryResults.sort((a, b) => b.score - a.score)
const headings = await Promise.all(
queryResults.map(async (result) => {
if (result.type !== 'heading') return // bleg
const article = await db.db.get(
`SELECT id, title, description, categoryId, sectionId, keywords FROM articles WHERE id = ?`,
result.id
)
assert(article, `No article found for heading ${result.id}`)
const category = await db.db.get(
`SELECT id, title FROM categories WHERE id = ?`,
article.categoryId
)
const section = await db.db.get(
`SELECT id, title FROM sections WHERE id = ?`,
article.sectionId
)
const heading = await db.db.get(`SELECT * FROM headings WHERE slug = ?`, result.slug)
assert(heading, `No heading found for ${result.id} ${result.slug}`)
return {
id: result.id,
article,
category,
section,
heading,
score: result.score,
}
})
)
const visited = new Set<string>()
for (const result of headings) {
if (!result) continue
if (visited.has(result.id)) continue
visited.add(result.id)
const { category, section, article, heading, score } = result
const isUncategorized = category.id === section.id + '_ucg'
if (BANNED_HEADINGS.some((h) => heading.slug.endsWith(h))) continue
results[section.id === 'gen' ? 'apiDocs' : 'articles'].push({
id: result.id,
type: 'heading',
subtitle: isUncategorized ? section.title : `${section.title} / ${category.title}`,
title:
section.id === 'gen'
? article.title + '.' + heading.title
: article.title + ': ' + heading.title,
url: isUncategorized
? `${section.id}/${article.id}#${heading.slug}`
: `${section.id}/${category.id}/${article.id}#${heading.slug}`,
score,
})
}
const articles = await Promise.all(
queryResults.map(async (result) => ({
score: result.score,
article: await db.db.get(
`SELECT id, title, description, categoryId, sectionId, keywords FROM articles WHERE id = ?`,
result.id
),
}))
)
for (const { score, article } of articles.filter(Boolean)) {
if (visited.has(article.id)) continue
visited.add(article.id)
const category = await db.db.get(
`SELECT id, title FROM categories WHERE categories.id = ?`,
article.categoryId
)
const section = await db.db.get(
`SELECT id, title FROM sections WHERE sections.id = ?`,
article.sectionId
)
const isUncategorized = category.id === section.id + '_ucg'
results[section.id === 'gen' ? 'apiDocs' : 'articles'].push({
id: article.id,
type: 'article',
subtitle: isUncategorized ? section.title : `${section.title} / ${category.title}`,
title: article.title,
url: isUncategorized
? `${section.id}/${article.id}`
: `${section.id}/${category.id}/${article.id}`,
score,
})
}
const apiDocsScores = results.apiDocs.map((a) => a.score)
const maxScoreApiDocs = Math.max(...apiDocsScores)
const minScoreApiDocs = Math.min(...apiDocsScores)
const apiDocsBottom = minScoreApiDocs + (maxScoreApiDocs - minScoreApiDocs) * 0.75
results.apiDocs
.filter((a) => a.score > apiDocsBottom)
.sort((a, b) => b.score - a.score)
.sort((a, b) => (b.type === 'heading' ? -1 : 1) - (a.type === 'heading' ? -1 : 1))
.slice(0, 10)
const articleScores = results.articles.map((a) => a.score)
const maxScoreArticles = Math.max(...articleScores)
const minScoreArticles = Math.min(...articleScores)
const articlesBottom = minScoreArticles + (maxScoreArticles - minScoreArticles) * 0.5
results.articles
.filter((a) => a.score > articlesBottom)
.sort((a, b) => b.score - a.score)
.sort((a, b) => (b.type === 'heading' ? -1 : 1) - (a.type === 'heading' ? -1 : 1))
return new Response(
JSON.stringify({
results,
status: 'success',
}),
{
status: 200,
}
)
} catch (e: any) {
return new Response(
JSON.stringify({
results: {
articles: [],
apiDocs: [],
},
status: 'error',
error: e.message,
}),
{
status: 500,
}
)
}
}

View file

@ -0,0 +1,143 @@
import { SearchResult } from '@/types/search-types'
import { getDb } from '@/utils/ContentDatabase'
import { NextRequest } from 'next/server'
type Data = {
results: {
articles: SearchResult[]
apiDocs: SearchResult[]
}
status: 'success' | 'error' | 'no-query'
}
const BANNED_HEADINGS = ['new', 'constructor', 'properties', 'example', 'methods']
function scoreResultBasedOnLengthSimilarity(title: string, query: string) {
return 1 - Math.min(1, Math.max(0, Math.abs(title.length - query.length) / 12))
}
export async function GET(req: NextRequest) {
const { searchParams } = new URL(req.url)
const query = searchParams.get('q')?.toLowerCase()
if (!query) {
return new Response(
JSON.stringify({
results: {
articles: [],
apiDocs: [],
},
status: 'no-query',
}),
{
status: 400,
}
)
}
try {
const results: Data['results'] = {
articles: [],
apiDocs: [],
}
const db = await getDb()
const queryWithoutSpaces = query.replace(/\s/g, '')
const searchForArticle = await db.db.prepare(
`
SELECT id, title, sectionId, categoryId, content
FROM articles
WHERE title LIKE '%' || ? || '%'
OR description LIKE '%' || ? || '%'
OR content LIKE '%' || ? || '%'
OR keywords LIKE '%' || ? || '%';
`,
queryWithoutSpaces,
queryWithoutSpaces,
queryWithoutSpaces
)
await searchForArticle.all(query).then(async (queryResults) => {
for (const article of queryResults) {
const isApiDoc = article.sectionId === 'gen'
const section = await db.getSection(article.sectionId)
const category = await db.getCategory(article.categoryId)
const isUncategorized = category.id === section.id + '_ucg'
results[isApiDoc ? 'apiDocs' : 'articles'].push({
id: article.id,
type: 'article',
subtitle: isUncategorized ? section.title : `${section.title} / ${category.title}`,
title: article.title,
url: isUncategorized
? `${section.id}/${article.id}`
: `${section.id}/${category.id}/${article.id}`,
score: scoreResultBasedOnLengthSimilarity(article.title, query),
})
}
})
const searchForArticleHeadings = await db.db.prepare(
`
SELECT id, title, articleId, slug
FROM headings
WHERE title LIKE '%' || ? || '%'
OR slug LIKE '%' || ? || '%'
`,
queryWithoutSpaces,
queryWithoutSpaces
)
await searchForArticleHeadings.all(queryWithoutSpaces).then(async (queryResults) => {
for (const heading of queryResults) {
if (BANNED_HEADINGS.some((h) => heading.slug.endsWith(h))) continue
const article = await db.getArticle(heading.articleId)
const isApiDoc = article.sectionId === 'gen'
const section = await db.getSection(article.sectionId)
const category = await db.getCategory(article.categoryId)
const isUncategorized = category.id === section.id + '_ucg'
results[isApiDoc ? 'apiDocs' : 'articles'].push({
id: article.id + '#' + heading.slug,
type: 'heading',
subtitle: isUncategorized ? section.title : `${section.title} / ${category.title}`,
title:
section.id === 'gen'
? article.title + '.' + heading.title
: article.title + ': ' + heading.title,
url: isUncategorized
? `${section.id}/${article.id}#${heading.slug}`
: `${section.id}/${category.id}/${article.id}#${heading.slug}`,
score: scoreResultBasedOnLengthSimilarity(article.title, query),
})
}
})
results.apiDocs.sort((a, b) => b.score - a.score)
results.articles.sort((a, b) => b.score - a.score)
results.articles.sort(
(a, b) => (b.type === 'heading' ? -1 : 1) - (a.type === 'heading' ? -1 : 1)
)
return new Response(JSON.stringify({ results, status: 'success' }), {
status: 200,
})
} catch (e: any) {
return new Response(
JSON.stringify({
results: {
articles: [],
apiDocs: [],
},
status: 'error',
error: e.message,
}),
{
status: 500,
}
)
}
}

111
apps/docs/app/cla/page.tsx Normal file
View file

@ -0,0 +1,111 @@
import { Header } from '@/components/Header'
import { Sidebar } from '@/components/Sidebar'
import { getDb } from '@/utils/ContentDatabase'
export default async function ClaPage() {
const db = await getDb()
const sidebar = await db.getSidebarContentList({})
return (
<>
<Header activeId={null} />
<Sidebar {...sidebar} />
<main className="article">
<div className="page-header">
<h1>Contributor License Agreement</h1>
</div>
<h4>Version 1.0 June 8th 2023</h4>
<p>
In order to clarify the intellectual property license granted with Contributions from any
person, tldraw, Inc. (tldraw) must have a Contributor License Agreement on file that has
been signed by each contributor, indicating agreement to the license terms below. This
license is for Your protection as a contributor as well as the protection of tldraw; it
does not change your rights to use Your own contributions for any other purpose.
</p>
<p>
You accept and agree to the following terms and conditions for Your Contributions (present
and future) that you submit to tldraw. Except for the license granted herein to tldraw,
You reserve all right, title, and interest in and to Your Contributions.{' '}
</p>
<p>1. Definitions. </p>
<p>"You" (or "Your") means the individual identified above. </p>
<p>
"Contribution" means any original work of authorship, including any modifications or
additions to an existing work, that is intentionally submitted by You to tldraw for
inclusion in, or documentation of, any of the products owned or managed by tldraw (each, a
"Work"). For the purposes of this definition, "submitted" means any form of electronic,
verbal, or written communication sent to tldraw or its representatives, including but not
limited to communication on electronic mailing lists, source code control systems, and
issue tracking systems that are managed by, or on behalf of, tldraw for the purpose of
discussing and improving the Works, but excluding communication that is conspicuously
marked or otherwise designated in writing by You as "Not a Contribution."{' '}
</p>
<p>
2. Grant of Copyright License. You hereby grant to tldraw a perpetual, worldwide,
non-exclusive, sublicensable (through multiple tiers), no-charge, royalty-free,
irrevocable copyright license to reproduce, prepare derivative works of, publicly display,
publicly perform, distribute, and otherwise exploit Your Contributions and such derivative
works.{' '}
</p>
<p>
3. Grant of Patent License. You hereby grant to tldraw a perpetual, worldwide,
non-exclusive, sublicensable (through multiple tiers), no-charge, royalty-free,
irrevocable patent license to make, have made, use, offer to sell, sell, import, and
otherwise transfer and exploit the Works, where such license applies only to those patent
claims licensable by You that are necessarily infringed by Your Contribution(s) alone or
by combination of Your Contribution(s) with the Works to which such Contribution(s) was
submitted.{' '}
</p>
<p>
4. You represent that you are legally entitled to grant the above license. If your
employer(s) has rights to intellectual property that you create that includes your
Contributions, you represent that you have received permission to make Contributions on
behalf of that employer, that your employer has waived in writing any rights it may have
in Your Contributions to tldraw, or that your employer has executed a separate Corporate
CLA with tldraw.{' '}
</p>
<p>
5. You represent that each of Your Contributions is Your original creation and does not
incorporate any material created by others. You represent that Your Contribution
submissions include complete details of any patents or copyrights which are associated
with any part of Your Contributions.{' '}
</p>
<p>
6. You are not expected to provide support for Your Contributions, except to the extent
You desire to provide support. You may provide support for free, for a fee, or not at all.
Unless required by applicable law or agreed to in writing, You provide Your Contributions
on an "as is" basis, without warranties or conditions of any kind, either express or
implied, including, without limitation, any warranties or conditions of title,
non-infringement, merchantability, or fitness for a particular purpose.{' '}
</p>
<p>
7. You agree to notify tldraw of any facts or circumstances of which you become aware (now
or in the future) that would make Your representations in this Agreement inaccurate in any
respect.
</p>
<p>
8. You acknowledge that tldraw owns all right, title, and interest in and to the Works.
Notwithstanding the foregoing, tldraws subsidiary, tldraw GB limited (the Subsidiary),
is the beneficial owner of the Works, and tldraw will sublicense its rights in your
Contributions under this Agreement to the Subsidiary in furtherance of the Subsidiarys
status as beneficial owner of the Works.
</p>
<p>
9. This Agreement is governed by the laws of Delaware, and the parties consent to
exclusive jurisdiction in the courts sitting in Delaware. The parties waive all defenses
of lack of personal jurisdiction and forum non-conveniens.
</p>
<p>
10. Entire Agreement/Assignment. This Agreement is the entire agreement between the
parties, and supersedes any and all prior agreements, understandings or communications,
written or oral, between the parties relating to the subject matter hereof. This Agreement
may be assigned by tldraw without Your prior consent.{' '}
</p>
<hr />
<p>
Questions or concerns? Email <a href="mailto://hello@tldraw.com">hello@tldraw.com.</a>
</p>
</main>
</>
)
}

87
apps/docs/app/layout.tsx Normal file
View file

@ -0,0 +1,87 @@
import { Footer } from '@/components/Footer'
import { Metadata, Viewport } from 'next'
import AutoRefresh from '../components/AutoRefresh'
import '../styles/globals.css'
import '../styles/hljs.css'
import '../styles/parameters-table.css'
import { Providers } from './providers'
const TITLE = 'tldraw docs'
const DESCRIPTION =
'Developer documentation for tldraw. Build infinite canvas experiences for the web.'
const TWITTER_HANDLE = '@tldraw'
const TWITTER_CARD = 'social-twitter.png'
const FACEBOOK_CARD = 'social-og.png'
const THEME_COLOR = '#FFFFFF'
export const metadata: Metadata = {
metadataBase: new URL('https://www.tldraw.dev'),
title: {
default: TITLE,
template: `%s • ${TITLE}`,
},
description: DESCRIPTION,
openGraph: {
title: TITLE,
description: DESCRIPTION,
siteName: TITLE,
type: 'website',
url: 'https://tldraw.dev',
images: FACEBOOK_CARD,
},
twitter: {
creator: TWITTER_HANDLE,
description: DESCRIPTION,
card: 'summary_large_image',
images: TWITTER_CARD,
},
applicationName: TITLE,
appleWebApp: {
capable: true,
title: TITLE,
statusBarStyle: 'black',
},
formatDetection: {
telephone: false,
},
icons: [
{ rel: 'mask-icon', url: 'safari-pinned-tab.svg', color: THEME_COLOR },
{ rel: 'shortcut icon', url: '/favicon.svg' },
{ rel: 'icon', url: 'favicon-32x32.png', sizes: '32x32' },
{ rel: 'icon', url: 'favicon-16x16.png', sizes: '16x16' },
{ rel: 'apple-touch-icon', url: 'touch-icon-iphone.png' },
{ rel: 'apple-touch-icon', url: 'apple-touch-icon-152x152.png', sizes: '152x152' },
{ rel: 'apple-touch-icon', url: 'apple-touch-icon-180x180.png', sizes: '180x180' },
{ rel: 'apple-touch-icon', url: 'apple-touch-icon-167x167.png', sizes: '167x167' },
],
}
export const viewport: Viewport = {
initialScale: 1,
maximumScale: 1,
width: 'device-width',
height: 'device-height',
themeColor: THEME_COLOR,
}
export default async function RootLayout({ children }: { children: React.ReactNode }) {
return (
<AutoRefresh>
<html suppressHydrationWarning>
<body>
<Providers>
<div className="wrapper">
<div className="layout">{children}</div>
<Footer />
</div>
</Providers>
</body>
<script
async
src="https://tag.clearbitscripts.com/v1/pk_98af4b0c7c25466da0035c32bc6789bd/tags.js"
referrerPolicy="strict-origin-when-cross-origin"
/>
</html>
</AutoRefresh>
)
}

View file

@ -0,0 +1,90 @@
import { Header } from '@/components/Header'
import { Sidebar } from '@/components/Sidebar'
import { getDb } from '@/utils/ContentDatabase'
export default async function LicensePage() {
const db = await getDb()
const sidebar = await db.getSidebarContentList({})
return (
<>
<Header activeId={null} />
<Sidebar {...sidebar} />
<main className="article">
<div className="page-header">
<h1>tldraw License</h1>
</div>
<p>
This License governs use of the accompanying Software, and your use of the Software
constitutes acceptance of this license.
</p>
<p>
You may use this Software for any non-commercial purpose, subject to the restrictions in
this license. Some purposes which can be non- commercial are teaching, academic research,
and personal experimentation.
</p>
<p>
You may not use or distribute this Software or any derivative works in any form for
commercial purposes. Examples of commercial purposes would be running business operations,
licensing, leasing, or selling the Software, distributing the Software for use with
commercial products or for internal products within commercial entities, or otherwise
using the Software in any way that provides you with a commercial benefit.
</p>
<p>To purchase an alternative license for commercial use, contact hello@tldraw.com.</p>
<p>
Subject to your compliance with the restrictions and obligations in this License, you may
modify this Software and distribute the modified Software for non-commercial purposes,
however, you may not grant rights to the Software or derivative works that are broader
than those provided by this License. For example, you may not distribute modifications of
the Software under terms that provide a commercial benefit to you, permit commercial use,
or under terms that purport to require the Software or derivative works to be sublicensed
to others.
</p>
<p>In return for these conditions of use, you agree:</p>
<p>Not to remove any copyright or other notices from the Software.</p>
<p>
That if you distribute the Software in source or object form, you will include a verbatim
copy of this license.
</p>
<p>
That if you distribute derivative works of the Software in source code form you do so only
under a license that includes all of the provisions of this License, and if you distribute
derivative works of the Software solely in object form you must make the source code form
available upon request and do so only under a license that complies with this License.
</p>
<p>
That that the word "tldraw" shall not be used to refer to any derivative works of the
Software except in the phrase "Based on the tldraw library (https://tldraw.com)", provided
such phrase is not used to promote the derivative works or to imply that tldraw endorses
you or the derivative works.
</p>
<p>
THAT THE SOFTWARE COMES "AS IS", WITH NO WARRANTIES. THIS MEANS NO EXPRESS, IMPLIED OR
STATUTORY WARRANTY, INCLUDING WITHOUT LIMITATION, WARRANTIES OF MERCHANTABILITY OR FITNESS
FOR A PARTICULAR PURPOSE OR ANY WARRANTY OF TITLE OR NON-INFRINGEMENT. ALSO, YOU MUST PASS
THIS DISCLAIMER ON WHENEVER YOU DISTRIBUTE THE SOFTWARE OR DERIVATIVE WORKS.
</p>
<p>
THAT TLDRAW WILL NOT BE LIABLE FOR ANY DAMAGES RELATED TO THE SOFTWARE OR THIS LICENSE,
INCLUDING DIRECT, INDIRECT, SPECIAL, CONSEQUENTIAL OR INCIDENTAL DAMAGES, TO THE MAXIMUM
EXTENT THE LAW PERMITS, NO MATTER WHAT LEGAL THEORY IT IS BASED ON. ALSO, YOU MUST PASS
THIS LIMITATION OF LIABILITY ON WHENEVER YOU DISTRIBUTE THE SOFTWARE OR DERIVATIVE WORKS.
</p>
<p>
That if you sue anyone over patents that you think may apply to the Software or anyones
use of the Software, your license to the Software ends automatically.
</p>
<p>That your rights under the License end automatically if you breach it in any way.</p>
<p>tldraw reserves all rights not expressly granted to you in this license.</p>
<hr />
<p>
Questions? Email <a href="mailto:hello@tldraw.com">hello@tldraw.com.</a>
</p>
<hr />
<p>
Questions or concerns? Email <a href="mailto://hello@tldraw.com">hello@tldraw.com.</a>
</p>
</main>
</>
)
}

View file

@ -0,0 +1,21 @@
import { Header } from '@/components/Header'
import { Sidebar } from '@/components/Sidebar'
import { getDb } from '@/utils/ContentDatabase'
export default async function NotFound() {
const db = await getDb()
const sidebar = await db.getSidebarContentList({})
return (
<>
<Header activeId={null} />
<Sidebar {...sidebar} />
<main className="article">
<div className="page-header">
<h1>Not found.</h1>
</div>
<p>There's nothing here. :(</p>
</main>
</>
)
}

10
apps/docs/app/page.tsx Normal file
View file

@ -0,0 +1,10 @@
import { ArticleDocsPage } from '@/components/ArticleDocsPage'
import { getDb } from '@/utils/ContentDatabase'
import { notFound } from 'next/navigation'
export default async function HomePage() {
const db = await getDb()
const article = await db.db.get(`SELECT * FROM articles WHERE articles.path = ?`, `/introduction`)
if (article) return <ArticleDocsPage article={article} />
throw notFound()
}

View file

@ -0,0 +1,7 @@
'use client'
import { ThemeProvider } from 'next-themes'
export function Providers({ children }: { children: any }) {
return <ThemeProvider>{children}</ThemeProvider>
}

View file

@ -0,0 +1,97 @@
import { Header } from '@/components/Header'
import { Sidebar } from '@/components/Sidebar'
import { SearchResult } from '@/types/search-types'
import { getDb } from '@/utils/ContentDatabase'
import Link from 'next/link'
import process from 'process'
const HOST_URL =
process.env.NODE_ENV === 'development'
? 'http://localhost:3001'
: process.env.NEXT_PUBLIC_SITE_URL ?? 'https://www.tldraw.dev'
export default async function SearchResultsPage({
searchParams,
}: {
searchParams: { q: string; t: string }
}) {
const query = searchParams.q?.toString() as string
const type = searchParams.t?.toString() as string
const db = await getDb()
const sidebar = await db.getSidebarContentList({})
let results: {
articles: SearchResult[]
apiDocs: SearchResult[]
error: null | string
} = {
articles: [],
apiDocs: [],
error: null,
}
if (query) {
const endPoint =
type === 'ai' ? `${HOST_URL}/api/ai?q=${query}` : `${HOST_URL}/api/search?q=${query}`
const res = await fetch(endPoint)
if (!res.ok) {
results.error = await res.text()
} else {
const json = await res.json()
results = json.results
}
}
return (
<>
<Header activeId={null} searchQuery={query} searchType={type} />
<Sidebar {...sidebar} />
<main className="article list">
<div className="page-header">
<h2>{`Found ${
results.articles.length + results.apiDocs.length
} results for "${query}"`}</h2>
<div className="search__results__switcher">
{type === 'ai' ? (
<Link href={`/search-results?q=${query}&t=n`}>Search again using exact match...</Link>
) : (
// TODO: replace emoji with icon
<Link href={`/search-results?q=${query}&t=ai`}> Search again using AI...</Link>
)}
</div>
</div>
<ResultsList results={results.articles} type={type} />
{results.articles.length > 0 && results.apiDocs.length > 0 && (
<>
<hr />
<h2>API Docs</h2>
</>
)}
{results.apiDocs.length > 0 && <ResultsList results={results.apiDocs} type={type} />}
</main>
</>
)
}
function ResultsList({ results, type }: { results: SearchResult[]; type?: string }) {
return (
<ul className="search__results__list">
{results.map((result) => (
<Link className="search__results__link" key={result.id} href={`${result.url}`}>
<li className="search__results__article">
<div className="search__results__article__details">
<h4>{result.subtitle}</h4>
{type === 'ai' && (
<span className="search__results__article__score">
{(result.score * 100).toFixed()}%
</span>
)}
</div>
<h3>{result.title}</h3>
</li>
</Link>
))}
</ul>
)
}

View file

@ -0,0 +1,39 @@
import { Article } from '@/types/content-types'
import { getDb } from '@/utils/ContentDatabase'
import { ArticleNavLinks } from './ArticleNavLinks'
import { Breadcrumb } from './Breadcrumb'
import { Header } from './Header'
import { HeadingLinks } from './HeadingLinks'
import { Mdx } from './Mdx'
import { Sidebar } from './Sidebar'
import { Image } from './mdx-components/generic'
export async function ArticleDocsPage({ article }: { article: Article }) {
const db = await getDb()
const section = await db.getSection(article.sectionId)
const category = await db.getCategory(article.categoryId)
const headings = await db.getArticleHeadings(article.id)
const links = await db.getArticleLinks(article)
const sidebar = await db.getSidebarContentList({
sectionId: section.id,
categoryId: category.id,
articleId: article.id,
})
return (
<>
<Header activeId={article.id} />
<Sidebar {...sidebar} />
<main className={`article${section.id === 'gen' ? ' article__api-docs' : ''}`}>
<div className="page-header">
<Breadcrumb section={section} category={category} />
<h1>{article.title}</h1>
</div>
{article.hero && <Image alt="hero" title={article.title} src={`images/${article.hero}`} />}
{article.content && <Mdx content={article.content} />}
{links && <ArticleNavLinks links={links} />}
</main>
{headings.length > 0 ? <HeadingLinks article={article} headingLinks={headings} /> : null}
</>
)
}

View file

@ -0,0 +1,26 @@
import { ArticleLinks } from '@/types/content-types'
import Link from 'next/link'
import { Icon } from './Icon'
type ArticleNavLinksProps = {
links: ArticleLinks
}
export async function ArticleNavLinks({ links: { prev, next } }: ArticleNavLinksProps) {
return (
<div className="article__links">
{prev && (
<Link href={prev.path ?? '/'} className="article__links__link article__links__prev">
<Icon icon="arrow-left" />
<span>{prev.title}</span>
</Link>
)}
{next && (
<Link href={next.path ?? '/'} className="article__links__link article__links__next">
<span>{next.title}</span>
<Icon icon="arrow-right" />
</Link>
)}
</div>
)
}

View file

@ -0,0 +1,29 @@
'use client'
import { useRouter } from 'next/navigation'
import { useEffect } from 'react'
let AutoRefresh = ({ children }: { children: any }) => {
return children
}
if (process.env.NODE_ENV === 'development') {
AutoRefresh = function AutoRefresh({ children }) {
const router = useRouter()
useEffect(() => {
const ws = new WebSocket('ws://localhost:3201')
ws.onmessage = (event) => {
if (event.data === 'refresh') {
router.refresh()
}
}
return () => {
ws.close()
}
}, [router])
return children
}
}
export default AutoRefresh

View file

@ -0,0 +1,28 @@
import { Category, Section } from '@/types/content-types'
import Link from 'next/link'
export function Breadcrumb({ section, category }: { section?: Section; category?: Category }) {
return (
<div className="breadcrumb">
{section && (
<>
{section.title && section.id === 'getting-started' ? (
section.title
) : (
<Link href={`/${section.id}`}>{section.title}</Link>
)}
{category && (
<>
{category.id === section.id + '_ucg' ? null : (
<>
{` / `}
<Link href={`/${section.id}/${category.id}`}>{category.title}</Link>
</>
)}
</>
)}
</>
)}
</div>
)
}

View file

@ -0,0 +1,35 @@
import { Category } from '@/types/content-types'
import { getDb } from '@/utils/ContentDatabase'
import Link from 'next/link'
import { Breadcrumb } from './Breadcrumb'
import { Header } from './Header'
import { Sidebar } from './Sidebar'
export async function CategoryDocsPage({ category }: { category: Category }) {
const db = await getDb()
const section = await db.getSection(category.sectionId)
const sidebar = await db.getSidebarContentList({ sectionId: category.sectionId })
const articles = await db.getCategoryArticles(section.id, category.id)
return (
<>
<Header activeId={category.id} />
<Sidebar {...sidebar} />
<main className={'article'}>
<div className="page-header">
<Breadcrumb section={section} category={category} />
<h1>{category.title}</h1>
</div>
{articles.length > 0 && (
<ul>
{articles.map((article) => (
<Link key={article.id} href={`/${section.id}/${category.id}/${article.id}`}>
<li>{article.title}</li>
</Link>
))}
</ul>
)}
</main>
</>
)
}

View file

@ -0,0 +1,44 @@
'use client'
import { debounce } from '@/utils/debounce'
import { useEffect, useRef, useState } from 'react'
export default function FancyBox() {
const rContainer = useRef<HTMLDivElement>(null)
const [items, setItems] = useState<number[]>([])
useEffect(() => {
const populate = debounce(() => {
const elm = rContainer.current
if (!elm) return
const width = elm.clientWidth
const height = elm.clientHeight
const SIZE = 32
const cols = Math.ceil(width / SIZE)
const rows = Math.ceil(height / SIZE)
const items = Array.from(Array(cols * rows)).map((_, i) => i)
setItems(items)
}, 100)
populate()
window.addEventListener('resize', populate)
return () => {
window.removeEventListener('resize', populate)
}
}, [])
return (
<div className="footer__fancybox" ref={rContainer}>
{items.map((i) => {
const c = 1 + (i % 7)
return <div key={i} className="footer__fancybox__item" data-c={c} />
})}
</div>
)
}

View file

@ -0,0 +1,45 @@
import dynamic from 'next/dynamic'
import { Icon } from './Icon'
const FancyBox = dynamic(async () => await import('./FancyBox'), { ssr: false })
export function Footer() {
return (
<div className="footer">
<FancyBox />
<a className="footer__lockup" href="https://tldraw.com">
<span
className="footer__lockup__icon"
style={{
mask: `url(/tldraw-icon.svg) center 100% / 100% no-repeat`,
WebkitMask: `url(/tldraw-icon.svg) center 100% / 100% no-repeat`,
}}
/>
<p>tldraw © 2023</p>
</a>
<div className="footer__socials">
<a
href="https://twitter.com/tldraw"
className="sidebar__button icon-button"
title="twitter"
>
<Icon icon="twitter" />
</a>
<a
href="https://github.com/tldraw/tldraw"
className="sidebar__button icon-button"
title="github"
>
<Icon icon="github" />
</a>
<a
href="https://discord.com/invite/SBBEVCA4PG"
className="sidebar__button icon-button"
title="discord"
>
<Icon icon="discord" />
</a>
</div>
</div>
)
}

View file

@ -0,0 +1,53 @@
import Link from 'next/link'
import { Icon } from './Icon'
import { Search } from './Search'
import { ThemeSwitcher } from './ThemeSwitcher'
export function Header({
activeId,
searchQuery,
searchType,
}: {
activeId: string | null
searchQuery?: string
searchType?: string
}) {
return (
<div className="layout__header">
<Link href="/">
<div
className="lockup"
style={{
mask: `url(/lockup.svg) center 100% / 100% no-repeat`,
WebkitMask: `url(/lockup.svg) center 100% / 100% no-repeat`,
}}
/>
</Link>
<Search activeId={activeId} prevQuery={searchQuery} prevType={searchType} />
<div className="layout__header__socials">
<a
href="https://twitter.com/tldraw"
className="sidebar__button icon-button"
title="twitter"
>
<Icon icon="twitter" />
</a>
<a
href="https://github.com/tldraw/tldraw"
className="sidebar__button icon-button"
title="github"
>
<Icon icon="github" />
</a>
<a
href="https://discord.com/invite/SBBEVCA4PG"
className="sidebar__button icon-button"
title="discord"
>
<Icon icon="discord" />
</a>
<ThemeSwitcher />
</div>
</div>
)
}

View file

@ -0,0 +1,43 @@
/* eslint-disable no-useless-escape */
import { Article, ArticleHeadings } from '@/types/content-types'
import Link from 'next/link'
export function HeadingLinks({
article,
headingLinks,
}: {
article: Article
headingLinks: ArticleHeadings
}) {
return (
<nav className="layout__headings">
<ul className="sidebar__list sidebar__sections__list" key={article.id}>
<li className="sidebar__section">
<div className="sidebar__section__title" data-active={false}>
On this page
</div>
<ul className="sidebar__list">
{headingLinks
.filter((heading) => heading.level < 4)
.map((heading) => (
<li className="sidebar__article" key={heading.slug}>
<Link href={`#${heading.slug}`} className="sidebar__link">
{heading.level > 2 ? (
<span className="sidebar__link__indent">{' '}</span>
) : null}
<span className="sidebar__link__title">
{heading.isCode ? (
<code>{heading.title.replace(/\[([^\]]+)\]\([^\)]+\)/g, '$1')}</code>
) : (
heading.title.replace(/\[([^\]]+)\]\([^\)]+\)/g, '$1')
)}
</span>
</Link>
</li>
))}
</ul>
</li>
</ul>
</nav>
)
}

View file

@ -0,0 +1,3 @@
export function HeroImage() {
return <></>
}

View file

@ -0,0 +1,19 @@
export function Icon({
icon,
className,
small,
}: {
small?: boolean
icon: string
className?: string
}) {
return (
<span
className={`icon ${small ? 'small ' : ''}${className ?? ''}`}
style={{
mask: `url(/icons/${icon}.svg) center 100% / 100% no-repeat`,
WebkitMask: `url(/icons/${icon}.svg) center 100% / 100% no-repeat`,
}}
/>
)
}

View file

@ -0,0 +1,30 @@
import { MDXRemote } from 'next-mdx-remote/rsc'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import rehypeHighlight from 'rehype-highlight'
import rehypeSlug from 'rehype-slug-custom-id'
import { components } from './mdx-components'
interface MdxProps {
content: string
}
export function Mdx({ content }: MdxProps) {
return (
<MDXRemote
source={content}
components={components}
options={{
mdxOptions: {
// remarkPlugins: [remarkGfm, {}],
rehypePlugins: [
[rehypeHighlight as any, {}],
[rehypeAutolinkHeadings, {}],
[rehypeSlug, { enableCustomId: true, maintainCase: true, removeAccents: true }],
],
format: 'mdx',
},
parseFrontmatter: true,
}}
/>
)
}

View file

@ -0,0 +1,78 @@
'use client'
import { usePathname, useRouter } from 'next/navigation'
import { useCallback, useEffect, useRef, useState } from 'react'
import { useHotkeys } from 'react-hotkeys-hook'
import { Icon } from './Icon'
export function Search({
prevType = 'n',
prevQuery = '',
}: {
activeId: string | null
prevType?: string
prevQuery?: string
}) {
const [query, setQuery] = useState(prevQuery)
const [isDisabled, setIsDisabled] = useState(false)
const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
setQuery(e.target.value)
}, [])
const rInput = useRef<HTMLInputElement>(null)
const pathName = usePathname()
const router = useRouter()
useHotkeys('meta+k,ctrl+k', (e) => {
e.preventDefault()
rInput.current?.focus()
rInput.current?.select()
})
useEffect(() => {
setIsDisabled(false)
}, [pathName])
const handleFocus = useCallback(() => {
// focus input and select all
rInput.current!.focus()
rInput.current!.select()
}, [])
const handleKeyDown = useCallback(
(e: React.KeyboardEvent) => {
const currentQuery = rInput.current!.value
if (e.key === 'Enter' && currentQuery !== prevQuery) {
setIsDisabled(true)
router.push(`/search-results?q=${currentQuery}&t=${prevType}`)
} else if (e.key === 'Escape') {
rInput.current!.blur()
}
},
[router, prevQuery, prevType]
)
return (
<div className="search__wrapper">
<div className="search">
<Icon className="search__icon" icon="search" small />
<input
ref={rInput}
type="text"
className="search__input"
placeholder="Search..."
value={query}
onChange={handleChange}
onFocus={handleFocus}
onKeyDown={handleKeyDown}
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
disabled={isDisabled}
/>
</div>
</div>
)
}

View file

@ -0,0 +1,66 @@
import { Article, Category, Section } from '@/types/content-types'
import { getDb } from '@/utils/ContentDatabase'
import Link from 'next/link'
import { Header } from './Header'
import { Sidebar } from './Sidebar'
export async function SectionDocsPage({ section }: { section: Section }) {
const db = await getDb()
const sidebar = await db.getSidebarContentList({ sectionId: section.id })
const categories = [] as Category[]
const articles: Article[] = []
const sectionCategories = await db.getCategoriesForSection(section.id)
for (const category of sectionCategories) {
if (category.id === section.id + '_ucg') {
const categoryArticles = await db.getCategoryArticles(section.id, category.id)
for (const article of categoryArticles) {
articles.push(article)
}
} else {
// If the count of articles for this category is greater than zero...
const articleCount = await db.getCategoryArticlesCount(section.id, category.id)
if (articleCount > 0) {
categories.push(category)
}
}
}
return (
<>
<Header activeId={section.id} />
<Sidebar {...sidebar} />
<main className="article">
<div className="page-header">
<h1>{section.title}</h1>
</div>
{articles.length > 0 && (
<ul>
{articles.map((articleLink) => {
return (
<Link key={articleLink.id} href={articleLink.path!}>
<li>{articleLink.title}</li>
</Link>
)
})}
</ul>
)}
{categories.length > 0 && (
<ul>
{categories.map((category) =>
category.id === 'ucg' ? null : (
<Link key={category.id} href={`/${section.id}/${category.id}`}>
{category.id === 'ucg' ? null : <li>{category.title}</li>}
</Link>
)
)}
</ul>
)}
</main>
</>
)
}

View file

@ -0,0 +1,119 @@
'use client'
import {
SidebarContentArticleLink,
SidebarContentCategoryLink,
SidebarContentLink,
SidebarContentList,
SidebarContentSectionLink,
} from '@/types/content-types'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { createContext, useContext, useEffect } from 'react'
import { Search } from './Search'
import { SidebarCloseButton } from './SidebarCloseButton'
import { ToggleMenuButton } from './ToggleMenuButton'
type SidebarProps = SidebarContentList
const activeLinkContext = createContext<string | null>(null)
export function Sidebar({ links, sectionId, categoryId, articleId }: SidebarProps) {
const activeId = articleId ?? categoryId ?? sectionId
const pathName = usePathname()
useEffect(() => {
document.body.classList.remove('sidebar-open')
}, [pathName])
return (
<>
<activeLinkContext.Provider value={activeId}>
<div className="sidebar" onScroll={(e) => e.stopPropagation()}>
<Search activeId={activeId} />
<SidebarLinks links={links} />
<SidebarCloseButton />
</div>
<ToggleMenuButton />
</activeLinkContext.Provider>
</>
)
}
export function SidebarLinks({ links }: { links: SidebarContentLink[] }) {
return (
<nav className="sidebar__nav">
<ul className="sidebar__list sidebar__sections__list">
{links.map((link) => (
<SidebarLink key={link.url} {...link} />
))}
</ul>
</nav>
)
}
function SidebarLink(props: SidebarContentLink) {
switch (props.type) {
case 'section': {
return <SidebarSection {...props} />
}
case 'article': {
return <SidebarArticle {...props} />
}
case 'category': {
return <SidebarCategory {...props} />
}
}
}
function SidebarSection({ title, children }: SidebarContentSectionLink) {
if (children.length === 0) return null
return (
<li className="sidebar__section">
{title && (
<Link href={children[0].url} title={title} className="sidebar__section__title">
{title}
</Link>
)}
<ul className="sidebar__list">
{children.map((link) => (
<SidebarLink key={link.url} {...link} />
))}
</ul>
</li>
)
}
function SidebarCategory({ title, children }: SidebarContentCategoryLink) {
if (children.length === 0) return null
return (
<li className="sidebar__category">
<Link href={children[0].url} title={title} className="sidebar__link">
{title}
</Link>
<ul className="sidebar__list">
{children.map((link) => (
<SidebarLink key={link.url} {...link} />
))}
</ul>
<hr />
</li>
)
}
function SidebarArticle({ title, url, articleId }: SidebarContentArticleLink) {
const isActive = useContext(activeLinkContext) === articleId
return (
<li className="sidebar__article">
<Link href={url}>
<div className="sidebar__link" data-active={isActive}>
{title}
</div>
</Link>
</li>
)
}

View file

@ -0,0 +1,15 @@
import { Icon } from './Icon'
export function SidebarCloseButton() {
return (
<div className="sidebar__close">
<span onClick={() => document.body.classList.toggle('sidebar-open')}>Close</span>
<button
className="icon-button"
onClick={() => document.body.classList.toggle('sidebar-open')}
>
<Icon icon="close" small />
</button>
</div>
)
}

View file

@ -0,0 +1,17 @@
'use client'
import { useTheme } from 'next-themes'
import { Icon } from './Icon'
export function ThemeSwitcher() {
const { theme, setTheme } = useTheme()
return (
<button
className="sidebar__button icon-button"
onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
>
<Icon icon="light" />
</button>
)
}

View file

@ -0,0 +1,12 @@
import { Icon } from './Icon'
export function ToggleMenuButton() {
return (
<button
className="menu__button icon-button"
onClick={() => document.body.classList.toggle('sidebar-open')}
>
<Icon icon="menu" small />
</button>
)
}

View file

@ -0,0 +1 @@
export {}

View file

@ -0,0 +1,29 @@
import { ReactNode } from 'react'
export function ParametersTable({ children }: { children: ReactNode }) {
return (
<div className="article__parameters-table__wrapper">
<table className="article__parameters-table">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>{children}</tbody>
</table>
</div>
)
}
export function ParametersTableRow({ children }: { children: ReactNode }) {
return <tr className="article__parameters-table__row">{children}</tr>
}
export function ParametersTableName({ children }: { children: ReactNode }) {
return <td className="article__parameters-table__name">{children}</td>
}
export function ParametersTableDescription({ children }: { children: ReactNode }) {
return <td className="article__parameters-table__description">{children}</td>
}

View file

@ -0,0 +1,149 @@
/* ---------------------- Lists --------------------- */
import React from 'react'
export const UnorderedList = (props: any) => {
return <ul {...props} />
}
export const OrderedList = (props: any) => {
return <ol {...props} />
}
export const ListItem = (props: any) => {
return <li {...props} />
}
/* ------------------- Typography ------------------- */
type Heading = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
function heading(heading: Heading, props: any) {
const Element = ({ ...props }) => React.createElement(heading, props)
if (props.id) {
return (
<Element {...props}>
<a className="anchor" href={`#${props.id}`}>
{props.children}
</a>
</Element>
)
}
return <Element {...props} />
}
export const Heading1 = (props: any) => {
return heading('h1', props)
}
export const Heading2 = (props: any) => {
return heading('h2', props)
}
export const Heading3 = (props: any) => {
return heading('h3', props)
}
export const Heading4 = (props: any) => {
return heading('h4', props)
}
export const Heading5 = (props: any) => {
return heading('h5', props)
}
export const Heading6 = (props: any) => {
return heading('h6', props)
}
export const Paragraph = (props: any) => {
return <p {...props} />
}
export const A = (props: any) => {
return <a {...props} />
}
export const Divider = (props: any) => {
return <hr {...props} />
}
export const Blockquote = (props: any) => {
return <blockquote {...props} />
}
export const Small = (props: any) => {
return (
<p className="article__small">
<small {...props} />
</p>
)
}
/* --------------------- Tables --------------------- */
export const Table = (props: any) => {
return <table {...props} />
}
export const THead = (props: any) => {
return <thead {...props} />
}
export const TR = (props: any) => {
return <tr {...props} />
}
export const TD = (props: any) => {
return <td {...props} />
}
/* --------------------- Media --------------------- */
export const Image = (props: any) => {
return (
<a className="article__image" href={props.href ?? props.src}>
<img alt={props.title} {...props} />
{props.caption && <span className="article__caption">{props.caption}</span>}
</a>
)
}
export const Video = (props: any) => {
return (
<span className="article__video">
<video alt={props.title} {...props} />
{props.caption && <span className="article__caption">{props.caption}</span>}
</span>
)
}
/* ------------------- Code Blocks ------------------ */
export const Pre = (props: any) => {
return <pre {...props} />
}
export const Code = (props: any) => {
return <code {...props} />
}
export const Footnotes = (props: any) => {
return <div {...props} />
}
/* -------------------- API docs -------------------- */
export const ApiHeading = (props: any) => {
return <div className="article__api-heading" {...props} />
}
export const Embed = (props: any) => {
return (
<div className="article__embed">
<iframe className="iframe" src={props.src} width="100%" height="600p" frameBorder="0" />
{props.caption && <span className="article__caption">{props.caption}</span>}
</div>
)
}

View file

@ -0,0 +1,55 @@
import * as customComponents from '../article-components'
import * as apiComponents from './api-docs'
import {
A,
ApiHeading,
Blockquote,
Divider,
Embed,
Heading1,
Heading2,
Heading3,
Heading4,
Heading5,
Heading6,
Image,
ListItem,
OrderedList,
Paragraph,
Small,
TD,
THead,
TR,
Table,
UnorderedList,
Video,
} from './generic'
export const components = {
h1: Heading1,
h2: Heading2,
h3: Heading3,
h4: Heading4,
h5: Heading5,
h6: Heading6,
blockquote: Blockquote,
hr: Divider,
a: A,
p: Paragraph,
table: Table,
thead: THead,
tr: TR,
td: TD,
video: Video,
ol: OrderedList,
ul: UnorderedList,
li: ListItem,
img: Image,
Small: Small,
Image,
Video,
Embed,
ApiHeading,
...customComponents,
...apiComponents,
}

4
apps/docs/content.d.ts vendored Normal file
View file

@ -0,0 +1,4 @@
declare module '*/content.json' {
const content: any
export default content
}

View file

@ -0,0 +1,23 @@
[
{
"id": "steveruizok",
"name": "Steve Ruiz",
"email": "steve@tldraw.com",
"twitter": "steveruizok",
"image": "steve_ruiz.jpg"
},
{
"id": "tldraw",
"name": "tldraw",
"email": "hello@tldraw.com",
"twitter": "tldraw",
"image": "tldraw.jpg"
},
{
"id": "api",
"name": "API",
"email": "hello@tldraw.com",
"twitter": "tldraw",
"image": "api.jpg"
}
]

View file

@ -0,0 +1,13 @@
---
title: Contributing
status: published
author: steveruizok
date: 3/22/2023
order: 1
---
Interested in contributing to the project?
You can find tldraw's source code on GitHub at [github.com/tldraw/tldraw](https://github.com/tldraw/tldraw). See our [Contributing guide](https://github.com/tldraw/tldraw/blob/main/CONTRIBUTING.md) for more information.
To contribute translations to the project, please see our [translations guide](/translations).

View file

@ -0,0 +1,20 @@
---
title: License
status: published
author: steveruizok
date: 11/7/2023
order: 2
---
tldraw uses a dual licensing model to support the development of the project.
The project's source code, libraries, and distributions are provided under the [tldraw licence](https://github.com/tldraw/tldraw/blob/master/LICENSE.md).
This license does not permit commercial use. If you wish to use this project in commercial product or enterprise, you need to purchase a commercial license.
To purchase a commercial license, or for more information, please contact us at [hello@tldraw.com](mailto:hello@tldraw.com).
## Trademarks
While the copyright to our open source software is licensed under the tldraw license, our trademarks appearing in or on the open source software are the exclusive property of tldraw. Our open source license does not include a license to use our trademarks.
Please see our [trademark policy](https://github.com/tldraw/tldraw/blob/master/TRADEMARKS.md) for more information.

View file

@ -0,0 +1,13 @@
---
title: Translations
status: published
author: steveruizok
date: 11/7/2023
order: 0
---
The tldraw user interface (in [@tldraw/ui](/docs/user-interface)) is currently translated into over thirty different languages, with twenty languages at above 70% completion. Where a key's translation is missing in the user's current language language, the default (English) translation will be used instead.
## Contributing translations
We manage our translations through [Lokalise](https://www.lokalise.com), a long-time tldraw sponsor. If you would like to help by translating or reviewing translations, please let us know on [Discord](https://discord.gg/sKNgCZyrrf) so that we can add you to the project.

View file

@ -0,0 +1,26 @@
---
title: Assets
status: published
author: steveruizok
date: 6/9/2023
order: 3
keywords:
- image
- video
- file
- images
- videos
- files
---
Assets are dynamic records that store data about a shared asset. For example, our image and video shapes refer to assets rather than embedding their source files directly. This is essential because, by default, these asset sources are stored in base64 data.
You can use assets for any shared piece of information, however they're best used for images, videos, and files.
## Examples
While we're working on docs for this part of the project, please refer to the examples below:
- [Using images hosted](https://github.com/tldraw/tldraw/blob/main/apps/examples/src/examples/HostedImagesExample.tsx)
- [Customizing the default asset options](https://github.com/tldraw/tldraw/blob/main/apps/examples/src/examples/AssetOptionsExample.tsx)
- [Handling pasted / dropped external content](https://github.com/tldraw/tldraw/blob/main/apps/examples/src/examples/ExternalContentSourcesExample.tsx)

View file

@ -0,0 +1,9 @@
---
title: Collaboration
status: published
author: steveruizok
date: 3/22/2023
order: 8
---
See the [tldraw-yjs example](https://github.com/tldraw/tldraw-yjs-example) for an example of how to use yjs with the `@tldraw/tldraw` library.

View file

@ -0,0 +1,305 @@
---
title: Editor
status: published
author: steveruizok
date: 3/22/2023
order: 1
keywords:
- ui
- app
- editor
- control
- select
---
The [Editor](?) class is the main way of controlling tldraw's editor. You can use it to manage the editor's internal state, make changes to the document, or respond to changes that have occurred.
By design, the [Editor](?)'s surface area is very large. Almost everything is available through it. Need to create some shapes? Use [Editor#createShapes](?). Need to delete them? Use [Editor#deleteShapes](?). Need a sorted array of every shape on the current page? Use [Editor#getCurrentPageShapesSorted](?).
This page gives a broad idea of how the [Editor](?) class is organized and some of the architectural concepts involved. The full reference is available in the [Editor](?) API.
## Store
The editor holds the raw state of the document in its [Editor#store](?) property. Data is kept here as a table of JSON serializable records.
For example, the store contains a [TLPage](?) record for each page in the current document, as well as an [TLInstancePageState](?) record for each page that stores information about the editor's state for that page, and a single [TLInstance](?) for each editor instance which stores the id of the user's current page.
The editor also exposes many _computed_ values which are derived from other records in the store. For example, [Editor#getSelectedShapeIds](?) is a method that returns the editor's current selected shape ids for its current page.
You can use these properties directly or you can use them in signals.
```tsx
import { track, useEditor } from '@tldraw/tldraw'
export const SelectedShapeIdsCount = track(() => {
const editor = useEditor()
return <div>{editor.getSelectedShapeIds().length}</div>
})
```
### Changing the state
The [Editor](?) class has many methods for updating its state. For example, you can change the current page's selection using [Editor#setSelectedShapes](?). You can also use other convenience methods, such as [Editor#select](?), [Editor#selectAll](?), or [Editor#selectNone](?).
```ts
editor.selectNone()
editor.select(myShapeId, myOtherShapeId)
editor.getSelectedShapeIds() // [myShapeId, myOtherShapeId]
```
Each change to the state happens within a transaction. You can batch changes into a single transaction using the [Editor#batch](?) method. It's a good idea to batch wherever possible, as this reduces the overhead for persisting or distributing those changes.
### Listening for changes
You can subscribe to changes using the [Store#listen](?) method on [Editor#store](?). Each time a transaction completes, the editor will call the callback with a history entry. This entry contains information about the records that were added, changed, or deleted, as well as whether the change was caused by the user or from a remote change.
```ts
editor.store.listen((entry) => {
entry // { changes, source }
})
```
### Remote changes
By default, changes to the editor's store are assumed to have come from the editor itself. You can use the [Store#mergeRemoteChanges](?) method of the editor's [Editor#store](?) to make changes in the store that will be emitted via [Store#listen](?) with the `source` property as `'remote'`.
If you're setting up some kind of multiplayer backend, you would want to send only the `'user'` changes to the server and merge the changes from the server using [Store#mergeRemoteChanges](?) (`editor.store.mergeRemoteChanges`).
### Undo and redo
The history stack in tldraw contains two types of data: "marks" and "commands". Commands have their own `undo` and `redo` methods that describe how the state should change when the command is undone or redone.
You can call [Editor#mark](?) to add a mark to the history stack with the given `id`.
```ts
editor.mark('my-id')
// do some stuff
editor.bailToMark('my-id')
```
When you call [Editor#undo](?), the editor will undo each command until it finds either a mark or the start of the stack. When you call [Editor#redo](?), the editor will redo each command until it finds either a mark or the end of the stack.
```ts
// A
editor.mark('duplicate everything')
editor.selectAll()
editor.duplicateShapes(editor.getSelectedShapeIds())
// B
editor.undo() // will return to A
editor.redo() // will return to B
```
You can call [Editor#bail](?) to undo and delete all commands in the stack until the first mark.
```ts
// A
editor.mark('duplicate everything')
editor.selectAll()
editor.duplicateShapes(editor.getSelectedShapeIds())
// B
editor.bail() // will return to A
editor.redo() // will do nothing
```
You can use [Editor#bailToMark](?) to undo and delete all commands and marks until you reach a mark with the given `id`.
```ts
// A
editor.mark('first')
editor.selectAll()
// B
editor.mark('second')
editor.duplicateShapes(editor.getSelectedShapeIds())
// C
editor.bailToMark('first') // will return to A
```
## Events
The [Editor](?) class receives events from its [Editor#dispatch](?) method. When the [Editor](?) receives an event, it is first handled internally to update [Editor#inputs](?) and other state before, and then sent into to the editor's state chart.
You shouldn't need to use the [Editor#dispatch](?) method directly, however you may write code in the state chart that responds to these events. See the [Tools page](tools) to learn how to do that, or read below for a more detailed information about the state chart itself.
### State Chart
The [Editor](?) class has a "state chart", or a tree of [StateNode](?) instances, that contain the logic for the editor's tools such as the select tool or the draw tool. User interactions such as moving the cursor will produce different changes to the state depending on which nodes are active.
Each node can be active or inactive. Each state node may also have zero or more children. When a state is active, and if the state has children, one (and only one) of its children must also be active. When a state node receives an event from its parent, it has the opportunity to handle the event before passing the event to its active child. The node can handle an event in any way: it can ignore the event, update records in the store, or run a _transition_ that changes which states nodes are active.
When a user interaction is sent to the editor via its [Editor#dispatch](?) method, this event is sent to the editor's root state node ([Editor#root](?)) and passed then down through the chart's active states until either it reaches a leaf node or until one of those nodes produces a transaction.
<Image
title="Events"
src="/images/api/events.png"
alt="A diagram showing an event being sent to the editor and handled in the state chart."
title="The editor passes an event into the state start where it is handled by each active state in order."
/>
### Path
You can get the editor's current "path" of active states via `editor.root.path`. In the above example, the value would be `"root.select.idle"`.
You can check whether a path is active via [Editor#isIn](?), or else check whether multiple paths are active via [Editor#isInAny](?).
```ts
editor.store.path // 'root.select.idle'
editor.isIn('root.select') // true
editor.isIn('root.select.idle') // true
editor.isIn('root.select.pointing_shape') // false
editor.isInAny('editor.select.idle', 'editor.select.pointing_shape') // true
```
Note that the paths you pass to [Editor#isIn](?) or [Editor#isInAny](?) can be the full path or a partial of the start of the path. For example, if the full path is `root.select.idle`, then [Editor#isIn](?) would return true for the paths `root`, `root.select`, or `root.select.idle`.
> If all you're interested in is the state below `root`, there is a convenience method, [Editor#getCurrentToolId](?), that can help with the editor's currently selected tool.
```tsx
import { track, useEditor } from '@tldraw/tldraw'
export const BubbleToolUi = track(() => {
const editor = useEditor()
// Only show the UI if the bubble tool is active
if (!editor.getCurrentToolId() === 'bubble') return null
return <div>Creating bubble</div>
})
```
## Inputs
The [Editor#inputs](?) object holds information about the user's current input state, including their cursor position (in page space _and_ screen space), which keys are pressed, what their multi-click state is, and whether they are dragging, pointing, pinching, and so on.
Note that the modifier keys include a short delay after being released in order to prevent certain errors when modeling interactions. For example, when a user releases the "Shift" key, `editor.inputs.shiftKey` will remain `true` for another 100 milliseconds or so.
This property is stored as regular data. It is not reactive.
## Editor instance state
The [Editor#getInstanceState](?) method returns settings that relate to each individual instance of the editor. In the case that the user has the same editor open in multiple tabs, or if there are multiple editors on the same page, then each editor will have its own instance state. See the [TLInstance](?) docs to learn more about the record itself.
## User preferences
The editor's user preferences are shared between all instances. See the [TLUserPreferences](?) docs for more about the user preferences.
## Common things to do with the editor
### Create a shape id
To create an id for a shape (a [TLShapeId](?)), use the libary's [createShapeId](?) helper.
```ts
import { createShapeId } from '@tldraw/tldraw'
createShapeId() // `shape:some-random-uuid`
createShapeId('kyle') // `shape:kyle`
```
The `id` property of any record in tldraw is "branded" with the type of that record. For shapes, that means that all shape ids are formatted as `shape:{id}`. The TypeScript type of a record's `id` also includes a reference to the type of the record that it belongs to. TypeScript will complain if you use a regular `shape:some-id` string, but the [createShapeId](?) helper will provide the type.
### Create shapes
To create shapes, use the [Editor#createShape](?) or [Editor#createShapes](?) methods.
```ts
editor.createShapes([
{
id,
type: 'geo',
x: 0,
y: 0,
props: {
geo: 'rectangle',
w: 100,
h: 100,
dash: 'draw',
color: 'blue',
size: 'm',
},
},
])
```
A shape must be a partial of the full shape (a [TLShapePartial](?)). All props are optional except for the `type` of the shape. The shape's corresponding [ShapeUtil](?) will provide the default props for any props not provided. The `id` will be created if not provided.
### Update shapes
To update shapes, use the [Editor#updateShape](?) or [Editor#updateShapes](?) methods.
```ts
editor.updateShapes([
{
id: shape.id, // required
type: shape.type, // required
x: 100,
y: 100,
props: {
w: 200,
},
},
])
```
The update must be a partial of the full shape (a [TLShapePartial](?)). All props are optional except for the `type` of the shape and its `id`.
### Delete shapes
To delete shapes, use the [Editor#deleteShape](?) or [Editor#deleteShapes](?) methods.
```ts
editor.deleteShapes([shape.id])
editor.deleteShapes([shape])
```
You can delete a shape using the shape's `id` or the shape record itself.
### Get a shape
You can get a shape with the [Editor#getShape](?) method.
```ts
editor.getShape(myShapeId)
editor.getShape(myShape)
```
You can get a shape using the shape's `id` or the shape record itself.
### Turn on read only mode
You can use the [Editor#updateInstanceState](?) method to turn on read only mode.
```ts
editor.updateInstanceState({ isReadonly: true })
```
### Move the camera
You can set the camera to a specific x, y, and zoom with the [Editor#setCamera](?) method.
```ts
editor.setCamera(0, 0, 1)
```
### Freeze the camera
You can prevent the user from changing the camera using the [Editor#updateInstanceState](?) method.
```ts
editor.updateInstanceState({ canMoveCamera: false })
```
### Turn on dark mode
You can turn on or off dark mode via the [setUserPreferences](?) method. Note that this effects all editor instances that share the same user—even instances in other tabs.
```ts
setUserPreferences({ isDarkMode: true })
```
---
See the [tldraw repository](https://github.com/tldraw/tldraw/tree/main/apps/examples) for an example of how to use tldraw's Editor API to control the editor.

View file

@ -0,0 +1,172 @@
---
title: Persistence
status: published
author: steveruizok
date: 3/22/2023
order: 6
keywords:
- data
- sync
- persistence
- database
- indexeddb
- localstorage
---
Persistence in tldraw means storing information about the editor's state to a database and then restoring it later. There are a few options that developers have for getting data into tldraw and out again.
## The `"persistenceKey"` prop
Both the `<Tldraw>` or `<TldrawEditor>` components support local persitence and cross-tab synchronization via the `persistenceKey` prop. Passing a value to this prop will persist the contents of the editor locally to the browser's IndexedDb.
```tsx
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
export default function () {
return (
<div style={{ position: 'fixed', inset: 0 }}>
<Tldraw persistenceKey="my-persistence-key" />
</div>
)
}
```
Using a `persistenceKey` will synchronize data automatically with any other tldraw component with the same `persistenceKey` prop, even if that component is in a different browser tab.
```tsx
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
export default function () {
return (
<div style={{ position: 'fixed', inset: 0 }}>
<div style={{ width: '50%', height: '100%' }}>
<Tldraw persistenceKey="my-persistence-key" />
</div>
<div style={{ width: '50%', height: '100%' }}>
<Tldraw persistenceKey="my-persistence-key" />
</div>
</div>
)
}
```
In the example above, both editors would synchronize their document locally. They would still have two independent instance states (e.g. selections) but the document would be kept in sync and persisted under the same key.
## Snapshots
You can get a JSON snapshot of the editor's content using the [Editor#store](?)'s [Store#getSnapshot](?) method.
```tsx
function SaveButton() {
const editor = useEditor()
return (
<button
onClick={() => {
const snapshot = editor.store.getSnapshot()
const stringified = JSON.stringify(snapshot)
localStorage.setItem('my-editor-snapshot', stringified)
}}
>
Save
</button>
)
}
```
You can load the snapshot into a new editor with [Store#loadSnapshot](?).
```tsx
function LoadButton() {
const editor = useEditor()
return (
<button
onClick={() => {
const stringified = localStorage.getItem('my-editor-snapshot')
const snapshot = JSON.parse(stringified)
editor.store.loadSnapshot(snapshot)
}}
>
Load
</button>
)
}
```
A [snapshot](/gen/store/StoreSnapshot) includes both the store's [serialized records](/gen/store/SerializedStore) and its [serialized schema](/gen/store/SerializedSchema), which is used for migrations.
> By default, the `getSnapshot` method returns only the editor's document data. If you want to get records from a different scope, You can pass in `session`, `document`, `presence`, or else `all` for all scopes.
Note that loading a snapshot does not reset the editor's in memory state or UI state. For example, loading a snapshot during a resizing operation may lead to a crash. This is because the resizing state maintains its own cache of information about which shapes it is resizing, and its possible that those shapes may no longer exist!
## The `"store"` prop
While it's possible to load the editor and then load data into its store, we've found it best to create the store, set its data, and then pass the store into the editor.
The `store` property of the `<Tldraw>` / `<TldrawEditor>` components accepts a store that you've defined outside of the component.
```tsx
export default function () {
const [store] = useState(() => {
// Create the store
const newStore = createTLStore({
shapeUtils: defaultShapeUtils,
})
// Get the snapshot
const stringified = localStorage.getItem('my-editor-snapshot')
const snapshot = JSON.parse(stringified)
// Load the snapshot
newStore.loadSnapshot(snapshot)
return newStore
})
return <Tldraw persistenceKey="my-persistence-key" store={store} />
}
```
Sometimes you won't be able to access the store's data synchronously. To handle this case, the `store` property also accepts a [TLStoreWithStatus](?).
```ts
export default function () {
const [storeWithStatus, setStoreWithStatus] = useState<TLStoreWithStatus>({
status: 'loading',
})
useEffect(() => {
let cancelled = false
async function loadRemoteSnapshot() {
// Get the snapshot
const snapshot = await getRemoteSnapshot()
if (cancelled) return
// Create the store
const newStore = createTLStore({
shapeUtils: defaultShapeUtils,
})
// Load the snapshot
newStore.loadSnapshot(snapshot)
// Update the store with status
setStoreWithStatus({
store: newStore,
status: 'ready',
})
}
loadRemoteSnapshot()
return () => {
cancelled = true
}
})
return <Tldraw persistenceKey="my-persistence-key" store={storeWithStatus} />
}
```
For a good example of this pattern, see the [yjs-example](https://github.com/tldraw/tldraw-yjs-example).

View file

@ -0,0 +1,242 @@
---
title: Shapes
status: published
author: steveruizok
date: 3/22/2023
order: 2
keywords:
- custom
- shapes
- shapeutils
- utils
---
In tldraw, a shape is something that can exist on the page, like an arrow, an image, or some text.
This article is about shapes: what they are, how they work, and how to create your own shapes. If you'd prefer to see an example, see the tldraw repository's [examples app](https://github.com/tldraw/tldraw/tree/main/apps/examples) for examples of how to create custom shapes in tldraw.
## Types of shape
We make a distinction between three types of shapes: "core", "default", and "custom".
### Core shapes
The editor's core shapes are shapes that are built in and always present. At the moment the only core shape is the [group shape](/gen/tlschema/TLGroupShape).
### Default shapes
The default shapes are all of the shapes that are included by default in the [Tldraw](?) component, such as the [TLArrowShape](?) or [TLDrawShape](?). They are exported from the `@tldraw/tldraw` library as [defaultShapeUtils](?).
### Custom shapes
Custom shapes are shapes that were created by you or someone you love. Find more information about custom shapes [below](#Custom-shapes-1).
## The shape object
Shapes are just records (JSON objects) that sit in the [store](/docs/editor#Store). For example, here's a shape record for a rectangle geo shape:
```ts
{
"parentId": "page:somePage",
"id": "shape:someId",
"typeName": "shape"
"type": "geo",
"x": 106,
"y": 294,
"rotation": 0,
"index": "a28",
"opacity": 1,
"isLocked": false,
"props": {
"w": 200,
"h": 200,
"geo": "rectangle",
"color": "black",
"labelColor": "black",
"fill": "none",
"dash": "draw",
"size": "m",
"font": "draw",
"text": "diagram",
"align": "middle",
"verticalAlign": "middle",
"growY": 0,
"url": ""
},
"meta": {},
}
```
### Base properties
Every shape contains some base information. These include the shape's type, position, rotation, opacity, and more. You can find the full list of base properties [here](/gen/tlschema/TLBaseShape).
### Props
Every shape also contains some shape-specific information, called `props`. Each type of shape can have different props. For example, the `props` of a text shape are much different than the props of an arrow shape.
### Meta
Meta information is information that is not used by tldraw but is instead used by your application. For example, you might want to store the name of the user who created a shape, or the date that the shape was created. You can find more information about meta information [below](#Meta-information).
## The `ShapeUtil` class
While tldraw's shapes themselves are simple JSON objects, we use [ShapeUtil](?) classes to answer questions about shapes. For example, when the editor needs to render a text shape, it will find the [TextShapeUtil](?) and call its [ShapeUtil#component](?) method, passing in the text shape object as an argument.
---
## Custom shapes
You can create your own custom shapes. In the examples below, we will create a custom "card" shape. It'll be a simple rectangle with some text inside.
> For an example of how to create custom shapes, see our [custom shapes example](https://github.com/tldraw/tldraw/tree/main/apps/examples/src/examples/CustomConfigExample).
### Shape type
In tldraw's data model, each shape is represented by a JSON object. Let's first create a type that describes what this object will look like.
```ts
import { TLBaseShape } from '@tldraw/tldraw'
type CardShape = TLBaseShape<'card', { w: number; h: number }>
```
With the [TLBaseShape](?) helper, we define the shape's `type` property (`card`) and the shape's `props` property (`{ w: number, h: number }`). The type can be any string but the props must be a regular [JSON-serializable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#description) JavaScript object.
The [TLBaseShape](?) helper adds the other base properties of a shape, such as `x`, `y`, `rotation`, and `opacity`.
### Shape Util
While tldraw's shapes themselves are simple JSON objects, we use [ShapeUtil](?) classes to answer questions about shapes.
Let's create a [ShapeUtil](?) class for the shape.
```tsx
import { HTMLContainer, ShapeUtil } from '@tldraw/tldraw'
class CardShapeUtil extends ShapeUtil<CardShape> {
static override type = 'card' as const
getDefaultProps(): CardShape['props'] {
return {
w: 100,
h: 100,
}
}
getGeometry(shape: ICardShape) {
return new Rectangle2d({
width: shape.props.w,
height: shape.props.h,
isFilled: true,
})
}
component(shape: CardShape) {
return <HTMLContainer>Hello</HTMLContainer>
}
indicator(shape: CardShape) {
return <rect width={shape.props.w} height={shape.props.h} />
}
}
```
This is a minimal [ShapeUtil](?). We've given it a static property `type` that matches the type of our shape, we've provided implementations for the abstract methods [ShapeUtil#getDefaultProps](?), [ShapeUtil#getBounds](?), [ShapeUtil#component](?), and [ShapeUtil#indicator](?).
We still have work to do on the `CardShapeUtil` class, but we'll come back to it later. For now, let's put the shape onto the canvas by passing it to the [Tldraw](?) component.
### The `shapeUtils` prop
We pass an array of our shape utils into the [Tldraw](?) component's `shapeUtils` prop.
```tsx
const MyCustomShapes = [MyCardShape]
export default function () {
return (
<div style={{ position: 'fixed', inset: 0 }}>
<Tldraw shapeUtils={MyCustomShapes} />
</div>
)
}
```
We can create one of our custom card shapes using the [Editor](?) API. We'll do this by setting the `onMount` prop of the [Tldraw](?) component.
```tsx
export default function () {
return (
<div style={{ position: 'fixed', inset: 0 }}>
<Tldraw
shapeUtils={MyCustomShapes}
onMount={(editor) => {
editor.createShapes([{ type: 'card' }])
}}
/>
</div>
)
}
```
Once the page refreshes, we should now have our custom shape on the canvas.
### Meta information
Shapes also have a `meta` property (see [TLBaseShape#meta](?)) that you can fill with your own data. This should feel like a bit of a hack, however it's intended to be an escape hatch for applications where you want to use tldraw's existing shapes but also want to attach a bit of extra data to the shape.
Note that tldraw's regular shape definitions have an unknown object for the shape's `meta` property. To type your shape's meta, use a union like this:
```ts
type MyShapeWithMeta = TLGeoShape & { meta: { createdBy: string } }
const shape = editor.getShape<MyShapeWithMeta>(myGeoShape.id)
```
You can update a shape's `meta` property in the same way you would update its props, using [Editor#updateShapes](?).
```ts
editor.updateShapes<MyShapeWithMeta>([
{
id: myGeoShape.id,
type: 'geo',
meta: {
createdBy: 'Steve',
},
},
])
```
Like [TLBaseShape#props](?), the data in a [TLBaseShape#meta](?) object must be JSON serializable.
In addition to setting meta properties this way, you can also set the default meta data for shapes using the Editor's [Editor#getInitialMetaForShape](?) method.
```tsx
editor.getInitialMetaForShape = (shape: TLShape) => {
if (shape.type === 'text') {
return { createdBy: currentUser.id, lastModified: Date.now() }
} else {
return { createdBy: currentUser.id }
}
}
```
Whenever new shapes are created using the [Editor#createShapes](?) method, the shape's meta property will be set using the [Editor#getInitialMetaForShape](?) method. By default this method returns an empty object.
### Using starter shapes
You can use "starter" shape utils like [BaseBoxShapeUtil](?) to get regular rectangular shape behavior.
### Flags
You can use flags like [ShapeUtil#hideRotateHandle](?) to hide different parts of the UI when the shape is selected, or else to control different behaviors of the shape.
### Interaction
You can turn on `pointer-events` to allow users to interact inside of the shape.
### Editing
You can make shapes "editable" to help decide when they're interactive or not.
...and more!

View file

@ -0,0 +1,128 @@
---
title: Tools
status: published
author: steveruizok
date: 3/22/2023
order: 5
keywords:
- custom
- tools
- state
---
In tldraw, a **tool** is what we call any top-level state in our state chart. For example, the select tool, the draw tool, and the arrow tool are all top-level states that the user can be in.
<Image
title="Tools"
src="/images/api/tools.png"
alt="A diagram showing the state chart of tldraw. The top row of states (apart from the Root state) are annotated as tools."
title="The first level of states in the start chart are known as tools."
/>
For more detailed information about the state chart, and how it works, go to the [Editor page](editor). Or read below for more information about tools, and how to make your own.
## Types of tool
The tldraw editor comes with some in-built **core tools**: the [select tool](/gen/tldraw/SelectTool), the [zoom tool](/gen/tldraw/ZoomTool), and the [text tool](/gen/tldraw/TextShapeTool). These are always added to the state chart.
There are also some **default tools** available, like the [draw tool](/gen/tldraw/DrawShapeTool), the [hand tool](/gen/tldraw/HandTool), the [arrow tool](/gen/tldraw/ArrowShapeTool), and more. The `<Tldraw>` component automatically adds these tools to the state chart.
You can also create your own **custom tools**. You can add them to the state chart by passing an array of them to the [Tldraw](?) component's `tools` prop.
Note: You might also want to add a tool to the user interface in various ways, such as the toolbar. See the [User Interface](/docs/user-interface) section for more on changing the menus.
## Transitioning
You can change the current active tool using [editor.setCurrentTool](/gen/editor/Editor#setCurrentTool).
```ts
editor.setCurrentTool('select')
```
You can "deep transition" by using a path of active tool ids.
```ts
editor.setCurrentTool('select.eraser.pointing')
```
## Inside a tool
Every tool has an **id**. This is used to identify it in the state chart.
```ts
class MyTool extends StateNode {
static override id = 'my-tool'
}
```
Tools can contain **children**. For example, the [hand tool](/gen/tldraw/HandTool) has three children, `Idle`, `Pointing` and `Dragging`. If a state has children, it must also have an `initial` state, so that it knows which state to start in.
```ts
class MyIdleState extends StateNode {
static override id = 'my-idle-state'
}
class MyPointingState extends StateNode {
static override id = 'my-pointing-state'
}
class MyTool extends StateNode {
static override id = 'my-tool'
static override initial = 'my-idle-state'
static override children = [MyIdleState, MyPointingState]
}
```
### Handling events
When the editor receives an [event](/gen/editor/TLEventHandlers) via its [Editor#dispatch](?) method, the event is first processed in order to update its inputs, then passed to the editor's state chart.
Beginning at the root, each node will first handle the event and then pass the event to its current active child state. This continues until either: the event is handled on a state without any children; or the event is handled in a way that produces a transition.
### Parents handle events before children
```ts
class MyIdleState extends StateNode {
static override id = 'my-idle-state'
onPointerDown: TLEventHandlers['onPointerDown'] = (info) => {
console.log('world')
}
}
class MyTool extends StateNode {
static override id = 'my-tool'
static override initial = 'my-idle-state'
static override children = [MyIdleState]
onPointerDown: TLEventHandlers['onPointerDown'] = (info) => {
console.log('hello')
}
}
```
Using the example above, if a `pointer_down` event is passed to the editor while the `MyTool` state is active, `MyTool`'s `onPointerDown` method will be called first, then `MyIdleState`'s `onPointerDown` method will be called second.
### Transitions stop the process
```ts
class MyIdleState extends StateNode {
static override id = 'my-idle-state'
onPointerDown: TLEventHandlers['onPointerDown'] = (info) => {
console.log("this won't run")
}
}
class MyTool extends StateNode {
static override id = 'my-tool'
static override initial = 'my-idle-state'
static override children = [MyIdleState]
onPointerDown: TLEventHandlers['onPointerDown'] = (info) => {
editor.setCurrentTool('select')
}
}
```
If `MyTool`'s `onPointerDown` handler produced a transition (changing anything about which states are active) then the chain would stop and the event would not be handled on `MyIdleState`.

View file

@ -0,0 +1,198 @@
---
title: User Interface
status: published
author: steveruizok
date: 3/22/2023
order: 7
keywords:
- ui
- interface
- tools
- shapes
- custom
- button
- toolbar
- styles
---
The user interface in tldraw includes the menus, toolbars, keyboard shortcuts, and analytics events in the editor.
## Hiding the UI
You can hide the default tldraw user interface entirely using the `hideUi` prop. This turns off both the visuals as well as the keyboard shortcuts.
```tsx
function Example() {
return <Tldraw hideUi />
}
```
Here's [an example](https://examples.tldraw.com/hide-ui) of what that looks like. Note that while you can't select any other tools using the keyboard shortcuts, you can still use the `setCurrentTool` method to change the tool. If you open the console and enter:
```ts
editor.setCurrentTool('draw')
```
...then you can start drawing.
All of our user interface works by controlling the editor via its `Editor` methods. If you hide the user interface, you can still use these same editor's methods to control the editor. Our [custom user interface example](https://examples.tldraw.com/custom-ui) shows this in action.
The source for these examples are available in the [tldraw repository](https://github.com/tldraw/tldraw/blob/main/apps/examples/src) or in a [sandbox here](https://stackblitz.com/github/tldraw/tldraw/tree/examples?file=src%2Findex.tsx).
## Overrides
The content of tldraw's menus can be controlled via the `overrides` prop. This prop accepts a [TLUiOverrides](/gen/tldraw/TLUiOverrides) object, which has methods for each part of the user interface, such as the `toolbar` or `keyboardShortcutsMenu`.
### Actions
The user interface has a set of shared `actions` that are used in the menus and keyboard shortcuts. These actions can be overridden by passing a new set of actions to the `overrides.actions` method.
To create, update, or delete actions, provide an `actions` method that receives both the editor and the [default actions](https://github.com/tldraw/tldraw/blob/main/packages/tldraw/src/lib/ui/hooks/useActions.tsx) and returns a mutated actions object.
```ts
const myOverrides: TLUiOverrides = {
actions(editor, actions) {
// You can delete actions, but remember to
// also delete the menu items that reference them!
delete actions['insert-embed']
// Create a new action or replace an existing one
actions['my-new-action'] = {
id: 'my-new-action',
label: 'My new action',
readonlyOk: true,
kbd: '$u',
onSelect(source: any) {
// Whatever you want to happen when the action is run
window.alert('My new action just happened!')
},
}
return actions
},
}
```
The `actions` object is a map of [TLUiActionItem](/gen/tldraw/TLUiActionItem)s, with each item keyed under its `id`.
### Tools
Tools work in the same manner as actions. You can override the default tools by passing a `tools` method that accepts the [default tools object](https://github.com/tldraw/tldraw/blob/main/packages/tldraw/src/lib/ui/hooks/useTools.tsx) and returns a mutated version of that object.
```ts
const myOverrides: TLUiOverrides = {
tools(editor, tools) {
// Create a tool item in the ui's context.
tools.card = {
id: 'card',
icon: 'color',
label: 'tools.card',
kbd: 'c',
readonlyOk: false,
onSelect: () => {
// Whatever you want to happen when the tool is selected
editor.setCurrentTool('card')
},
}
return tools
},
}
```
The `tools` object is a map of [TLUiToolItem](/gen/tldraw/TLUiToolItem)s, with each item keyed under its `id`.
### Toolbar and Menus
The remaining overrides are for toolbar and the various menus: the main menu, actions menu, context menu, help menu, and the keyboard shortcuts menu.
Each of these overrides accepts a method that receives the default menu schema and returns a mutated version of that schema.
```ts
const myOverrides: TLUiOverrides = {
actions(editor, actions) {
// Create a new action or replace an existing one
actions['my-new-action'] = {
id: 'my-new-action',
label: 'My new action',
readonlyOk: true,
kbd: '$u',
onSelect(source: any) {
window.alert('My new action just happened!')
},
}
return actions
},
contextMenu(editor, contextMenu, { actions }) {
const newMenuGroup = menuGroup('my-items', newMenuItem)
contextMenu.unshift(newMenuItem)
return contextMenu
},
menu(editor, menu, { actions }) {
// using the findMenuItem helper
const fileMenu = findMenuItem(menu, ['menu', 'file'])
if (fileMenu.type === 'submenu') {
// add the new item to the file menu's children
const newMenuItem = menuItem(actions['my-new-action'])
fileMenu.children.unshift(newMenuItem)
}
return menu
},
}
```
A menu schema is an array of either [submenus](/gen/tldraw/TLUiSubMenu), [groups](/gen/tldraw/TLUiMenuGroup), [items](/gen/tldraw/TLUiMenuItem), or [custom items](/gen/tldraw/TLUiCustomMenuItem). Each group or submenu may include any of the other types as its children.
The menu schema is stateful. Referencing atomic properties (such as computed values in the editor) will cause the menu to update when those values change. If you wish for a menu item to disappear from the menu, you can return `null` from the menu method. You can also provide additional options for each item, `disabled` or `checked`.
```ts
const myOverrides: TLUiOverrides = {
menu(editor, menu, { actions }) {
const selectedShapes = editor.getSelectedShapeIds().length
const newMenuGroup = menuGroup(
'my-actions',
selectedShapes > 0 ? menuItem(actions['action-a']) : null,
menuItem(actions['action-b'], { disabled: selectedShapes < 3 })
)
menu.unshift(newMenuGroup)
return menu
},
}
```
It's recommmended to explore the [default menu schema](https://github.com/tldraw/tldraw/blob/main/packages/tldraw/src/lib/ui/hooks/useMenuSchema.tsx) in order to understand how menu items work.
### Translations
The `translations` method accepts a table of new translations. For example, if you wanted a tool to reference a key `"tools.card"`, then you should at minimum provide an english translation for this key.
```ts
const myOverrides: TLUiOverrides = {
translations: {
en: {
'tools.card': 'Card',
},
},
}
```
## Events
The [Tldraw](?) component has a prop, `onUiEvent`, that the user interface will call when certain events occur.
```tsx
function Example() {
function handleEvent(name, data) {
// do something with the event
}
return <Tldraw onUiEvent={handleEvent} />
}
```
The `onUiEvent` callback is called with the name of the event as a string and an object with information about the event's source (e.g. `menu` or `context-menu`) and possibly other data specific to each event, such as the direction in an `align-shapes` event.
Note that `onUiEvent` is only called when interacting with the user interface. It is not called when running commands manually against the app, e.g. calling [Editor#alignShapes](?) will not call `onUiEvent`.
See the [tldraw repository](https://github.com/tldraw/tldraw/tree/main/apps/examples) for an example of how to customize tldraw's user interface.

View file

@ -0,0 +1,15 @@
---
title: Examples
status: published
author: steveruizok
date: 10/11/2023
order: 3
---
Here's a [very simple sandbox](https://codesandbox.io/s/tldraw-example-canary-2lrzmy) showing the tldraw component.
You can also find simple [framework-specific examples](https://github.com/tldraw/examples). For a multiplayer example using a collaboration backend, see our [Yjs example](https://github.com/tldraw/tldraw-yjs-example).
For more specific examples of how to use the tldraw component, check out the [tldraw repository's examples app](https://github.com/tldraw/tldraw/blob/main/apps/examples/src). The [tldraw repo](https://github.com/tldraw/tldraw) has more information about running the examples locally. The examples are also available in a [sandbox](https://stackblitz.com/github/tldraw/tldraw/tree/examples?file=src%2Findex.tsx) shown below:
<Embed src="https://stackblitz.com/github/tldraw/tldraw/tree/examples?embed=1&file=src%2Findex.tsx&theme=dark" />

View file

@ -0,0 +1,33 @@
---
title: Installation
status: published
author: steveruizok
date: 3/22/2023
order: 1
---
At the moment the `@tldraw/tldraw` package is in beta. We also ship a canary version which is always up to date with the main branch of tldraw [repository](https://github.com/tldraw/tldraw).
## Beta
First, install the `@tldraw/tldraw` package using `@beta` for the latest alpha release.
```bash
yarn add @tldraw/tldraw@beta
```
```bash
npm install @tldraw/tldraw@beta
```
## Canary
To get the very latest version, use the [latest canary release](https://www.npmjs.com/package/@tldraw/tldraw?activeTab=versions). Docs for the very latest version are also available at [canary.tldraw.dev](https://canary.tldraw.dev).
```bash
yarn add @tldraw/tldraw@canary
```
```bash
npm install @tldraw/tldraw@canary
```

View file

@ -0,0 +1,46 @@
---
title: Introduction
status: published
author: steveruizok
date: 3/22/2023
order: 0
---
Welcome to the developer docs for tldraw, a React library for creating whiteboards and other infinite canvas experiences. These docs are for the 2.0 version which is currently in alpha.
<a className="hero__images" href="https://examples.tldraw.com">
<img src={'/images/hero_light.png'} alt="tldraw demo" className="article__image hero__light" />
<img src={'/images/hero_dark.png'} alt="tldraw demo" className="article__image hero__dark" />
</a>
- 🔗 Check out the [CodeSandbox](https://codesandbox.io/s/tldraw-example-canary-2lrzmy)
- 🧑‍💻 Visit the [tldraw repo on Github](https://github.com/tldraw/tldraw)
- 💬 Join the [Discord](https://discord.com/invite/SBBEVCA4PG)
## What can I do with tldraw?
You can use the [Tldraw](?) React component to embed a fully featured and extendable whiteboard in your app. See the [CodeSandbox](https://codesandbox.io/s/tldraw-example-canary-2lrzmy) for a minimal example.
For multiplayer whiteboards, you can plug the component into the [collaboration backend](/docs/collaboration) of your choice. Check out our [Yjs example](https://github.com/tldraw/tldraw-yjs-example) to see how you might use tldraw together with [Yjs](https://yjs.dev/).
You can use the [Editor](?) API to create, update, and delete shapes, control the camera—or do just about anything else. You can extend tldraw with your own [custom shapes](/docs/shapes) and [custom tools](/docs/tools). You can use our [user interface](/docs/user-interface) overrides to change the contents of menus and toolbars, or else hide the UI and replace it with your own.
If you want to go even deeper, you can use the [TldrawEditor](?) component as a more minimal engine without the default tldraw shapes or user interface.
## How do I learn tldraw?
In addition to the docs on this website, we provide [many examples](https://github.com/tldraw/tldraw/tree/main/apps/examples/src/examples) in the tldraw repo that demonstrate different ways of using the tldraw library. You can view them running [here](https://examples.tldraw.com/); or else you can clone the tldraw repo and start a local development server to see them in action.
You can ask questions and get help on our [Discord](https://discord.gg/JMbeb96jsh) channel or in our Github [issues](https://github.com/tldraw/tldraw/issues).
## Community
Found a bug or want to request a feature? Create an issue [here](https://github.com/tldraw/tldraw/issues). To connect with the team and other users, join us on our [Discord](https://discord.gg/JMbeb96jsh). To follow along with updates, you can also [subscribe to our Substack newsletter](https://tldraw.substack.com/) or follow us on [Twitter/X](https://twitter.com/tldraw).
## License
tldraw's source code and distributed packages are provided under the non-commercial [tldraw license](https://github.com/tldraw/tldraw/blob/master/LICENSE.md).
This license does not permit commercial use. If you wish to use tldraw in a commercial product or enterprise, you will need to purchase a commercial license. To obtain a commercial license, please contact us at [hello@tldraw.com](mailto:hello@tldraw.com).
To learn more, see our [license](/community/license) page.

View file

@ -0,0 +1,171 @@
---
title: Usage
status: published
author: steveruizok
date: 3/22/2023
order: 2
---
You can use the [Tldraw](?) component inside of any React component.
```tsx
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
export default function () {
return (
<div style={{ position: 'fixed', inset: 0 }}>
<Tldraw />
</div>
)
}
```
### Wrapper
It's important that the [Tldraw](?) component is wrapped in a parent container that has an explicit size. Its height and width are set to `100%`, so it will fill its parent container.
### CSS
In addition to the [Tldraw](?) component itself, you should also import the `tldraw.css` file from the `@tldraw/tldraw` package.
```ts
import '@tldraw/tldraw/tldraw.css'
```
You can alternatively import this file inside of another CSS file using the `@import` syntax.
```css
@import url('@tldraw/tldraw/tldraw.css');
```
If you'd like to deeply change the way that tldraw looks, you can copy the `tldraw.css` file into a new CSS file, make your changes, and import that instead.
### Fonts
We also use Inter as the default tldraw font. You can import this font however you like (or use a different font!) but here's the CSS import from Google fonts that we use:
```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
```
### HTML
If you're using the [Tldraw](?) component in a full-screen app, you probably also want to update your `index.html`'s meta viewport element as shown below.
```html
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
```
This may not be critical to [Tldraw](?) performing correctly, however some features (such as safe area positioning) will only work correctly if these viewport options are set.
## Server Rendering
The [Tldraw](?) component can't be server-rendered. If you're using the component in a server-rendered framework (such as Next.js) then you need to import it dynamically.
```tsx
const Tldraw = dynamic(async () => (await import('@tldraw/tldraw')).Tldraw, { ssr: false })
```
### Using a bundler
If you're using a bundler like webpack or rollup, you can import the assets directly from the `@tldraw/assets` package. Here you can use `getAssetUrlsByMetaUrl` helper function:
```javascript
import { getAssetUrlsByMetaUrl } from '@tldraw/assets/urls'
const assetUrls = getAssetUrlsByMetaUrl()
<Tldraw assetUrls={assetUrls} />
```
## Usage in Frameworks
Visit our [framework examples repository](https://github.com/tldraw/examples) to see examples of tldraw being used in various frameworks.
## Static Assets
In order to use the [Tldraw](?) component, the app must be able to find certain assets. These are contained in the `embed-icons`, `fonts`, `icons`, and `translations` folders. We offer a few different ways of making these assets available to your app.
### Using a public CDN
By default we serve these assets from a [public CDN called unpkg](https://unpkg.com/browse/@tldraw/assets@2.0.0-alpha.12/), so everything should work out of the box and is a good way to get started.
If you would like to customize some of the assets you can pass the customizations to our [Tldraw](?) component. For example, to use a custom icon for the `hand` tool you can do the following:
```javascript
const assetUrls = {
icons: {
'tool-hand': './custom-tool-hand.svg',
},
}
<Tldraw assetUrls={assetUrls} />
```
This will use the custom icon for the `hand` tool and the default assets for everything else.
### Self-hosting static assets
If you want more flexibility you can also host these assets yourself:
1. Download the `embed-icons`, `fonts`, `icons`, and `translations` folders from the [assets folder](https://github.com/tldraw/tldraw/tree/main/assets) of the tldraw repository.
2. Place the folders in your project's public path.
3. Pass `assetUrls` prop to our `<Tldraw/>` component to let the component know where the assets live.
You can use our `getAssetUrls` helper function from the `@tldraw/assets` package to generate these urls for you.
```javascript
import { getAssetUrls } from '@tldraw/assets/selfHosted'
const assetUrls = getAssetUrls()
<Tldraw assetUrls={assetUrls} />
```
While these files must be available, you can overwrite the individual files: for example, by placing different icons under the same name or modifying / adding translations.
If you use a CDN for hosting these files you can specify the base url of your assets. To recreate the above option of serving the assets from unpkg you would do the following:
```javascript
const assetUrls = getAssetUrls({
baseUrl: 'https://unpkg.com/@tldraw/assets@2.0.0-alpha.12/',
})
```
## Subcomponents
The [Tldraw](?) component combines two lower-level components: [TldrawEditor](?) and [TldrawUi](?). If you want to have more granular control, you can use those lower-level components directly. See [this example](https://github.com/tldraw/tldraw/blob/main/apps/examples/src/examples/ExplodedExample.tsx) for reference.
### Customize the default components
You can customize the appearance of the tldraw editor using the [Tldraw](?) (or [TldrawEditor](?) component's `components` prop.
```ts
<Tldraw
components={{
Background: YourCustomBackground,
SvgDefs: YourCustomSvgDefs,
Brush: YourCustomBrush,
ZoomBrush: YourCustomBrush,
CollaboratorBrush: YourCustomBrush,
Cursor: YourCustomCursor,
CollaboratorCursor: YourCustomCursor,
CollaboratorHint: YourCustomCollaboratorHint,
CollaboratorShapeIndicator: YourCustomdicator,
Grid: YourCustomGrid,
Scribble: YourCustomScribble,
SnapLine: YourCustomSnapLine,
Handles: YourCustomHandles,
Handle: YourCustomHandle,
CollaboratorScribble: YourCustomScribble,
ErrorFallback: YourCustomErrorFallback,
ShapeErrorFallback: YourCustomShapeErrorFallback,
ShapeIndicatorErrorFallback: YourCustomShapeIndicatorErrorFallback,
Spinner: YourCustomSpinner,
SelectionBackground: YourCustomSelectionBackground,
SelectionForeground: YourCustomSelectionForeground,
HoveredShapeIndicator: YourCustomHoveredShapeIndicator,
}}
/>
```

View file

@ -0,0 +1,10 @@
---
title: v2.0.0-alpha.12
description: Examples
author: tldraw
date: 5/9/2023
order: 9
status: published
---
[View on GitHub](https://github.com/tldraw/tldraw/releases/tag/v2.0.0-alpha.12)

View file

@ -0,0 +1,998 @@
---
title: v2.0.0-alpha.13
description: Examples
author: tldraw
date: 6/28/2023
order: 8
status: published
---
[View on GitHub](https://github.com/tldraw/tldraw/releases/tag/v2.0.0-alpha.13)
This is a big one! Our last release (alpha.12) was a few months ago, after which we decided to push forward with some big breaking changes that we had been putting off. This will likely remain our most breaking release, so the notes below may not be as helpful for gathering what's changed. Check the updated docs at [tldraw.dev](https://tldraw.dev).
Some highlights:
- The `editor.css` and `ui.css` are now combined as `tldraw.css`, so please update your imports from `@tldraw/tldraw`
- Assets are now provided by a CDN by default, so no need to copy those into your project
- We've removed `signia` and `signia-react` from dependencies: they're folded in as `@tldraw/state`
- We've added a new `ExternalContentManager` for customizing how files/ images / text and other content are handled on paste or drop
- `@tldraw/tlstore` is now `@tldraw/store`
- `@tldraw/tlvalidate` is now `@tldraw/validate`
- `@tldraw/indices` is added for our fractional indexing
- The `ShapeUtil` API requires fewer overrides and has fewer properties: caching is now handled on the Editor class methods
- We've introduced a new Styles API for hooking into our existing styles or defining your own shared properties that should move together.
Here's the big list!
---
### Release Notes
#### Fix crash when rotating a deleted shape ([#1658](https://github.com/tldraw/tldraw/pull/1658))
- Fixed a crash when trying to rotate a deleted shape.
#### [improvement] store snapshot types ([#1657](https://github.com/tldraw/tldraw/pull/1657))
- [dev] Rename `StoreSnapshot` to `SerializedStore`
- [dev] Create new `StoreSnapshot` as type related to `getSnapshot`/`loadSnapshot`
#### [fix] pen mode touches ([#1655](https://github.com/tldraw/tldraw/pull/1655))
- Removes three touches to cancel pen mode feature.
#### (2/2) [docs] Fix links to API. ([#1654](https://github.com/tldraw/tldraw/pull/1654))
- Documentation: Simplified links to the API reference.
#### (1/2) [docs] Restore some missing changes ([#1652](https://github.com/tldraw/tldraw/pull/1652))
- None (Docs internals)
#### [docs] Remove embeds page ([#1653](https://github.com/tldraw/tldraw/pull/1653))
- Documentation: Removed unused Embeds page.
#### Fix text shapes not having colour ([#1649](https://github.com/tldraw/tldraw/pull/1649))
- None: Fixes an unreleased bug.
#### Styles API docs ([#1641](https://github.com/tldraw/tldraw/pull/1641))
--
#### Styles API follow-ups ([#1636](https://github.com/tldraw/tldraw/pull/1636))
--
#### docs: remove not accepting contributions notice ([#1647](https://github.com/tldraw/tldraw/pull/1647))
- Remove not accepting contributions notice from README
#### Fix SVG cursors not being used ([#1639](https://github.com/tldraw/tldraw/pull/1639))
- None: Fixing an unreleased bug.
#### [docs] Add table of contents to Editor page ([#1642](https://github.com/tldraw/tldraw/pull/1642))
- Documentation: Added a table of contents to the Editor page.
#### speed up playwright and add visual regression tests ([#1638](https://github.com/tldraw/tldraw/pull/1638))
--
#### [docs] Allow sidebar to be scrolled on short screens ([#1632](https://github.com/tldraw/tldraw/pull/1632))
- Documentation: Fixed the sidebar being unscrollable on some short screens.
#### [docs] Add feedback when you search ([#1633](https://github.com/tldraw/tldraw/pull/1633))
- Documentation: Added some immediate feedback when you search.
#### [docs] Separate some pages out of the Docs section ([#1626](https://github.com/tldraw/tldraw/pull/1626))
- Documentation: Restructured the sidebar for clarity.
#### [docs] Fix wrong cursor when hovering buttons ([#1630](https://github.com/tldraw/tldraw/pull/1630))
- Documentation: Fixed the wrong cursor showing when hovering some buttons.
#### [docs] Tighten up wording & structure of Usage page ([#1624](https://github.com/tldraw/tldraw/pull/1624))
- Documentation: Impoved clarity of wording and structure of the Usage page.
#### [docs] Tighten up Editor page introduction ([#1622](https://github.com/tldraw/tldraw/pull/1622))
- Documentation: Simplified the Editor page.
#### [docs] Tighten up Introduction page ([#1621](https://github.com/tldraw/tldraw/pull/1621))
- Documentation: Simplified the Introduction page.
#### Lokalise: Translations update ([#1618](https://github.com/tldraw/tldraw/pull/1618))
- Added more translations for Simplified Chinese.
#### [docs] Simplify paths for uncategorised pages ([#1619](https://github.com/tldraw/tldraw/pull/1619))
- Documentation: Cleaned up some paths.
#### `ShapeUtil` refactor, `Editor` cleanup ([#1611](https://github.com/tldraw/tldraw/pull/1611))
- [editor] renames `defaultProps` to `getDefaultProps`
- [editor] removes `outline`, `outlineSegments`, `handles`, `bounds`
- [editor] renames `renderBackground` to `backgroundComponent`
#### Revert "Update dependencies (#1613)" ([#1617](https://github.com/tldraw/tldraw/pull/1617))
-
#### Remove on drop override ([#1612](https://github.com/tldraw/tldraw/pull/1612))
- [editor] Remove `onDropOverride`
#### Make resizeBox a regular function ([#1610](https://github.com/tldraw/tldraw/pull/1610))
- [editor] Change `resizeBox` to be a regular function.
#### Rename `ShapeUtil.render` -> `ShapeUtil.component` ([#1609](https://github.com/tldraw/tldraw/pull/1609))
- [editor] rename `ShapeUtil.render` to `ShapeUtil.component`
#### tldraw.css ([#1607](https://github.com/tldraw/tldraw/pull/1607))
- [tldraw] Removes `editor.css` and `ui.css` exports, replaces with `tldraw.css`
#### [fix] camera culling ([#1602](https://github.com/tldraw/tldraw/pull/1602))
- [editor] Adds `Editor.cameraState`
- Adds smart culling to make panning and zooming more smooth
#### Styles API ([#1580](https://github.com/tldraw/tldraw/pull/1580))
-
#### (1/2) Timeout collaborator cursors ([#1525](https://github.com/tldraw/tldraw/pull/1525))
- Brought back cursor timeouts. Collaborator cursors now disappear after 3 seconds of inactivity.
#### Remove `@tldraw/utils` from the docs site ([#1596](https://github.com/tldraw/tldraw/pull/1596))
- [docs] Removed an internal utilities package.
#### (1/2) Cursor Chat - Presence ([#1487](https://github.com/tldraw/tldraw/pull/1487))
- [dev] Added support for cursor chat presence.
#### [docs] Add barebones note about translations ([#1593](https://github.com/tldraw/tldraw/pull/1593))
- [docs] Added brief info on how to join as a translations contributor.
#### [refactor] snapping ([#1589](https://github.com/tldraw/tldraw/pull/1589))
- [editor] fix bug in snapping
#### remove `ShapeUtil.transform` ([#1590](https://github.com/tldraw/tldraw/pull/1590))
- [editor] Remove `ShapeUtil.transform`
#### Change app to editor in docs ([#1592](https://github.com/tldraw/tldraw/pull/1592))
- [docs] Updated 'App' to 'Editor'.
#### Make sure loading screens use dark mode user preference. ([#1552](https://github.com/tldraw/tldraw/pull/1552))
- Make sure our loading and error screens take dark mode setting into account.
#### remove `ShapeUtil.point` ([#1591](https://github.com/tldraw/tldraw/pull/1591))
- [editor] Remove `ShapeUtil.point`
#### [fix] Remove group shape export backgrounds ([#1587](https://github.com/tldraw/tldraw/pull/1587))
- Fix image exports for groups
#### Add tsdocs to Editor methods ([#1581](https://github.com/tldraw/tldraw/pull/1581))
- [dev] Added initial documentation for the Editor class.
#### add presence to yjs example ([#1582](https://github.com/tldraw/tldraw/pull/1582))
- [editor] Add presence to yjs example.
#### Add optional generic to `updateShapes` / `createShapes` ([#1579](https://github.com/tldraw/tldraw/pull/1579))
- [editor] adds an optional shape generic to `updateShapes` and `createShapes`
#### fix: properly remove awareness from store ([#1565](https://github.com/tldraw/tldraw/pull/1565))
- Add a brief release note for your PR here.
#### [improvement] Embed shape cleanup ([#1569](https://github.com/tldraw/tldraw/pull/1569))
- [editor] Remove unused props for `TLEditorShape`
- [editor] Adds `canUnmount` property to embed definitions
#### Move the loading of assets to the TldrawEditorWithReadyStore so that all code paths load the assets. ([#1561](https://github.com/tldraw/tldraw/pull/1561))
- Fix a problem where assets were not loading in some cases (snapshots).
#### Add anchor targets to our headings. ([#1571](https://github.com/tldraw/tldraw/pull/1571))
- Improve documentation to include anchor targets.
#### shapes folder, move tools into shape defs ([#1574](https://github.com/tldraw/tldraw/pull/1574))
n/a
#### mini `defineShape` API ([#1563](https://github.com/tldraw/tldraw/pull/1563))
[dev-facing, notes to come]
#### Lokalise: Translations update ([#1572](https://github.com/tldraw/tldraw/pull/1572))
- Added and updates translations for Italian, Russian, and Ukrainian.
#### Fix README typo ([#1451](https://github.com/tldraw/tldraw/pull/1451))
- None
#### yjs example ([#1560](https://github.com/tldraw/tldraw/pull/1560))
- [editor] Adds yjs example project
#### `ExternalContentManager` for handling external content (files, images, etc) ([#1550](https://github.com/tldraw/tldraw/pull/1550))
- [editor] add `ExternalContentManager` for plopping content onto the canvas
- [editor] remove `onCreateAssetFromFile` prop
- [editor] remove `onCreateBookmarkFromUrl` prop
- [editor] introduce `ExternalContentManager`
- [editor] add cleanup function to `onMount`
#### Misc sync fixes ([#1555](https://github.com/tldraw/tldraw/pull/1555))
- Fixes a handful of state management bugs that manifest in multiplayer rooms
#### [Docs] Change some editor properties to methods ([#1553](https://github.com/tldraw/tldraw/pull/1553))
- [docs] Fixed some methods that were incorrectly marked as properties.
#### [Docs] Change some internal methods to public ([#1554](https://github.com/tldraw/tldraw/pull/1554))
- [docs] Changed some Editor methods from internal to public.
#### Use unpkg as a default for serving assets. ([#1548](https://github.com/tldraw/tldraw/pull/1548))
- Use unpkg asset hosting as a default.
#### hoist opacity out of props ([#1526](https://github.com/tldraw/tldraw/pull/1526))
[internal only for now]
#### Fix arrows with weird bends crashing ([#1540](https://github.com/tldraw/tldraw/pull/1540))
- Fixed a rare crash that could happen when you try to curve an arrow with zero distance.
#### [feature] add vertical align to note shape ([#1539](https://github.com/tldraw/tldraw/pull/1539))
- Adds vertical align prop to note shapes
#### [fix] Shift key code / nudge ([#1537](https://github.com/tldraw/tldraw/pull/1537))
- Fix shift key nudging
#### scale exported canvases when they reach the browsers max size ([#1536](https://github.com/tldraw/tldraw/pull/1536))
- Fix a bug where sometimes exports would fail when they were too big for your browser. Now, they're scaled down to the max supported size.
#### [fix] control click on mac ([#1535](https://github.com/tldraw/tldraw/pull/1535))
- Fix control click to open menu on Mac
#### Fix being able to undo following ([#1531](https://github.com/tldraw/tldraw/pull/1531))
- Fixed a bug where you could undo viewport-following and viewport-unfollowing.
#### Select locked shapes on long press ([#1529](https://github.com/tldraw/tldraw/pull/1529))
#### highlighter fixes ([#1530](https://github.com/tldraw/tldraw/pull/1530))
[aq bug fixes]
#### Lokalise: Translations update ([#1515](https://github.com/tldraw/tldraw/pull/1515))
- Added and updated community translations for Galician, Italian, Romanian, Russian, Ukrainian, and Traditional Chinese.
#### Simplify static cursors ([#1520](https://github.com/tldraw/tldraw/pull/1520))
- (editor) Simplifies the cursors in our CSS.
#### Renaming types, shape utils, tools ([#1513](https://github.com/tldraw/tldraw/pull/1513))
- Renaming of types, shape utils, tools
#### tlschema cleanup ([#1509](https://github.com/tldraw/tldraw/pull/1509))
- [editor] Remove `app.createShapeId`
- [tlschema] Cleans up exports
#### Rename tlstore to store ([#1507](https://github.com/tldraw/tldraw/pull/1507))
- Replace @tldraw/tlstore with @tldraw/store
#### Rename tlvalidate to validate ([#1508](https://github.com/tldraw/tldraw/pull/1508))
- Rename tlvalidate to validate
#### Filter out unused assets. ([#1502](https://github.com/tldraw/tldraw/pull/1502))
- Optimize file size of exported files.
#### Cleanup @tldraw/ui types / exports ([#1504](https://github.com/tldraw/tldraw/pull/1504))
- [editor] clean up / unify types
#### rename app to editor ([#1503](https://github.com/tldraw/tldraw/pull/1503))
- Rename `App` to `Editor` and many other things that reference `app` to `editor`.
#### Revert 09c36781 & tweak linting ([#1501](https://github.com/tldraw/tldraw/pull/1501))
[internal-only]
#### Add support for locking shapes ([#1447](https://github.com/tldraw/tldraw/pull/1447))
- Add support for locking shapes.
#### [3/3] Highlighter styling ([#1490](https://github.com/tldraw/tldraw/pull/1490))
Highlighter pen is here! 🎉🎉🎉
#### [2/3] renderer changes to support "sandwich mode" highlighting ([#1418](https://github.com/tldraw/tldraw/pull/1418))
[not yet!]
#### [1/3] initial highlighter shape/tool ([#1401](https://github.com/tldraw/tldraw/pull/1401))
[internal only change layout ground work for highlighter]
#### [feature] reduce motion ([#1485](https://github.com/tldraw/tldraw/pull/1485))
- [editor] Add `reduceMotion` user preference
- Add reduce motion option to preferences
#### [feature] Easier store persistence API + persistence example ([#1480](https://github.com/tldraw/tldraw/pull/1480))
- [tlstore] adds `getSnapshot` and `loadSnapshot`
#### Add DSL to make writing shape-layout test cases much easier ([#1413](https://github.com/tldraw/tldraw/pull/1413))
[internal only change]
#### Feature flags rework ([#1474](https://github.com/tldraw/tldraw/pull/1474))
[internal only change]
#### [tiny] add isPageId ([#1482](https://github.com/tldraw/tldraw/pull/1482))
- [tlschema] Add `isPageId`
#### [minor] Mark tlsync-client internal APIs ([#1481](https://github.com/tldraw/tldraw/pull/1481))
- Removes internal APIs from `@tldraw/tlsync-client`
#### [refactor] update record names ([#1473](https://github.com/tldraw/tldraw/pull/1473))
- [editor] rename record types
#### remove safari special-casing for paste ([#1470](https://github.com/tldraw/tldraw/pull/1470))
[fixes a regression introduced during this release]
#### Don't allow `g` keyboard shortcut in readonly mode, show laser tool in the toolbar ([#1459](https://github.com/tldraw/tldraw/pull/1459))
- Disable geo tool shortcut in readonly mode. Show laser on the toolbar.
#### [mini-feature] Following indicator ([#1468](https://github.com/tldraw/tldraw/pull/1468))
- Adds viewport following indicator
#### [chore] refactor user preferences ([#1435](https://github.com/tldraw/tldraw/pull/1435))
- Add a brief release note for your PR here.
#### Add translations for "Leave shared project" action ([#1394](https://github.com/tldraw/tldraw/pull/1394))
- None
#### update use-gesture ([#1453](https://github.com/tldraw/tldraw/pull/1453))
- Updates use-gesture to fix pinch gesture bug on iPad.
#### Add migration for horizontal alignment ([#1443](https://github.com/tldraw/tldraw/pull/1443))
- Add support for legacy alignment options.
#### Stricter ID types ([#1439](https://github.com/tldraw/tldraw/pull/1439))
[internal only, covered by #1432 changelog]
#### [refactor] restore createTLSchema ([#1444](https://github.com/tldraw/tldraw/pull/1444))
- [editor] Simplifies custom shape definition
- [tldraw] Updates props for `<TldrawEditor>` component to require a `TldrawEditorConfig`.
#### Fix cursor shadow getting clipped ([#1441](https://github.com/tldraw/tldraw/pull/1441))
- Fixed a bug where custom cursors could have their shadow clipped.
#### Add SVG cursors for all cursor types ([#1416](https://github.com/tldraw/tldraw/pull/1416))
- Added consistent custom cursors.
#### [refactor] remove `createTLSchema` ([#1440](https://github.com/tldraw/tldraw/pull/1440))
- [tlschema] Removes `createTLSchema` in favor of `TldrawEditorConfig`
#### [refactor] Remove `TLShapeDef`, `getShapeUtilByType`. ([#1432](https://github.com/tldraw/tldraw/pull/1432))
- [tlschema] Update props of `createTLSchema`
- [editor] Update props of `TldrawEditorConfig`
- [editor] Remove `App.getShapeUtilByType`
- [editor] Update `App.getShapeUtil` to take a type rather than a shape
#### [refactor] record migrations ([#1430](https://github.com/tldraw/tldraw/pull/1430))
- [tlschema] Improve `defineMigrations`
- [editor] Simplify migration definitions
#### Measure individual words instead of just line breaks for text exports ([#1397](https://github.com/tldraw/tldraw/pull/1397))
- Add a brief release note for your PR here.
#### Update docs links + guides + build ([#1422](https://github.com/tldraw/tldraw/pull/1422))
- [docs] Updated guides to get assets from the new `tldraw/tldraw` repo instead of the old `tldraw/tldraw-examples`.
- [docs] Updated an old CodeSandbox link to the new StackBlitz.
#### Create @tldraw/indices package ([#1426](https://github.com/tldraw/tldraw/pull/1426))
- [@tldraw/editor] Remove fractional indices code into `@tldraw/indices`
- [@tldraw/indices] Create library for fractional indices code
#### [feature] Add checkbox to toolbar ([#1423](https://github.com/tldraw/tldraw/pull/1423))
- Adds missing checkbox to toolbar.
#### [improvement] set horizontal position using text alignment ([#1419](https://github.com/tldraw/tldraw/pull/1419))
- Geo shapes and sticky notes now position their labels based on their alignment.
#### [fix] reorder handles in front of selection ([#1420](https://github.com/tldraw/tldraw/pull/1420))
- Fix a bug where handles would appear behind selection indicators.
#### [feature] add laser pointer ([#1412](https://github.com/tldraw/tldraw/pull/1412))
- Adds the laser pointer tool.
#### [firefox] Fix the pointer getting stuck down when you press the control key ([#1390](https://github.com/tldraw/tldraw/pull/1390))
- [Firefox] Fixed a bug where the pointer could get stuck down when the control key is held down.
#### Vertical text alignment for geo shapes ([#1414](https://github.com/tldraw/tldraw/pull/1414))
- This adds vertical text alignment property to geo shapes.
#### [fix] page menu, drag handle css ([#1406](https://github.com/tldraw/tldraw/pull/1406))
- Fix styling in the page menu
#### Switch to new collaborators component ([#1405](https://github.com/tldraw/tldraw/pull/1405))
- [Breaking] Removes the old version of LiveCollaborators, replacing it with the new one based on `TLInstancePresence`
#### [improvement] refactor paste to support multi-line text ([#1398](https://github.com/tldraw/tldraw/pull/1398))
- Improves clipboard logic when pasting text
- Adds support for pasting multi-line text
- Adds maximum widths when pasting single-line text
- Adds support for RTL languages when pasting multi-line or wrapped text
- Strips leading indentation when pasting text
#### remove url state, to private ([#1402](https://github.com/tldraw/tldraw/pull/1402))
- [editor] remove `useUrlState`
#### Don't allow the users to use keyboard shortcuts to select tools in readonly mode. ([#1382](https://github.com/tldraw/tldraw/pull/1382))
- Disable keyboard shortcut events for tools in readonly mode. We only allow the select, hand tools, and zoom tool.
#### [fix] Don't synchronize isReadOnly ([#1396](https://github.com/tldraw/tldraw/pull/1396))
- Removes the isReadOnly value from the `user_document_settings` record type.
#### fix pasted tabs not getting converted to space ([#1388](https://github.com/tldraw/tldraw/pull/1388))
- Fixed a bug where pasted tabs wouldn't get converted into spaces.
#### Delete an empty text shape when clicking on another text shape. ([#1384](https://github.com/tldraw/tldraw/pull/1384))
- Fix a problem with empty text shapes not getting deleted if you clicked on another text shape.
#### Fix setting the grid mode. ([#1386](https://github.com/tldraw/tldraw/pull/1386))
- Fix grid mode toggle.
#### Update codesandbox + example link ([#1368](https://github.com/tldraw/tldraw/pull/1368))
- [docs] Fixed some links to examples.
#### Fix selection foreground being misaligned ([#1380](https://github.com/tldraw/tldraw/pull/1380))
- None (fix for a bug that hasn't released)
#### Expand selection outline for single-selected draw shape ([#1379](https://github.com/tldraw/tldraw/pull/1379))
- Improve selection outlines around horizontal or vertical draw shapes
#### Add localizations for snapshots links ([#1347](https://github.com/tldraw/tldraw/pull/1347))
- Add localization for creating snapshot links.
#### [fix] pointer location not updating when moving over editing shape ([#1378](https://github.com/tldraw/tldraw/pull/1378))
- Fix a bug where the pointer location would not update when moving the pointer over an editing shape.
#### [perf] deleteShapes ([#1373](https://github.com/tldraw/tldraw/pull/1373))
- Perf improvement for deleting shapes in a document with lots of pages.
#### Neaten up pr template ([#1369](https://github.com/tldraw/tldraw/pull/1369))
- None: internal
#### fix a couple of consistency assumptions ([#1365](https://github.com/tldraw/tldraw/pull/1365))
- Fixes a couple of minor consistency bugs affecting shape updating and page deletion in multiplayer contexts.
#### Disable nightly/on-demand webdriver scripts ([#1366](https://github.com/tldraw/tldraw/pull/1366))
None
#### avoid lazy race conditions ([#1364](https://github.com/tldraw/tldraw/pull/1364))
[internal only]
#### Adds CI for webdriver tests ([#1343](https://github.com/tldraw/tldraw/pull/1343))
- Github action CI workflows added for webdriver tests
- Refactored e2e test runner
#### enable eslint for test files ([#1363](https://github.com/tldraw/tldraw/pull/1363))
internal-only change
#### [perf] make ensureStoreIsUsable scale better ([#1362](https://github.com/tldraw/tldraw/pull/1362))
- Add a brief release note for your PR here.
#### Export Events stuff ([#1360](https://github.com/tldraw/tldraw/pull/1360))
- [ui] export the `TLUiEventSource` type
- [ui] export the `EventsProviderProps ` type
- [ui] export the `useEvents ` hook
#### presence-related fixes ([#1361](https://github.com/tldraw/tldraw/pull/1361))
- Fix a bug where creating a page could throw an error in some multiplayer contexts.
#### [improvement] rename onEvent to onUiEvent ([#1358](https://github.com/tldraw/tldraw/pull/1358))
- [docs] Adds docs for ui events
- [tldraw] Renames `onEvent` to `onUiEvent`
#### [docs] Update links in docs ([#1357](https://github.com/tldraw/tldraw/pull/1357))
- [docs] Update links in docs to point to the tldraw repository rather than tldraw-examples.
#### [improvement] Ui events followup ([#1354](https://github.com/tldraw/tldraw/pull/1354))
- [ui] Adds source to ui events data object
- [ui] Corrects source for toolbar events
- [ui] Corrects source for clipboard events
- [examples] Updates events example
#### [fix] various text ([#1350](https://github.com/tldraw/tldraw/pull/1350))
- Allow leading whitespace
#### [chore] Bump nanoid ([#1349](https://github.com/tldraw/tldraw/pull/1349))
- Remove unused userId and instanceId props from AppOptions
#### Fix "copy as png" in firefox when `dom.events.asyncClipboard.clipboardItem` is enabled ([#1342](https://github.com/tldraw/tldraw/pull/1342))
- Fix "copy as png" in firefox when `dom.events.asyncClipboard.clipboardItem` is enabled
#### Rework the assets package for strategy-specific imports ([#1341](https://github.com/tldraw/tldraw/pull/1341))
- [dev] If you're using the `@tldraw/assets` package, you need to update your code to `import { getAssetUrlsByImport } from '@tldraw/assets/imports'` instead of `import { getBundlerAssetUrls } from '@tldraw/assets`
---
#### 💥 Breaking Change
- [minor] Mark tlsync-client internal APIs [#1481](https://github.com/tldraw/tldraw/pull/1481) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/file-format`, `@tldraw/store`
- [tweak] migrate store snapshot arguments [#1659](https://github.com/tldraw/tldraw/pull/1659) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/file-format`, `@tldraw/store`, `@tldraw/tlschema`
- [improvement] store snapshot types [#1657](https://github.com/tldraw/tldraw/pull/1657) ([@steveruizok](https://github.com/steveruizok))
- Rename tlstore to store [#1507](https://github.com/tldraw/tldraw/pull/1507) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/ui`
- [fix] react component runaways, error boundaries [#1625](https://github.com/tldraw/tldraw/pull/1625) ([@steveruizok](https://github.com/steveruizok))
- Tidy up [#1600](https://github.com/tldraw/tldraw/pull/1600) ([@steveruizok](https://github.com/steveruizok))
- Use unpkg as a default for serving assets. [#1548](https://github.com/tldraw/tldraw/pull/1548) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Switch to new collaborators component [#1405](https://github.com/tldraw/tldraw/pull/1405) ([@ds300](https://github.com/ds300))
- [improvement] Ui events followup [#1354](https://github.com/tldraw/tldraw/pull/1354) ([@steveruizok](https://github.com/steveruizok))
- [feature] ui events [#1326](https://github.com/tldraw/tldraw/pull/1326) ([@orangemug](https://github.com/orangemug) [@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/file-format`, `@tldraw/tldraw`, `@tldraw/tlschema`
- `ShapeUtil` refactor, `Editor` cleanup [#1611](https://github.com/tldraw/tldraw/pull/1611) ([@steveruizok](https://github.com/steveruizok))
- [refactor] restore createTLSchema [#1444](https://github.com/tldraw/tldraw/pull/1444) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`
- Remove on drop override [#1612](https://github.com/tldraw/tldraw/pull/1612) ([@steveruizok](https://github.com/steveruizok))
- Rename `ShapeUtil.render` -> `ShapeUtil.component` [#1609](https://github.com/tldraw/tldraw/pull/1609) ([@steveruizok](https://github.com/steveruizok))
- [fix] camera culling [#1602](https://github.com/tldraw/tldraw/pull/1602) ([@steveruizok](https://github.com/steveruizok))
- remove `ShapeUtil.transform` [#1590](https://github.com/tldraw/tldraw/pull/1590) ([@steveruizok](https://github.com/steveruizok))
- remove `ShapeUtil.point` [#1591](https://github.com/tldraw/tldraw/pull/1591) ([@steveruizok](https://github.com/steveruizok))
- remove url state, to private [#1402](https://github.com/tldraw/tldraw/pull/1402) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/tldraw`, `@tldraw/ui`
- tldraw.css [#1607](https://github.com/tldraw/tldraw/pull/1607) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/file-format`, `@tldraw/tlschema`, `@tldraw/ui`, `@tldraw/utils`, `@tldraw/validate`
- Styles API [#1580](https://github.com/tldraw/tldraw/pull/1580) ([@SomeHats](https://github.com/SomeHats) [@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/file-format`, `@tldraw/tldraw`, `@tldraw/tlschema`, `@tldraw/utils`, `@tldraw/validate`
- mini `defineShape` API [#1563](https://github.com/tldraw/tldraw/pull/1563) ([@SomeHats](https://github.com/SomeHats))
- `@tldraw/editor`, `@tldraw/file-format`, `@tldraw/tldraw`, `@tldraw/ui`
- `ExternalContentManager` for handling external content (files, images, etc) [#1550](https://github.com/tldraw/tldraw/pull/1550) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/tlschema`, `@tldraw/ui`
- hoist opacity out of props [#1526](https://github.com/tldraw/tldraw/pull/1526) ([@SomeHats](https://github.com/SomeHats))
- Add support for project names [#1340](https://github.com/tldraw/tldraw/pull/1340) ([@TodePond](https://github.com/TodePond) [@steveruizok](https://github.com/steveruizok))
- [refactor] Remove `TLShapeDef`, `getShapeUtilByType`. [#1432](https://github.com/tldraw/tldraw/pull/1432) ([@steveruizok](https://github.com/steveruizok) [@SomeHats](https://github.com/SomeHats))
- [fix] Don't synchronize isReadOnly [#1396](https://github.com/tldraw/tldraw/pull/1396) ([@ds300](https://github.com/ds300))
- `@tldraw/editor`, `@tldraw/file-format`, `@tldraw/store`, `@tldraw/tlschema`, `@tldraw/ui`
- Independent instance state persistence [#1493](https://github.com/tldraw/tldraw/pull/1493) ([@ds300](https://github.com/ds300))
- tlschema cleanup [#1509](https://github.com/tldraw/tldraw/pull/1509) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/file-format`, `@tldraw/ui`
- Renaming types, shape utils, tools [#1513](https://github.com/tldraw/tldraw/pull/1513) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/file-format`, `@tldraw/tlschema`, `@tldraw/validate`
- Rename tlvalidate to validate [#1508](https://github.com/tldraw/tldraw/pull/1508) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/file-format`, `@tldraw/tlschema`, `@tldraw/ui`
- Cleanup @tldraw/ui types / exports [#1504](https://github.com/tldraw/tldraw/pull/1504) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/file-format`, `@tldraw/indices`, `@tldraw/tldraw`, `@tldraw/ui`
- rename app to editor [#1503](https://github.com/tldraw/tldraw/pull/1503) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/file-format`, `@tldraw/tldraw`, `@tldraw/tlschema`, `@tldraw/ui`
- [refactor] User-facing APIs [#1478](https://github.com/tldraw/tldraw/pull/1478) ([@steveruizok](https://github.com/steveruizok))
- [chore] refactor user preferences [#1435](https://github.com/tldraw/tldraw/pull/1435) ([@ds300](https://github.com/ds300))
- `@tldraw/editor`, `@tldraw/file-format`, `@tldraw/tlschema`, `@tldraw/ui`
- [refactor] update record names [#1473](https://github.com/tldraw/tldraw/pull/1473) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/tlschema`
- [refactor] remove `createTLSchema` [#1440](https://github.com/tldraw/tldraw/pull/1440) ([@steveruizok](https://github.com/steveruizok))
- [refactor] record migrations [#1430](https://github.com/tldraw/tldraw/pull/1430) ([@steveruizok](https://github.com/steveruizok))
- [chore] Bump nanoid [#1349](https://github.com/tldraw/tldraw/pull/1349) ([@ds300](https://github.com/ds300))
- `@tldraw/editor`, `@tldraw/indices`, `@tldraw/utils`
- Create @tldraw/indices package [#1426](https://github.com/tldraw/tldraw/pull/1426) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/ui`
- [improvement] rename onEvent to onUiEvent [#1358](https://github.com/tldraw/tldraw/pull/1358) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/assets`, `@tldraw/tlschema`
- Rework the assets package for strategy-specific imports [#1341](https://github.com/tldraw/tldraw/pull/1341) ([@SomeHats](https://github.com/SomeHats))
#### 🚀 Enhancement
- [feature] Easier store persistence API + persistence example [#1480](https://github.com/tldraw/tldraw/pull/1480) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/tlschema`, `@tldraw/ui`
- Styles API follow-ups [#1636](https://github.com/tldraw/tldraw/pull/1636) ([@SomeHats](https://github.com/SomeHats) [@steveruizok](https://github.com/steveruizok))
- (1/2) Cursor Chat - Presence [#1487](https://github.com/tldraw/tldraw/pull/1487) ([@TodePond](https://github.com/TodePond) [@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`
- Make resizeBox a regular function [#1610](https://github.com/tldraw/tldraw/pull/1610) ([@steveruizok](https://github.com/steveruizok))
- [improvement] set horizontal position using text alignment [#1419](https://github.com/tldraw/tldraw/pull/1419) ([@steveruizok](https://github.com/steveruizok))
- [fix] pointer location not updating when moving over editing shape [#1378](https://github.com/tldraw/tldraw/pull/1378) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/tlschema`
- [fix] yjs presence [#1603](https://github.com/tldraw/tldraw/pull/1603) ([@steveruizok](https://github.com/steveruizok))
- (1/2) Timeout collaborator cursors [#1525](https://github.com/tldraw/tldraw/pull/1525) ([@TodePond](https://github.com/TodePond) [@steveruizok](https://github.com/steveruizok))
- [feature] add vertical align to note shape [#1539](https://github.com/tldraw/tldraw/pull/1539) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/file-format`
- Add optional generic to `updateShapes` / `createShapes` [#1579](https://github.com/tldraw/tldraw/pull/1579) ([@steveruizok](https://github.com/steveruizok))
- move v1 migration code into file-format [#1499](https://github.com/tldraw/tldraw/pull/1499) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/ui`
- Add support for locking shapes [#1447](https://github.com/tldraw/tldraw/pull/1447) ([@MitjaBezensek](https://github.com/MitjaBezensek) [@steveruizok](https://github.com/steveruizok))
- [feature] reduce motion [#1485](https://github.com/tldraw/tldraw/pull/1485) ([@steveruizok](https://github.com/steveruizok))
- [mini-feature] Following indicator [#1468](https://github.com/tldraw/tldraw/pull/1468) ([@steveruizok](https://github.com/steveruizok))
- Add SVG cursors for all cursor types [#1416](https://github.com/tldraw/tldraw/pull/1416) ([@TodePond](https://github.com/TodePond) [@steveruizok](https://github.com/steveruizok))
- [improvement] refactor paste to support multi-line text [#1398](https://github.com/tldraw/tldraw/pull/1398) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/assets`, `@tldraw/editor`, `@tldraw/ui`
- [3/3] Highlighter styling [#1490](https://github.com/tldraw/tldraw/pull/1490) ([@SomeHats](https://github.com/SomeHats) [@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/primitives`
- [2/3] renderer changes to support "sandwich mode" highlighting [#1418](https://github.com/tldraw/tldraw/pull/1418) ([@SomeHats](https://github.com/SomeHats))
- `@tldraw/assets`, `@tldraw/editor`, `@tldraw/tlschema`, `@tldraw/ui`
- [1/3] initial highlighter shape/tool [#1401](https://github.com/tldraw/tldraw/pull/1401) ([@SomeHats](https://github.com/SomeHats))
- [feature] add laser pointer [#1412](https://github.com/tldraw/tldraw/pull/1412) ([@steveruizok](https://github.com/steveruizok))
- Vertical text alignment for geo shapes [#1414](https://github.com/tldraw/tldraw/pull/1414) ([@MitjaBezensek](https://github.com/MitjaBezensek) [@steveruizok](https://github.com/steveruizok))
- `@tldraw/ui`
- [feature] Add checkbox to toolbar [#1423](https://github.com/tldraw/tldraw/pull/1423) ([@steveruizok](https://github.com/steveruizok))
- Add stuff for new 'share project' flow [#1403](https://github.com/tldraw/tldraw/pull/1403) ([@ds300](https://github.com/ds300))
- Snapshot link menu translations [#1399](https://github.com/tldraw/tldraw/pull/1399) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/assets`, `@tldraw/ui`
- open menus refactor [#1400](https://github.com/tldraw/tldraw/pull/1400) ([@steveruizok](https://github.com/steveruizok))
#### 🐛 Bug Fix
- Lokalise: Translations update [#1618](https://github.com/tldraw/tldraw/pull/1618) ([@TodePond](https://github.com/TodePond))
- Fa translation [#1500](https://github.com/tldraw/tldraw/pull/1500) ([@mokazemi](https://github.com/mokazemi) [@steveruizok](https://github.com/steveruizok))
- Lokalise: Translations update [#1572](https://github.com/tldraw/tldraw/pull/1572) ([@TodePond](https://github.com/TodePond))
- Update changelog. Bump version. [#1546](https://github.com/tldraw/tldraw/pull/1546) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Lokalise: Translations update [#1515](https://github.com/tldraw/tldraw/pull/1515) ([@TodePond](https://github.com/TodePond))
- VS Code version bump, changelog. [#1497](https://github.com/tldraw/tldraw/pull/1497) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Fix issue template label not getting applied [#1428](https://github.com/tldraw/tldraw/pull/1428) ([@TodePond](https://github.com/TodePond))
- Bump version. [#1421](https://github.com/tldraw/tldraw/pull/1421) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Update community translations + remove unused translations [#1356](https://github.com/tldraw/tldraw/pull/1356) ([@TodePond](https://github.com/TodePond))
- [docs] Update links in docs [#1357](https://github.com/tldraw/tldraw/pull/1357) ([@steveruizok](https://github.com/steveruizok))
- [chore] Add label options to PR template [#1339](https://github.com/tldraw/tldraw/pull/1339) ([@ds300](https://github.com/ds300))
- Fix publishing [#1338](https://github.com/tldraw/tldraw/pull/1338) ([@SomeHats](https://github.com/SomeHats))
- Update README.md [#1331](https://github.com/tldraw/tldraw/pull/1331) ([@steveruizok](https://github.com/steveruizok))
- [docs] editor API [#1328](https://github.com/tldraw/tldraw/pull/1328) ([@steveruizok](https://github.com/steveruizok))
- [docs] Add missing params docs [#1223](https://github.com/tldraw/tldraw/pull/1223) ([@TodePond](https://github.com/TodePond))
- Add link to original tldraw within issue template [#1225](https://github.com/tldraw/tldraw/pull/1225) ([@TodePond](https://github.com/TodePond))
- Fix issue templates not appearing [#1228](https://github.com/tldraw/tldraw/pull/1228) ([@TodePond](https://github.com/TodePond))
- [improvement] readme / contributing [#1199](https://github.com/tldraw/tldraw/pull/1199) ([@TodePond](https://github.com/TodePond) [@steveruizok](https://github.com/steveruizok))
- [improvement] add bug report / feature request [#1218](https://github.com/tldraw/tldraw/pull/1218) ([@steveruizok](https://github.com/steveruizok))
- add `env` and prefix output options to exec [#1217](https://github.com/tldraw/tldraw/pull/1217) ([@SomeHats](https://github.com/SomeHats))
- lite: run prettier on js + json files [#1195](https://github.com/tldraw/tldraw/pull/1195) ([@SomeHats](https://github.com/SomeHats))
- [chore] use explicit yarn in clean script [#1216](https://github.com/tldraw/tldraw/pull/1216) ([@ds300](https://github.com/ds300))
- fix husky install [#1212](https://github.com/tldraw/tldraw/pull/1212) ([@SomeHats](https://github.com/SomeHats))
- Alex/test [#1202](https://github.com/tldraw/tldraw/pull/1202) ([@SomeHats](https://github.com/SomeHats))
- lite: tweak lockfile name [#1195](https://github.com/tldraw/tldraw/pull/1195) ([@SomeHats](https://github.com/SomeHats))
- lite: common logfile name [#1195](https://github.com/tldraw/tldraw/pull/1195) ([@SomeHats](https://github.com/SomeHats))
- lite: open runners [#1195](https://github.com/tldraw/tldraw/pull/1195) ([@SomeHats](https://github.com/SomeHats))
- poke [#1195](https://github.com/tldraw/tldraw/pull/1195) ([@SomeHats](https://github.com/SomeHats))
- lite: standalone? [#1195](https://github.com/tldraw/tldraw/pull/1195) ([@SomeHats](https://github.com/SomeHats))
- `@tldraw/editor`
- Fix crash when rotating a deleted shape [#1658](https://github.com/tldraw/tldraw/pull/1658) ([@TodePond](https://github.com/TodePond))
- [fix] pen mode touches [#1655](https://github.com/tldraw/tldraw/pull/1655) ([@steveruizok](https://github.com/steveruizok))
- Fix text shapes not having colour [#1649](https://github.com/tldraw/tldraw/pull/1649) ([@TodePond](https://github.com/TodePond))
- Fix SVG cursors not being used [#1639](https://github.com/tldraw/tldraw/pull/1639) ([@TodePond](https://github.com/TodePond))
- [fix] tldraw file drop [#1616](https://github.com/tldraw/tldraw/pull/1616) ([@steveruizok](https://github.com/steveruizok))
- Make sure loading screens use dark mode user preference. [#1552](https://github.com/tldraw/tldraw/pull/1552) ([@MitjaBezensek](https://github.com/MitjaBezensek) [@steveruizok](https://github.com/steveruizok))
- [fix] Remove group shape export backgrounds [#1587](https://github.com/tldraw/tldraw/pull/1587) ([@steveruizok](https://github.com/steveruizok))
- Move the loading of assets to the TldrawEditorWithReadyStore so that all code paths load the assets. [#1561](https://github.com/tldraw/tldraw/pull/1561) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- shapes folder, move tools into shape defs [#1574](https://github.com/tldraw/tldraw/pull/1574) ([@SomeHats](https://github.com/SomeHats))
- offset drop point by editor client rect [#1564](https://github.com/tldraw/tldraw/pull/1564) ([@BrianHung](https://github.com/BrianHung))
- More misc sync fixes [#1559](https://github.com/tldraw/tldraw/pull/1559) ([@ds300](https://github.com/ds300))
- Misc sync fixes [#1555](https://github.com/tldraw/tldraw/pull/1555) ([@ds300](https://github.com/ds300))
- [fix] Shift key code / nudge [#1537](https://github.com/tldraw/tldraw/pull/1537) ([@steveruizok](https://github.com/steveruizok))
- scale exported canvases when they reach the browsers max size [#1536](https://github.com/tldraw/tldraw/pull/1536) ([@SomeHats](https://github.com/SomeHats))
- [fix] control click on mac [#1535](https://github.com/tldraw/tldraw/pull/1535) ([@steveruizok](https://github.com/steveruizok))
- Fix being able to undo following [#1531](https://github.com/tldraw/tldraw/pull/1531) ([@TodePond](https://github.com/TodePond))
- send user prefs data in broadcast msg [#1466](https://github.com/tldraw/tldraw/pull/1466) ([@ds300](https://github.com/ds300))
- Fix positioning of default cursor [#1458](https://github.com/tldraw/tldraw/pull/1458) ([@TodePond](https://github.com/TodePond))
- change pointer cursor to white [#1454](https://github.com/tldraw/tldraw/pull/1454) ([@TodePond](https://github.com/TodePond))
- Fix cursor shadow getting clipped [#1441](https://github.com/tldraw/tldraw/pull/1441) ([@TodePond](https://github.com/TodePond))
- Fix new wobble [#1431](https://github.com/tldraw/tldraw/pull/1431) ([@TodePond](https://github.com/TodePond))
- [fix] laser pointer [#1429](https://github.com/tldraw/tldraw/pull/1429) ([@steveruizok](https://github.com/steveruizok))
- [fix] reorder handles in front of selection [#1420](https://github.com/tldraw/tldraw/pull/1420) ([@steveruizok](https://github.com/steveruizok))
- [firefox] Fix the pointer getting stuck down when you press the control key [#1390](https://github.com/tldraw/tldraw/pull/1390) ([@TodePond](https://github.com/TodePond))
- fix viewport following [#1411](https://github.com/tldraw/tldraw/pull/1411) ([@ds300](https://github.com/ds300))
- fix pasted tabs not getting converted to space [#1388](https://github.com/tldraw/tldraw/pull/1388) ([@TodePond](https://github.com/TodePond))
- Delete an empty text shape when clicking on another text shape. [#1384](https://github.com/tldraw/tldraw/pull/1384) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Fix setting the grid mode. [#1386](https://github.com/tldraw/tldraw/pull/1386) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Fix selection foreground being misaligned [#1380](https://github.com/tldraw/tldraw/pull/1380) ([@TodePond](https://github.com/TodePond) [@steveruizok](https://github.com/steveruizok))
- Expand selection outline for single-selected draw shape [#1379](https://github.com/tldraw/tldraw/pull/1379) ([@SomeHats](https://github.com/SomeHats))
- [fix] Allow interactions with embeds in readonly mode [#1333](https://github.com/tldraw/tldraw/pull/1333) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- [perf] deleteShapes [#1373](https://github.com/tldraw/tldraw/pull/1373) ([@ds300](https://github.com/ds300))
- fix a couple of consistency assumptions [#1365](https://github.com/tldraw/tldraw/pull/1365) ([@ds300](https://github.com/ds300))
- [fix] various text [#1350](https://github.com/tldraw/tldraw/pull/1350) ([@steveruizok](https://github.com/steveruizok))
- [fix] tabs in text exports [#1323](https://github.com/tldraw/tldraw/pull/1323) ([@steveruizok](https://github.com/steveruizok))
- [fix] update useTransform.ts [#1327](https://github.com/tldraw/tldraw/pull/1327) ([@steveruizok](https://github.com/steveruizok))
- [improvement] dragging start distance on coarse pointer [#1220](https://github.com/tldraw/tldraw/pull/1220) ([@steveruizok](https://github.com/steveruizok))
- [fix] SVG export for arrows with labels but no arrowheads [#1229](https://github.com/tldraw/tldraw/pull/1229) ([@steveruizok](https://github.com/steveruizok))
- add docs for TLShapeUtil [#1215](https://github.com/tldraw/tldraw/pull/1215) ([@TodePond](https://github.com/TodePond))
- [fix] publish [#1222](https://github.com/tldraw/tldraw/pull/1222) ([@ds300](https://github.com/ds300))
- [fix] typo in isFocusingInput [#1221](https://github.com/tldraw/tldraw/pull/1221) ([@ds300](https://github.com/ds300))
- [feat] new LiveCollaborators behind feature flag [#1219](https://github.com/tldraw/tldraw/pull/1219) ([@ds300](https://github.com/ds300))
- [fix] collaborator render order [#1213](https://github.com/tldraw/tldraw/pull/1213) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/ui`
- 3/2 Cursor chat [#1623](https://github.com/tldraw/tldraw/pull/1623) ([@steveruizok](https://github.com/steveruizok))
- [fix] embeds [#1578](https://github.com/tldraw/tldraw/pull/1578) ([@steveruizok](https://github.com/steveruizok))
- highlighter fixes [#1530](https://github.com/tldraw/tldraw/pull/1530) ([@SomeHats](https://github.com/SomeHats))
- Feature flags rework [#1474](https://github.com/tldraw/tldraw/pull/1474) ([@SomeHats](https://github.com/SomeHats))
- remove svg layer, html all the things, rs to tl [#1227](https://github.com/tldraw/tldraw/pull/1227) ([@TodePond](https://github.com/TodePond) [@steveruizok](https://github.com/steveruizok))
- Added `pHYs` to import/export of png images [#1200](https://github.com/tldraw/tldraw/pull/1200) ([@orangemug](https://github.com/orangemug) [@steveruizok](https://github.com/steveruizok))
- `@tldraw/tldraw`
- [fix] tldraw api report [#1615](https://github.com/tldraw/tldraw/pull/1615) ([@steveruizok](https://github.com/steveruizok))
- Fix to not ignore the `userId` option for `<Tldraw/>` component in `@tldraw/tldraw` [#1205](https://github.com/tldraw/tldraw/pull/1205) ([@orangemug](https://github.com/orangemug))
- `@tldraw/editor`, `@tldraw/primitives`
- [refactor] snapping [#1589](https://github.com/tldraw/tldraw/pull/1589) ([@steveruizok](https://github.com/steveruizok))
- Fix arrows with weird bends crashing [#1540](https://github.com/tldraw/tldraw/pull/1540) ([@TodePond](https://github.com/TodePond))
- ensure that fixed points stay fixed [#1523](https://github.com/tldraw/tldraw/pull/1523) ([@steveruizok](https://github.com/steveruizok))
- Use `strokePathData` for `<ShapeFill/>` path to avoid bugs in the inner path algo [#1207](https://github.com/tldraw/tldraw/pull/1207) ([@orangemug](https://github.com/orangemug) [@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/tlschema`
- update exports for user presence [#1583](https://github.com/tldraw/tldraw/pull/1583) ([@steveruizok](https://github.com/steveruizok))
- [improvement] Embed shape cleanup [#1569](https://github.com/tldraw/tldraw/pull/1569) ([@steveruizok](https://github.com/steveruizok))
- Add migration for horizontal alignment [#1443](https://github.com/tldraw/tldraw/pull/1443) ([@MitjaBezensek](https://github.com/MitjaBezensek) [@steveruizok](https://github.com/steveruizok))
- [chore] move schema construction to tlschema package [#1334](https://github.com/tldraw/tldraw/pull/1334) ([@ds300](https://github.com/ds300))
- `@tldraw/assets`, `@tldraw/editor`, `@tldraw/ui`, `@tldraw/utils`
- Asset improvements [#1557](https://github.com/tldraw/tldraw/pull/1557) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- `@tldraw/ui`
- Use `"Toggle locked"` [#1538](https://github.com/tldraw/tldraw/pull/1538) ([@steveruizok](https://github.com/steveruizok))
- Select locked shapes on long press [#1529](https://github.com/tldraw/tldraw/pull/1529) ([@steveruizok](https://github.com/steveruizok))
- remove safari special-casing for paste [#1470](https://github.com/tldraw/tldraw/pull/1470) ([@SomeHats](https://github.com/SomeHats))
- Don't allow `g` keyboard shortcut in readonly mode, show laser tool in the toolbar [#1459](https://github.com/tldraw/tldraw/pull/1459) ([@MitjaBezensek](https://github.com/MitjaBezensek) [@steveruizok](https://github.com/steveruizok))
- Fix people menu button border on android [#1471](https://github.com/tldraw/tldraw/pull/1471) ([@TodePond](https://github.com/TodePond))
- [fix] lock option for laser tool [#1460](https://github.com/tldraw/tldraw/pull/1460) ([@steveruizok](https://github.com/steveruizok))
- Add laser keyboard shortcut. [#1467](https://github.com/tldraw/tldraw/pull/1467) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- [fix] make follow icon visible on iPad [#1462](https://github.com/tldraw/tldraw/pull/1462) ([@steveruizok](https://github.com/steveruizok))
- [fix] page item submenu [#1461](https://github.com/tldraw/tldraw/pull/1461) ([@steveruizok](https://github.com/steveruizok))
- Add translations for "Leave shared project" action [#1394](https://github.com/tldraw/tldraw/pull/1394) ([@TodePond](https://github.com/TodePond) [@steveruizok](https://github.com/steveruizok))
- [fix] page menu, drag handle css [#1406](https://github.com/tldraw/tldraw/pull/1406) ([@steveruizok](https://github.com/steveruizok))
- Don't allow the users to use keyboard shortcuts to select tools in readonly mode. [#1382](https://github.com/tldraw/tldraw/pull/1382) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Disabling middle click paste in favour of panning [#1335](https://github.com/tldraw/tldraw/pull/1335) ([@orangemug](https://github.com/orangemug) [@steveruizok](https://github.com/steveruizok))
- Export Events stuff [#1360](https://github.com/tldraw/tldraw/pull/1360) ([@steveruizok](https://github.com/steveruizok))
- Fix "copy as png" in firefox when `dom.events.asyncClipboard.clipboardItem` is enabled [#1342](https://github.com/tldraw/tldraw/pull/1342) ([@orangemug](https://github.com/orangemug))
- [tiny] rename show menu paste [#1332](https://github.com/tldraw/tldraw/pull/1332) ([@steveruizok](https://github.com/steveruizok))
- update @radix-ui/react-popover to 1.0.6-rc.5 [#1206](https://github.com/tldraw/tldraw/pull/1206) ([@SomeHats](https://github.com/SomeHats))
- `@tldraw/file-format`
- Filter out unused assets. [#1502](https://github.com/tldraw/tldraw/pull/1502) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- `@tldraw/editor`, `@tldraw/file-format`, `@tldraw/tlschema`, `@tldraw/ui`, `@tldraw/utils`
- Stricter ID types [#1439](https://github.com/tldraw/tldraw/pull/1439) ([@SomeHats](https://github.com/SomeHats) [@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/primitives`, `@tldraw/ui`
- Measure individual words instead of just line breaks for text exports [#1397](https://github.com/tldraw/tldraw/pull/1397) ([@SomeHats](https://github.com/SomeHats))
- `@tldraw/tlschema`
- [perf] make ensureStoreIsUsable scale better [#1362](https://github.com/tldraw/tldraw/pull/1362) ([@ds300](https://github.com/ds300))
- `@tldraw/editor`, `@tldraw/utils`
- presence-related fixes [#1361](https://github.com/tldraw/tldraw/pull/1361) ([@ds300](https://github.com/ds300))
- `@tldraw/assets`, `@tldraw/editor`, `@tldraw/tlschema`, `@tldraw/ui`
- [feature] `check-box` geo shape [#1330](https://github.com/tldraw/tldraw/pull/1330) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/assets`, `@tldraw/editor`, `@tldraw/tldraw`, `@tldraw/ui`
- New vite-based examples app [#1226](https://github.com/tldraw/tldraw/pull/1226) ([@SomeHats](https://github.com/SomeHats))
- `@tldraw/assets`, `@tldraw/file-format`, `@tldraw/polyfills`, `@tldraw/primitives`, `@tldraw/tldraw`, `@tldraw/tlschema`, `@tldraw/ui`, `@tldraw/utils`
- readmes [#1195](https://github.com/tldraw/tldraw/pull/1195) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/assets`, `@tldraw/editor`, `@tldraw/file-format`, `@tldraw/polyfills`, `@tldraw/primitives`, `@tldraw/tldraw`, `@tldraw/tlschema`, `@tldraw/ui`, `@tldraw/utils`
- [chore] update lazyrepo [#1211](https://github.com/tldraw/tldraw/pull/1211) ([@ds300](https://github.com/ds300))
- [lite] upgrade lazyrepo [#1198](https://github.com/tldraw/tldraw/pull/1198) ([@ds300](https://github.com/ds300))
- transfer-out: transfer out [#1195](https://github.com/tldraw/tldraw/pull/1195) ([@SomeHats](https://github.com/SomeHats))
- `@tldraw/tlschema`, `@tldraw/ui`
- [fix] pick a better default language [#1201](https://github.com/tldraw/tldraw/pull/1201) ([@steveruizok](https://github.com/steveruizok) [@TodePond](https://github.com/TodePond))
- `@tldraw/assets`, `@tldraw/editor`, `@tldraw/tldraw`, `@tldraw/tlschema`, `@tldraw/ui`, `@tldraw/utils`
- derived presence state [#1204](https://github.com/tldraw/tldraw/pull/1204) ([@ds300](https://github.com/ds300))
#### ⚠️ Pushed to `main`
- Update publish-new.yml ([@steveruizok](https://github.com/steveruizok))
- Update lerna.json ([@steveruizok](https://github.com/steveruizok))
- Update publish-new.ts ([@steveruizok](https://github.com/steveruizok))
- change App to Editor in docs ([@TodePond](https://github.com/TodePond))
- rename api.mdx to editor.mdx ([@TodePond](https://github.com/TodePond))
- remove e2e files ([@steveruizok](https://github.com/steveruizok))
- main: notify huppy after release ([@SomeHats](https://github.com/SomeHats))
- main: exclude @tldraw/assets from vite dep optimization to fix examples links ([@SomeHats](https://github.com/SomeHats))
- `@tldraw/assets`, `@tldraw/editor`, `@tldraw/file-format`, `@tldraw/indices`, `@tldraw/polyfills`, `@tldraw/primitives`, `@tldraw/store`, `@tldraw/tldraw`, `@tldraw/tlschema`, `@tldraw/ui`, `@tldraw/utils`, `@tldraw/validate`
- update lazyrepo ([@ds300](https://github.com/ds300))
#### 🏠 Internal
- [chore] bump vscode extension to 2.0.9 [#1662](https://github.com/tldraw/tldraw/pull/1662) ([@steveruizok](https://github.com/steveruizok))
- untrack generated files [#1646](https://github.com/tldraw/tldraw/pull/1646) ([@steveruizok](https://github.com/steveruizok))
- Update pr template [#1570](https://github.com/tldraw/tldraw/pull/1570) ([@steveruizok](https://github.com/steveruizok))
- Add contributor license agreement. [#1556](https://github.com/tldraw/tldraw/pull/1556) ([@steveruizok](https://github.com/steveruizok))
- Reinstate auto [#1524](https://github.com/tldraw/tldraw/pull/1524) ([@ds300](https://github.com/ds300))
- [infra] use npx to run auto [#1521](https://github.com/tldraw/tldraw/pull/1521) ([@ds300](https://github.com/ds300))
- Revert 09c36781 & tweak linting [#1501](https://github.com/tldraw/tldraw/pull/1501) ([@SomeHats](https://github.com/SomeHats))
- [fix] eslint from brivate [#1498](https://github.com/tldraw/tldraw/pull/1498) ([@steveruizok](https://github.com/steveruizok))
- [chore] remove webdriver dependencies / scripts [#1488](https://github.com/tldraw/tldraw/pull/1488) ([@steveruizok](https://github.com/steveruizok))
- [fix] local e2e script [#1442](https://github.com/tldraw/tldraw/pull/1442) ([@steveruizok](https://github.com/steveruizok))
- [chore] remove yarnrc-private.yml [#1427](https://github.com/tldraw/tldraw/pull/1427) ([@steveruizok](https://github.com/steveruizok))
- [fix] example routes on vercel [#1391](https://github.com/tldraw/tldraw/pull/1391) ([@steveruizok](https://github.com/steveruizok))
- Neaten up pr template [#1369](https://github.com/tldraw/tldraw/pull/1369) ([@TodePond](https://github.com/TodePond))
- remove references to tldraw-lite [#1367](https://github.com/tldraw/tldraw/pull/1367) ([@SomeHats](https://github.com/SomeHats))
- `@tldraw/editor`, `@tldraw/ui`
- Explicit shape type checks [#1594](https://github.com/tldraw/tldraw/pull/1594) ([@steveruizok](https://github.com/steveruizok))
- [improvement] bookmark shape logic [#1568](https://github.com/tldraw/tldraw/pull/1568) ([@steveruizok](https://github.com/steveruizok))
- Simplify static cursors [#1520](https://github.com/tldraw/tldraw/pull/1520) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/ui`
- move some kbds into actions and tools [#1585](https://github.com/tldraw/tldraw/pull/1585) ([@BrianHung](https://github.com/BrianHung) [@steveruizok](https://github.com/steveruizok))
- Add localizations for snapshots links [#1347](https://github.com/tldraw/tldraw/pull/1347) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- `@tldraw/editor`
- use the right TLEventHandlers [#1486](https://github.com/tldraw/tldraw/pull/1486) ([@judicaelandria](https://github.com/judicaelandria) [@steveruizok](https://github.com/steveruizok))
- yjs example [#1560](https://github.com/tldraw/tldraw/pull/1560) ([@steveruizok](https://github.com/steveruizok))
- rename app folder to editor [#1528](https://github.com/tldraw/tldraw/pull/1528) ([@steveruizok](https://github.com/steveruizok))
- [fix] overlay rendering issues [#1389](https://github.com/tldraw/tldraw/pull/1389) ([@steveruizok](https://github.com/steveruizok))
- Remove commented code in App [#1377](https://github.com/tldraw/tldraw/pull/1377) ([@steveruizok](https://github.com/steveruizok))
- enable eslint for test files [#1363](https://github.com/tldraw/tldraw/pull/1363) ([@SomeHats](https://github.com/SomeHats))
- `@tldraw/tlschema`
- restore styles sets exports [#1512](https://github.com/tldraw/tldraw/pull/1512) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/primitives`
- replace console.log with nicelog [#1496](https://github.com/tldraw/tldraw/pull/1496) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/indices`, `@tldraw/primitives`, `@tldraw/tldraw`, `@tldraw/ui`
- [chore] remove benchmark [#1489](https://github.com/tldraw/tldraw/pull/1489) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/tlschema`
- [tiny] add isPageId [#1482](https://github.com/tldraw/tldraw/pull/1482) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/file-format`, `@tldraw/polyfills`, `@tldraw/primitives`, `@tldraw/tldraw`, `@tldraw/tlschema`, `@tldraw/ui`, `@tldraw/utils`
- avoid lazy race conditions [#1364](https://github.com/tldraw/tldraw/pull/1364) ([@SomeHats](https://github.com/SomeHats))
#### 📝 Documentation
- [fix] remove docs scripts [#1651](https://github.com/tldraw/tldraw/pull/1651) ([@steveruizok](https://github.com/steveruizok))
- (2/2) [docs] Fix links to API. [#1654](https://github.com/tldraw/tldraw/pull/1654) ([@TodePond](https://github.com/TodePond))
- (1/2) [docs] Restore some missing changes [#1652](https://github.com/tldraw/tldraw/pull/1652) ([@TodePond](https://github.com/TodePond))
- [docs] Remove embeds page [#1653](https://github.com/tldraw/tldraw/pull/1653) ([@TodePond](https://github.com/TodePond))
- docs: remove not accepting contributions notice [#1647](https://github.com/tldraw/tldraw/pull/1647) ([@gabrielchl](https://github.com/gabrielchl))
- [docs] Add table of contents to Editor page [#1642](https://github.com/tldraw/tldraw/pull/1642) ([@TodePond](https://github.com/TodePond) [@steveruizok](https://github.com/steveruizok))
- remove docs (again) [#1643](https://github.com/tldraw/tldraw/pull/1643) ([@steveruizok](https://github.com/steveruizok))
- [1/2] Move docs to brivate [#1640](https://github.com/tldraw/tldraw/pull/1640) ([@steveruizok](https://github.com/steveruizok))
- [docs] Allow sidebar to be scrolled on short screens [#1632](https://github.com/tldraw/tldraw/pull/1632) ([@TodePond](https://github.com/TodePond))
- [docs] Add feedback when you search [#1633](https://github.com/tldraw/tldraw/pull/1633) ([@TodePond](https://github.com/TodePond))
- [docs] Separate some pages out of the Docs section [#1626](https://github.com/tldraw/tldraw/pull/1626) ([@TodePond](https://github.com/TodePond))
- [docs] Fix wrong cursor when hovering buttons [#1630](https://github.com/tldraw/tldraw/pull/1630) ([@TodePond](https://github.com/TodePond))
- [docs] Tighten up wording & structure of Usage page [#1624](https://github.com/tldraw/tldraw/pull/1624) ([@TodePond](https://github.com/TodePond) [@steveruizok](https://github.com/steveruizok))
- [docs] Tighten up Editor page introduction [#1622](https://github.com/tldraw/tldraw/pull/1622) ([@TodePond](https://github.com/TodePond))
- [docs] Tighten up Introduction page [#1621](https://github.com/tldraw/tldraw/pull/1621) ([@TodePond](https://github.com/TodePond) [@steveruizok](https://github.com/steveruizok))
- [docs] Simplify paths for uncategorised pages [#1619](https://github.com/tldraw/tldraw/pull/1619) ([@TodePond](https://github.com/TodePond))
- Auto content refresh for docs site [#1606](https://github.com/tldraw/tldraw/pull/1606) ([@steveruizok](https://github.com/steveruizok))
- Remove `@tldraw/utils` from the docs site [#1596](https://github.com/tldraw/tldraw/pull/1596) ([@TodePond](https://github.com/TodePond))
- [docs] Add barebones note about translations [#1593](https://github.com/tldraw/tldraw/pull/1593) ([@TodePond](https://github.com/TodePond) [@steveruizok](https://github.com/steveruizok))
- Change app to editor in docs [#1592](https://github.com/tldraw/tldraw/pull/1592) ([@TodePond](https://github.com/TodePond))
- add presence to yjs example [#1582](https://github.com/tldraw/tldraw/pull/1582) ([@steveruizok](https://github.com/steveruizok))
- fix: properly remove awareness from store [#1565](https://github.com/tldraw/tldraw/pull/1565) ([@shahriar-shojib](https://github.com/shahriar-shojib) [@steveruizok](https://github.com/steveruizok))
- Add anchor targets to our headings. [#1571](https://github.com/tldraw/tldraw/pull/1571) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Fix README typo [#1451](https://github.com/tldraw/tldraw/pull/1451) ([@fossinating](https://github.com/fossinating) [@steveruizok](https://github.com/steveruizok))
- Update examples links to point to examples folder. [#1522](https://github.com/tldraw/tldraw/pull/1522) ([@steveruizok](https://github.com/steveruizok))
- Update docs links + guides + build [#1422](https://github.com/tldraw/tldraw/pull/1422) ([@TodePond](https://github.com/TodePond))
- Update codesandbox + example link [#1368](https://github.com/tldraw/tldraw/pull/1368) ([@TodePond](https://github.com/TodePond))
- `@tldraw/editor`
- [improvement] custom shapes example [#1660](https://github.com/tldraw/tldraw/pull/1660) ([@steveruizok](https://github.com/steveruizok))
- Add tsdocs to Editor methods [#1581](https://github.com/tldraw/tldraw/pull/1581) ([@TodePond](https://github.com/TodePond) [@steveruizok](https://github.com/steveruizok))
- [Docs] Change some editor properties to methods [#1553](https://github.com/tldraw/tldraw/pull/1553) ([@TodePond](https://github.com/TodePond))
- [Docs] Change some internal methods to public [#1554](https://github.com/tldraw/tldraw/pull/1554) ([@TodePond](https://github.com/TodePond))
- `@tldraw/editor`, `@tldraw/tlschema`
- Styles API docs [#1641](https://github.com/tldraw/tldraw/pull/1641) ([@SomeHats](https://github.com/SomeHats) [@steveruizok](https://github.com/steveruizok))
- `@tldraw/tlschema`
- TLSchema readme [#1506](https://github.com/tldraw/tldraw/pull/1506) ([@steveruizok](https://github.com/steveruizok))
#### 🧪 Tests
- speed up playwright and add visual regression tests [#1638](https://github.com/tldraw/tldraw/pull/1638) ([@SomeHats](https://github.com/SomeHats) [@huppy-bot[bot]](https://github.com/huppy-bot[bot]))
- Disable nightly/on-demand webdriver scripts [#1366](https://github.com/tldraw/tldraw/pull/1366) ([@orangemug](https://github.com/orangemug))
- Adds CI for webdriver tests [#1343](https://github.com/tldraw/tldraw/pull/1343) ([@orangemug](https://github.com/orangemug))
- Added initial webdriver tests [#1337](https://github.com/tldraw/tldraw/pull/1337) ([@orangemug](https://github.com/orangemug))
- `@tldraw/editor`
- update editor tests [#1547](https://github.com/tldraw/tldraw/pull/1547) ([@steveruizok](https://github.com/steveruizok))
- Add DSL to make writing shape-layout test cases much easier [#1413](https://github.com/tldraw/tldraw/pull/1413) ([@SomeHats](https://github.com/SomeHats))
- `@tldraw/editor`, `@tldraw/ui`
- Add playwright tests [#1484](https://github.com/tldraw/tldraw/pull/1484) ([@steveruizok](https://github.com/steveruizok))
#### 🔩 Dependency Updates
- [chore] update wdio-vscode-service [#1346](https://github.com/tldraw/tldraw/pull/1346) ([@ds300](https://github.com/ds300))
- `@tldraw/editor`, `@tldraw/state`, `@tldraw/store`, `@tldraw/tlschema`, `@tldraw/ui`
- Incorporate signia as @tldraw/state [#1620](https://github.com/tldraw/tldraw/pull/1620) ([@steveruizok](https://github.com/steveruizok) [@ds300](https://github.com/ds300))
- `@tldraw/assets`, `@tldraw/editor`, `@tldraw/polyfills`, `@tldraw/tldraw`, `@tldraw/ui`
- Revert "Update dependencies (#1613)" [#1617](https://github.com/tldraw/tldraw/pull/1617) ([@SomeHats](https://github.com/SomeHats))
- Update dependencies [#1613](https://github.com/tldraw/tldraw/pull/1613) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`
- update use-gesture [#1453](https://github.com/tldraw/tldraw/pull/1453) ([@ds300](https://github.com/ds300))
#### Authors: 13
- [@huppy-bot[bot]](https://github.com/huppy-bot[bot])
- alex ([@SomeHats](https://github.com/SomeHats))
- Brian Hung ([@BrianHung](https://github.com/BrianHung))
- David ([@fossinating](https://github.com/fossinating))
- David Sheldrick ([@ds300](https://github.com/ds300))
- Gabriel Lee ([@gabrielchl](https://github.com/gabrielchl))
- Judicael ([@judicaelandria](https://github.com/judicaelandria))
- Lu Wilson ([@TodePond](https://github.com/TodePond))
- Mitja Bezenšek ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Mohammad Kazemi ([@mokazemi](https://github.com/mokazemi))
- Orange Mug ([@orangemug](https://github.com/orangemug))
- Shahriar Shojib ([@shahriar-shojib](https://github.com/shahriar-shojib))
- Steve Ruiz ([@steveruizok](https://github.com/steveruizok))

View file

@ -0,0 +1,114 @@
---
title: v2.0.0-alpha.14
description: Examples
author: tldraw
date: 7/4/2023
order: 7
status: published
---
[View on GitHub](https://github.com/tldraw/tldraw/releases/tag/v2.0.0-alpha.14)
#### Disable styles panel button on mobile when using the laser tool. ([#1704](https://github.com/tldraw/tldraw/pull/1704))
- Disable the styles panel button for laser tool on mobile.
#### remove lock option from highlighter ([#1703](https://github.com/tldraw/tldraw/pull/1703))
- We no longer show the tool lock option for highlighter - it didn't do anything anyway
#### [fix] penmode ([#1698](https://github.com/tldraw/tldraw/pull/1698))
- [fix] pen mode
#### Update readme ([#1686](https://github.com/tldraw/tldraw/pull/1686))
- Documentation: Updated readme to reflect recent library changes.
#### [docs] Fix the types in the Shapes example ([#1681](https://github.com/tldraw/tldraw/pull/1681))
- Documentation: Fix some incorrect types on the Shapes page.
#### [improvement] More nuanced cursor state ([#1682](https://github.com/tldraw/tldraw/pull/1682))
- Improve cursor timeouts and hiding logic.
#### Fix VS Code commits failing on bublic? ([#1680](https://github.com/tldraw/tldraw/pull/1680))
- [internal] fixed commits failing from bublic when using UI
#### [fix] Lock shortcut ([#1677](https://github.com/tldraw/tldraw/pull/1677))
- [@tldraw/editor] Fix lock tool shortcut
#### [fix] comma keyboard shortcuts ([#1675](https://github.com/tldraw/tldraw/pull/1675))
- [@tldraw/editor] Bug fixes on document events.
#### [improvement] add box sizing border box ([#1674](https://github.com/tldraw/tldraw/pull/1674))
- [@tldraw/editor] Add `box-sizing: border-box` to `tl-container`
#### [improvemnet] drop crc, Buffer dependency ([#1673](https://github.com/tldraw/tldraw/pull/1673))
- [@tldraw/editor] Remove peer dependency on buffer.
#### [improvement] export scribble manager ([#1671](https://github.com/tldraw/tldraw/pull/1671))
- [@tldraw/tldraw] Export `ScribbleManager`
#### [feature] add `meta` property to records ([#1627](https://github.com/tldraw/tldraw/pull/1627))
- todo
#### [fix] mutating `snapshot` in `migrateStoreSnapshot` ([#1663](https://github.com/tldraw/tldraw/pull/1663))
- [@tldraw/store] Fixed a bug that would cause `Store.migrateStoreSnapshot` to mutate its `snapshot` argument.
---
#### 🚀 Enhancement
- `@tldraw/editor`
- [improvement] More nuanced cursor state [#1682](https://github.com/tldraw/tldraw/pull/1682) ([@steveruizok](https://github.com/steveruizok))
- [improvement] export scribble manager [#1671](https://github.com/tldraw/tldraw/pull/1671) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/file-format`, `@tldraw/tlschema`, `@tldraw/ui`, `@tldraw/utils`, `@tldraw/validate`
- [feature] add `meta` property to records [#1627](https://github.com/tldraw/tldraw/pull/1627) ([@steveruizok](https://github.com/steveruizok))
#### 🐛 Bug Fix
- Lokalise: Translations update [#1694](https://github.com/tldraw/tldraw/pull/1694) ([@TodePond](https://github.com/TodePond))
- `@tldraw/ui`
- Disable styles panel button on mobile when using the laser tool. [#1704](https://github.com/tldraw/tldraw/pull/1704) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- remove lock option from highlighter [#1703](https://github.com/tldraw/tldraw/pull/1703) ([@SomeHats](https://github.com/SomeHats))
- [fix] Lock shortcut [#1677](https://github.com/tldraw/tldraw/pull/1677) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`
- [fix] penmode [#1698](https://github.com/tldraw/tldraw/pull/1698) ([@steveruizok](https://github.com/steveruizok))
- [fix] indicator not updating [#1696](https://github.com/tldraw/tldraw/pull/1696) ([@steveruizok](https://github.com/steveruizok))
- [fix] comma keyboard shortcuts [#1675](https://github.com/tldraw/tldraw/pull/1675) ([@steveruizok](https://github.com/steveruizok))
- [improvement] add box sizing border box [#1674](https://github.com/tldraw/tldraw/pull/1674) ([@steveruizok](https://github.com/steveruizok))
- [improvemnet] drop crc, Buffer dependency [#1673](https://github.com/tldraw/tldraw/pull/1673) ([@steveruizok](https://github.com/steveruizok))
- [fix] Shape rendering [#1670](https://github.com/tldraw/tldraw/pull/1670) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/state`
- [fix] rename `global` in @tldraw/state to avoid collissions [#1672](https://github.com/tldraw/tldraw/pull/1672) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/store`
- [fix] mutating `snapshot` in `migrateStoreSnapshot` [#1663](https://github.com/tldraw/tldraw/pull/1663) ([@steveruizok](https://github.com/steveruizok))
#### 🏠 Internal
- [infra] use huppy token for publish-new [#1687](https://github.com/tldraw/tldraw/pull/1687) ([@ds300](https://github.com/ds300))
- Fix VS Code commits failing on bublic? [#1680](https://github.com/tldraw/tldraw/pull/1680) ([@TodePond](https://github.com/TodePond))
#### 📝 Documentation
- Update readme [#1686](https://github.com/tldraw/tldraw/pull/1686) ([@TodePond](https://github.com/TodePond))
- [docs] Update multiple test [#1685](https://github.com/tldraw/tldraw/pull/1685) ([@steveruizok](https://github.com/steveruizok))
- [docs] Fix the types in the Shapes example [#1681](https://github.com/tldraw/tldraw/pull/1681) ([@TodePond](https://github.com/TodePond))
#### Authors: 5
- alex ([@SomeHats](https://github.com/SomeHats))
- David Sheldrick ([@ds300](https://github.com/ds300))
- Lu Wilson ([@TodePond](https://github.com/TodePond))
- Mitja Bezenšek ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Steve Ruiz ([@steveruizok](https://github.com/steveruizok))

View file

@ -0,0 +1,661 @@
---
title: v2.0.0-alpha.15
description: Examples
author: tldraw
date: 10/6/2023
order: 6
status: published
---
[View on GitHub](https://github.com/tldraw/tldraw/releases/tag/v2.0.0-alpha.15)
#### frame label fix ([#2016](https://github.com/tldraw/tldraw/pull/2016))
- Add a brief release note for your PR here.
#### fix cloud rendering ([#2008](https://github.com/tldraw/tldraw/pull/2008))
- Improves cloud shape rendering
#### [improvement] prevent editing in readonly ([#1990](https://github.com/tldraw/tldraw/pull/1990))
- Prevent editing text shapes in readonly mode.
#### [fix] Hovered indicators shown when coarse pointer ([#1985](https://github.com/tldraw/tldraw/pull/1985))
- Hide hovered indicators on mobile / coarse pointer devices.
#### fix(docs): update shapes docs add the array of defined shapes ([#1949](https://github.com/tldraw/tldraw/pull/1949))
This pr add the custom defined shapes that's being passed to Tldraw
#### Fix style panel opening when disabled ([#1983](https://github.com/tldraw/tldraw/pull/1983))
- When select tool is active, the style menu shouldn't be openable unless a shape is also selected.
Before/After
<img
width="300"
src="https://github.com/tldraw/tldraw/assets/98838967/91ea55c8-0fcc-4f73-b61e-565829a5f25e"
/>
<img
width="300"
src="https://github.com/tldraw/tldraw/assets/98838967/ee4070fe-e236-4818-8fb4-43520210102b"
/>
#### [fix] pinch events ([#1979](https://github.com/tldraw/tldraw/pull/1979))
- Improve pinch gesture events.
#### Fix text-wrapping on Safari ([#1980](https://github.com/tldraw/tldraw/pull/1980))
- Fix text wrapping differently on Safari and Chrome/Firefox
Before/After
<image
width="350"
src="https://github.com/tldraw/tldraw/assets/98838967/320171b4-61e0-4a41-b8d3-830bd90bea65"
/>
<image
width="350"
src="https://github.com/tldraw/tldraw/assets/98838967/b42d7156-0ce9-4894-9692-9338dc931b79"
/>
#### Remove focus management ([#1953](https://github.com/tldraw/tldraw/pull/1953))
- [editor] Make autofocus default, remove automatic blur / focus events.
#### [fix] Drawing tool touch for first pen mark ([#1977](https://github.com/tldraw/tldraw/pull/1977))
- [fix] Accidental palm inputs when using iPad pencil
#### Remove targeted editing from text ([#1962](https://github.com/tldraw/tldraw/pull/1962))
- Fixed some cases where text would get selected in the wrong place.
- Changed the behaviour of text selection. Removed 'deep editing'.
#### fix line bugs ([#1936](https://github.com/tldraw/tldraw/pull/1936))
- This PR patches a couple of bugs which led to straight draw lines and beziered dash lines not rendering on the canvas
Before & After:
<image
width="250"
src="https://github.com/tldraw/tldraw/assets/98838967/e0ca7d54-506f-4014-b65a-6b61a98e3665"
/>
<image
width="250"
src="https://github.com/tldraw/tldraw/assets/98838967/90c9fa12-1bcb-430d-80c7-97e1faacea16"
/>
#### Allow right clicking selection backgrounds ([#1968](https://github.com/tldraw/tldraw/pull/1968))
- Improved right click behaviour.
#### Mark an undo before toggling lock ([#1969](https://github.com/tldraw/tldraw/pull/1969))
- Mark an undo before toggling locked.
#### Stop editing frame headers when clicking inside a frame. ([#1955](https://github.com/tldraw/tldraw/pull/1955))
- Stop editing frame headers when clicking inside of a frame.
#### Lokalise: Translations update ([#1964](https://github.com/tldraw/tldraw/pull/1964))
- Updated community translations for German and Galician
#### [improvement] improve arrows (for real) ([#1957](https://github.com/tldraw/tldraw/pull/1957))
- Improve arrows.
#### [feature] Include `sources` in `TLExternalContent` ([#1925](https://github.com/tldraw/tldraw/pull/1925))
- [editor / tldraw] add `sources` to `TLExternalContent`
#### [improvement] quick actions ([#1922](https://github.com/tldraw/tldraw/pull/1922))
- Improve the menu / kbds behavior when select tool is not active
#### Fix shape drag perf ([#1932](https://github.com/tldraw/tldraw/pull/1932))
- Fixes a perf regression for dragging shapes around
#### Firefox: Fix dropdowns not opening with touch ([#1923](https://github.com/tldraw/tldraw/pull/1923))
- Firefox: Fixed dropdown menus not opening with touch.
#### Use smarter rounding for shape container div width/height ([#1930](https://github.com/tldraw/tldraw/pull/1930))
- Improves the precision of the shape dimensions rounding logic
#### Fix lines being draggable via their background ([#1920](https://github.com/tldraw/tldraw/pull/1920))
- None - unreleased bug
#### Fix first handle of line snapping to itself ([#1912](https://github.com/tldraw/tldraw/pull/1912))
- Fixed a bug where the first handle of a line shape could snap to itself.
#### [fix] Moving group items inside of a frame (dropping) ([#1886](https://github.com/tldraw/tldraw/pull/1886))
- Fix bug: ungroup when moving a shape in a group in a frame.
#### [fix] id properties of undefined (#1730) ([#1919](https://github.com/tldraw/tldraw/pull/1919))
- Fixed a bug similar #1730
#### :recycle: fix: editing is not terminated after the conversion is confirmed. ([#1885](https://github.com/tldraw/tldraw/pull/1885))
- fix: editing is not terminated after the conversion is confirmed.
#### Update community translations ([#1889](https://github.com/tldraw/tldraw/pull/1889))
- Updated translations for Russian, Ukrainian, and Simplified Chinese
#### Fix line wobble ([#1915](https://github.com/tldraw/tldraw/pull/1915))
- Fixes an issue where lines would wobble as you dragged the handles around
#### Fix selecting one shape from selection group ([#1905](https://github.com/tldraw/tldraw/pull/1905))
- Fix bug when selecting a single shape from a selection group
Before
https://github.com/tldraw/tldraw/assets/98838967/1412f9c6-d466-42b3-af94-d08cbc1656be
After
![Kapture 2023-09-18 at 14 15 10](https://github.com/tldraw/tldraw/assets/98838967/70a7336d-7905-4b4c-b684-d5d62f2383b3)
#### Fix highlighter dots not being clickable ([#1903](https://github.com/tldraw/tldraw/pull/1903))
- None - unreleased bug
#### Fix video shape controls ([#1909](https://github.com/tldraw/tldraw/pull/1909))
- Fixes pointer events for editing video shapes.
#### Fix line handles ([#1904](https://github.com/tldraw/tldraw/pull/1904))
- Fixes an issue where line handles were slightly offset from the indicator line.
#### Fix pinch start with toolbar open ([#1895](https://github.com/tldraw/tldraw/pull/1895))
- Fixes a bug that could trigger undo by accident when closing the style toolbar via a pinch gesture on mobile.
#### [wip] Viewport focus of editing shapes ([#1873](https://github.com/tldraw/tldraw/pull/1873))
Removed a feature to reset the viewport back to a shape that is being edited.
(Before) Don't be held back by the past
![Kapture 2023-09-15 at 10 57 29](https://github.com/tldraw/tldraw/assets/98838967/d8891621-766e-46a2-b1ca-afa968b7f08c)
(After) You are free to find new avenues of exploration
![Kapture 2023-09-15 at 11 02 36](https://github.com/tldraw/tldraw/assets/98838967/82f318ab-944b-41bd-8297-a35467a15987)
#### Migrate snapshot ([#1843](https://github.com/tldraw/tldraw/pull/1843))
- [editor] add `Store.migrateSnapshot`
#### [fix] zero width / height bounds ([#1840](https://github.com/tldraw/tldraw/pull/1840))
- Fix bug with straight lines / arrows
#### clamp x-box and check-box lines to stay within box at small scales ([#1860](https://github.com/tldraw/tldraw/pull/1860))
- Fixes a regression introduced by the geometry refactor related to x-box and checkbox resizing.
#### Fix paste transform ([#1859](https://github.com/tldraw/tldraw/pull/1859))
- Fixes a bug affecting the position of pasted content inside frames.
#### Fix indicator transform miscalculation ([#1852](https://github.com/tldraw/tldraw/pull/1852))
- Fixes indicator transform miscalculation on android and windows
#### update currentPageShapesSorted reference in docs ([#1851](https://github.com/tldraw/tldraw/pull/1851))
- Add a brief release note for your PR here.
#### [fix] awful rendering issue ([#1842](https://github.com/tldraw/tldraw/pull/1842))
- [fix] iframe rendering issue
#### fix typo ([#1831](https://github.com/tldraw/tldraw/pull/1831))
- Just fixed a typo in the docs
#### [feature] Asset props ([#1824](https://github.com/tldraw/tldraw/pull/1824))
- [@tldraw/tldraw] add asset props
#### [fix] snapping bug ([#1819](https://github.com/tldraw/tldraw/pull/1819))
- [fix] crash that could occur when snapping
#### [fix] editing video shapes ([#1821](https://github.com/tldraw/tldraw/pull/1821))
- Fix bug with editing video shapes.
#### [feature] unlock all action ([#1820](https://github.com/tldraw/tldraw/pull/1820))
- Adds the unlock all feature.
#### [fix] bug with eventemitter3 default export ([#1818](https://github.com/tldraw/tldraw/pull/1818))
- [@tldraw/editor] updates eventemitter3 import to fix issue with Astro builds.
#### Add next cache to clean command ([#1811](https://github.com/tldraw/tldraw/pull/1811))
- Internal tooling change
#### Fix text editing in page menu popover ([#1790](https://github.com/tldraw/tldraw/pull/1790))
- (fix) page menu editing
#### [fix] embeds switching / tldraw embed ([#1792](https://github.com/tldraw/tldraw/pull/1792))
- [fix] tldraw embeds
#### Custom rendering margin / don't cull selected shapes ([#1788](https://github.com/tldraw/tldraw/pull/1788))
- [editor] add `Editor.renderingBoundsMargin`
#### Camera APIs ([#1786](https://github.com/tldraw/tldraw/pull/1786))
- (editor) improve camera commands
#### environment manager ([#1784](https://github.com/tldraw/tldraw/pull/1784))
- [editor] Move environment flags to environment manager
#### Editor commands API / effects ([#1778](https://github.com/tldraw/tldraw/pull/1778))
- tbd
#### [feature] Add val town embed ([#1777](https://github.com/tldraw/tldraw/pull/1777))
- (feature) val town
#### export `UiEventsProvider` ([#1774](https://github.com/tldraw/tldraw/pull/1774))
- [@tldraw/tldraw] export ui events, so that UI hooks can work without context
#### remove useForceSolid effect for geo / line shapes ([#1769](https://github.com/tldraw/tldraw/pull/1769))
- Remove the force solid switching for geo / line shapes
#### [fix] shape indicator showing when locked shapes are hovered ([#1771](https://github.com/tldraw/tldraw/pull/1771))
- locked shapes do not show an indicator when hovered
#### remove `selectionPageCenter` ([#1766](https://github.com/tldraw/tldraw/pull/1766))
- [dev] Removes `Editor.selectionPageCenter`
#### rename selection page bounds ([#1763](https://github.com/tldraw/tldraw/pull/1763))
- [editor] rename `selectedPageBounds` to `selectionPageBounds`
#### `ShapeUtil.getGeometry`, selection rewrite ([#1751](https://github.com/tldraw/tldraw/pull/1751))
- [editor] Remove `ShapeUtil.getBounds`, `ShapeUtil.getOutline`, `ShapeUtil.hitTestPoint`, `ShapeUtil.hitTestLineSegment`
- [editor] Add `ShapeUtil.getGeometry`
- [editor] Add `Editor.getShapeGeometry`
#### Fix asset urls ([#1758](https://github.com/tldraw/tldraw/pull/1758))
- Fixed asset urls
#### [fix] arrow snapping bug ([#1756](https://github.com/tldraw/tldraw/pull/1756))
- [fix] arrow snapping
#### [fix] dark mode ([#1754](https://github.com/tldraw/tldraw/pull/1754))
- [fix] dark mode colors not updating
#### Remove helpers / extraneous API methods. ([#1745](https://github.com/tldraw/tldraw/pull/1745))
- [tldraw] rename `useReadonly` to `useReadOnly`
- [editor] remove `Editor.isDarkMode`
- [editor] remove `Editor.isChangingStyle`
- [editor] remove `Editor.isCoarsePointer`
- [editor] remove `Editor.isDarkMode`
- [editor] remove `Editor.isFocused`
- [editor] remove `Editor.isGridMode`
- [editor] remove `Editor.isPenMode`
- [editor] remove `Editor.isReadOnly`
- [editor] remove `Editor.isSnapMode`
- [editor] remove `Editor.isToolLocked`
- [editor] remove `Editor.locale`
- [editor] rename `Editor.pageState` to `Editor.currentPageState`
- [editor] add `Editor.pageStates`
- [editor] add `Editor.setErasingIds`
- [editor] add `Editor.setEditingId`
- [editor] add several new component overrides
#### add shapes docs content ([#1705](https://github.com/tldraw/tldraw/pull/1705))
- Documentation: Added more info about shapes.
#### fix: escape eraser tool on escape ([#1732](https://github.com/tldraw/tldraw/pull/1732))
- escape eraser tool on escape
#### fix: arrow label dark mode color ([#1733](https://github.com/tldraw/tldraw/pull/1733))
- fixed arrow label dark mode color
#### tldraw zero - package shuffle ([#1710](https://github.com/tldraw/tldraw/pull/1710))
- [@tldraw/editor] lots, wip
- [@tldraw/ui] gone, merged to tldraw/tldraw
- [@tldraw/polyfills] gone, merged to tldraw/editor
- [@tldraw/primitives] gone, merged to tldraw/editor / tldraw/tldraw
- [@tldraw/indices] gone, merged to tldraw/editor
- [@tldraw/file-format] gone, merged to tldraw/tldraw
#### [fix] add cloud tooltip ([#1728](https://github.com/tldraw/tldraw/pull/1728))
- Add a brief release note for your PR here.
#### (2/2) Add content to Tools docs page. ([#1721](https://github.com/tldraw/tldraw/pull/1721))
- Tools docs.
#### tweaks for cloud shape ([#1723](https://github.com/tldraw/tldraw/pull/1723))
- Add a brief release note for your PR here.
#### Add cloud shape ([#1708](https://github.com/tldraw/tldraw/pull/1708))
- Adds a cloud shape.
#### [refactor] reduce dependencies on shape utils in editor ([#1693](https://github.com/tldraw/tldraw/pull/1693))
- removes shape utils from the arguments of `isShapeOfType`, replacing with a generic
- removes shape utils from the arguments of `getShapeUtil`, replacing with a generic
- moves custom arrow info cache out of the util and into the editor class
- changes the a tool's `shapeType` to be a string instead of a shape util
#### Make some missing tsdocs appear on the docs site ([#1706](https://github.com/tldraw/tldraw/pull/1706))
- Docs: Fixed some missing docs for the TldrawEditor component.
#### [hot take] remove `tool` from shape definition ([#1691](https://github.com/tldraw/tldraw/pull/1691))
- [dev] Removed the `tool` property from `defineShape`
#### [refactor] reordering shapes ([#1718](https://github.com/tldraw/tldraw/pull/1718))
- [api] removes `Editor.getParentsMappedToChildren`
- [api] removes `Editor.reorderShapes`
- [api] moves reordering shapes code into its own file, outside of the editor
#### remove state checks for brush and zoom brush ([#1717](https://github.com/tldraw/tldraw/pull/1717))
- [editor] remove `editor.isIn` state checks for displaying brush and zoom brush.
#### Add API links to all docs pages ([#1661](https://github.com/tldraw/tldraw/pull/1661))
- Documentation: Added links to API reference in guides.
#### Go back to default cursor when done resizing. ([#1700](https://github.com/tldraw/tldraw/pull/1700))
- Switch back to the default cursor after you are done inserting a new text shape.
#### Firefox: Fix coarse pointer issue ([#1701](https://github.com/tldraw/tldraw/pull/1701))
- Fixed firefox not being able to use cursor chat when using a touch screen on desktop.
#### Fix tsdocs for TldrawUi component ([#1707](https://github.com/tldraw/tldraw/pull/1707))
- Docs: Show some docs missing from TldrawUi component.
---
#### 💥 Breaking Change
- `@tldraw/editor`, `@tldraw/tldraw`
- [improvement] prevent editing in readonly [#1990](https://github.com/tldraw/tldraw/pull/1990) ([@steveruizok](https://github.com/steveruizok))
- Remove focus management [#1953](https://github.com/tldraw/tldraw/pull/1953) ([@steveruizok](https://github.com/steveruizok) [@ds300](https://github.com/ds300))
- Make user preferences optional [#1963](https://github.com/tldraw/tldraw/pull/1963) ([@ds300](https://github.com/ds300))
- [fix] style changes [#1814](https://github.com/tldraw/tldraw/pull/1814) ([@steveruizok](https://github.com/steveruizok))
- Cleanup page state commands [#1800](https://github.com/tldraw/tldraw/pull/1800) ([@steveruizok](https://github.com/steveruizok))
- Rendering / cropping side-effects [#1799](https://github.com/tldraw/tldraw/pull/1799) ([@steveruizok](https://github.com/steveruizok))
- history options / markId / createPage [#1796](https://github.com/tldraw/tldraw/pull/1796) ([@steveruizok](https://github.com/steveruizok))
- Update setter names, `setXXShapeId` rather than `setXXId` [#1789](https://github.com/tldraw/tldraw/pull/1789) ([@steveruizok](https://github.com/steveruizok))
- Rename shapes apis [#1787](https://github.com/tldraw/tldraw/pull/1787) ([@steveruizok](https://github.com/steveruizok))
- Camera APIs [#1786](https://github.com/tldraw/tldraw/pull/1786) ([@steveruizok](https://github.com/steveruizok))
- environment manager [#1784](https://github.com/tldraw/tldraw/pull/1784) ([@steveruizok](https://github.com/steveruizok))
- remove `selectionPageCenter` [#1766](https://github.com/tldraw/tldraw/pull/1766) ([@steveruizok](https://github.com/steveruizok))
- rename selection page bounds [#1763](https://github.com/tldraw/tldraw/pull/1763) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/tldraw`
- Remove targeted editing from text [#1962](https://github.com/tldraw/tldraw/pull/1962) ([@TodePond](https://github.com/TodePond) [@steveruizok](https://github.com/steveruizok))
- [improvement] quick actions [#1922](https://github.com/tldraw/tldraw/pull/1922) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/store`
- SideEffectManager [#1785](https://github.com/tldraw/tldraw/pull/1785) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/state`, `@tldraw/store`, `@tldraw/tldraw`, `@tldraw/tlschema`
- Revert "Editor commands API / effects" [#1783](https://github.com/tldraw/tldraw/pull/1783) ([@steveruizok](https://github.com/steveruizok))
- Editor commands API / effects [#1778](https://github.com/tldraw/tldraw/pull/1778) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/tldraw`, `@tldraw/tlschema`
- `ShapeUtil.getGeometry`, selection rewrite [#1751](https://github.com/tldraw/tldraw/pull/1751) ([@steveruizok](https://github.com/steveruizok))
- More cleanup, focus bug fixes [#1749](https://github.com/tldraw/tldraw/pull/1749) ([@steveruizok](https://github.com/steveruizok))
- Remove helpers / extraneous API methods. [#1745](https://github.com/tldraw/tldraw/pull/1745) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/tldraw`, `@tldraw/utils`
- move some utils into tldraw/utils [#1750](https://github.com/tldraw/tldraw/pull/1750) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/state`, `@tldraw/store`, `@tldraw/tldraw`, `@tldraw/tlschema`, `@tldraw/utils`, `@tldraw/validate`
- tldraw zero - package shuffle [#1710](https://github.com/tldraw/tldraw/pull/1710) ([@steveruizok](https://github.com/steveruizok) [@SomeHats](https://github.com/SomeHats))
- `@tldraw/editor`
- [refactor] reduce dependencies on shape utils in editor [#1693](https://github.com/tldraw/tldraw/pull/1693) ([@steveruizok](https://github.com/steveruizok))
- [hot take] remove `tool` from shape definition [#1691](https://github.com/tldraw/tldraw/pull/1691) ([@TodePond](https://github.com/TodePond))
- [refactor] reordering shapes [#1718](https://github.com/tldraw/tldraw/pull/1718) ([@steveruizok](https://github.com/steveruizok))
#### 🚀 Enhancement
- `@tldraw/editor`, `@tldraw/tldraw`
- Debugging cleanup / misc cleanup [#2025](https://github.com/tldraw/tldraw/pull/2025) ([@steveruizok](https://github.com/steveruizok))
- [feature] Include `sources` in `TLExternalContent` [#1925](https://github.com/tldraw/tldraw/pull/1925) ([@steveruizok](https://github.com/steveruizok))
- Add snapshot prop, examples [#1856](https://github.com/tldraw/tldraw/pull/1856) ([@steveruizok](https://github.com/steveruizok))
- [fix] arrow snapping bug [#1756](https://github.com/tldraw/tldraw/pull/1756) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/tldraw`, `@tldraw/tlschema`
- Fix arrow handle snapping, snapping to text labels, selection of text labels [#1910](https://github.com/tldraw/tldraw/pull/1910) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/store`, `@tldraw/tldraw`, `@tldraw/tlschema`
- Migrate snapshot [#1843](https://github.com/tldraw/tldraw/pull/1843) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/tldraw`
- export asset stuff [#1829](https://github.com/tldraw/tldraw/pull/1829) ([@steveruizok](https://github.com/steveruizok)
)
- [feature] Asset props [#1824](https://github.com/tldraw/tldraw/pull/1824) ([@steveruizok](https://github.com/steveruizok))
- [feature] unlock all action [#1820](https://github.com/tldraw/tldraw/pull/1820) ([@steveruizok](https://github.com/steveruizok))
- export `UiEventsProvider` [#1774](https://github.com/tldraw/tldraw/pull/1774) ([@steveruizok](https://github.com/steveruizok)
)
- `@tldraw/editor`
- Add className as prop to Canvas [#1827](https://github.com/tldraw/tldraw/pull/1827) ([@steveruizok](https://github.com/steveruizok))
- refactor `parentsToChildrenWithIndexes` [#1764](https://github.com/tldraw/tldraw/pull/1764) ([@steveruizok](https://github.com/steveruizok))
- remove state checks for brush and zoom brush [#1717](https://github.com/tldraw/tldraw/pull/1717) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/state`, `@tldraw/tldraw`
- [improvement] More selection logic [#1806](https://github.com/tldraw/tldraw/pull/1806) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/assets`, `@tldraw/tlschema`
- [feature] Add val town embed [#1777](https://github.com/tldraw/tldraw/pull/1777) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/tldraw`, `@tldraw/validate`
- Add shapes to exports [#1776](https://github.com/tldraw/tldraw/pull/1776) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/assets`, `@tldraw/editor`, `@tldraw/tlschema`
- Add cloud shape [#1708](https://github.com/tldraw/tldraw/pull/1708) ([@ds300](https://github.com/ds300))
#### 🐛 Bug Fix
- [fix] Multiple example [#2026](https://github.com/tldraw/tldraw/pull/2026) ([@steveruizok](https://github.com/steveruizok))
- Fix vs code extension. Prepare for new release. [#2011](https://github.com/tldraw/tldraw/pull/2011) ([@MitjaBezensek](https://github.com/MitjaBezensek) [@steveruizok](https://github.com/steveruizok))
- Lokalise: Translations update [#1964](https://github.com/tldraw/tldraw/pull/1964) ([@TodePond](https://github.com/TodePond))
- Update community translations [#1889](https://github.com/tldraw/tldraw/pull/1889) ([@TodePond](https://github.com/TodePond))
- Bump vs code version. [#1735](https://github.com/tldraw/tldraw/pull/1735) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- [fix] add cloud tooltip [#1728](https://github.com/tldraw/tldraw/pull/1728) ([@ds300](https://github.com/ds300))
- Bump vs code version. [#1719](https://github.com/tldraw/tldraw/pull/1719) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- `@tldraw/tldraw`
- Update readme [#2027](https://github.com/tldraw/tldraw/pull/2027) ([@steveruizok](https://github.com/steveruizok))
- [fix] Minimap interactions [#2012](https://github.com/tldraw/tldraw/pull/2012) ([@steveruizok](https://github.com/steveruizok))
- [fix] Image size [#2002](https://github.com/tldraw/tldraw/pull/2002) ([@steveruizok](https://github.com/steveruizok))
- [fix] tool lock button in toolbar [#2009](https://github.com/tldraw/tldraw/pull/2009) ([@steveruizok](https://github.com/steveruizok))
- fix cloud rendering [#2008](https://github.com/tldraw/tldraw/pull/2008) ([@ds300](https://github.com/ds300))
- Fix hooks error. [#2000](https://github.com/tldraw/tldraw/pull/2000) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Fix style panel opening when disabled [#1983](https://github.com/tldraw/tldraw/pull/1983) ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git) [@steveruizok](https://github.com/steveruizok))
- [fix] Drawing tool touch for first pen mark [#1977](https://github.com/tldraw/tldraw/pull/1977) ([@steveruizok](https://github.com/steveruizok))
- [fix] Screen bounds offset after editing text [#1976](https://github.com/tldraw/tldraw/pull/1976) ([@steveruizok](https://github.com/steveruizok))
- fix line bugs [#1936](https://github.com/tldraw/tldraw/pull/1936) ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git) [@steveruizok](https://github.com/steveruizok))
- Mark an undo before toggling lock [#1969](https://github.com/tldraw/tldraw/pull/1969) ([@steveruizok](https://github.com/steveruizok))
- Stop editing frame headers when clicking inside a frame. [#1955](https://github.com/tldraw/tldraw/pull/1955) ([@MitjaBezensek](https://github.com/MitjaBezensek) [@TodePond](https://github.com/TodePond))
- Firefox: Fix dropdowns not opening with touch [#1923](https://github.com/tldraw/tldraw/pull/1923) ([@TodePond](https://github.com/TodePond))
- Fix lines being draggable via their background [#1920](https://github.com/tldraw/tldraw/pull/1920) ([@TodePond](https://github.com/TodePond))
- Fix first handle of line snapping to itself [#1912](https://github.com/tldraw/tldraw/pull/1912) ([@TodePond](https://github.com/TodePond))
- [fix] id properties of undefined (#1730) [#1919](https://github.com/tldraw/tldraw/pull/1919) ([@momenthana](https://github.com/momenthana))
- :recycle: fix: editing is not terminated after the conversion is confirmed. [#1885](https://github.com/tldraw/tldraw/pull/1885) ([@mr04vv](https://github.com/mr04vv) [@steveruizok](https://github.com/steveruizok))
- Fix selecting one shape from selection group [#1905](https://github.com/tldraw/tldraw/pull/1905) ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))
- [fix] help menu css [#1888](https://github.com/tldraw/tldraw/pull/1888) ([@steveruizok](https://github.com/steveruizok))
- Fix highlighter dots not being clickable [#1903](https://github.com/tldraw/tldraw/pull/1903) ([@TodePond](https://github.com/TodePond))
- Fix video shape controls [#1909](https://github.com/tldraw/tldraw/pull/1909) ([@ds300](https://github.com/ds300))
- Fix line handles [#1904](https://github.com/tldraw/tldraw/pull/1904) ([@ds300](https://github.com/ds300))
- Fix pinch start with toolbar open [#1895](https://github.com/tldraw/tldraw/pull/1895) ([@ds300](https://github.com/ds300))
- clamp x-box and check-box lines to stay within box at small scales [#1860](https://github.com/tldraw/tldraw/pull/1860) ([@ds300](https://github.com/ds300))
- [fix] exit penmode [#1847](https://github.com/tldraw/tldraw/pull/1847) ([@steveruizok](https://github.com/steveruizok))
- [fix] assets and content handlers [#1846](https://github.com/tldraw/tldraw/pull/1846) ([@steveruizok](https://github.com/steveruizok))
- [fix] line tool bug with tool locked [#1841](https://github.com/tldraw/tldraw/pull/1841) ([@steveruizok](https://github.com/steveruizok))
- [fix] arrows bind to locked shapes [#1833](https://github.com/tldraw/tldraw/pull/1833) ([@steveruizok](https://github.com/steveruizok) [@MitjaBezensek](https://github.com/MitjaBezensek))
- [fix] Collaborator scribble on tldraw [#1804](https://github.com/tldraw/tldraw/pull/1804) ([@steveruizok](https://github.com/steveruizok))
- [fix] Don't make arrows shapes to arrows [#1793](https://github.com/tldraw/tldraw/pull/1793) ([@steveruizok](https://github.com/steveruizok))
- Fix text editing in page menu popover [#1790](https://github.com/tldraw/tldraw/pull/1790) ([@steveruizok](https://github.com/steveruizok))
- Fix outlines on text shapes [#1781](https://github.com/tldraw/tldraw/pull/1781) ([@steveruizok](https://github.com/steveruizok))
- remove useForceSolid effect for geo / line shapes [#1769](https://github.com/tldraw/tldraw/pull/1769) ([@steveruizok](https://github.com/steveruizok))
- [fix] arrow rendering safari [#1767](https://github.com/tldraw/tldraw/pull/1767) ([@steveruizok](https://github.com/steveruizok))
- [fix] revert legacy changes to buildFromV1Document.ts [#1761](https://github.com/tldraw/tldraw/pull/1761) ([@steveruizok](https://github.com/steveruizok))
- Fix asset urls [#1758](https://github.com/tldraw/tldraw/pull/1758) ([@lakesare](https://github.com/lakesare))
- [fix]: Fix typo in shapeType declaration [#1747](https://github.com/tldraw/tldraw/pull/1747) ([@ricardo-crespo](https://github.com/ricardo-crespo) [@steveruizok](https://github.com/steveruizok))
- fix: escape eraser tool on escape [#1732](https://github.com/tldraw/tldraw/pull/1732) ([@gabrielchl](https://github.com/gabrielchl) [@steveruizok](https://github.com/steveruizok))
- fix: arrow label dark mode color [#1733](https://github.com/tldraw/tldraw/pull/1733) ([@gabrielchl](https://github.com/gabrielchl) [@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`
- fix screen bounds not updating [#2022](https://github.com/tldraw/tldraw/pull/2022) ([@SomeHats](https://github.com/SomeHats))
- [improvement] Refactor curved arrows [#2019](https://github.com/tldraw/tldraw/pull/2019) ([@steveruizok](https://github.com/steveruizok))
- [fix] focus events [#2013](https://github.com/tldraw/tldraw/pull/2013) ([@steveruizok](https://github.com/steveruizok))
- Re-focus on focus. [#2010](https://github.com/tldraw/tldraw/pull/2010) ([@steveruizok](https://github.com/steveruizok))
- [fix] X box shape arrow intersections [#2006](https://github.com/tldraw/tldraw/pull/2006) ([@steveruizok](https://github.com/steveruizok))
- Fix group opacity [#1997](https://github.com/tldraw/tldraw/pull/1997) ([@ds300](https://github.com/ds300))
- [fix] Escape key exiting full screen while editing shapes [#1986](https://github.com/tldraw/tldraw/pull/1986) ([@steveruizok](https://github.com/steveruizok))
- [fix] Hovered indicators shown when coarse pointer [#1985](https://github.com/tldraw/tldraw/pull/1985) ([@steveruizok](https://github.com/steveruizok))
- Sliiiightly darken muted-2 color. [#1981](https://github.com/tldraw/tldraw/pull/1981) ([@steveruizok](https://github.com/steveruizok))
- [fix] pinch events [#1979](https://github.com/tldraw/tldraw/pull/1979) ([@steveruizok](https://github.com/steveruizok))
- Make state node methods arrow functions [#1973](https://github.com/tldraw/tldraw/pull/1973) ([@steveruizok](https://github.com/steveruizok))
- Arrows followup [#1972](https://github.com/tldraw/tldraw/pull/1972) ([@steveruizok](https://github.com/steveruizok))
- [improvement] improve arrows (for real) [#1957](https://github.com/tldraw/tldraw/pull/1957) ([@steveruizok](https://github.com/steveruizok))
- fix clipping on nested non-intersecting frames [#1934](https://github.com/tldraw/tldraw/pull/1934) ([@SomeHats](https://github.com/SomeHats))
- Use smarter rounding for shape container div width/height [#1930](https://github.com/tldraw/tldraw/pull/1930) ([@ds300](https://github.com/ds300))
- Fix line wobble [#1915](https://github.com/tldraw/tldraw/pull/1915) ([@ds300](https://github.com/ds300))
- [fix] right click [#1891](https://github.com/tldraw/tldraw/pull/1891) ([@steveruizok](https://github.com/steveruizok))
- [wip] Viewport focus of editing shapes [#1873](https://github.com/tldraw/tldraw/pull/1873) ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))
- Fix indicator transform miscalculation [#1852](https://github.com/tldraw/tldraw/pull/1852) ([@ds300](https://github.com/ds300))
- [fix] pointer events in shapes [#1855](https://github.com/tldraw/tldraw/pull/1855) ([@steveruizok](https://github.com/steveruizok))
- [fix] overlays stacking [#1849](https://github.com/tldraw/tldraw/pull/1849) ([@steveruizok](https://github.com/steveruizok))
- [fix] awful rendering issue [#1842](https://github.com/tldraw/tldraw/pull/1842) ([@steveruizok](https://github.com/steveruizok))
- [fix] svg overlays when browser zoom is not 100% [#1836](https://github.com/tldraw/tldraw/pull/1836) ([@steveruizok](https://github.com/steveruizok))
- Allow setting `user` as a prop [#1832](https://github.com/tldraw/tldraw/pull/1832) ([@SomeHats](https://github.com/SomeHats))
- [fix] snapping bug [#1819](https://github.com/tldraw/tldraw/pull/1819) ([@steveruizok](https://github.com/steveruizok))
- [fix] Replace `findLast` for browser compat [#1822](https://github.com/tldraw/tldraw/pull/1822) ([@steveruizok](https://github.com/steveruizok))
- [fix] bug with eventemitter3 default export [#1818](https://github.com/tldraw/tldraw/pull/1818) ([@steveruizok](https://github.com/steveruizok))
- [fix] handles updates [#1779](https://github.com/tldraw/tldraw/pull/1779) ([@steveruizok](https://github.com/steveruizok))
- [fix] transform errors [#1772](https://github.com/tldraw/tldraw/pull/1772) ([@steveruizok](https://github.com/steveruizok))
- [fix] shape indicator showing when locked shapes are hovered [#1771](https://github.com/tldraw/tldraw/pull/1771) ([@steveruizok](https://github.com/steveruizok))
- tweaks for cloud shape [#1723](https://github.com/tldraw/tldraw/pull/1723) ([@ds300](https://github.com/ds300))
- Go back to default cursor when done resizing. [#1700](https://github.com/tldraw/tldraw/pull/1700) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Firefox: Fix coarse pointer issue [#1701](https://github.com/tldraw/tldraw/pull/1701) ([@TodePond](https://github.com/TodePond))
- `@tldraw/editor`, `@tldraw/tldraw`
- frame label fix [#2016](https://github.com/tldraw/tldraw/pull/2016) ([@ds300](https://github.com/ds300))
- [fix] Focus events (actually) [#2015](https://github.com/tldraw/tldraw/pull/2015) ([@steveruizok](https://github.com/steveruizok))
- Contain all the things [#1999](https://github.com/tldraw/tldraw/pull/1999) ([@steveruizok](https://github.com/steveruizok))
- fix text in geo shapes not causing its container to grow [#2003](https://github.com/tldraw/tldraw/pull/2003) ([@SomeHats](https://github.com/SomeHats))
- Fix an issue with arrow creation. [#2004](https://github.com/tldraw/tldraw/pull/2004) ([@MitjaBezensek](https://github.com/MitjaBezensek) [@steveruizok](https://github.com/steveruizok))
- Fix text-wrapping on Safari [#1980](https://github.com/tldraw/tldraw/pull/1980) ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))
- [fix] text shape outline [#1974](https://github.com/tldraw/tldraw/pull/1974) ([@steveruizok](https://github.com/steveruizok))
- Allow right clicking selection backgrounds [#1968](https://github.com/tldraw/tldraw/pull/1968) ([@TodePond](https://github.com/TodePond) [@steveruizok](https://github.com/steveruizok))
- [fix] geo shape text label placement [#1927](https://github.com/tldraw/tldraw/pull/1927) ([@steveruizok](https://github.com/steveruizok) [@ds300](https://github.com/ds300))
- expanded highlighter geometry [#1929](https://github.com/tldraw/tldraw/pull/1929) ([@SomeHats](https://github.com/SomeHats))
- [fix] Moving group items inside of a frame (dropping) [#1886](https://github.com/tldraw/tldraw/pull/1886) ([@mr04vv](https://github.com/mr04vv) [@steveruizok](https://github.com/steveruizok))
- [fix] iframe losing focus on pointer down [#1848](https://github.com/tldraw/tldraw/pull/1848) ([@steveruizok](https://github.com/steveruizok))
- [fix] zero width / height bounds [#1840](https://github.com/tldraw/tldraw/pull/1840) ([@steveruizok](https://github.com/steveruizok))
- avoid pixel rounding / transformation miscalc for overlay items [#1858](https://github.com/tldraw/tldraw/pull/1858) ([@BrianHung](https://github.com/BrianHung) [@ds300](https://github.com/ds300))
- Fix paste transform [#1859](https://github.com/tldraw/tldraw/pull/1859) ([@ds300](https://github.com/ds300))
- [fix] text editing outline when scaled [#1826](https://github.com/tldraw/tldraw/pull/1826) ([@steveruizok](https://github.com/steveruizok))
- [fix] Line shape rendering [#1825](https://github.com/tldraw/tldraw/pull/1825) ([@steveruizok](https://github.com/steveruizok))
- [fix] remove CSS radius calculations [#1823](https://github.com/tldraw/tldraw/pull/1823) ([@steveruizok](https://github.com/steveruizok))
- [fix] editing video shapes [#1821](https://github.com/tldraw/tldraw/pull/1821) ([@steveruizok](https://github.com/steveruizok))
- [fix] Sticky text content / hovered shapes [#1808](https://github.com/tldraw/tldraw/pull/1808) ([@steveruizok](https://github.com/steveruizok))
- [fix] page to screen [#1797](https://github.com/tldraw/tldraw/pull/1797) ([@steveruizok](https://github.com/steveruizok))
- Custom rendering margin / don't cull selected shapes [#1788](https://github.com/tldraw/tldraw/pull/1788) ([@steveruizok](https://github.com/steveruizok))
- [fix] minimap, common page bounds [#1770](https://github.com/tldraw/tldraw/pull/1770) ([@steveruizok](https://github.com/steveruizok))
- [fix] restore bg option, fix calculations [#1765](https://github.com/tldraw/tldraw/pull/1765) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/store`
- Fix shape drag perf [#1932](https://github.com/tldraw/tldraw/pull/1932) ([@ds300](https://github.com/ds300))
- `@tldraw/tldraw`, `@tldraw/tlschema`
- [fix] embeds switching / tldraw embed [#1792](https://github.com/tldraw/tldraw/pull/1792) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/tldraw`, `@tldraw/tlschema`
- [fix] dark mode [#1754](https://github.com/tldraw/tldraw/pull/1754) ([@steveruizok](https://github.com/steveruizok))
#### 🏠 Internal
- Remove docs source. [#2030](https://github.com/tldraw/tldraw/pull/2030) ([@steveruizok](https://github.com/steveruizok))
- [infra] missing await [#1951](https://github.com/tldraw/tldraw/pull/1951) ([@ds300](https://github.com/ds300))
- [infra] maybe fix canary publish [#1950](https://github.com/tldraw/tldraw/pull/1950) ([@ds300](https://github.com/ds300))
- fix typo [#1831](https://github.com/tldraw/tldraw/pull/1831) ([@judicaelandria](https://github.com/judicaelandria))
- Add next cache to clean command [#1811](https://github.com/tldraw/tldraw/pull/1811) ([@ds300](https://github.com/ds300))
- remove yjs example [#1795](https://github.com/tldraw/tldraw/pull/1795) ([@steveruizok](https://github.com/steveruizok))
- support custom shapes in yjs example [#1737](https://github.com/tldraw/tldraw/pull/1737) ([@steveruizok](https://github.com/steveruizok))
- [internal] Add basic list to examples [#1688](https://github.com/tldraw/tldraw/pull/1688) ([@steveruizok](https://github.com/steveruizok))
- cleanup [#1711](https://github.com/tldraw/tldraw/pull/1711) ([@SomeHats](https://github.com/SomeHats))
- `@tldraw/tldraw`
- [fix] CSS reload in dev [#1791](https://github.com/tldraw/tldraw/pull/1791) ([@steveruizok](https://github.com/steveruizok))
#### 📝 Documentation
- fix(docs): update shapes docs add the array of defined shapes [#1949](https://github.com/tldraw/tldraw/pull/1949) ([@judicaelandria](https://github.com/judicaelandria) [@steveruizok](https://github.com/steveruizok))
- update currentPageShapesSorted reference in docs [#1851](https://github.com/tldraw/tldraw/pull/1851) ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))
- Fix broken link in docs [#1830](https://github.com/tldraw/tldraw/pull/1830) ([@jmduke](https://github.com/jmduke) [@steveruizok](https://github.com/steveruizok))
- add shapes docs content [#1705](https://github.com/tldraw/tldraw/pull/1705) ([@TodePond](https://github.com/TodePond) [@steveruizok](https://github.com/steveruizok))
- (2/2) Add content to Tools docs page. [#1721](https://github.com/tldraw/tldraw/pull/1721) ([@TodePond](https://github.com/TodePond))
- Add API links to all docs pages [#1661](https://github.com/tldraw/tldraw/pull/1661) ([@TodePond](https://github.com/TodePond))
- Fix tsdocs for TldrawUi component [#1707](https://github.com/tldraw/tldraw/pull/1707) ([@TodePond](https://github.com/TodePond))
- `@tldraw/editor`
- Make some missing tsdocs appear on the docs site [#1706](https://github.com/tldraw/tldraw/pull/1706) ([@TodePond](https://github.com/TodePond))
#### 🧪 Tests
- Fix e2e test [#1748](https://github.com/tldraw/tldraw/pull/1748) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/tldraw`
- [fix] Right click groups [#1975](https://github.com/tldraw/tldraw/pull/1975) ([@TodePond](https://github.com/TodePond) [@steveruizok](https://github.com/steveruizok))
#### 🔩 Dependency Updates
- `@tldraw/editor`
- (chore) bump [#1744](https://github.com/tldraw/tldraw/pull/1744) ([@steveruizok](https://github.com/steveruizok))
#### Authors: 14
- alex ([@SomeHats](https://github.com/SomeHats))
- Brian Hung ([@BrianHung](https://github.com/BrianHung))
- David Sheldrick ([@ds300](https://github.com/ds300))
- Evgenia Karunus ([@lakesare](https://github.com/lakesare))
- Gabriel Lee ([@gabrielchl](https://github.com/gabrielchl))
- Hana ([@momenthana](https://github.com/momenthana))
- Judicael ([@judicaelandria](https://github.com/judicaelandria))
- Justin Duke ([@jmduke](https://github.com/jmduke))
- Lu Wilson ([@TodePond](https://github.com/TodePond))
- Mitja Bezenšek ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Ricardo Crespo ([@ricardo-crespo](https://github.com/ricardo-crespo))
- Steve Ruiz ([@steveruizok](https://github.com/steveruizok))
- Taha ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))
- Takuto Mori Gump ([@mr04vv](https://github.com/mr04vv))

View file

@ -0,0 +1,105 @@
---
title: v2.0.0-alpha.16
description: Examples
author: tldraw
date: 10/11/2023
order: 5
status: published
---
[View on GitHub](https://github.com/tldraw/tldraw/releases/tag/v2.0.0-alpha.16)
#### Fix shape opacity when erasing ([#2055](https://github.com/tldraw/tldraw/pull/2055))
- Fixes opacity of shapes while erasing in a group or frame.
#### [fix] Hit testing against zero width / height lines ([#2060](https://github.com/tldraw/tldraw/pull/2060))
- [fix] Bug where arrows would not bind to straight lines
#### Fix opacity lowering on shapes that cannot be deleted ([#2061](https://github.com/tldraw/tldraw/pull/2061))
- Locked shapes don't change opacity when scribble erasing.
Before/after:
<image
width="250"
src="https://github.com/tldraw/tldraw/assets/98838967/763a93eb-ffaa-405c-9255-e68ba88ed9a2"
/>
<image
width="250"
src="https://github.com/tldraw/tldraw/assets/98838967/dc9d3f77-c1c5-40f2-a9fe-10c723b6a21c"
/>
#### fix: proper label for opacity tooltip on hover ([#2044](https://github.com/tldraw/tldraw/pull/2044))
- Add a brief release note for your PR here.
#### Fix alt + shift keyboard shortcuts ([#2053](https://github.com/tldraw/tldraw/pull/2053))
- Fixes keyboard shortcuts that use `alt` and `shift` modifiers.
#### [improvement] Scope `getShapeAtPoint` to rendering shapes only ([#2043](https://github.com/tldraw/tldraw/pull/2043))
- Improve perf for hovering shapes / shape hit tests
#### Remove topBar prop from `<TldrawUi />` ([#2018](https://github.com/tldraw/tldraw/pull/2018))
- [BREAKING] removed topBar prop
---
#### 🚀 Enhancement
- `@tldraw/editor`, `@tldraw/tldraw`
- [improvement] Scope `getShapeAtPoint` to rendering shapes only [#2043](https://github.com/tldraw/tldraw/pull/2043) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/tldraw`, `@tldraw/tlschema`
- Remove dot com ui styles [1/2] [#2039](https://github.com/tldraw/tldraw/pull/2039) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/tlschema`
- prevent hover indicator from showing when pointer isn't over the canvas [#2023](https://github.com/tldraw/tldraw/pull/2023) ([@SomeHats](https://github.com/SomeHats))
- `@tldraw/tldraw`
- Remove topBar prop from `<TldrawUi />` [#2018](https://github.com/tldraw/tldraw/pull/2018) ([@SomeHats](https://github.com/SomeHats))
#### 🐛 Bug Fix
- fix standalone examples [#2042](https://github.com/tldraw/tldraw/pull/2042) ([@SomeHats](https://github.com/SomeHats))
- `@tldraw/editor`
- Fix shape opacity when erasing [#2055](https://github.com/tldraw/tldraw/pull/2055) ([@ds300](https://github.com/ds300))
- `@tldraw/editor`, `@tldraw/tldraw`
- [fix] Hit testing against zero width / height lines [#2060](https://github.com/tldraw/tldraw/pull/2060) ([@steveruizok](https://github.com/steveruizok))
- Fix newlines in text geo shapes [#2059](https://github.com/tldraw/tldraw/pull/2059) ([@SomeHats](https://github.com/SomeHats) [@huppy-bot[bot]](https://github.com/huppy-bot[bot]) [@steveruizok](https://github.com/steveruizok))
- Restore background [#2037](https://github.com/tldraw/tldraw/pull/2037) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/tldraw`
- Fix opacity lowering on shapes that cannot be deleted [#2061](https://github.com/tldraw/tldraw/pull/2061) ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))
- fix: proper label for opacity tooltip on hover [#2044](https://github.com/tldraw/tldraw/pull/2044) ([@Prince-Mendiratta](https://github.com/Prince-Mendiratta))
- Fix alt + shift keyboard shortcuts [#2053](https://github.com/tldraw/tldraw/pull/2053) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- [fix] Stylepanel default spacing [#2036](https://github.com/tldraw/tldraw/pull/2036) ([@steveruizok](https://github.com/steveruizok))
- Export tools [#2035](https://github.com/tldraw/tldraw/pull/2035) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/tlschema`
- [fix] Page state migration [#2040](https://github.com/tldraw/tldraw/pull/2040) ([@steveruizok](https://github.com/steveruizok))
- [fix] migrations for page state [#2038](https://github.com/tldraw/tldraw/pull/2038) ([@steveruizok](https://github.com/steveruizok))
#### 🏠 Internal
- Move example into examples folder [#2064](https://github.com/tldraw/tldraw/pull/2064) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/tlschema`
- [fix] broken docs link [#2062](https://github.com/tldraw/tldraw/pull/2062) ([@steveruizok](https://github.com/steveruizok))
- Remove fixup script [#2041](https://github.com/tldraw/tldraw/pull/2041) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/state`, `@tldraw/store`, `@tldraw/tldraw`, `@tldraw/tlschema`, `@tldraw/utils`, `@tldraw/validate`
- Publish api.json [#2034](https://github.com/tldraw/tldraw/pull/2034) ([@steveruizok](https://github.com/steveruizok))
#### 🧪 Tests
- re-enable visual regression tests [#2056](https://github.com/tldraw/tldraw/pull/2056) ([@SomeHats](https://github.com/SomeHats) [@huppy-bot[bot]](https://github.com/huppy-bot[bot]))
#### Authors: 7
- [@huppy-bot[bot]](https://github.com/huppy-bot[bot])
- alex ([@SomeHats](https://github.com/SomeHats))
- David Sheldrick ([@ds300](https://github.com/ds300))
- Mitja Bezenšek ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Prince Mendiratta ([@Prince-Mendiratta](https://github.com/Prince-Mendiratta))
- Steve Ruiz ([@steveruizok](https://github.com/steveruizok))
- Taha ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))

View file

@ -0,0 +1,109 @@
---
title: v2.0.0-alpha.17
description: Examples
author: tldraw
date: 10/17/2023
order: 4
status: published
---
[View on GitHub](https://github.com/tldraw/tldraw/releases/tag/v2.0.0-alpha.17)
#### Firefox, Touch: Fix not being able to open style dropdowns ([#2092](https://github.com/tldraw/tldraw/pull/2092))
- Firefox Mobile: Fixed a bug where you couldn't open some style dropdown options.
#### Add timestamp to file names ([#2096](https://github.com/tldraw/tldraw/pull/2096))
- Add timestamp to exported image file names
#### [fix] Context menu + menus not closing correctly ([#2086](https://github.com/tldraw/tldraw/pull/2086))
- [fix] bug with menus
#### Fix not being able to upload massive images ([#2095](https://github.com/tldraw/tldraw/pull/2095))
- Fixed big images being too big to get added to the canvas.
#### fix cropped image size ([#2097](https://github.com/tldraw/tldraw/pull/2097))
- Fixes a rendering issue where cropped images were sometimes bleeding outside their bounds.
#### Add offline indicator (also to top zone example) ([#2083](https://github.com/tldraw/tldraw/pull/2083))
- [@tldraw/tldraw] add offline indicator to ui components
#### [fix] missing border on group shape when unlocked ([#2075](https://github.com/tldraw/tldraw/pull/2075))
- Fix case where indicator was not shown when unlocking groups
#### [fix] reparenting locked shapes ([#2070](https://github.com/tldraw/tldraw/pull/2070))
- Fix a bug where grouped locked shapes would be deleted when ungrouped.
#### [fix] Don't select locked shapes on pointer up ([#2069](https://github.com/tldraw/tldraw/pull/2069))
- Fix bug where locked shape could be selected by clicking on its label
#### [fix] locked shape of opacity problem with eraser.pointing ([#2073](https://github.com/tldraw/tldraw/pull/2073))
- locked shape of opacity problem with eraser.pointing
Before/after:
![A](https://github.com/tldraw/tldraw/assets/59823089/7483506c-72ac-45cc-93aa-f2a794ea8ff0) ![B](https://github.com/tldraw/tldraw/assets/59823089/ef0f988c-83f5-46a2-b891-0a391bca2f87)
---
#### 🚀 Enhancement
- `@tldraw/assets`, `@tldraw/tldraw`
- Add offline indicator (also to top zone example) [#2083](https://github.com/tldraw/tldraw/pull/2083) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/tldraw`
- Add data breakpoint to layout css [#2076](https://github.com/tldraw/tldraw/pull/2076) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/tldraw`, `@tldraw/tlschema`
- Same first page id for all editors [#2071](https://github.com/tldraw/tldraw/pull/2071) ([@steveruizok](https://github.com/steveruizok))
#### 🐛 Bug Fix
- `@tldraw/tldraw`
- Firefox, Touch: Fix not being able to open style dropdowns [#2092](https://github.com/tldraw/tldraw/pull/2092) ([@TodePond](https://github.com/TodePond))
- Add timestamp to file names [#2096](https://github.com/tldraw/tldraw/pull/2096) ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))
- move imports [#2099](https://github.com/tldraw/tldraw/pull/2099) ([@SomeHats](https://github.com/SomeHats))
- Fix not being able to upload massive images [#2095](https://github.com/tldraw/tldraw/pull/2095) ([@TodePond](https://github.com/TodePond))
- fix cropped image size [#2097](https://github.com/tldraw/tldraw/pull/2097) ([@ds300](https://github.com/ds300))
- Fixed a bug checking translated string keys [#2082](https://github.com/tldraw/tldraw/pull/2082) ([@kewell-tsao](https://github.com/kewell-tsao))
- [fix] Don't select locked shapes on pointer up [#2069](https://github.com/tldraw/tldraw/pull/2069) ([@steveruizok](https://github.com/steveruizok))
- [fix] locked shape of opacity problem with eraser.pointing [#2073](https://github.com/tldraw/tldraw/pull/2073) ([@momenthana](https://github.com/momenthana))
- `@tldraw/editor`, `@tldraw/tldraw`
- [fix] Context menu + menus not closing correctly [#2086](https://github.com/tldraw/tldraw/pull/2086) ([@steveruizok](https://github.com/steveruizok))
- [fix] reparenting locked shapes [#2070](https://github.com/tldraw/tldraw/pull/2070) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`
- [fix] remove findLast calls [#2081](https://github.com/tldraw/tldraw/pull/2081) ([@steveruizok](https://github.com/steveruizok))
- [fix] missing border on group shape when unlocked [#2075](https://github.com/tldraw/tldraw/pull/2075) ([@steveruizok](https://github.com/steveruizok))
- Compact children when updating parents to children. [#2072](https://github.com/tldraw/tldraw/pull/2072) ([@steveruizok](https://github.com/steveruizok))
#### 🏠 Internal
- Fix ExplodedExample.tsx [#2068](https://github.com/tldraw/tldraw/pull/2068) ([@antmoux](https://github.com/antmoux) [@steveruizok](https://github.com/steveruizok))
- Update VS Code extension 2.0.13 [#2066](https://github.com/tldraw/tldraw/pull/2066) ([@MitjaBezensek](https://github.com/MitjaBezensek))
#### 🧪 Tests
- Only upload playwright to S3 if we have the right credentials [#2074](https://github.com/tldraw/tldraw/pull/2074) ([@SomeHats](https://github.com/SomeHats) [@steveruizok](https://github.com/steveruizok))
- Cache playwright browsers. [#2067](https://github.com/tldraw/tldraw/pull/2067) ([@MitjaBezensek](https://github.com/MitjaBezensek))
#### 🔩 Dependency Updates
- `@tldraw/editor`, `@tldraw/store`, `@tldraw/tlschema`
- bump nanoid [#2078](https://github.com/tldraw/tldraw/pull/2078) ([@ds300](https://github.com/ds300))
#### Authors: 9
- alex ([@SomeHats](https://github.com/SomeHats))
- antonio moura ([@antmoux](https://github.com/antmoux))
- David Sheldrick ([@ds300](https://github.com/ds300))
- Hana ([@momenthana](https://github.com/momenthana))
- Kewell ([@kewell-tsao](https://github.com/kewell-tsao))
- Lu Wilson ([@TodePond](https://github.com/TodePond))
- Mitja Bezenšek ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Steve Ruiz ([@steveruizok](https://github.com/steveruizok))
- Taha ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))

View file

@ -0,0 +1,186 @@
---
title: v2.0.0-alpha.18
description: Examples
author: tldraw
date: 11/10/2023
order: 3
status: published
---
[View on GitHub](https://github.com/tldraw/tldraw/releases/tag/v2.0.0-alpha.18)
#### Fix an error when using context menu. ([#2186](https://github.com/tldraw/tldraw/pull/2186))
- Fixes the console error when opening the context menu for the first time.
#### [fix] actions menu freezing ui ([#2187](https://github.com/tldraw/tldraw/pull/2187))
- Fix actions menu not closing when clicking the canvas after grouping items via the actions menu.
#### Fix an issue with edit link. ([#2184](https://github.com/tldraw/tldraw/pull/2184))
- Fixes an issue with using the Edit link dialog.
#### add missing semicolon ([#2182](https://github.com/tldraw/tldraw/pull/2182))
- Fix typo in CSS file
#### Only use the hack if we are in safari. ([#2185](https://github.com/tldraw/tldraw/pull/2185))
- Improve the speed of exporting to png for non Safari browsers.
#### Fix keyboard shortcuts for vscode. ([#2181](https://github.com/tldraw/tldraw/pull/2181))
- Fixes keyboard shortcuts for VS Code extension.
#### Fix printing. ([#2177](https://github.com/tldraw/tldraw/pull/2177))
- Fixes printing of shapes.
#### [fix] Frame label not following staying aligned correctly on rotation ([#2172](https://github.com/tldraw/tldraw/pull/2172))
- Frame labels immediately update their position on rotation.
#### Don't show scrollbars. ([#2171](https://github.com/tldraw/tldraw/pull/2171))
- Hide the horizontal scrollbar in the vertical alignment for Firefox.
#### instant bookmarks ([#2176](https://github.com/tldraw/tldraw/pull/2176))
- Improves ux around pasting bookmarks
#### Fix arrow dropdown localizations. ([#2174](https://github.com/tldraw/tldraw/pull/2174))
- Fix arrow headstyle dropdown translations.
#### Fix crash with zero length arrow ([#2173](https://github.com/tldraw/tldraw/pull/2173))
- Fix a hyper niche arrow crash with zero length arrows.
#### Allow users to select shapes when drag starts on top of a locked shape. ([#2169](https://github.com/tldraw/tldraw/pull/2169))
- Allows brush selecting when you start it on top of a locked shape.
#### Fix the problem with text not being correctly aligned in small geo shapes. ([#2168](https://github.com/tldraw/tldraw/pull/2168))
- Fixes position of Text labels in geo shapes.
#### Zooming improvement ([#2149](https://github.com/tldraw/tldraw/pull/2149))
- Improves zooming for inactive windows.
#### [feature] Things on the canvas ([#2150](https://github.com/tldraw/tldraw/pull/2150))
- [editor] Adds two new components, `OnTheCanvas` and `InFrontOfTheCanvas`.
#### Bump vs code extension. ([#2142](https://github.com/tldraw/tldraw/pull/2142))
- Release a new version of VS Code extension with all the latest changes.
#### Fix cleanupText ([#2138](https://github.com/tldraw/tldraw/pull/2138))
- Fixes a minor bug where cleaning up text would fail.
#### [android] Fix text labels and link button getting misaligned ([#2132](https://github.com/tldraw/tldraw/pull/2132))
- Fixed a bug where labels and links could lose alignment on android.
#### [feature] multi-scribbles ([#2125](https://github.com/tldraw/tldraw/pull/2125))
- [feature] multi scribbles
#### Tighten up editor ui ([#2102](https://github.com/tldraw/tldraw/pull/2102))
- Small adjustment to editor ui.
#### Remove indicator for autosize text shapes while editing ([#2120](https://github.com/tldraw/tldraw/pull/2120))
- Removed the indicator from autosize text shapes.
#### Taha/initial shape in handle change ([#2117](https://github.com/tldraw/tldraw/pull/2117))
- Add a brief release note for your PR here.
#### Fix an issue with `addEventListener` in old Safari (pre v14) ([#2114](https://github.com/tldraw/tldraw/pull/2114))
- Fixes an issue with `addEventListener` on MediaQueryList object in old versions of Safari.
#### fix selection fg transform ([#2113](https://github.com/tldraw/tldraw/pull/2113))
- Fixes a small issue causing the selection foreground to be offset when the browser is at particular zoom levels.
#### Remove (optional) from jsdocs ([#2109](https://github.com/tldraw/tldraw/pull/2109))
- dev: Removed duplicate/inconsistent `(optional)`s from docs
#### [fix] mobile style panel switching open / closed ([#2101](https://github.com/tldraw/tldraw/pull/2101))
- Fix bug with style panel
---
#### 🚀 Enhancement
- `@tldraw/tldraw`
- instant bookmarks [#2176](https://github.com/tldraw/tldraw/pull/2176) ([@ds300](https://github.com/ds300))
- Remove indicator for autosize text shapes while editing [#2120](https://github.com/tldraw/tldraw/pull/2120) ([@TodePond](https://github.com/TodePond))
- `@tldraw/editor`, `@tldraw/tldraw`
- [feature] Things on the canvas [#2150](https://github.com/tldraw/tldraw/pull/2150) ([@steveruizok](https://github.com/steveruizok))
- Tighten up editor ui [#2102](https://github.com/tldraw/tldraw/pull/2102) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/tldraw`, `@tldraw/tlschema`
- [feature] multi-scribbles [#2125](https://github.com/tldraw/tldraw/pull/2125) ([@steveruizok](https://github.com/steveruizok))
#### 🐛 Bug Fix
- Bump vs code extension. [#2142](https://github.com/tldraw/tldraw/pull/2142) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Bump VS Code [#2100](https://github.com/tldraw/tldraw/pull/2100) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- `@tldraw/tldraw`
- Add tldraw component exports [#2188](https://github.com/tldraw/tldraw/pull/2188) ([@steveruizok](https://github.com/steveruizok))
- Fix an error when using context menu. [#2186](https://github.com/tldraw/tldraw/pull/2186) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Fix an issue with edit link. [#2184](https://github.com/tldraw/tldraw/pull/2184) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Only use the hack if we are in safari. [#2185](https://github.com/tldraw/tldraw/pull/2185) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Fix keyboard shortcuts for vscode. [#2181](https://github.com/tldraw/tldraw/pull/2181) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Fix printing. [#2177](https://github.com/tldraw/tldraw/pull/2177) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- [fix] Frame label not following staying aligned correctly on rotation [#2172](https://github.com/tldraw/tldraw/pull/2172) ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git) [@steveruizok](https://github.com/steveruizok))
- Don't show scrollbars. [#2171](https://github.com/tldraw/tldraw/pull/2171) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Fix arrow dropdown localizations. [#2174](https://github.com/tldraw/tldraw/pull/2174) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Allow users to select shapes when drag starts on top of a locked shape. [#2169](https://github.com/tldraw/tldraw/pull/2169) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Fix the problem with text not being correctly aligned in small geo shapes. [#2168](https://github.com/tldraw/tldraw/pull/2168) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Fix cleanupText [#2138](https://github.com/tldraw/tldraw/pull/2138) ([@ds300](https://github.com/ds300))
- [android] Fix text labels and link button getting misaligned [#2132](https://github.com/tldraw/tldraw/pull/2132) ([@TodePond](https://github.com/TodePond))
- [fix] button gaps [#2130](https://github.com/tldraw/tldraw/pull/2130) ([@steveruizok](https://github.com/steveruizok))
- [fix] Move to page button / toasts styling [#2126](https://github.com/tldraw/tldraw/pull/2126) ([@steveruizok](https://github.com/steveruizok))
- [fix] css for editing page title [#2124](https://github.com/tldraw/tldraw/pull/2124) ([@steveruizok](https://github.com/steveruizok))
- fix selection fg transform [#2113](https://github.com/tldraw/tldraw/pull/2113) ([@ds300](https://github.com/ds300))
- [fix] mobile style panel switching open / closed [#2101](https://github.com/tldraw/tldraw/pull/2101) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/tldraw`
- [fix] actions menu freezing ui [#2187](https://github.com/tldraw/tldraw/pull/2187) ([@steveruizok](https://github.com/steveruizok))
- Fix crash with zero length arrow [#2173](https://github.com/tldraw/tldraw/pull/2173) ([@TodePond](https://github.com/TodePond))
- Zooming improvement [#2149](https://github.com/tldraw/tldraw/pull/2149) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- `@tldraw/editor`
- add missing semicolon [#2182](https://github.com/tldraw/tldraw/pull/2182) ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))
- fix scroll event coords [#2180](https://github.com/tldraw/tldraw/pull/2180) ([@ds300](https://github.com/ds300))
- Fix an issue with `addEventListener` in old Safari (pre v14) [#2114](https://github.com/tldraw/tldraw/pull/2114) ([@MitjaBezensek](https://github.com/MitjaBezensek))
#### 🏠 Internal
- `@tldraw/assets`, `@tldraw/editor`, `@tldraw/state`, `@tldraw/store`, `@tldraw/tldraw`, `@tldraw/tlschema`, `@tldraw/utils`, `@tldraw/validate`
- Revert "bump prerelease from alpha to beta" [#2192](https://github.com/tldraw/tldraw/pull/2192) ([@ds300](https://github.com/ds300))
- bump prerelease from alpha to beta [#2148](https://github.com/tldraw/tldraw/pull/2148) ([@ds300](https://github.com/ds300))
- `@tldraw/editor`, `@tldraw/tldraw`
- Taha/initial shape in handle change [#2117](https://github.com/tldraw/tldraw/pull/2117) ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))
#### 📝 Documentation
- `@tldraw/editor`
- Add meta example [#2122](https://github.com/tldraw/tldraw/pull/2122) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/state`, `@tldraw/tldraw`
- Remove (optional) from jsdocs [#2109](https://github.com/tldraw/tldraw/pull/2109) ([@TodePond](https://github.com/TodePond))
#### Authors: 5
- David Sheldrick ([@ds300](https://github.com/ds300))
- Lu Wilson ([@TodePond](https://github.com/TodePond))
- Mitja Bezenšek ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Steve Ruiz ([@steveruizok](https://github.com/steveruizok))
- Taha ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))

View file

@ -0,0 +1,250 @@
---
title: v2.0.0-alpha.19
description: Examples
author: tldraw
date: 12/12/2023
order: 2
status: published
---
[View on GitHub](https://github.com/tldraw/tldraw/releases/tag/v2.0.0-alpha.19)
#### zoom to affected shapes after undo/redo ([#2293](https://github.com/tldraw/tldraw/pull/2293))
- Make sure affected shapes are visible after undo/redo
#### Fix hmr. ([#2303](https://github.com/tldraw/tldraw/pull/2303))
- Fixes HMR in local dev.
#### Fix migrations. ([#2302](https://github.com/tldraw/tldraw/pull/2302))
- Fix migrations of `instance_page_state`.
#### Add fit to content for frames. ([#2275](https://github.com/tldraw/tldraw/pull/2275))
- Add Fit to content option to the context menu for frames. This resizes the frames to correctly fit all their content.
#### Fix an issue with a stale editor reference in shape utils ([#2295](https://github.com/tldraw/tldraw/pull/2295))
- Fix an issue where the shape utils could have a stale reference to the editor.
#### fix new page naming ([#2292](https://github.com/tldraw/tldraw/pull/2292))
- Fix naming of pages created by the "move to page" action
#### Fix exporting of cropped images. ([#2268](https://github.com/tldraw/tldraw/pull/2268))
- Fix exporting of cropped images.
#### Update the comment in the example. ([#2272](https://github.com/tldraw/tldraw/pull/2272))
- Improve the comment for one of our examples.
#### [improvements] arrows x enclosing shapes x precision. ([#2265](https://github.com/tldraw/tldraw/pull/2265))
- Improves the logic about when to draw "precise" arrows between the center of bound shapes.
#### fix vite HMR issue ([#2279](https://github.com/tldraw/tldraw/pull/2279))
- Fixes a bug that could cause crashes due to a re-render loop with HMR #1989
#### Add connecting screen override. ([#2273](https://github.com/tldraw/tldraw/pull/2273))
- Allow users to customize the connecting screen.
#### Removing frames and adding elements to frames ([#2219](https://github.com/tldraw/tldraw/pull/2219))
- Allow users to remove the frame, but keep it's children. Allow the users to add shapes to the frame directly when creating a frame.
#### fix typo in useFixSafariDoubleTapZoomPencilEvents.ts ([#2242](https://github.com/tldraw/tldraw/pull/2242))
- Add a brief release note for your PR here.
#### improves translation into pt-br ([#2231](https://github.com/tldraw/tldraw/pull/2231))
- Improves the overall translation into Portuguese (pt-br).
#### Fixes #2246 Sublibraries example (ExplodedExample.tsx) ([#2247](https://github.com/tldraw/tldraw/pull/2247))
- Fixed Sublibraries (Exploded) example
#### Fix missing padding-right in toast ([#2251](https://github.com/tldraw/tldraw/pull/2251))
- Fox padding-right in toast content.
#### Fix "custom UI" example ([#2253](https://github.com/tldraw/tldraw/pull/2253))
- Fixed double rendering of canvas in the "custom UI" example
#### Lokalise: Translations update ([#2248](https://github.com/tldraw/tldraw/pull/2248))
- Update Romanian translations.
#### Also export `TLUiEventMap` ([#2234](https://github.com/tldraw/tldraw/pull/2234))
- Export `TLUiEventMap` type.
#### Fix the tool lock button. ([#2225](https://github.com/tldraw/tldraw/pull/2225))
- Adds the missing tool lock button.
#### Custom Tools DX + screenshot example ([#2198](https://github.com/tldraw/tldraw/pull/2198))
- adds ScreenshotTool custom tool example
- improvements and new exports related to copying and exporting images / files
- loosens up types around icons and translations
- moving `StateNode.isActive` into an atom
- adding `Editor.path`
#### StateNode atoms ([#2213](https://github.com/tldraw/tldraw/pull/2213))
- adds computed `StateNode.getPath`
- adds computed StateNode.getCurrent`
- adds computed StateNode.getIsActive`
- adds computed `Editor.getPath()`
- makes transition's second property optional
#### VS Code bump 2.0.17 ([#2217](https://github.com/tldraw/tldraw/pull/2217))
- VS code extension 2.0.17.
#### don't overwrite bookmark position if it changed before metadata arrives ([#2215](https://github.com/tldraw/tldraw/pull/2215))
- Fixes issue when creating new bookmark shape where the position would be reset if you moved it before the bookmark metadata was fetched.
#### Add prettier caching ([#2212](https://github.com/tldraw/tldraw/pull/2212))
- Speed up formatting of files via `yarn format`.
#### Update translations from community submissions ([#2201](https://github.com/tldraw/tldraw/pull/2201))
- Updated translations for Spanish, Japanese, Romanian, Russian, Ukrainian, and Simplified Chinese.
#### [fix] huge images, use downscale for image scaling ([#2207](https://github.com/tldraw/tldraw/pull/2207))
- Improved image rescaling.
#### Revert back to the previous color. ([#2210](https://github.com/tldraw/tldraw/pull/2210))
- Fixes the color of culled shapes when using dark mode.
#### Fix an issue with not being able to group a shape an an arrow. ([#2205](https://github.com/tldraw/tldraw/pull/2205))
- Add a brief release note for your PR here.
#### Japanese translations. (update) ([#2199](https://github.com/tldraw/tldraw/pull/2199))
- Updated Japanese translations.
#### feat: add new prop to force mobile mode layout ([#1734](https://github.com/tldraw/tldraw/pull/1734))
- add new prop to force mobile mode layout
#### [fix] masked bounds calculation ([#2197](https://github.com/tldraw/tldraw/pull/2197))
- Fix bug with getmaskedpagebounds calculation for identical parent / child sizes
---
#### 💥 Breaking Change
- `@tldraw/editor`, `@tldraw/state`, `@tldraw/store`, `@tldraw/tldraw`, `@tldraw/tlschema`
- No impure getters pt 1 [#2189](https://github.com/tldraw/tldraw/pull/2189) ([@steveruizok](https://github.com/steveruizok) [@ds300](https://github.com/ds300))
#### 🚀 Enhancement
- `@tldraw/editor`, `@tldraw/tldraw`
- Add fit to content for frames. [#2275](https://github.com/tldraw/tldraw/pull/2275) ([@MitjaBezensek](https://github.com/MitjaBezensek) [@steveruizok](https://github.com/steveruizok))
- Removing frames and adding elements to frames [#2219](https://github.com/tldraw/tldraw/pull/2219) ([@MitjaBezensek](https://github.com/MitjaBezensek) [@steveruizok](https://github.com/steveruizok) [@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))
- Custom Tools DX + screenshot example [#2198](https://github.com/tldraw/tldraw/pull/2198) ([@steveruizok](https://github.com/steveruizok))
- StateNode atoms [#2213](https://github.com/tldraw/tldraw/pull/2213) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`, `@tldraw/tldraw`, `@tldraw/tlschema`
- [improvements] arrows x enclosing shapes x precision. [#2265](https://github.com/tldraw/tldraw/pull/2265) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/editor`
- Add connecting screen override. [#2273](https://github.com/tldraw/tldraw/pull/2273) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- `@tldraw/tldraw`
- Add `getSvgAsImage` to exports. [#2229](https://github.com/tldraw/tldraw/pull/2229) ([@steveruizok](https://github.com/steveruizok))
- [fix] huge images, use downscale for image scaling [#2207](https://github.com/tldraw/tldraw/pull/2207) ([@steveruizok](https://github.com/steveruizok))
- feat: add new prop to force mobile mode layout [#1734](https://github.com/tldraw/tldraw/pull/1734) ([@gabrielchl](https://github.com/gabrielchl) [@steveruizok](https://github.com/steveruizok))
#### 🐛 Bug Fix
- Fix hmr. [#2303](https://github.com/tldraw/tldraw/pull/2303) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- VS Code version bump. [#2297](https://github.com/tldraw/tldraw/pull/2297) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- improves translation into pt-br [#2231](https://github.com/tldraw/tldraw/pull/2231) ([@bybruno](https://github.com/bybruno))
- Fixes #2246 Sublibraries example (ExplodedExample.tsx) [#2247](https://github.com/tldraw/tldraw/pull/2247) (gary.saunders@sportsengine.com [@steveruizok](https://github.com/steveruizok))
- Lokalise: Translations update [#2248](https://github.com/tldraw/tldraw/pull/2248) ([@TodePond](https://github.com/TodePond))
- Update translations from community submissions [#2201](https://github.com/tldraw/tldraw/pull/2201) ([@TodePond](https://github.com/TodePond) [@steveruizok](https://github.com/steveruizok))
- Japanese translations. (update) [#2199](https://github.com/tldraw/tldraw/pull/2199) ([@sugitlab](https://github.com/sugitlab))
- VS code bump 2.0.16 [#2193](https://github.com/tldraw/tldraw/pull/2193) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- `@tldraw/editor`, `@tldraw/tldraw`
- Revert "zoom to affected shapes after undo/redo" [#2310](https://github.com/tldraw/tldraw/pull/2310) ([@ds300](https://github.com/ds300))
- zoom to affected shapes after undo/redo [#2293](https://github.com/tldraw/tldraw/pull/2293) ([@ds300](https://github.com/ds300))
- fix new page naming [#2292](https://github.com/tldraw/tldraw/pull/2292) ([@SomeHats](https://github.com/SomeHats))
- No impure getters pt9 [#2222](https://github.com/tldraw/tldraw/pull/2222) ([@ds300](https://github.com/ds300))
- No impure getters pt8 [#2221](https://github.com/tldraw/tldraw/pull/2221) ([@ds300](https://github.com/ds300))
- No impure getters pt7 [#2220](https://github.com/tldraw/tldraw/pull/2220) ([@ds300](https://github.com/ds300))
- No impure getters pt6 [#2218](https://github.com/tldraw/tldraw/pull/2218) ([@ds300](https://github.com/ds300))
- No impure getters pt5 [#2208](https://github.com/tldraw/tldraw/pull/2208) ([@ds300](https://github.com/ds300))
- Fix an issue with not being able to group a shape an an arrow. [#2205](https://github.com/tldraw/tldraw/pull/2205) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- No impure getters pt4 [#2206](https://github.com/tldraw/tldraw/pull/2206) ([@ds300](https://github.com/ds300))
- No impure getters pt3 [#2203](https://github.com/tldraw/tldraw/pull/2203) ([@ds300](https://github.com/ds300))
- No impure getters pt2 [#2202](https://github.com/tldraw/tldraw/pull/2202) ([@ds300](https://github.com/ds300))
- `@tldraw/tlschema`
- Fix migrations. [#2302](https://github.com/tldraw/tldraw/pull/2302) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- `@tldraw/editor`
- Fix an issue with a stale editor reference in shape utils [#2295](https://github.com/tldraw/tldraw/pull/2295) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Fix the cleanup of event handlers [#2298](https://github.com/tldraw/tldraw/pull/2298) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Revert back to the previous color. [#2210](https://github.com/tldraw/tldraw/pull/2210) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- [fix] masked bounds calculation [#2197](https://github.com/tldraw/tldraw/pull/2197) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/tldraw`
- Fix exporting of cropped images. [#2268](https://github.com/tldraw/tldraw/pull/2268) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Hot elbows [#2258](https://github.com/tldraw/tldraw/pull/2258) ([@ds300](https://github.com/ds300) [@steveruizok](https://github.com/steveruizok))
- Fix missing padding-right in toast [#2251](https://github.com/tldraw/tldraw/pull/2251) ([@ByMykel](https://github.com/ByMykel) [@steveruizok](https://github.com/steveruizok))
- Also export `TLUiEventMap` [#2234](https://github.com/tldraw/tldraw/pull/2234) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Fix the tool lock button. [#2225](https://github.com/tldraw/tldraw/pull/2225) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- don't overwrite bookmark position if it changed before metadata arrives [#2215](https://github.com/tldraw/tldraw/pull/2215) ([@ds300](https://github.com/ds300))
- `@tldraw/editor`, `@tldraw/tldraw`, `@tldraw/utils`
- fix vite HMR issue [#2279](https://github.com/tldraw/tldraw/pull/2279) ([@SomeHats](https://github.com/SomeHats))
- `@tldraw/editor`, `@tldraw/state`, `@tldraw/tldraw`, `@tldraw/utils`
- no impure getters pt 11 [#2236](https://github.com/tldraw/tldraw/pull/2236) ([@ds300](https://github.com/ds300))
- `@tldraw/editor`, `@tldraw/state`, `@tldraw/store`, `@tldraw/tldraw`
- No impure getters pt10 [#2235](https://github.com/tldraw/tldraw/pull/2235) ([@ds300](https://github.com/ds300))
#### 🏠 Internal
- Fix "custom UI" example [#2253](https://github.com/tldraw/tldraw/pull/2253) ([@OriginalEXE](https://github.com/OriginalEXE))
- Add floaty window example [#2250](https://github.com/tldraw/tldraw/pull/2250) ([@steveruizok](https://github.com/steveruizok))
- VS Code bump 2.0.17 [#2217](https://github.com/tldraw/tldraw/pull/2217) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- `@tldraw/tlschema`
- Add prettier caching [#2212](https://github.com/tldraw/tldraw/pull/2212) ([@MitjaBezensek](https://github.com/MitjaBezensek))
#### 📝 Documentation
- Update the comment in the example. [#2272](https://github.com/tldraw/tldraw/pull/2272) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- `@tldraw/editor`, `@tldraw/state`
- Replace getters in examples [#2261](https://github.com/tldraw/tldraw/pull/2261) ([@ds300](https://github.com/ds300))
- `@tldraw/editor`
- fix typo in useFixSafariDoubleTapZoomPencilEvents.ts [#2242](https://github.com/tldraw/tldraw/pull/2242) ([@eltociear](https://github.com/eltociear))
#### 🧪 Tests
- `@tldraw/tldraw`
- fix export snapshot race condition [#2280](https://github.com/tldraw/tldraw/pull/2280) ([@SomeHats](https://github.com/SomeHats))
#### Authors: 13
- [@ByMykel](https://github.com/ByMykel)
- alex ([@SomeHats](https://github.com/SomeHats))
- Ante Sepic ([@OriginalEXE](https://github.com/OriginalEXE))
- Bruno ([@bybruno](https://github.com/bybruno))
- David Sheldrick ([@ds300](https://github.com/ds300))
- Gabriel Lee ([@gabrielchl](https://github.com/gabrielchl))
- Gary Saunders ([@codenamegary](https://github.com/codenamegary))
- Ikko Eltociear Ashimine ([@eltociear](https://github.com/eltociear))
- Lu Wilson ([@TodePond](https://github.com/TodePond))
- Mitja Bezenšek ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Steve Ruiz ([@steveruizok](https://github.com/steveruizok))
- Sugit ([@sugitlab](https://github.com/sugitlab))
- Taha ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))

View file

@ -0,0 +1,151 @@
---
title: v2.0.0-beta.1
description: Examples
author: tldraw
date: 12/20/2023
order: 1
status: published
---
[View on GitHub](https://github.com/tldraw/tldraw/releases/tag/v2.0.0-beta.1)
#### add speech bubble example ([#2362](https://github.com/tldraw/tldraw/pull/2362))
- Add an example for making a custom shape with handles, this one is a speech bubble with a movable tail.
#### Fix clicking off the context menu ([#2355](https://github.com/tldraw/tldraw/pull/2355))
- Fix not being able to close the context menu by clicking on the UI or your selected shape.
#### fix read only page menu ([#2356](https://github.com/tldraw/tldraw/pull/2356))
- Add a brief release note for your PR here.
#### refactor: Keep hook function convention the same ([#2358](https://github.com/tldraw/tldraw/pull/2358))
- Add a brief release note for your PR here.
#### focus on container before deleting to avoid losing focus ([#2354](https://github.com/tldraw/tldraw/pull/2354))
- Prevents losing focus when clicking the trash button
#### Stop shape text labels being hoverable when context menu is open ([#2352](https://github.com/tldraw/tldraw/pull/2352))
- Add a brief release note for your PR here.
#### Use custom font ([#2343](https://github.com/tldraw/tldraw/pull/2343))
- Add a brief release note for your PR here.
#### Only allow side resizing when we have some shapes that are not aspect ratio locked ([#2347](https://github.com/tldraw/tldraw/pull/2347))
- Don't allow edges resizing on mobile. The only exception is a single text shape.
#### Fix iconleft padding ([#2345](https://github.com/tldraw/tldraw/pull/2345))
- Fixes the icon padding in back to content / pen mode buttons.
#### [bug] Fix for issue #2329 ([#2330](https://github.com/tldraw/tldraw/pull/2330))
- Fix for `Matrix2d.Scale` function
#### Allow dragging on top of locked shapes. ([#2337](https://github.com/tldraw/tldraw/pull/2337))
- Allow translating of shapes on top of a locked shape by clicking inside of selection and moving the mouse.
#### Remove deprecated getters ([#2333](https://github.com/tldraw/tldraw/pull/2333))
- (Breaking) Removed deprecated getters.
#### Lokalise: Translations update ([#2342](https://github.com/tldraw/tldraw/pull/2342))
Added Czech translations.
Updated translations for German, Korean, Russian, Ukrainian, Traditional Chinese.
#### Prevent diff mutation ([#2336](https://github.com/tldraw/tldraw/pull/2336))
- Fix `squashRecordDiffs` to prevent a bug where it mutates the 'updated' entires
#### Fix indicator radius for bookmarks. ([#2335](https://github.com/tldraw/tldraw/pull/2335))
- Fix the indicator for the bookmark shape. The radius now matches the shape's radius.
#### Start scrolling if we are dragging close to the window edges. ([#2299](https://github.com/tldraw/tldraw/pull/2299))
- Adds the logic to change the camera position when you get close to the edges of the window. This allows you to drag, resize, brush select past the edges of the current viewport.
#### Fix downscaling ([#2325](https://github.com/tldraw/tldraw/pull/2325))
- Decrease the size of uploaded assets.
#### Use a global singleton for tlstate ([#2322](https://github.com/tldraw/tldraw/pull/2322))
- Make a global singleton for tlstate.
#### VS Code 2.0.19 ([#2324](https://github.com/tldraw/tldraw/pull/2324))
- Version bump for VS Code.
---
#### 💥 Breaking Change
- `@tldraw/assets`, `@tldraw/editor`, `@tldraw/state`, `@tldraw/store`, `@tldraw/tldraw`, `@tldraw/tlschema`, `@tldraw/utils`, `@tldraw/validate`
- bump to beta [#2364](https://github.com/tldraw/tldraw/pull/2364) ([@steveruizok](https://github.com/steveruizok))
- Change licenses to tldraw [#2167](https://github.com/tldraw/tldraw/pull/2167) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/assets`, `@tldraw/tldraw`
- Use custom font [#2343](https://github.com/tldraw/tldraw/pull/2343) ([@ds300](https://github.com/ds300) [@huppy-bot[bot]](https://github.com/huppy-bot[bot]))
- `@tldraw/editor`, `@tldraw/state`
- Remove deprecated getters [#2333](https://github.com/tldraw/tldraw/pull/2333) ([@ds300](https://github.com/ds300))
#### 🚀 Enhancement
- add speech bubble example [#2362](https://github.com/tldraw/tldraw/pull/2362) ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))
- `@tldraw/editor`, `@tldraw/tldraw`
- Start scrolling if we are dragging close to the window edges. [#2299](https://github.com/tldraw/tldraw/pull/2299) ([@MitjaBezensek](https://github.com/MitjaBezensek) [@steveruizok](https://github.com/steveruizok))
#### 🐛 Bug Fix
- VS Code 2.0.19 [#2324](https://github.com/tldraw/tldraw/pull/2324) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- `@tldraw/editor`, `@tldraw/tldraw`
- Fix clicking off the context menu [#2355](https://github.com/tldraw/tldraw/pull/2355) ([@TodePond](https://github.com/TodePond) [@steveruizok](https://github.com/steveruizok))
- Drop edge scrolling adjustment for mobile [#2346](https://github.com/tldraw/tldraw/pull/2346) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/tldraw`
- fix read only page menu [#2356](https://github.com/tldraw/tldraw/pull/2356) ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git) [@TodePond](https://github.com/TodePond))
- focus on container before deleting to avoid losing focus [#2354](https://github.com/tldraw/tldraw/pull/2354) ([@ds300](https://github.com/ds300))
- Only allow side resizing when we have some shapes that are not aspect ratio locked [#2347](https://github.com/tldraw/tldraw/pull/2347) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Fix iconleft padding [#2345](https://github.com/tldraw/tldraw/pull/2345) ([@steveruizok](https://github.com/steveruizok))
- Allow dragging on top of locked shapes. [#2337](https://github.com/tldraw/tldraw/pull/2337) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Fix indicator radius for bookmarks. [#2335](https://github.com/tldraw/tldraw/pull/2335) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Fix downscaling [#2325](https://github.com/tldraw/tldraw/pull/2325) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- `@tldraw/editor`
- Stop shape text labels being hoverable when context menu is open [#2352](https://github.com/tldraw/tldraw/pull/2352) ([@TodePond](https://github.com/TodePond))
- [bug] Fix for issue #2329 [#2330](https://github.com/tldraw/tldraw/pull/2330) ([@zfedoran](https://github.com/zfedoran))
- `@tldraw/utils`
- fix png images with pixel ratios <0.5 crashing the app [#2350](https://github.com/tldraw/tldraw/pull/2350) ([@SomeHats](https://github.com/SomeHats))
- `@tldraw/assets`, `@tldraw/editor`, `@tldraw/tlschema`
- Lokalise: Translations update [#2342](https://github.com/tldraw/tldraw/pull/2342) ([@TodePond](https://github.com/TodePond))
- `@tldraw/store`, `@tldraw/tldraw`
- Prevent diff mutation [#2336](https://github.com/tldraw/tldraw/pull/2336) ([@ds300](https://github.com/ds300))
- `@tldraw/store`
- Call devFreeze on initialData [#2332](https://github.com/tldraw/tldraw/pull/2332) ([@ds300](https://github.com/ds300))
- `@tldraw/state`
- Fix TSDoc for @tldraw/state [#2327](https://github.com/tldraw/tldraw/pull/2327) ([@ds300](https://github.com/ds300))
- Use a global singleton for tlstate [#2322](https://github.com/tldraw/tldraw/pull/2322) ([@ds300](https://github.com/ds300))
#### 🏠 Internal
- `@tldraw/editor`
- refactor: Keep hook function convention the same [#2358](https://github.com/tldraw/tldraw/pull/2358) ([@Lennon57](https://github.com/Lennon57))
#### Authors: 9
- [@huppy-bot[bot]](https://github.com/huppy-bot[bot])
- [@zfedoran](https://github.com/zfedoran)
- alex ([@SomeHats](https://github.com/SomeHats))
- David Sheldrick ([@ds300](https://github.com/ds300))
- Lu Wilson ([@TodePond](https://github.com/TodePond))
- MinhoPark ([@Lennon57](https://github.com/Lennon57))
- Mitja Bezenšek ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Steve Ruiz ([@steveruizok](https://github.com/steveruizok))
- Taha ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))

View file

@ -0,0 +1,166 @@
---
title: v2.0.0-beta.2
description: Examples
author: tldraw
date: 1/10/2024
order: 0
status: published
---
[View on GitHub](https://github.com/tldraw/tldraw/releases/tag/v2.0.0-beta.2)
#### Fix validation when pasting images. ([#2436](https://github.com/tldraw/tldraw/pull/2436))
- Fixes url validations.
#### Fix decrement button label in OnTheCanvas example component ([#2432](https://github.com/tldraw/tldraw/pull/2432))
- tiny bug fix, simply changing a label to match behaviour
#### refactor copy/export, fix safari copy-as-image being broken ([#2411](https://github.com/tldraw/tldraw/pull/2411))
- Fix a bug preventing copying as an image on iOS
#### Add url validation ([#2428](https://github.com/tldraw/tldraw/pull/2428))
- Add validation to urls.
#### [fix] next selected shapes comment ([#2427](https://github.com/tldraw/tldraw/pull/2427))
- Fix error in setStyleForNextSelectedShapes comment
#### annotate error boundary example ([#2410](https://github.com/tldraw/tldraw/pull/2410))
- Add annotation to error boundary example
#### Fix issues with clip paths for frames ([#2406](https://github.com/tldraw/tldraw/pull/2406))
- Add a brief release note for your PR here.
#### Annotate custom styles example ([#2405](https://github.com/tldraw/tldraw/pull/2405))
- Add annotation to the custom styles example
#### annotate custom config example ([#2404](https://github.com/tldraw/tldraw/pull/2404))
- Adds annotation to the custom config example with a bit more detail
#### annotate asset props, correct image/video confusion ([#2399](https://github.com/tldraw/tldraw/pull/2399))
- Annotates the asset props example and fixes a mistake in the existing comments
#### Annotate/refactor store events example ([#2400](https://github.com/tldraw/tldraw/pull/2400))
- Update store events example to use store.listen method
- Annotate with explanations of the code
#### annotate canvas events ([#2397](https://github.com/tldraw/tldraw/pull/2397))
- Adds annotation to the canvas events example
#### [fix] edge scrolling when component is inside of screen ([#2398](https://github.com/tldraw/tldraw/pull/2398))
- Add a brief release note for your PR here.
#### Annotate api example ([#2395](https://github.com/tldraw/tldraw/pull/2395))
- Annotate API example
#### [tech debt] Primitives renaming party / cleanup ([#2396](https://github.com/tldraw/tldraw/pull/2396))
- renames Vec2d to Vec
- renames Vec2dModel to VecModel
- renames Box2d to Box
- renames Box2dModel to BoxModel
- renames Matrix2d to Mat
- renames Matrix2dModel to MatModel
- removes unused primitive helpers
#### Refactor and document speech bubble example ([#2392](https://github.com/tldraw/tldraw/pull/2392))
- Add annotations to the speech bubble example
- Refactor code for clarity
#### Fix trademark links ([#2380](https://github.com/tldraw/tldraw/pull/2380))
- Fixes broken links in a number of docs files.
#### [fix] polygon bounds ([#2378](https://github.com/tldraw/tldraw/pull/2378))
- Fixed a bug with the bounds calculation for polygons.
#### Avoid importing `editor.css` twice ([#2373](https://github.com/tldraw/tldraw/pull/2373))
- Prevent importing `editor.css` twice which should help when debugging the styles via developer console.
#### Adding an image shape from a file the public folder ([#2370](https://github.com/tldraw/tldraw/pull/2370))
- Adds a simple image example.
---
#### 💥 Breaking Change
- `@tldraw/editor`, `@tldraw/tldraw`, `@tldraw/tlschema`
- [tech debt] Primitives renaming party / cleanup [#2396](https://github.com/tldraw/tldraw/pull/2396) ([@steveruizok](https://github.com/steveruizok))
#### 🚀 Enhancement
- Adding an image shape from a file the public folder [#2370](https://github.com/tldraw/tldraw/pull/2370) ([@MitjaBezensek](https://github.com/MitjaBezensek))
#### 🐛 Bug Fix
- Avoid importing `editor.css` twice [#2373](https://github.com/tldraw/tldraw/pull/2373) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- VS Code bump 2.0.20 [#2371](https://github.com/tldraw/tldraw/pull/2371) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- `@tldraw/tlschema`
- Fix validation when pasting images. [#2436](https://github.com/tldraw/tldraw/pull/2436) ([@MitjaBezensek](https://github.com/MitjaBezensek) [@SomeHats](https://github.com/SomeHats))
- `@tldraw/tldraw`
- refactor copy/export, fix safari copy-as-image being broken [#2411](https://github.com/tldraw/tldraw/pull/2411) ([@SomeHats](https://github.com/SomeHats) [@huppy-bot[bot]](https://github.com/huppy-bot[bot]))
- [fix] Asset versions [#2389](https://github.com/tldraw/tldraw/pull/2389) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/tldraw`, `@tldraw/tlschema`, `@tldraw/utils`, `@tldraw/validate`
- Add url validation [#2428](https://github.com/tldraw/tldraw/pull/2428) ([@MitjaBezensek](https://github.com/MitjaBezensek) [@SomeHats](https://github.com/SomeHats))
- `@tldraw/editor`
- Fix issues with clip paths for frames [#2406](https://github.com/tldraw/tldraw/pull/2406) ([@MitjaBezensek](https://github.com/MitjaBezensek))
- `@tldraw/editor`, `@tldraw/tldraw`
- [fix] edge scrolling when component is inside of screen [#2398](https://github.com/tldraw/tldraw/pull/2398) ([@steveruizok](https://github.com/steveruizok))
- [fix] polygon bounds [#2378](https://github.com/tldraw/tldraw/pull/2378) ([@steveruizok](https://github.com/steveruizok))
- `@tldraw/store`
- Fix meta examples [#2379](https://github.com/tldraw/tldraw/pull/2379) ([@steveruizok](https://github.com/steveruizok))
#### 🏠 Internal
- Fix license language. [#2365](https://github.com/tldraw/tldraw/pull/2365) ([@steveruizok](https://github.com/steveruizok))
#### 📝 Documentation
- Fix decrement button label in OnTheCanvas example component [#2432](https://github.com/tldraw/tldraw/pull/2432) ([@StanFlint](https://github.com/StanFlint))
- annotate error boundary example [#2410](https://github.com/tldraw/tldraw/pull/2410) ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git) [@steveruizok](https://github.com/steveruizok))
- fix example scrolling on ios [#2412](https://github.com/tldraw/tldraw/pull/2412) ([@SomeHats](https://github.com/SomeHats))
- Add descriptions to active examples [#2407](https://github.com/tldraw/tldraw/pull/2407) ([@SomeHats](https://github.com/SomeHats))
- Annotate custom styles example [#2405](https://github.com/tldraw/tldraw/pull/2405) ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git) [@steveruizok](https://github.com/steveruizok))
- annotate custom config example [#2404](https://github.com/tldraw/tldraw/pull/2404) ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))
- annotate asset props, correct image/video confusion [#2399](https://github.com/tldraw/tldraw/pull/2399) ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))
- Annotate/refactor store events example [#2400](https://github.com/tldraw/tldraw/pull/2400) ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))
- annotate canvas events [#2397](https://github.com/tldraw/tldraw/pull/2397) ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))
- Annotate api example [#2395](https://github.com/tldraw/tldraw/pull/2395) ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))
- Refactor and document speech bubble example [#2392](https://github.com/tldraw/tldraw/pull/2392) ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git) [@steveruizok](https://github.com/steveruizok))
- Fix README link typo [#2372](https://github.com/tldraw/tldraw/pull/2372) ([@chunderbolt](https://github.com/chunderbolt))
- `@tldraw/editor`
- [fix] next selected shapes comment [#2427](https://github.com/tldraw/tldraw/pull/2427) ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))
- `@tldraw/tldraw`
- [example] Changing the default tldraw colors [#2402](https://github.com/tldraw/tldraw/pull/2402) ([@steveruizok](https://github.com/steveruizok))
- add descriptions to examples [#2375](https://github.com/tldraw/tldraw/pull/2375) ([@SomeHats](https://github.com/SomeHats) [@steveruizok](https://github.com/steveruizok))
- `@tldraw/assets`, `@tldraw/editor`, `@tldraw/tldraw`, `@tldraw/tlschema`, `@tldraw/utils`, `@tldraw/validate`
- Fix trademark links [#2380](https://github.com/tldraw/tldraw/pull/2380) ([@nonparibus](https://github.com/nonparibus))
- Another typo fix. [#2366](https://github.com/tldraw/tldraw/pull/2366) ([@steveruizok](https://github.com/steveruizok))
#### Authors: 8
- [@chunderbolt](https://github.com/chunderbolt)
- [@huppy-bot[bot]](https://github.com/huppy-bot[bot])
- alex ([@SomeHats](https://github.com/SomeHats))
- David @ HASH ([@nonparibus](https://github.com/nonparibus))
- Mitja Bezenšek ([@MitjaBezensek](https://github.com/MitjaBezensek))
- Stan Flint ([@StanFlint](https://github.com/StanFlint))
- Steve Ruiz ([@steveruizok](https://github.com/steveruizok))
- Taha ([@Taha-Hassan-Git](https://github.com/Taha-Hassan-Git))

View file

@ -0,0 +1,206 @@
[
{
"id": "getting-started",
"title": "Getting Started",
"description": "Introduction articles for tldraw.",
"categories": [],
"sidebar_behavior": "show-links"
},
{
"id": "docs",
"title": "Documentation",
"description": "Developer documentation for tldraw.",
"categories": [],
"sidebar_behavior": "show-links"
},
{
"id": "community",
"title": "Community",
"description": "Guides for contributing to tldraw's open source project.",
"categories": [],
"sidebar_behavior": "show-links"
},
{
"id": "gen",
"title": "API Reference",
"description": "Reference for the tldraw package's APIs (generated).",
"categories": [
{
"id": "editor",
"title": "@tldraw/editor",
"description": "",
"groups": [
{
"id": "Namespace",
"path": null
},
{
"id": "Class",
"path": null
},
{
"id": "Function",
"path": null
},
{
"id": "Variable",
"path": null
},
{
"id": "Enum",
"path": null
},
{
"id": "Interface",
"path": null
},
{
"id": "TypeAlias",
"path": null
}
]
},
{
"id": "store",
"title": "@tldraw/store",
"description": "",
"groups": [
{
"id": "Namespace",
"path": null
},
{
"id": "Class",
"path": null
},
{
"id": "Function",
"path": null
},
{
"id": "Variable",
"path": null
},
{
"id": "Enum",
"path": null
},
{
"id": "Interface",
"path": null
},
{
"id": "TypeAlias",
"path": null
}
]
},
{
"id": "tldraw",
"title": "@tldraw/tldraw",
"description": "",
"groups": [
{
"id": "Namespace",
"path": null
},
{
"id": "Class",
"path": null
},
{
"id": "Function",
"path": null
},
{
"id": "Variable",
"path": null
},
{
"id": "Enum",
"path": null
},
{
"id": "Interface",
"path": null
},
{
"id": "TypeAlias",
"path": null
}
]
},
{
"id": "tlschema",
"title": "@tldraw/tlschema",
"description": "",
"groups": [
{
"id": "Namespace",
"path": null
},
{
"id": "Class",
"path": null
},
{
"id": "Function",
"path": null
},
{
"id": "Variable",
"path": null
},
{
"id": "Enum",
"path": null
},
{
"id": "Interface",
"path": null
},
{
"id": "TypeAlias",
"path": null
}
]
},
{
"id": "validate",
"title": "@tldraw/validate",
"description": "",
"groups": [
{
"id": "Namespace",
"path": null
},
{
"id": "Class",
"path": null
},
{
"id": "Function",
"path": null
},
{
"id": "Variable",
"path": null
},
{
"id": "Enum",
"path": null
},
{
"id": "Interface",
"path": null
},
{
"id": "TypeAlias",
"path": null
}
]
}
],
"sidebar_behavior": "show-title"
}
]

5
apps/docs/next-env.d.ts vendored Normal file
View file

@ -0,0 +1,5 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

82
apps/docs/next.config.js Normal file
View file

@ -0,0 +1,82 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
experimental: {
scrollRestoration: true,
},
transpilePackages: [],
async redirects() {
return [
{
// For reverse compatibility with old links
source: '/:sectionId/ucg/:articleId',
destination: '/:sectionId/:articleId',
permanent: true,
},
{
// For reverse compatibility with old links
source: '/docs/introduction',
destination: '/introduction',
permanent: true,
},
{
// For reverse compatibility with old links
source: '/docs/installation',
destination: '/installation',
permanent: true,
},
{
// For reverse compatibility with old links
source: '/docs/usage',
destination: '/usage',
permanent: true,
},
{
// For reverse compatibility with old links
source: '/docs/introduction',
destination: '/introduction',
permanent: true,
},
{
// For reverse compatibility with old links
source: '/docs/installation',
destination: '/installation',
permanent: true,
},
{
// For reverse compatibility with old links
source: '/docs/usage',
destination: '/usage',
permanent: true,
},
{
// To reflect that these are at the top level of the sidebar
source: '/getting-started/:childId',
destination: '/:childId',
permanent: true,
},
{
// To reflect that these are at the top level of the sidebar
source: '/getting-started/:childId',
destination: '/:childId',
permanent: true,
},
{
// For reverse compatibility with old links
// (This is a page that we referred people to quite often)
source: '/gen/editor/Editor-class',
destination: '/gen/editor/Editor',
permanent: true,
},
{
// For reverse compatibility with old links
// (This is a page that we referred people to quite often)
source: '/gen/editor/ShapeUtil-class',
destination: '/gen/editor/ShapeUtil',
permanent: true,
},
]
},
}
module.exports = nextConfig

86
apps/docs/package.json Normal file
View file

@ -0,0 +1,86 @@
{
"name": "@tldraw/docs",
"description": "A docs site for tldraw.",
"version": "2.0.0-beta.2",
"private": true,
"packageManager": "yarn@3.5.0",
"author": {
"name": "tldraw Inc.",
"email": "hello@tldraw.com"
},
"homepage": "https://tldraw.dev",
"license": "SEE LICENSE IN LICENSE.md",
"repository": {
"type": "git",
"url": "https://github.com/tldraw/tldraw"
},
"bugs": {
"url": "https://github.com/tldraw/tldraw/issues"
},
"keywords": [
"tldraw",
"drawing",
"app",
"development",
"whiteboard",
"canvas",
"infinite"
],
"scripts": {
"dev": "concurrently \"NODE_ENV=development next dev --port=3001\" \"tsx ./watcher.ts\" --kill-others",
"next-dev": "next dev",
"lint": "yarn run -T tsx ../../scripts/lint.ts",
"build": "yarn create-api-markdown && yarn refresh-content && next build",
"start": "yarn create-api-markdown && yarn refresh-content && next start",
"fetch-api-source": "yarn run -T tsx --tsconfig ./tsconfig.content.json ./scripts/fetch-api-source.ts",
"fetch-releases": "yarn run -T tsx --tsconfig ./tsconfig.content.json ./scripts/fetch-releases.ts",
"check-links": "yarn run -T tsx --tsconfig ./tsconfig.content.json ./scripts/check-broken-links.ts",
"create-api-markdown": "yarn run -T tsx --tsconfig ./tsconfig.content.json ./scripts/create-api-markdown.ts",
"refresh-content": "yarn run -T tsx --tsconfig ./tsconfig.content.json ./scripts/refresh-content.ts",
"refresh-embeddings": "yarn run -T tsx --tsconfig ./tsconfig.content.json ./scripts/refresh-embeddings.ts",
"refresh-everything": "yarn fetch-api-source && yarn fetch-releases && yarn create-api-markdown && yarn refresh-content && yarn refresh-embeddings",
"clean": "rm -rf node_modules .yarn",
"watch-content": "tsx ./watcher.ts"
},
"dependencies": {
"@microsoft/api-extractor-model": "^7.26.4",
"@microsoft/tsdoc": "^0.14.2",
"@types/broken-link-checker": "^0.7.1",
"@types/node": "^18.7.3",
"@types/sqlite3": "^3.1.9",
"@types/ws": "^8.5.9",
"@vercel/analytics": "^1.1.1",
"broken-link-checker": "^0.7.8",
"concurrently": "^8.2.2",
"dotenv": "^16.3.1",
"eslint": "8.36.0",
"eslint-config-next": "13.2.4",
"github-slugger": "^2.0.0",
"gray-matter": "^4.0.3",
"next": "^14.0.4",
"next-mdx-remote": "^4.4.1",
"next-themes": "^0.2.1",
"octokit": "^3.1.1",
"openai": "^4.11.1",
"patch-package": "^8.0.0",
"postinstall-postinstall": "^2.1.0",
"prettier": "^3.0.3",
"prettier-plugin-organize-imports": "^3.2.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hotkeys-hook": "^4.4.1",
"rehype-autolink-headings": "^7.0.0",
"rehype-highlight": "^7.0.0",
"rehype-slug": "^5.1.0",
"rehype-slug-custom-id": "^1.1.0",
"rimraf": "^4.4.0",
"sqlite": "^5.0.1",
"sqlite3": "^5.1.6",
"tsx": "^4.0.0",
"typescript": "^5.2.2",
"unist-util-is": "^6.0.0",
"unist-util-visit": "^5.0.0",
"vectra": "^0.4.4",
"ws": "^8.14.2"
}
}

View file

@ -0,0 +1,11 @@
<svg width="152" height="152" viewBox="0 0 152 152" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1479_150769)">
<path d="M0 16.7033C0 7.47832 7.16344 0 16 0H136C144.837 0 152 7.47832 152 16.7033V135.297C152 144.522 144.837 152 136 152H16C7.16345 152 0 144.522 0 135.297V16.7033Z" fill="black"/>
<path d="M88.5463 43.4721C88.5463 47.1455 87.2907 50.2624 84.7797 52.8226C82.2686 55.3829 79.2116 56.663 75.6088 56.663C71.8968 56.663 68.7852 55.3829 66.2741 52.8226C63.7631 50.2624 62.5075 47.1455 62.5075 43.4721C62.5075 39.7987 63.7631 36.6819 66.2741 34.1216C68.7852 31.5614 71.8968 30.2812 75.6088 30.2812C79.2116 30.2812 82.2686 31.5614 84.7797 34.1216C87.2907 36.6819 88.5463 39.7987 88.5463 43.4721ZM62.3438 89.7004C62.3438 86.027 63.5993 82.9102 66.1104 80.3499C68.7306 77.6783 71.8968 76.3425 75.6088 76.3425C79.1025 76.3425 82.1594 77.6783 84.7797 80.3499C87.3999 82.9102 88.9284 85.8043 89.3651 89.0325C90.2385 95.0435 89.1468 100.999 86.0898 106.899C83.142 112.798 78.8841 117.307 73.3161 120.423C70.2591 122.204 67.748 122.149 65.7828 120.256C63.9268 118.475 64.4727 116.36 67.4205 113.911C69.0581 112.687 70.4229 111.129 71.5146 109.236C72.6064 107.344 73.3161 105.396 73.6436 103.392C73.7528 102.502 73.3706 102.056 72.4972 102.056C70.3137 101.945 68.0756 100.721 65.7828 98.383C63.4901 96.0454 62.3438 93.1512 62.3438 89.7004Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1479_150769">
<rect width="152" height="152" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -0,0 +1,11 @@
<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1479_150767)">
<path d="M0 19.7802C0 8.85591 8.48303 0 18.9474 0H161.053C171.517 0 180 8.85591 180 19.7802V160.22C180 171.144 171.517 180 161.053 180H18.9474C8.48303 180 0 171.144 0 160.22V19.7802Z" fill="black"/>
<path d="M104.857 51.4801C104.857 55.8302 103.371 59.5212 100.397 62.5531C97.4233 65.585 93.8032 67.1009 89.5367 67.1009C85.1409 67.1009 81.4562 65.585 78.4825 62.5531C75.5089 59.5212 74.0221 55.8302 74.0221 51.4801C74.0221 47.1301 75.5089 43.4391 78.4825 40.4072C81.4562 37.3753 85.1409 35.8594 89.5367 35.8594C93.8032 35.8594 97.4233 37.3753 100.397 40.4072C103.371 43.4391 104.857 47.1301 104.857 51.4801ZM73.8281 106.224C73.8281 101.874 75.3149 98.1831 78.2886 95.1512C81.3915 91.9875 85.1409 90.4056 89.5367 90.4056C93.674 90.4056 97.294 91.9875 100.397 95.1512C103.5 98.1831 105.31 101.61 105.827 105.433C106.861 112.552 105.569 119.604 101.948 126.59C98.4576 133.577 93.4154 138.916 86.8216 142.607C83.2016 144.716 80.2279 144.65 77.9007 142.409C75.7028 140.3 76.3493 137.795 79.8401 134.895C81.7794 133.445 83.3955 131.6 84.6884 129.359C85.9813 127.118 86.8217 124.811 87.2095 122.438C87.3388 121.384 86.8863 120.856 85.852 120.856C83.2662 120.724 80.6158 119.274 77.9007 116.506C75.1857 113.738 73.8281 110.311 73.8281 106.224Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1479_150767">
<rect width="180" height="180" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -0,0 +1,11 @@
<svg width="167" height="167" viewBox="0 0 167 167" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1479_150768)">
<path d="M0 18.3516C0 8.21631 7.87036 0 17.5789 0H149.421C159.13 0 167 8.21631 167 18.3516V148.648C167 158.784 159.13 167 149.421 167H17.579C7.87037 167 0 158.784 0 148.648V18.3516Z" fill="black"/>
<path d="M97.2844 47.7621C97.2844 51.7981 95.905 55.2225 93.1461 58.0354C90.3872 60.8483 87.0286 62.2547 83.0702 62.2547C78.9918 62.2547 75.5732 60.8483 72.8143 58.0354C70.0555 55.2225 68.676 51.7981 68.676 47.7621C68.676 43.7262 70.0555 40.3018 72.8143 37.4889C75.5732 34.676 78.9918 33.2695 83.0702 33.2695C87.0286 33.2695 90.3872 34.676 93.1461 37.4889C95.905 40.3018 97.2844 43.7262 97.2844 47.7621ZM68.4961 98.5524C68.4961 94.5165 69.8755 91.0921 72.6344 88.2792C75.5132 85.344 78.9918 83.8763 83.0702 83.8763C86.9086 83.8763 90.2673 85.344 93.1461 88.2792C96.0249 91.0921 97.7042 94.2719 98.184 97.8186C99.1436 104.423 97.9441 110.966 94.5855 117.448C91.3468 123.93 86.6687 128.883 80.5512 132.307C77.1926 134.264 74.4337 134.203 72.2746 132.124C70.2354 130.167 70.8351 127.843 74.0738 125.153C75.8731 123.807 77.3725 122.095 78.572 120.016C79.7715 117.937 80.5512 115.797 80.9111 113.595C81.031 112.617 80.6112 112.128 79.6516 112.128C77.2525 112.005 74.7935 110.66 72.2746 108.092C69.7556 105.524 68.4961 102.344 68.4961 98.5524Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1479_150768">
<rect width="167" height="167" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 270 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5 KiB

View file

@ -0,0 +1,11 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1479_150771)">
<path d="M0 1.75824C0 0.787192 0.754047 0 1.68421 0H14.3158C15.246 0 16 0.787192 16 1.75824V14.2418C16 15.2128 15.246 16 14.3158 16H1.68421C0.754047 16 0 15.2128 0 14.2418V1.75824Z" fill="black"/>
<path d="M9.32066 4.57601C9.32066 4.96269 9.1885 5.29078 8.92418 5.56028C8.65985 5.82978 8.33807 5.96453 7.95882 5.96453C7.56808 5.96453 7.24055 5.82978 6.97622 5.56028C6.7119 5.29078 6.57974 4.96269 6.57974 4.57601C6.57974 4.18934 6.7119 3.86125 6.97622 3.59175C7.24055 3.32225 7.56808 3.1875 7.95882 3.1875C8.33807 3.1875 8.65985 3.32225 8.92418 3.59175C9.1885 3.86125 9.32066 4.18934 9.32066 4.57601ZM6.5625 9.44215C6.5625 9.05547 6.69466 8.72738 6.95899 8.45788C7.2348 8.17667 7.56808 8.03606 7.95882 8.03606C8.32657 8.03606 8.64836 8.17667 8.92418 8.45788C9.19999 8.72738 9.36088 9.03204 9.40685 9.37184C9.49879 10.0046 9.38387 10.6315 9.06208 11.2525C8.75179 11.8735 8.30359 12.3481 7.71748 12.6762C7.39569 12.8636 7.13137 12.8578 6.92451 12.6586C6.72914 12.4711 6.7866 12.2485 7.09689 11.9907C7.26928 11.8618 7.41293 11.6977 7.52786 11.4986C7.64278 11.2994 7.71748 11.0943 7.75196 10.8834C7.76345 10.7896 7.72323 10.7428 7.63129 10.7428C7.40144 10.7311 7.16585 10.6022 6.92451 10.3561C6.68317 10.11 6.5625 9.80539 6.5625 9.44215Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1479_150771">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -0,0 +1,11 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1479_150770)">
<path d="M0 3.51648C0 1.57438 1.50809 0 3.36842 0H28.6316C30.4919 0 32 1.57438 32 3.51648V28.4835C32 30.4256 30.4919 32 28.6316 32H3.36842C1.50809 32 0 30.4256 0 28.4835V3.51648Z" fill="black"/>
<path d="M18.6413 9.15203C18.6413 9.92538 18.377 10.5816 17.8484 11.1206C17.3197 11.6596 16.6761 11.9291 15.9176 11.9291C15.1362 11.9291 14.4811 11.6596 13.9524 11.1206C13.4238 10.5816 13.1595 9.92538 13.1595 9.15203C13.1595 8.37868 13.4238 7.7225 13.9524 7.1835C14.4811 6.6445 15.1362 6.375 15.9176 6.375C16.6761 6.375 17.3197 6.6445 17.8484 7.1835C18.377 7.7225 18.6413 8.37868 18.6413 9.15203ZM13.125 18.8843C13.125 18.1109 13.3893 17.4548 13.918 16.9158C14.4696 16.3533 15.1362 16.0721 15.9176 16.0721C16.6531 16.0721 17.2967 16.3533 17.8484 16.9158C18.4 17.4548 18.7218 18.0641 18.8137 18.7437C18.9976 20.0092 18.7677 21.2629 18.1242 22.505C17.5036 23.747 16.6072 24.6961 15.435 25.3523C14.7914 25.7273 14.2627 25.7155 13.849 25.3172C13.4583 24.9422 13.5732 24.4969 14.1938 23.9814C14.5386 23.7236 14.8259 23.3955 15.0557 22.9971C15.2856 22.5987 15.435 22.1886 15.5039 21.7668C15.5269 21.5793 15.4465 21.4856 15.2626 21.4856C14.8029 21.4621 14.3317 21.2043 13.849 20.7122C13.3663 20.2201 13.125 19.6108 13.125 18.8843Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1479_150770">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.36842 0.5H28.6316C30.1957 0.5 31.5 1.83004 31.5 3.51648V28.4835C31.5 30.17 30.1957 31.5 28.6316 31.5H3.36842C1.80429 31.5 0.5 30.17 0.5 28.4835V3.51648C0.5 1.83004 1.80429 0.5 3.36842 0.5Z" fill="black"/>
<path d="M18.6413 9.15203C18.6413 9.92538 18.377 10.5816 17.8484 11.1206C17.3197 11.6596 16.6761 11.9291 15.9176 11.9291C15.1362 11.9291 14.4811 11.6596 13.9524 11.1206C13.4238 10.5816 13.1595 9.92538 13.1595 9.15203C13.1595 8.37868 13.4238 7.7225 13.9524 7.1835C14.4811 6.6445 15.1362 6.375 15.9176 6.375C16.6761 6.375 17.3197 6.6445 17.8484 7.1835C18.377 7.7225 18.6413 8.37868 18.6413 9.15203ZM13.125 18.8843C13.125 18.1109 13.3893 17.4548 13.918 16.9158C14.4696 16.3533 15.1362 16.0721 15.9176 16.0721C16.6531 16.0721 17.2967 16.3533 17.8484 16.9158C18.4 17.4548 18.7218 18.0641 18.8137 18.7437C18.9976 20.0092 18.7677 21.2629 18.1242 22.505C17.5036 23.747 16.6072 24.6961 15.435 25.3523C14.7914 25.7273 14.2627 25.7155 13.849 25.3172C13.4583 24.9422 13.5732 24.4969 14.1938 23.9814C14.5386 23.7236 14.8259 23.3955 15.0557 22.9971C15.2856 22.5987 15.435 22.1886 15.5039 21.7668C15.5269 21.5793 15.4465 21.4856 15.2626 21.4856C14.8029 21.4621 14.3317 21.2043 13.849 20.7122C13.3663 20.2201 13.125 19.6108 13.125 18.8843Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -0,0 +1,3 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z" fill="#2D2D2D"/>
</svg>

After

Width:  |  Height:  |  Size: 805 B

View file

@ -0,0 +1,3 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.14645 10.6464C1.95118 10.8417 1.95118 11.1583 2.14645 11.3536C2.34171 11.5488 2.65829 11.5488 2.85355 11.3536L6.85355 7.35355C7.04882 7.15829 7.04882 6.84171 6.85355 6.64645L2.85355 2.64645C2.65829 2.45118 2.34171 2.45118 2.14645 2.64645C1.95118 2.84171 1.95118 3.15829 2.14645 3.35355L5.79289 7L2.14645 10.6464ZM8.14645 10.6464C7.95118 10.8417 7.95118 11.1583 8.14645 11.3536C8.34171 11.5488 8.65829 11.5488 8.85355 11.3536L12.8536 7.35355C13.0488 7.15829 13.0488 6.84171 12.8536 6.64645L8.85355 2.64645C8.65829 2.45118 8.34171 2.45118 8.14645 2.64645C7.95118 2.84171 7.95118 3.15829 8.14645 3.35355L11.7929 7L8.14645 10.6464Z" fill="#2D2D2D"/>
</svg>

After

Width:  |  Height:  |  Size: 801 B

View file

@ -0,0 +1,3 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8536 9.85355C11.6583 10.0488 11.3417 10.0488 11.1464 9.85355L7.5 6.20711L3.85355 9.85355C3.65829 10.0488 3.34171 10.0488 3.14645 9.85355C2.95118 9.65829 2.95118 9.34171 3.14645 9.14645L7.14645 5.14645C7.34171 4.95118 7.65829 4.95118 7.85355 5.14645L11.8536 9.14645C12.0488 9.34171 12.0488 9.65829 11.8536 9.85355Z" fill="#2D2D2D"/>
</svg>

After

Width:  |  Height:  |  Size: 488 B

View file

@ -0,0 +1,3 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z" fill="#2D2D2D"/>
</svg>

After

Width:  |  Height:  |  Size: 684 B

View file

@ -0,0 +1,12 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1463_121087)">
<path d="M4.08049 7.01221C4.32412 6.74984 4.65476 6.60162 5.00007 6.59998C5.34538 6.60162 5.67603 6.74984 5.91966 7.01221C6.16329 7.27459 6.30007 7.62974 6.30007 7.99998C6.30007 8.37021 6.16329 8.72536 5.91966 8.98774C5.67603 9.25011 5.34538 9.39833 5.00007 9.39998C4.65476 9.39833 4.32412 9.25011 4.08049 8.98774C3.83685 8.72536 3.70007 8.37021 3.70007 7.99998C3.70007 7.62974 3.83685 7.27459 4.08049 7.01221Z" fill="#2D2D2D"/>
<path d="M9.07926 7.01221C9.3229 6.74984 9.65354 6.60162 9.99885 6.59998C10.3442 6.60162 10.6748 6.74984 10.9184 7.01221C11.1621 7.27459 11.2989 7.62974 11.2989 7.99998C11.2989 8.37021 11.1621 8.72536 10.9184 8.98774C10.6748 9.25011 10.3442 9.39833 9.99885 9.39998C9.65354 9.39833 9.3229 9.25011 9.07926 8.98774C8.83563 8.72536 8.69885 8.37021 8.69885 7.99998C8.69885 7.62974 8.83563 7.27459 9.07926 7.01221Z" fill="#2D2D2D"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.94586 1.80299C4.98973 1.79821 5.03403 1.79926 5.07761 1.80611C5.28859 1.83926 5.46936 1.94778 5.60153 2.04762C5.7413 2.15321 5.87082 2.28296 5.98238 2.41388C6.14069 2.59967 6.29436 2.8255 6.39564 3.04143C6.73494 3.01472 7.10264 3.00003 7.5 3.00003C7.89645 3.00003 8.26336 3.01465 8.602 3.04125C8.70328 2.82537 8.85692 2.59961 9.01518 2.41388C9.12674 2.28296 9.25626 2.15321 9.39603 2.04762C9.5282 1.94778 9.70897 1.83926 9.91994 1.80611C9.96353 1.79926 10.0078 1.79821 10.0517 1.80299C10.8961 1.89496 12.1787 2.34982 12.9359 2.76053C12.9881 2.78883 13.0348 2.8262 13.0739 2.87088C13.39 3.23226 13.6756 3.82072 13.899 4.37441C14.129 4.94414 14.3194 5.54458 14.428 5.97872C14.7812 7.39064 14.975 9.08579 15.0001 10.6923C15.0014 10.776 14.9816 10.8587 14.9427 10.9328C14.639 11.5102 13.9887 12.0436 13.3398 12.4324C12.6832 12.8258 11.9163 13.1378 11.2956 13.1977C11.1399 13.2128 10.9861 13.154 10.88 13.039C10.7243 12.8702 10.4611 12.478 10.2634 12.1753C10.1767 12.0426 10.0954 11.9158 10.0297 11.8126C9.3688 11.9317 8.54207 12.0002 7.50002 12.0002C6.45681 12.0002 5.62939 11.9315 4.96812 11.8122C4.90241 11.9155 4.82098 12.0425 4.73419 12.1753C4.53643 12.478 4.2733 12.8702 4.11752 13.039C4.01144 13.154 3.85765 13.2128 3.70193 13.1977C3.08127 13.1378 2.31435 12.8258 1.65781 12.4324C1.00888 12.0436 0.358561 11.5102 0.0548912 10.9328C0.0159279 10.8587 -0.00380681 10.776 -0.00250281 10.6923C0.0225233 9.08579 0.216388 7.39064 0.569535 5.97872C0.678122 5.54458 0.868566 4.94414 1.09852 4.37441C1.32199 3.82072 1.60757 3.23226 1.92364 2.87088C1.96272 2.8262 2.00944 2.78883 2.06162 2.76053C2.81887 2.34982 4.10147 1.89496 4.94586 1.80299ZM3.94943 11.5479C3.93225 11.5743 3.91476 11.6012 3.89705 11.6283C3.76696 11.8274 3.63866 12.0178 3.53827 12.1584C3.14641 12.0683 2.64965 11.8609 2.17176 11.5746C1.63205 11.2512 1.20654 10.881 0.99999 10.5682C1.03284 9.06493 1.21857 7.50509 1.53965 6.22136C1.63669 5.8334 1.81264 5.2769 2.02583 4.74869C2.22582 4.25319 2.43795 3.83541 2.62267 3.59495C3.26952 3.2605 4.28449 2.90752 4.94803 2.81071C4.96112 2.81866 4.97802 2.82988 4.99875 2.84554C5.06541 2.89589 5.14282 2.97044 5.22123 3.06246C5.25511 3.10222 5.28654 3.14206 5.31532 3.18102C5.02277 3.2357 4.76083 3.30049 4.52795 3.37214C3.84282 3.58295 3.34501 3.87336 3.1 4.20003C2.93431 4.42094 2.97909 4.73434 3.2 4.90003C3.42091 5.06572 3.73431 5.02094 3.9 4.80003C3.95499 4.7267 4.20717 4.51711 4.82204 4.32792C5.41424 4.1457 6.28795 4.00003 7.5 4.00003C8.71205 4.00003 9.58576 4.1457 10.178 4.32792C10.7928 4.51711 11.045 4.7267 11.1 4.80003C11.2657 5.02094 11.5791 5.06572 11.8 4.90003C12.0209 4.73434 12.0657 4.42094 11.9 4.20003C11.655 3.87336 11.1572 3.58295 10.472 3.37214C10.2386 3.30031 9.97595 3.23538 9.68254 3.18062C9.71124 3.14179 9.74257 3.10208 9.77633 3.06246C9.85474 2.97044 9.93215 2.89589 9.9988 2.84554C10.0195 2.82988 10.0364 2.81866 10.0495 2.81071C10.7131 2.90752 11.728 3.2605 12.3749 3.59495C12.5596 3.83541 12.7717 4.25319 12.9717 4.74869C13.1849 5.2769 13.3609 5.8334 13.4579 6.22136C13.779 7.50509 13.9647 9.06493 13.9976 10.5682C13.791 10.881 13.3655 11.2512 12.8258 11.5746C12.3479 11.8609 11.8511 12.0683 11.4593 12.1584C11.3589 12.0178 11.2306 11.8274 11.1005 11.6283C11.083 11.6014 11.0656 11.5748 11.0486 11.5486C11.8226 11.2697 12.2427 10.8875 12.5161 10.4775C12.6692 10.2477 12.6071 9.93731 12.3774 9.78413C12.1476 9.63095 11.8372 9.69304 11.684 9.9228C11.4284 10.3062 10.7547 11.0002 7.50002 11.0002C4.24536 11.0002 3.57163 10.3062 3.31605 9.92281C3.16288 9.69304 2.85244 9.63095 2.62268 9.78412C2.39291 9.9373 2.33082 10.2477 2.484 10.4775C2.7571 10.8872 3.17667 11.269 3.94943 11.5479Z" fill="#2D2D2D"/>
</g>
<defs>
<clipPath id="clip0_1463_121087">
<rect width="15" height="15" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 4.7 KiB

View file

@ -0,0 +1,10 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_30_29)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C1.791 0 0 1.791 0 4V20C0 22.209 1.791 24 4 24H20C22.209 24 24 22.209 24 20V4C24 1.791 22.209 0 20 0H4ZM14.3989 5.5C15.6119 5.707 16.7929 6.074 17.9119 6.592C19.8369 9.426 20.7899 12.633 20.4219 16.325C19.1179 17.292 17.6619 18.028 16.1169 18.5C15.7729 18.032 15.4639 17.529 15.1969 17.001C15.7009 16.811 16.1869 16.576 16.6489 16.299C16.567 16.2396 16.4893 16.1765 16.4097 16.1119C16.3727 16.0818 16.3353 16.0515 16.2969 16.021C13.5309 17.313 10.4969 17.313 7.69694 16.021C7.58494 16.117 7.46394 16.212 7.34394 16.299C7.80694 16.576 8.29294 16.811 8.79594 17.001C8.53094 17.526 8.22394 18.027 7.87694 18.5C6.47594 18.067 5.04994 17.408 3.57194 16.325C3.27194 13.135 3.87194 9.903 6.09794 6.592C7.21694 6.071 8.39894 5.704 9.61294 5.5C9.75894 5.769 9.93894 6.133 10.0589 6.419C11.3499 6.228 12.6609 6.228 13.9509 6.419C14.0719 6.133 14.2429 5.769 14.3989 5.5ZM7.65294 12.641C7.65294 13.586 8.34094 14.357 9.18294 14.357C10.0339 14.357 10.7119 13.586 10.7119 12.641C10.7289 11.697 10.0329 10.925 9.18294 10.925C8.32394 10.925 7.65294 11.697 7.65294 12.641ZM13.2979 12.641C13.2979 13.586 13.9859 14.357 14.8279 14.357C15.6869 14.357 16.3569 13.586 16.3569 12.641C16.3749 11.697 15.6779 10.925 14.8279 10.925C13.9689 10.925 13.2979 11.697 13.2979 12.641Z" fill="#222222"/>
</g>
<defs>
<clipPath id="clip0_30_29">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -0,0 +1,3 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z" fill="#2D2D2D"/>
</svg>

After

Width:  |  Height:  |  Size: 805 B

View file

@ -0,0 +1,3 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.14645 10.6464C1.95118 10.8417 1.95118 11.1583 2.14645 11.3536C2.34171 11.5488 2.65829 11.5488 2.85355 11.3536L6.85355 7.35355C7.04882 7.15829 7.04882 6.84171 6.85355 6.64645L2.85355 2.64645C2.65829 2.45118 2.34171 2.45118 2.14645 2.64645C1.95118 2.84171 1.95118 3.15829 2.14645 3.35355L5.79289 7L2.14645 10.6464ZM8.14645 10.6464C7.95118 10.8417 7.95118 11.1583 8.14645 11.3536C8.34171 11.5488 8.65829 11.5488 8.85355 11.3536L12.8536 7.35355C13.0488 7.15829 13.0488 6.84171 12.8536 6.64645L8.85355 2.64645C8.65829 2.45118 8.34171 2.45118 8.14645 2.64645C7.95118 2.84171 7.95118 3.15829 8.14645 3.35355L11.7929 7L8.14645 10.6464Z" fill="#2D2D2D"/>
</svg>

After

Width:  |  Height:  |  Size: 801 B

View file

@ -0,0 +1,3 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1464 1.14645C11.3417 0.951184 11.6583 0.951184 11.8535 1.14645L13.8535 3.14645C14.0488 3.34171 14.0488 3.65829 13.8535 3.85355L9.91091 7.79618C9.83491 7.87218 9.74715 7.93543 9.65101 7.9835L5.72359 9.94721C5.53109 10.0435 5.29861 10.0057 5.14643 9.85355C4.99425 9.70137 4.95652 9.46889 5.05277 9.27639L7.01648 5.34897C7.06455 5.25283 7.1278 5.16507 7.2038 5.08907L11.1464 1.14645ZM11.5 2.20711L7.91091 5.79618L6.87266 7.87267L7.12731 8.12732L9.2038 7.08907L12.7929 3.5L11.5 2.20711ZM8.99998 2L7.99998 3H3.9C3.47171 3 3.18056 3.00039 2.95552 3.01877C2.73631 3.03668 2.62421 3.06915 2.54601 3.10899C2.35785 3.20487 2.20487 3.35785 2.10899 3.54601C2.06915 3.62421 2.03669 3.73631 2.01878 3.95552C2.00039 4.18056 2 4.47171 2 4.9V11.1C2 11.5283 2.00039 11.8194 2.01878 12.0445C2.03669 12.2637 2.06915 12.3758 2.10899 12.454C2.20487 12.6422 2.35785 12.7951 2.54601 12.891C2.62421 12.9309 2.73631 12.9633 2.95552 12.9812C3.18056 12.9996 3.47171 13 3.9 13H10.1C10.5283 13 10.8194 12.9996 11.0445 12.9812C11.2637 12.9633 11.3758 12.9309 11.454 12.891C11.6422 12.7951 11.7951 12.6422 11.891 12.454C11.9309 12.3758 11.9633 12.2637 11.9812 12.0445C11.9996 11.8194 12 11.5283 12 11.1V6.99998L13 5.99998V11.1V11.1207C13 11.5231 13 11.8553 12.9779 12.1259C12.9549 12.407 12.9057 12.6653 12.782 12.908C12.5903 13.2843 12.2843 13.5903 11.908 13.782C11.6653 13.9057 11.407 13.9549 11.1259 13.9779C10.8553 14 10.5231 14 10.1207 14H10.1H3.9H3.87934C3.47686 14 3.14468 14 2.87409 13.9779C2.59304 13.9549 2.33469 13.9057 2.09202 13.782C1.7157 13.5903 1.40973 13.2843 1.21799 12.908C1.09434 12.6653 1.04506 12.407 1.0221 12.1259C0.99999 11.8553 0.999995 11.5231 1 11.1207V11.1206V11.1V4.9V4.87935V4.87932V4.87931C0.999995 4.47685 0.99999 4.14468 1.0221 3.87409C1.04506 3.59304 1.09434 3.33469 1.21799 3.09202C1.40973 2.71569 1.7157 2.40973 2.09202 2.21799C2.33469 2.09434 2.59304 2.04506 2.87409 2.0221C3.14468 1.99999 3.47685 1.99999 3.87932 2H3.87935H3.9H8.99998Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View file

@ -0,0 +1,3 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.49933 0.249978C3.49635 0.249978 0.25 3.49591 0.25 7.50022C0.25 10.703 2.32715 13.4206 5.2081 14.3797C5.57084 14.446 5.70302 14.2221 5.70302 14.0299C5.70302 13.8576 5.69679 13.4019 5.69323 12.797C3.67661 13.235 3.25112 11.825 3.25112 11.825C2.92132 10.9874 2.44599 10.7644 2.44599 10.7644C1.78773 10.3148 2.49584 10.3238 2.49584 10.3238C3.22353 10.3749 3.60629 11.071 3.60629 11.071C4.25298 12.1788 5.30335 11.8588 5.71638 11.6732C5.78225 11.205 5.96962 10.8854 6.17658 10.7043C4.56675 10.5209 2.87415 9.89915 2.87415 7.12102C2.87415 6.32923 3.15677 5.68254 3.62053 5.17561C3.54576 4.99224 3.29697 4.25518 3.69174 3.25689C3.69174 3.25689 4.30015 3.06194 5.68522 3.99971C6.26337 3.83904 6.8838 3.75893 7.50022 3.75581C8.1162 3.75893 8.73619 3.83904 9.31523 3.99971C10.6994 3.06194 11.3069 3.25689 11.3069 3.25689C11.7026 4.25518 11.4538 4.99224 11.3795 5.17561C11.8441 5.68254 12.1245 6.32923 12.1245 7.12102C12.1245 9.90628 10.4292 10.5191 8.81452 10.6985C9.07444 10.9224 9.30633 11.3648 9.30633 12.0413C9.30633 13.0102 9.29742 13.7922 9.29742 14.0299C9.29742 14.2239 9.42828 14.4496 9.79591 14.3788C12.6746 13.4179 14.75 10.7025 14.75 7.50022C14.75 3.49591 11.5036 0.249978 7.49933 0.249978" fill="#2D2D2D"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -0,0 +1,10 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_30_27)">
<path d="M4 0C1.791 0 0 1.791 0 4V20C0 22.209 1.791 24 4 24H8.2C8.797 24.122 9.027 23.712 9.027 23.387C9.027 23.101 9.007 22.123 9.007 21.105C5.667 21.838 4.971 19.638 4.971 19.638C4.434 18.212 3.639 17.845 3.639 17.845C2.545 17.092 3.719 17.092 3.719 17.092C4.931 17.173 5.568 18.355 5.568 18.355C6.641 20.228 8.371 19.699 9.068 19.373C9.166 18.578 9.485 18.028 9.823 17.723C7.158 17.438 4.355 16.378 4.355 11.653C4.355 10.308 4.832 9.208 5.587 8.353C5.468 8.047 5.05 6.783 5.707 5.093C5.707 5.093 6.721 4.767 9.007 6.356C9.987 6.086 10.996 5.949 12.01 5.948C13.024 5.948 14.058 6.091 15.012 6.356C17.299 4.766 18.313 5.093 18.313 5.093C18.97 6.783 18.552 8.047 18.433 8.353C19.208 9.208 19.665 10.308 19.665 11.653C19.665 16.378 16.862 17.417 14.177 17.723C14.615 18.11 14.992 18.843 14.992 20.005C14.992 21.655 14.972 22.979 14.972 23.386C14.972 23.712 15.204 24.122 15.8 24H20C22.209 24 24 22.209 24 20V4C24 1.791 22.209 0 20 0H4Z" fill="#222222"/>
</g>
<defs>
<clipPath id="clip0_30_27">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View file

@ -0,0 +1,10 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1464_121177)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z" fill="#2D2D2D"/>
</g>
<defs>
<clipPath id="clip0_1464_121177">
<rect width="15" height="15" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2 KiB

View file

@ -0,0 +1,3 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z" fill="#2D2D2D"/>
</svg>

After

Width:  |  Height:  |  Size: 552 B

View file

@ -0,0 +1,3 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 6.5C10 8.433 8.433 10 6.5 10C4.567 10 3 8.433 3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5ZM9.30884 10.0159C8.53901 10.6318 7.56251 11 6.5 11C4.01472 11 2 8.98528 2 6.5C2 4.01472 4.01472 2 6.5 2C8.98528 2 11 4.01472 11 6.5C11 7.56251 10.6318 8.53901 10.0159 9.30884L12.8536 12.1464C13.0488 12.3417 13.0488 12.6583 12.8536 12.8536C12.6583 13.0488 12.3417 13.0488 12.1464 12.8536L9.30884 10.0159Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 574 B

View file

@ -0,0 +1,4 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.23347 4.69633C7.23347 2.96887 8.63346 1.5686 10.3601 1.5686C12.3031 1.5686 13.4957 3.33048 13.4957 5.00083C13.4957 8.68713 10.6874 12.9746 5.52134 12.9746C3.93917 12.9746 2.46555 12.5111 1.22516 11.7152C1.02917 11.5895 0.945933 11.3451 1.02444 11.1258C1.10294 10.9066 1.3224 10.7706 1.55367 10.7978C1.74004 10.8198 1.92971 10.831 2.12221 10.831C2.82595 10.831 3.49398 10.6795 4.09587 10.4071C3.31987 10.0395 2.71968 9.36178 2.45469 8.53509C2.40426 8.37777 2.43497 8.20646 2.53511 8.07684C1.90532 7.50479 1.51 6.67941 1.51 5.76151V5.72768C1.51 5.55051 1.60376 5.38656 1.75646 5.29673C1.78736 5.27855 1.81973 5.26396 1.85301 5.25295C1.64719 4.83575 1.53143 4.366 1.53143 3.86966C1.53143 3.29809 1.68595 2.76085 1.95411 2.29827C2.03647 2.1562 2.18333 2.06363 2.34703 2.05061C2.51073 2.03759 2.67039 2.10578 2.77417 2.23305C3.86547 3.57129 5.44077 4.49586 7.23377 4.73964C7.23357 4.72523 7.23347 4.71079 7.23347 4.69633ZM2.63816 6.49033C2.88893 7.17798 3.48434 7.70032 4.21566 7.84714C4.44315 7.8928 4.60933 8.08897 4.61698 8.32087C4.62463 8.55276 4.47175 8.75946 4.24777 8.82002C4.09338 8.86177 3.93479 8.89191 3.77291 8.90972C4.15542 9.38625 4.73894 9.6946 5.3937 9.70616C5.60531 9.7099 5.79165 9.84646 5.85893 10.0471C5.92622 10.2478 5.85988 10.4691 5.69329 10.5996C5.05138 11.1027 4.3004 11.4734 3.48222 11.6703C4.12699 11.8681 4.81144 11.9746 5.52134 11.9746C10.0203 11.9746 12.4957 8.25712 12.4957 5.00083C12.4957 3.71212 11.5944 2.5686 10.3601 2.5686C9.18603 2.5686 8.23347 3.52088 8.23347 4.69633C8.23347 4.86287 8.25266 5.0252 8.28862 5.18287C8.32343 5.33551 8.28474 5.49565 8.18406 5.61556C8.08339 5.73546 7.93236 5.80129 7.776 5.79342C5.74502 5.69116 3.91635 4.83008 2.5654 3.48932C2.54308 3.61278 2.53143 3.73987 2.53143 3.86966C2.53143 4.60737 2.90661 5.25897 3.47769 5.64076C3.66328 5.76483 3.74413 5.9969 3.67582 6.20943C3.6075 6.42196 3.40657 6.56346 3.18345 6.55616C2.99723 6.55006 2.81498 6.52765 2.63816 6.49033Z" fill="#2D2D2D"/>
<path d="M13.1965 3.56882C13.7282 3.5051 14.234 3.36413 14.7049 3.15549L14.7038 3.15718C14.3525 3.68329 13.907 4.14511 13.3939 4.51615L12.6833 2.75231C13.2816 2.63502 13.8438 2.41623 14.3513 2.11511C14.1551 2.72862 13.7389 3.24402 13.1965 3.56882Z" fill="#2D2D2D"/>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View file

@ -0,0 +1,10 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_30_32)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C1.791 0 0 1.791 0 4V20C0 22.209 1.791 24 4 24H20C22.209 24 24 22.209 24 20V4C24 1.791 22.209 0 20 0H4ZM18.865 9.662C18.865 13.997 15.562 19 9.52 19C7.667 19 5.937 18.455 4.5 17.516C4.759 17.55 5.018 17.564 5.283 17.564C6.823 17.564 8.239 17.04 9.363 16.162C7.926 16.135 6.714 15.188 6.298 13.882C6.503 13.923 6.707 13.943 6.918 13.943C7.218 13.943 7.511 13.902 7.783 13.827C6.278 13.521 5.147 12.201 5.147 10.608V10.567C5.59 10.812 6.094 10.962 6.632 10.975C5.746 10.39 5.168 9.383 5.168 8.246C5.168 7.647 5.331 7.082 5.61 6.599C7.231 8.586 9.649 9.893 12.381 10.029C12.319 9.791 12.292 9.539 12.292 9.281C12.292 7.47 13.764 6 15.575 6C16.522 6 17.374 6.395 17.973 7.035C18.722 6.885 19.424 6.613 20.057 6.238C19.812 7.007 19.294 7.647 18.613 8.055C19.281 7.974 19.914 7.797 20.5 7.538C20.057 8.198 19.499 8.777 18.858 9.24C18.865 9.376 18.865 9.519 18.865 9.662Z" fill="#222222"/>
</g>
<defs>
<clipPath id="clip0_30_32">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 153 KiB

Some files were not shown because too many files have changed in this diff Show more