tldraw 5.5.0-next.f9308d324e1c → 5.5.1

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.
Files changed (622) hide show
  1. package/DOCS.md +161 -78
  2. package/RELEASE_NOTES.md +402 -2
  3. package/dist-cjs/index.d.ts +140 -23
  4. package/dist-cjs/index.js +14 -1
  5. package/dist-cjs/index.js.map +2 -2
  6. package/dist-cjs/lib/defaultExternalContentHandlers.js +10 -1
  7. package/dist-cjs/lib/defaultExternalContentHandlers.js.map +2 -2
  8. package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.js +5 -6
  9. package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.js.map +2 -2
  10. package/dist-cjs/lib/shapes/arrow/toolStates/Idle.js +3 -3
  11. package/dist-cjs/lib/shapes/arrow/toolStates/Idle.js.map +2 -2
  12. package/dist-cjs/lib/shapes/arrow/toolStates/Pointing.js +1 -1
  13. package/dist-cjs/lib/shapes/arrow/toolStates/Pointing.js.map +2 -2
  14. package/dist-cjs/lib/shapes/bookmark/BookmarkShapeUtil.js +5 -5
  15. package/dist-cjs/lib/shapes/bookmark/BookmarkShapeUtil.js.map +2 -2
  16. package/dist-cjs/lib/shapes/bookmark/bookmarks.js +8 -21
  17. package/dist-cjs/lib/shapes/bookmark/bookmarks.js.map +2 -2
  18. package/dist-cjs/lib/shapes/draw/DrawShapeUtil.js +5 -2
  19. package/dist-cjs/lib/shapes/draw/DrawShapeUtil.js.map +2 -2
  20. package/dist-cjs/lib/shapes/draw/toolStates/Drawing.js +17 -14
  21. package/dist-cjs/lib/shapes/draw/toolStates/Drawing.js.map +2 -2
  22. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js +3 -0
  23. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js.map +2 -2
  24. package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js +4 -2
  25. package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js.map +2 -2
  26. package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js +3 -4
  27. package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js.map +2 -2
  28. package/dist-cjs/lib/shapes/image/ImageShapeUtil.js +25 -9
  29. package/dist-cjs/lib/shapes/image/ImageShapeUtil.js.map +3 -3
  30. package/dist-cjs/lib/shapes/line/LineShapeUtil.js +18 -7
  31. package/dist-cjs/lib/shapes/line/LineShapeUtil.js.map +2 -2
  32. package/dist-cjs/lib/shapes/note/DefaultNoteShapeAttribution.js +61 -0
  33. package/dist-cjs/lib/shapes/note/DefaultNoteShapeAttribution.js.map +7 -0
  34. package/dist-cjs/lib/shapes/note/NoteShapeUtil.js +24 -24
  35. package/dist-cjs/lib/shapes/note/NoteShapeUtil.js.map +2 -2
  36. package/dist-cjs/lib/shapes/note/noteHelpers.js +7 -2
  37. package/dist-cjs/lib/shapes/note/noteHelpers.js.map +2 -2
  38. package/dist-cjs/lib/shapes/note/toolStates/Pointing.js +4 -4
  39. package/dist-cjs/lib/shapes/note/toolStates/Pointing.js.map +2 -2
  40. package/dist-cjs/lib/shapes/shared/useImageOrVideoAsset.js +16 -3
  41. package/dist-cjs/lib/shapes/shared/useImageOrVideoAsset.js.map +2 -2
  42. package/dist-cjs/lib/shapes/text/RichTextArea.js +1 -1
  43. package/dist-cjs/lib/shapes/text/RichTextArea.js.map +2 -2
  44. package/dist-cjs/lib/shapes/video/VideoShapeUtil.js +6 -1
  45. package/dist-cjs/lib/shapes/video/VideoShapeUtil.js.map +2 -2
  46. package/dist-cjs/lib/tools/SelectTool/DragAndDropManager.js +4 -4
  47. package/dist-cjs/lib/tools/SelectTool/DragAndDropManager.js.map +2 -2
  48. package/dist-cjs/lib/tools/SelectTool/GestureShapeChangeTracker.js +71 -0
  49. package/dist-cjs/lib/tools/SelectTool/GestureShapeChangeTracker.js.map +7 -0
  50. package/dist-cjs/lib/tools/SelectTool/childStates/Brushing.js +2 -2
  51. package/dist-cjs/lib/tools/SelectTool/childStates/Brushing.js.map +2 -2
  52. package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/Cropping.js +38 -6
  53. package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/Cropping.js.map +2 -2
  54. package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/PointingCrop.js +11 -2
  55. package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/PointingCrop.js.map +2 -2
  56. package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/PointingCropHandle.js +9 -2
  57. package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/PointingCropHandle.js.map +2 -2
  58. package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/TranslatingCrop.js +26 -4
  59. package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/TranslatingCrop.js.map +2 -2
  60. package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/crop_helpers.js +1 -1
  61. package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/crop_helpers.js.map +2 -2
  62. package/dist-cjs/lib/tools/SelectTool/childStates/DraggingHandle.js +18 -24
  63. package/dist-cjs/lib/tools/SelectTool/childStates/DraggingHandle.js.map +2 -2
  64. package/dist-cjs/lib/tools/SelectTool/childStates/EditingShape.js +13 -5
  65. package/dist-cjs/lib/tools/SelectTool/childStates/EditingShape.js.map +2 -2
  66. package/dist-cjs/lib/tools/SelectTool/childStates/Idle.js +8 -25
  67. package/dist-cjs/lib/tools/SelectTool/childStates/Idle.js.map +2 -2
  68. package/dist-cjs/lib/tools/SelectTool/childStates/PointingArrowLabel.js +3 -4
  69. package/dist-cjs/lib/tools/SelectTool/childStates/PointingArrowLabel.js.map +2 -2
  70. package/dist-cjs/lib/tools/SelectTool/childStates/PointingHandle.js +11 -2
  71. package/dist-cjs/lib/tools/SelectTool/childStates/PointingHandle.js.map +2 -2
  72. package/dist-cjs/lib/tools/SelectTool/childStates/PointingResizeHandle.js +11 -2
  73. package/dist-cjs/lib/tools/SelectTool/childStates/PointingResizeHandle.js.map +2 -2
  74. package/dist-cjs/lib/tools/SelectTool/childStates/PointingRotateHandle.js +9 -2
  75. package/dist-cjs/lib/tools/SelectTool/childStates/PointingRotateHandle.js.map +2 -2
  76. package/dist-cjs/lib/tools/SelectTool/childStates/PointingShape.js +14 -8
  77. package/dist-cjs/lib/tools/SelectTool/childStates/PointingShape.js.map +2 -2
  78. package/dist-cjs/lib/tools/SelectTool/childStates/Resizing.js +71 -34
  79. package/dist-cjs/lib/tools/SelectTool/childStates/Resizing.js.map +2 -2
  80. package/dist-cjs/lib/tools/SelectTool/childStates/Rotating.js +53 -10
  81. package/dist-cjs/lib/tools/SelectTool/childStates/Rotating.js.map +2 -2
  82. package/dist-cjs/lib/tools/SelectTool/childStates/Translating.js +123 -51
  83. package/dist-cjs/lib/tools/SelectTool/childStates/Translating.js.map +2 -2
  84. package/dist-cjs/lib/tools/SelectTool/selectHelpers.js +11 -0
  85. package/dist-cjs/lib/tools/SelectTool/selectHelpers.js.map +2 -2
  86. package/dist-cjs/lib/tools/ZoomTool/ZoomTool.js +2 -2
  87. package/dist-cjs/lib/tools/ZoomTool/ZoomTool.js.map +2 -2
  88. package/dist-cjs/lib/ui/TldrawUi.js +7 -12
  89. package/dist-cjs/lib/ui/TldrawUi.js.map +3 -3
  90. package/dist-cjs/lib/ui/components/A11y.js +12 -23
  91. package/dist-cjs/lib/ui/components/A11y.js.map +2 -2
  92. package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenu.js.map +2 -2
  93. package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.js +1 -1
  94. package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.js.map +2 -2
  95. package/dist-cjs/lib/ui/components/ContextMenu/DefaultContextMenu.js +10 -17
  96. package/dist-cjs/lib/ui/components/ContextMenu/DefaultContextMenu.js.map +3 -3
  97. package/dist-cjs/lib/ui/components/CursorChatBubble.js +3 -4
  98. package/dist-cjs/lib/ui/components/CursorChatBubble.js.map +2 -2
  99. package/dist-cjs/lib/ui/components/DebugMenu/DefaultDebugMenuContent.js +30 -50
  100. package/dist-cjs/lib/ui/components/DebugMenu/DefaultDebugMenuContent.js.map +2 -2
  101. package/dist-cjs/lib/ui/components/DefaultDebugPanel.js +2 -8
  102. package/dist-cjs/lib/ui/components/DefaultDebugPanel.js.map +2 -2
  103. package/dist-cjs/lib/ui/components/Dialogs.js +1 -5
  104. package/dist-cjs/lib/ui/components/Dialogs.js.map +2 -2
  105. package/dist-cjs/lib/ui/components/EditLinkDialog.js +26 -38
  106. package/dist-cjs/lib/ui/components/EditLinkDialog.js.map +2 -2
  107. package/dist-cjs/lib/ui/components/EmbedDialog.js +5 -5
  108. package/dist-cjs/lib/ui/components/EmbedDialog.js.map +3 -3
  109. package/dist-cjs/lib/ui/components/HelpMenu/DefaultHelpMenuContent.js.map +2 -2
  110. package/dist-cjs/lib/ui/components/HelperButtons/BackToContent.js +8 -8
  111. package/dist-cjs/lib/ui/components/HelperButtons/BackToContent.js.map +2 -2
  112. package/dist-cjs/lib/ui/components/InputModeMenu.js +18 -31
  113. package/dist-cjs/lib/ui/components/InputModeMenu.js.map +3 -3
  114. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.js +16 -0
  115. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.js.map +2 -2
  116. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js +25 -80
  117. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js.map +2 -2
  118. package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js +2 -6
  119. package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js.map +2 -2
  120. package/dist-cjs/lib/ui/components/MobileStylePanel.js +7 -3
  121. package/dist-cjs/lib/ui/components/MobileStylePanel.js.map +2 -2
  122. package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js +13 -20
  123. package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js.map +2 -2
  124. package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js +46 -47
  125. package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js.map +2 -2
  126. package/dist-cjs/lib/ui/components/PageMenu/PageItemInput.js +1 -4
  127. package/dist-cjs/lib/ui/components/PageMenu/PageItemInput.js.map +2 -2
  128. package/dist-cjs/lib/ui/components/SharePanel/DefaultPeopleMenuFacePile.js +1 -1
  129. package/dist-cjs/lib/ui/components/SharePanel/DefaultPeopleMenuFacePile.js.map +2 -2
  130. package/dist-cjs/lib/ui/components/SharePanel/DefaultUserPresenceEditor.js +1 -3
  131. package/dist-cjs/lib/ui/components/SharePanel/DefaultUserPresenceEditor.js.map +2 -2
  132. package/dist-cjs/lib/ui/components/SharePanel/UserPresenceColorPicker.js +2 -5
  133. package/dist-cjs/lib/ui/components/SharePanel/UserPresenceColorPicker.js.map +3 -3
  134. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.map +2 -2
  135. package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js +1 -1
  136. package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js.map +2 -2
  137. package/dist-cjs/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.js +73 -71
  138. package/dist-cjs/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.js.map +2 -2
  139. package/dist-cjs/lib/ui/components/Toolbar/AltTextEditor.js +5 -8
  140. package/dist-cjs/lib/ui/components/Toolbar/AltTextEditor.js.map +2 -2
  141. package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js +40 -55
  142. package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js.map +2 -2
  143. package/dist-cjs/lib/ui/components/Toolbar/DefaultRichTextToolbar.js +1 -4
  144. package/dist-cjs/lib/ui/components/Toolbar/DefaultRichTextToolbar.js.map +2 -2
  145. package/dist-cjs/lib/ui/components/Toolbar/DefaultToolbar.js +4 -4
  146. package/dist-cjs/lib/ui/components/Toolbar/DefaultToolbar.js.map +2 -2
  147. package/dist-cjs/lib/ui/components/Toolbar/DefaultToolbarContent.js +3 -4
  148. package/dist-cjs/lib/ui/components/Toolbar/DefaultToolbarContent.js.map +2 -2
  149. package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js +2 -4
  150. package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js.map +3 -3
  151. package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js +3 -7
  152. package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js.map +2 -2
  153. package/dist-cjs/lib/ui/components/menu-items.js +16 -14
  154. package/dist-cjs/lib/ui/components/menu-items.js.map +2 -2
  155. package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js +6 -17
  156. package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js.map +3 -3
  157. package/dist-cjs/lib/ui/components/primitives/TldrawUiDropdownMenu.js +1 -1
  158. package/dist-cjs/lib/ui/components/primitives/TldrawUiDropdownMenu.js.map +2 -2
  159. package/dist-cjs/lib/ui/components/primitives/TldrawUiIcon.js +1 -1
  160. package/dist-cjs/lib/ui/components/primitives/TldrawUiIcon.js.map +2 -2
  161. package/dist-cjs/lib/ui/components/primitives/TldrawUiInput.js +12 -28
  162. package/dist-cjs/lib/ui/components/primitives/TldrawUiInput.js.map +3 -3
  163. package/dist-cjs/lib/ui/components/primitives/TldrawUiPopover.js +2 -3
  164. package/dist-cjs/lib/ui/components/primitives/TldrawUiPopover.js.map +2 -2
  165. package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js +1 -3
  166. package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js.map +2 -2
  167. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js +1 -2
  168. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.map +2 -2
  169. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +24 -56
  170. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +2 -2
  171. package/dist-cjs/lib/ui/components/primitives/layout.js +13 -18
  172. package/dist-cjs/lib/ui/components/primitives/layout.js.map +2 -2
  173. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.js +22 -34
  174. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.js.map +2 -2
  175. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuGroup.js +6 -27
  176. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuGroup.js.map +2 -2
  177. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +30 -33
  178. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
  179. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuSubmenu.js +2 -1
  180. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuSubmenu.js.map +2 -2
  181. package/dist-cjs/lib/ui/context/TldrawUiContextProvider.js.map +2 -2
  182. package/dist-cjs/lib/ui/context/actions.js +119 -213
  183. package/dist-cjs/lib/ui/context/actions.js.map +2 -2
  184. package/dist-cjs/lib/ui/getLocalFiles.js +2 -2
  185. package/dist-cjs/lib/ui/getLocalFiles.js.map +2 -2
  186. package/dist-cjs/lib/ui/hooks/clipboard/pasteUrl.js +9 -2
  187. package/dist-cjs/lib/ui/hooks/clipboard/pasteUrl.js.map +2 -2
  188. package/dist-cjs/lib/ui/hooks/menu-hooks.js +17 -62
  189. package/dist-cjs/lib/ui/hooks/menu-hooks.js.map +2 -2
  190. package/dist-cjs/lib/ui/hooks/useClipboardEvents.js +74 -115
  191. package/dist-cjs/lib/ui/hooks/useClipboardEvents.js.map +2 -2
  192. package/dist-cjs/lib/ui/hooks/useFlatten.js +3 -9
  193. package/dist-cjs/lib/ui/hooks/useFlatten.js.map +2 -2
  194. package/dist-cjs/lib/ui/hooks/useKeyboardShortcuts.js +44 -64
  195. package/dist-cjs/lib/ui/hooks/useKeyboardShortcuts.js.map +2 -2
  196. package/dist-cjs/lib/ui/hooks/usePrint.js +5 -7
  197. package/dist-cjs/lib/ui/hooks/usePrint.js.map +2 -2
  198. package/dist-cjs/lib/ui/hooks/useRelevantStyles.js +3 -2
  199. package/dist-cjs/lib/ui/hooks/useRelevantStyles.js.map +2 -2
  200. package/dist-cjs/lib/ui/hooks/useTranslation/TLUiTranslationKey.js.map +1 -1
  201. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js +1 -0
  202. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js.map +2 -2
  203. package/dist-cjs/lib/ui/hooks/useTranslation/translations.js +3 -6
  204. package/dist-cjs/lib/ui/hooks/useTranslation/translations.js.map +2 -2
  205. package/dist-cjs/lib/ui/hooks/useTranslation/useTranslation.js +11 -26
  206. package/dist-cjs/lib/ui/hooks/useTranslation/useTranslation.js.map +2 -2
  207. package/dist-cjs/lib/ui/kbd-utils.js +3 -4
  208. package/dist-cjs/lib/ui/kbd-utils.js.map +2 -2
  209. package/dist-cjs/lib/ui/overrides.js +11 -26
  210. package/dist-cjs/lib/ui/overrides.js.map +2 -2
  211. package/dist-cjs/lib/ui/version.js +3 -3
  212. package/dist-cjs/lib/ui/version.js.map +1 -1
  213. package/dist-cjs/lib/utils/excalidraw/putExcalidrawContent.js +15 -4
  214. package/dist-cjs/lib/utils/excalidraw/putExcalidrawContent.js.map +2 -2
  215. package/dist-cjs/lib/utils/frames/frames.js +8 -0
  216. package/dist-cjs/lib/utils/frames/frames.js.map +2 -2
  217. package/dist-cjs/lib/utils/shapes/shapes.js +11 -1
  218. package/dist-cjs/lib/utils/shapes/shapes.js.map +2 -2
  219. package/dist-cjs/lib/utils/text/literalTyping.js +66 -0
  220. package/dist-cjs/lib/utils/text/literalTyping.js.map +7 -0
  221. package/dist-cjs/lib/utils/text/richText.js +7 -1
  222. package/dist-cjs/lib/utils/text/richText.js.map +2 -2
  223. package/dist-cjs/lib/utils/text/tiptap.js +32 -0
  224. package/dist-cjs/lib/utils/text/tiptap.js.map +7 -0
  225. package/dist-cjs/lib/utils/text/wrapSelection.js +150 -0
  226. package/dist-cjs/lib/utils/text/wrapSelection.js.map +7 -0
  227. package/dist-esm/index.d.mts +140 -23
  228. package/dist-esm/index.mjs +27 -1
  229. package/dist-esm/index.mjs.map +2 -2
  230. package/dist-esm/lib/defaultExternalContentHandlers.mjs +10 -1
  231. package/dist-esm/lib/defaultExternalContentHandlers.mjs.map +2 -2
  232. package/dist-esm/lib/shapes/arrow/ArrowShapeUtil.mjs +6 -6
  233. package/dist-esm/lib/shapes/arrow/ArrowShapeUtil.mjs.map +2 -2
  234. package/dist-esm/lib/shapes/arrow/toolStates/Idle.mjs +3 -3
  235. package/dist-esm/lib/shapes/arrow/toolStates/Idle.mjs.map +2 -2
  236. package/dist-esm/lib/shapes/arrow/toolStates/Pointing.mjs +1 -1
  237. package/dist-esm/lib/shapes/arrow/toolStates/Pointing.mjs.map +2 -2
  238. package/dist-esm/lib/shapes/bookmark/BookmarkShapeUtil.mjs +6 -6
  239. package/dist-esm/lib/shapes/bookmark/BookmarkShapeUtil.mjs.map +2 -2
  240. package/dist-esm/lib/shapes/bookmark/bookmarks.mjs +8 -21
  241. package/dist-esm/lib/shapes/bookmark/bookmarks.mjs.map +2 -2
  242. package/dist-esm/lib/shapes/draw/DrawShapeUtil.mjs +5 -2
  243. package/dist-esm/lib/shapes/draw/DrawShapeUtil.mjs.map +2 -2
  244. package/dist-esm/lib/shapes/draw/toolStates/Drawing.mjs +17 -14
  245. package/dist-esm/lib/shapes/draw/toolStates/Drawing.mjs.map +2 -2
  246. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs +4 -0
  247. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs.map +2 -2
  248. package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs +4 -2
  249. package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs.map +2 -2
  250. package/dist-esm/lib/shapes/highlight/HighlightShapeUtil.mjs +3 -4
  251. package/dist-esm/lib/shapes/highlight/HighlightShapeUtil.mjs.map +2 -2
  252. package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs +25 -9
  253. package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs.map +3 -3
  254. package/dist-esm/lib/shapes/line/LineShapeUtil.mjs +18 -7
  255. package/dist-esm/lib/shapes/line/LineShapeUtil.mjs.map +2 -2
  256. package/dist-esm/lib/shapes/note/DefaultNoteShapeAttribution.mjs +41 -0
  257. package/dist-esm/lib/shapes/note/DefaultNoteShapeAttribution.mjs.map +7 -0
  258. package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs +31 -25
  259. package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs.map +2 -2
  260. package/dist-esm/lib/shapes/note/noteHelpers.mjs +7 -2
  261. package/dist-esm/lib/shapes/note/noteHelpers.mjs.map +2 -2
  262. package/dist-esm/lib/shapes/note/toolStates/Pointing.mjs +4 -4
  263. package/dist-esm/lib/shapes/note/toolStates/Pointing.mjs.map +2 -2
  264. package/dist-esm/lib/shapes/shared/useImageOrVideoAsset.mjs +16 -3
  265. package/dist-esm/lib/shapes/shared/useImageOrVideoAsset.mjs.map +2 -2
  266. package/dist-esm/lib/shapes/text/RichTextArea.mjs +1 -1
  267. package/dist-esm/lib/shapes/text/RichTextArea.mjs.map +2 -2
  268. package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs +6 -1
  269. package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs.map +2 -2
  270. package/dist-esm/lib/tools/SelectTool/DragAndDropManager.mjs +4 -4
  271. package/dist-esm/lib/tools/SelectTool/DragAndDropManager.mjs.map +2 -2
  272. package/dist-esm/lib/tools/SelectTool/GestureShapeChangeTracker.mjs +51 -0
  273. package/dist-esm/lib/tools/SelectTool/GestureShapeChangeTracker.mjs.map +7 -0
  274. package/dist-esm/lib/tools/SelectTool/childStates/Brushing.mjs +2 -2
  275. package/dist-esm/lib/tools/SelectTool/childStates/Brushing.mjs.map +2 -2
  276. package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/Cropping.mjs +41 -6
  277. package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/Cropping.mjs.map +2 -2
  278. package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/PointingCrop.mjs +11 -2
  279. package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/PointingCrop.mjs.map +2 -2
  280. package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/PointingCropHandle.mjs +9 -2
  281. package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/PointingCropHandle.mjs.map +2 -2
  282. package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/TranslatingCrop.mjs +32 -5
  283. package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/TranslatingCrop.mjs.map +2 -2
  284. package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/crop_helpers.mjs +1 -1
  285. package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/crop_helpers.mjs.map +2 -2
  286. package/dist-esm/lib/tools/SelectTool/childStates/DraggingHandle.mjs +18 -24
  287. package/dist-esm/lib/tools/SelectTool/childStates/DraggingHandle.mjs.map +2 -2
  288. package/dist-esm/lib/tools/SelectTool/childStates/EditingShape.mjs +13 -5
  289. package/dist-esm/lib/tools/SelectTool/childStates/EditingShape.mjs.map +2 -2
  290. package/dist-esm/lib/tools/SelectTool/childStates/Idle.mjs +11 -25
  291. package/dist-esm/lib/tools/SelectTool/childStates/Idle.mjs.map +2 -2
  292. package/dist-esm/lib/tools/SelectTool/childStates/PointingArrowLabel.mjs +3 -4
  293. package/dist-esm/lib/tools/SelectTool/childStates/PointingArrowLabel.mjs.map +2 -2
  294. package/dist-esm/lib/tools/SelectTool/childStates/PointingHandle.mjs +13 -3
  295. package/dist-esm/lib/tools/SelectTool/childStates/PointingHandle.mjs.map +2 -2
  296. package/dist-esm/lib/tools/SelectTool/childStates/PointingResizeHandle.mjs +11 -2
  297. package/dist-esm/lib/tools/SelectTool/childStates/PointingResizeHandle.mjs.map +2 -2
  298. package/dist-esm/lib/tools/SelectTool/childStates/PointingRotateHandle.mjs +9 -2
  299. package/dist-esm/lib/tools/SelectTool/childStates/PointingRotateHandle.mjs.map +2 -2
  300. package/dist-esm/lib/tools/SelectTool/childStates/PointingShape.mjs +14 -8
  301. package/dist-esm/lib/tools/SelectTool/childStates/PointingShape.mjs.map +2 -2
  302. package/dist-esm/lib/tools/SelectTool/childStates/Resizing.mjs +74 -34
  303. package/dist-esm/lib/tools/SelectTool/childStates/Resizing.mjs.map +2 -2
  304. package/dist-esm/lib/tools/SelectTool/childStates/Rotating.mjs +56 -10
  305. package/dist-esm/lib/tools/SelectTool/childStates/Rotating.mjs.map +2 -2
  306. package/dist-esm/lib/tools/SelectTool/childStates/Translating.mjs +123 -51
  307. package/dist-esm/lib/tools/SelectTool/childStates/Translating.mjs.map +2 -2
  308. package/dist-esm/lib/tools/SelectTool/selectHelpers.mjs +14 -1
  309. package/dist-esm/lib/tools/SelectTool/selectHelpers.mjs.map +2 -2
  310. package/dist-esm/lib/tools/ZoomTool/ZoomTool.mjs +2 -2
  311. package/dist-esm/lib/tools/ZoomTool/ZoomTool.mjs.map +2 -2
  312. package/dist-esm/lib/ui/TldrawUi.mjs +7 -12
  313. package/dist-esm/lib/ui/TldrawUi.mjs.map +3 -3
  314. package/dist-esm/lib/ui/components/A11y.mjs +12 -23
  315. package/dist-esm/lib/ui/components/A11y.mjs.map +2 -2
  316. package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenu.mjs.map +2 -2
  317. package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.mjs +1 -1
  318. package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.mjs.map +2 -2
  319. package/dist-esm/lib/ui/components/ContextMenu/DefaultContextMenu.mjs +17 -18
  320. package/dist-esm/lib/ui/components/ContextMenu/DefaultContextMenu.mjs.map +2 -2
  321. package/dist-esm/lib/ui/components/CursorChatBubble.mjs +3 -4
  322. package/dist-esm/lib/ui/components/CursorChatBubble.mjs.map +2 -2
  323. package/dist-esm/lib/ui/components/DebugMenu/DefaultDebugMenuContent.mjs +31 -50
  324. package/dist-esm/lib/ui/components/DebugMenu/DefaultDebugMenuContent.mjs.map +2 -2
  325. package/dist-esm/lib/ui/components/DefaultDebugPanel.mjs +2 -8
  326. package/dist-esm/lib/ui/components/DefaultDebugPanel.mjs.map +2 -2
  327. package/dist-esm/lib/ui/components/Dialogs.mjs +1 -5
  328. package/dist-esm/lib/ui/components/Dialogs.mjs.map +2 -2
  329. package/dist-esm/lib/ui/components/EditLinkDialog.mjs +26 -38
  330. package/dist-esm/lib/ui/components/EditLinkDialog.mjs.map +2 -2
  331. package/dist-esm/lib/ui/components/EmbedDialog.mjs +5 -5
  332. package/dist-esm/lib/ui/components/EmbedDialog.mjs.map +3 -3
  333. package/dist-esm/lib/ui/components/HelpMenu/DefaultHelpMenuContent.mjs.map +2 -2
  334. package/dist-esm/lib/ui/components/HelperButtons/BackToContent.mjs +8 -8
  335. package/dist-esm/lib/ui/components/HelperButtons/BackToContent.mjs.map +2 -2
  336. package/dist-esm/lib/ui/components/InputModeMenu.mjs +18 -31
  337. package/dist-esm/lib/ui/components/InputModeMenu.mjs.map +3 -3
  338. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.mjs +16 -0
  339. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.mjs.map +2 -2
  340. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs +25 -80
  341. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs.map +2 -2
  342. package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs +2 -6
  343. package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs.map +2 -2
  344. package/dist-esm/lib/ui/components/MobileStylePanel.mjs +7 -3
  345. package/dist-esm/lib/ui/components/MobileStylePanel.mjs.map +2 -2
  346. package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs +13 -20
  347. package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs.map +2 -2
  348. package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs +47 -47
  349. package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs.map +2 -2
  350. package/dist-esm/lib/ui/components/PageMenu/PageItemInput.mjs +1 -4
  351. package/dist-esm/lib/ui/components/PageMenu/PageItemInput.mjs.map +2 -2
  352. package/dist-esm/lib/ui/components/SharePanel/DefaultPeopleMenuFacePile.mjs +1 -1
  353. package/dist-esm/lib/ui/components/SharePanel/DefaultPeopleMenuFacePile.mjs.map +2 -2
  354. package/dist-esm/lib/ui/components/SharePanel/DefaultUserPresenceEditor.mjs +1 -3
  355. package/dist-esm/lib/ui/components/SharePanel/DefaultUserPresenceEditor.mjs.map +2 -2
  356. package/dist-esm/lib/ui/components/SharePanel/UserPresenceColorPicker.mjs +2 -5
  357. package/dist-esm/lib/ui/components/SharePanel/UserPresenceColorPicker.mjs.map +3 -3
  358. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs.map +2 -2
  359. package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs +1 -1
  360. package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs.map +2 -2
  361. package/dist-esm/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.mjs +73 -71
  362. package/dist-esm/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.mjs.map +2 -2
  363. package/dist-esm/lib/ui/components/Toolbar/AltTextEditor.mjs +5 -8
  364. package/dist-esm/lib/ui/components/Toolbar/AltTextEditor.mjs.map +2 -2
  365. package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs +41 -56
  366. package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs.map +2 -2
  367. package/dist-esm/lib/ui/components/Toolbar/DefaultRichTextToolbar.mjs +1 -4
  368. package/dist-esm/lib/ui/components/Toolbar/DefaultRichTextToolbar.mjs.map +2 -2
  369. package/dist-esm/lib/ui/components/Toolbar/DefaultToolbar.mjs +4 -4
  370. package/dist-esm/lib/ui/components/Toolbar/DefaultToolbar.mjs.map +2 -2
  371. package/dist-esm/lib/ui/components/Toolbar/DefaultToolbarContent.mjs +3 -4
  372. package/dist-esm/lib/ui/components/Toolbar/DefaultToolbarContent.mjs.map +2 -2
  373. package/dist-esm/lib/ui/components/Toolbar/LinkEditor.mjs +2 -4
  374. package/dist-esm/lib/ui/components/Toolbar/LinkEditor.mjs.map +3 -3
  375. package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs +4 -8
  376. package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs.map +2 -2
  377. package/dist-esm/lib/ui/components/menu-items.mjs +16 -14
  378. package/dist-esm/lib/ui/components/menu-items.mjs.map +2 -2
  379. package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs +6 -17
  380. package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs.map +3 -3
  381. package/dist-esm/lib/ui/components/primitives/TldrawUiDropdownMenu.mjs +1 -1
  382. package/dist-esm/lib/ui/components/primitives/TldrawUiDropdownMenu.mjs.map +2 -2
  383. package/dist-esm/lib/ui/components/primitives/TldrawUiIcon.mjs +1 -1
  384. package/dist-esm/lib/ui/components/primitives/TldrawUiIcon.mjs.map +2 -2
  385. package/dist-esm/lib/ui/components/primitives/TldrawUiInput.mjs +12 -28
  386. package/dist-esm/lib/ui/components/primitives/TldrawUiInput.mjs.map +3 -3
  387. package/dist-esm/lib/ui/components/primitives/TldrawUiPopover.mjs +2 -3
  388. package/dist-esm/lib/ui/components/primitives/TldrawUiPopover.mjs.map +2 -2
  389. package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs +1 -3
  390. package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs.map +2 -2
  391. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs +1 -2
  392. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map +2 -2
  393. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +24 -56
  394. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +2 -2
  395. package/dist-esm/lib/ui/components/primitives/layout.mjs +13 -18
  396. package/dist-esm/lib/ui/components/primitives/layout.mjs.map +2 -2
  397. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.mjs +23 -35
  398. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.mjs.map +2 -2
  399. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs +6 -27
  400. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs.map +2 -2
  401. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +31 -34
  402. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
  403. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuSubmenu.mjs +2 -1
  404. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuSubmenu.mjs.map +2 -2
  405. package/dist-esm/lib/ui/context/TldrawUiContextProvider.mjs.map +2 -2
  406. package/dist-esm/lib/ui/context/actions.mjs +120 -214
  407. package/dist-esm/lib/ui/context/actions.mjs.map +2 -2
  408. package/dist-esm/lib/ui/getLocalFiles.mjs +2 -2
  409. package/dist-esm/lib/ui/getLocalFiles.mjs.map +2 -2
  410. package/dist-esm/lib/ui/hooks/clipboard/pasteUrl.mjs +9 -2
  411. package/dist-esm/lib/ui/hooks/clipboard/pasteUrl.mjs.map +2 -2
  412. package/dist-esm/lib/ui/hooks/menu-hooks.mjs +17 -62
  413. package/dist-esm/lib/ui/hooks/menu-hooks.mjs.map +2 -2
  414. package/dist-esm/lib/ui/hooks/useClipboardEvents.mjs +76 -117
  415. package/dist-esm/lib/ui/hooks/useClipboardEvents.mjs.map +3 -3
  416. package/dist-esm/lib/ui/hooks/useFlatten.mjs +3 -9
  417. package/dist-esm/lib/ui/hooks/useFlatten.mjs.map +2 -2
  418. package/dist-esm/lib/ui/hooks/useKeyboardShortcuts.mjs +44 -64
  419. package/dist-esm/lib/ui/hooks/useKeyboardShortcuts.mjs.map +2 -2
  420. package/dist-esm/lib/ui/hooks/usePrint.mjs +5 -7
  421. package/dist-esm/lib/ui/hooks/usePrint.mjs.map +2 -2
  422. package/dist-esm/lib/ui/hooks/useRelevantStyles.mjs +3 -2
  423. package/dist-esm/lib/ui/hooks/useRelevantStyles.mjs.map +2 -2
  424. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs +1 -0
  425. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs.map +2 -2
  426. package/dist-esm/lib/ui/hooks/useTranslation/translations.mjs +3 -6
  427. package/dist-esm/lib/ui/hooks/useTranslation/translations.mjs.map +2 -2
  428. package/dist-esm/lib/ui/hooks/useTranslation/useTranslation.mjs +11 -26
  429. package/dist-esm/lib/ui/hooks/useTranslation/useTranslation.mjs.map +2 -2
  430. package/dist-esm/lib/ui/kbd-utils.mjs +3 -4
  431. package/dist-esm/lib/ui/kbd-utils.mjs.map +2 -2
  432. package/dist-esm/lib/ui/overrides.mjs +11 -26
  433. package/dist-esm/lib/ui/overrides.mjs.map +2 -2
  434. package/dist-esm/lib/ui/version.mjs +3 -3
  435. package/dist-esm/lib/ui/version.mjs.map +1 -1
  436. package/dist-esm/lib/utils/excalidraw/putExcalidrawContent.mjs +15 -4
  437. package/dist-esm/lib/utils/excalidraw/putExcalidrawContent.mjs.map +2 -2
  438. package/dist-esm/lib/utils/frames/frames.mjs +8 -0
  439. package/dist-esm/lib/utils/frames/frames.mjs.map +2 -2
  440. package/dist-esm/lib/utils/shapes/shapes.mjs +11 -1
  441. package/dist-esm/lib/utils/shapes/shapes.mjs.map +2 -2
  442. package/dist-esm/lib/utils/text/literalTyping.mjs +46 -0
  443. package/dist-esm/lib/utils/text/literalTyping.mjs.map +7 -0
  444. package/dist-esm/lib/utils/text/richText.mjs +7 -1
  445. package/dist-esm/lib/utils/text/richText.mjs.map +2 -2
  446. package/dist-esm/lib/utils/text/tiptap.mjs +21 -0
  447. package/dist-esm/lib/utils/text/tiptap.mjs.map +7 -0
  448. package/dist-esm/lib/utils/text/wrapSelection.mjs +136 -0
  449. package/dist-esm/lib/utils/text/wrapSelection.mjs.map +7 -0
  450. package/package.json +9 -7
  451. package/src/index.ts +23 -0
  452. package/src/lib/defaultExternalContentHandlers.test.ts +52 -0
  453. package/src/lib/defaultExternalContentHandlers.ts +13 -1
  454. package/src/lib/shapes/arrow/ArrowShapeUtil.tsx +13 -6
  455. package/src/lib/shapes/arrow/toolStates/Idle.tsx +3 -3
  456. package/src/lib/shapes/arrow/toolStates/Pointing.tsx +1 -1
  457. package/src/lib/shapes/bookmark/BookmarkShapeUtil.tsx +6 -6
  458. package/src/lib/shapes/bookmark/bookmarks.ts +18 -25
  459. package/src/lib/shapes/draw/DrawShapeTool.test.ts +88 -0
  460. package/src/lib/shapes/draw/DrawShapeUtil.test.ts +17 -1
  461. package/src/lib/shapes/draw/DrawShapeUtil.tsx +8 -2
  462. package/src/lib/shapes/draw/toolStates/Drawing.ts +23 -16
  463. package/src/lib/shapes/frame/FrameShapeUtil.tsx +7 -0
  464. package/src/lib/shapes/geo/GeoShapeUtil.test.tsx +51 -0
  465. package/src/lib/shapes/geo/GeoShapeUtil.tsx +5 -2
  466. package/src/lib/shapes/highlight/HighlightShapeUtil.test.ts +43 -1
  467. package/src/lib/shapes/highlight/HighlightShapeUtil.tsx +4 -4
  468. package/src/lib/shapes/image/ImageShapeUtil.tsx +29 -7
  469. package/src/lib/shapes/line/LineShapeUtil.test.tsx +27 -4
  470. package/src/lib/shapes/line/LineShapeUtil.tsx +25 -7
  471. package/src/lib/shapes/note/DefaultNoteShapeAttribution.tsx +84 -0
  472. package/src/lib/shapes/note/NoteShapeUtil.tsx +50 -31
  473. package/src/lib/shapes/note/noteCloning.test.ts +79 -0
  474. package/src/lib/shapes/note/noteHelpers.ts +12 -1
  475. package/src/lib/shapes/note/toolStates/Pointing.ts +6 -4
  476. package/src/lib/shapes/shared/useImageOrVideoAsset.test.tsx +153 -0
  477. package/src/lib/shapes/shared/useImageOrVideoAsset.ts +25 -6
  478. package/src/lib/shapes/text/RichTextArea.tsx +5 -1
  479. package/src/lib/shapes/video/VideoShapeUtil.tsx +10 -1
  480. package/src/lib/tools/SelectTool/DragAndDropManager.ts +7 -4
  481. package/src/lib/tools/SelectTool/GestureShapeChangeTracker.test.ts +45 -0
  482. package/src/lib/tools/SelectTool/GestureShapeChangeTracker.ts +76 -0
  483. package/src/lib/tools/SelectTool/childStates/Brushing.ts +2 -2
  484. package/src/lib/tools/SelectTool/childStates/Crop/children/Cropping.ts +38 -6
  485. package/src/lib/tools/SelectTool/childStates/Crop/children/PointingCrop.ts +13 -2
  486. package/src/lib/tools/SelectTool/childStates/Crop/children/PointingCropHandle.ts +10 -2
  487. package/src/lib/tools/SelectTool/childStates/Crop/children/TranslatingCrop.ts +33 -5
  488. package/src/lib/tools/SelectTool/childStates/Crop/children/crop_helpers.ts +2 -1
  489. package/src/lib/tools/SelectTool/childStates/DraggingHandle.tsx +23 -28
  490. package/src/lib/tools/SelectTool/childStates/EditingShape.ts +15 -7
  491. package/src/lib/tools/SelectTool/childStates/Idle.ts +22 -31
  492. package/src/lib/tools/SelectTool/childStates/PointingArrowLabel.ts +7 -4
  493. package/src/lib/tools/SelectTool/childStates/PointingHandle.ts +17 -2
  494. package/src/lib/tools/SelectTool/childStates/PointingResizeHandle.ts +11 -2
  495. package/src/lib/tools/SelectTool/childStates/PointingRotateHandle.ts +9 -2
  496. package/src/lib/tools/SelectTool/childStates/PointingShape.ts +19 -8
  497. package/src/lib/tools/SelectTool/childStates/Resizing.ts +78 -42
  498. package/src/lib/tools/SelectTool/childStates/Rotating.ts +51 -11
  499. package/src/lib/tools/SelectTool/childStates/Translating.ts +150 -54
  500. package/src/lib/tools/SelectTool/selectHelpers.ts +23 -0
  501. package/src/lib/tools/ZoomTool/ZoomTool.ts +3 -2
  502. package/src/lib/ui/TldrawUi.tsx +7 -14
  503. package/src/lib/ui/components/A11y.tsx +29 -35
  504. package/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx +0 -4
  505. package/src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx +7 -8
  506. package/src/lib/ui/components/ContextMenu/DefaultContextMenu.tsx +31 -22
  507. package/src/lib/ui/components/CursorChatBubble.tsx +3 -4
  508. package/src/lib/ui/components/DebugMenu/DefaultDebugMenuContent.tsx +37 -63
  509. package/src/lib/ui/components/DefaultDebugPanel.tsx +2 -8
  510. package/src/lib/ui/components/Dialogs.tsx +4 -6
  511. package/src/lib/ui/components/EditLinkDialog.tsx +31 -61
  512. package/src/lib/ui/components/EmbedDialog.tsx +20 -22
  513. package/src/lib/ui/components/HelpMenu/DefaultHelpMenuContent.tsx +1 -0
  514. package/src/lib/ui/components/HelperButtons/BackToContent.tsx +9 -8
  515. package/src/lib/ui/components/InputModeMenu.tsx +17 -31
  516. package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.tsx +16 -0
  517. package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx +25 -92
  518. package/src/lib/ui/components/Minimap/MinimapManager.ts +6 -8
  519. package/src/lib/ui/components/MobileStylePanel.tsx +7 -5
  520. package/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx +14 -20
  521. package/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx +53 -59
  522. package/src/lib/ui/components/PageMenu/PageItemInput.tsx +3 -7
  523. package/src/lib/ui/components/SharePanel/DefaultPeopleMenuFacePile.tsx +1 -1
  524. package/src/lib/ui/components/SharePanel/DefaultUserPresenceEditor.tsx +1 -3
  525. package/src/lib/ui/components/SharePanel/UserPresenceColorPicker.tsx +2 -5
  526. package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +2 -2
  527. package/src/lib/ui/components/StylePanel/StylePanelButtonPicker.tsx +1 -1
  528. package/src/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.tsx +95 -100
  529. package/src/lib/ui/components/Toolbar/AltTextEditor.tsx +5 -10
  530. package/src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx +47 -67
  531. package/src/lib/ui/components/Toolbar/DefaultRichTextToolbar.tsx +1 -5
  532. package/src/lib/ui/components/Toolbar/DefaultToolbar.tsx +4 -4
  533. package/src/lib/ui/components/Toolbar/DefaultToolbarContent.tsx +10 -4
  534. package/src/lib/ui/components/Toolbar/LinkEditor.tsx +2 -6
  535. package/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx +51 -64
  536. package/src/lib/ui/components/menu-items.tsx +19 -17
  537. package/src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx +7 -20
  538. package/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx +1 -1
  539. package/src/lib/ui/components/primitives/TldrawUiIcon.tsx +1 -1
  540. package/src/lib/ui/components/primitives/TldrawUiInput.tsx +15 -31
  541. package/src/lib/ui/components/primitives/TldrawUiPopover.tsx +2 -3
  542. package/src/lib/ui/components/primitives/TldrawUiSlider.tsx +1 -3
  543. package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx +1 -3
  544. package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +26 -63
  545. package/src/lib/ui/components/primitives/layout.tsx +22 -30
  546. package/src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx +25 -30
  547. package/src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx +6 -15
  548. package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +53 -32
  549. package/src/lib/ui/components/primitives/menus/TldrawUiMenuSubmenu.tsx +2 -5
  550. package/src/lib/ui/context/TldrawUiContextProvider.tsx +1 -1
  551. package/src/lib/ui/context/actions.tsx +127 -229
  552. package/src/lib/ui/getLocalFiles.ts +2 -2
  553. package/src/lib/ui/hooks/clipboard/pasteUrl.ts +18 -3
  554. package/src/lib/ui/hooks/menu-hooks.ts +20 -78
  555. package/src/lib/ui/hooks/useClipboardEvents.ts +100 -142
  556. package/src/lib/ui/hooks/useFlatten.ts +3 -9
  557. package/src/lib/ui/hooks/useKeyboardShortcuts.ts +59 -73
  558. package/src/lib/ui/hooks/usePrint.ts +5 -8
  559. package/src/lib/ui/hooks/useRelevantStyles.ts +3 -2
  560. package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts +1 -0
  561. package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts +2 -0
  562. package/src/lib/ui/hooks/useTranslation/translations.ts +3 -7
  563. package/src/lib/ui/hooks/useTranslation/useTranslation.tsx +13 -27
  564. package/src/lib/ui/kbd-utils.test.ts +38 -0
  565. package/src/lib/ui/kbd-utils.ts +6 -6
  566. package/src/lib/ui/overrides.ts +19 -32
  567. package/src/lib/ui/version.ts +3 -3
  568. package/src/lib/ui.css +8 -0
  569. package/src/lib/utils/excalidraw/putExcalidrawContent.test.tsx +103 -0
  570. package/src/lib/utils/excalidraw/putExcalidrawContent.ts +19 -4
  571. package/src/lib/utils/frames/frames.ts +19 -0
  572. package/src/lib/utils/shapes/shapes.ts +36 -1
  573. package/src/lib/utils/text/literalTyping.ts +68 -0
  574. package/src/lib/utils/text/richText.test.ts +46 -1
  575. package/src/lib/utils/text/richText.ts +17 -2
  576. package/src/lib/utils/text/tiptap.test.ts +40 -0
  577. package/src/lib/utils/text/tiptap.ts +18 -0
  578. package/src/lib/utils/text/wrapSelection.test.ts +285 -0
  579. package/src/lib/utils/text/wrapSelection.ts +226 -0
  580. package/src/test/ClickManager.test.ts +17 -0
  581. package/src/test/SelectTool.test.ts +405 -11
  582. package/src/test/TestEditor.ts +2 -2
  583. package/src/test/TldrawEditor.test.tsx +192 -12
  584. package/src/test/ZoomTool.test.ts +9 -0
  585. package/src/test/bindings.test.tsx +27 -0
  586. package/src/test/bookmark-shapes.test.ts +77 -0
  587. package/src/test/commands/animateShapes.test.ts +71 -2
  588. package/src/test/commands/clipboardPaste.test.ts +181 -1
  589. package/src/test/commands/getSvgString.test.ts +141 -1
  590. package/src/test/commands/lockShapes.test.ts +60 -0
  591. package/src/test/commands/penmode.test.ts +30 -1
  592. package/src/test/commands/setCamera.test.ts +81 -0
  593. package/src/test/commands/stackShapes.test.ts +42 -0
  594. package/src/test/createNShapes.test.ts +55 -0
  595. package/src/test/cropping.test.ts +200 -1
  596. package/src/test/customSnapping.test.tsx +10 -0
  597. package/src/test/dragDuringCameraAnimation.test.ts +114 -0
  598. package/src/test/dragFromToolbar-dom.test.tsx +150 -0
  599. package/src/test/drawing-shift-keyup.test.ts +79 -0
  600. package/src/test/frames.test.ts +45 -0
  601. package/src/test/getShapeAtPoint.test.ts +31 -0
  602. package/src/test/groups.test.tsx +104 -0
  603. package/src/test/handleDeepLink.test.tsx +15 -0
  604. package/src/test/maxShapes.test.ts +20 -0
  605. package/src/test/navigation.test.ts +213 -34
  606. package/src/test/noteAttributionComponent.test.tsx +92 -0
  607. package/src/test/noteAttributionExport.test.tsx +69 -0
  608. package/src/test/pinch.test.ts +38 -0
  609. package/src/test/pointercancel-dom.test.tsx +326 -0
  610. package/src/test/resizing.test.ts +59 -0
  611. package/src/test/resolveAssetsInContent.test.ts +96 -0
  612. package/src/test/rotating.test.ts +32 -0
  613. package/src/test/spacebarPanning.test.ts +10 -0
  614. package/src/test/strange-tools.test.ts +18 -0
  615. package/src/test/toolbar-tool-selection.test.tsx +45 -0
  616. package/src/test/translating.test.ts +209 -0
  617. package/src/test/ui/ContextMenu.test.tsx +29 -0
  618. package/src/test/ui/FrameSelectionMenuItem.test.tsx +115 -0
  619. package/src/test/ui/changePage.test.tsx +131 -0
  620. package/src/test/ui/keyboardShortcuts.test.tsx +458 -10
  621. package/src/test/zoomToUser.test.ts +63 -0
  622. package/tldraw.css +19 -2
