Add tags to examples frontmatter (#3929)
Better filtering in the examples app, see gif below. Drive-by fixes: - removed a duplicate shape meta example - Speech bubble text was overflowing and needed the width to be set - Sticker (bindings) no longer snaps - typos  ### Change Type <!-- ❗ Please select a 'Scope' label ❗️ --> - [ ] `sdk` — Changes the tldraw SDK - [ ] `dotcom` — Changes the tldraw.com web app - [x] `docs` — Changes to the documentation, examples, or templates. - [ ] `vs code` — Changes to the vscode plugin - [ ] `internal` — Does not affect user-facing stuff <!-- ❗ Please select a 'Type' label ❗️ --> - [ ] `bugfix` — Bug fix - [ ] `feature` — New feature - [x] `improvement` — Improving existing features - [ ] `chore` — Updating dependencies, other boring stuff - [ ] `galaxy brain` — Architectural changes - [ ] `tests` — Changes to any test code - [ ] `tools` — Changes to infrastructure, CI, internal scripts, debugging tools, etc. - [ ] `dunno` — I don't know ### Test Plan 1. Type a lot of text in a speech bubble shape and move the tail 2. Text should stay static ### Release Notes - Improve filtering of examples
This commit is contained in:
Taha
GitHub
parent
4a791dff60
commit
b60ae0f067
95 changed files with 170 additions and 103 deletions
|
|
@ -32,7 +32,6 @@ export function ExamplePage({
|
|||
const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setFilterValue(e.target.value)
|
||||
}
|
||||
|
||||
return (
|
||||
<DialogContextProvider>
|
||||
<div className="example">
|
||||
|
|
@ -89,9 +88,20 @@ export function ExamplePage({
|
|||
<ul className="example__sidebar__category__items">
|
||||
{examples
|
||||
.find((category) => category.id === currentCategory)
|
||||
?.value.filter((example) =>
|
||||
example.title.toLowerCase().includes(filterValue.toLowerCase())
|
||||
)
|
||||
?.value.filter((example) => {
|
||||
const excludedWords = ['a', 'the', '', ' ']
|
||||
const terms = filterValue
|
||||
.toLowerCase()
|
||||
.split(' ')
|
||||
.filter((term) => !excludedWords.includes(term))
|
||||
if (!terms.length) return true
|
||||
return (
|
||||
terms.some((term) => example.title.toLowerCase().includes(term)) ||
|
||||
example.keywords.some((keyword) =>
|
||||
terms.some((term) => keyword.toLowerCase().includes(term))
|
||||
)
|
||||
)
|
||||
})
|
||||
.map((sidebarExample) => (
|
||||
<ExampleSidebarListItem
|
||||
key={sidebarExample.path}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ export interface Example {
|
|||
category: Category
|
||||
priority: number
|
||||
componentFile: string
|
||||
keywords: string[]
|
||||
loadComponent: () => Promise<ComponentType>
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Action overrides
|
|||
component: ./ActionOverridesExample.tsx
|
||||
category: ui
|
||||
priority: 2
|
||||
keywords: [keyboard, shortcut, copy, paste, group, align]
|
||||
---
|
||||
|
||||
Override tldraw's actions
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Add a tool to the Toolbar
|
|||
component: ./ToolInToolbarExample.tsx
|
||||
category: ui
|
||||
priority: 1
|
||||
keyword: [override, custom, icon]
|
||||
---
|
||||
|
||||
Add your custom tool to the toolbar
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: After create/update shape
|
|||
component: ./AfterCreateUpdateShapeExample.tsx
|
||||
category: editor-api
|
||||
priority: 5
|
||||
keywords: [handler, register, side effects, records]
|
||||
---
|
||||
|
||||
Register a handler to run after shapes are created or updated.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: After delete shape
|
|||
component: ./AfterDeleteShapeExample.tsx
|
||||
category: editor-api
|
||||
priority: 5
|
||||
keywords: [handler, register, side effects, records]
|
||||
---
|
||||
|
||||
Register a handler to run after shapes are deleted.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Controlling the editor
|
|||
component: ./APIExample.tsx
|
||||
category: editor-api
|
||||
priority: 1
|
||||
keywords: [api, create shape, update shape, mount, context]
|
||||
---
|
||||
|
||||
Manipulate the contents of the canvas using the editor API.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Asset props
|
|||
component: ./AssetPropsExample.tsx
|
||||
category: data/assets
|
||||
priority: 1
|
||||
keywords: [images, videos, gif, dimensions, accepted image types]
|
||||
---
|
||||
|
||||
Control the assets (images, videos, etc.) that can be added to the canvas.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Tldraw component
|
|||
component: ./BasicExample.tsx
|
||||
category: basic
|
||||
priority: 1
|
||||
keywords: [basic, intro, simple, quick, start]
|
||||
---
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Before create/update shape
|
|||
component: ./BeforeCreateUpdateShapeExample.tsx
|
||||
category: editor-api
|
||||
priority: 4
|
||||
keywords: [handler, register, side effects, records]
|
||||
---
|
||||
|
||||
Register a handler to run before shapes are created or updated.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Before delete shape
|
|||
component: ./BeforeDeleteShapeExample.tsx
|
||||
category: editor-api
|
||||
priority: 4
|
||||
keywords: [handler, register, side effects, records]
|
||||
---
|
||||
|
||||
Register a handler to run before shapes are deleted.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Bounds Snapping Shape
|
|||
component: ./BoundsSnappingShape.tsx
|
||||
category: shapes/tools
|
||||
priority: 3
|
||||
keywords: [geometry, custom]
|
||||
---
|
||||
|
||||
Custom shapes with special bounds snapping behaviour.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Camera options
|
||||
component: ./CameraOptionsExample.tsx
|
||||
category: basic
|
||||
keywords: [api, fixed, constraints, camera bounds, pan speed, zoom speed]
|
||||
---
|
||||
|
||||
You can set the camera's options and constraints.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Canvas events
|
|||
component: ./CanvasEventsExample.tsx
|
||||
category: editor-api
|
||||
priority: 2
|
||||
keywords: [cursor, pointer, mouse, click, keyboard, handler, input]
|
||||
---
|
||||
|
||||
Listen to events from tldraw's canvas.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Changing default colors
|
|||
component: ./ChangingDefaultColorsExample.tsx
|
||||
category: ui
|
||||
priority: 1
|
||||
keywords: [colours, styles, palette, style panel]
|
||||
---
|
||||
|
||||
Change the tldraw theme colors.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Context toolbar
|
|||
component: ./ContextToolbar.tsx
|
||||
category: ui
|
||||
priority: 2
|
||||
keywords: [in front of the canvas, contextual]
|
||||
---
|
||||
|
||||
Show a contextual toolbar above the shapes when they are selected.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Custom actions menu
|
||||
component: ./CustomActionsMenuExample.tsx
|
||||
category: ui
|
||||
keywords: [drop, down, grouping, rotating, layout, components]
|
||||
---
|
||||
|
||||
You can customize tldraw's actions menu.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,33 @@ title: Canvas components
|
|||
component: ./CustomComponentsExample.tsx
|
||||
category: ui
|
||||
priority: 2
|
||||
keywords:
|
||||
[
|
||||
custom,
|
||||
Background,
|
||||
SvgDefs,
|
||||
Brush,
|
||||
ZoomBrush,
|
||||
ShapeIndicator,
|
||||
Cursor,
|
||||
Canvas,
|
||||
CollaboratorBrush,
|
||||
CollaboratorCursor,
|
||||
CollaboratorHint,
|
||||
CollaboratorShapeIndicator,
|
||||
Grid,
|
||||
Scribble,
|
||||
CollaboratorScribble,
|
||||
SnapIndicator,
|
||||
Handles,
|
||||
Handle,
|
||||
Spinner,
|
||||
SelectionForeground,
|
||||
SelectionBackground,
|
||||
OnTheCanvas,
|
||||
InFrontOfTheCanvas,
|
||||
LoadingScreen,
|
||||
]
|
||||
---
|
||||
|
||||
Replace tldraw's on-canvas UI with your own.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Custom shape and tool
|
||||
component: ./CustomConfigExample.tsx
|
||||
category: shapes/tools
|
||||
keywords: [toolbar, migrations, icon, util, ui overrides, card shape]
|
||||
priority: 3
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Custom context menu
|
||||
component: ./CustomContextMenuExample.tsx
|
||||
category: ui
|
||||
keywords: [components, ui]
|
||||
---
|
||||
|
||||
You can customize tldraw's context menu.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Custom debug menu
|
||||
component: ./CustomDebugMenuExample.tsx
|
||||
category: ui
|
||||
keywords: [components, ui]
|
||||
---
|
||||
|
||||
You can customize tldraw's debug menu.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Custom help menu
|
||||
component: ./CustomHelpMenuExample.tsx
|
||||
category: ui
|
||||
keywords: [components, ui]
|
||||
---
|
||||
|
||||
You can customize tldraw's help menu.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Custom keyboard shortcuts dialog
|
||||
component: ./CustomKeyboardShortcutsDialogExample.tsx
|
||||
category: ui
|
||||
keywords: [components, ui]
|
||||
---
|
||||
|
||||
You can customize tldraw's keyboard shortcuts dialog.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Custom main menu
|
||||
component: ./CustomMainMenuExample.tsx
|
||||
category: ui
|
||||
keywords: [components, ui]
|
||||
---
|
||||
|
||||
You can customize tldraw's main menu.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Custom navigation panel
|
||||
component: ./CustomNavigationPanelExample.tsx
|
||||
category: ui
|
||||
keywords: [components, ui]
|
||||
---
|
||||
|
||||
You can customize tldraw's navigation panel or remove it entirely.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Custom page menu
|
||||
component: ./CustomPageMenuExample.tsx
|
||||
category: ui
|
||||
keywords: [components, ui]
|
||||
---
|
||||
|
||||
You can customize tldraw's page menu, or remove it entirely.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Custom quick actions
|
||||
component: ./CustomQuickActions.tsx
|
||||
category: ui
|
||||
keywords: [components, ui]
|
||||
---
|
||||
|
||||
You can customize tldraw's quick actions, a collection of components that appear next to the menu button, or in the toolbar on smaller sizes.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Custom renderer
|
||||
component: ./CustomRendererExample.tsx
|
||||
category: basic
|
||||
keywords: [html, canvas, background, context]
|
||||
---
|
||||
|
||||
You can _sort of_ use a custom renderer with tldraw.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Custom shape
|
|||
component: ./CustomShapeExample.tsx
|
||||
category: shapes/tools
|
||||
priority: 1
|
||||
keywords: [util]
|
||||
---
|
||||
|
||||
A simple custom shape.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Custom style panel
|
||||
component: ./CustomStylePanelExample.tsx
|
||||
category: ui
|
||||
keywords: [components, ui]
|
||||
---
|
||||
|
||||
You can customize tldraw's style panel or remove it entirely.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Custom tool
|
|||
component: ./CustomToolExample.tsx
|
||||
category: shapes/tools
|
||||
priority: 1
|
||||
keywords: [state, machine, chart, node, sticker]
|
||||
---
|
||||
|
||||
Create a custom tool
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Custom toolbar
|
||||
component: ./CustomToolbarExample.tsx
|
||||
category: ui
|
||||
keywords: [components, ui]
|
||||
---
|
||||
|
||||
You can customize tldraw's toolbar or remove it entirely.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Custom UI
|
|||
component: ./CustomUiExample.tsx
|
||||
category: ui
|
||||
priority: 1
|
||||
keywords: [hide, ui, event listener]
|
||||
---
|
||||
|
||||
Replace tldraw's UI with your own.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Custom zoom menu
|
||||
component: ./CustomZoomMenuExample.tsx
|
||||
category: ui
|
||||
keywords: [components, ui]
|
||||
---
|
||||
|
||||
You can customize tldraw's zoom menu.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Drag and drop
|
|||
component: ./DragAndDropExample.tsx
|
||||
category: shapes/tools
|
||||
priority: 1
|
||||
keywords: [reparent, shapes, grid, counter]
|
||||
---
|
||||
|
||||
Shapes that can be dragged and dropped onto each other.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Editable shape
|
|||
component: ./EditableShapeExample.tsx
|
||||
category: shapes/tools
|
||||
priority: 2
|
||||
keywords: [custom]
|
||||
---
|
||||
|
||||
A custom shape that you can edit by double-clicking it.
|
||||
|
|
@ -13,7 +14,7 @@ In Tldraw, the Editor can have one editing shape at a time. When in its editing
|
|||
|
||||
Only shapes with a `canEdit` flag that returns true may become editable. A user may begin editing a shape by double clicking on the editable shape, or selecting the editable shape and pressing enter.
|
||||
|
||||
Many of our shapes use editing to allow for interactions inside of the shape. For example, a text shape behaves like a text graphic until the user begins editing it—and only then can the user use their keyboard to edit the text. Note that a shape can be interactive regardless of whether it's the editor's editing shape—the "editing" mechanic is just a way of managing a common pattern in canvas appliations.
|
||||
Many of our shapes use editing to allow for interactions inside of the shape. For example, a text shape behaves like a text graphic until the user begins editing it—and only then can the user use their keyboard to edit the text. Note that a shape can be interactive regardless of whether it's the editor's editing shape—the "editing" mechanic is just a way of managing a common pattern in canvas applications.
|
||||
|
||||
In this example we'll create a shape that renders an emoji and allows the user to change the emoji when the shape is in the editing state.
|
||||
Most of the relevant code for this is in the EditableShapeUtil.tsx file. If you want a more in-depth explanation of the shape util, check out the custom shape example.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Editor focus
|
|||
component: ./EditorFocusExample.tsx
|
||||
category: basic
|
||||
priority: 7
|
||||
keywords: [instance, state, keyboard shortcuts]
|
||||
---
|
||||
|
||||
The editor's keyboard shortcuts only work when the editor is "focused".
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ that always throws an error when it renders.
|
|||
[1]
|
||||
We have a shape util that always throws an error when it renders. Check out ErrorShape.ts
|
||||
to see how this works. It's important to define this array of shape utils outside of a
|
||||
React compenent so that they are not recreated on every render.
|
||||
React competent so that they are not recreated on every render.
|
||||
|
||||
[2]
|
||||
We pass in our shape util to the tldraw component. We also pass in a custom error fallback
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Error boundary
|
|||
component: ./ErrorBoundaryExample.tsx
|
||||
category: ui
|
||||
priority: 2
|
||||
keywords: [shape]
|
||||
---
|
||||
|
||||
Catch errors in shapes.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Sublibraries
|
|||
component: ./ExplodedExample.tsx
|
||||
category: editor-api
|
||||
priority: 3
|
||||
keywords: [ui, components, utils]
|
||||
---
|
||||
|
||||
Tldraw is built from several sublibraries - like the editor, default shapes & tools, and UI.
|
||||
|
|
|
|||
|
|
@ -3,10 +3,11 @@ title: External content sources
|
|||
component: ./ExternalContentSourcesExample.tsx
|
||||
category: data/assets
|
||||
priority: 2
|
||||
keywords: [copy, paste, html]
|
||||
---
|
||||
|
||||
Control what happens when the user pastes content into the editor.
|
||||
|
||||
---
|
||||
|
||||
In this example, we register a special handler for when the user pastes in 'text/html' content. We add it to a special shape type that renders the html content directly.
|
||||
In this example, we register a special handler for when the user pastes in 'text/html' content. We add it to a special shape type that renders the html content directly. Try copying and pasting some code from a VSCode file.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: External dialog
|
|||
component: ./ExternalDialog.tsx
|
||||
category: ui
|
||||
priority: 3
|
||||
keywords: [css]
|
||||
---
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
title: External UI (Context)
|
||||
component: ./ExternalUiContextExample.tsx
|
||||
category: ui
|
||||
keywords: [outside, editor, context]
|
||||
---
|
||||
|
||||
This example shows how to control the tldraw editor from an external UI, outside of the `Tldraw` component. This example shows how to pass a reference
|
||||
to the editor around using React Context.
|
||||
This example shows how to control the tldraw editor from an external UI, outside of the `Tldraw` component. This example shows how to pass a reference to the editor around using React Context.
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: External UI
|
||||
component: ./ExternalUiExample.tsx
|
||||
category: ui
|
||||
keywords: [outside, editor]
|
||||
---
|
||||
|
||||
This example shows how to control the tldraw editor from an external UI, outside of the `Tldraw` component.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Force mobile
|
|||
component: ./ForceBreakpointExample
|
||||
category: basic
|
||||
priority: 4
|
||||
keywords: [force, mobile, breakpoint]
|
||||
---
|
||||
|
||||
Force the editor UI to render as if it were on a mobile device.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Hide UI
|
||||
component: ./HideUiExample.tsx
|
||||
category: ui
|
||||
keywords: []
|
||||
---
|
||||
|
||||
Hide tldraw's UI with the `hideUi` prop.
|
||||
|
|
|
|||
|
|
@ -4,4 +4,5 @@ component: ./HostedImagesExample.tsx
|
|||
category: data/assets
|
||||
priority: 2
|
||||
hide: true
|
||||
keywords: [assets, video, image, png, jpg, file]
|
||||
---
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Image annotator
|
|||
component: ./ImageAnnotator.tsx
|
||||
category: use-cases
|
||||
priority: 1
|
||||
keywords: [annotation, camera options, constraints, zoom, pan, camera bounds, pan speed, zoom speed]
|
||||
---
|
||||
|
||||
An image annotator built with tldraw
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Tldraw image component
|
|||
component: ./TldrawImageExample.tsx
|
||||
category: ui
|
||||
priority: 3
|
||||
keywords: [snapshot, export]
|
||||
---
|
||||
|
||||
Display a tldraw snapshot as an image by using the `TldrawImage` component.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Infer dark mode
|
|||
component: ./InferDarkModeExample.tsx
|
||||
category: basic
|
||||
priority: 5
|
||||
keywords: [props]
|
||||
---
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Inline behavior
|
|||
component: ./InlineBehavior.tsx
|
||||
category: ui
|
||||
priority: 3
|
||||
keywords: [focus, blur, multiple]
|
||||
---
|
||||
|
||||
tldraw can be used as an inline block within a larger document editor.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Inline layout
|
|||
component: ./InlineExample.tsx
|
||||
category: ui
|
||||
priority: 3
|
||||
keywords: [focus, auto, focus, multiple, editors]
|
||||
---
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Inset canvas
|
||||
component: ./InsetCanvasExample.tsx
|
||||
category: ui
|
||||
keywords: []
|
||||
---
|
||||
|
||||
Handling events when the canvas is inset within the editor.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Inset editor
|
|||
component: ./InsetExample.tsx
|
||||
category: basic
|
||||
priority: 5
|
||||
keywords: [inline]
|
||||
---
|
||||
|
||||
The `<Tldraw/>` component may be placed in any layout, even if it's not full-screen. In this example, the editor is inset within the screen layout. The component's interactions should still behave as you'd expect them to.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Interactive shape
|
|||
component: ./InteractiveShapeExample.tsx
|
||||
category: shapes/tools
|
||||
priority: 1
|
||||
keywords: [interaction, pointer events, stop propagation, click, todo, input]
|
||||
---
|
||||
|
||||
A custom shape that has its own onClick interactions.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Keyboard shortcuts
|
|||
component: ./KeyboardShortcuts.tsx
|
||||
category: ui
|
||||
priority: 2
|
||||
keywords: [dialog, overrides, actions, tools]
|
||||
---
|
||||
|
||||
How to replace tldraw's default keyboard shortcuts with your own.
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ We need to first create an asset that holds the source image [2], and then
|
|||
create the Image shape itself [3].
|
||||
|
||||
Because this is a Next.js app, we can use the `public` folder to store the
|
||||
image locally, your framework may have a different way of serving statis
|
||||
image locally, your framework may have a different way of serving static
|
||||
assets.
|
||||
|
||||
If you want to allow users to upload the images please take a look at the
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Local images
|
|||
component: ./LocalImagesExample.tsx
|
||||
category: data/assets
|
||||
priority: 2
|
||||
keywords: [asset, record, create asset]
|
||||
---
|
||||
|
||||
How to use local images in the built-in `ImageShape` shape.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
title: Local Storage
|
||||
component: ./LocalStorageExample.tsx
|
||||
category: data/assets
|
||||
priority: 1
|
||||
keywords: [store, snapshot, debounce]
|
||||
---
|
||||
|
||||
Save the contents of the editor
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Meta Migrations
|
|||
component: ./MetaMigrations.tsx
|
||||
category: data/assets
|
||||
priority: 6
|
||||
keywords: [records, snapshot, sequence]
|
||||
---
|
||||
|
||||
Create custom migrations for `meta` properties.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Shape meta (on change)
|
|||
component: ./OnChangeShapeMetaExample.tsx
|
||||
category: data/assets
|
||||
priority: 3
|
||||
keywords: [side, effects, register, change, initial]
|
||||
---
|
||||
|
||||
Add custom metadata to shapes when they're changed.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Shape meta (on create)
|
|||
component: ./OnCreateShapeMetaExample.tsx
|
||||
category: data/assets
|
||||
priority: 3
|
||||
keywords: [side, effects, initial, meta, register]
|
||||
---
|
||||
|
||||
Add custom metadata to shapes when they're created.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Multiple editors
|
|||
component: ./MultipleExample.tsx
|
||||
category: basic
|
||||
priority: 8
|
||||
keywords: [multiple, focus]
|
||||
---
|
||||
|
||||
Use multiple `<Tldraw/>` components on the same page.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Minimal
|
|||
component: ./OnlyEditor.tsx
|
||||
category: editor-api
|
||||
priority: 3
|
||||
keywords: [select, tool, editor, bare, bones]
|
||||
---
|
||||
|
||||
Use the `<TldrawEditor/>` component to render a bare-bones editor with minimal built-in shapes and tools.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ title: PDF editor
|
|||
component: ./PdfEditorExample.tsx
|
||||
category: use-cases
|
||||
priority: 1
|
||||
keywords:
|
||||
[annotation, camera options, constraints, zoom, pan, camera bounds, pan speed, zoom speed, scroll]
|
||||
---
|
||||
|
||||
A very basic PDF editor built with tldraw
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Persistence key
|
|||
component: ./PersistenceKeyExample.tsx
|
||||
category: basic
|
||||
priority: 2
|
||||
keywords: [local storage]
|
||||
---
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Pin (bindings)
|
||||
component: ./PinExample.tsx
|
||||
category: shapes/tools
|
||||
keywords: []
|
||||
---
|
||||
|
||||
A pin, using bindings to pin together networks of shapes.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Popup shape
|
||||
component: ./PopupShapeExample.tsx
|
||||
category: shapes/tools
|
||||
keywords: [dynamic shadows, css]
|
||||
---
|
||||
|
||||
...
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Read-only
|
|||
component: ./ReadOnlyExample
|
||||
category: basic
|
||||
priority: 3
|
||||
keywords: [read, only mode]
|
||||
---
|
||||
|
||||
Use the editor in readonly mode.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Custom tool (screenshot)
|
|||
component: ./ScreenshotToolExample.tsx
|
||||
category: shapes/tools
|
||||
priority: 2
|
||||
keywords: [state chart, state machine, child states]
|
||||
---
|
||||
|
||||
Draw a box on the canvas to capture a screenshot of that area.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Scrolling container
|
|||
component: ./ScrollExample.tsx
|
||||
category: basic
|
||||
priority: 6
|
||||
keywords: [focus, mouse wheel]
|
||||
---
|
||||
|
||||
Use the editor inside a scrollable container.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Selection UI
|
||||
component: ./SelectionUiExample.tsx
|
||||
category: shapes/tools
|
||||
keywords: [duplication controls, handles]
|
||||
---
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
---
|
||||
title: Shape meta
|
||||
component: ./ShapeMetaExample.tsx
|
||||
category: data/assets
|
||||
priority: 3
|
||||
---
|
||||
|
||||
Add a label to shapes with the meta property.
|
||||
|
||||
---
|
||||
|
||||
We can update a shape's metadata using a custom UI. Create a shape, select it, and edit the `label` metadata. The label is stored in the shape's meta property, which can be used to add custom data to any shape.
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
import { TLShape, Tldraw, track, useEditor } from 'tldraw'
|
||||
import 'tldraw/tldraw.css'
|
||||
|
||||
// There's a guide at the bottom of this file!
|
||||
|
||||
// [1]
|
||||
export default function ShapeMetaExample() {
|
||||
return (
|
||||
<div className="tldraw__editor">
|
||||
<Tldraw
|
||||
persistenceKey="shape_meta_example"
|
||||
onMount={(editor) => {
|
||||
editor.getInitialMetaForShape = (shape) => {
|
||||
return { label: `My ${shape.type} shape` }
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ShapeLabelUiWithHelper />
|
||||
</Tldraw>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// [2]
|
||||
type ShapeWithMyMeta = TLShape & { meta: { label: string } }
|
||||
|
||||
// [3]
|
||||
export const ShapeLabelUiWithHelper = track(function ShapeLabelUiWithHelper() {
|
||||
const editor = useEditor()
|
||||
const onlySelectedShape = editor.getOnlySelectedShape() as ShapeWithMyMeta | null
|
||||
|
||||
function onChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
if (onlySelectedShape) {
|
||||
const { id, type, meta } = onlySelectedShape
|
||||
|
||||
editor.updateShapes<ShapeWithMyMeta>([
|
||||
{ id, type, meta: { ...meta, label: e.currentTarget.value } },
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ position: 'absolute', zIndex: 300, top: 64, left: 12 }}>
|
||||
<pre style={{ margin: '0 0 16px 0' }}>
|
||||
{onlySelectedShape
|
||||
? JSON.stringify(onlySelectedShape.meta, null, '\t')
|
||||
: 'Select one shape to see / edit its meta data.'}
|
||||
</pre>
|
||||
{onlySelectedShape && <input value={onlySelectedShape.meta.label} onChange={onChange} />}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
/*
|
||||
This example shows how to use the `getInitialMetaForShape` function to set initial
|
||||
meta data for a shape and update it.
|
||||
|
||||
[1]
|
||||
In the Tldraw component's `onMount` callback, we override the default
|
||||
`Editor.getInitialMetaForShape` function. This function is called when
|
||||
a new shape is created and provides the `meta` property value for the
|
||||
new shape.
|
||||
|
||||
[2]
|
||||
By default, the TLShape type's meta property is { [key: string]: any }, but we can type
|
||||
it using a union like this.
|
||||
|
||||
[3]
|
||||
This is our minimal ui for editing the meta data of our shapes. We use the `track`
|
||||
function to make sure this component is reactive, it will re-render when the signals
|
||||
it is tracking change. Check out the signia docs for more:
|
||||
https://signia.tldraw.dev/docs/API/signia_react/functions/track
|
||||
|
||||
Because our component is a child of the Tldraw component, it has access to the `useEditor`
|
||||
hook via React context. We use this to get the only selected shape. If there is a single
|
||||
shape selected, we render the input and update the shape's meta data when the input changes
|
||||
via the `onChange` function.
|
||||
|
||||
*/
|
||||
|
|
@ -3,6 +3,7 @@ title: Using custom styles
|
|||
component: ./ShapeWithCustomStylesExample.tsx
|
||||
category: shapes/tools
|
||||
priority: 2
|
||||
keywords: [style panel, rating]
|
||||
---
|
||||
|
||||
Using the custom styles API with your custom shapes.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Shape with migrations
|
|||
component: ./ShapeWithMigrationsExample.tsx
|
||||
category: shapes/tools
|
||||
priority: 3
|
||||
keywords: [version, update]
|
||||
---
|
||||
|
||||
Migrate your shapes and their data between versions
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@ How it works:
|
|||
|
||||
Each time the editor's store creates a snapshot (`editor.store.createSnapshot`), it serializes all
|
||||
of the records (the snapshot's `store`) as well as versions of each record that it contains (the
|
||||
snapshot's `scena`). When the editor loads a snapshot, it compares its current schema with the
|
||||
snapshot's `schema`). When the editor loads a snapshot, it compares its current schema with the
|
||||
snapshot's schema to determine which migrations to apply to each record.
|
||||
|
||||
In this example, we have a snapshot (snapshot.json) that we created in version 0, however our shape
|
||||
|
|
@ -167,7 +167,7 @@ Note that the shape in the snapshot doesn't have a 'color' prop.
|
|||
|
||||
Note also that the schema's version for this shape is 0.
|
||||
|
||||
When the editor loads the snapshot, it will compare the serialzied schema's version with its current
|
||||
When the editor loads the snapshot, it will compare the serialized schema's version with its current
|
||||
schema's version for the shape, which is 1 as defined in our shape's migrations. Since the
|
||||
serialized version is older than its current version, it will use our migration to bring it up to
|
||||
date: it will run the migration's `up` function, which will add the 'color' prop to the shape.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Using tldraw styles
|
|||
component: ./ShapeWithTldrawStylesExample.tsx
|
||||
category: shapes/tools
|
||||
priority: 1
|
||||
keywords: [default styles, style panel]
|
||||
---
|
||||
|
||||
Using the tldraw style panel with your custom shapes
|
||||
|
|
|
|||
|
|
@ -3,6 +3,20 @@ title: Slideshow
|
|||
component: ./SlidesExample.tsx
|
||||
category: use-cases
|
||||
priority: 1
|
||||
keywords:
|
||||
[
|
||||
annotation,
|
||||
camera options,
|
||||
constraints,
|
||||
zoom,
|
||||
pan,
|
||||
camera bounds,
|
||||
pan speed,
|
||||
zoom speed,
|
||||
scroll,
|
||||
slides,
|
||||
presentation,
|
||||
]
|
||||
---
|
||||
|
||||
Slideshow example.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,20 @@
|
|||
title: Slideshow with Camera
|
||||
component: ./SlideShowExample.tsx
|
||||
category: use-cases
|
||||
keywords:
|
||||
[
|
||||
annotation,
|
||||
camera options,
|
||||
constraints,
|
||||
zoom,
|
||||
pan,
|
||||
camera bounds,
|
||||
pan speed,
|
||||
zoom speed,
|
||||
scroll,
|
||||
slides,
|
||||
presentation,
|
||||
]
|
||||
---
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Snapshots
|
|||
component: ./SnapshotExample.tsx
|
||||
category: editor-api
|
||||
priority: 1
|
||||
keywords: []
|
||||
---
|
||||
|
||||
Load a snapshot of the editor's contents.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Speech bubble
|
|||
component: ./CustomShapeWithHandles.tsx
|
||||
category: shapes/tools
|
||||
priority: 1
|
||||
keywords: [handles, handle, geometry, interaction, text label]
|
||||
---
|
||||
|
||||
A custom shape with handles
|
||||
|
|
|
|||
|
|
@ -194,6 +194,7 @@ export class SpeechBubbleUtil extends ShapeUtil<SpeechBubbleShape> {
|
|||
id={id}
|
||||
type={type}
|
||||
font={font}
|
||||
textWidth={shape.props.w}
|
||||
fontSize={LABEL_FONT_SIZES[size]}
|
||||
lineHeight={TEXT_PROPS.lineHeight}
|
||||
align={align}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Static assets
|
||||
component: ./StaticAssetsExample.tsx
|
||||
category: basic
|
||||
keywords: [icons, fonts, pre-load]
|
||||
---
|
||||
|
||||
Use custom fonts, icons, and preload them using the `Tldraw` component.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Sticker (bindings)
|
||||
component: ./StickerExample.tsx
|
||||
category: shapes/tools
|
||||
keywords: [attach]
|
||||
---
|
||||
|
||||
A sticker shape, using bindings to attach shapes to one and other
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ class StickerShapeUtil extends ShapeUtil<StickerShape> {
|
|||
}
|
||||
override canEdit = () => false
|
||||
override canResize = () => false
|
||||
override canSnap = () => false
|
||||
override hideRotateHandle = () => true
|
||||
override isAspectRatioLocked = () => true
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Store events
|
|||
component: ./StoreEventsExample.tsx
|
||||
category: editor-api
|
||||
priority: 2
|
||||
keywords: [listen, changes]
|
||||
---
|
||||
|
||||
Listen to changes from tldraw's store.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Things on the canvas
|
|||
component: ./OnTheCanvasExample.tsx
|
||||
category: ui
|
||||
priority: 2
|
||||
keywords: [in front of the canvas, scale, zoom, ui]
|
||||
---
|
||||
|
||||
Add custom components to the editor
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Tool with child states
|
|||
component: ./ToolWithChildStatesExample.tsx
|
||||
category: shapes/tools
|
||||
priority: 2
|
||||
keywords: [state machine, custom tool, state node, interactions]
|
||||
---
|
||||
|
||||
You can implement more complex behaviour in a custom tool by using child states
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Hidden UI components
|
||||
component: ./UiComponentsHiddenExample.tsx
|
||||
category: ui
|
||||
keywords: [hide, ui, overrides]
|
||||
---
|
||||
|
||||
You can hide tldraw's UI components.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: Code x-ray for UI events
|
|||
component: ./UiEventsExample.tsx
|
||||
category: editor-api
|
||||
priority: 0
|
||||
keywords: []
|
||||
---
|
||||
|
||||
Listen to events from tldraw's UI.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: User presence
|
|||
component: ./UserPresenceExample.tsx
|
||||
category: collaboration
|
||||
priority: 2
|
||||
keywords: [Instance presence record, cursor]
|
||||
---
|
||||
|
||||
Show other users editing the same document.
|
||||
|
|
|
|||
|
|
@ -3,4 +3,5 @@ title: YJS
|
|||
component: ./YjsExample.tsx
|
||||
category: collaboration
|
||||
priority: 2
|
||||
keywords: [multi, player]
|
||||
---
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ title: UI zones
|
|||
component: ./ZonesExample.tsx
|
||||
category: ui
|
||||
priority: 1
|
||||
keywords: [top zone, share zone]
|
||||
---
|
||||
|
||||
Inject custom components into tldraw's UI.
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@ function exampleReadmePlugin(): PluginOption {
|
|||
`export const loadComponent = async () => {`,
|
||||
` return (await import(${JSON.stringify(frontmatter.component)})).default;`,
|
||||
`};`,
|
||||
`export const keywords = ${JSON.stringify(frontmatter.keywords)};`,
|
||||
]
|
||||
|
||||
return result.join('\n')
|
||||
|
|
@ -105,11 +106,17 @@ function parseFrontMatter(data: unknown, fileName: string) {
|
|||
throw new Error(`Frontmatter key 'hide' must be boolean in ${fileName}`)
|
||||
}
|
||||
|
||||
const keywords = 'keywords' in data ? data.keywords : []
|
||||
if (!Array.isArray(keywords)) {
|
||||
throw new Error(`Frontmatter key 'keywords' must be array in ${fileName}`)
|
||||
}
|
||||
|
||||
return {
|
||||
title: data.title,
|
||||
component: data.component,
|
||||
priority,
|
||||
category,
|
||||
hide,
|
||||
keywords,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue