tldraw_final_v6_final(old version).docx.pdf (#2998)
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:
parent
ae531da193
commit
a0628f9cb2
206 changed files with 1602 additions and 1263 deletions
|
@ -35,7 +35,7 @@ export default function ExampleCodeBlock({
|
|||
customSetup={{
|
||||
dependencies: {
|
||||
'@tldraw/assets': 'latest',
|
||||
'@tldraw/tldraw': 'latest',
|
||||
tldraw: 'latest',
|
||||
},
|
||||
}}
|
||||
files={{
|
||||
|
|
|
@ -36,7 +36,7 @@ export function CodeBlock({ code }: { code: SandpackFiles }) {
|
|||
customSetup={{
|
||||
dependencies: {
|
||||
'@tldraw/assets': 'latest',
|
||||
'@tldraw/tldraw': 'latest',
|
||||
tldraw: 'latest',
|
||||
},
|
||||
}}
|
||||
files={trimmedCode}
|
||||
|
|
|
@ -6,4 +6,4 @@ 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.
|
||||
See the [tldraw-yjs example](https://github.com/tldraw/tldraw-yjs-example) for an example of how to use yjs with the `tldraw` library.
|
||||
|
|
|
@ -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.
|
||||
|
||||
```tsx
|
||||
import { track, useEditor } from '@tldraw/tldraw'
|
||||
import { track, useEditor } from 'tldraw'
|
||||
|
||||
export const SelectedShapeIdsCount = track(() => {
|
||||
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.
|
||||
|
||||
```tsx
|
||||
import { track, useEditor } from '@tldraw/tldraw'
|
||||
import { track, useEditor } from 'tldraw'
|
||||
|
||||
export const BubbleToolUi = track(() => {
|
||||
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.
|
||||
|
||||
```ts
|
||||
import { createShapeId } from '@tldraw/tldraw'
|
||||
import { createShapeId } from 'tldraw'
|
||||
|
||||
createShapeId() // `shape:some-random-uuid`
|
||||
createShapeId('kyle') // `shape:kyle`
|
||||
|
|
|
@ -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.
|
||||
|
||||
```tsx
|
||||
import { Tldraw } from '@tldraw/tldraw'
|
||||
import '@tldraw/tldraw/tldraw.css'
|
||||
import { Tldraw } from 'tldraw'
|
||||
import 'tldraw/tldraw.css'
|
||||
|
||||
export default function () {
|
||||
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.
|
||||
|
||||
```tsx
|
||||
import { Tldraw } from '@tldraw/tldraw'
|
||||
import '@tldraw/tldraw/tldraw.css'
|
||||
import { Tldraw } from 'tldraw'
|
||||
import 'tldraw/tldraw.css'
|
||||
|
||||
export default function () {
|
||||
return (
|
||||
|
|
|
@ -25,7 +25,7 @@ The editor's core shapes are shapes that are built in and always present. At the
|
|||
|
||||
### 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
|
||||
|
||||
|
@ -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.
|
||||
|
||||
```ts
|
||||
import { TLBaseShape } from '@tldraw/tldraw'
|
||||
import { TLBaseShape } from 'tldraw'
|
||||
|
||||
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.
|
||||
|
||||
```tsx
|
||||
import { HTMLContainer, ShapeUtil } from '@tldraw/tldraw'
|
||||
import { HTMLContainer, ShapeUtil } from 'tldraw'
|
||||
|
||||
class CardShapeUtil extends ShapeUtil<CardShape> {
|
||||
static override type = 'card' as const
|
||||
|
|
|
@ -6,27 +6,27 @@ 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).
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
You can use the [Tldraw](?) component inside of any React component.
|
||||
|
||||
```tsx
|
||||
import { Tldraw } from '@tldraw/tldraw'
|
||||
import '@tldraw/tldraw/tldraw.css'
|
||||
import { Tldraw } from 'tldraw'
|
||||
import 'tldraw/tldraw.css'
|
||||
|
||||
export default function () {
|
||||
return (
|
||||
|
@ -43,16 +43,16 @@ It's important that the [Tldraw](?) component is wrapped in a parent container t
|
|||
|
||||
### 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
|
||||
import '@tldraw/tldraw/tldraw.css'
|
||||
import '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');
|
||||
@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.
|
||||
|
@ -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.
|
||||
|
||||
```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
|
||||
|
||||
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
|
||||
import { getAssetUrlsByMetaUrl } from '@tldraw/assets/urls'
|
||||
import { getAssetUrlsByMetaUrl } from 'assets/urls'
|
||||
|
||||
const assetUrls = getAssetUrlsByMetaUrl()
|
||||
|
||||
|
|
|
@ -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:
|
||||
|
||||
```bash
|
||||
npm install @tldraw/tldraw@beta
|
||||
npm install tldraw@beta
|
||||
```
|
||||
</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:
|
||||
```CSS
|
||||
@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 {
|
||||
font-family: "Inter";
|
||||
|
@ -48,14 +48,14 @@ By the end of this guide you will have made something that looks like this:
|
|||
<br />
|
||||
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
|
||||
- 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>
|
||||
|
||||
```javascript
|
||||
import { Tldraw } from "@tldraw/tldraw";
|
||||
import { Tldraw } from "tldraw";
|
||||
import "./index.css";
|
||||
|
||||
export default function App() {
|
||||
|
|
|
@ -97,7 +97,7 @@
|
|||
},
|
||||
{
|
||||
"id": "tldraw",
|
||||
"title": "@tldraw/tldraw",
|
||||
"title": "tldraw",
|
||||
"description": "",
|
||||
"groups": [
|
||||
{
|
||||
|
|
|
@ -63,7 +63,7 @@ export async function fetchReleases() {
|
|||
fs.writeFileSync(filePath, m)
|
||||
})
|
||||
} else {
|
||||
throw Error(`x Could not get releases for @tldraw/tldraw.`)
|
||||
throw Error(`x Could not get releases for tldraw.`)
|
||||
}
|
||||
} catch (error) {
|
||||
nicelog(`x Could not generate release content.`)
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue