2023-04-25 11:01:25 +00:00
|
|
|
import {
|
2023-06-02 15:21:45 +00:00
|
|
|
Editor,
|
2023-07-19 10:50:40 +00:00
|
|
|
FileHelpers,
|
2023-04-25 11:01:25 +00:00
|
|
|
MigrationFailureReason,
|
|
|
|
MigrationResult,
|
2023-06-03 20:46:53 +00:00
|
|
|
RecordId,
|
tldraw zero - package shuffle (#1710)
This PR moves code between our packages so that:
- @tldraw/editor is a “core” library with the engine and canvas but no
shapes, tools, or other things
- @tldraw/tldraw contains everything particular to the experience we’ve
built for tldraw
At first look, this might seem like a step away from customization and
configuration, however I believe it greatly increases the configuration
potential of the @tldraw/editor while also providing a more accurate
reflection of what configuration options actually exist for
@tldraw/tldraw.
## Library changes
@tldraw/editor re-exports its dependencies and @tldraw/tldraw re-exports
@tldraw/editor.
- users of @tldraw/editor WITHOUT @tldraw/tldraw should almost always
only import things from @tldraw/editor.
- users of @tldraw/tldraw should almost always only import things from
@tldraw/tldraw.
- @tldraw/polyfills is merged into @tldraw/editor
- @tldraw/indices is merged into @tldraw/editor
- @tldraw/primitives is merged mostly into @tldraw/editor, partially
into @tldraw/tldraw
- @tldraw/file-format is merged into @tldraw/tldraw
- @tldraw/ui is merged into @tldraw/tldraw
Many (many) utils and other code is moved from the editor to tldraw. For
example, embeds now are entirely an feature of @tldraw/tldraw. The only
big chunk of code left in core is related to arrow handling.
## API Changes
The editor can now be used without tldraw's assets. We load them in
@tldraw/tldraw instead, so feel free to use whatever fonts or images or
whatever that you like with the editor.
All tools and shapes (except for the `Group` shape) are moved to
@tldraw/tldraw. This includes the `select` tool.
You should use the editor with at least one tool, however, so you now
also need to send in an `initialState` prop to the Editor /
<TldrawEditor> component indicating which state the editor should begin
in.
The `components` prop now also accepts `SelectionForeground`.
The complex selection component that we use for tldraw is moved to
@tldraw/tldraw. The default component is quite basic but can easily be
replaced via the `components` prop. We pass down our tldraw-flavored
SelectionFg via `components`.
Likewise with the `Scribble` component: the `DefaultScribble` no longer
uses our freehand tech and is a simple path instead. We pass down the
tldraw-flavored scribble via `components`.
The `ExternalContentManager` (`Editor.externalContentManager`) is
removed and replaced with a mapping of types to handlers.
- Register new content handlers with
`Editor.registerExternalContentHandler`.
- Register new asset creation handlers (for files and URLs) with
`Editor.registerExternalAssetHandler`
### Change Type
- [x] `major` — Breaking change
### Test Plan
- [x] Unit Tests
- [x] End to end tests
### Release Notes
- [@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
---------
Co-authored-by: alex <alex@dytry.ch>
2023-07-17 21:22:34 +00:00
|
|
|
Result,
|
2023-04-25 11:01:25 +00:00
|
|
|
SerializedSchema,
|
2024-04-16 11:13:54 +00:00
|
|
|
SerializedSchemaV1,
|
|
|
|
SerializedSchemaV2,
|
2023-06-27 12:25:55 +00:00
|
|
|
SerializedStore,
|
tldraw zero - package shuffle (#1710)
This PR moves code between our packages so that:
- @tldraw/editor is a “core” library with the engine and canvas but no
shapes, tools, or other things
- @tldraw/tldraw contains everything particular to the experience we’ve
built for tldraw
At first look, this might seem like a step away from customization and
configuration, however I believe it greatly increases the configuration
potential of the @tldraw/editor while also providing a more accurate
reflection of what configuration options actually exist for
@tldraw/tldraw.
## Library changes
@tldraw/editor re-exports its dependencies and @tldraw/tldraw re-exports
@tldraw/editor.
- users of @tldraw/editor WITHOUT @tldraw/tldraw should almost always
only import things from @tldraw/editor.
- users of @tldraw/tldraw should almost always only import things from
@tldraw/tldraw.
- @tldraw/polyfills is merged into @tldraw/editor
- @tldraw/indices is merged into @tldraw/editor
- @tldraw/primitives is merged mostly into @tldraw/editor, partially
into @tldraw/tldraw
- @tldraw/file-format is merged into @tldraw/tldraw
- @tldraw/ui is merged into @tldraw/tldraw
Many (many) utils and other code is moved from the editor to tldraw. For
example, embeds now are entirely an feature of @tldraw/tldraw. The only
big chunk of code left in core is related to arrow handling.
## API Changes
The editor can now be used without tldraw's assets. We load them in
@tldraw/tldraw instead, so feel free to use whatever fonts or images or
whatever that you like with the editor.
All tools and shapes (except for the `Group` shape) are moved to
@tldraw/tldraw. This includes the `select` tool.
You should use the editor with at least one tool, however, so you now
also need to send in an `initialState` prop to the Editor /
<TldrawEditor> component indicating which state the editor should begin
in.
The `components` prop now also accepts `SelectionForeground`.
The complex selection component that we use for tldraw is moved to
@tldraw/tldraw. The default component is quite basic but can easily be
replaced via the `components` prop. We pass down our tldraw-flavored
SelectionFg via `components`.
Likewise with the `Scribble` component: the `DefaultScribble` no longer
uses our freehand tech and is a simple path instead. We pass down the
tldraw-flavored scribble via `components`.
The `ExternalContentManager` (`Editor.externalContentManager`) is
removed and replaced with a mapping of types to handlers.
- Register new content handlers with
`Editor.registerExternalContentHandler`.
- Register new asset creation handlers (for files and URLs) with
`Editor.registerExternalAssetHandler`
### Change Type
- [x] `major` — Breaking change
### Test Plan
- [x] Unit Tests
- [x] End to end tests
### Release Notes
- [@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
---------
Co-authored-by: alex <alex@dytry.ch>
2023-07-17 21:22:34 +00:00
|
|
|
T,
|
|
|
|
TLAsset,
|
|
|
|
TLAssetId,
|
|
|
|
TLRecord,
|
|
|
|
TLSchema,
|
|
|
|
TLStore,
|
2023-05-24 11:25:41 +00:00
|
|
|
UnknownRecord,
|
tldraw zero - package shuffle (#1710)
This PR moves code between our packages so that:
- @tldraw/editor is a “core” library with the engine and canvas but no
shapes, tools, or other things
- @tldraw/tldraw contains everything particular to the experience we’ve
built for tldraw
At first look, this might seem like a step away from customization and
configuration, however I believe it greatly increases the configuration
potential of the @tldraw/editor while also providing a more accurate
reflection of what configuration options actually exist for
@tldraw/tldraw.
## Library changes
@tldraw/editor re-exports its dependencies and @tldraw/tldraw re-exports
@tldraw/editor.
- users of @tldraw/editor WITHOUT @tldraw/tldraw should almost always
only import things from @tldraw/editor.
- users of @tldraw/tldraw should almost always only import things from
@tldraw/tldraw.
- @tldraw/polyfills is merged into @tldraw/editor
- @tldraw/indices is merged into @tldraw/editor
- @tldraw/primitives is merged mostly into @tldraw/editor, partially
into @tldraw/tldraw
- @tldraw/file-format is merged into @tldraw/tldraw
- @tldraw/ui is merged into @tldraw/tldraw
Many (many) utils and other code is moved from the editor to tldraw. For
example, embeds now are entirely an feature of @tldraw/tldraw. The only
big chunk of code left in core is related to arrow handling.
## API Changes
The editor can now be used without tldraw's assets. We load them in
@tldraw/tldraw instead, so feel free to use whatever fonts or images or
whatever that you like with the editor.
All tools and shapes (except for the `Group` shape) are moved to
@tldraw/tldraw. This includes the `select` tool.
You should use the editor with at least one tool, however, so you now
also need to send in an `initialState` prop to the Editor /
<TldrawEditor> component indicating which state the editor should begin
in.
The `components` prop now also accepts `SelectionForeground`.
The complex selection component that we use for tldraw is moved to
@tldraw/tldraw. The default component is quite basic but can easily be
replaced via the `components` prop. We pass down our tldraw-flavored
SelectionFg via `components`.
Likewise with the `Scribble` component: the `DefaultScribble` no longer
uses our freehand tech and is a simple path instead. We pass down the
tldraw-flavored scribble via `components`.
The `ExternalContentManager` (`Editor.externalContentManager`) is
removed and replaced with a mapping of types to handlers.
- Register new content handlers with
`Editor.registerExternalContentHandler`.
- Register new asset creation handlers (for files and URLs) with
`Editor.registerExternalAssetHandler`
### Change Type
- [x] `major` — Breaking change
### Test Plan
- [x] Unit Tests
- [x] End to end tests
### Release Notes
- [@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
---------
Co-authored-by: alex <alex@dytry.ch>
2023-07-17 21:22:34 +00:00
|
|
|
createTLStore,
|
|
|
|
exhaustiveSwitchError,
|
|
|
|
partition,
|
|
|
|
transact,
|
|
|
|
} from '@tldraw/editor'
|
Composable custom UI (#2796)
This PR refactors our menu systems and provides an interface to hide or
replace individual user interface elements.
# Background
Previously, we've had two types of overrides:
- "schema" overrides that would allow insertion or replacement of items
in the different menus
- "component" overrides that would replace components in the editor's
user interface
This PR is an attempt to unify the two and to provide for additional
cases where the "schema-based" user interface had begun to break down.
# Approach
This PR makes no attempt to change the `actions` or `tools`
overrides—the current system seems to be correct for those because they
are not reactive. The challenge with the other ui schemas is that they
_are_ reactive, and thus the overrides both need to a) be fed in from
outside of the editor as props, and b) react to changes from the editor,
which is an impossible situation.
The new approach is to use React to declare menu items. (Surprise!)
```tsx
function CustomHelpMenuContent() {
return (
<>
<DefaultHelpMenuContent />
<TldrawUiMenuGroup id="custom stuff">
<TldrawUiMenuItem
id="about"
label="Like my posts"
icon="external-link"
readonlyOk
onSelect={() => {
window.open('https://x.com/tldraw', '_blank')
}}
/>
</TldrawUiMenuGroup>
</>
)
}
const components: TLComponents = {
HelpMenuContent: CustomHelpMenuContent,
}
export default function CustomHelpMenuContentExample() {
return (
<div className="tldraw__editor">
<Tldraw components={components} />
</div>
)
}
```
We use a `components` prop with the combined editor and ui components.
- [ ] Create a "layout" component?
- [ ] Make UI components more isolated? If possible, they shouldn't
depend on styles outside of themselves, so that they can be used in
other layouts. Maybe we wait on this because I'm feeling a slippery
slope toward presumptions about configurability.
- [ ] OTOH maybe we go hard and consider these things as separate
components, even packages, with their own interfaces for customizability
/ configurability, just go all the way with it, and see what that looks
like.
# Pros
Top line: you can customize tldraw's user interface in a MUCH more
granular / powerful way than before.
It solves a case where menu items could not be made stateful from
outside of the editor context, and provides the option to do things in
the menus that we couldn't allow previously with the "schema-based"
approach.
It also may (who knows) be more performant because we can locate the
state inside of the components for individual buttons and groups,
instead of all at the top level above the "schema". Because items /
groups decide their own state, we don't have to have big checks on how
many items are selected, or whether we have a flippable state. Items and
groups themselves are allowed to re-build as part of the regular React
lifecycle. Menus aren't constantly being rebuilt, if that were ever an
issue.
Menu items can be shared between different menu types. We'll are
sometimes able to re-use items between, for example, the menu and the
context menu and the actions menu.
Our overrides no longer mutate anything, so there's less weird searching
and finding.
# Cons
This approach can make customization menu contents significantly more
complex, as an end user would need to re-declare most of a menu in order
to make any change to it. Luckily a user can add things to the top or
bottom of the context menu fairly easily. (And who knows, folks may
actually want to do deep customization, and this allows for it.)
It's more code. We are shipping more react components, basically one for
each menu item / group.
Currently this PR does not export the subcomponents, i.e. menu items. If
we do want to export these, then heaven help us, it's going to be a
_lot_ of exports.
# Progress
- [x] Context menu
- [x] Main menu
- [x] Zoom menu
- [x] Help menu
- [x] Actions menu
- [x] Keyboard shortcuts menu
- [x] Quick actions in main menu? (new)
- [x] Helper buttons? (new)
- [x] Debug Menu
And potentially
- [x] Toolbar
- [x] Style menu
- [ ] Share zone
- [x] Navigation zone
- [ ] Other zones
### Change Type
- [x] `major` — Breaking change
### Test Plan
1. use the context menu
2. use the custom context menu example
3. use cursor chat in the context menu
- [x] Unit Tests
- [ ] End to end tests
### Release Notes
- Add a brief release note for your PR here.
2024-02-15 12:10:09 +00:00
|
|
|
import { TLUiToastsContextType } from '../../ui/context/toasts'
|
2023-11-15 18:06:02 +00:00
|
|
|
import { TLUiTranslationKey } from '../../ui/hooks/useTranslation/TLUiTranslationKey'
|
|
|
|
import { buildFromV1Document } from '../tldr/buildFromV1Document'
|
2023-04-25 11:01:25 +00:00
|
|
|
|
|
|
|
/** @public */
|
|
|
|
export const TLDRAW_FILE_MIMETYPE = 'application/vnd.tldraw+json' as const
|
|
|
|
|
|
|
|
/** @public */
|
|
|
|
export const TLDRAW_FILE_EXTENSION = '.tldr' as const
|
|
|
|
|
|
|
|
// When incrementing this, you'll need to update parseTldrawJsonFile to handle
|
|
|
|
// both your new changes and the old file format
|
|
|
|
const LATEST_TLDRAW_FILE_FORMAT_VERSION = 1
|
|
|
|
|
|
|
|
/** @public */
|
|
|
|
export interface TldrawFile {
|
|
|
|
tldrawFileFormatVersion: number
|
|
|
|
schema: SerializedSchema
|
2023-05-24 11:25:41 +00:00
|
|
|
records: UnknownRecord[]
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
2024-04-16 11:13:54 +00:00
|
|
|
const schemaV1 = T.object<SerializedSchemaV1>({
|
|
|
|
schemaVersion: T.literal(1),
|
|
|
|
storeVersion: T.positiveInteger,
|
|
|
|
recordVersions: T.dict(
|
|
|
|
T.string,
|
|
|
|
T.object({
|
|
|
|
version: T.positiveInteger,
|
|
|
|
subTypeVersions: T.dict(T.string, T.positiveInteger).optional(),
|
|
|
|
subTypeKey: T.string.optional(),
|
|
|
|
})
|
|
|
|
),
|
|
|
|
})
|
|
|
|
|
|
|
|
const schemaV2 = T.object<SerializedSchemaV2>({
|
|
|
|
schemaVersion: T.literal(2),
|
|
|
|
sequences: T.dict(T.string, T.positiveInteger),
|
|
|
|
})
|
|
|
|
|
2023-04-25 11:01:25 +00:00
|
|
|
const tldrawFileValidator: T.Validator<TldrawFile> = T.object({
|
|
|
|
tldrawFileFormatVersion: T.nonZeroInteger,
|
2024-04-16 11:13:54 +00:00
|
|
|
schema: T.union('schemaVersion', {
|
|
|
|
1: schemaV1,
|
|
|
|
2: schemaV2,
|
2023-04-25 11:01:25 +00:00
|
|
|
}),
|
|
|
|
records: T.arrayOf(
|
|
|
|
T.object({
|
2024-02-20 12:35:25 +00:00
|
|
|
id: T.string as any as T.Validator<RecordId<any>>,
|
2023-04-25 11:01:25 +00:00
|
|
|
typeName: T.string,
|
|
|
|
}).allowUnknownProperties()
|
|
|
|
),
|
|
|
|
})
|
|
|
|
|
|
|
|
/** @public */
|
|
|
|
export function isV1File(data: any) {
|
|
|
|
try {
|
|
|
|
if (data.document?.version) {
|
|
|
|
return true
|
|
|
|
}
|
|
|
|
return false
|
|
|
|
} catch (e) {
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/** @public */
|
|
|
|
export type TldrawFileParseError =
|
|
|
|
| { type: 'v1File'; data: any }
|
|
|
|
| { type: 'notATldrawFile'; cause: unknown }
|
|
|
|
| { type: 'fileFormatVersionTooNew'; version: number }
|
|
|
|
| { type: 'migrationFailed'; reason: MigrationFailureReason }
|
|
|
|
| { type: 'invalidRecords'; cause: unknown }
|
|
|
|
|
|
|
|
/** @public */
|
|
|
|
export function parseTldrawJsonFile({
|
|
|
|
json,
|
2023-06-12 14:04:14 +00:00
|
|
|
schema,
|
2023-04-25 11:01:25 +00:00
|
|
|
}: {
|
2023-06-12 14:04:14 +00:00
|
|
|
schema: TLSchema
|
2023-04-25 11:01:25 +00:00
|
|
|
json: string
|
|
|
|
}): Result<TLStore, TldrawFileParseError> {
|
|
|
|
// first off, we parse .json file and check it matches the general shape of
|
|
|
|
// a tldraw file
|
|
|
|
let data
|
|
|
|
try {
|
|
|
|
data = tldrawFileValidator.validate(JSON.parse(json))
|
|
|
|
} catch (e) {
|
|
|
|
// could be a v1 file!
|
|
|
|
try {
|
|
|
|
data = JSON.parse(json)
|
|
|
|
if (isV1File(data)) {
|
|
|
|
return Result.err({ type: 'v1File', data })
|
|
|
|
}
|
|
|
|
} catch (e) {
|
|
|
|
// noop
|
|
|
|
}
|
|
|
|
|
|
|
|
return Result.err({ type: 'notATldrawFile', cause: e })
|
|
|
|
}
|
|
|
|
|
|
|
|
// if the file format version isn't supported, we can't open it - it's
|
|
|
|
// probably from a newer version of tldraw
|
|
|
|
if (data.tldrawFileFormatVersion > LATEST_TLDRAW_FILE_FORMAT_VERSION) {
|
|
|
|
return Result.err({
|
|
|
|
type: 'fileFormatVersionTooNew',
|
|
|
|
version: data.tldrawFileFormatVersion,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
// even if the file version is up to date, it might contain old-format
|
|
|
|
// records. lets create a store with the records and migrate it to the
|
|
|
|
// latest version
|
2023-06-27 12:25:55 +00:00
|
|
|
let migrationResult: MigrationResult<SerializedStore<TLRecord>>
|
2023-04-25 11:01:25 +00:00
|
|
|
try {
|
|
|
|
const storeSnapshot = Object.fromEntries(data.records.map((r) => [r.id, r as TLRecord]))
|
2023-06-27 13:59:07 +00:00
|
|
|
migrationResult = schema.migrateStoreSnapshot({ store: storeSnapshot, schema: data.schema })
|
2023-04-25 11:01:25 +00:00
|
|
|
} catch (e) {
|
|
|
|
// junk data in the migration
|
|
|
|
return Result.err({ type: 'invalidRecords', cause: e })
|
|
|
|
}
|
|
|
|
// if the migration failed, we can't open the file
|
|
|
|
if (migrationResult.type === 'error') {
|
|
|
|
return Result.err({ type: 'migrationFailed', reason: migrationResult.reason })
|
|
|
|
}
|
|
|
|
|
|
|
|
// at this stage, the store should have records at the latest versions, so
|
|
|
|
// we should be able to validate them. if any of the records at this stage
|
|
|
|
// are invalid, we don't open the file
|
|
|
|
try {
|
[refactor] User-facing APIs (#1478)
This PR updates our user-facing APIs for the Tldraw and TldrawEditor
components, as well as the Editor (App). It mainly incorporates surface
changes from #1450 without any changes to validators or migrators,
incorporating feedback / discussion with @SomeHats and @ds300.
Here we:
- remove the TldrawEditorConfig
- bring back a loose version of shape definitions
- make a separation between "core" shapes and "default" shapes
- do not allow custom shapes, migrators or validators to overwrite core
shapes
- but _do_ allow new shapes
## `<Tldraw>` component
In this PR, the `Tldraw` component wraps both the `TldrawEditor`
component and our `TldrawUi` component. It accepts a union of props for
both components. Previously, this component also added local syncing via
a `useLocalSyncClient` hook call, however that has been pushed down to
the `TldrawEditor` component.
## `<TldrawEditor>` component
The `TldrawEditor` component now more neatly wraps up the different ways
that the editor can be configured.
## The store prop (`TldrawEditorProps.store`)
There are three main ways for the `TldrawEditor` component to be run:
1. with an externally defined store
2. with an externally defined syncing store (local or remote)
3. with an internally defined store
4. with an internally defined locally syncing store
The `store` prop allows for these configurations.
If the `store` prop is defined, it may be defined either as a `TLStore`
or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will
assume that the store is ready to go; if it is defined as a SyncedStore,
then the component will display the loading / error screens as needed,
or the final editor once the store's status is "synced".
When the store is left undefined, then the `TldrawEditor` will create
its own internal store using the optional `instanceId`, `initialData`,
or `shapes` props to define the store / store schema.
If the `persistenceKey` prop is left undefined, then the store will not
be synced. If the `persistenceKey` is defined, then the store will be
synced locally. In the future, we may also here accept the API key /
roomId / etc for creating a remotely synced store.
The `SyncedStore` type has been expanded to also include types used for
remote syncing, e.g. with `ConnectionStatus`.
## Tools
By default, the App has two "baked-in" tools: the select tool and the
zoom tool. These cannot (for now) be replaced or removed. The default
tools are used by default, but may be replaced by other tools if
provided.
## Shapes
By default, the App has a set of "core" shapes:
- group
- embed
- bookmark
- image
- video
- text
That cannot by overwritten because they're created by the app at
different moments, such as when double clicking on the canvas or via a
copy and paste event. In follow up PRs, we'll split these out so that
users can replace parts of the code where these shapes are created.
### Change Type
- [x] `major` — Breaking Change
### Test Plan
- [x] Unit Tests
2023-06-01 15:47:34 +00:00
|
|
|
return Result.ok(
|
|
|
|
createTLStore({
|
|
|
|
initialData: migrationResult.value,
|
2023-06-12 14:04:14 +00:00
|
|
|
schema,
|
[refactor] User-facing APIs (#1478)
This PR updates our user-facing APIs for the Tldraw and TldrawEditor
components, as well as the Editor (App). It mainly incorporates surface
changes from #1450 without any changes to validators or migrators,
incorporating feedback / discussion with @SomeHats and @ds300.
Here we:
- remove the TldrawEditorConfig
- bring back a loose version of shape definitions
- make a separation between "core" shapes and "default" shapes
- do not allow custom shapes, migrators or validators to overwrite core
shapes
- but _do_ allow new shapes
## `<Tldraw>` component
In this PR, the `Tldraw` component wraps both the `TldrawEditor`
component and our `TldrawUi` component. It accepts a union of props for
both components. Previously, this component also added local syncing via
a `useLocalSyncClient` hook call, however that has been pushed down to
the `TldrawEditor` component.
## `<TldrawEditor>` component
The `TldrawEditor` component now more neatly wraps up the different ways
that the editor can be configured.
## The store prop (`TldrawEditorProps.store`)
There are three main ways for the `TldrawEditor` component to be run:
1. with an externally defined store
2. with an externally defined syncing store (local or remote)
3. with an internally defined store
4. with an internally defined locally syncing store
The `store` prop allows for these configurations.
If the `store` prop is defined, it may be defined either as a `TLStore`
or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will
assume that the store is ready to go; if it is defined as a SyncedStore,
then the component will display the loading / error screens as needed,
or the final editor once the store's status is "synced".
When the store is left undefined, then the `TldrawEditor` will create
its own internal store using the optional `instanceId`, `initialData`,
or `shapes` props to define the store / store schema.
If the `persistenceKey` prop is left undefined, then the store will not
be synced. If the `persistenceKey` is defined, then the store will be
synced locally. In the future, we may also here accept the API key /
roomId / etc for creating a remotely synced store.
The `SyncedStore` type has been expanded to also include types used for
remote syncing, e.g. with `ConnectionStatus`.
## Tools
By default, the App has two "baked-in" tools: the select tool and the
zoom tool. These cannot (for now) be replaced or removed. The default
tools are used by default, but may be replaced by other tools if
provided.
## Shapes
By default, the App has a set of "core" shapes:
- group
- embed
- bookmark
- image
- video
- text
That cannot by overwritten because they're created by the app at
different moments, such as when double clicking on the canvas or via a
copy and paste event. In follow up PRs, we'll split these out so that
users can replace parts of the code where these shapes are created.
### Change Type
- [x] `major` — Breaking Change
### Test Plan
- [x] Unit Tests
2023-06-01 15:47:34 +00:00
|
|
|
})
|
|
|
|
)
|
2023-04-25 11:01:25 +00:00
|
|
|
} catch (e) {
|
|
|
|
// junk data in the records (they're not validated yet!) could cause the
|
|
|
|
// migrations to crash. We treat any throw from a migration as an
|
|
|
|
// invalid record
|
|
|
|
return Result.err({ type: 'invalidRecords', cause: e })
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/** @public */
|
|
|
|
export async function serializeTldrawJson(store: TLStore): Promise<string> {
|
2023-06-02 21:43:51 +00:00
|
|
|
const records: TLRecord[] = []
|
|
|
|
const usedAssets = new Set<TLAssetId | null>()
|
|
|
|
const assets: TLAsset[] = []
|
2023-04-25 11:01:25 +00:00
|
|
|
for (const record of store.allRecords()) {
|
|
|
|
switch (record.typeName) {
|
|
|
|
case 'asset':
|
|
|
|
if (
|
|
|
|
record.type !== 'bookmark' &&
|
|
|
|
record.props.src &&
|
|
|
|
!record.props.src.startsWith('data:')
|
|
|
|
) {
|
|
|
|
let assetSrcToSave
|
|
|
|
try {
|
|
|
|
// try to save the asset as a base64 string
|
2024-03-12 16:51:29 +00:00
|
|
|
assetSrcToSave = await FileHelpers.blobToDataUrl(
|
2023-07-19 10:50:40 +00:00
|
|
|
await (await fetch(record.props.src)).blob()
|
|
|
|
)
|
2023-04-25 11:01:25 +00:00
|
|
|
} catch {
|
|
|
|
// if that fails, just save the original src
|
|
|
|
assetSrcToSave = record.props.src
|
|
|
|
}
|
|
|
|
|
2023-06-02 21:43:51 +00:00
|
|
|
assets.push({
|
2023-04-25 11:01:25 +00:00
|
|
|
...record,
|
|
|
|
props: {
|
|
|
|
...record.props,
|
|
|
|
src: assetSrcToSave,
|
|
|
|
},
|
2023-06-02 21:43:51 +00:00
|
|
|
})
|
2023-04-25 11:01:25 +00:00
|
|
|
} else {
|
2023-06-02 21:43:51 +00:00
|
|
|
assets.push(record)
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
break
|
2023-06-02 21:43:51 +00:00
|
|
|
case 'shape':
|
|
|
|
if ('assetId' in record.props) {
|
|
|
|
usedAssets.add(record.props.assetId)
|
|
|
|
}
|
|
|
|
records.push(record)
|
|
|
|
break
|
2023-04-25 11:01:25 +00:00
|
|
|
default:
|
2023-06-02 21:43:51 +00:00
|
|
|
records.push(record)
|
2023-04-25 11:01:25 +00:00
|
|
|
break
|
|
|
|
}
|
|
|
|
}
|
2023-06-02 21:43:51 +00:00
|
|
|
const recordsToSave = records.concat(assets.filter((a) => usedAssets.has(a.id)))
|
2023-04-25 11:01:25 +00:00
|
|
|
|
|
|
|
return JSON.stringify({
|
|
|
|
tldrawFileFormatVersion: LATEST_TLDRAW_FILE_FORMAT_VERSION,
|
|
|
|
schema: store.schema.serialize(),
|
|
|
|
records: recordsToSave,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
/** @public */
|
|
|
|
export async function serializeTldrawJsonBlob(store: TLStore): Promise<Blob> {
|
|
|
|
return new Blob([await serializeTldrawJson(store)], { type: TLDRAW_FILE_MIMETYPE })
|
|
|
|
}
|
|
|
|
|
|
|
|
/** @internal */
|
|
|
|
export async function parseAndLoadDocument(
|
2023-06-02 15:21:45 +00:00
|
|
|
editor: Editor,
|
2023-04-25 11:01:25 +00:00
|
|
|
document: string,
|
2023-11-15 18:06:02 +00:00
|
|
|
msg: (id: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>) => string,
|
2023-06-02 21:16:09 +00:00
|
|
|
addToast: TLUiToastsContextType['addToast'],
|
2023-04-25 11:01:25 +00:00
|
|
|
onV1FileLoad?: () => void,
|
|
|
|
forceDarkMode?: boolean
|
|
|
|
) {
|
|
|
|
const parseFileResult = parseTldrawJsonFile({
|
2023-06-12 14:04:14 +00:00
|
|
|
schema: editor.store.schema,
|
2023-04-25 11:01:25 +00:00
|
|
|
json: document,
|
|
|
|
})
|
|
|
|
if (!parseFileResult.ok) {
|
|
|
|
let description
|
|
|
|
switch (parseFileResult.error.type) {
|
|
|
|
case 'notATldrawFile':
|
2023-06-02 15:21:45 +00:00
|
|
|
editor.annotateError(parseFileResult.error.cause, {
|
2023-04-25 11:01:25 +00:00
|
|
|
origin: 'file-system.open.parse',
|
|
|
|
willCrashApp: false,
|
|
|
|
tags: { parseErrorType: parseFileResult.error.type },
|
|
|
|
})
|
|
|
|
reportError(parseFileResult.error.cause)
|
|
|
|
description = msg('file-system.file-open-error.not-a-tldraw-file')
|
|
|
|
break
|
|
|
|
case 'fileFormatVersionTooNew':
|
|
|
|
description = msg('file-system.file-open-error.file-format-version-too-new')
|
|
|
|
break
|
|
|
|
case 'migrationFailed':
|
|
|
|
if (parseFileResult.error.reason === MigrationFailureReason.TargetVersionTooNew) {
|
|
|
|
description = msg('file-system.file-open-error.file-format-version-too-new')
|
|
|
|
} else {
|
|
|
|
description = msg('file-system.file-open-error.generic-corrupted-file')
|
|
|
|
}
|
|
|
|
break
|
|
|
|
case 'invalidRecords':
|
2023-06-02 15:21:45 +00:00
|
|
|
editor.annotateError(parseFileResult.error.cause, {
|
2023-04-25 11:01:25 +00:00
|
|
|
origin: 'file-system.open.parse',
|
|
|
|
willCrashApp: false,
|
|
|
|
tags: { parseErrorType: parseFileResult.error.type },
|
|
|
|
})
|
|
|
|
reportError(parseFileResult.error.cause)
|
|
|
|
description = msg('file-system.file-open-error.generic-corrupted-file')
|
|
|
|
break
|
|
|
|
case 'v1File': {
|
2023-06-02 15:21:45 +00:00
|
|
|
buildFromV1Document(editor, parseFileResult.error.data.document)
|
2023-04-25 11:01:25 +00:00
|
|
|
onV1FileLoad?.()
|
|
|
|
return
|
|
|
|
}
|
|
|
|
default:
|
|
|
|
exhaustiveSwitchError(parseFileResult.error, 'type')
|
|
|
|
}
|
|
|
|
addToast({
|
|
|
|
title: msg('file-system.file-open-error.title'),
|
|
|
|
description,
|
2024-03-27 09:41:13 +00:00
|
|
|
severity: 'error',
|
2023-04-25 11:01:25 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
// tldraw file contain the full state of the app,
|
|
|
|
// including ephemeral data. it up to the opener to
|
|
|
|
// decide what to restore and what to retain. Here, we
|
|
|
|
// just restore everything, so if the user has opened
|
|
|
|
// this file before they'll get their camera etc.
|
|
|
|
// restored. we could change this in the future.
|
tldraw zero - package shuffle (#1710)
This PR moves code between our packages so that:
- @tldraw/editor is a “core” library with the engine and canvas but no
shapes, tools, or other things
- @tldraw/tldraw contains everything particular to the experience we’ve
built for tldraw
At first look, this might seem like a step away from customization and
configuration, however I believe it greatly increases the configuration
potential of the @tldraw/editor while also providing a more accurate
reflection of what configuration options actually exist for
@tldraw/tldraw.
## Library changes
@tldraw/editor re-exports its dependencies and @tldraw/tldraw re-exports
@tldraw/editor.
- users of @tldraw/editor WITHOUT @tldraw/tldraw should almost always
only import things from @tldraw/editor.
- users of @tldraw/tldraw should almost always only import things from
@tldraw/tldraw.
- @tldraw/polyfills is merged into @tldraw/editor
- @tldraw/indices is merged into @tldraw/editor
- @tldraw/primitives is merged mostly into @tldraw/editor, partially
into @tldraw/tldraw
- @tldraw/file-format is merged into @tldraw/tldraw
- @tldraw/ui is merged into @tldraw/tldraw
Many (many) utils and other code is moved from the editor to tldraw. For
example, embeds now are entirely an feature of @tldraw/tldraw. The only
big chunk of code left in core is related to arrow handling.
## API Changes
The editor can now be used without tldraw's assets. We load them in
@tldraw/tldraw instead, so feel free to use whatever fonts or images or
whatever that you like with the editor.
All tools and shapes (except for the `Group` shape) are moved to
@tldraw/tldraw. This includes the `select` tool.
You should use the editor with at least one tool, however, so you now
also need to send in an `initialState` prop to the Editor /
<TldrawEditor> component indicating which state the editor should begin
in.
The `components` prop now also accepts `SelectionForeground`.
The complex selection component that we use for tldraw is moved to
@tldraw/tldraw. The default component is quite basic but can easily be
replaced via the `components` prop. We pass down our tldraw-flavored
SelectionFg via `components`.
Likewise with the `Scribble` component: the `DefaultScribble` no longer
uses our freehand tech and is a simple path instead. We pass down the
tldraw-flavored scribble via `components`.
The `ExternalContentManager` (`Editor.externalContentManager`) is
removed and replaced with a mapping of types to handlers.
- Register new content handlers with
`Editor.registerExternalContentHandler`.
- Register new asset creation handlers (for files and URLs) with
`Editor.registerExternalAssetHandler`
### Change Type
- [x] `major` — Breaking change
### Test Plan
- [x] Unit Tests
- [x] End to end tests
### Release Notes
- [@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
---------
Co-authored-by: alex <alex@dytry.ch>
2023-07-17 21:22:34 +00:00
|
|
|
transact(() => {
|
2024-02-12 15:03:25 +00:00
|
|
|
const initialBounds = editor.getViewportScreenBounds().clone()
|
2023-11-13 11:51:22 +00:00
|
|
|
const isFocused = editor.getInstanceState().isFocused
|
tldraw zero - package shuffle (#1710)
This PR moves code between our packages so that:
- @tldraw/editor is a “core” library with the engine and canvas but no
shapes, tools, or other things
- @tldraw/tldraw contains everything particular to the experience we’ve
built for tldraw
At first look, this might seem like a step away from customization and
configuration, however I believe it greatly increases the configuration
potential of the @tldraw/editor while also providing a more accurate
reflection of what configuration options actually exist for
@tldraw/tldraw.
## Library changes
@tldraw/editor re-exports its dependencies and @tldraw/tldraw re-exports
@tldraw/editor.
- users of @tldraw/editor WITHOUT @tldraw/tldraw should almost always
only import things from @tldraw/editor.
- users of @tldraw/tldraw should almost always only import things from
@tldraw/tldraw.
- @tldraw/polyfills is merged into @tldraw/editor
- @tldraw/indices is merged into @tldraw/editor
- @tldraw/primitives is merged mostly into @tldraw/editor, partially
into @tldraw/tldraw
- @tldraw/file-format is merged into @tldraw/tldraw
- @tldraw/ui is merged into @tldraw/tldraw
Many (many) utils and other code is moved from the editor to tldraw. For
example, embeds now are entirely an feature of @tldraw/tldraw. The only
big chunk of code left in core is related to arrow handling.
## API Changes
The editor can now be used without tldraw's assets. We load them in
@tldraw/tldraw instead, so feel free to use whatever fonts or images or
whatever that you like with the editor.
All tools and shapes (except for the `Group` shape) are moved to
@tldraw/tldraw. This includes the `select` tool.
You should use the editor with at least one tool, however, so you now
also need to send in an `initialState` prop to the Editor /
<TldrawEditor> component indicating which state the editor should begin
in.
The `components` prop now also accepts `SelectionForeground`.
The complex selection component that we use for tldraw is moved to
@tldraw/tldraw. The default component is quite basic but can easily be
replaced via the `components` prop. We pass down our tldraw-flavored
SelectionFg via `components`.
Likewise with the `Scribble` component: the `DefaultScribble` no longer
uses our freehand tech and is a simple path instead. We pass down the
tldraw-flavored scribble via `components`.
The `ExternalContentManager` (`Editor.externalContentManager`) is
removed and replaced with a mapping of types to handlers.
- Register new content handlers with
`Editor.registerExternalContentHandler`.
- Register new asset creation handlers (for files and URLs) with
`Editor.registerExternalAssetHandler`
### Change Type
- [x] `major` — Breaking change
### Test Plan
- [x] Unit Tests
- [x] End to end tests
### Release Notes
- [@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
---------
Co-authored-by: alex <alex@dytry.ch>
2023-07-17 21:22:34 +00:00
|
|
|
editor.store.clear()
|
|
|
|
const [shapes, nonShapes] = partition(
|
|
|
|
parseFileResult.value.allRecords(),
|
|
|
|
(record) => record.typeName === 'shape'
|
|
|
|
)
|
|
|
|
editor.store.put(nonShapes, 'initialize')
|
|
|
|
editor.store.ensureStoreIsUsable()
|
|
|
|
editor.store.put(shapes, 'initialize')
|
|
|
|
editor.history.clear()
|
2024-02-12 15:03:25 +00:00
|
|
|
// Put the old bounds back in place
|
|
|
|
editor.updateViewportScreenBounds(initialBounds)
|
tldraw zero - package shuffle (#1710)
This PR moves code between our packages so that:
- @tldraw/editor is a “core” library with the engine and canvas but no
shapes, tools, or other things
- @tldraw/tldraw contains everything particular to the experience we’ve
built for tldraw
At first look, this might seem like a step away from customization and
configuration, however I believe it greatly increases the configuration
potential of the @tldraw/editor while also providing a more accurate
reflection of what configuration options actually exist for
@tldraw/tldraw.
## Library changes
@tldraw/editor re-exports its dependencies and @tldraw/tldraw re-exports
@tldraw/editor.
- users of @tldraw/editor WITHOUT @tldraw/tldraw should almost always
only import things from @tldraw/editor.
- users of @tldraw/tldraw should almost always only import things from
@tldraw/tldraw.
- @tldraw/polyfills is merged into @tldraw/editor
- @tldraw/indices is merged into @tldraw/editor
- @tldraw/primitives is merged mostly into @tldraw/editor, partially
into @tldraw/tldraw
- @tldraw/file-format is merged into @tldraw/tldraw
- @tldraw/ui is merged into @tldraw/tldraw
Many (many) utils and other code is moved from the editor to tldraw. For
example, embeds now are entirely an feature of @tldraw/tldraw. The only
big chunk of code left in core is related to arrow handling.
## API Changes
The editor can now be used without tldraw's assets. We load them in
@tldraw/tldraw instead, so feel free to use whatever fonts or images or
whatever that you like with the editor.
All tools and shapes (except for the `Group` shape) are moved to
@tldraw/tldraw. This includes the `select` tool.
You should use the editor with at least one tool, however, so you now
also need to send in an `initialState` prop to the Editor /
<TldrawEditor> component indicating which state the editor should begin
in.
The `components` prop now also accepts `SelectionForeground`.
The complex selection component that we use for tldraw is moved to
@tldraw/tldraw. The default component is quite basic but can easily be
replaced via the `components` prop. We pass down our tldraw-flavored
SelectionFg via `components`.
Likewise with the `Scribble` component: the `DefaultScribble` no longer
uses our freehand tech and is a simple path instead. We pass down the
tldraw-flavored scribble via `components`.
The `ExternalContentManager` (`Editor.externalContentManager`) is
removed and replaced with a mapping of types to handlers.
- Register new content handlers with
`Editor.registerExternalContentHandler`.
- Register new asset creation handlers (for files and URLs) with
`Editor.registerExternalAssetHandler`
### Change Type
- [x] `major` — Breaking change
### Test Plan
- [x] Unit Tests
- [x] End to end tests
### Release Notes
- [@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
---------
Co-authored-by: alex <alex@dytry.ch>
2023-07-17 21:22:34 +00:00
|
|
|
editor.updateRenderingBounds()
|
|
|
|
|
2023-11-14 16:32:27 +00:00
|
|
|
const bounds = editor.getCurrentPageBounds()
|
tldraw zero - package shuffle (#1710)
This PR moves code between our packages so that:
- @tldraw/editor is a “core” library with the engine and canvas but no
shapes, tools, or other things
- @tldraw/tldraw contains everything particular to the experience we’ve
built for tldraw
At first look, this might seem like a step away from customization and
configuration, however I believe it greatly increases the configuration
potential of the @tldraw/editor while also providing a more accurate
reflection of what configuration options actually exist for
@tldraw/tldraw.
## Library changes
@tldraw/editor re-exports its dependencies and @tldraw/tldraw re-exports
@tldraw/editor.
- users of @tldraw/editor WITHOUT @tldraw/tldraw should almost always
only import things from @tldraw/editor.
- users of @tldraw/tldraw should almost always only import things from
@tldraw/tldraw.
- @tldraw/polyfills is merged into @tldraw/editor
- @tldraw/indices is merged into @tldraw/editor
- @tldraw/primitives is merged mostly into @tldraw/editor, partially
into @tldraw/tldraw
- @tldraw/file-format is merged into @tldraw/tldraw
- @tldraw/ui is merged into @tldraw/tldraw
Many (many) utils and other code is moved from the editor to tldraw. For
example, embeds now are entirely an feature of @tldraw/tldraw. The only
big chunk of code left in core is related to arrow handling.
## API Changes
The editor can now be used without tldraw's assets. We load them in
@tldraw/tldraw instead, so feel free to use whatever fonts or images or
whatever that you like with the editor.
All tools and shapes (except for the `Group` shape) are moved to
@tldraw/tldraw. This includes the `select` tool.
You should use the editor with at least one tool, however, so you now
also need to send in an `initialState` prop to the Editor /
<TldrawEditor> component indicating which state the editor should begin
in.
The `components` prop now also accepts `SelectionForeground`.
The complex selection component that we use for tldraw is moved to
@tldraw/tldraw. The default component is quite basic but can easily be
replaced via the `components` prop. We pass down our tldraw-flavored
SelectionFg via `components`.
Likewise with the `Scribble` component: the `DefaultScribble` no longer
uses our freehand tech and is a simple path instead. We pass down the
tldraw-flavored scribble via `components`.
The `ExternalContentManager` (`Editor.externalContentManager`) is
removed and replaced with a mapping of types to handlers.
- Register new content handlers with
`Editor.registerExternalContentHandler`.
- Register new asset creation handlers (for files and URLs) with
`Editor.registerExternalAssetHandler`
### Change Type
- [x] `major` — Breaking change
### Test Plan
- [x] Unit Tests
- [x] End to end tests
### Release Notes
- [@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
---------
Co-authored-by: alex <alex@dytry.ch>
2023-07-17 21:22:34 +00:00
|
|
|
if (bounds) {
|
Add component for viewing an image of a snapshot (#2804)
This PR adds the `TldrawImage` component that displays a tldraw snapshot
as an SVG image.
![2024-02-15 at 12 29 52 - Coral
Cod](https://github.com/tldraw/tldraw/assets/15892272/14140e9e-7d6d-4dd3-88a3-86a6786325c5)
## Why
We've seen requests for this kind of thing from users. eg: GitBook, and
on discord:
<img width="710" alt="image"
src="https://github.com/tldraw/tldraw/assets/15892272/3d3a3e9d-66b9-42e7-81de-a70aa7165bdc">
The component provides a way to do that.
This PR also untangles various bits of editor state from image
exporting, which makes it easier for library users to export images more
agnostically. (ie: they can now export any shapes on any page in any
theme. previously, they had to change the user's state to do that).
## What else
- This PR also adds an **Image snapshot** example to demonstrate the new
component.
- We now pass an `isDarkMode` property to the `toSvg` method (inside the
`ctx` argument). This means that `toSvg` doesn't have to rely on editor
state anymore. I updated all our `toSvg` methods to use it.
- See code comments for more info.
## Any issues?
When you toggle to editing mode in the new example, text measurements
are initially wrong (until you edit the size of a text shape). Click on
the text shape to see how its indicator is wrong. Not sure why this is,
or if it's even related. Does it ring a bell with anyone? If not, I'll
take a closer look. (fixed, see comments --steve)
## Future work
Now that we've untangled image exporting from editor state, we could
expose some more helpful helpers for making this easier.
Fixes tld-2122
### Change Type
- [x] `minor` — New feature
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
### Test Plan
1. Open the **Image snapshot** example.
2. Try editing the image, saving the image, and making sure the image
updates.
- [ ] Unit Tests
- [ ] End to end tests
### Release Notes
- Dev: Added the `TldrawImage` component.
---------
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-02-16 13:54:48 +00:00
|
|
|
editor.zoomToBounds(bounds, { targetZoom: 1 })
|
tldraw zero - package shuffle (#1710)
This PR moves code between our packages so that:
- @tldraw/editor is a “core” library with the engine and canvas but no
shapes, tools, or other things
- @tldraw/tldraw contains everything particular to the experience we’ve
built for tldraw
At first look, this might seem like a step away from customization and
configuration, however I believe it greatly increases the configuration
potential of the @tldraw/editor while also providing a more accurate
reflection of what configuration options actually exist for
@tldraw/tldraw.
## Library changes
@tldraw/editor re-exports its dependencies and @tldraw/tldraw re-exports
@tldraw/editor.
- users of @tldraw/editor WITHOUT @tldraw/tldraw should almost always
only import things from @tldraw/editor.
- users of @tldraw/tldraw should almost always only import things from
@tldraw/tldraw.
- @tldraw/polyfills is merged into @tldraw/editor
- @tldraw/indices is merged into @tldraw/editor
- @tldraw/primitives is merged mostly into @tldraw/editor, partially
into @tldraw/tldraw
- @tldraw/file-format is merged into @tldraw/tldraw
- @tldraw/ui is merged into @tldraw/tldraw
Many (many) utils and other code is moved from the editor to tldraw. For
example, embeds now are entirely an feature of @tldraw/tldraw. The only
big chunk of code left in core is related to arrow handling.
## API Changes
The editor can now be used without tldraw's assets. We load them in
@tldraw/tldraw instead, so feel free to use whatever fonts or images or
whatever that you like with the editor.
All tools and shapes (except for the `Group` shape) are moved to
@tldraw/tldraw. This includes the `select` tool.
You should use the editor with at least one tool, however, so you now
also need to send in an `initialState` prop to the Editor /
<TldrawEditor> component indicating which state the editor should begin
in.
The `components` prop now also accepts `SelectionForeground`.
The complex selection component that we use for tldraw is moved to
@tldraw/tldraw. The default component is quite basic but can easily be
replaced via the `components` prop. We pass down our tldraw-flavored
SelectionFg via `components`.
Likewise with the `Scribble` component: the `DefaultScribble` no longer
uses our freehand tech and is a simple path instead. We pass down the
tldraw-flavored scribble via `components`.
The `ExternalContentManager` (`Editor.externalContentManager`) is
removed and replaced with a mapping of types to handlers.
- Register new content handlers with
`Editor.registerExternalContentHandler`.
- Register new asset creation handlers (for files and URLs) with
`Editor.registerExternalAssetHandler`
### Change Type
- [x] `major` — Breaking change
### Test Plan
- [x] Unit Tests
- [x] End to end tests
### Release Notes
- [@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
---------
Co-authored-by: alex <alex@dytry.ch>
2023-07-17 21:22:34 +00:00
|
|
|
}
|
2023-11-09 11:17:01 +00:00
|
|
|
editor.updateInstanceState({ isFocused })
|
tldraw zero - package shuffle (#1710)
This PR moves code between our packages so that:
- @tldraw/editor is a “core” library with the engine and canvas but no
shapes, tools, or other things
- @tldraw/tldraw contains everything particular to the experience we’ve
built for tldraw
At first look, this might seem like a step away from customization and
configuration, however I believe it greatly increases the configuration
potential of the @tldraw/editor while also providing a more accurate
reflection of what configuration options actually exist for
@tldraw/tldraw.
## Library changes
@tldraw/editor re-exports its dependencies and @tldraw/tldraw re-exports
@tldraw/editor.
- users of @tldraw/editor WITHOUT @tldraw/tldraw should almost always
only import things from @tldraw/editor.
- users of @tldraw/tldraw should almost always only import things from
@tldraw/tldraw.
- @tldraw/polyfills is merged into @tldraw/editor
- @tldraw/indices is merged into @tldraw/editor
- @tldraw/primitives is merged mostly into @tldraw/editor, partially
into @tldraw/tldraw
- @tldraw/file-format is merged into @tldraw/tldraw
- @tldraw/ui is merged into @tldraw/tldraw
Many (many) utils and other code is moved from the editor to tldraw. For
example, embeds now are entirely an feature of @tldraw/tldraw. The only
big chunk of code left in core is related to arrow handling.
## API Changes
The editor can now be used without tldraw's assets. We load them in
@tldraw/tldraw instead, so feel free to use whatever fonts or images or
whatever that you like with the editor.
All tools and shapes (except for the `Group` shape) are moved to
@tldraw/tldraw. This includes the `select` tool.
You should use the editor with at least one tool, however, so you now
also need to send in an `initialState` prop to the Editor /
<TldrawEditor> component indicating which state the editor should begin
in.
The `components` prop now also accepts `SelectionForeground`.
The complex selection component that we use for tldraw is moved to
@tldraw/tldraw. The default component is quite basic but can easily be
replaced via the `components` prop. We pass down our tldraw-flavored
SelectionFg via `components`.
Likewise with the `Scribble` component: the `DefaultScribble` no longer
uses our freehand tech and is a simple path instead. We pass down the
tldraw-flavored scribble via `components`.
The `ExternalContentManager` (`Editor.externalContentManager`) is
removed and replaced with a mapping of types to handlers.
- Register new content handlers with
`Editor.registerExternalContentHandler`.
- Register new asset creation handlers (for files and URLs) with
`Editor.registerExternalAssetHandler`
### Change Type
- [x] `major` — Breaking change
### Test Plan
- [x] Unit Tests
- [x] End to end tests
### Release Notes
- [@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
---------
Co-authored-by: alex <alex@dytry.ch>
2023-07-17 21:22:34 +00:00
|
|
|
})
|
2023-04-25 11:01:25 +00:00
|
|
|
|
2023-07-18 21:50:23 +00:00
|
|
|
if (forceDarkMode) editor.user.updateUserPreferences({ isDarkMode: true })
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|