tldraw 5.4.2 → 5.5.0-canary.003bf5951274
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/DOCS.md +188 -52
- package/RELEASE_NOTES.md +12 -16
- package/dist-cjs/index.d.ts +140 -23
- package/dist-cjs/index.js +14 -1
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/lib/defaultExternalContentHandlers.js +10 -1
- package/dist-cjs/lib/defaultExternalContentHandlers.js.map +2 -2
- package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.js +5 -6
- package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/bookmark/BookmarkShapeUtil.js +5 -5
- package/dist-cjs/lib/shapes/bookmark/BookmarkShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/bookmark/bookmarks.js +8 -21
- package/dist-cjs/lib/shapes/bookmark/bookmarks.js.map +2 -2
- package/dist-cjs/lib/shapes/draw/DrawShapeUtil.js +5 -2
- package/dist-cjs/lib/shapes/draw/DrawShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/draw/toolStates/Drawing.js +17 -14
- package/dist-cjs/lib/shapes/draw/toolStates/Drawing.js.map +2 -2
- package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js +3 -0
- package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js +3 -4
- package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/image/ImageShapeUtil.js +25 -9
- package/dist-cjs/lib/shapes/image/ImageShapeUtil.js.map +3 -3
- package/dist-cjs/lib/shapes/line/LineShapeUtil.js +18 -7
- package/dist-cjs/lib/shapes/line/LineShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/note/DefaultNoteShapeAttribution.js +61 -0
- package/dist-cjs/lib/shapes/note/DefaultNoteShapeAttribution.js.map +7 -0
- package/dist-cjs/lib/shapes/note/NoteShapeUtil.js +24 -24
- package/dist-cjs/lib/shapes/note/NoteShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/note/noteHelpers.js +7 -2
- package/dist-cjs/lib/shapes/note/noteHelpers.js.map +2 -2
- package/dist-cjs/lib/shapes/note/toolStates/Pointing.js +4 -4
- package/dist-cjs/lib/shapes/note/toolStates/Pointing.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/crop.js +13 -24
- package/dist-cjs/lib/shapes/shared/crop.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/useImageOrVideoAsset.js +16 -3
- package/dist-cjs/lib/shapes/shared/useImageOrVideoAsset.js.map +2 -2
- package/dist-cjs/lib/shapes/text/RichTextArea.js +1 -1
- package/dist-cjs/lib/shapes/text/RichTextArea.js.map +2 -2
- package/dist-cjs/lib/shapes/video/VideoShapeUtil.js +6 -1
- package/dist-cjs/lib/shapes/video/VideoShapeUtil.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/DragAndDropManager.js +3 -3
- package/dist-cjs/lib/tools/SelectTool/DragAndDropManager.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/GestureShapeChangeTracker.js +71 -0
- package/dist-cjs/lib/tools/SelectTool/GestureShapeChangeTracker.js.map +7 -0
- package/dist-cjs/lib/tools/SelectTool/childStates/Brushing.js +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Brushing.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/Cropping.js +38 -6
- package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/Cropping.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/TranslatingCrop.js +26 -4
- package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/TranslatingCrop.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/crop_helpers.js +1 -1
- package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/crop_helpers.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/DraggingHandle.js +17 -23
- package/dist-cjs/lib/tools/SelectTool/childStates/DraggingHandle.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/EditingShape.js +13 -5
- package/dist-cjs/lib/tools/SelectTool/childStates/EditingShape.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Idle.js +8 -25
- package/dist-cjs/lib/tools/SelectTool/childStates/Idle.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/PointingArrowLabel.js +3 -4
- package/dist-cjs/lib/tools/SelectTool/childStates/PointingArrowLabel.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/PointingHandle.js +11 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/PointingHandle.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/PointingShape.js +14 -8
- package/dist-cjs/lib/tools/SelectTool/childStates/PointingShape.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Resizing.js +71 -34
- package/dist-cjs/lib/tools/SelectTool/childStates/Resizing.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Rotating.js +53 -10
- package/dist-cjs/lib/tools/SelectTool/childStates/Rotating.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/childStates/Translating.js +117 -43
- package/dist-cjs/lib/tools/SelectTool/childStates/Translating.js.map +2 -2
- package/dist-cjs/lib/tools/SelectTool/selectHelpers.js +11 -0
- package/dist-cjs/lib/tools/SelectTool/selectHelpers.js.map +2 -2
- package/dist-cjs/lib/tools/ZoomTool/ZoomTool.js +2 -2
- package/dist-cjs/lib/tools/ZoomTool/ZoomTool.js.map +2 -2
- package/dist-cjs/lib/ui/TldrawUi.js +7 -12
- package/dist-cjs/lib/ui/TldrawUi.js.map +3 -3
- package/dist-cjs/lib/ui/components/A11y.js +12 -23
- package/dist-cjs/lib/ui/components/A11y.js.map +2 -2
- package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenu.js.map +2 -2
- package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.js +1 -1
- package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/ContextMenu/DefaultContextMenu.js +8 -16
- package/dist-cjs/lib/ui/components/ContextMenu/DefaultContextMenu.js.map +2 -2
- package/dist-cjs/lib/ui/components/CursorChatBubble.js +3 -4
- package/dist-cjs/lib/ui/components/CursorChatBubble.js.map +2 -2
- package/dist-cjs/lib/ui/components/DebugMenu/DefaultDebugMenuContent.js +9 -43
- package/dist-cjs/lib/ui/components/DebugMenu/DefaultDebugMenuContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/DefaultDebugPanel.js +2 -8
- package/dist-cjs/lib/ui/components/DefaultDebugPanel.js.map +2 -2
- package/dist-cjs/lib/ui/components/Dialogs.js +1 -5
- package/dist-cjs/lib/ui/components/Dialogs.js.map +2 -2
- package/dist-cjs/lib/ui/components/EditLinkDialog.js +26 -38
- package/dist-cjs/lib/ui/components/EditLinkDialog.js.map +2 -2
- package/dist-cjs/lib/ui/components/EmbedDialog.js +5 -5
- package/dist-cjs/lib/ui/components/EmbedDialog.js.map +3 -3
- package/dist-cjs/lib/ui/components/HelpMenu/DefaultHelpMenuContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/HelperButtons/BackToContent.js +8 -8
- package/dist-cjs/lib/ui/components/HelperButtons/BackToContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/InputModeMenu.js +18 -31
- package/dist-cjs/lib/ui/components/InputModeMenu.js.map +3 -3
- package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.js +16 -0
- package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.js.map +2 -2
- package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js +25 -80
- package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js +2 -6
- package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js.map +2 -2
- package/dist-cjs/lib/ui/components/MobileStylePanel.js +7 -3
- package/dist-cjs/lib/ui/components/MobileStylePanel.js.map +2 -2
- package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js +13 -20
- package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js.map +2 -2
- package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js +46 -47
- package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js.map +2 -2
- package/dist-cjs/lib/ui/components/PageMenu/PageItemInput.js +1 -4
- package/dist-cjs/lib/ui/components/PageMenu/PageItemInput.js.map +2 -2
- package/dist-cjs/lib/ui/components/SharePanel/DefaultPeopleMenuFacePile.js +1 -1
- package/dist-cjs/lib/ui/components/SharePanel/DefaultPeopleMenuFacePile.js.map +2 -2
- package/dist-cjs/lib/ui/components/SharePanel/DefaultUserPresenceEditor.js +1 -3
- package/dist-cjs/lib/ui/components/SharePanel/DefaultUserPresenceEditor.js.map +2 -2
- package/dist-cjs/lib/ui/components/SharePanel/UserPresenceColorPicker.js +2 -5
- package/dist-cjs/lib/ui/components/SharePanel/UserPresenceColorPicker.js.map +3 -3
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js +1 -1
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.js +73 -71
- package/dist-cjs/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.js.map +2 -2
- package/dist-cjs/lib/ui/components/Toolbar/AltTextEditor.js +5 -8
- package/dist-cjs/lib/ui/components/Toolbar/AltTextEditor.js.map +2 -2
- package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js +40 -55
- package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/Toolbar/DefaultRichTextToolbar.js +1 -4
- package/dist-cjs/lib/ui/components/Toolbar/DefaultRichTextToolbar.js.map +2 -2
- package/dist-cjs/lib/ui/components/Toolbar/DefaultToolbar.js +4 -4
- package/dist-cjs/lib/ui/components/Toolbar/DefaultToolbar.js.map +2 -2
- package/dist-cjs/lib/ui/components/Toolbar/DefaultToolbarContent.js +3 -4
- package/dist-cjs/lib/ui/components/Toolbar/DefaultToolbarContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js +2 -4
- package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js.map +3 -3
- package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js +3 -7
- package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js.map +2 -2
- package/dist-cjs/lib/ui/components/menu-items.js +16 -14
- package/dist-cjs/lib/ui/components/menu-items.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js +6 -17
- package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js.map +3 -3
- package/dist-cjs/lib/ui/components/primitives/TldrawUiDropdownMenu.js +1 -1
- package/dist-cjs/lib/ui/components/primitives/TldrawUiDropdownMenu.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiIcon.js +1 -1
- package/dist-cjs/lib/ui/components/primitives/TldrawUiIcon.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiInput.js +12 -28
- package/dist-cjs/lib/ui/components/primitives/TldrawUiInput.js.map +3 -3
- package/dist-cjs/lib/ui/components/primitives/TldrawUiPopover.js +2 -3
- package/dist-cjs/lib/ui/components/primitives/TldrawUiPopover.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js +1 -3
- package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js +1 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +24 -56
- package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/layout.js +13 -18
- package/dist-cjs/lib/ui/components/primitives/layout.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.js +22 -34
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuGroup.js +6 -27
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuGroup.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +30 -33
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuSubmenu.js +2 -1
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuSubmenu.js.map +2 -2
- package/dist-cjs/lib/ui/context/TldrawUiContextProvider.js.map +2 -2
- package/dist-cjs/lib/ui/context/actions.js +119 -213
- package/dist-cjs/lib/ui/context/actions.js.map +2 -2
- package/dist-cjs/lib/ui/getLocalFiles.js +2 -2
- package/dist-cjs/lib/ui/getLocalFiles.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/clipboard/pasteUrl.js +9 -2
- package/dist-cjs/lib/ui/hooks/clipboard/pasteUrl.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/menu-hooks.js +17 -62
- package/dist-cjs/lib/ui/hooks/menu-hooks.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/useClipboardEvents.js +74 -115
- package/dist-cjs/lib/ui/hooks/useClipboardEvents.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/useFlatten.js +3 -9
- package/dist-cjs/lib/ui/hooks/useFlatten.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/useKeyboardShortcuts.js +32 -67
- package/dist-cjs/lib/ui/hooks/useKeyboardShortcuts.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/usePrint.js +5 -7
- package/dist-cjs/lib/ui/hooks/usePrint.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/useRelevantStyles.js +3 -2
- package/dist-cjs/lib/ui/hooks/useRelevantStyles.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/useTranslation/TLUiTranslationKey.js.map +1 -1
- package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js +1 -0
- package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/useTranslation/translations.js +3 -6
- package/dist-cjs/lib/ui/hooks/useTranslation/translations.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/useTranslation/useTranslation.js +11 -26
- package/dist-cjs/lib/ui/hooks/useTranslation/useTranslation.js.map +2 -2
- package/dist-cjs/lib/ui/kbd-utils.js +3 -3
- package/dist-cjs/lib/ui/kbd-utils.js.map +2 -2
- package/dist-cjs/lib/ui/overrides.js +11 -26
- package/dist-cjs/lib/ui/overrides.js.map +2 -2
- package/dist-cjs/lib/ui/version.js +3 -3
- package/dist-cjs/lib/ui/version.js.map +1 -1
- package/dist-cjs/lib/utils/embeds/embeds.js +1 -1
- package/dist-cjs/lib/utils/embeds/embeds.js.map +2 -2
- package/dist-cjs/lib/utils/excalidraw/putExcalidrawContent.js +15 -4
- package/dist-cjs/lib/utils/excalidraw/putExcalidrawContent.js.map +2 -2
- package/dist-cjs/lib/utils/frames/frames.js +8 -0
- package/dist-cjs/lib/utils/frames/frames.js.map +2 -2
- package/dist-cjs/lib/utils/shapes/shapes.js +11 -1
- package/dist-cjs/lib/utils/shapes/shapes.js.map +2 -2
- package/dist-cjs/lib/utils/text/literalTyping.js +66 -0
- package/dist-cjs/lib/utils/text/literalTyping.js.map +7 -0
- package/dist-cjs/lib/utils/text/richText.js +7 -1
- package/dist-cjs/lib/utils/text/richText.js.map +2 -2
- package/dist-cjs/lib/utils/text/tiptap.js +32 -0
- package/dist-cjs/lib/utils/text/tiptap.js.map +7 -0
- package/dist-cjs/lib/utils/text/wrapSelection.js +150 -0
- package/dist-cjs/lib/utils/text/wrapSelection.js.map +7 -0
- package/dist-esm/index.d.mts +140 -23
- package/dist-esm/index.mjs +27 -1
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/defaultExternalContentHandlers.mjs +10 -1
- package/dist-esm/lib/defaultExternalContentHandlers.mjs.map +2 -2
- package/dist-esm/lib/shapes/arrow/ArrowShapeUtil.mjs +6 -6
- package/dist-esm/lib/shapes/arrow/ArrowShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/bookmark/BookmarkShapeUtil.mjs +6 -6
- package/dist-esm/lib/shapes/bookmark/BookmarkShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/bookmark/bookmarks.mjs +8 -21
- package/dist-esm/lib/shapes/bookmark/bookmarks.mjs.map +2 -2
- package/dist-esm/lib/shapes/draw/DrawShapeUtil.mjs +5 -2
- package/dist-esm/lib/shapes/draw/DrawShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/draw/toolStates/Drawing.mjs +17 -14
- package/dist-esm/lib/shapes/draw/toolStates/Drawing.mjs.map +2 -2
- package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs +4 -0
- package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/highlight/HighlightShapeUtil.mjs +3 -4
- package/dist-esm/lib/shapes/highlight/HighlightShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs +25 -9
- package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs.map +3 -3
- package/dist-esm/lib/shapes/line/LineShapeUtil.mjs +18 -7
- package/dist-esm/lib/shapes/line/LineShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/note/DefaultNoteShapeAttribution.mjs +41 -0
- package/dist-esm/lib/shapes/note/DefaultNoteShapeAttribution.mjs.map +7 -0
- package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs +31 -25
- package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/note/noteHelpers.mjs +7 -2
- package/dist-esm/lib/shapes/note/noteHelpers.mjs.map +2 -2
- package/dist-esm/lib/shapes/note/toolStates/Pointing.mjs +4 -4
- package/dist-esm/lib/shapes/note/toolStates/Pointing.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/crop.mjs +13 -24
- package/dist-esm/lib/shapes/shared/crop.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/useImageOrVideoAsset.mjs +16 -3
- package/dist-esm/lib/shapes/shared/useImageOrVideoAsset.mjs.map +2 -2
- package/dist-esm/lib/shapes/text/RichTextArea.mjs +1 -1
- package/dist-esm/lib/shapes/text/RichTextArea.mjs.map +2 -2
- package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs +6 -1
- package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/DragAndDropManager.mjs +3 -3
- package/dist-esm/lib/tools/SelectTool/DragAndDropManager.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/GestureShapeChangeTracker.mjs +51 -0
- package/dist-esm/lib/tools/SelectTool/GestureShapeChangeTracker.mjs.map +7 -0
- package/dist-esm/lib/tools/SelectTool/childStates/Brushing.mjs +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Brushing.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/Cropping.mjs +41 -6
- package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/Cropping.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/TranslatingCrop.mjs +32 -5
- package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/TranslatingCrop.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/crop_helpers.mjs +1 -1
- package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/crop_helpers.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/DraggingHandle.mjs +17 -23
- package/dist-esm/lib/tools/SelectTool/childStates/DraggingHandle.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/EditingShape.mjs +13 -5
- package/dist-esm/lib/tools/SelectTool/childStates/EditingShape.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Idle.mjs +11 -25
- package/dist-esm/lib/tools/SelectTool/childStates/Idle.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/PointingArrowLabel.mjs +3 -4
- package/dist-esm/lib/tools/SelectTool/childStates/PointingArrowLabel.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/PointingHandle.mjs +13 -3
- package/dist-esm/lib/tools/SelectTool/childStates/PointingHandle.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/PointingShape.mjs +14 -8
- package/dist-esm/lib/tools/SelectTool/childStates/PointingShape.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Resizing.mjs +74 -34
- package/dist-esm/lib/tools/SelectTool/childStates/Resizing.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Rotating.mjs +56 -10
- package/dist-esm/lib/tools/SelectTool/childStates/Rotating.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/childStates/Translating.mjs +117 -43
- package/dist-esm/lib/tools/SelectTool/childStates/Translating.mjs.map +2 -2
- package/dist-esm/lib/tools/SelectTool/selectHelpers.mjs +14 -1
- package/dist-esm/lib/tools/SelectTool/selectHelpers.mjs.map +2 -2
- package/dist-esm/lib/tools/ZoomTool/ZoomTool.mjs +2 -2
- package/dist-esm/lib/tools/ZoomTool/ZoomTool.mjs.map +2 -2
- package/dist-esm/lib/ui/TldrawUi.mjs +7 -12
- package/dist-esm/lib/ui/TldrawUi.mjs.map +3 -3
- package/dist-esm/lib/ui/components/A11y.mjs +12 -23
- package/dist-esm/lib/ui/components/A11y.mjs.map +2 -2
- package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenu.mjs.map +2 -2
- package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.mjs +1 -1
- package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/ContextMenu/DefaultContextMenu.mjs +8 -16
- package/dist-esm/lib/ui/components/ContextMenu/DefaultContextMenu.mjs.map +2 -2
- package/dist-esm/lib/ui/components/CursorChatBubble.mjs +3 -4
- package/dist-esm/lib/ui/components/CursorChatBubble.mjs.map +2 -2
- package/dist-esm/lib/ui/components/DebugMenu/DefaultDebugMenuContent.mjs +10 -43
- package/dist-esm/lib/ui/components/DebugMenu/DefaultDebugMenuContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/DefaultDebugPanel.mjs +2 -8
- package/dist-esm/lib/ui/components/DefaultDebugPanel.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Dialogs.mjs +1 -5
- package/dist-esm/lib/ui/components/Dialogs.mjs.map +2 -2
- package/dist-esm/lib/ui/components/EditLinkDialog.mjs +26 -38
- package/dist-esm/lib/ui/components/EditLinkDialog.mjs.map +2 -2
- package/dist-esm/lib/ui/components/EmbedDialog.mjs +5 -5
- package/dist-esm/lib/ui/components/EmbedDialog.mjs.map +3 -3
- package/dist-esm/lib/ui/components/HelpMenu/DefaultHelpMenuContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/HelperButtons/BackToContent.mjs +8 -8
- package/dist-esm/lib/ui/components/HelperButtons/BackToContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/InputModeMenu.mjs +18 -31
- package/dist-esm/lib/ui/components/InputModeMenu.mjs.map +3 -3
- package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.mjs +16 -0
- package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.mjs.map +2 -2
- package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs +25 -80
- package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs +2 -6
- package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs.map +2 -2
- package/dist-esm/lib/ui/components/MobileStylePanel.mjs +7 -3
- package/dist-esm/lib/ui/components/MobileStylePanel.mjs.map +2 -2
- package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs +13 -20
- package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs.map +2 -2
- package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs +47 -47
- package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs.map +2 -2
- package/dist-esm/lib/ui/components/PageMenu/PageItemInput.mjs +1 -4
- package/dist-esm/lib/ui/components/PageMenu/PageItemInput.mjs.map +2 -2
- package/dist-esm/lib/ui/components/SharePanel/DefaultPeopleMenuFacePile.mjs +1 -1
- package/dist-esm/lib/ui/components/SharePanel/DefaultPeopleMenuFacePile.mjs.map +2 -2
- package/dist-esm/lib/ui/components/SharePanel/DefaultUserPresenceEditor.mjs +1 -3
- package/dist-esm/lib/ui/components/SharePanel/DefaultUserPresenceEditor.mjs.map +2 -2
- package/dist-esm/lib/ui/components/SharePanel/UserPresenceColorPicker.mjs +2 -5
- package/dist-esm/lib/ui/components/SharePanel/UserPresenceColorPicker.mjs.map +3 -3
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs +1 -1
- package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.mjs +73 -71
- package/dist-esm/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/AltTextEditor.mjs +5 -8
- package/dist-esm/lib/ui/components/Toolbar/AltTextEditor.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs +41 -56
- package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/DefaultRichTextToolbar.mjs +1 -4
- package/dist-esm/lib/ui/components/Toolbar/DefaultRichTextToolbar.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/DefaultToolbar.mjs +4 -4
- package/dist-esm/lib/ui/components/Toolbar/DefaultToolbar.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/DefaultToolbarContent.mjs +3 -4
- package/dist-esm/lib/ui/components/Toolbar/DefaultToolbarContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/LinkEditor.mjs +2 -4
- package/dist-esm/lib/ui/components/Toolbar/LinkEditor.mjs.map +3 -3
- package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs +4 -8
- package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs.map +2 -2
- package/dist-esm/lib/ui/components/menu-items.mjs +16 -14
- package/dist-esm/lib/ui/components/menu-items.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs +6 -17
- package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs.map +3 -3
- package/dist-esm/lib/ui/components/primitives/TldrawUiDropdownMenu.mjs +1 -1
- package/dist-esm/lib/ui/components/primitives/TldrawUiDropdownMenu.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiIcon.mjs +1 -1
- package/dist-esm/lib/ui/components/primitives/TldrawUiIcon.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiInput.mjs +12 -28
- package/dist-esm/lib/ui/components/primitives/TldrawUiInput.mjs.map +3 -3
- package/dist-esm/lib/ui/components/primitives/TldrawUiPopover.mjs +2 -3
- package/dist-esm/lib/ui/components/primitives/TldrawUiPopover.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs +1 -3
- package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs +1 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +24 -56
- package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/layout.mjs +13 -18
- package/dist-esm/lib/ui/components/primitives/layout.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.mjs +23 -35
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs +6 -27
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +31 -34
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuSubmenu.mjs +2 -1
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuSubmenu.mjs.map +2 -2
- package/dist-esm/lib/ui/context/TldrawUiContextProvider.mjs.map +2 -2
- package/dist-esm/lib/ui/context/actions.mjs +120 -214
- package/dist-esm/lib/ui/context/actions.mjs.map +2 -2
- package/dist-esm/lib/ui/getLocalFiles.mjs +2 -2
- package/dist-esm/lib/ui/getLocalFiles.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/clipboard/pasteUrl.mjs +9 -2
- package/dist-esm/lib/ui/hooks/clipboard/pasteUrl.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/menu-hooks.mjs +17 -62
- package/dist-esm/lib/ui/hooks/menu-hooks.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useClipboardEvents.mjs +76 -117
- package/dist-esm/lib/ui/hooks/useClipboardEvents.mjs.map +3 -3
- package/dist-esm/lib/ui/hooks/useFlatten.mjs +3 -9
- package/dist-esm/lib/ui/hooks/useFlatten.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useKeyboardShortcuts.mjs +32 -67
- package/dist-esm/lib/ui/hooks/useKeyboardShortcuts.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/usePrint.mjs +5 -7
- package/dist-esm/lib/ui/hooks/usePrint.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useRelevantStyles.mjs +3 -2
- package/dist-esm/lib/ui/hooks/useRelevantStyles.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs +1 -0
- package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useTranslation/translations.mjs +3 -6
- package/dist-esm/lib/ui/hooks/useTranslation/translations.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useTranslation/useTranslation.mjs +11 -26
- package/dist-esm/lib/ui/hooks/useTranslation/useTranslation.mjs.map +2 -2
- package/dist-esm/lib/ui/kbd-utils.mjs +3 -3
- package/dist-esm/lib/ui/kbd-utils.mjs.map +2 -2
- package/dist-esm/lib/ui/overrides.mjs +11 -26
- package/dist-esm/lib/ui/overrides.mjs.map +2 -2
- package/dist-esm/lib/ui/version.mjs +3 -3
- package/dist-esm/lib/ui/version.mjs.map +1 -1
- package/dist-esm/lib/utils/embeds/embeds.mjs +1 -1
- package/dist-esm/lib/utils/embeds/embeds.mjs.map +2 -2
- package/dist-esm/lib/utils/excalidraw/putExcalidrawContent.mjs +15 -4
- package/dist-esm/lib/utils/excalidraw/putExcalidrawContent.mjs.map +2 -2
- package/dist-esm/lib/utils/frames/frames.mjs +8 -0
- package/dist-esm/lib/utils/frames/frames.mjs.map +2 -2
- package/dist-esm/lib/utils/shapes/shapes.mjs +11 -1
- package/dist-esm/lib/utils/shapes/shapes.mjs.map +2 -2
- package/dist-esm/lib/utils/text/literalTyping.mjs +46 -0
- package/dist-esm/lib/utils/text/literalTyping.mjs.map +7 -0
- package/dist-esm/lib/utils/text/richText.mjs +7 -1
- package/dist-esm/lib/utils/text/richText.mjs.map +2 -2
- package/dist-esm/lib/utils/text/tiptap.mjs +21 -0
- package/dist-esm/lib/utils/text/tiptap.mjs.map +7 -0
- package/dist-esm/lib/utils/text/wrapSelection.mjs +136 -0
- package/dist-esm/lib/utils/text/wrapSelection.mjs.map +7 -0
- package/package.json +9 -7
- package/src/index.ts +23 -0
- package/src/lib/defaultExternalContentHandlers.test.ts +52 -0
- package/src/lib/defaultExternalContentHandlers.ts +13 -1
- package/src/lib/shapes/arrow/ArrowShapeUtil.tsx +13 -6
- package/src/lib/shapes/bookmark/BookmarkShapeUtil.tsx +6 -6
- package/src/lib/shapes/bookmark/bookmarks.ts +18 -25
- package/src/lib/shapes/draw/DrawShapeTool.test.ts +88 -0
- package/src/lib/shapes/draw/DrawShapeUtil.test.ts +17 -1
- package/src/lib/shapes/draw/DrawShapeUtil.tsx +8 -2
- package/src/lib/shapes/draw/toolStates/Drawing.ts +23 -16
- package/src/lib/shapes/frame/FrameShapeUtil.tsx +7 -0
- package/src/lib/shapes/highlight/HighlightShapeUtil.test.ts +43 -1
- package/src/lib/shapes/highlight/HighlightShapeUtil.tsx +4 -4
- package/src/lib/shapes/image/ImageShapeUtil.tsx +29 -7
- package/src/lib/shapes/line/LineShapeUtil.test.tsx +27 -4
- package/src/lib/shapes/line/LineShapeUtil.tsx +25 -7
- package/src/lib/shapes/note/DefaultNoteShapeAttribution.tsx +84 -0
- package/src/lib/shapes/note/NoteShapeUtil.tsx +50 -31
- package/src/lib/shapes/note/noteCloning.test.ts +79 -0
- package/src/lib/shapes/note/noteHelpers.ts +12 -1
- package/src/lib/shapes/note/toolStates/Pointing.ts +6 -4
- package/src/lib/shapes/shared/crop.ts +19 -33
- package/src/lib/shapes/shared/useImageOrVideoAsset.test.tsx +153 -0
- package/src/lib/shapes/shared/useImageOrVideoAsset.ts +25 -6
- package/src/lib/shapes/text/RichTextArea.tsx +5 -1
- package/src/lib/shapes/video/VideoShapeUtil.tsx +10 -1
- package/src/lib/tools/SelectTool/DragAndDropManager.ts +6 -3
- package/src/lib/tools/SelectTool/GestureShapeChangeTracker.test.ts +45 -0
- package/src/lib/tools/SelectTool/GestureShapeChangeTracker.ts +76 -0
- package/src/lib/tools/SelectTool/childStates/Brushing.ts +2 -2
- package/src/lib/tools/SelectTool/childStates/Crop/children/Cropping.ts +38 -6
- package/src/lib/tools/SelectTool/childStates/Crop/children/TranslatingCrop.ts +33 -5
- package/src/lib/tools/SelectTool/childStates/Crop/children/crop_helpers.ts +2 -1
- package/src/lib/tools/SelectTool/childStates/DraggingHandle.tsx +22 -27
- package/src/lib/tools/SelectTool/childStates/EditingShape.ts +15 -7
- package/src/lib/tools/SelectTool/childStates/Idle.ts +22 -31
- package/src/lib/tools/SelectTool/childStates/PointingArrowLabel.ts +7 -4
- package/src/lib/tools/SelectTool/childStates/PointingHandle.ts +17 -2
- package/src/lib/tools/SelectTool/childStates/PointingShape.ts +19 -8
- package/src/lib/tools/SelectTool/childStates/Resizing.ts +78 -42
- package/src/lib/tools/SelectTool/childStates/Rotating.ts +51 -11
- package/src/lib/tools/SelectTool/childStates/Translating.ts +142 -46
- package/src/lib/tools/SelectTool/selectHelpers.ts +23 -0
- package/src/lib/tools/ZoomTool/ZoomTool.ts +3 -2
- package/src/lib/ui/TldrawUi.tsx +7 -14
- package/src/lib/ui/components/A11y.tsx +29 -35
- package/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx +0 -4
- package/src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx +7 -8
- package/src/lib/ui/components/ContextMenu/DefaultContextMenu.tsx +11 -19
- package/src/lib/ui/components/CursorChatBubble.tsx +3 -4
- package/src/lib/ui/components/DebugMenu/DefaultDebugMenuContent.tsx +18 -56
- package/src/lib/ui/components/DefaultDebugPanel.tsx +2 -8
- package/src/lib/ui/components/Dialogs.tsx +4 -6
- package/src/lib/ui/components/EditLinkDialog.tsx +31 -61
- package/src/lib/ui/components/EmbedDialog.tsx +20 -22
- package/src/lib/ui/components/HelpMenu/DefaultHelpMenuContent.tsx +1 -0
- package/src/lib/ui/components/HelperButtons/BackToContent.tsx +9 -8
- package/src/lib/ui/components/InputModeMenu.tsx +17 -31
- package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.tsx +16 -0
- package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx +25 -92
- package/src/lib/ui/components/Minimap/MinimapManager.ts +6 -8
- package/src/lib/ui/components/MobileStylePanel.tsx +7 -5
- package/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx +14 -20
- package/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx +53 -59
- package/src/lib/ui/components/PageMenu/PageItemInput.tsx +3 -7
- package/src/lib/ui/components/SharePanel/DefaultPeopleMenuFacePile.tsx +1 -1
- package/src/lib/ui/components/SharePanel/DefaultUserPresenceEditor.tsx +1 -3
- package/src/lib/ui/components/SharePanel/UserPresenceColorPicker.tsx +2 -5
- package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +2 -2
- package/src/lib/ui/components/StylePanel/StylePanelButtonPicker.tsx +1 -1
- package/src/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.tsx +95 -100
- package/src/lib/ui/components/Toolbar/AltTextEditor.tsx +5 -10
- package/src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx +47 -67
- package/src/lib/ui/components/Toolbar/DefaultRichTextToolbar.tsx +1 -5
- package/src/lib/ui/components/Toolbar/DefaultToolbar.tsx +4 -4
- package/src/lib/ui/components/Toolbar/DefaultToolbarContent.tsx +10 -4
- package/src/lib/ui/components/Toolbar/LinkEditor.tsx +2 -6
- package/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx +51 -64
- package/src/lib/ui/components/menu-items.tsx +19 -17
- package/src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx +7 -20
- package/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx +1 -1
- package/src/lib/ui/components/primitives/TldrawUiIcon.tsx +1 -1
- package/src/lib/ui/components/primitives/TldrawUiInput.tsx +15 -31
- package/src/lib/ui/components/primitives/TldrawUiPopover.tsx +2 -3
- package/src/lib/ui/components/primitives/TldrawUiSlider.tsx +1 -3
- package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx +1 -3
- package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +26 -63
- package/src/lib/ui/components/primitives/layout.tsx +22 -30
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx +25 -30
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx +6 -15
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +53 -32
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuSubmenu.tsx +2 -5
- package/src/lib/ui/context/TldrawUiContextProvider.tsx +1 -1
- package/src/lib/ui/context/actions.tsx +127 -229
- package/src/lib/ui/getLocalFiles.ts +2 -2
- package/src/lib/ui/hooks/clipboard/pasteUrl.ts +18 -3
- package/src/lib/ui/hooks/menu-hooks.ts +20 -78
- package/src/lib/ui/hooks/useClipboardEvents.ts +100 -142
- package/src/lib/ui/hooks/useFlatten.ts +3 -9
- package/src/lib/ui/hooks/useKeyboardShortcuts.ts +39 -78
- package/src/lib/ui/hooks/usePrint.ts +5 -8
- package/src/lib/ui/hooks/useRelevantStyles.ts +3 -2
- package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts +1 -0
- package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts +2 -0
- package/src/lib/ui/hooks/useTranslation/translations.ts +3 -7
- package/src/lib/ui/hooks/useTranslation/useTranslation.tsx +13 -27
- package/src/lib/ui/kbd-utils.ts +2 -4
- package/src/lib/ui/overrides.ts +19 -32
- package/src/lib/ui/version.ts +3 -3
- package/src/lib/ui.css +8 -0
- package/src/lib/utils/embeds/embeds.test.ts +9 -0
- package/src/lib/utils/embeds/embeds.ts +4 -1
- package/src/lib/utils/excalidraw/putExcalidrawContent.test.tsx +103 -0
- package/src/lib/utils/excalidraw/putExcalidrawContent.ts +19 -4
- package/src/lib/utils/frames/frames.ts +19 -0
- package/src/lib/utils/shapes/shapes.ts +36 -1
- package/src/lib/utils/text/literalTyping.ts +68 -0
- package/src/lib/utils/text/richText.test.ts +46 -1
- package/src/lib/utils/text/richText.ts +17 -2
- package/src/lib/utils/text/tiptap.test.ts +40 -0
- package/src/lib/utils/text/tiptap.ts +18 -0
- package/src/lib/utils/text/wrapSelection.test.ts +285 -0
- package/src/lib/utils/text/wrapSelection.ts +226 -0
- package/src/test/SelectTool.test.ts +345 -11
- package/src/test/TestEditor.ts +2 -2
- package/src/test/TldrawEditor.test.tsx +192 -12
- package/src/test/ZoomTool.test.ts +9 -0
- package/src/test/bindings.test.tsx +27 -0
- package/src/test/bookmark-shapes.test.ts +77 -0
- package/src/test/commands/animateShapes.test.ts +71 -2
- package/src/test/commands/clipboardPaste.test.ts +181 -1
- package/src/test/commands/getSvgString.test.ts +141 -1
- package/src/test/commands/lockShapes.test.ts +60 -0
- package/src/test/commands/setCamera.test.ts +94 -5
- package/src/test/commands/stackShapes.test.ts +42 -0
- package/src/test/cropping.test.ts +138 -0
- package/src/test/dragDuringCameraAnimation.test.ts +114 -0
- package/src/test/dragFromToolbar-dom.test.tsx +150 -0
- package/src/test/drawing-shift-keyup.test.ts +79 -0
- package/src/test/frames.test.ts +45 -0
- package/src/test/getShapeAtPoint.test.ts +31 -0
- package/src/test/groups.test.tsx +104 -0
- package/src/test/handleDeepLink.test.tsx +15 -0
- package/src/test/maxShapes.test.ts +20 -0
- package/src/test/navigation.test.ts +246 -34
- package/src/test/noteAttributionComponent.test.tsx +92 -0
- package/src/test/noteAttributionExport.test.tsx +69 -0
- package/src/test/pointercancel-dom.test.tsx +326 -0
- package/src/test/resizing.test.ts +59 -0
- package/src/test/resolveAssetsInContent.test.ts +96 -0
- package/src/test/rotating.test.ts +32 -0
- package/src/test/selection-omnibus.test.ts +19 -16
- package/src/test/strange-tools.test.ts +18 -0
- package/src/test/toolbar-tool-selection.test.tsx +45 -0
- package/src/test/translating.test.ts +144 -4
- package/src/test/ui/FrameSelectionMenuItem.test.tsx +115 -0
- package/src/test/ui/changePage.test.tsx +131 -0
- package/src/test/ui/keyboardShortcuts.test.tsx +290 -12
- package/src/test/zoomToUser.test.ts +63 -0
- package/tldraw.css +17 -1
package/DOCS.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# tldraw Documentation
|
|
2
2
|
|
|
3
|
-
Version: `5.
|
|
3
|
+
Version: `5.5.0-canary.003bf5951274`
|
|
4
4
|
|
|
5
5
|
This file is generated during package publishing from the tldraw docs content for this exact package version.
|
|
6
6
|
|
|
@@ -1199,7 +1199,7 @@ See [Collaboration](https://tldraw.dev/sdk-features/collaboration) for productio
|
|
|
1199
1199
|
|
|
1200
1200
|
When you load a snapshot from an older schema version, the store migrates it automatically. For custom shapes, you can define migrations to handle changes to their props over time.
|
|
1201
1201
|
|
|
1202
|
-
See [Persistence](https://tldraw.dev/sdk-features/persistence#
|
|
1202
|
+
See [Persistence](https://tldraw.dev/sdk-features/persistence#Migrations) for details on shape props migrations and general migrations.
|
|
1203
1203
|
|
|
1204
1204
|
#### Examples
|
|
1205
1205
|
|
|
@@ -1419,7 +1419,7 @@ function MyApp() {
|
|
|
1419
1419
|
}
|
|
1420
1420
|
```
|
|
1421
1421
|
|
|
1422
|
-
Comment records are opt-in, so register `commentSchemaRecords` on your server's schema too, and list the comment record types in the room's `objectTypes` (see [Comments and the object-store lane](https://tldraw.dev/docs/sync#
|
|
1422
|
+
Comment records are opt-in, so register `commentSchemaRecords` on your server's schema too, and list the comment record types in the room's `objectTypes` (see [Comments and the object-store lane](https://tldraw.dev/docs/sync#Comments-and-the-object-store-lane)). Commenting is a licensed feature. See the [commenting overview](https://tldraw.dev/docs/commenting) for an introduction, or the [commenting reference](https://tldraw.dev/sdk-features/commenting) for anchors, options, and server setup.
|
|
1423
1423
|
|
|
1424
1424
|
#### Using other backends
|
|
1425
1425
|
|
|
@@ -1772,7 +1772,7 @@ import { CommentTool } from '@tldraw/commenting'
|
|
|
1772
1772
|
const tools = [CommentTool.configure({ enableRegions: true })]
|
|
1773
1773
|
```
|
|
1774
1774
|
|
|
1775
|
-
The option worth knowing about first is `history`. Comment writes default to `'ignore'`, which keeps them off the undo stack, and that default matters in a shared document: an undoable resolve would revert a thread a collaborator has since reopened. Deletes are never undoable, whatever `history` says. See [Comments and undo](https://tldraw.dev/sdk-features/commenting#
|
|
1775
|
+
The option worth knowing about first is `history`. Comment writes default to `'ignore'`, which keeps them off the undo stack, and that default matters in a shared document: an undoable resolve would revert a thread a collaborator has since reopened. Deletes are never undoable, whatever `history` says. See [Comments and undo](https://tldraw.dev/sdk-features/commenting#Comments-and-undo).
|
|
1776
1776
|
|
|
1777
1777
|
#### Permissions
|
|
1778
1778
|
|
|
@@ -1784,7 +1784,7 @@ They're UI-level controls and nothing more. Comment records carry a client-suppl
|
|
|
1784
1784
|
|
|
1785
1785
|
Comments sync like the rest of your document, with one registration on each side. Pass `records: commentSchemaRecords` to your sync hook, and the same map to `createTLSchema` on the server.
|
|
1786
1786
|
|
|
1787
|
-
On the server you can go a step further and serve comments through the room's object-store lane. Lane records are gated by their own per-session permission rather than by `isReadonly`, which is how a viewer who can't edit the document can still comment. See [Syncing comments](https://tldraw.dev/sdk-features/commenting#
|
|
1787
|
+
On the server you can go a step further and serve comments through the room's object-store lane. Lane records are gated by their own per-session permission rather than by `isReadonly`, which is how a viewer who can't edit the document can still comment. See [Syncing comments](https://tldraw.dev/sdk-features/commenting#Syncing-comments).
|
|
1788
1788
|
|
|
1789
1789
|
#### Related
|
|
1790
1790
|
|
|
@@ -2094,7 +2094,7 @@ function MyApp() {
|
|
|
2094
2094
|
Use `createTLSchema` to create a store schema, and pass that into `TLSocketRoom`. You can
|
|
2095
2095
|
use shape/binding utils here, but the schema only reads three properties:
|
|
2096
2096
|
[`props`](https://tldraw.dev/reference/editor/ShapeUtil#props), `meta`, and
|
|
2097
|
-
[`migrations`](https://tldraw.dev/sdk-features/persistence#
|
|
2097
|
+
[`migrations`](https://tldraw.dev/sdk-features/persistence#Migrations). You need to provide the default shape
|
|
2098
2098
|
schemas if you're using them.
|
|
2099
2099
|
|
|
2100
2100
|
```tsx
|
|
@@ -2490,12 +2490,12 @@ By default the diagram is centered on the viewport, or on the pointer when the u
|
|
|
2490
2490
|
|
|
2491
2491
|
#### Supported diagram types
|
|
2492
2492
|
|
|
2493
|
-
| Diagram type | Mermaid keyword | What you get
|
|
2494
|
-
| ---------------- | --------------------------------- |
|
|
2495
|
-
| Flowchart | `flowchart`, `graph` | Geo shapes, arrows, subgraph containers
|
|
2496
|
-
| Sequence diagram | `sequenceDiagram` | Actor shapes, lifelines, signal arrows, fragment containers
|
|
2497
|
-
| State diagram | `stateDiagram`, `stateDiagram-v2` | State shapes, transitions, compound state containers, fork/join, choice
|
|
2498
|
-
| Mindmap | `mindmap` | Colored geo shapes, parent-child edges, tree hierarchy
|
|
2493
|
+
| Diagram type | Mermaid keyword | What you get |
|
|
2494
|
+
| ---------------- | --------------------------------- | ------------------------------------------------------------------------------ |
|
|
2495
|
+
| Flowchart | `flowchart`, `graph` | Geo shapes, arrows, subgraph containers |
|
|
2496
|
+
| Sequence diagram | `sequenceDiagram` | Actor shapes, lifelines, signal arrows, fragment containers, participant boxes |
|
|
2497
|
+
| State diagram | `stateDiagram`, `stateDiagram-v2` | State shapes, transitions, compound state containers, fork/join, choice |
|
|
2498
|
+
| Mindmap | `mindmap` | Colored geo shapes, parent-child edges, tree hierarchy |
|
|
2499
2499
|
|
|
2500
2500
|
Subgraphs, fragments, and compound states become geo rectangles with their child shapes parented to them.
|
|
2501
2501
|
|
|
@@ -2918,7 +2918,7 @@ For example, see `src/components/WhiteboardModal.tsx:92` for UI component overri
|
|
|
2918
2918
|
|
|
2919
2919
|
#### Further reading
|
|
2920
2920
|
|
|
2921
|
-
- **[Custom shape utilities](https://tldraw.dev/docs/shapes#
|
|
2921
|
+
- **[Custom shape utilities](https://tldraw.dev/docs/shapes#Custom-shapes)**: Learn how to create custom shapes with their own interactions.
|
|
2922
2922
|
|
|
2923
2923
|
- **[Editor API](https://tldraw.dev/docs/editor)**: Learn about the tldraw Editor.
|
|
2924
2924
|
|
|
@@ -3454,14 +3454,14 @@ The system prompt is rebuilt for each step in the agentic loop depending on whic
|
|
|
3454
3454
|
You can set an agent's model by calling `setModelName` on the `modelName` manager.
|
|
3455
3455
|
|
|
3456
3456
|
```tsx
|
|
3457
|
-
agent.modelName.setModelName('gemini-3-flash
|
|
3457
|
+
agent.modelName.setModelName('gemini-3.8-flash')
|
|
3458
3458
|
```
|
|
3459
3459
|
|
|
3460
3460
|
To override an agent's model, specify a different model name with a request.
|
|
3461
3461
|
|
|
3462
3462
|
```tsx
|
|
3463
3463
|
agent.prompt({
|
|
3464
|
-
modelName: 'gemini-3-flash
|
|
3464
|
+
modelName: 'gemini-3.8-flash',
|
|
3465
3465
|
message: 'Draw a diagram of a volcano.',
|
|
3466
3466
|
})
|
|
3467
3467
|
```
|
|
@@ -3470,7 +3470,7 @@ You can conditionally override the model name by overriding the `getModelName()`
|
|
|
3470
3470
|
|
|
3471
3471
|
```tsx
|
|
3472
3472
|
override getModelName(part: MyCustomPromptPart) {
|
|
3473
|
-
return part.fastMode ? 'gemini-3-flash
|
|
3473
|
+
return part.fastMode ? 'gemini-3.8-flash' : 'claude-sonnet-5'
|
|
3474
3474
|
}
|
|
3475
3475
|
```
|
|
3476
3476
|
|
|
@@ -3479,10 +3479,14 @@ override getModelName(part: MyCustomPromptPart) {
|
|
|
3479
3479
|
To add support for a different model, add the model's definition to `AGENT_MODEL_DEFINITIONS` in the `shared/models.ts` file.
|
|
3480
3480
|
|
|
3481
3481
|
```tsx
|
|
3482
|
-
'claude-sonnet-
|
|
3483
|
-
name: 'claude-sonnet-
|
|
3484
|
-
id: 'claude-sonnet-
|
|
3482
|
+
'claude-sonnet-5': {
|
|
3483
|
+
name: 'claude-sonnet-5',
|
|
3484
|
+
id: 'claude-sonnet-5',
|
|
3485
3485
|
provider: 'anthropic',
|
|
3486
|
+
supportsPrefill: false,
|
|
3487
|
+
supportsTemperature: false,
|
|
3488
|
+
thinking: 'adaptive',
|
|
3489
|
+
effort: 'low',
|
|
3486
3490
|
}
|
|
3487
3491
|
```
|
|
3488
3492
|
|
|
@@ -3490,7 +3494,7 @@ If you need to add any extra setup or configuration for your provider, you can a
|
|
|
3490
3494
|
|
|
3491
3495
|
##### Support custom shapes
|
|
3492
3496
|
|
|
3493
|
-
If your app includes [custom shapes](https://tldraw.dev/docs/shapes#
|
|
3497
|
+
If your app includes [custom shapes](https://tldraw.dev/docs/shapes#Custom-shapes), the agent will be able to see, move, delete, resize, rotate and arrange them with no extra setup. However, you might want to also let the agent create and edit them, and read their custom properties.
|
|
3494
3498
|
|
|
3495
3499
|
To support custom shapes, you have two main options:
|
|
3496
3500
|
|
|
@@ -3667,7 +3671,7 @@ export function convertFocusedShapeToTldrawShape(
|
|
|
3667
3671
|
|
|
3668
3672
|
- **[Multiplayer starter kit](https://tldraw.dev/starter-kits/multiplayer)**: Use the tldraw multiplayer sync starter kit to build multi-user agent environments.
|
|
3669
3673
|
|
|
3670
|
-
- **[Shape utilities](https://tldraw.dev/docs/shapes#
|
|
3674
|
+
- **[Shape utilities](https://tldraw.dev/docs/shapes#Custom-shapes)**: Learn how to create custom shapes and extend tldraw's shape system with advanced geometry, rendering, and interaction patterns.
|
|
3671
3675
|
|
|
3672
3676
|
- **[Editor state management](https://tldraw.dev/docs/editor)**: Learn how to work with tldraw's reactive state system, editor lifecycle, and event handling for complex canvas applications.
|
|
3673
3677
|
|
|
@@ -3871,7 +3875,7 @@ See `client/connection/ConnectionBindingUtil.tsx` as an example. This file demon
|
|
|
3871
3875
|
#### Further reading
|
|
3872
3876
|
|
|
3873
3877
|
- [Workflow starter kit](https://tldraw.dev/starter-kits/workflow): Learn how to build visual programming interfaces with node-based workflows on infinite canvas.
|
|
3874
|
-
- [Shape utilities](https://tldraw.dev/docs/shapes#
|
|
3878
|
+
- [Shape utilities](https://tldraw.dev/docs/shapes#Custom-shapes): Learn how to create custom shapes and extend tldraw's shape system with advanced geometry, rendering, and interaction patterns.
|
|
3875
3879
|
- [Binding system](https://tldraw.dev/sdk-features/bindings): Learn more about tldraw's binding system for creating relationships between shapes, automatic updates, and connection management.
|
|
3876
3880
|
- [Editor state management](https://tldraw.dev/docs/editor): Learn how to work with tldraw's reactive state system, editor lifecycle, and event handling for complex canvas applications.
|
|
3877
3881
|
|
|
@@ -4199,7 +4203,7 @@ See [`src/fluid/FluidManager.ts`](https://github.com/tldraw/tldraw/tree/main/tem
|
|
|
4199
4203
|
|
|
4200
4204
|
#### Further reading
|
|
4201
4205
|
|
|
4202
|
-
For multi-user shader environments, see the [Multiplayer starter kit](https://tldraw.dev/starter-kits/multiplayer). To create custom shapes with advanced geometry and rendering, see [Shape utilities](https://tldraw.dev/docs/shapes#
|
|
4206
|
+
For multi-user shader environments, see the [Multiplayer starter kit](https://tldraw.dev/starter-kits/multiplayer). To create custom shapes with advanced geometry and rendering, see [Shape utilities](https://tldraw.dev/docs/shapes#Custom-shapes). For working with tldraw's reactive state system and event handling, see [Editor state management](https://tldraw.dev/docs/editor).
|
|
4203
4207
|
|
|
4204
4208
|
---
|
|
4205
4209
|
|
|
@@ -5337,6 +5341,28 @@ Attribution is opt-in per shape type. Each shape util decides what to track and
|
|
|
5337
5341
|
|
|
5338
5342
|
The built-in note shape tracks who last edited its text. Whenever a note's rich text changes and is non-empty, `NoteShapeUtil` sets the `textLastEditedBy` prop to the current user's ID via `editor.getAttributionUserId()`. Clearing the text resets it to `null`, and duplicating or pasting a note with text re-stamps the copy to the current user. The note renders the last editor's first name as a small label in the corner.
|
|
5339
5343
|
|
|
5344
|
+
The label is rendered by the note shape util's `AttributionComponent` option, which you can override or hide with `NoteShapeUtil.configure`, passed through the `shapeUtils` prop. This applies on the canvas and in image exports:
|
|
5345
|
+
|
|
5346
|
+
```tsx
|
|
5347
|
+
import { NoteShapeUtil, Tldraw } from 'tldraw'
|
|
5348
|
+
|
|
5349
|
+
// Hide the attribution badge
|
|
5350
|
+
;<Tldraw shapeUtils={[NoteShapeUtil.configure({ AttributionComponent: null })]} />
|
|
5351
|
+
|
|
5352
|
+
// Or render your own
|
|
5353
|
+
;<Tldraw
|
|
5354
|
+
shapeUtils={[
|
|
5355
|
+
NoteShapeUtil.configure({
|
|
5356
|
+
AttributionComponent: ({ firstName, color }) => (
|
|
5357
|
+
<div className="tl-note__attribution" style={{ color }}>
|
|
5358
|
+
✍️ {firstName}
|
|
5359
|
+
</div>
|
|
5360
|
+
),
|
|
5361
|
+
}),
|
|
5362
|
+
]}
|
|
5363
|
+
/>
|
|
5364
|
+
```
|
|
5365
|
+
|
|
5340
5366
|
#### Reading attribution
|
|
5341
5367
|
|
|
5342
5368
|
The `Editor` provides three methods for working with attribution. `Editor#getAttributionUserId` returns the current user's raw ID string (without the `user:` prefix). `Editor#getAttributionDisplayName` and `Editor#getAttributionUser` check the `TLUserStore` first, then fall back to `user:` records in the store:
|
|
@@ -5433,7 +5459,7 @@ Custom metadata is validated and persisted alongside the standard user fields. A
|
|
|
5433
5459
|
| `createCachedUserResolve` | Create a cached resolve function for `TLUserStore` |
|
|
5434
5460
|
| `createUserRecordType` | Build a user record type with custom meta validators |
|
|
5435
5461
|
|
|
5436
|
-
For setting up user identity in multiplayer, see the [Collaboration](https://tldraw.dev/sdk-features/collaboration#
|
|
5462
|
+
For setting up user identity in multiplayer, see the [Collaboration](https://tldraw.dev/sdk-features/collaboration#User-identity) page.
|
|
5437
5463
|
|
|
5438
5464
|
#### Related examples
|
|
5439
5465
|
|
|
@@ -6067,6 +6093,18 @@ This makes the content portable across editor instances without relying on URLs
|
|
|
6067
6093
|
|
|
6068
6094
|
Cut combines copy and delete. The editor first copies the selected shapes to the clipboard, then deletes the originals, so a failed copy leaves your shapes intact.
|
|
6069
6095
|
|
|
6096
|
+
##### Pasting a link onto a shape
|
|
6097
|
+
|
|
6098
|
+
A url on the clipboard normally becomes a bookmark or an embed. When a single shape that can hold a link is selected — a geo, note, image, video, or bookmark shape — the url becomes that shape's link instead, and nothing is created. Embed shapes are excluded, since their `url` is the embedded content's source.
|
|
6099
|
+
|
|
6100
|
+
The clipboard signals this by setting `shapeId` on the `url` external content, so a custom `url` handler can take over or ignore it:
|
|
6101
|
+
|
|
6102
|
+
```ts
|
|
6103
|
+
editor.registerExternalContentHandler('url', async ({ url, point, shapeId }) => {
|
|
6104
|
+
// ignore shapeId to always create a bookmark
|
|
6105
|
+
})
|
|
6106
|
+
```
|
|
6107
|
+
|
|
6070
6108
|
##### Plain text paste
|
|
6071
6109
|
|
|
6072
6110
|
`Cmd+Shift+V` (or `Ctrl+Shift+V` on Windows and Linux) pastes the clipboard as plain text. HTML and rich formatting are stripped. This is the standard "paste without formatting" shortcut. It's handy when styled text from a browser or word processor would otherwise bring its fonts and colors onto the canvas with it. If the clipboard has no plain text (a copied PNG, say), the shortcut falls through to the normal paste.
|
|
@@ -7576,7 +7614,7 @@ class MyShapeUtil extends ShapeUtil<MyShape> {
|
|
|
7576
7614
|
}
|
|
7577
7615
|
```
|
|
7578
7616
|
|
|
7579
|
-
Shapes whose util overrides `canCull` are subscribed to individually inside the culling derivation, so a `canCull` that reads many props re-runs the derivation more often. Shapes using the default fast path don't pay this cost. Disable culling only for shapes that need it: visual effects that extend past the bounds, shapes that measure their DOM, or animations that should keep running off-screen. See [Performance](https://tldraw.dev/sdk-features/performance#
|
|
7617
|
+
Shapes whose util overrides `canCull` are subscribed to individually inside the culling derivation, so a `canCull` that reads many props re-runs the derivation more often. Shapes using the default fast path don't pay this cost. Disable culling only for shapes that need it: visual effects that extend past the bounds, shapes that measure their DOM, or animations that should keep running off-screen. See [Performance](https://tldraw.dev/sdk-features/performance#Disable-culling-only-when-necessary) for guidance.
|
|
7580
7618
|
|
|
7581
7619
|
#### Related examples
|
|
7582
7620
|
|
|
@@ -7749,7 +7787,7 @@ export default function App() {
|
|
|
7749
7787
|
}
|
|
7750
7788
|
```
|
|
7751
7789
|
|
|
7752
|
-
Remote users' chat messages render as part of the collaborator cursor, in the DOM cursor layer. To customize how they appear, replace the `CollaboratorCursor` component. See [Cursors](https://tldraw.dev/sdk-features/cursors#
|
|
7790
|
+
Remote users' chat messages render as part of the collaborator cursor, in the DOM cursor layer. To customize how they appear, replace the `CollaboratorCursor` component. See [Cursors](https://tldraw.dev/sdk-features/cursors#Rendering-collaborator-cursors) for details.
|
|
7753
7791
|
|
|
7754
7792
|
#### Availability
|
|
7755
7793
|
|
|
@@ -8542,7 +8580,7 @@ const ConfiguredFrameUtil = FrameShapeUtil.configure({
|
|
|
8542
8580
|
})
|
|
8543
8581
|
```
|
|
8544
8582
|
|
|
8545
|
-
To build your own container shape that behaves like a frame, extend `BaseFrameLikeShapeUtil` rather than re-implementing every behavior on `FrameShapeUtil`. The base class provides defaults for clipping children, full-brush selection, blocking erasure from inside, and drag-and-drop reparenting — see [Shapes](https://tldraw.dev/sdk-features/shapes#
|
|
8583
|
+
To build your own container shape that behaves like a frame, extend `BaseFrameLikeShapeUtil` rather than re-implementing every behavior on `FrameShapeUtil`. The base class provides defaults for clipping children, full-brush selection, blocking erasure from inside, and drag-and-drop reparenting — see [Shapes](https://tldraw.dev/sdk-features/shapes#Frames) for details and the [portal shapes example](https://tldraw.dev/examples/shapes/tools/portal-shapes) for a working implementation.
|
|
8546
8584
|
|
|
8547
8585
|
##### Group
|
|
8548
8586
|
|
|
@@ -9155,8 +9193,8 @@ The geometry uses the processed stroke points (after applying streamline and smo
|
|
|
9155
9193
|
|
|
9156
9194
|
#### Related shapes
|
|
9157
9195
|
|
|
9158
|
-
- [Highlight](https://tldraw.dev/sdk-features/default-shapes#
|
|
9159
|
-
- [Line](https://tldraw.dev/sdk-features/default-shapes#
|
|
9196
|
+
- [Highlight](https://tldraw.dev/sdk-features/default-shapes#Highlight) uses the same point capture system but renders semi-transparently for marking up content
|
|
9197
|
+
- [Line](https://tldraw.dev/sdk-features/default-shapes#Line) creates editable multi-point lines with draggable handles
|
|
9160
9198
|
|
|
9161
9199
|
#### Related articles
|
|
9162
9200
|
|
|
@@ -9624,7 +9662,7 @@ editor.updateInstanceState({ isReadonly: true })
|
|
|
9624
9662
|
editor.updateInstanceState({ isToolLocked: true })
|
|
9625
9663
|
```
|
|
9626
9664
|
|
|
9627
|
-
See [Tools](https://tldraw.dev/sdk-features/tools#
|
|
9665
|
+
See [Tools](https://tldraw.dev/sdk-features/tools#Tool-lock) for more on tool lock.
|
|
9628
9666
|
|
|
9629
9667
|
Each page also has instance state (`TLInstancePageState`) tracking selection, hovered shape, and editing shape for that page:
|
|
9630
9668
|
|
|
@@ -9765,7 +9803,7 @@ The shape stores the original URL and renders the embed version.
|
|
|
9765
9803
|
|
|
9766
9804
|
#### Fallback to bookmarks
|
|
9767
9805
|
|
|
9768
|
-
When you paste a URL that no embed definition recognizes, the default URL handler creates a [bookmark shape](https://tldraw.dev/sdk-features/default-shapes#
|
|
9806
|
+
When you paste a URL that no embed definition recognizes, the default URL handler creates a [bookmark shape](https://tldraw.dev/sdk-features/default-shapes#Bookmark) instead of an embed. An existing embed shape whose URL doesn't match any definition still renders the URL in an iframe, using the stricter sandbox for unknown sources.
|
|
9769
9807
|
|
|
9770
9808
|
Use `getEmbedInfo` to check whether a URL is embeddable before creating a shape:
|
|
9771
9809
|
|
|
@@ -9880,7 +9918,7 @@ export default function App() {
|
|
|
9880
9918
|
|
|
9881
9919
|
#### Embed-on-paste behavior
|
|
9882
9920
|
|
|
9883
|
-
By default, pasting a URL from a supported service creates an embed shape. Set `embedOnPaste: false` in the embed definition to create a bookmark instead.
|
|
9921
|
+
By default, pasting a URL from a supported service creates an embed shape. Set `embedOnPaste: false` in the embed definition to create a bookmark instead. Pasting while a single shape that can hold a link is selected sets that shape's link rather than creating either.
|
|
9884
9922
|
|
|
9885
9923
|
The tldraw embed definition sets `embedOnPaste: false`, so pasting a tldraw.com URL creates a bookmark. Separately, embed shapes refuse to render a nested tldraw canvas when the page itself is running inside an iframe, which prevents infinite nesting.
|
|
9886
9924
|
|
|
@@ -9899,7 +9937,7 @@ Embed shapes render as blank rectangles in SVG exports. The iframe content can't
|
|
|
9899
9937
|
#### Related articles
|
|
9900
9938
|
|
|
9901
9939
|
- [Default shapes](https://tldraw.dev/sdk-features/default-shapes) — Overview of all built-in shape types
|
|
9902
|
-
- [Bookmark shape](https://tldraw.dev/sdk-features/default-shapes#
|
|
9940
|
+
- [Bookmark shape](https://tldraw.dev/sdk-features/default-shapes#Bookmark) — URL link cards (fallback for non-embeddable URLs)
|
|
9903
9941
|
- [External content handling](https://tldraw.dev/sdk-features/external-content) — Handling pasted and dropped content
|
|
9904
9942
|
- [Custom embeds example](https://tldraw.dev/examples/configuration/custom-embed) — Add a custom embed definition for a new service
|
|
9905
9943
|
|
|
@@ -10856,7 +10894,7 @@ Empty names render as `Frame` so unnamed frames still get a label. The shape's `
|
|
|
10856
10894
|
|
|
10857
10895
|
Frames clip their children to the frame's rectangle during rendering. A shape that extends past the frame edge is rendered up to the boundary and then cut off. Clipping doesn't change the child's geometry or its own bounds, but hit testing respects the mask: you can't click the clipped-off part of a shape, and `Editor#getShapeMaskedPageBounds` returns only the visible portion. Arrows are exempt from clipping so connectors can leave a frame.
|
|
10858
10896
|
|
|
10859
|
-
The `BaseFrameLikeShapeUtil` base class implements clipping via `getClipPath` and the arrow exemption via `shouldClipChild`. If you need clipping for a custom container shape, see the [Frames](https://tldraw.dev/sdk-features/shapes#
|
|
10897
|
+
The `BaseFrameLikeShapeUtil` base class implements clipping via `getClipPath` and the arrow exemption via `shouldClipChild`. If you need clipping for a custom container shape, see the [Frames](https://tldraw.dev/sdk-features/shapes#Frames) section in the Shapes guide.
|
|
10860
10898
|
|
|
10861
10899
|
#### Shape properties
|
|
10862
10900
|
|
|
@@ -10948,8 +10986,8 @@ Reach for a frame when you want a labeled, bounded region: a slide, a screen, an
|
|
|
10948
10986
|
|
|
10949
10987
|
#### Related articles
|
|
10950
10988
|
|
|
10951
|
-
- [Shapes](https://tldraw.dev/sdk-features/shapes#
|
|
10952
|
-
- [Default shapes](https://tldraw.dev/sdk-features/default-shapes#
|
|
10989
|
+
- [Shapes](https://tldraw.dev/sdk-features/shapes#Frames) — How to build your own container shape with `BaseFrameLikeShapeUtil`
|
|
10990
|
+
- [Default shapes](https://tldraw.dev/sdk-features/default-shapes#Frame) — Overview of all built-in shapes
|
|
10953
10991
|
- [Shape clipping](https://tldraw.dev/sdk-features/shape-clipping) — How custom shapes can clip their children
|
|
10954
10992
|
- [Image export](https://tldraw.dev/sdk-features/image-export) — Exporting frames and selections as images
|
|
10955
10993
|
- [Parenting](https://tldraw.dev/sdk-features/parenting) — How shapes are nested inside containers
|
|
@@ -13214,7 +13252,7 @@ When tool lock is enabled, the current tool stays active after creating a shape
|
|
|
13214
13252
|
editor.updateInstanceState({ isToolLocked: true })
|
|
13215
13253
|
```
|
|
13216
13254
|
|
|
13217
|
-
Custom tools should check this property to decide whether to return to select after completing their action. See [Tools](https://tldraw.dev/sdk-features/tools#
|
|
13255
|
+
Custom tools should check this property to decide whether to return to select after completing their action. See [Tools](https://tldraw.dev/sdk-features/tools#Tool-lock) for implementation details.
|
|
13218
13256
|
|
|
13219
13257
|
##### Cursor customization
|
|
13220
13258
|
|
|
@@ -13273,7 +13311,7 @@ When you switch pages, the instance's `currentPageId` changes, but each page ret
|
|
|
13273
13311
|
- [Cursors](https://tldraw.dev/sdk-features/cursors) — Cursor types and rotation handling
|
|
13274
13312
|
- [Readonly mode](https://tldraw.dev/sdk-features/readonly) — Disable editing with `isReadonly`
|
|
13275
13313
|
- [Focus](https://tldraw.dev/sdk-features/focus) — Editor focus state with `isFocused`
|
|
13276
|
-
- [Tools](https://tldraw.dev/sdk-features/tools#
|
|
13314
|
+
- [Tools](https://tldraw.dev/sdk-features/tools#Tool-lock) — Tool lock behavior with `isToolLocked`
|
|
13277
13315
|
- [User preferences](https://tldraw.dev/sdk-features/user-preferences) — Global preferences that persist across editor instances
|
|
13278
13316
|
|
|
13279
13317
|
#### Related examples
|
|
@@ -13714,7 +13752,7 @@ Even with `ignoreShapeLock: true`, some behaviors remain unchanged: locked shape
|
|
|
13714
13752
|
|
|
13715
13753
|
Some shapes have interactive content that should remain usable even when locked. Embed shapes (YouTube videos, Figma files, interactive maps) are a good example: you might want the embed locked in place but still playable or navigable.
|
|
13716
13754
|
|
|
13717
|
-
[ShapeUtils](https://tldraw.dev/sdk-features/shapes#
|
|
13755
|
+
[ShapeUtils](https://tldraw.dev/sdk-features/shapes#ShapeUtil) can override `ShapeUtil#canEditWhileLocked` (default `false`) to allow editing interactions on locked shapes. The built-in embed shape returns `true` unless its embed definition says otherwise:
|
|
13718
13756
|
|
|
13719
13757
|
```typescript
|
|
13720
13758
|
class MyInteractiveShapeUtil extends ShapeUtil<MyShape> {
|
|
@@ -13821,9 +13859,10 @@ The note's text color is determined by its `labelColor` property. When set to `'
|
|
|
13821
13859
|
|
|
13822
13860
|
Notes support the following configuration options:
|
|
13823
13861
|
|
|
13824
|
-
| Option
|
|
13825
|
-
|
|
|
13826
|
-
| `resizeMode`
|
|
13862
|
+
| Option | Type | Default | Description |
|
|
13863
|
+
| ---------------------- | ------------------------------------------------------ | ----------------------------- | ------------------------------------------------------------------------------------------------- |
|
|
13864
|
+
| `resizeMode` | `'none'` \| `'scale'` | `'none'` | How the note resizes. Set to `'scale'` for manual resize handles. |
|
|
13865
|
+
| `AttributionComponent` | `ComponentType<TLNoteShapeAttributionProps>` \| `null` | `DefaultNoteShapeAttribution` | Component for the attribution badge. Set to `null` to hide it, or provide your own to replace it. |
|
|
13827
13866
|
|
|
13828
13867
|
By default, notes can't be manually resized—they only grow based on text content. To allow user resizing with locked aspect ratio:
|
|
13829
13868
|
|
|
@@ -13846,9 +13885,13 @@ export default function App() {
|
|
|
13846
13885
|
|
|
13847
13886
|
See the [note resizing example](https://tldraw.dev/examples/configuration/resize-note) for a working demo. Other display values, such as `noteWidth`, `noteHeight`, and colors, can be customized through the display value hooks on `NoteShapeUtil` options; see [Themes](https://tldraw.dev/sdk-features/themes).
|
|
13848
13887
|
|
|
13888
|
+
##### Attribution badge
|
|
13889
|
+
|
|
13890
|
+
Notes show the name of the user who last edited their text as a small badge in the corner. This badge is rendered by the `AttributionComponent` option above, which you can override or hide with `NoteShapeUtil.configure`—it applies on the canvas and in image exports. See [attribution](https://tldraw.dev/sdk-features/attribution) for details.
|
|
13891
|
+
|
|
13849
13892
|
#### Dynamic resize mode
|
|
13850
13893
|
|
|
13851
|
-
When `editor.user.getIsDynamicResizeMode()` is true, new notes are created at a scale inversely proportional to the current zoom level, so they stay visually consistent regardless of zoom. `Editor#getResizeScaleFactor` returns that scale. See [Text shape](https://tldraw.dev/sdk-features/text-shape#
|
|
13894
|
+
When `editor.user.getIsDynamicResizeMode()` is true, new notes are created at a scale inversely proportional to the current zoom level, so they stay visually consistent regardless of zoom. `Editor#getResizeScaleFactor` returns that scale. See [Text shape](https://tldraw.dev/sdk-features/text-shape#Dynamic-resize-mode) for details.
|
|
13852
13895
|
|
|
13853
13896
|
#### Related articles
|
|
13854
13897
|
|
|
@@ -13927,7 +13970,7 @@ Control when pointer movement becomes a drag operation:
|
|
|
13927
13970
|
| `uiDragDistanceSquared` | 16 | Distance² for UI element drag (4px) |
|
|
13928
13971
|
| `uiCoarseDragDistanceSquared` | 625 | Distance² for touch UI drag (25px) |
|
|
13929
13972
|
|
|
13930
|
-
Values are squared to avoid computing square roots during drag detection. The larger touch thresholds prevent accidental drags on mobile devices.
|
|
13973
|
+
Values are squared to avoid computing square roots during drag detection. The larger touch thresholds prevent accidental drags on mobile devices. The UI thresholds govern dragging a tool out of the toolbar. A drag starts once the pointer has left the toolbar, so they matter only for presses that begin near its edge.
|
|
13931
13974
|
|
|
13932
13975
|
##### Handle and hit testing
|
|
13933
13976
|
|
|
@@ -14181,7 +14224,7 @@ function App() {
|
|
|
14181
14224
|
}
|
|
14182
14225
|
```
|
|
14183
14226
|
|
|
14184
|
-
See [Embed shape](https://tldraw.dev/sdk-features/embed-shape#
|
|
14227
|
+
See [Embed shape](https://tldraw.dev/sdk-features/embed-shape#Custom-embed-definitions) for the full embed definition API.
|
|
14185
14228
|
|
|
14186
14229
|
##### Editor setup
|
|
14187
14230
|
|
|
@@ -15726,7 +15769,7 @@ TipTap handles the rich text editing experience. The editor appears when users d
|
|
|
15726
15769
|
|
|
15727
15770
|
##### Default extensions
|
|
15728
15771
|
|
|
15729
|
-
`tipTapDefaultExtensions` is TipTap's StarterKit plus tldraw's customizations: the `Highlight` mark, a Shift+Enter tweak, and automatic text direction for right-to-left languages. StarterKit is configured to disable blockquotes, code blocks, and horizontal rules; headings, lists, links, and the standard marks stay on. Links don't open on click during editing, which prevents accidental navigation.
|
|
15772
|
+
`tipTapDefaultExtensions` is TipTap's StarterKit plus tldraw's customizations: the `Highlight` mark, TipTap's `Typography` rules, `WrapSelectionExtension`, a Shift+Enter tweak, and automatic text direction for right-to-left languages. StarterKit is configured to disable blockquotes, code blocks, and horizontal rules; headings, lists, links, and the standard marks stay on. Links don't open on click during editing, which prevents accidental navigation.
|
|
15730
15773
|
|
|
15731
15774
|
To tweak StarterKit without losing tldraw's extensions, build the list with `getTipTapDefaultExtensions`, which accepts StarterKit options:
|
|
15732
15775
|
|
|
@@ -15737,13 +15780,26 @@ import { getTipTapDefaultExtensions } from 'tldraw'
|
|
|
15737
15780
|
const extensions = getTipTapDefaultExtensions({ heading: false })
|
|
15738
15781
|
```
|
|
15739
15782
|
|
|
15783
|
+
##### Typography
|
|
15784
|
+
|
|
15785
|
+
Typography rewrites punctuation as it's typed: quotes curl, `--` becomes an em dash, `...` an ellipsis, `->` an arrow. Backspace immediately after a rewrite restores what was typed. `WrapSelectionExtension` handles the other half: with text selected, typing either half of a bracket or quote pair wraps the selection rather than replacing it, so selecting `hello` and pressing `¡` — or the `!` that closes it, which is on every keyboard — gives `¡hello!`. See `defaultWrappingPairs` for the pairs, which the extension's `pairs` option replaces.
|
|
15786
|
+
|
|
15787
|
+
Code is the exception to both. Typing inside inline code, or between a backtick and the closing one that turns the text into code, leaves punctuation as typed, so `` `say "hi"` `` keeps its straight quotes. Wrapping code in quotes uses straight ones too, and a backtick over a selection toggles the code mark on it instead of wrapping it in literal backticks. Text in a monospace font, such as a shape with the mono font, keeps straight quotes as well, both when typed and when wrapping; the other rewrites still apply there.
|
|
15788
|
+
|
|
15789
|
+
To opt out of either, filter it from the list — both are separate entries in the array, unlike the StarterKit sub-extensions:
|
|
15790
|
+
|
|
15791
|
+
```typescript
|
|
15792
|
+
import { getTipTapDefaultExtensions } from 'tldraw'
|
|
15793
|
+
|
|
15794
|
+
const extensions = getTipTapDefaultExtensions().filter((e) => e.name !== 'typography')
|
|
15795
|
+
```
|
|
15796
|
+
|
|
15740
15797
|
##### Custom extensions
|
|
15741
15798
|
|
|
15742
15799
|
You can add custom TipTap extensions through the `text` field of the `options` prop on the Tldraw component (`TLTextOptions`):
|
|
15743
15800
|
|
|
15744
15801
|
```tsx
|
|
15745
|
-
import { Mark, mergeAttributes } from '
|
|
15746
|
-
import { Tldraw, tipTapDefaultExtensions } from 'tldraw'
|
|
15802
|
+
import { Mark, Tldraw, mergeAttributes, tipTapDefaultExtensions } from 'tldraw'
|
|
15747
15803
|
import 'tldraw/tldraw.css'
|
|
15748
15804
|
|
|
15749
15805
|
const CustomMark = Mark.create({
|
|
@@ -15783,6 +15839,26 @@ export default function App() {
|
|
|
15783
15839
|
|
|
15784
15840
|
The `extensions` array replaces the default list entirely, so spread `tipTapDefaultExtensions` (or the result of `getTipTapDefaultExtensions`) to keep tldraw's defaults. Passing `[StarterKit, CustomMark]` alone drops highlighting and text direction, and StarterKit's default link config opens links on click while editing.
|
|
15785
15841
|
|
|
15842
|
+
##### Importing TipTap
|
|
15843
|
+
|
|
15844
|
+
Import TipTap's building blocks from `tldraw` rather than installing `@tiptap/*` alongside it. tldraw re-exports `Node`, `Mark`, `Extension`, `mergeAttributes`, `getSchema`, the `Extensions` and `JSONContent` types, and the `TaskList` and `TaskItem` extensions from the copy it bundles. Installing your own copy can resolve to a second `@tiptap/core` and ProseMirror, and ProseMirror throws when a schema is built from nodes belonging to two different instances.
|
|
15845
|
+
|
|
15846
|
+
Task lists aren't part of the default extension set. Add them yourself, along with styles for the checkboxes, which tldraw doesn't provide:
|
|
15847
|
+
|
|
15848
|
+
```tsx
|
|
15849
|
+
import { TaskItem, TaskList, tipTapDefaultExtensions } from 'tldraw'
|
|
15850
|
+
|
|
15851
|
+
const options = {
|
|
15852
|
+
text: {
|
|
15853
|
+
tipTapConfig: {
|
|
15854
|
+
extensions: [...tipTapDefaultExtensions, TaskList, TaskItem.configure({ nested: true })],
|
|
15855
|
+
},
|
|
15856
|
+
},
|
|
15857
|
+
}
|
|
15858
|
+
```
|
|
15859
|
+
|
|
15860
|
+
Extensions tldraw doesn't re-export still need their own package. Install them at the same TipTap version tldraw depends on so your package manager dedupes `@tiptap/core` down to a single copy.
|
|
15861
|
+
|
|
15786
15862
|
##### Rich text toolbar
|
|
15787
15863
|
|
|
15788
15864
|
The rich text toolbar appears when editing any rich-text shape (it's hidden on touch devices). It gives you quick access to formatting commands like bold, italic, and lists, and shows which formats are active at the current cursor position.
|
|
@@ -15891,7 +15967,7 @@ The chain API lets you compose multiple operations. Each command returns a chain
|
|
|
15891
15967
|
For operations outside the editing context, you can manipulate the rich text JSON directly. `TLRichText.content` is typed as `unknown[]`, so cast to TipTap's `JSONContent` when walking the tree:
|
|
15892
15968
|
|
|
15893
15969
|
```typescript
|
|
15894
|
-
import { JSONContent } from '
|
|
15970
|
+
import { JSONContent } from 'tldraw'
|
|
15895
15971
|
|
|
15896
15972
|
function makeAllTextBold(richText: TLRichText): TLRichText {
|
|
15897
15973
|
const content = (richText.content as JSONContent[]).map((paragraph) => {
|
|
@@ -18086,7 +18162,7 @@ Snapshots include schema version information. When you load a snapshot from an o
|
|
|
18086
18162
|
const migrated = editor.store.migrateSnapshot(oldSnapshot)
|
|
18087
18163
|
```
|
|
18088
18164
|
|
|
18089
|
-
The migration system handles schema changes between tldraw versions. You can also define migrations for custom shape props and custom record types. See [persistence](https://tldraw.dev/sdk-features/persistence#
|
|
18165
|
+
The migration system handles schema changes between tldraw versions. You can also define migrations for custom shape props and custom record types. See [persistence](https://tldraw.dev/sdk-features/persistence#Migrations) for details.
|
|
18090
18166
|
|
|
18091
18167
|
#### Queries
|
|
18092
18168
|
|
|
@@ -20446,7 +20522,7 @@ export default function App() {
|
|
|
20446
20522
|
|
|
20447
20523
|
Preferences cover visual settings (color scheme, animation speed), interaction settings (snap mode, edge scroll speed), and identity (user name, color, locale). By default the editor stores them in localStorage and syncs them across tabs with a BroadcastChannel.
|
|
20448
20524
|
|
|
20449
|
-
To supply preferences from your own auth or state instead, pass a `user` created with `useTldrawCurrentUser` (or `createTLCurrentUser`) to the `Tldraw` component. Preferences you provide this way are yours to persist and sync. See [Collaboration](https://tldraw.dev/sdk-features/collaboration#
|
|
20525
|
+
To supply preferences from your own auth or state instead, pass a `user` created with `useTldrawCurrentUser` (or `createTLCurrentUser`) to the `Tldraw` component. Preferences you provide this way are yours to persist and sync. See [Collaboration](https://tldraw.dev/sdk-features/collaboration#Integrating-with-useTldrawCurrentUser) for a full example.
|
|
20450
20526
|
|
|
20451
20527
|
#### Reading preferences
|
|
20452
20528
|
|
|
@@ -20527,7 +20603,7 @@ const isDark = editor.user.getIsDarkMode()
|
|
|
20527
20603
|
// true if colorScheme is 'dark', or 'system' with OS in dark mode
|
|
20528
20604
|
```
|
|
20529
20605
|
|
|
20530
|
-
The editor-level `colorScheme` prop sets the default color scheme. When a user preference is set, it takes priority over the prop. See [Themes](https://tldraw.dev/sdk-features/themes#
|
|
20606
|
+
The editor-level `colorScheme` prop sets the default color scheme. When a user preference is set, it takes priority over the prop. See [Themes](https://tldraw.dev/sdk-features/themes#Color-mode) for more.
|
|
20531
20607
|
|
|
20532
20608
|
#### Persistence and synchronization
|
|
20533
20609
|
|
|
@@ -20900,3 +20976,63 @@ While the tldraw SDK is [source available](https://github.com/tldraw/tldraw), it
|
|
|
20900
20976
|
If you wish to include tldraw in an open source project, you may do so but the SDK itself must remain under its original license. This means that you and your downstream users will require their own trial, commercial, or hobby license in order to use the SDK in production. In this case, please also see our [trademark guidelines](https://tldraw.dev/legal/trademark-guidelines) that limit the use of the tldraw name and branding.
|
|
20901
20977
|
|
|
20902
20978
|
The tldraw SDK is a product of a company. See [tldraw.dev](https://tldraw.dev/company) for more information about the company and the team.
|
|
20979
|
+
|
|
20980
|
+
### Dependencies
|
|
20981
|
+
|
|
20982
|
+
{/* This page is generated by `yarn license-report --prod`. Do not edit it by hand. */}
|
|
20983
|
+
|
|
20984
|
+
The tldraw SDK itself is published under the [tldraw license](https://tldraw.dev/legal/tldraw-license). It also depends on the third-party packages listed below, each under its own license.
|
|
20985
|
+
|
|
20986
|
+
This covers the runtime dependencies that the `@tldraw/*` packages declare directly. It does not include their own transitive dependencies, our development and build tooling, or anything in the tldraw.com application. If you need a full transitive list for the exact versions you have installed, generate one from your own lockfile.
|
|
20987
|
+
|
|
20988
|
+
#### Dependencies
|
|
20989
|
+
|
|
20990
|
+
| Dependency | Version | License | Used by |
|
|
20991
|
+
| -------------------------------------------------------------------- | ------- | ------- | -------------------------------------------- |
|
|
20992
|
+
| [@tiptap/core](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `commenting`, `editor`, `mentions`, `tldraw` |
|
|
20993
|
+
| [@tiptap/extension-code](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `tldraw` |
|
|
20994
|
+
| [@tiptap/extension-highlight](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `tldraw` |
|
|
20995
|
+
| [@tiptap/extension-list](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `tldraw` |
|
|
20996
|
+
| [@tiptap/extension-mention](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `mentions` |
|
|
20997
|
+
| [@tiptap/extension-typography](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `tldraw` |
|
|
20998
|
+
| [@tiptap/pm](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `commenting`, `editor`, `mentions`, `tldraw` |
|
|
20999
|
+
| [@tiptap/react](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `commenting`, `editor`, `mentions`, `tldraw` |
|
|
21000
|
+
| [@tiptap/starter-kit](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `tldraw` |
|
|
21001
|
+
| [@tiptap/suggestion](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `mentions` |
|
|
21002
|
+
| [classnames](https://github.com/JedWatson/classnames) | 2.5.1 | MIT | `editor`, `tldraw` |
|
|
21003
|
+
| [eventemitter3](https://github.com/primus/eventemitter3) | 4.0.7 | MIT | `editor` |
|
|
21004
|
+
| [idb](https://github.com/jakearchibald/idb) | 7.1.1 | ISC | `editor`, `tldraw` |
|
|
21005
|
+
| [is-plain-object](https://github.com/jonschlinkert/is-plain-object) | 5.0.0 | MIT | `editor` |
|
|
21006
|
+
| [lodash.isequal](https://github.com/lodash/lodash) | 4.5.0 | MIT | `utils` |
|
|
21007
|
+
| [lodash.isequalwith](https://github.com/lodash/lodash) | 4.4.0 | MIT | `utils` |
|
|
21008
|
+
| [lodash.throttle](https://github.com/lodash/lodash) | 4.1.1 | MIT | `utils` |
|
|
21009
|
+
| [lodash.uniq](https://github.com/lodash/lodash) | 4.5.0 | MIT | `utils` |
|
|
21010
|
+
| [lz-string](https://github.com/pieroxy/lz-string) | 1.5.0 | MIT | `tldraw` |
|
|
21011
|
+
| [mermaid](https://github.com/mermaid-js/mermaid) | 11.16.1 | MIT | `mermaid` |
|
|
21012
|
+
| [nanoevents](https://github.com/ai/nanoevents) | 7.0.1 | MIT | `sync`, `sync-core` |
|
|
21013
|
+
| [radix-ui](https://github.com/radix-ui/primitives) | 1.4.2 | MIT | `tldraw` |
|
|
21014
|
+
| [rbush](https://github.com/mourner/rbush) | 3.0.1 | MIT | `editor` |
|
|
21015
|
+
| [ws](https://github.com/websockets/ws) | 8.21.0 | MIT | `sync`, `sync-core` |
|
|
21016
|
+
|
|
21017
|
+
#### Inline code
|
|
21018
|
+
|
|
21019
|
+
Some third-party code is included directly in our source rather than as a dependency. Each of these files carries its license in a comment at the top.
|
|
21020
|
+
|
|
21021
|
+
| File | License | Copyright |
|
|
21022
|
+
| ---------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
|
|
21023
|
+
| `packages/create-tldraw/src/group-select.ts` | [MIT](https://github.com/bombshell-dev/clack/blob/1adb270af5509ead3d22c4fa602b465f39c7a8c2/packages/prompts/LICENSE) | Nate Moore |
|
|
21024
|
+
| `packages/create-tldraw/src/wrap-ansi.ts` | [MIT](https://github.com/chalk/wrap-ansi/blob/163b878a6eb5d8c32b7bbea65036eeadc0e4def9/license) | Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com) |
|
|
21025
|
+
| `packages/editor/src/lib/hooks/useScreenBounds.ts` | [MIT](https://github.com/excalidraw/excalidraw/blob/master/LICENSE) | |
|
|
21026
|
+
| `packages/editor/src/lib/hooks/useViewportHeight.ts` | [BSD](https://github.com/outline/rich-markdown-editor/blob/main/LICENSE) | 2020 General Outline, Inc (https://www.getoutline.com/) and individual contributors. |
|
|
21027
|
+
| `packages/editor/src/lib/utils/browserCanvasMaxSize.ts` | [MIT](https://github.com/jhildenbiddle/canvas-size/blob/master/LICENSE) | John Hildenbiddle |
|
|
21028
|
+
| `packages/store/src/lib/ImmutableMap.ts` | [MIT](https://github.com/immutable-js/immutable-js/blob/main/LICENSE) | 2014-present, Lee Byron and other contributors. |
|
|
21029
|
+
| `packages/tldraw/src/lib/shapes/shared/PathBuilder.tsx` | [Apache](https://github.com/adobe-webplatform/Snap.svg/blob/master/LICENSE) | |
|
|
21030
|
+
| `packages/tldraw/src/lib/ui/hooks/useKeyboardShortcuts.ts` | [MIT](https://github.com/jaywcjlove/hotkeys-js/blob/master/LICENSE) | 2015-present, Kenny Wong |
|
|
21031
|
+
| `packages/tldraw/src/lib/ui/kbd-utils.ts` | [MIT](https://github.com/jaywcjlove/hotkeys-js/blob/master/LICENSE) | 2015-present, Kenny Wong |
|
|
21032
|
+
| `packages/tldraw/src/lib/utils/svg/sanitizeSvg.ts` | MIT | 2015 Mario Heiderich |
|
|
21033
|
+
| `packages/utils/src/lib/bind.ts` | [MIT](https://github.com/NoHomey/bind-decorator/blob/master/License) | 2016 Ivo Stratev |
|
|
21034
|
+
| `packages/utils/src/lib/id.ts` | [MIT](https://github.com/ai/nanoid/blob/main/LICENSE) | 2017 Andrey Sitnik <andrey@sitnik.ru> |
|
|
21035
|
+
| `packages/utils/src/lib/media/apng.ts` | [MIT](https://github.com/vHeemstra/is-apng/blob/main/license) | Philip van Heemstra |
|
|
21036
|
+
| `packages/utils/src/lib/media/gif.ts` | MIT | 2016 Józef Sokołowski <j.k.sokolowski@gmail.com> |
|
|
21037
|
+
| `packages/utils/src/lib/media/png.ts` | [MIT](https://github.com/alexgorbatchev/crc/blob/master/LICENSE) | 2014 Alex Gorbatchev |
|
|
21038
|
+
| `packages/utils/src/lib/media/webp.ts` | [MIT](https://github.com/sindresorhus/is-webp/blob/main/license) | Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com) |
|
package/RELEASE_NOTES.md
CHANGED
|
@@ -1,23 +1,9 @@
|
|
|
1
1
|
# Releases
|
|
2
2
|
|
|
3
|
-
Version: `5.
|
|
3
|
+
Version: `5.5.0-canary.003bf5951274`
|
|
4
4
|
|
|
5
5
|
This file is generated during package publishing from the tldraw release notes content for this exact package version.
|
|
6
6
|
|
|
7
|
-
## v5.4.2
|
|
8
|
-
|
|
9
|
-
So far this release is a set of fixes: camera coasting and edge scrolling now move at the same rate on high-refresh displays, rotated images stay put when a crop changes their size, and embed hostname matching no longer trusts lookalike hosts.
|
|
10
|
-
|
|
11
|
-
### Bug fixes
|
|
12
|
-
|
|
13
|
-
- Fix camera coasting after a fling, and edge scrolling, running roughly twice as fast on a 120 Hz display as on a 60 Hz one. Both now scale by the elapsed tick time, so motion per second is the same at any refresh rate. ([#10501](https://github.com/tldraw/tldraw/pull/10501))
|
|
14
|
-
- Fix rotated images jumping on the canvas when their aspect ratio or crop zoom changed, or when the image was replaced. ([#10233](https://github.com/tldraw/tldraw/pull/10233))
|
|
15
|
-
- Fix embed hostname matching trusting lookalike hosts such as `tldraw.com.evil.io`, which were rendered with the matched definition's relaxed iframe permissions. A host must now be the pattern itself or a subdomain of it. ([#10196](https://github.com/tldraw/tldraw/pull/10196))
|
|
16
|
-
- Fix geometry hit tests, nearest-point, and length calculations losing precision after a shape's SVG path data was generated. `getSvgPathData` rounded the geometry's stored points to two decimals in place, and geometries are cached per shape, so every later calculation used the rounded points. ([#10600](https://github.com/tldraw/tldraw/pull/10600))
|
|
17
|
-
- Fix keyboard shape navigation, and `Editor.selectAdjacentShape('prev')`, selecting the second-to-last shape instead of the last one when nothing is selected. ([#10601](https://github.com/tldraw/tldraw/pull/10601))
|
|
18
|
-
- Fix `Editor.getCurrentTheme()` returning `undefined` after `setCurrentTheme()` was called with an unregistered theme id. The call is now rejected and the current theme is kept. ([#10602](https://github.com/tldraw/tldraw/pull/10602))
|
|
19
|
-
- Fix `Group2d.transform` dropping its ignored children, resetting the `isInternal`, `excludeFromShapeBounds`, and `isEmptyLabel` flags, and discarding its `opts` argument. It now matches the base `Geometry2d.transform` signature. ([#10603](https://github.com/tldraw/tldraw/pull/10603))
|
|
20
|
-
|
|
21
7
|
## v5.4.0
|
|
22
8
|
|
|
23
9
|
[View on GitHub](https://github.com/tldraw/tldraw/releases/tag/v5.4.0)
|
|
@@ -191,6 +177,16 @@ This release adds a `center` operation to `Editor.alignShapes`, a `tleditors` re
|
|
|
191
177
|
- Fix the `store.query.ids()` query creator being called with a computed's `(previousValue, epoch)` arguments. ([#10218](https://github.com/tldraw/tldraw/pull/10218))
|
|
192
178
|
- Fix `CollectionDiff`s from `store.query.ids()` and `index()` containing an empty `added` or `removed` set after an add/remove round trip. ([#10221](https://github.com/tldraw/tldraw/pull/10221))
|
|
193
179
|
|
|
180
|
+
---
|
|
181
|
+
|
|
182
|
+
### Patch releases
|
|
183
|
+
|
|
184
|
+
#### v5.4.1
|
|
185
|
+
|
|
186
|
+
- Fix the context menu not reopening after a left-click dismissal when radix-ui 1.5 or later is installed. ([#10567](https://github.com/tldraw/tldraw/pull/10567))
|
|
187
|
+
|
|
188
|
+
[View release on GitHub](https://github.com/tldraw/tldraw/releases/tag/v5.4.1)
|
|
189
|
+
|
|
194
190
|
## v5.3.0
|
|
195
191
|
|
|
196
192
|
[View on GitHub](https://github.com/tldraw/tldraw/releases/tag/v5.3.0)
|
|
@@ -1401,7 +1397,7 @@ declare module 'tldraw' {
|
|
|
1401
1397
|
type MyBinding = TLBinding`<'my-binding'>`
|
|
1402
1398
|
```
|
|
1403
1399
|
|
|
1404
|
-
See the [Custom Shapes Guide](https://tldraw.dev/docs/shapes#
|
|
1400
|
+
See the [Custom Shapes Guide](https://tldraw.dev/docs/shapes#Custom-shapes) and the [Pin Bindings example](https://github.com/tldraw/tldraw/tree/main/apps/examples/src/examples/shapes/tools/pin-bindings) for details.
|
|
1405
1401
|
|
|
1406
1402
|
**After registering, remove the `TLBaseShape` import** — it's no longer used and will trip lint rules that flag unused imports.
|
|
1407
1403
|
|