package/DOCS.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # tldraw Documentation
2
2
 
3
- Version: `5.5.0-next.f9308d324e1c`
3
+ Version: `5.5.1`
4
4
 
5
5
  This file is generated during package publishing from the tldraw docs content for this exact package version.
6
6
 
@@ -383,6 +383,8 @@ We ship an experimental `tldraw-migrate` agent skill that helps a coding agent u
383
383
 
384
384
  #### v5.x
385
385
 
386
+ - [v5.5](https://tldraw.dev/releases/v5.5.0) - Smart typography and matched-pair wrapping in rich text, pasting links onto shapes, a replaceable note attribution badge, TipTap's extension API re-exported from tldraw, and a reliability pass across the SDK
387
+ - [v5.4](https://tldraw.dev/releases/v5.4.0) - A center align operation, a tleditors registry of mounted editors, faster signals and store layers, and a broad reliability pass across the SDK
386
388
  - [v5.3](https://tldraw.dev/releases/v5.3.0) - Commenting with anchored threads on the canvas, new collaboration packages, geo shape flipping, crop snapping, and faster viewport culling
387
389
  - [v5.2](https://tldraw.dev/releases/v5.2.0) - Faster freehand ink, a frame selection action, SDK-wide performance improvements, and breaking changes to the collaborator user-id types and Node support
388
390
  - [v5.1](https://tldraw.dev/releases/v5.1.0) - Page menu redesign, copy-styles shortcut, selectable locked shapes, public translation APIs, and performance improvements
@@ -1198,7 +1200,7 @@ See [Collaboration](https://tldraw.dev/sdk-features/collaboration) for productio
1198
1200
 
1199
1201
  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.
1200
1202
 
1201
- See [Persistence](https://tldraw.dev/sdk-features/persistence#migrations) for details on shape props migrations and general migrations.
1203
+ See [Persistence](https://tldraw.dev/sdk-features/persistence#Migrations) for details on shape props migrations and general migrations.
1202
1204
 
1203
1205
  #### Examples
1204
1206
 
@@ -1418,7 +1420,7 @@ function MyApp() {
1418
1420
  }
1419
1421
  ```
1420
1422
 
1421
- 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
+ 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.
1422
1424
 
1423
1425
  #### Using other backends
1424
1426
 
@@ -1771,7 +1773,7 @@ import { CommentTool } from '@tldraw/commenting'
1771
1773
  const tools = [CommentTool.configure({ enableRegions: true })]
1772
1774
  ```
1773
1775
 
1774
- 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
+ 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).
1775
1777
 
1776
1778
  #### Permissions
1777
1779
 
@@ -1783,7 +1785,7 @@ They're UI-level controls and nothing more. Comment records carry a client-suppl
1783
1785
 
1784
1786
  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.
1785
1787
 
1786
- 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
+ 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).
1787
1789
 
1788
1790
  #### Related
1789
1791
 
@@ -2093,7 +2095,7 @@ function MyApp() {
2093
2095
  Use `createTLSchema` to create a store schema, and pass that into `TLSocketRoom`. You can
2094
2096
  use shape/binding utils here, but the schema only reads three properties:
2095
2097
  [`props`](https://tldraw.dev/reference/editor/ShapeUtil#props), `meta`, and
2096
- [`migrations`](https://tldraw.dev/sdk-features/persistence#migrations). You need to provide the default shape
2098
+ [`migrations`](https://tldraw.dev/sdk-features/persistence#Migrations). You need to provide the default shape
2097
2099
  schemas if you're using them.
2098
2100
 
2099
2101
  ```tsx
@@ -2489,12 +2491,12 @@ By default the diagram is centered on the viewport, or on the pointer when the u
2489
2491
 
2490
2492
  #### Supported diagram types
2491
2493
 
2492
- | Diagram type | Mermaid keyword | What you get |
2493
- | ---------------- | --------------------------------- | ----------------------------------------------------------------------- |
2494
- | Flowchart | `flowchart`, `graph` | Geo shapes, arrows, subgraph containers |
2495
- | Sequence diagram | `sequenceDiagram` | Actor shapes, lifelines, signal arrows, fragment containers |
2496
- | State diagram | `stateDiagram`, `stateDiagram-v2` | State shapes, transitions, compound state containers, fork/join, choice |
2497
- | Mindmap | `mindmap` | Colored geo shapes, parent-child edges, tree hierarchy |
2494
+ | Diagram type | Mermaid keyword | What you get |
2495
+ | ---------------- | --------------------------------- | ------------------------------------------------------------------------------ |
2496
+ | Flowchart | `flowchart`, `graph` | Geo shapes, arrows, subgraph containers |
2497
+ | Sequence diagram | `sequenceDiagram` | Actor shapes, lifelines, signal arrows, fragment containers, participant boxes |
2498
+ | State diagram | `stateDiagram`, `stateDiagram-v2` | State shapes, transitions, compound state containers, fork/join, choice |
2499
+ | Mindmap | `mindmap` | Colored geo shapes, parent-child edges, tree hierarchy |
2498
2500
 
2499
2501
  Subgraphs, fragments, and compound states become geo rectangles with their child shapes parented to them.
2500
2502
 
@@ -2917,7 +2919,7 @@ For example, see `src/components/WhiteboardModal.tsx:92` for UI component overri
2917
2919
 
2918
2920
  #### Further reading
2919
2921
 
2920
- - **[Custom shape utilities](https://tldraw.dev/docs/shapes#custom-shapes)**: Learn how to create custom shapes with their own interactions.
2922
+ - **[Custom shape utilities](https://tldraw.dev/docs/shapes#Custom-shapes)**: Learn how to create custom shapes with their own interactions.
2921
2923
 
2922
2924
  - **[Editor API](https://tldraw.dev/docs/editor)**: Learn about the tldraw Editor.
2923
2925
 
@@ -3453,14 +3455,14 @@ The system prompt is rebuilt for each step in the agentic loop depending on whic
3453
3455
  You can set an agent's model by calling `setModelName` on the `modelName` manager.
3454
3456
 
3455
3457
  ```tsx
3456
- agent.modelName.setModelName('gemini-3-flash-preview')
3458
+ agent.modelName.setModelName('gemini-3.8-flash')
3457
3459
  ```
3458
3460
 
3459
3461
  To override an agent's model, specify a different model name with a request.
3460
3462
 
3461
3463
  ```tsx
3462
3464
  agent.prompt({
3463
- modelName: 'gemini-3-flash-preview',
3465
+ modelName: 'gemini-3.8-flash',
3464
3466
  message: 'Draw a diagram of a volcano.',
3465
3467
  })
3466
3468
  ```
@@ -3469,7 +3471,7 @@ You can conditionally override the model name by overriding the `getModelName()`
3469
3471
 
3470
3472
  ```tsx
3471
3473
  override getModelName(part: MyCustomPromptPart) {
3472
- return part.fastMode ? 'gemini-3-flash-preview' : 'claude-sonnet-4-5'
3474
+ return part.fastMode ? 'gemini-3.8-flash' : 'claude-sonnet-5'
3473
3475
  }
3474
3476
  ```
3475
3477
 
@@ -3478,10 +3480,14 @@ override getModelName(part: MyCustomPromptPart) {
3478
3480
  To add support for a different model, add the model's definition to `AGENT_MODEL_DEFINITIONS` in the `shared/models.ts` file.
3479
3481
 
3480
3482
  ```tsx
3481
- 'claude-sonnet-4-5': {
3482
- name: 'claude-sonnet-4-5',
3483
- id: 'claude-sonnet-4-5',
3483
+ 'claude-sonnet-5': {
3484
+ name: 'claude-sonnet-5',
3485
+ id: 'claude-sonnet-5',
3484
3486
  provider: 'anthropic',
3487
+ supportsPrefill: false,
3488
+ supportsTemperature: false,
3489
+ thinking: 'adaptive',
3490
+ effort: 'low',
3485
3491
  }
3486
3492
  ```
3487
3493
 
@@ -3489,7 +3495,7 @@ If you need to add any extra setup or configuration for your provider, you can a
3489
3495
 
3490
3496
  ##### Support custom shapes
3491
3497
 
3492
- 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.
3498
+ 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.
3493
3499
 
3494
3500
  To support custom shapes, you have two main options:
3495
3501
 
@@ -3666,7 +3672,7 @@ export function convertFocusedShapeToTldrawShape(
3666
3672
 
3667
3673
  - **[Multiplayer starter kit](https://tldraw.dev/starter-kits/multiplayer)**: Use the tldraw multiplayer sync starter kit to build multi-user agent environments.
3668
3674
 
3669
- - **[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.
3675
+ - **[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.
3670
3676
 
3671
3677
  - **[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.
3672
3678
 
@@ -3870,7 +3876,7 @@ See `client/connection/ConnectionBindingUtil.tsx` as an example. This file demon
3870
3876
  #### Further reading
3871
3877
 
3872
3878
  - [Workflow starter kit](https://tldraw.dev/starter-kits/workflow): Learn how to build visual programming interfaces with node-based workflows on infinite canvas.
3873
- - [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.
3879
+ - [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.
3874
3880
  - [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.
3875
3881
  - [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.
3876
3882
 
@@ -4198,7 +4204,7 @@ See [`src/fluid/FluidManager.ts`](https://github.com/tldraw/tldraw/tree/main/tem
4198
4204
 
4199
4205
  #### Further reading
4200
4206
 
4201
- 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).
4207
+ 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).
4202
4208
 
4203
4209
  ---
4204
4210
 
@@ -4651,6 +4657,10 @@ kbd: 'cmd+shift+s,ctrl+shift+s' // Cmd+Shift+S or Ctrl+Shift+S
4651
4657
 
4652
4658
  Modifiers are `cmd` (alias `meta`), `ctrl`, `shift`, and `alt` (alias `option`). Special keys include `del`, `backspace`, `enter`, `escape`, `space`, and the arrow keys (`left`, `right`, `up`, `down`).
4653
4659
 
4660
+ To bind the `+` key itself, double the trailing plus: `cmd++`. That matches an unshifted `+` key (German, Nordic and similar layouts, or the numpad). On layouts where `+` is shift plus another key, such as US, write `cmd+shift++`, which is the same binding as `cmd+shift+=`.
4661
+
4662
+ Shortcuts match the character the browser reports for the key press, not the physical keycap, with two exceptions: shifted number-row keys match by position, so write them as `shift+<digit>` on every layout, and when the reported character is non-ASCII (Cyrillic, Greek, macOS Option dead keys) matching falls back to the physical key's US QWERTY character, so `cmd+z` still works on a Russian layout. With shift held, the shifted and unshifted US spellings are the same binding, so `shift+:` and `shift+;` both fire when the browser reports `:` with shift held. Bind what the keyboard emits, not what the keycap says: on French AZERTY the `:` key emits `/` with shift held, so bind `shift+/`; on Japanese JIS the `^` key emits `~`, so bind `shift+~`. The characters `!`, `?` and `$` are reserved as legacy modifier markers and cannot be used as keys.
4663
+
4654
4664
  Shortcuts only fire while the editor is focused and the key event does not target a text input. They are also disabled when a menu is open, a shape is being edited, the editor has a crashing error, or the user has disabled keyboard shortcuts in preferences. In readonly mode, only actions with `readonlyOk` are bound. Actions marked with `isRequiredA11yAction: true` bypass the disabled check for accessibility purposes.
4655
4665
 
4656
4666
  #### Actions in menus
@@ -5336,6 +5346,28 @@ Attribution is opt-in per shape type. Each shape util decides what to track and
5336
5346
 
5337
5347
  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.
5338
5348
 
5349
+ 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:
5350
+
5351
+ ```tsx
5352
+ import { NoteShapeUtil, Tldraw } from 'tldraw'
5353
+
5354
+ // Hide the attribution badge
5355
+ ;<Tldraw shapeUtils={[NoteShapeUtil.configure({ AttributionComponent: null })]} />
5356
+
5357
+ // Or render your own
5358
+ ;<Tldraw
5359
+ shapeUtils={[
5360
+ NoteShapeUtil.configure({
5361
+ AttributionComponent: ({ firstName, color }) => (
5362
+ <div className="tl-note__attribution" style={{ color }}>
5363
+ ✍️ {firstName}
5364
+ </div>
5365
+ ),
5366
+ }),
5367
+ ]}
5368
+ />
5369
+ ```
5370
+
5339
5371
  #### Reading attribution
5340
5372
 
5341
5373
  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:
@@ -5432,7 +5464,7 @@ Custom metadata is validated and persisted alongside the standard user fields. A
5432
5464
  | `createCachedUserResolve` | Create a cached resolve function for `TLUserStore` |
5433
5465
  | `createUserRecordType` | Build a user record type with custom meta validators |
5434
5466
 
5435
- For setting up user identity in multiplayer, see the [Collaboration](https://tldraw.dev/sdk-features/collaboration#user-identity) page.
5467
+ For setting up user identity in multiplayer, see the [Collaboration](https://tldraw.dev/sdk-features/collaboration#User-identity) page.
5436
5468
 
5437
5469
  #### Related examples
5438
5470
 
@@ -5694,7 +5726,7 @@ editor.setCameraOptions({
5694
5726
 
5695
5727
  Set `isLocked` to freeze the camera for fixed-viewport apps. Camera methods then do nothing unless you pass `force: true`.
5696
5728
 
5697
- `wheelBehavior` decides what the mouse wheel or trackpad scroll does: `'pan'`, `'zoom'`, or `'none'`. If the user has set an input mode in their preferences, that preference wins: `'trackpad'` pans and `'mouse'` zooms.
5729
+ `wheelBehavior` decides what the mouse wheel or trackpad scroll does: `'pan'`, `'zoom'`, or `'none'`. If the user has set an input mode in their preferences, that preference wins between the two: `'trackpad'` pans and `'mouse'` zooms. `'none'` disables the wheel regardless of the preference.
5698
5730
 
5699
5731
  `panSpeed` and `zoomSpeed` are multipliers on input sensitivity. Values below 1 slow movement down, values above 1 speed it up.
5700
5732
 
@@ -6066,6 +6098,18 @@ This makes the content portable across editor instances without relying on URLs
6066
6098
 
6067
6099
  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.
6068
6100
 
6101
+ ##### Pasting a link onto a shape
6102
+
6103
+ 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.
6104
+
6105
+ The clipboard signals this by setting `shapeId` on the `url` external content, so a custom `url` handler can take over or ignore it:
6106
+
6107
+ ```ts
6108
+ editor.registerExternalContentHandler('url', async ({ url, point, shapeId }) => {
6109
+ // ignore shapeId to always create a bookmark
6110
+ })
6111
+ ```
6112
+
6069
6113
  ##### Plain text paste
6070
6114
 
6071
6115
  `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.
@@ -7575,7 +7619,7 @@ class MyShapeUtil extends ShapeUtil<MyShape> {
7575
7619
  }
7576
7620
  ```
7577
7621
 
7578
- 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.
7622
+ 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.
7579
7623
 
7580
7624
  #### Related examples
7581
7625
 
@@ -7748,7 +7792,7 @@ export default function App() {
7748
7792
  }
7749
7793
  ```
7750
7794
 
7751
- 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.
7795
+ 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.
7752
7796
 
7753
7797
  #### Availability
7754
7798
 
@@ -8541,7 +8585,7 @@ const ConfiguredFrameUtil = FrameShapeUtil.configure({
8541
8585
  })
8542
8586
  ```
8543
8587
 
8544
- 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.
8588
+ 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.
8545
8589
 
8546
8590
  ##### Group
8547
8591
 
@@ -9154,8 +9198,8 @@ The geometry uses the processed stroke points (after applying streamline and smo
9154
9198
 
9155
9199
  #### Related shapes
9156
9200
 
9157
- - [Highlight](https://tldraw.dev/sdk-features/default-shapes#highlight) uses the same point capture system but renders semi-transparently for marking up content
9158
- - [Line](https://tldraw.dev/sdk-features/default-shapes#line) creates editable multi-point lines with draggable handles
9201
+ - [Highlight](https://tldraw.dev/sdk-features/default-shapes#Highlight) uses the same point capture system but renders semi-transparently for marking up content
9202
+ - [Line](https://tldraw.dev/sdk-features/default-shapes#Line) creates editable multi-point lines with draggable handles
9159
9203
 
9160
9204
  #### Related articles
9161
9205
 
@@ -9623,7 +9667,7 @@ editor.updateInstanceState({ isReadonly: true })
9623
9667
  editor.updateInstanceState({ isToolLocked: true })
9624
9668
  ```
9625
9669
 
9626
- See [Tools](https://tldraw.dev/sdk-features/tools#tool-lock) for more on tool lock.
9670
+ See [Tools](https://tldraw.dev/sdk-features/tools#Tool-lock) for more on tool lock.
9627
9671
 
9628
9672
  Each page also has instance state (`TLInstancePageState`) tracking selection, hovered shape, and editing shape for that page:
9629
9673
 
@@ -9764,7 +9808,7 @@ The shape stores the original URL and renders the embed version.
9764
9808
 
9765
9809
  #### Fallback to bookmarks
9766
9810
 
9767
- 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.
9811
+ 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.
9768
9812
 
9769
9813
  Use `getEmbedInfo` to check whether a URL is embeddable before creating a shape:
9770
9814
 
@@ -9879,7 +9923,7 @@ export default function App() {
9879
9923
 
9880
9924
  #### Embed-on-paste behavior
9881
9925
 
9882
- 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.
9926
+ 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.
9883
9927
 
9884
9928
  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.
9885
9929
 
@@ -9898,7 +9942,7 @@ Embed shapes render as blank rectangles in SVG exports. The iframe content can't
9898
9942
  #### Related articles
9899
9943
 
9900
9944
  - [Default shapes](https://tldraw.dev/sdk-features/default-shapes) — Overview of all built-in shape types
9901
- - [Bookmark shape](https://tldraw.dev/sdk-features/default-shapes#bookmark) — URL link cards (fallback for non-embeddable URLs)
9945
+ - [Bookmark shape](https://tldraw.dev/sdk-features/default-shapes#Bookmark) — URL link cards (fallback for non-embeddable URLs)
9902
9946
  - [External content handling](https://tldraw.dev/sdk-features/external-content) — Handling pasted and dropped content
9903
9947
  - [Custom embeds example](https://tldraw.dev/examples/configuration/custom-embed) — Add a custom embed definition for a new service
9904
9948
 
@@ -10855,7 +10899,7 @@ Empty names render as `Frame` so unnamed frames still get a label. The shape's `
10855
10899
 
10856
10900
  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.
10857
10901
 
10858
- 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.
10902
+ 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.
10859
10903
 
10860
10904
  #### Shape properties
10861
10905
 
@@ -10947,8 +10991,8 @@ Reach for a frame when you want a labeled, bounded region: a slide, a screen, an
10947
10991
 
10948
10992
  #### Related articles
10949
10993
 
10950
- - [Shapes](https://tldraw.dev/sdk-features/shapes#frames) — How to build your own container shape with `BaseFrameLikeShapeUtil`
10951
- - [Default shapes](https://tldraw.dev/sdk-features/default-shapes#frame) — Overview of all built-in shapes
10994
+ - [Shapes](https://tldraw.dev/sdk-features/shapes#Frames) — How to build your own container shape with `BaseFrameLikeShapeUtil`
10995
+ - [Default shapes](https://tldraw.dev/sdk-features/default-shapes#Frame) — Overview of all built-in shapes
10952
10996
  - [Shape clipping](https://tldraw.dev/sdk-features/shape-clipping) — How custom shapes can clip their children
10953
10997
  - [Image export](https://tldraw.dev/sdk-features/image-export) — Exporting frames and selections as images
10954
10998
  - [Parenting](https://tldraw.dev/sdk-features/parenting) — How shapes are nested inside containers
@@ -13213,7 +13257,7 @@ When tool lock is enabled, the current tool stays active after creating a shape
13213
13257
  editor.updateInstanceState({ isToolLocked: true })
13214
13258
  ```
13215
13259
 
13216
- 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.
13260
+ 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.
13217
13261
 
13218
13262
  ##### Cursor customization
13219
13263
 
@@ -13272,7 +13316,7 @@ When you switch pages, the instance's `currentPageId` changes, but each page ret
13272
13316
  - [Cursors](https://tldraw.dev/sdk-features/cursors) — Cursor types and rotation handling
13273
13317
  - [Readonly mode](https://tldraw.dev/sdk-features/readonly) — Disable editing with `isReadonly`
13274
13318
  - [Focus](https://tldraw.dev/sdk-features/focus) — Editor focus state with `isFocused`
13275
- - [Tools](https://tldraw.dev/sdk-features/tools#tool-lock) — Tool lock behavior with `isToolLocked`
13319
+ - [Tools](https://tldraw.dev/sdk-features/tools#Tool-lock) — Tool lock behavior with `isToolLocked`
13276
13320
  - [User preferences](https://tldraw.dev/sdk-features/user-preferences) — Global preferences that persist across editor instances
13277
13321
 
13278
13322
  #### Related examples
@@ -13713,7 +13757,7 @@ Even with `ignoreShapeLock: true`, some behaviors remain unchanged: locked shape
13713
13757
 
13714
13758
  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.
13715
13759
 
13716
- [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:
13760
+ [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:
13717
13761
 
13718
13762
  ```typescript
13719
13763
  class MyInteractiveShapeUtil extends ShapeUtil<MyShape> {
@@ -13820,9 +13864,10 @@ The note's text color is determined by its `labelColor` property. When set to `'
13820
13864
 
13821
13865
  Notes support the following configuration options:
13822
13866
 
13823
- | Option | Type | Default | Description |
13824
- | ------------ | --------------------- | -------- | ----------------------------------------------------------------- |
13825
- | `resizeMode` | `'none'` \| `'scale'` | `'none'` | How the note resizes. Set to `'scale'` for manual resize handles. |
13867
+ | Option | Type | Default | Description |
13868
+ | ---------------------- | ------------------------------------------------------ | ----------------------------- | ------------------------------------------------------------------------------------------------- |
13869
+ | `resizeMode` | `'none'` \| `'scale'` | `'none'` | How the note resizes. Set to `'scale'` for manual resize handles. |
13870
+ | `AttributionComponent` | `ComponentType<TLNoteShapeAttributionProps>` \| `null` | `DefaultNoteShapeAttribution` | Component for the attribution badge. Set to `null` to hide it, or provide your own to replace it. |
13826
13871
 
13827
13872
  By default, notes can't be manually resized—they only grow based on text content. To allow user resizing with locked aspect ratio:
13828
13873
 
@@ -13845,9 +13890,13 @@ export default function App() {
13845
13890
 
13846
13891
  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).
13847
13892
 
13893
+ ##### Attribution badge
13894
+
13895
+ 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.
13896
+
13848
13897
  #### Dynamic resize mode
13849
13898
 
13850
- 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.
13899
+ 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.
13851
13900
 
13852
13901
  #### Related articles
13853
13902
 
@@ -13926,7 +13975,7 @@ Control when pointer movement becomes a drag operation:
13926
13975
  | `uiDragDistanceSquared` | 16 | Distance² for UI element drag (4px) |
13927
13976
  | `uiCoarseDragDistanceSquared` | 625 | Distance² for touch UI drag (25px) |
13928
13977
 
13929
- Values are squared to avoid computing square roots during drag detection. The larger touch thresholds prevent accidental drags on mobile devices.
13978
+ 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.
13930
13979
 
13931
13980
  ##### Handle and hit testing
13932
13981
 
@@ -14180,7 +14229,7 @@ function App() {
14180
14229
  }
14181
14230
  ```
14182
14231
 
14183
- See [Embed shape](https://tldraw.dev/sdk-features/embed-shape#custom-embed-definitions) for the full embed definition API.
14232
+ See [Embed shape](https://tldraw.dev/sdk-features/embed-shape#Custom-embed-definitions) for the full embed definition API.
14184
14233
 
14185
14234
  ##### Editor setup
14186
14235
 
@@ -15725,7 +15774,7 @@ TipTap handles the rich text editing experience. The editor appears when users d
15725
15774
 
15726
15775
  ##### Default extensions
15727
15776
 
15728
- `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.
15777
+ `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.
15729
15778
 
15730
15779
  To tweak StarterKit without losing tldraw's extensions, build the list with `getTipTapDefaultExtensions`, which accepts StarterKit options:
15731
15780
 
@@ -15736,13 +15785,26 @@ import { getTipTapDefaultExtensions } from 'tldraw'
15736
15785
  const extensions = getTipTapDefaultExtensions({ heading: false })
15737
15786
  ```
15738
15787
 
15788
+ ##### Typography
15789
+
15790
+ 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.
15791
+
15792
+ 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.
15793
+
15794
+ To opt out of either, filter it from the list — both are separate entries in the array, unlike the StarterKit sub-extensions:
15795
+
15796
+ ```typescript
15797
+ import { getTipTapDefaultExtensions } from 'tldraw'
15798
+
15799
+ const extensions = getTipTapDefaultExtensions().filter((e) => e.name !== 'typography')
15800
+ ```
15801
+
15739
15802
  ##### Custom extensions
15740
15803
 
15741
15804
  You can add custom TipTap extensions through the `text` field of the `options` prop on the Tldraw component (`TLTextOptions`):
15742
15805
 
15743
15806
  ```tsx
15744
- import { Mark, mergeAttributes } from '@tiptap/core'
15745
- import { Tldraw, tipTapDefaultExtensions } from 'tldraw'
15807
+ import { Mark, Tldraw, mergeAttributes, tipTapDefaultExtensions } from 'tldraw'
15746
15808
  import 'tldraw/tldraw.css'
15747
15809
 
15748
15810
  const CustomMark = Mark.create({
@@ -15782,6 +15844,26 @@ export default function App() {
15782
15844
 
15783
15845
  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.
15784
15846
 
15847
+ ##### Importing TipTap
15848
+
15849
+ 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.
15850
+
15851
+ Task lists aren't part of the default extension set. Add them yourself, along with styles for the checkboxes, which tldraw doesn't provide:
15852
+
15853
+ ```tsx
15854
+ import { TaskItem, TaskList, tipTapDefaultExtensions } from 'tldraw'
15855
+
15856
+ const options = {
15857
+ text: {
15858
+ tipTapConfig: {
15859
+ extensions: [...tipTapDefaultExtensions, TaskList, TaskItem.configure({ nested: true })],
15860
+ },
15861
+ },
15862
+ }
15863
+ ```
15864
+
15865
+ 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.
15866
+
15785
15867
  ##### Rich text toolbar
15786
15868
 
15787
15869
  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.
@@ -15890,7 +15972,7 @@ The chain API lets you compose multiple operations. Each command returns a chain
15890
15972
  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:
15891
15973
 
15892
15974
  ```typescript
15893
- import { JSONContent } from '@tiptap/core'
15975
+ import { JSONContent } from 'tldraw'
15894
15976
 
15895
15977
  function makeAllTextBold(richText: TLRichText): TLRichText {
15896
15978
  const content = (richText.content as JSONContent[]).map((paragraph) => {
@@ -18085,7 +18167,7 @@ Snapshots include schema version information. When you load a snapshot from an o
18085
18167
  const migrated = editor.store.migrateSnapshot(oldSnapshot)
18086
18168
  ```
18087
18169
 
18088
- 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.
18170
+ 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.
18089
18171
 
18090
18172
  #### Queries
18091
18173
 
@@ -20445,7 +20527,7 @@ export default function App() {
20445
20527
 
20446
20528
  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.
20447
20529
 
20448
- 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.
20530
+ 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.
20449
20531
 
20450
20532
  #### Reading preferences
20451
20533
 
@@ -20526,7 +20608,7 @@ const isDark = editor.user.getIsDarkMode()
20526
20608
  // true if colorScheme is 'dark', or 'system' with OS in dark mode
20527
20609
  ```
20528
20610
 
20529
- 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.
20611
+ 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.
20530
20612
 
20531
20613
  #### Persistence and synchronization
20532
20614
 
@@ -20910,31 +20992,32 @@ This covers the runtime dependencies that the `@tldraw/*` packages declare direc
20910
20992
 
20911
20993
  #### Dependencies
20912
20994
 
20913
- | Dependency | Version | License | Used by |
20914
- | ------------------------------------------------------------------- | ------- | ------- | -------------------------------------------- |
20915
- | [@tiptap/core](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `commenting`, `editor`, `mentions`, `tldraw` |
20916
- | [@tiptap/extension-code](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `tldraw` |
20917
- | [@tiptap/extension-highlight](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `tldraw` |
20918
- | [@tiptap/extension-list](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `tldraw` |
20919
- | [@tiptap/extension-mention](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `mentions` |
20920
- | [@tiptap/pm](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `commenting`, `editor`, `mentions`, `tldraw` |
20921
- | [@tiptap/react](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `commenting`, `editor`, `mentions`, `tldraw` |
20922
- | [@tiptap/starter-kit](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `tldraw` |
20923
- | [@tiptap/suggestion](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `mentions` |
20924
- | [classnames](https://github.com/JedWatson/classnames) | 2.5.1 | MIT | `editor`, `tldraw` |
20925
- | [eventemitter3](https://github.com/primus/eventemitter3) | 4.0.7 | MIT | `editor` |
20926
- | [idb](https://github.com/jakearchibald/idb) | 7.1.1 | ISC | `editor`, `tldraw` |
20927
- | [is-plain-object](https://github.com/jonschlinkert/is-plain-object) | 5.0.0 | MIT | `editor` |
20928
- | [lodash.isequal](https://github.com/lodash/lodash) | 4.5.0 | MIT | `utils` |
20929
- | [lodash.isequalwith](https://github.com/lodash/lodash) | 4.4.0 | MIT | `utils` |
20930
- | [lodash.throttle](https://github.com/lodash/lodash) | 4.1.1 | MIT | `utils` |
20931
- | [lodash.uniq](https://github.com/lodash/lodash) | 4.5.0 | MIT | `utils` |
20932
- | [lz-string](https://github.com/pieroxy/lz-string) | 1.5.0 | MIT | `tldraw` |
20933
- | [mermaid](https://github.com/mermaid-js/mermaid) | 11.16.1 | MIT | `mermaid` |
20934
- | [nanoevents](https://github.com/ai/nanoevents) | 7.0.1 | MIT | `sync`, `sync-core` |
20935
- | [radix-ui](https://github.com/radix-ui/primitives) | 1.4.2 | MIT | `tldraw` |
20936
- | [rbush](https://github.com/mourner/rbush) | 3.0.1 | MIT | `editor` |
20937
- | [ws](https://github.com/websockets/ws) | 8.21.0 | MIT | `sync`, `sync-core` |
20995
+ | Dependency | Version | License | Used by |
20996
+ | -------------------------------------------------------------------- | ------- | ------- | -------------------------------------------- |
20997
+ | [@tiptap/core](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `commenting`, `editor`, `mentions`, `tldraw` |
20998
+ | [@tiptap/extension-code](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `tldraw` |
20999
+ | [@tiptap/extension-highlight](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `tldraw` |
21000
+ | [@tiptap/extension-list](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `tldraw` |
21001
+ | [@tiptap/extension-mention](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `mentions` |
21002
+ | [@tiptap/extension-typography](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `tldraw` |
21003
+ | [@tiptap/pm](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `commenting`, `editor`, `mentions`, `tldraw` |
21004
+ | [@tiptap/react](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `commenting`, `editor`, `mentions`, `tldraw` |
21005
+ | [@tiptap/starter-kit](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `tldraw` |
21006
+ | [@tiptap/suggestion](https://github.com/ueberdosis/tiptap) | 3.13.0 | MIT | `mentions` |
21007
+ | [classnames](https://github.com/JedWatson/classnames) | 2.5.1 | MIT | `editor`, `tldraw` |
21008
+ | [eventemitter3](https://github.com/primus/eventemitter3) | 4.0.7 | MIT | `editor` |
21009
+ | [idb](https://github.com/jakearchibald/idb) | 7.1.1 | ISC | `editor`, `tldraw` |
21010
+ | [is-plain-object](https://github.com/jonschlinkert/is-plain-object) | 5.0.0 | MIT | `editor` |
21011
+ | [lodash.isequal](https://github.com/lodash/lodash) | 4.5.0 | MIT | `utils` |
21012
+ | [lodash.isequalwith](https://github.com/lodash/lodash) | 4.4.0 | MIT | `utils` |
21013
+ | [lodash.throttle](https://github.com/lodash/lodash) | 4.1.1 | MIT | `utils` |
21014
+ | [lodash.uniq](https://github.com/lodash/lodash) | 4.5.0 | MIT | `utils` |
21015
+ | [lz-string](https://github.com/pieroxy/lz-string) | 1.5.0 | MIT | `tldraw` |
21016
+ | [mermaid](https://github.com/mermaid-js/mermaid) | 11.16.1 | MIT | `mermaid` |
21017
+ | [nanoevents](https://github.com/ai/nanoevents) | 7.0.1 | MIT | `sync`, `sync-core` |
21018
+ | [radix-ui](https://github.com/radix-ui/primitives) | 1.4.2 | MIT | `tldraw` |
21019
+ | [rbush](https://github.com/mourner/rbush) | 3.0.1 | MIT | `editor` |
21020
+ | [ws](https://github.com/websockets/ws) | 8.21.0 | MIT | `sync`, `sync-core` |
20938
21021
 
20939
21022
  #### Inline code
20940
21023