PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

tldraw_final_v6_final(old version).docx.pdf (#2998)

Browse source 
Rename `@tldraw/tldraw` to just `tldraw`! `@tldraw/tldraw` still exists
as an alias to `tldraw` for folks who are still using that.

### Test Plan

- [x] Unit Tests
- [ ] End to end tests

### Release Notes

- The `@tldraw/tldraw` package has been renamed to `tldraw`. You can
keep using the old version if you want though!
This commit is contained in:
alex 2024-02-29 16:06:19 +00:00 committed by GitHub
parent ae531da193
commit a0628f9cb2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
206 changed files with 1602 additions and 1263 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintrc.js
View file

@ -46,7 +46,7 @@ module.exports = {
'react-hooks/rules-of-hooks': 'error', 'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'error', 'react-hooks/exhaustive-deps': 'error',
'import/no-extraneous-dependencies': 'error', 'import/no-extraneous-dependencies': 'error',
'import/no-internal-modules': ['error', { forbid: ['@tldraw/*/**'] }], 'import/no-internal-modules': ['error', { forbid: ['@tldraw/*/**', 'tldraw/**'] }],
'@typescript-eslint/consistent-type-exports': [ '@typescript-eslint/consistent-type-exports': [
'error', 'error',
{ fixMixedExportsWithInlineTypeSpecifier: true }, { fixMixedExportsWithInlineTypeSpecifier: true },

8
.github/workflows/publish-templates.yml vendored
View file

@ -29,9 +29,9 @@ jobs:
- name: Substitute the latest published version of tldraw - name: Substitute the latest published version of tldraw
run: | run: |
export TEMPLATE=vite NPM_TAG=latest && \ export TEMPLATE=vite NPM_TAG=latest && \
npm view @tldraw/tldraw dist-tags --json | jq -r ".$NPM_TAG" > /tmp/latest_tldraw && \ npm view tldraw dist-tags --json | jq -r ".$NPM_TAG" > /tmp/latest_tldraw && \
cp "templates/$TEMPLATE/package.json" /tmp/template_package.json && \ cp "templates/$TEMPLATE/package.json" /tmp/template_package.json && \
jq --tab --arg latest_tldraw "$(< /tmp/latest_tldraw)" '.dependencies."@tldraw/tldraw" |= $latest_tldraw' /tmp/template_package.json > "templates/$TEMPLATE/package.json" jq --tab --arg latest_tldraw "$(< /tmp/latest_tldraw)" '.dependencies."tldraw" |= $latest_tldraw' /tmp/template_package.json > "templates/$TEMPLATE/package.json"
- name: Push vite template to tldraw/vite-template - name: Push vite template to tldraw/vite-template
uses: cpina/github-action-push-to-another-repository@07c4d7b3def0a8ebe788a8f2c843a4e1de4f6900 # v1.7.2 uses: cpina/github-action-push-to-another-repository@07c4d7b3def0a8ebe788a8f2c843a4e1de4f6900 # v1.7.2
@ -56,9 +56,9 @@ jobs:
- name: Substitute the latest published version of tldraw - name: Substitute the latest published version of tldraw
run: | run: |
export TEMPLATE=nextjs NPM_TAG=latest && \ export TEMPLATE=nextjs NPM_TAG=latest && \
npm view @tldraw/tldraw dist-tags --json | jq -r ".$NPM_TAG" > /tmp/latest_tldraw && \ npm view tldraw dist-tags --json | jq -r ".$NPM_TAG" > /tmp/latest_tldraw && \
cp "templates/$TEMPLATE/package.json" /tmp/template_package.json && \ cp "templates/$TEMPLATE/package.json" /tmp/template_package.json && \
jq --tab --arg latest_tldraw "$(< /tmp/latest_tldraw)" '.dependencies."@tldraw/tldraw" |= $latest_tldraw' /tmp/template_package.json > "templates/$TEMPLATE/package.json" jq --tab --arg latest_tldraw "$(< /tmp/latest_tldraw)" '.dependencies."tldraw" |= $latest_tldraw' /tmp/template_package.json > "templates/$TEMPLATE/package.json"
- name: Push next.js template to tldraw/nextjs-template - name: Push next.js template to tldraw/nextjs-template
uses: cpina/github-action-push-to-another-repository@07c4d7b3def0a8ebe788a8f2c843a4e1de4f6900 # v1.7.2 uses: cpina/github-action-push-to-another-repository@07c4d7b3def0a8ebe788a8f2c843a4e1de4f6900 # v1.7.2

2
apps/docs/components/ExampleCodeBlock.tsx
View file

@ -35,7 +35,7 @@ export default function ExampleCodeBlock({
customSetup={{ customSetup={{
dependencies: { dependencies: {
'@tldraw/assets': 'latest', '@tldraw/assets': 'latest',
'@tldraw/tldraw': 'latest', tldraw: 'latest',
}, },
}} }}
files={{ files={{

2
apps/docs/components/mdx-components/code.tsx
View file

@ -36,7 +36,7 @@ export function CodeBlock({ code }: { code: SandpackFiles }) {
customSetup={{ customSetup={{
dependencies: { dependencies: {
'@tldraw/assets': 'latest', '@tldraw/assets': 'latest',
'@tldraw/tldraw': 'latest', tldraw: 'latest',
}, },
}} }}
files={trimmedCode} files={trimmedCode}

2
apps/docs/content/docs/collaboration.mdx
View file

@ -6,4 +6,4 @@ date: 3/22/2023
order: 8 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. See the [tldraw-yjs example](https://github.com/tldraw/tldraw-yjs-example) for an example of how to use yjs with the `tldraw` library.

6
apps/docs/content/docs/editor.mdx
View file

@ -29,7 +29,7 @@ The editor also exposes many _computed_ values which are derived from other reco
You can use these properties directly or you can use them in signals. You can use these properties directly or you can use them in signals.
```tsx ```tsx
import { track, useEditor } from '@tldraw/tldraw' import { track, useEditor } from 'tldraw'
export const SelectedShapeIdsCount = track(() => { export const SelectedShapeIdsCount = track(() => {
const editor = useEditor() const editor = useEditor()
@ -159,7 +159,7 @@ Note that the paths you pass to [Editor#isIn](?) or [Editor#isInAny](?) can be t
> 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. > 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 ```tsx
import { track, useEditor } from '@tldraw/tldraw' import { track, useEditor } from 'tldraw'
export const BubbleToolUi = track(() => { export const BubbleToolUi = track(() => {
const editor = useEditor() const editor = useEditor()
@ -193,7 +193,7 @@ The editor's user preferences are shared between all instances. See the [TLUserP
To create an id for a shape (a [TLShapeId](?)), use the libary's [createShapeId](?) helper. To create an id for a shape (a [TLShapeId](?)), use the libary's [createShapeId](?) helper.
```ts ```ts
import { createShapeId } from '@tldraw/tldraw' import { createShapeId } from 'tldraw'
createShapeId() // `shape:some-random-uuid` createShapeId() // `shape:some-random-uuid`
createShapeId('kyle') // `shape:kyle` createShapeId('kyle') // `shape:kyle`

8
apps/docs/content/docs/persistence.mdx
View file

@ -20,8 +20,8 @@ Persistence in tldraw means storing information about the editor's state to a da
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. 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 ```tsx
import { Tldraw } from '@tldraw/tldraw' import { Tldraw } from 'tldraw'
import '@tldraw/tldraw/tldraw.css' import 'tldraw/tldraw.css'
export default function () { export default function () {
return ( return (
@ -35,8 +35,8 @@ export default function () {
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. 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 ```tsx
import { Tldraw } from '@tldraw/tldraw' import { Tldraw } from 'tldraw'
import '@tldraw/tldraw/tldraw.css' import 'tldraw/tldraw.css'
export default function () { export default function () {
return ( return (

6
apps/docs/content/docs/shapes.mdx
View file

@ -25,7 +25,7 @@ The editor's core shapes are shapes that are built in and always present. At the
### Default shapes ### 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](?). 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` library as [defaultShapeUtils](?).
### Custom shapes ### Custom shapes
@ -96,7 +96,7 @@ You can create your own custom shapes. In the examples below, we will create a c
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. 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 ```ts
import { TLBaseShape } from '@tldraw/tldraw' import { TLBaseShape } from 'tldraw'
type CardShape = TLBaseShape<'card', { w: number; h: number }> type CardShape = TLBaseShape<'card', { w: number; h: number }>
``` ```
@ -112,7 +112,7 @@ While tldraw's shapes themselves are simple JSON objects, we use [ShapeUtil](?)
Let's create a [ShapeUtil](?) class for the shape. Let's create a [ShapeUtil](?) class for the shape.
```tsx ```tsx
import { HTMLContainer, ShapeUtil } from '@tldraw/tldraw' import { HTMLContainer, ShapeUtil } from 'tldraw'
class CardShapeUtil extends ShapeUtil<CardShape> { class CardShapeUtil extends ShapeUtil<CardShape> {
static override type = 'card' as const static override type = 'card' as const

26
apps/docs/content/getting-started/installation.mdx
View file

@ -6,27 +6,27 @@ date: 3/22/2023
order: 1 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). At the moment the `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 ## Beta
First, install the `@tldraw/tldraw` package using `@beta` for the latest beta release. First, install the `tldraw` package using `@beta` for the latest beta release.
<CodeBlock code={{'yarn': 'yarn add @tldraw/tldraw@beta', 'npm': 'npm install @tldraw/tldraw@beta', 'pnpm': 'pnpm add @tldraw/tldraw@beta'}} /> <CodeBlock code={{'yarn': 'yarn add tldraw@beta', 'npm': 'npm install tldraw@beta', 'pnpm': 'pnpm add tldraw@beta'}} />
## Canary ## 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). To get the very latest version, use the [latest canary release](https://www.npmjs.com/package/tldraw?activeTab=versions). Docs for the very latest version are also available at [canary.tldraw.dev](https://canary.tldraw.dev).
<CodeBlock code={{'yarn': 'yarn add @tldraw/tldraw@canary', 'npm': 'npm install @tldraw/tldraw@canary', 'pnpm': 'pnpm add @tldraw/tldraw@canary'}} /> <CodeBlock code={{'yarn': 'yarn add tldraw@canary', 'npm': 'npm install tldraw@canary', 'pnpm': 'pnpm add tldraw@canary'}} />
## Usage ## Usage
You can use the [Tldraw](?) component inside of any React component. You can use the [Tldraw](?) component inside of any React component.
```tsx ```tsx
import { Tldraw } from '@tldraw/tldraw' import { Tldraw } from 'tldraw'
import '@tldraw/tldraw/tldraw.css' import 'tldraw/tldraw.css'
export default function () { export default function () {
return ( return (
@ -43,16 +43,16 @@ It's important that the [Tldraw](?) component is wrapped in a parent container t
### CSS ### CSS
In addition to the [Tldraw](?) component itself, you should also import the `tldraw.css` file from the `@tldraw/tldraw` package. In addition to the [Tldraw](?) component itself, you should also import the `tldraw.css` file from the `tldraw` package.
```tsx ```tsx
import '@tldraw/tldraw/tldraw.css' import 'tldraw/tldraw.css'
``` ```
You can alternatively import this file inside of another CSS file using the `@import` syntax. You can alternatively import this file inside of another CSS file using the `@import` syntax.
```css ```css
@import url('@tldraw/tldraw/tldraw.css'); @import url('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. 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.
@ -80,15 +80,15 @@ This may not be critical to [Tldraw](?) performing correctly, however some featu
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. 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 ```tsx
const Tldraw = dynamic(async () => (await import('@tldraw/tldraw')).Tldraw, { ssr: false }) const Tldraw = dynamic(async () => (await import('tldraw')).Tldraw, { ssr: false })
``` ```
### Using a bundler ### 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: If you're using a bundler like webpack or rollup, you can import the assets directly from the `assets` package. Here you can use `getAssetUrlsByMetaUrl` helper function:
```tsx ```tsx
import { getAssetUrlsByMetaUrl } from '@tldraw/assets/urls' import { getAssetUrlsByMetaUrl } from 'assets/urls'
const assetUrls = getAssetUrlsByMetaUrl() const assetUrls = getAssetUrlsByMetaUrl()

8
apps/docs/content/getting-started/quick-start.mdx
View file

@ -24,7 +24,7 @@ By the end of this guide you will have made something that looks like this:
- Install the tldraw library using this command: - Install the tldraw library using this command:
```bash ```bash
npm install @tldraw/tldraw@beta npm install tldraw@beta
``` ```
</li> </li>
<li> <li>
@ -36,7 +36,7 @@ By the end of this guide you will have made something that looks like this:
- Copy and paste this into the file: - Copy and paste this into the file:
```CSS ```CSS
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto+Mono:wght@400;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto+Mono:wght@400;700&display=swap");
@import url("@tldraw/tldraw/tldraw.css"); @import url("tldraw/tldraw.css");
body { body {
font-family: "Inter"; font-family: "Inter";
@ -48,14 +48,14 @@ By the end of this guide you will have made something that looks like this:
<br /> <br />
To render the Tldraw component To render the Tldraw component
- Import the `<Tldraw />` component from `@tldraw/tldraw` - Import the `<Tldraw />` component from `tldraw`
- Import the `index.css` CSS file from earlier - Import the `index.css` CSS file from earlier
- Wrap the Tldraw component in a `<div>` element with the style attribute set to: `{ position: 'fixed', inset: 0 }` - Wrap the Tldraw component in a `<div>` element with the style attribute set to: `{ position: 'fixed', inset: 0 }`
<p className="">This will render a full screen canvas:</p> <p className="">This will render a full screen canvas:</p>
```javascript ```javascript
import { Tldraw } from "@tldraw/tldraw"; import { Tldraw } from "tldraw";
import "./index.css"; import "./index.css";
export default function App() { export default function App() {

2
apps/docs/content/sections.json
View file

@ -97,7 +97,7 @@
}, },
{ {
"id": "tldraw", "id": "tldraw",
"title": "@tldraw/tldraw", "title": "tldraw",
"description": "", "description": "",
"groups": [ "groups": [
{ {

2
apps/docs/scripts/functions/fetchReleases.ts
View file

@ -63,7 +63,7 @@ export async function fetchReleases() {
fs.writeFileSync(filePath, m) fs.writeFileSync(filePath, m)
}) })
} else { } else {
throw Error(`x Could not get releases for @tldraw/tldraw.`) throw Error(`x Could not get releases for tldraw.`)
} }
} catch (error) { } catch (error) {
nicelog(`x Could not generate release content.`) nicelog(`x Could not generate release content.`)

4
apps/dotcom/package.json
View file

@ -23,7 +23,6 @@
"@sentry/integrations": "^7.34.0", "@sentry/integrations": "^7.34.0",
"@sentry/react": "^7.77.0", "@sentry/react": "^7.77.0",
"@tldraw/assets": "workspace:*", "@tldraw/assets": "workspace:*",
"@tldraw/tldraw": "workspace:*",
"@tldraw/tlsync": "workspace:*", "@tldraw/tlsync": "workspace:*",
"@vercel/analytics": "^1.1.1", "@vercel/analytics": "^1.1.1",
"browser-fs-access": "^0.33.0", "browser-fs-access": "^0.33.0",
@ -33,7 +32,8 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-helmet-async": "^1.3.0", "react-helmet-async": "^1.3.0",
"react-router-dom": "^6.17.0" "react-router-dom": "^6.17.0",
"tldraw": "workspace:*"
}, },
"devDependencies": { "devDependencies": {
"@jest/globals": "30.0.0-alpha.2", "@jest/globals": "30.0.0-alpha.2",

2
apps/dotcom/sentry.client.config.ts
View file

@ -4,7 +4,7 @@
import { ExtraErrorData } from '@sentry/integrations' import { ExtraErrorData } from '@sentry/integrations'
import * as Sentry from '@sentry/react' import * as Sentry from '@sentry/react'
import { Editor, getErrorAnnotations } from '@tldraw/tldraw' import { Editor, getErrorAnnotations } from 'tldraw'
import { sentryReleaseName } from './sentry-release-name' import { sentryReleaseName } from './sentry-release-name'
import { env } from './src/utils/env' import { env } from './src/utils/env'
import { setGlobalErrorReporter } from './src/utils/errorReporting' import { setGlobalErrorReporter } from './src/utils/errorReporting'

2
apps/dotcom/src/components/BoardHistorySnapshot/BoardHistorySnapshot.tsx
View file

@ -1,6 +1,6 @@
import { Tldraw, createTLStore, defaultShapeUtils } from '@tldraw/tldraw'
import { RoomSnapshot } from '@tldraw/tlsync' import { RoomSnapshot } from '@tldraw/tlsync'
import { useCallback, useState } from 'react' import { useCallback, useState } from 'react'
import { Tldraw, createTLStore, defaultShapeUtils } from 'tldraw'
import '../../../styles/core.css' import '../../../styles/core.css'
import { assetUrls } from '../../utils/assetUrls' import { assetUrls } from '../../utils/assetUrls'
import { useFileSystem } from '../../utils/useFileSystem' import { useFileSystem } from '../../utils/useFileSystem'

2
apps/dotcom/src/components/CursorChatBubble.tsx
View file

@ -1,4 +1,3 @@
import { preventDefault, track, useContainer, useEditor, useTranslation } from '@tldraw/tldraw'
import { import {
ChangeEvent, ChangeEvent,
ClipboardEvent, ClipboardEvent,
@ -10,6 +9,7 @@ import {
useRef, useRef,
useState, useState,
} from 'react' } from 'react'
import { preventDefault, track, useContainer, useEditor, useTranslation } from 'tldraw'
// todo: // todo:
// - not cleaning up // - not cleaning up

2
apps/dotcom/src/components/DefaultErrorFallback/DefaultErrorFallback.tsx
View file

@ -1,7 +1,7 @@
import { captureException } from '@sentry/react' import { captureException } from '@sentry/react'
import { DefaultErrorFallback as ErrorFallback } from '@tldraw/tldraw'
import { useEffect } from 'react' import { useEffect } from 'react'
import { useRouteError } from 'react-router-dom' import { useRouteError } from 'react-router-dom'
import { DefaultErrorFallback as ErrorFallback } from 'tldraw'
export function DefaultErrorFallback() { export function DefaultErrorFallback() {
const error = useRouteError() const error = useRouteError()

24
apps/dotcom/src/components/DocumentName/DocumentName.tsx
View file

@ -1,3 +1,14 @@
import {
ChangeEvent,
KeyboardEvent,
ReactNode,
SetStateAction,
useCallback,
useEffect,
useLayoutEffect,
useRef,
useState,
} from 'react'
import { import {
OfflineIndicator, OfflineIndicator,
TLUiTranslationKey, TLUiTranslationKey,
@ -14,18 +25,7 @@ import {
useBreakpoint, useBreakpoint,
useEditor, useEditor,
useTranslation, useTranslation,
} from '@tldraw/tldraw' } from 'tldraw'
import {
ChangeEvent,
KeyboardEvent,
ReactNode,
SetStateAction,
useCallback,
useEffect,
useLayoutEffect,
useRef,
useState,
} from 'react'
import { FORK_PROJECT_ACTION } from '../../utils/sharing' import { FORK_PROJECT_ACTION } from '../../utils/sharing'
import { SAVE_FILE_COPY_ACTION } from '../../utils/useFileSystem' import { SAVE_FILE_COPY_ACTION } from '../../utils/useFileSystem'
import { getShareUrl } from '../ShareMenu' import { getShareUrl } from '../ShareMenu'

4
apps/dotcom/src/components/ExportMenu.tsx
View file

@ -1,4 +1,5 @@
import * as Popover from '@radix-ui/react-popover' import * as Popover from '@radix-ui/react-popover'
import React, { useState } from 'react'
import { import {
TldrawUiMenuContextProvider, TldrawUiMenuContextProvider,
TldrawUiMenuGroup, TldrawUiMenuGroup,
@ -8,8 +9,7 @@ import {
useContainer, useContainer,
useEditor, useEditor,
useTranslation, useTranslation,
} from '@tldraw/tldraw' } from 'tldraw'
import React, { useState } from 'react'
import { useShareMenuIsOpen } from '../hooks/useShareMenuOpen' import { useShareMenuIsOpen } from '../hooks/useShareMenuOpen'
import { SHARE_PROJECT_ACTION, SHARE_SNAPSHOT_ACTION } from '../utils/sharing' import { SHARE_PROJECT_ACTION, SHARE_SNAPSHOT_ACTION } from '../utils/sharing'
import { getSaveFileCopyAction } from '../utils/useFileSystem' import { getSaveFileCopyAction } from '../utils/useFileSystem'

2
apps/dotcom/src/components/FileMenu.tsx
View file

@ -4,7 +4,7 @@ import {
TldrawUiMenuItem, TldrawUiMenuItem,
TldrawUiMenuSubmenu, TldrawUiMenuSubmenu,
useActions, useActions,
} from '@tldraw/tldraw' } from 'tldraw'
import { import {
FORK_PROJECT_ACTION, FORK_PROJECT_ACTION,
LEAVE_SHARED_PROJECT_ACTION, LEAVE_SHARED_PROJECT_ACTION,

2
apps/dotcom/src/components/IFrameProtector.tsx
View file

@ -1,5 +1,5 @@
import { LoadingScreen } from '@tldraw/tldraw'
import { useEffect, useState, version } from 'react' import { useEffect, useState, version } from 'react'
import { LoadingScreen } from 'tldraw'
import { useUrl } from '../hooks/useUrl' import { useUrl } from '../hooks/useUrl'
import { trackAnalyticsEvent } from '../utils/trackAnalyticsEvent' import { trackAnalyticsEvent } from '../utils/trackAnalyticsEvent'

2
apps/dotcom/src/components/Links.tsx
View file

@ -1,4 +1,4 @@
import { TldrawUiMenuGroup, TldrawUiMenuItem } from '@tldraw/tldraw' import { TldrawUiMenuGroup, TldrawUiMenuItem } from 'tldraw'
import { openUrl } from '../utils/url' import { openUrl } from '../utils/url'
export function Links() { export function Links() {

4
apps/dotcom/src/components/LocalEditor.tsx
View file

@ -1,3 +1,4 @@
import { useCallback } from 'react'
import { import {
DefaultDebugMenu, DefaultDebugMenu,
DefaultDebugMenuContent, DefaultDebugMenuContent,
@ -17,8 +18,7 @@ import {
TldrawUiMenuItem, TldrawUiMenuItem,
ViewSubmenu, ViewSubmenu,
useActions, useActions,
} from '@tldraw/tldraw' } from 'tldraw'
import { useCallback } from 'react'
import { assetUrls } from '../utils/assetUrls' import { assetUrls } from '../utils/assetUrls'
import { createAssetFromUrl } from '../utils/createAssetFromUrl' import { createAssetFromUrl } from '../utils/createAssetFromUrl'
import { DebugMenuItems } from '../utils/migration/DebugMenuItems' import { DebugMenuItems } from '../utils/migration/DebugMenuItems'

4
apps/dotcom/src/components/MultiplayerEditor.tsx
View file

@ -1,3 +1,4 @@
import { useCallback, useEffect } from 'react'
import { import {
DefaultContextMenu, DefaultContextMenu,
DefaultContextMenuContent, DefaultContextMenuContent,
@ -22,8 +23,7 @@ import {
lns, lns,
useActions, useActions,
useValue, useValue,
} from '@tldraw/tldraw' } from 'tldraw'
import { useCallback, useEffect } from 'react'
import { useRemoteSyncClient } from '../hooks/useRemoteSyncClient' import { useRemoteSyncClient } from '../hooks/useRemoteSyncClient'
import { UrlStateParams, useUrlState } from '../hooks/useUrlState' import { UrlStateParams, useUrlState } from '../hooks/useUrlState'
import { assetUrls } from '../utils/assetUrls' import { assetUrls } from '../utils/assetUrls'

2
apps/dotcom/src/components/PeopleMenu/PeopleMenu.tsx
View file

@ -10,7 +10,7 @@ import {
usePeerIds, usePeerIds,
useTranslation, useTranslation,
useValue, useValue,
} from '@tldraw/tldraw' } from 'tldraw'
import { PeopleMenuAvatar } from './PeopleMenuAvatar' import { PeopleMenuAvatar } from './PeopleMenuAvatar'
import { PeopleMenuItem } from './PeopleMenuItem' import { PeopleMenuItem } from './PeopleMenuItem'
import { PeopleMenuMore } from './PeopleMenuMore' import { PeopleMenuMore } from './PeopleMenuMore'

2
apps/dotcom/src/components/PeopleMenu/PeopleMenuAvatar.tsx
View file

@ -1,4 +1,4 @@
import { usePresence } from '@tldraw/tldraw' import { usePresence } from 'tldraw'
export function PeopleMenuAvatar({ userId }: { userId: string }) { export function PeopleMenuAvatar({ userId }: { userId: string }) {
const presence = usePresence(userId) const presence = usePresence(userId)

4
apps/dotcom/src/components/PeopleMenu/PeopleMenuItem.tsx
View file

@ -1,3 +1,4 @@
import { useCallback } from 'react'
import { import {
TldrawUiButton, TldrawUiButton,
TldrawUiButtonIcon, TldrawUiButtonIcon,
@ -7,8 +8,7 @@ import {
usePresence, usePresence,
useTranslation, useTranslation,
useUiEvents, useUiEvents,
} from '@tldraw/tldraw' } from 'tldraw'
import { useCallback } from 'react'
import { UI_OVERRIDE_TODO_EVENT } from '../../utils/useHandleUiEvent' import { UI_OVERRIDE_TODO_EVENT } from '../../utils/useHandleUiEvent'
export const PeopleMenuItem = track(function PeopleMenuItem({ userId }: { userId: string }) { export const PeopleMenuItem = track(function PeopleMenuItem({ userId }: { userId: string }) {

4
apps/dotcom/src/components/PeopleMenu/UserPresenceColorPicker.tsx
View file

@ -1,4 +1,5 @@
import * as Popover from '@radix-ui/react-popover' import * as Popover from '@radix-ui/react-popover'
import React, { useCallback, useRef, useState } from 'react'
import { import {
TldrawUiButton, TldrawUiButton,
TldrawUiButtonIcon, TldrawUiButtonIcon,
@ -8,8 +9,7 @@ import {
useEditor, useEditor,
useTranslation, useTranslation,
useUiEvents, useUiEvents,
} from '@tldraw/tldraw' } from 'tldraw'
import React, { useCallback, useRef, useState } from 'react'
import { UI_OVERRIDE_TODO_EVENT } from '../../utils/useHandleUiEvent' import { UI_OVERRIDE_TODO_EVENT } from '../../utils/useHandleUiEvent'
export const UserPresenceColorPicker = track(function UserPresenceColorPicker() { export const UserPresenceColorPicker = track(function UserPresenceColorPicker() {

4
apps/dotcom/src/components/PeopleMenu/UserPresenceEditor.tsx
View file

@ -1,3 +1,4 @@
import { useCallback, useRef, useState } from 'react'
import { import {
TldrawUiButton, TldrawUiButton,
TldrawUiButtonIcon, TldrawUiButtonIcon,
@ -6,8 +7,7 @@ import {
useTranslation, useTranslation,
useUiEvents, useUiEvents,
useValue, useValue,
} from '@tldraw/tldraw' } from 'tldraw'
import { useCallback, useRef, useState } from 'react'
import { UI_OVERRIDE_TODO_EVENT } from '../../utils/useHandleUiEvent' import { UI_OVERRIDE_TODO_EVENT } from '../../utils/useHandleUiEvent'
import { UserPresenceColorPicker } from './UserPresenceColorPicker' import { UserPresenceColorPicker } from './UserPresenceColorPicker'

2
apps/dotcom/src/components/ShareButton.tsx
View file

@ -1,5 +1,5 @@
import { useTranslation } from '@tldraw/tldraw'
import { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef } from 'react' import { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef } from 'react'
import { useTranslation } from 'tldraw'
export type ShareButtonProps = DetailedHTMLProps< export type ShareButtonProps = DetailedHTMLProps<
ButtonHTMLAttributes<HTMLButtonElement>, ButtonHTMLAttributes<HTMLButtonElement>,

4
apps/dotcom/src/components/ShareMenu.tsx
View file

@ -1,4 +1,5 @@
import * as Popover from '@radix-ui/react-popover' import * as Popover from '@radix-ui/react-popover'
import React, { useEffect, useState } from 'react'
import { import {
TldrawUiMenuContextProvider, TldrawUiMenuContextProvider,
TldrawUiMenuGroup, TldrawUiMenuGroup,
@ -8,8 +9,7 @@ import {
useActions, useActions,
useContainer, useContainer,
useTranslation, useTranslation,
} from '@tldraw/tldraw' } from 'tldraw'
import React, { useEffect, useState } from 'react'
import { useShareMenuIsOpen } from '../hooks/useShareMenuOpen' import { useShareMenuIsOpen } from '../hooks/useShareMenuOpen'
import { createQRCodeImageDataString } from '../utils/qrcode' import { createQRCodeImageDataString } from '../utils/qrcode'
import { SHARE_PROJECT_ACTION, SHARE_SNAPSHOT_ACTION } from '../utils/sharing' import { SHARE_PROJECT_ACTION, SHARE_SNAPSHOT_ACTION } from '../utils/sharing'

2
apps/dotcom/src/components/SnapshotsEditor.tsx
View file

@ -12,7 +12,7 @@ import {
TldrawUiMenuGroup, TldrawUiMenuGroup,
TldrawUiMenuItem, TldrawUiMenuItem,
useActions, useActions,
} from '@tldraw/tldraw' } from 'tldraw'
import { UrlStateSync } from '../components/MultiplayerEditor' import { UrlStateSync } from '../components/MultiplayerEditor'
import { StoreErrorScreen } from '../components/StoreErrorScreen' import { StoreErrorScreen } from '../components/StoreErrorScreen'
import { useLocalStore } from '../hooks/useLocalStore' import { useLocalStore } from '../hooks/useLocalStore'

2
apps/dotcom/src/components/SneakyOnDropOverride.ts
View file

@ -1,5 +1,5 @@
import { parseAndLoadDocument, useDefaultHelpers, useEditor } from '@tldraw/tldraw'
import { useEffect } from 'react' import { useEffect } from 'react'
import { parseAndLoadDocument, useDefaultHelpers, useEditor } from 'tldraw'
import { shouldOverrideDocument } from '../utils/shouldOverrideDocument' import { shouldOverrideDocument } from '../utils/shouldOverrideDocument'
export function SneakyOnDropOverride({ isMultiplayer }: { isMultiplayer: boolean }) { export function SneakyOnDropOverride({ isMultiplayer }: { isMultiplayer: boolean }) {

2
apps/dotcom/src/components/StoreErrorScreen.tsx
View file

@ -1,5 +1,5 @@
import { ErrorScreen, exhaustiveSwitchError } from '@tldraw/tldraw'
import { TLIncompatibilityReason } from '@tldraw/tlsync' import { TLIncompatibilityReason } from '@tldraw/tlsync'
import { ErrorScreen, exhaustiveSwitchError } from 'tldraw'
import { RemoteSyncError } from '../utils/remote-sync/remote-sync' import { RemoteSyncError } from '../utils/remote-sync/remote-sync'
export function StoreErrorScreen({ error }: { error: Error }) { export function StoreErrorScreen({ error }: { error: Error }) {

2
apps/dotcom/src/components/ThemeUpdater/ThemeUpdater.tsx
View file

@ -1,5 +1,5 @@
import { useEditor, useValue } from '@tldraw/tldraw'
import { Helmet } from 'react-helmet-async' import { Helmet } from 'react-helmet-async'
import { useEditor, useValue } from 'tldraw'
export function ThemeUpdater() { export function ThemeUpdater() {
const editor = useEditor() const editor = useEditor()

6
apps/dotcom/src/hooks/useLocalStore.ts
View file

@ -1,3 +1,5 @@
import { schema } from '@tldraw/tlsync'
import { useEffect, useState } from 'react'
import { import {
MigrationFailureReason, MigrationFailureReason,
Result, Result,
@ -5,9 +7,7 @@ import {
TLRecord, TLRecord,
TLStore, TLStore,
createTLStore, createTLStore,
} from '@tldraw/tldraw' } from 'tldraw'
import { schema } from '@tldraw/tlsync'
import { useEffect, useState } from 'react'
export function useLocalStore(records: TLRecord[], serializedSchema: SerializedSchema) { export function useLocalStore(records: TLRecord[], serializedSchema: SerializedSchema) {
const [storeResult, setStoreResult] = useState< const [storeResult, setStoreResult] = useState<

4
apps/dotcom/src/hooks/useMultiplayerAssets.ts
View file

@ -1,3 +1,4 @@
import { useCallback } from 'react'
import { import {
AssetRecordType, AssetRecordType,
DEFAULT_ACCEPTED_IMG_TYPE, DEFAULT_ACCEPTED_IMG_TYPE,
@ -6,8 +7,7 @@ import {
TLAssetId, TLAssetId,
getHashForString, getHashForString,
uniqueId, uniqueId,
} from '@tldraw/tldraw' } from 'tldraw'
import { useCallback } from 'react'
export function useMultiplayerAssets(assetUploaderUrl: string) { export function useMultiplayerAssets(assetUploaderUrl: string) {
return useCallback( return useCallback(

6
apps/dotcom/src/hooks/useRemoteSyncClient.ts
View file

@ -1,3 +1,5 @@
import { TLSyncClient, schema } from '@tldraw/tlsync'
import { useEffect, useState } from 'react'
import { import {
TAB_ID, TAB_ID,
TLRecord, TLRecord,
@ -9,9 +11,7 @@ import {
getUserPreferences, getUserPreferences,
useTLStore, useTLStore,
useValue, useValue,
} from '@tldraw/tldraw' } from 'tldraw'
import { TLSyncClient, schema } from '@tldraw/tlsync'
import { useEffect, useState } from 'react'
import { ClientWebSocketAdapter } from '../utils/remote-sync/ClientWebSocketAdapter' import { ClientWebSocketAdapter } from '../utils/remote-sync/ClientWebSocketAdapter'
import { RemoteSyncError, UseSyncClientConfig } from '../utils/remote-sync/remote-sync' import { RemoteSyncError, UseSyncClientConfig } from '../utils/remote-sync/remote-sync'
import { trackAnalyticsEvent } from '../utils/trackAnalyticsEvent' import { trackAnalyticsEvent } from '../utils/trackAnalyticsEvent'

2
apps/dotcom/src/hooks/useShareMenuOpen.ts
View file

@ -1,5 +1,5 @@
import { atom, useMenuIsOpen, useValue } from '@tldraw/tldraw'
import { useEffect, useRef } from 'react' import { useEffect, useRef } from 'react'
import { atom, useMenuIsOpen, useValue } from 'tldraw'
// When people click the 'create shared project' in the share menu we want to make sure that // When people click the 'create shared project' in the share menu we want to make sure that
// the menu is not dismissed when the new multiplayer editor mounts. // the menu is not dismissed when the new multiplayer editor mounts.

2
apps/dotcom/src/hooks/useUrlState.ts
View file

@ -1,5 +1,5 @@
import { Editor, MAX_ZOOM, MIN_ZOOM, TLPageId, debounce, react, useEditor } from '@tldraw/tldraw'
import { default as React, useEffect } from 'react' import { default as React, useEffect } from 'react'
import { Editor, MAX_ZOOM, MIN_ZOOM, TLPageId, debounce, react, useEditor } from 'tldraw'
const PARAMS = { const PARAMS = {
viewport: 'viewport', viewport: 'viewport',

2
apps/dotcom/src/pages/public-snapshot.tsx
View file

@ -1,4 +1,4 @@
import { SerializedSchema, TLRecord } from '@tldraw/tldraw' import { SerializedSchema, TLRecord } from 'tldraw'
import '../../styles/globals.css' import '../../styles/globals.css'
import { IFrameProtector } from '../components/IFrameProtector' import { IFrameProtector } from '../components/IFrameProtector'
import { SnapshotsEditor } from '../components/SnapshotsEditor' import { SnapshotsEditor } from '../components/SnapshotsEditor'

2
apps/dotcom/src/utils/cloneAssetForShare.ts
View file

@ -1,4 +1,4 @@
import { TLAsset } from '@tldraw/tldraw' import { TLAsset } from 'tldraw'
export async function cloneAssetForShare( export async function cloneAssetForShare(
asset: TLAsset, asset: TLAsset,

2
apps/dotcom/src/utils/context-menu/CursorChatMenuItem.tsx
View file

@ -1,4 +1,4 @@
import { TldrawUiMenuItem, useActions, useEditor, useValue } from '@tldraw/tldraw' import { TldrawUiMenuItem, useActions, useEditor, useValue } from 'tldraw'
import { CURSOR_CHAT_ACTION } from '../useCursorChat' import { CURSOR_CHAT_ACTION } from '../useCursorChat'
export function CursorChatMenuItem() { export function CursorChatMenuItem() {

2
apps/dotcom/src/utils/createAssetFromFile.ts
View file

@ -6,7 +6,7 @@ import {
TLAssetId, TLAssetId,
getHashForString, getHashForString,
uniqueId, uniqueId,
} from '@tldraw/tldraw' } from 'tldraw'
import { ASSET_UPLOADER_URL } from './config' import { ASSET_UPLOADER_URL } from './config'
export async function createAssetFromFile({ file }: { type: 'file'; file: File }) { export async function createAssetFromFile({ file }: { type: 'file'; file: File }) {

7
apps/dotcom/src/utils/createAssetFromUrl.ts
View file

@ -1,9 +1,4 @@
import { import { AssetRecordType, TLAsset, getHashForString, truncateStringWithEllipsis } from 'tldraw'
AssetRecordType,
TLAsset,
getHashForString,
truncateStringWithEllipsis,
} from '@tldraw/tldraw'
import { BOOKMARK_ENDPOINT } from './config' import { BOOKMARK_ENDPOINT } from './config'
interface ResponseBody { interface ResponseBody {

2
apps/dotcom/src/utils/migration/DebugMenuItems.tsx
View file

@ -1,4 +1,4 @@
import { TldrawUiMenuGroup, TldrawUiMenuItem } from '@tldraw/tldraw' import { TldrawUiMenuGroup, TldrawUiMenuItem } from 'tldraw'
import { env } from '../env' import { env } from '../env'
const RELEASE_INFO = `${env} ${process.env.NEXT_PUBLIC_TLDRAW_RELEASE_INFO ?? 'unreleased'}` const RELEASE_INFO = `${env} ${process.env.NEXT_PUBLIC_TLDRAW_RELEASE_INFO ?? 'unreleased'}`

2
apps/dotcom/src/utils/migration/LocalMigration.tsx
View file

@ -1,5 +1,5 @@
import { useDialogs, useEditor, useToasts } from '@tldraw/tldraw'
import { useEffect } from 'react' import { useEffect } from 'react'
import { useDialogs, useEditor, useToasts } from 'tldraw'
import { MigrationAnnouncement } from './MigrationAnnouncement' import { MigrationAnnouncement } from './MigrationAnnouncement'
import { importFromV1LocalRoom, isEditorEmpty } from './migration' import { importFromV1LocalRoom, isEditorEmpty } from './migration'

2
apps/dotcom/src/utils/migration/MigrationAnnouncement.tsx
View file

@ -4,7 +4,7 @@ import {
TldrawUiButtonLabel, TldrawUiButtonLabel,
useEditor, useEditor,
useValue, useValue,
} from '@tldraw/tldraw' } from 'tldraw'
export function MigrationAnnouncement({ export function MigrationAnnouncement({
onClose, onClose,

2
apps/dotcom/src/utils/migration/migration.tsx
View file

@ -1,5 +1,5 @@
import { Editor, LegacyTldrawDocument, buildFromV1Document } from '@tldraw/tldraw'
import { openDB } from 'idb' import { openDB } from 'idb'
import { Editor, LegacyTldrawDocument, buildFromV1Document } from 'tldraw'
export function isEditorEmpty(editor: Editor) { export function isEditorEmpty(editor: Editor) {
const hasAnyShapes = editor.store.allRecords().some((r) => r.typeName === 'shape') const hasAnyShapes = editor.store.allRecords().some((r) => r.typeName === 'shape')

2
apps/dotcom/src/utils/remote-sync/ClientWebSocketAdapter.ts
View file

@ -1,4 +1,3 @@
import { atom, Atom, TLRecord } from '@tldraw/tldraw'
import { import {
chunk, chunk,
serializeMessage, serializeMessage,
@ -7,6 +6,7 @@ import {
TLSocketClientSentEvent, TLSocketClientSentEvent,
TLSocketServerSentEvent, TLSocketServerSentEvent,
} from '@tldraw/tlsync' } from '@tldraw/tlsync'
import { atom, Atom, TLRecord } from 'tldraw'
function windowListen(...args: Parameters<typeof window.addEventListener>) { function windowListen(...args: Parameters<typeof window.addEventListener>) {
window.addEventListener(...args) window.addEventListener(...args)

2
apps/dotcom/src/utils/remote-sync/remote-sync.ts
View file

@ -1,5 +1,5 @@
import { Signal, TLStoreSnapshot, TLUserPreferences } from '@tldraw/tldraw'
import { TLIncompatibilityReason } from '@tldraw/tlsync' import { TLIncompatibilityReason } from '@tldraw/tlsync'
import { Signal, TLStoreSnapshot, TLUserPreferences } from 'tldraw'
/** @public */ /** @public */
export class RemoteSyncError extends Error { export class RemoteSyncError extends Error {

6
apps/dotcom/src/utils/sharing.ts
View file

@ -1,3 +1,5 @@
import { useMemo } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { import {
AssetRecordType, AssetRecordType,
Editor, Editor,
@ -13,9 +15,7 @@ import {
TLUiToastsContextType, TLUiToastsContextType,
TLUiTranslationKey, TLUiTranslationKey,
isShape, isShape,
} from '@tldraw/tldraw' } from 'tldraw'
import { useMemo } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { useMultiplayerAssets } from '../hooks/useMultiplayerAssets' import { useMultiplayerAssets } from '../hooks/useMultiplayerAssets'
import { getViewportUrlQuery } from '../hooks/useUrlState' import { getViewportUrlQuery } from '../hooks/useUrlState'
import { cloneAssetForShare } from './cloneAssetForShare' import { cloneAssetForShare } from './cloneAssetForShare'

2
apps/dotcom/src/utils/shouldClearDocument.tsx
View file

@ -8,7 +8,7 @@ import {
TldrawUiDialogHeader, TldrawUiDialogHeader,
TldrawUiDialogTitle, TldrawUiDialogTitle,
useTranslation, useTranslation,
} from '@tldraw/tldraw' } from 'tldraw'
export async function shouldClearDocument(addDialog: TLUiDialogsContextType['addDialog']) { export async function shouldClearDocument(addDialog: TLUiDialogsContextType['addDialog']) {
const shouldContinue = await new Promise<boolean>((resolve) => { const shouldContinue = await new Promise<boolean>((resolve) => {

2
apps/dotcom/src/utils/shouldLeaveSharedProject.tsx
View file

@ -10,7 +10,7 @@ import {
TldrawUiDialogTitle, TldrawUiDialogTitle,
useLocalStorageState, useLocalStorageState,
useTranslation, useTranslation,
} from '@tldraw/tldraw' } from 'tldraw'
import { userPreferences } from './userPreferences' import { userPreferences } from './userPreferences'
export async function shouldLeaveSharedProject(addDialog: TLUiDialogsContextType['addDialog']) { export async function shouldLeaveSharedProject(addDialog: TLUiDialogsContextType['addDialog']) {

2
apps/dotcom/src/utils/shouldOverrideDocument.tsx
View file

@ -8,7 +8,7 @@ import {
TldrawUiDialogHeader, TldrawUiDialogHeader,
TldrawUiDialogTitle, TldrawUiDialogTitle,
useTranslation, useTranslation,
} from '@tldraw/tldraw' } from 'tldraw'
/** @public */ /** @public */
export async function shouldOverrideDocument(addDialog: TLUiDialogsContextType['addDialog']) { export async function shouldOverrideDocument(addDialog: TLUiDialogsContextType['addDialog']) {

2
apps/dotcom/src/utils/useCursorChat.ts
View file

@ -1,5 +1,5 @@
import { TLUiOverrides } from '@tldraw/tldraw'
import { useMemo } from 'react' import { useMemo } from 'react'
import { TLUiOverrides } from 'tldraw'
import { useHandleUiEvents } from './useHandleUiEvent' import { useHandleUiEvents } from './useHandleUiEvent'
export const CURSOR_CHAT_ACTION = 'open-cursor-chat' as const export const CURSOR_CHAT_ACTION = 'open-cursor-chat' as const

6
apps/dotcom/src/utils/useFileSystem.tsx
View file

@ -1,3 +1,5 @@
import { fileOpen, fileSave } from 'browser-fs-access'
import { useMemo } from 'react'
import { import {
Editor, Editor,
TLDRAW_FILE_EXTENSION, TLDRAW_FILE_EXTENSION,
@ -8,9 +10,7 @@ import {
parseAndLoadDocument, parseAndLoadDocument,
serializeTldrawJsonBlob, serializeTldrawJsonBlob,
transact, transact,
} from '@tldraw/tldraw' } from 'tldraw'
import { fileOpen, fileSave } from 'browser-fs-access'
import { useMemo } from 'react'
import { shouldClearDocument } from './shouldClearDocument' import { shouldClearDocument } from './shouldClearDocument'
import { shouldOverrideDocument } from './shouldOverrideDocument' import { shouldOverrideDocument } from './shouldOverrideDocument'
import { useHandleUiEvents } from './useHandleUiEvent' import { useHandleUiEvents } from './useHandleUiEvent'

2
apps/dotcom/src/utils/userPreferences.ts
View file

@ -1,4 +1,4 @@
import { T, atom } from '@tldraw/tldraw' import { T, atom } from 'tldraw'
const channel = const channel =
typeof BroadcastChannel !== 'undefined' ? new BroadcastChannel('tldrawUserPreferences') : null typeof BroadcastChannel !== 'undefined' ? new BroadcastChannel('tldrawUserPreferences') : null

2
apps/dotcom/styles/globals.css
View file

@ -1,5 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Plus+Jakarta+Sans:wght@600;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Plus+Jakarta+Sans:wght@600;800&display=swap');
@import url('@tldraw/tldraw/tldraw.css'); @import url('tldraw/tldraw.css');
@import url('./z-board.css'); @import url('./z-board.css');
.tldraw__editor { .tldraw__editor {

2
apps/examples/e2e/shared-e2e.ts
View file

@ -1,5 +1,5 @@
import { PlaywrightTestArgs, PlaywrightWorkerArgs } from '@playwright/test' import { PlaywrightTestArgs, PlaywrightWorkerArgs } from '@playwright/test'
import { Editor } from '@tldraw/tldraw' import { Editor } from 'tldraw'
export function sleep(ms: number) { export function sleep(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms)) return new Promise((resolve) => setTimeout(resolve, ms))

4
apps/examples/e2e/tests/export-snapshots.spec.ts
View file

@ -1,11 +1,11 @@
import test from '@playwright/test' import test from '@playwright/test'
import { TLShapeId, TLShapePartial } from '@tldraw/tldraw' import { TLShapeId, TLShapePartial } from 'tldraw'
// import test, { Page, expect } from '@playwright/test' // import test, { Page, expect } from '@playwright/test'
// import assert from 'assert' // import assert from 'assert'
// import { rename, writeFile } from 'fs/promises' // import { rename, writeFile } from 'fs/promises'
// import { setupPage } from '../shared-e2e' // import { setupPage } from '../shared-e2e'
// import { Editor, TLShapeId, TLShapePartial } from '@tldraw/tldraw' // import { Editor, TLShapeId, TLShapePartial } from 'tldraw'
// declare const editor: Editor // declare const editor: Editor

2
apps/examples/e2e/tests/test-canvas-events.spec.ts
View file

@ -1,5 +1,5 @@
import test, { expect, Page } from '@playwright/test' import test, { expect, Page } from '@playwright/test'
import { Editor } from '@tldraw/tldraw' import { Editor } from 'tldraw'
import { setupPage } from '../shared-e2e' import { setupPage } from '../shared-e2e'
declare const __tldraw_editor_events: any[] declare const __tldraw_editor_events: any[]

2
apps/examples/e2e/tests/test-clipboard.spec.ts
View file

@ -1,5 +1,5 @@
import test, { expect } from '@playwright/test' import test, { expect } from '@playwright/test'
import { Editor } from '@tldraw/tldraw' import { Editor } from 'tldraw'
import { setup } from '../shared-e2e' import { setup } from '../shared-e2e'
export function sleep(ms: number) { export function sleep(ms: number) {

2
apps/examples/e2e/tests/test-focus.spec.ts
View file

@ -1,5 +1,5 @@
import test, { expect } from '@playwright/test' import test, { expect } from '@playwright/test'
import { Editor } from '@tldraw/tldraw' import { Editor } from 'tldraw'
declare const EDITOR_A: Editor declare const EDITOR_A: Editor
declare const EDITOR_B: Editor declare const EDITOR_B: Editor

2
apps/examples/e2e/tests/test-smoke.spec.ts
View file

@ -1,5 +1,5 @@
import { expect } from '@playwright/test' import { expect } from '@playwright/test'
import { Editor, TLGeoShape } from '@tldraw/tldraw' import { Editor, TLGeoShape } from 'tldraw'
import { getAllShapeTypes, setup } from '../shared-e2e' import { getAllShapeTypes, setup } from '../shared-e2e'
import test from './fixtures/fixtures' import test from './fixtures/fixtures'

2
apps/examples/e2e/tests/test-style-panel.spec.ts
View file

@ -1,5 +1,5 @@
import { expect } from '@playwright/test' import { expect } from '@playwright/test'
import { Editor } from '@tldraw/tldraw' import { Editor } from 'tldraw'
import { setup } from '../shared-e2e' import { setup } from '../shared-e2e'
import test from './fixtures/fixtures' import test from './fixtures/fixtures'

2
apps/examples/e2e/tests/test-text.spec.ts
View file

@ -1,5 +1,5 @@
import test, { Page, expect } from '@playwright/test' import test, { Page, expect } from '@playwright/test'
import { BoxModel, Editor } from '@tldraw/tldraw' import { BoxModel, Editor } from 'tldraw'
import { setupPage } from '../shared-e2e' import { setupPage } from '../shared-e2e'
export function sleep(ms: number) { export function sleep(ms: number) {

2
apps/examples/package.json
View file

@ -36,7 +36,6 @@
"@playwright/test": "^1.38.1", "@playwright/test": "^1.38.1",
"@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-alert-dialog": "^1.0.5",
"@tldraw/assets": "workspace:*", "@tldraw/assets": "workspace:*",
"@tldraw/tldraw": "workspace:*",
"@vercel/analytics": "^1.1.1", "@vercel/analytics": "^1.1.1",
"classnames": "^2.3.2", "classnames": "^2.3.2",
"lazyrepo": "0.0.0-alpha.27", "lazyrepo": "0.0.0-alpha.27",
@ -44,6 +43,7 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-router-dom": "^6.17.0", "react-router-dom": "^6.17.0",
"tldraw": "workspace:*",
"vite": "^5.0.0" "vite": "^5.0.0"
}, },
"devDependencies": { "devDependencies": {

4
apps/examples/src/examples/api/APIExample.tsx
View file

@ -6,8 +6,8 @@ import {
Tldraw, Tldraw,
createShapeId, createShapeId,
useEditor, useEditor,
} from '@tldraw/tldraw' } from 'tldraw'
import '@tldraw/tldraw/tldraw.css' import 'tldraw/tldraw.css'
import { useEffect } from 'react' import { useEffect } from 'react'
// There's a guide at the bottom of this file! // There's a guide at the bottom of this file!

4
apps/examples/src/examples/asset-props/AssetPropsExample.tsx
View file

@ -1,5 +1,5 @@
import { Tldraw } from '@tldraw/tldraw' import { Tldraw } from 'tldraw'
import '@tldraw/tldraw/tldraw.css' import 'tldraw/tldraw.css'
export default function AssetPropsExample() { export default function AssetPropsExample() {
return ( return (

4
apps/examples/src/examples/basic/BasicExample.tsx
View file

@ -1,5 +1,5 @@
import { Tldraw } from '@tldraw/tldraw' import { Tldraw } from 'tldraw'
import '@tldraw/tldraw/tldraw.css' import 'tldraw/tldraw.css'
export default function BasicExample() { export default function BasicExample() {
return ( return (

2
apps/examples/src/examples/bounds-snapping-shape/BoundsSnappingShape.tsx
View file

@ -1,4 +1,4 @@
import { Editor, Tldraw } from '@tldraw/tldraw' import { Editor, Tldraw } from 'tldraw'
import { PlayingCardTool } from './PlayingCardShape/playing-card-tool' import { PlayingCardTool } from './PlayingCardShape/playing-card-tool'
import { PlayingCardUtil } from './PlayingCardShape/playing-card-util' import { PlayingCardUtil } from './PlayingCardShape/playing-card-util'
import snapshot from './snapshot.json' import snapshot from './snapshot.json'

2
apps/examples/src/examples/bounds-snapping-shape/PlayingCardShape/playing-card-tool.tsx
View file

@ -1,4 +1,4 @@
import { BaseBoxShapeTool } from '@tldraw/tldraw' import { BaseBoxShapeTool } from 'tldraw'
export class PlayingCardTool extends BaseBoxShapeTool { export class PlayingCardTool extends BaseBoxShapeTool {
static override id = 'PlayingCard' static override id = 'PlayingCard'
static override initial = 'idle' static override initial = 'idle'

2
apps/examples/src/examples/bounds-snapping-shape/PlayingCardShape/playing-card-util.tsx
View file

@ -6,7 +6,7 @@ import {
ShapeProps, ShapeProps,
T, T,
TLBaseShape, TLBaseShape,
} from '@tldraw/tldraw' } from 'tldraw'
// There's a guide at the bottom of this file! // There's a guide at the bottom of this file!

2
apps/examples/src/examples/bounds-snapping-shape/ui-overrides.tsx
View file

@ -6,7 +6,7 @@ import {
TldrawUiMenuItem, TldrawUiMenuItem,
toolbarItem, toolbarItem,
useTools, useTools,
} from '@tldraw/tldraw' } from 'tldraw'
// There's a guide at the bottom of this file! // There's a guide at the bottom of this file!

4
apps/examples/src/examples/canvas-events/CanvasEventsExample.tsx
View file

@ -1,6 +1,6 @@
import { TLEventInfo, Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
import { useCallback, useState } from 'react' import { useCallback, useState } from 'react'
import { TLEventInfo, Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
// There's a guide at the bottom of this file! // There's a guide at the bottom of this file!

4
apps/examples/src/examples/changing-default-colors/ChangingDefaultColorsExample.tsx
View file

@ -1,5 +1,5 @@
import { DefaultColorThemePalette, Tldraw } from '@tldraw/tldraw' import { DefaultColorThemePalette, Tldraw } from 'tldraw'
import '@tldraw/tldraw/tldraw.css' import 'tldraw/tldraw.css'
// There's a guide at the bottom of this file! // There's a guide at the bottom of this file!

4
apps/examples/src/examples/context-toolbar/ContextToolbar.tsx
View file

@ -7,8 +7,8 @@ import {
track, track,
useEditor, useEditor,
Vec, Vec,
} from '@tldraw/tldraw' } from 'tldraw'
import '@tldraw/tldraw/tldraw.css' import 'tldraw/tldraw.css'
const SIZES = [ const SIZES = [
{ value: 's', icon: 'size-small' }, { value: 's', icon: 'size-small' },

4
apps/examples/src/examples/custom-actions-menu/CustomActionsMenuExample.tsx
View file

@ -1,5 +1,5 @@
import { DefaultActionsMenu, TLComponents, Tldraw } from '@tldraw/tldraw' import { DefaultActionsMenu, TLComponents, Tldraw } from 'tldraw'
import '@tldraw/tldraw/tldraw.css' import 'tldraw/tldraw.css'
function CustomActionsMenu() { function CustomActionsMenu() {
return ( return (

4
apps/examples/src/examples/custom-components/CustomComponentsExample.tsx
View file

@ -1,6 +1,6 @@
import { Tldraw, TLEditorComponents, toDomPrecision, useTransform } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
import { useRef } from 'react' import { useRef } from 'react'
import { Tldraw, TLEditorComponents, toDomPrecision, useTransform } from 'tldraw'
import 'tldraw/tldraw.css'
// There's a guide at the bottom of this file! // There's a guide at the bottom of this file!

2
apps/examples/src/examples/custom-config/CardShape/CardShapeTool.tsx
View file

@ -1,4 +1,4 @@
import { BaseBoxShapeTool, TLClickEvent } from '@tldraw/tldraw' import { BaseBoxShapeTool, TLClickEvent } from 'tldraw'
export class CardShapeTool extends BaseBoxShapeTool { export class CardShapeTool extends BaseBoxShapeTool {
static override id = 'card' static override id = 'card'
static override initial = 'idle' static override initial = 'idle'

4
apps/examples/src/examples/custom-config/CardShape/CardShapeUtil.tsx
View file

@ -1,3 +1,4 @@
import { useState } from 'react'
import { import {
HTMLContainer, HTMLContainer,
Rectangle2d, Rectangle2d,
@ -5,8 +6,7 @@ import {
TLOnResizeHandler, TLOnResizeHandler,
getDefaultColorTheme, getDefaultColorTheme,
resizeBox, resizeBox,
} from '@tldraw/tldraw' } from 'tldraw'
import { useState } from 'react'
import { cardShapeMigrations } from './card-shape-migrations' import { cardShapeMigrations } from './card-shape-migrations'
import { cardShapeProps } from './card-shape-props' import { cardShapeProps } from './card-shape-props'
import { ICardShape } from './card-shape-types' import { ICardShape } from './card-shape-types'

2
apps/examples/src/examples/custom-config/CardShape/card-shape-migrations.ts
View file

@ -1,4 +1,4 @@
import { defineMigrations } from '@tldraw/tldraw' import { defineMigrations } from 'tldraw'
// Migrations for the custom card shape (optional but very helpful) // Migrations for the custom card shape (optional but very helpful)
export const cardShapeMigrations = defineMigrations({ export const cardShapeMigrations = defineMigrations({

2
apps/examples/src/examples/custom-config/CardShape/card-shape-props.ts
View file

@ -1,4 +1,4 @@
import { DefaultColorStyle, ShapeProps, T } from '@tldraw/tldraw' import { DefaultColorStyle, ShapeProps, T } from 'tldraw'
import { ICardShape } from './card-shape-types' import { ICardShape } from './card-shape-types'
// Validation for our custom card shape's props, using one of tldraw's default styles // Validation for our custom card shape's props, using one of tldraw's default styles

2
apps/examples/src/examples/custom-config/CardShape/card-shape-types.ts
View file

@ -1,4 +1,4 @@
import { TLBaseShape, TLDefaultColorStyle } from '@tldraw/tldraw' import { TLBaseShape, TLDefaultColorStyle } from 'tldraw'
// A type for our custom card shape // A type for our custom card shape
export type ICardShape = TLBaseShape< export type ICardShape = TLBaseShape<

4
apps/examples/src/examples/custom-config/CustomConfigExample.tsx
View file

@ -1,5 +1,5 @@
import { Tldraw } from '@tldraw/tldraw' import { Tldraw } from 'tldraw'
import '@tldraw/tldraw/tldraw.css' import 'tldraw/tldraw.css'
import { CardShapeTool } from './CardShape/CardShapeTool' import { CardShapeTool } from './CardShape/CardShapeTool'
import { CardShapeUtil } from './CardShape/CardShapeUtil' import { CardShapeUtil } from './CardShape/CardShapeUtil'
import { components, uiOverrides } from './ui-overrides' import { components, uiOverrides } from './ui-overrides'

2
apps/examples/src/examples/custom-config/ui-overrides.tsx
View file

@ -6,7 +6,7 @@ import {
TldrawUiMenuItem, TldrawUiMenuItem,
toolbarItem, toolbarItem,
useTools, useTools,
} from '@tldraw/tldraw' } from 'tldraw'
// There's a guide at the bottom of this file! // There's a guide at the bottom of this file!

4
apps/examples/src/examples/custom-context-menu/CustomContextMenuExample.tsx
View file

@ -6,8 +6,8 @@ import {
Tldraw, Tldraw,
TldrawUiMenuGroup, TldrawUiMenuGroup,
TldrawUiMenuItem, TldrawUiMenuItem,
} from '@tldraw/tldraw' } from 'tldraw'
import '@tldraw/tldraw/tldraw.css' import 'tldraw/tldraw.css'
function CustomContextMenu(props: TLUiContextMenuProps) { function CustomContextMenu(props: TLUiContextMenuProps) {
return ( return (

4
apps/examples/src/examples/custom-debug-menu/CustomDebugMenuExample.tsx
View file

@ -5,8 +5,8 @@ import {
Tldraw, Tldraw,
TldrawUiMenuGroup, TldrawUiMenuGroup,
TldrawUiMenuItem, TldrawUiMenuItem,
} from '@tldraw/tldraw' } from 'tldraw'
import '@tldraw/tldraw/tldraw.css' import 'tldraw/tldraw.css'
function CustomDebugMenu() { function CustomDebugMenu() {
return ( return (

4
apps/examples/src/examples/custom-help-menu/CustomHelpMenuExample.tsx
View file

@ -5,8 +5,8 @@ import {
Tldraw, Tldraw,
TldrawUiMenuGroup, TldrawUiMenuGroup,
TldrawUiMenuItem, TldrawUiMenuItem,
} from '@tldraw/tldraw' } from 'tldraw'
import '@tldraw/tldraw/tldraw.css' import 'tldraw/tldraw.css'
function CustomHelpMenu() { function CustomHelpMenu() {
return ( return (

4
apps/examples/src/examples/custom-keyboard-shortcuts-dialog/CustomKeyboardShortcutsDialogExample.tsx
View file

@ -5,8 +5,8 @@ import {
TLUiKeyboardShortcutsDialogProps, TLUiKeyboardShortcutsDialogProps,
Tldraw, Tldraw,
TldrawUiMenuItem, TldrawUiMenuItem,
} from '@tldraw/tldraw' } from 'tldraw'
import '@tldraw/tldraw/tldraw.css' import 'tldraw/tldraw.css'
function CustomKeyboardShortcutsDialog(props: TLUiKeyboardShortcutsDialogProps) { function CustomKeyboardShortcutsDialog(props: TLUiKeyboardShortcutsDialogProps) {
return ( return (

4
apps/examples/src/examples/custom-main-menu/CustomMainMenuExample.tsx
View file

@ -5,8 +5,8 @@ import {
Tldraw, Tldraw,
TldrawUiMenuGroup, TldrawUiMenuGroup,
TldrawUiMenuItem, TldrawUiMenuItem,
} from '@tldraw/tldraw' } from 'tldraw'
import '@tldraw/tldraw/tldraw.css' import 'tldraw/tldraw.css'
function CustomMainMenu() { function CustomMainMenu() {
return ( return (

4
apps/examples/src/examples/custom-navigation-panel/CustomNavigationPanelExample.tsx
View file

@ -1,5 +1,5 @@
import { TLComponents, Tldraw } from '@tldraw/tldraw' import { TLComponents, Tldraw } from 'tldraw'
import '@tldraw/tldraw/tldraw.css' import 'tldraw/tldraw.css'
function CustomNavigationPanel() { function CustomNavigationPanel() {
return <div className="tlui-navigation-panel">here you are</div> return <div className="tlui-navigation-panel">here you are</div>

4
apps/examples/src/examples/custom-page-menu/CustomPageMenuExample.tsx
View file

@ -1,5 +1,5 @@
import { DefaultPageMenu, TLComponents, Tldraw } from '@tldraw/tldraw' import { DefaultPageMenu, TLComponents, Tldraw } from 'tldraw'
import '@tldraw/tldraw/tldraw.css' import 'tldraw/tldraw.css'
function CustomPageMenu() { function CustomPageMenu() {
return ( return (

4
apps/examples/src/examples/custom-quick-actions/CustomQuickActions.tsx
View file

@ -4,8 +4,8 @@ import {
TLComponents, TLComponents,
Tldraw, Tldraw,
TldrawUiMenuItem, TldrawUiMenuItem,
} from '@tldraw/tldraw' } from 'tldraw'
import '@tldraw/tldraw/tldraw.css' import 'tldraw/tldraw.css'
function CustomQuickActions() { function CustomQuickActions() {
return ( return (

4
apps/examples/src/examples/custom-style-panel/CustomStylePanelExample.tsx
View file

@ -9,8 +9,8 @@ import {
TldrawUiButtonLabel, TldrawUiButtonLabel,
useEditor, useEditor,
useRelevantStyles, useRelevantStyles,
} from '@tldraw/tldraw' } from 'tldraw'
import '@tldraw/tldraw/tldraw.css' import 'tldraw/tldraw.css'
function CustomStylePanel(props: TLUiStylePanelProps) { function CustomStylePanel(props: TLUiStylePanelProps) {
const editor = useEditor() const editor = useEditor()

2
apps/examples/src/examples/custom-styles/CardShape.tsx
View file

@ -8,7 +8,7 @@ import {
TLBaseShape, TLBaseShape,
TLDefaultColorStyle, TLDefaultColorStyle,
getDefaultColorTheme, getDefaultColorTheme,
} from '@tldraw/tldraw' } from 'tldraw'
// There's a guide at the bottom of this file! // There's a guide at the bottom of this file!

4
apps/examples/src/examples/custom-styles/CustomStylesExample.tsx
View file

@ -1,5 +1,5 @@
import { Tldraw } from '@tldraw/tldraw' import { Tldraw } from 'tldraw'
import '@tldraw/tldraw/tldraw.css' import 'tldraw/tldraw.css'
import { CardShapeTool, CardShapeUtil } from './CardShape' import { CardShapeTool, CardShapeUtil } from './CardShape'
import { FilterStyleUi } from './FilterStyleUi' import { FilterStyleUi } from './FilterStyleUi'
import { components, uiOverrides } from './ui-overrides' import { components, uiOverrides } from './ui-overrides'

2
apps/examples/src/examples/custom-styles/FilterStyleUi.tsx
View file

@ -1,4 +1,4 @@
import { track, useEditor } from '@tldraw/tldraw' import { track, useEditor } from 'tldraw'
import { MyFilterStyle } from './CardShape' import { MyFilterStyle } from './CardShape'
// There's a guide at the bottom of this file! // There's a guide at the bottom of this file!

2
apps/examples/src/examples/custom-styles/ui-overrides.tsx
View file

@ -6,7 +6,7 @@ import {
TldrawUiMenuItem, TldrawUiMenuItem,
toolbarItem, toolbarItem,
useTools, useTools,
} from '@tldraw/tldraw' } from 'tldraw'
// There's a guide at the bottom of this file! // There's a guide at the bottom of this file!

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