tldraw 4.3.0-canary.da35795ba8e2 → 4.3.0-canary.e52fa5385f86

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 (225) hide show
  1. package/dist-cjs/index.d.ts +17 -5
  2. package/dist-cjs/index.js +2 -1
  3. package/dist-cjs/index.js.map +2 -2
  4. package/dist-cjs/lib/bindings/arrow/ArrowBindingUtil.js.map +2 -2
  5. package/dist-cjs/lib/canvas/TldrawSelectionForeground.js.map +2 -2
  6. package/dist-cjs/lib/defaultExternalContentHandlers.js.map +2 -2
  7. package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.js.map +2 -2
  8. package/dist-cjs/lib/shapes/arrow/arrowLabel.js.map +2 -2
  9. package/dist-cjs/lib/shapes/arrow/arrowTargetState.js.map +2 -2
  10. package/dist-cjs/lib/shapes/arrow/elbow/elbowArrowSnapLines.js.map +2 -2
  11. package/dist-cjs/lib/shapes/arrow/shared.js.map +2 -2
  12. package/dist-cjs/lib/shapes/arrow/toolStates/Pointing.js.map +2 -2
  13. package/dist-cjs/lib/shapes/bookmark/bookmarks.js.map +2 -2
  14. package/dist-cjs/lib/shapes/draw/toolStates/Drawing.js.map +2 -2
  15. package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js.map +2 -2
  16. package/dist-cjs/lib/shapes/frame/FrameShapeTool.js.map +1 -1
  17. package/dist-cjs/lib/shapes/geo/toolStates/Pointing.js.map +2 -2
  18. package/dist-cjs/lib/shapes/line/toolStates/Pointing.js.map +2 -2
  19. package/dist-cjs/lib/shapes/note/noteHelpers.js.map +2 -2
  20. package/dist-cjs/lib/shapes/shared/PlainTextLabel.js.map +2 -2
  21. package/dist-cjs/lib/shapes/shared/RichTextLabel.js.map +2 -2
  22. package/dist-cjs/lib/shapes/shared/crop.js +1 -0
  23. package/dist-cjs/lib/shapes/shared/crop.js.map +2 -2
  24. package/dist-cjs/lib/shapes/shared/useEditablePlainText.js.map +2 -2
  25. package/dist-cjs/lib/shapes/shared/useEditableRichText.js.map +2 -2
  26. package/dist-cjs/lib/shapes/text/toolStates/Pointing.js.map +2 -2
  27. package/dist-cjs/lib/tools/EraserTool/childStates/Erasing.js.map +2 -2
  28. package/dist-cjs/lib/tools/EraserTool/childStates/Pointing.js.map +2 -2
  29. package/dist-cjs/lib/tools/SelectTool/DragAndDropManager.js +1 -4
  30. package/dist-cjs/lib/tools/SelectTool/DragAndDropManager.js.map +2 -2
  31. package/dist-cjs/lib/tools/SelectTool/childStates/Brushing.js.map +2 -2
  32. package/dist-cjs/lib/tools/SelectTool/childStates/Crop/children/Idle.js.map +2 -2
  33. package/dist-cjs/lib/tools/SelectTool/childStates/DraggingHandle.js +1 -1
  34. package/dist-cjs/lib/tools/SelectTool/childStates/DraggingHandle.js.map +2 -2
  35. package/dist-cjs/lib/tools/SelectTool/childStates/EditingShape.js.map +2 -2
  36. package/dist-cjs/lib/tools/SelectTool/childStates/Idle.js.map +2 -2
  37. package/dist-cjs/lib/tools/SelectTool/childStates/PointingArrowLabel.js.map +2 -2
  38. package/dist-cjs/lib/tools/SelectTool/childStates/PointingHandle.js.map +2 -2
  39. package/dist-cjs/lib/tools/SelectTool/childStates/PointingSelection.js.map +2 -2
  40. package/dist-cjs/lib/tools/SelectTool/childStates/Resizing.js.map +2 -2
  41. package/dist-cjs/lib/tools/SelectTool/childStates/ScribbleBrushing.js.map +2 -2
  42. package/dist-cjs/lib/tools/SelectTool/childStates/Translating.js.map +2 -2
  43. package/dist-cjs/lib/ui/components/EditLinkDialog.js +11 -1
  44. package/dist-cjs/lib/ui/components/EditLinkDialog.js.map +2 -2
  45. package/dist-cjs/lib/ui/components/Toolbar/AltTextEditor.js.map +2 -2
  46. package/dist-cjs/lib/ui/components/menu-items.js.map +2 -2
  47. package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js +1 -1
  48. package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js.map +2 -2
  49. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +143 -88
  50. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +2 -2
  51. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +1 -1
  52. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
  53. package/dist-cjs/lib/ui/context/actions.js +1 -2
  54. package/dist-cjs/lib/ui/context/actions.js.map +2 -2
  55. package/dist-cjs/lib/ui/hooks/menu-hooks.js.map +2 -2
  56. package/dist-cjs/lib/ui/hooks/useFlatten.js.map +2 -2
  57. package/dist-cjs/lib/ui/hooks/useTools.js.map +2 -2
  58. package/dist-cjs/lib/ui/version.js +3 -3
  59. package/dist-cjs/lib/ui/version.js.map +1 -1
  60. package/dist-cjs/lib/utils/excalidraw/putExcalidrawContent.js +8 -0
  61. package/dist-cjs/lib/utils/excalidraw/putExcalidrawContent.js.map +2 -2
  62. package/dist-cjs/lib/utils/export/exportAs.js.map +2 -2
  63. package/dist-cjs/lib/utils/frames/frames.js.map +2 -2
  64. package/dist-cjs/lib/utils/text/richText.js +7 -17
  65. package/dist-cjs/lib/utils/text/richText.js.map +3 -3
  66. package/dist-cjs/lib/utils/tldr/buildFromV1Document.js.map +2 -2
  67. package/dist-esm/index.d.mts +17 -5
  68. package/dist-esm/index.mjs +3 -1
  69. package/dist-esm/index.mjs.map +2 -2
  70. package/dist-esm/lib/bindings/arrow/ArrowBindingUtil.mjs.map +2 -2
  71. package/dist-esm/lib/canvas/TldrawSelectionForeground.mjs.map +2 -2
  72. package/dist-esm/lib/defaultExternalContentHandlers.mjs.map +2 -2
  73. package/dist-esm/lib/shapes/arrow/ArrowShapeUtil.mjs.map +2 -2
  74. package/dist-esm/lib/shapes/arrow/arrowLabel.mjs.map +2 -2
  75. package/dist-esm/lib/shapes/arrow/arrowTargetState.mjs.map +2 -2
  76. package/dist-esm/lib/shapes/arrow/elbow/elbowArrowSnapLines.mjs.map +2 -2
  77. package/dist-esm/lib/shapes/arrow/shared.mjs.map +2 -2
  78. package/dist-esm/lib/shapes/arrow/toolStates/Pointing.mjs.map +2 -2
  79. package/dist-esm/lib/shapes/bookmark/bookmarks.mjs.map +2 -2
  80. package/dist-esm/lib/shapes/draw/toolStates/Drawing.mjs.map +2 -2
  81. package/dist-esm/lib/shapes/embed/EmbedShapeUtil.mjs.map +2 -2
  82. package/dist-esm/lib/shapes/frame/FrameShapeTool.mjs.map +1 -1
  83. package/dist-esm/lib/shapes/geo/toolStates/Pointing.mjs.map +2 -2
  84. package/dist-esm/lib/shapes/line/toolStates/Pointing.mjs.map +2 -2
  85. package/dist-esm/lib/shapes/note/noteHelpers.mjs.map +2 -2
  86. package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs.map +2 -2
  87. package/dist-esm/lib/shapes/shared/RichTextLabel.mjs.map +2 -2
  88. package/dist-esm/lib/shapes/shared/crop.mjs +1 -0
  89. package/dist-esm/lib/shapes/shared/crop.mjs.map +2 -2
  90. package/dist-esm/lib/shapes/shared/useEditablePlainText.mjs.map +2 -2
  91. package/dist-esm/lib/shapes/shared/useEditableRichText.mjs.map +2 -2
  92. package/dist-esm/lib/shapes/text/toolStates/Pointing.mjs.map +2 -2
  93. package/dist-esm/lib/tools/EraserTool/childStates/Erasing.mjs.map +2 -2
  94. package/dist-esm/lib/tools/EraserTool/childStates/Pointing.mjs +1 -4
  95. package/dist-esm/lib/tools/EraserTool/childStates/Pointing.mjs.map +2 -2
  96. package/dist-esm/lib/tools/SelectTool/DragAndDropManager.mjs +1 -4
  97. package/dist-esm/lib/tools/SelectTool/DragAndDropManager.mjs.map +2 -2
  98. package/dist-esm/lib/tools/SelectTool/childStates/Brushing.mjs.map +2 -2
  99. package/dist-esm/lib/tools/SelectTool/childStates/Crop/children/Idle.mjs.map +2 -2
  100. package/dist-esm/lib/tools/SelectTool/childStates/DraggingHandle.mjs +1 -1
  101. package/dist-esm/lib/tools/SelectTool/childStates/DraggingHandle.mjs.map +2 -2
  102. package/dist-esm/lib/tools/SelectTool/childStates/EditingShape.mjs.map +2 -2
  103. package/dist-esm/lib/tools/SelectTool/childStates/Idle.mjs.map +2 -2
  104. package/dist-esm/lib/tools/SelectTool/childStates/PointingArrowLabel.mjs.map +2 -2
  105. package/dist-esm/lib/tools/SelectTool/childStates/PointingHandle.mjs +1 -4
  106. package/dist-esm/lib/tools/SelectTool/childStates/PointingHandle.mjs.map +2 -2
  107. package/dist-esm/lib/tools/SelectTool/childStates/PointingSelection.mjs.map +2 -2
  108. package/dist-esm/lib/tools/SelectTool/childStates/Resizing.mjs.map +2 -2
  109. package/dist-esm/lib/tools/SelectTool/childStates/ScribbleBrushing.mjs.map +2 -2
  110. package/dist-esm/lib/tools/SelectTool/childStates/Translating.mjs.map +2 -2
  111. package/dist-esm/lib/ui/components/EditLinkDialog.mjs +11 -1
  112. package/dist-esm/lib/ui/components/EditLinkDialog.mjs.map +2 -2
  113. package/dist-esm/lib/ui/components/Toolbar/AltTextEditor.mjs.map +2 -2
  114. package/dist-esm/lib/ui/components/menu-items.mjs +1 -4
  115. package/dist-esm/lib/ui/components/menu-items.mjs.map +2 -2
  116. package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs +2 -2
  117. package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs.map +2 -2
  118. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +151 -90
  119. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +2 -2
  120. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +2 -2
  121. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
  122. package/dist-esm/lib/ui/context/actions.mjs +1 -2
  123. package/dist-esm/lib/ui/context/actions.mjs.map +2 -2
  124. package/dist-esm/lib/ui/hooks/menu-hooks.mjs +1 -4
  125. package/dist-esm/lib/ui/hooks/menu-hooks.mjs.map +2 -2
  126. package/dist-esm/lib/ui/hooks/useFlatten.mjs.map +2 -2
  127. package/dist-esm/lib/ui/hooks/useTools.mjs.map +2 -2
  128. package/dist-esm/lib/ui/version.mjs +3 -3
  129. package/dist-esm/lib/ui/version.mjs.map +1 -1
  130. package/dist-esm/lib/utils/excalidraw/putExcalidrawContent.mjs +8 -0
  131. package/dist-esm/lib/utils/excalidraw/putExcalidrawContent.mjs.map +2 -2
  132. package/dist-esm/lib/utils/export/exportAs.mjs +1 -3
  133. package/dist-esm/lib/utils/export/exportAs.mjs.map +2 -2
  134. package/dist-esm/lib/utils/frames/frames.mjs.map +2 -2
  135. package/dist-esm/lib/utils/text/richText.mjs +3 -3
  136. package/dist-esm/lib/utils/text/richText.mjs.map +2 -2
  137. package/dist-esm/lib/utils/tldr/buildFromV1Document.mjs.map +2 -2
  138. package/package.json +10 -10
  139. package/src/index.ts +1 -0
  140. package/src/lib/bindings/arrow/ArrowBindingUtil.ts +1 -1
  141. package/src/lib/canvas/TldrawSelectionForeground.tsx +4 -9
  142. package/src/lib/defaultExternalContentHandlers.ts +3 -4
  143. package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts +2 -2
  144. package/src/lib/shapes/arrow/ArrowShapeUtil.tsx +1 -1
  145. package/src/lib/shapes/arrow/arrowLabel.ts +1 -1
  146. package/src/lib/shapes/arrow/arrowTargetState.ts +1 -1
  147. package/src/lib/shapes/arrow/elbow/elbowArrowSnapLines.tsx +3 -3
  148. package/src/lib/shapes/arrow/shared.ts +4 -4
  149. package/src/lib/shapes/arrow/toolStates/Pointing.tsx +1 -1
  150. package/src/lib/shapes/bookmark/bookmarks.ts +3 -3
  151. package/src/lib/shapes/draw/toolStates/Drawing.ts +4 -4
  152. package/src/lib/shapes/embed/EmbedShapeUtil.tsx +1 -1
  153. package/src/lib/shapes/frame/FrameShapeTool.ts +1 -1
  154. package/src/lib/shapes/geo/GeoShapeUtil.test.tsx +10 -2
  155. package/src/lib/shapes/geo/toolStates/Pointing.ts +3 -3
  156. package/src/lib/shapes/line/LineShapeTool.test.ts +6 -6
  157. package/src/lib/shapes/line/LineShapeUtil.test.tsx +5 -5
  158. package/src/lib/shapes/line/toolStates/Pointing.ts +1 -1
  159. package/src/lib/shapes/note/NoteShapeTool.test.ts +2 -1
  160. package/src/lib/shapes/note/noteHelpers.ts +2 -2
  161. package/src/lib/shapes/shared/PlainTextLabel.tsx +2 -1
  162. package/src/lib/shapes/shared/RichTextLabel.tsx +2 -1
  163. package/src/lib/shapes/shared/crop.ts +1 -0
  164. package/src/lib/shapes/shared/useEditablePlainText.ts +7 -3
  165. package/src/lib/shapes/shared/useEditableRichText.ts +7 -3
  166. package/src/lib/shapes/text/TextShapeTool.test.ts +4 -4
  167. package/src/lib/shapes/text/toolStates/Pointing.ts +1 -1
  168. package/src/lib/tools/EraserTool/childStates/Erasing.ts +3 -5
  169. package/src/lib/tools/EraserTool/childStates/Pointing.ts +3 -16
  170. package/src/lib/tools/SelectTool/DragAndDropManager.ts +2 -4
  171. package/src/lib/tools/SelectTool/childStates/Brushing.ts +2 -6
  172. package/src/lib/tools/SelectTool/childStates/Crop/children/Idle.ts +2 -3
  173. package/src/lib/tools/SelectTool/childStates/DraggingHandle.tsx +4 -7
  174. package/src/lib/tools/SelectTool/childStates/EditingShape.ts +2 -4
  175. package/src/lib/tools/SelectTool/childStates/Idle.ts +6 -10
  176. package/src/lib/tools/SelectTool/childStates/PointingArrowLabel.ts +1 -1
  177. package/src/lib/tools/SelectTool/childStates/PointingHandle.ts +4 -12
  178. package/src/lib/tools/SelectTool/childStates/PointingSelection.ts +2 -2
  179. package/src/lib/tools/SelectTool/childStates/Resizing.ts +2 -4
  180. package/src/lib/tools/SelectTool/childStates/ScribbleBrushing.ts +2 -4
  181. package/src/lib/tools/SelectTool/childStates/Translating.ts +1 -3
  182. package/src/lib/ui/components/EditLinkDialog.tsx +16 -6
  183. package/src/lib/ui/components/Toolbar/AltTextEditor.tsx +2 -2
  184. package/src/lib/ui/components/menu-items.tsx +6 -14
  185. package/src/lib/ui/components/primitives/TldrawUiSlider.tsx +2 -2
  186. package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +196 -108
  187. package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +2 -2
  188. package/src/lib/ui/context/actions.tsx +9 -13
  189. package/src/lib/ui/hooks/menu-hooks.ts +9 -19
  190. package/src/lib/ui/hooks/useFlatten.ts +1 -2
  191. package/src/lib/ui/hooks/useTools.tsx +1 -2
  192. package/src/lib/ui/version.ts +3 -3
  193. package/src/lib/utils/excalidraw/putExcalidrawContent.ts +8 -0
  194. package/src/lib/utils/export/exportAs.ts +2 -9
  195. package/src/lib/utils/frames/frames.ts +1 -1
  196. package/src/lib/utils/text/richText.ts +3 -3
  197. package/src/lib/utils/tldr/buildFromV1Document.ts +12 -17
  198. package/src/test/Editor.test.tsx +38 -12
  199. package/src/test/SelectTool.test.ts +11 -19
  200. package/src/test/TestEditor.ts +1 -4
  201. package/src/test/TldrawEditor.test.tsx +21 -18
  202. package/src/test/bindings.test.tsx +29 -25
  203. package/src/test/bindingsIndex.test.tsx +4 -4
  204. package/src/test/commands/createShape.test.ts +64 -0
  205. package/src/test/commands/createShapes.test.ts +15 -1
  206. package/src/test/commands/getSvgString.test.ts +2 -2
  207. package/src/test/commands/isShapeOfType.test.ts +44 -0
  208. package/src/test/commands/putContent.test.ts +80 -1
  209. package/src/test/commands/updateShape.test.ts +67 -0
  210. package/src/test/commands/updateShapes.test.ts +21 -5
  211. package/src/test/custom-clipping.test.ts +36 -35
  212. package/src/test/customSnapping.test.tsx +77 -62
  213. package/src/test/duplicate.test.ts +1 -1
  214. package/src/test/frames.test.ts +2 -2
  215. package/src/test/getCulledShapes.test.tsx +11 -3
  216. package/src/test/getShapeAtPoint.test.ts +2 -2
  217. package/src/test/groups.test.tsx +6 -3
  218. package/src/test/resizing.test.ts +9 -13
  219. package/src/test/selection-omnibus.test.ts +11 -11
  220. package/src/test/shapeutils.test.ts +1 -1
  221. package/src/test/styles2.test.tsx +1 -1
  222. package/src/test/styles3.test.ts +5 -5
  223. package/src/test/test-jsx.tsx +69 -57
  224. package/src/test/text.test.ts +15 -17
  225. package/src/test/translating.test.ts +6 -8
@@ -6,10 +6,7 @@ import {
6
6
  HALF_PI,
7
7
  PageRecordType,
8
8
  Result,
9
- TLBookmarkShape,
10
9
  TLEmbedShape,
11
- TLFrameShape,
12
- TLGroupShape,
13
10
  TLImageShape,
14
11
  TLShape,
15
12
  TLShapeId,
@@ -327,7 +324,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
327
324
  .getSelectedShapes()
328
325
  .filter(
329
326
  (shape): shape is TLTextShape =>
330
- editor.isShapeOfType<TLTextShape>(shape, 'text') && shape.props.autoSize === false
327
+ editor.isShapeOfType(shape, 'text') && shape.props.autoSize === false
331
328
  )
332
329
  editor.updateShapes(
333
330
  shapes.map((shape) => {
@@ -362,7 +359,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
362
359
  return
363
360
  }
364
361
  const shape = editor.getShape(ids[0])
365
- if (!shape || !editor.isShapeOfType<TLEmbedShape>(shape, 'embed')) {
362
+ if (!shape || !editor.isShapeOfType(shape, 'embed')) {
366
363
  console.error(warnMsg)
367
364
  return
368
365
  }
@@ -401,8 +398,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
401
398
  const creationPromises: Promise<Result<any, any>>[] = []
402
399
 
403
400
  for (const shape of shapes) {
404
- if (!shape || !editor.isShapeOfType<TLEmbedShape>(shape, 'embed') || !shape.props.url)
405
- continue
401
+ if (!shape || !editor.isShapeOfType(shape, 'embed') || !shape.props.url) continue
406
402
 
407
403
  const center = editor.getShapePageBounds(shape)?.center
408
404
 
@@ -441,7 +437,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
441
437
  const createList: TLShapePartial[] = []
442
438
  const deleteList: TLShapeId[] = []
443
439
  for (const shape of shapes) {
444
- if (!editor.isShapeOfType<TLBookmarkShape>(shape, 'bookmark')) continue
440
+ if (!editor.isShapeOfType(shape, 'bookmark')) continue
445
441
 
446
442
  const { url } = shape.props
447
443
 
@@ -552,7 +548,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
552
548
 
553
549
  trackEvent('group-shapes', { source })
554
550
  const onlySelectedShape = editor.getOnlySelectedShape()
555
- if (onlySelectedShape && editor.isShapeOfType<TLGroupShape>(onlySelectedShape, 'group')) {
551
+ if (onlySelectedShape && editor.isShapeOfType(onlySelectedShape, 'group')) {
556
552
  editor.markHistoryStoppingPoint('ungroup')
557
553
  editor.ungroupShapes(editor.getSelectedShapeIds())
558
554
  } else {
@@ -572,7 +568,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
572
568
  const selectedShapes = editor.getSelectedShapes()
573
569
  if (
574
570
  selectedShapes.length > 0 &&
575
- selectedShapes.every((shape) => editor.isShapeOfType<TLFrameShape>(shape, 'frame'))
571
+ selectedShapes.every((shape) => editor.isShapeOfType(shape, 'frame'))
576
572
  ) {
577
573
  editor.markHistoryStoppingPoint('remove-frame')
578
574
  removeFrame(
@@ -590,7 +586,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
590
586
 
591
587
  trackEvent('fit-frame-to-content', { source })
592
588
  const onlySelectedShape = editor.getOnlySelectedShape()
593
- if (onlySelectedShape && editor.isShapeOfType<TLFrameShape>(onlySelectedShape, 'frame')) {
589
+ if (onlySelectedShape && editor.isShapeOfType(onlySelectedShape, 'frame')) {
594
590
  editor.markHistoryStoppingPoint('fit-frame-to-content')
595
591
  fitFrameToContent(editor, onlySelectedShape.id)
596
592
  }
@@ -1599,8 +1595,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
1599
1595
  const onlySelectedShape = editor.getOnlySelectedShape()
1600
1596
  if (
1601
1597
  onlySelectedShape &&
1602
- (editor.isShapeOfType<TLImageShape>(onlySelectedShape, 'image') ||
1603
- editor.isShapeOfType<TLVideoShape>(onlySelectedShape, 'video'))
1598
+ (editor.isShapeOfType(onlySelectedShape, 'image') ||
1599
+ editor.isShapeOfType(onlySelectedShape, 'video'))
1604
1600
  ) {
1605
1601
  const firstToolbarButton = editor
1606
1602
  .getContainer()
@@ -1,14 +1,4 @@
1
- import {
2
- Editor,
3
- TLArrowShape,
4
- TLDrawShape,
5
- TLGroupShape,
6
- TLImageShape,
7
- TLLineShape,
8
- TLTextShape,
9
- useEditor,
10
- useValue,
11
- } from '@tldraw/editor'
1
+ import { Editor, useEditor, useValue } from '@tldraw/editor'
12
2
  import { getArrowBindings } from '../../shapes/arrow/shared'
13
3
 
14
4
  function shapesWithUnboundArrows(editor: Editor) {
@@ -19,7 +9,7 @@ function shapesWithUnboundArrows(editor: Editor) {
19
9
 
20
10
  return selectedShapes.filter((shape) => {
21
11
  if (!shape) return false
22
- if (editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
12
+ if (editor.isShapeOfType(shape, 'arrow')) {
23
13
  const bindings = getArrowBindings(editor, shape)
24
14
  if (bindings.start || bindings.end) return false
25
15
  }
@@ -52,7 +42,7 @@ export const useAllowGroup = () => {
52
42
  if (selectedShapes.length < 2) return false
53
43
 
54
44
  for (const shape of selectedShapes) {
55
- if (editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
45
+ if (editor.isShapeOfType(shape, 'arrow')) {
56
46
  const bindings = getArrowBindings(editor, shape)
57
47
  if (bindings.start) {
58
48
  // if the other shape is not among the selected shapes...
@@ -163,7 +153,7 @@ export function useShowAutoSizeToggle() {
163
153
  const selectedShapes = editor.getSelectedShapes()
164
154
  return (
165
155
  selectedShapes.length === 1 &&
166
- editor.isShapeOfType<TLTextShape>(selectedShapes[0], 'text') &&
156
+ editor.isShapeOfType(selectedShapes[0], 'text') &&
167
157
  selectedShapes[0].props.autoSize === false
168
158
  )
169
159
  },
@@ -196,11 +186,11 @@ export function useOnlyFlippableShape() {
196
186
  const shape = editor.getOnlySelectedShape()
197
187
  return (
198
188
  shape &&
199
- (editor.isShapeOfType<TLGroupShape>(shape, 'group') ||
200
- editor.isShapeOfType<TLImageShape>(shape, 'image') ||
201
- editor.isShapeOfType<TLArrowShape>(shape, 'arrow') ||
202
- editor.isShapeOfType<TLLineShape>(shape, 'line') ||
203
- editor.isShapeOfType<TLDrawShape>(shape, 'draw'))
189
+ (editor.isShapeOfType(shape, 'group') ||
190
+ editor.isShapeOfType(shape, 'image') ||
191
+ editor.isShapeOfType(shape, 'arrow') ||
192
+ editor.isShapeOfType(shape, 'line') ||
193
+ editor.isShapeOfType(shape, 'draw'))
204
194
  )
205
195
  },
206
196
  [editor]
@@ -3,7 +3,6 @@ import {
3
3
  Editor,
4
4
  IndexKey,
5
5
  TLImageAsset,
6
- TLImageShape,
7
6
  TLShape,
8
7
  TLShapeId,
9
8
  Vec,
@@ -166,7 +165,7 @@ export async function flattenShapesToImages(
166
165
  const shapeId = createShapeId()
167
166
 
168
167
  // create an image shape in the same place as the shapes
169
- editor.createShape<TLImageShape>({
168
+ editor.createShape({
170
169
  id: shapeId,
171
170
  type: 'image',
172
171
  index,
@@ -4,7 +4,6 @@ import {
4
4
  Editor,
5
5
  GeoShapeGeoStyle,
6
6
  getIndicesBetween,
7
- TLLineShape,
8
7
  TLPointerEventInfo,
9
8
  TLShapeId,
10
9
  toRichText,
@@ -195,7 +194,7 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
195
194
  onDragFromToolbarToCreateShape(editor, info, {
196
195
  createShape: (id) => {
197
196
  const [start, end] = getIndicesBetween(null, null, 2)
198
- editor.createShape<TLLineShape>({
197
+ editor.createShape({
199
198
  id,
200
199
  type: 'line',
201
200
  props: {
@@ -1,9 +1,9 @@
1
1
  // This file is automatically generated by internal/scripts/refresh-assets.ts.
2
2
  // Do not edit manually. Or do, I'm a comment, not a cop.
3
3
 
4
- export const version = '4.3.0-canary.da35795ba8e2'
4
+ export const version = '4.3.0-canary.e52fa5385f86'
5
5
  export const publishDates = {
6
6
  major: '2025-09-18T14:39:22.803Z',
7
- minor: '2025-11-19T15:43:54.030Z',
8
- patch: '2025-11-19T15:43:54.030Z',
7
+ minor: '2025-12-05T21:53:17.454Z',
8
+ patch: '2025-12-05T21:53:17.454Z',
9
9
  }
@@ -133,6 +133,7 @@ export async function putExcalidrawContent(
133
133
  ...base,
134
134
  type: 'geo',
135
135
  props: {
136
+ ...editor.getShapeUtil('geo').getDefaultProps(),
136
137
  geo: element.type,
137
138
  url: element.link ?? '',
138
139
  w: element.width,
@@ -152,6 +153,7 @@ export async function putExcalidrawContent(
152
153
  ...base,
153
154
  type: 'draw',
154
155
  props: {
156
+ ...editor.getShapeUtil('draw').getDefaultProps(),
155
157
  dash: getDash(element),
156
158
  size: strokeWidthsToSizes[element.strokeWidth],
157
159
  color: colorsToColors[element.strokeColor] ?? 'black',
@@ -180,6 +182,7 @@ export async function putExcalidrawContent(
180
182
  ...base,
181
183
  type: 'line',
182
184
  props: {
185
+ ...editor.getShapeUtil('line').getDefaultProps(),
183
186
  dash: getDash(element),
184
187
  size: strokeWidthsToSizes[element.strokeWidth],
185
188
  color: colorsToColors[element.strokeColor] ?? 'black',
@@ -221,6 +224,7 @@ export async function putExcalidrawContent(
221
224
  ...base,
222
225
  type: 'arrow',
223
226
  props: {
227
+ ...editor.getShapeUtil('arrow').getDefaultProps(),
224
228
  richText: toRichText(text),
225
229
  kind: element.elbowed ? 'elbow' : 'arc',
226
230
  bend: getBend(element, start, end),
@@ -243,6 +247,7 @@ export async function putExcalidrawContent(
243
247
  toId: startTargetId,
244
248
  props: {
245
249
  terminal: 'start',
250
+ snap: 'none',
246
251
  normalizedAnchor: { x: 0.5, y: 0.5 },
247
252
  isPrecise: false,
248
253
  isExact: false,
@@ -259,6 +264,7 @@ export async function putExcalidrawContent(
259
264
  toId: endTargetId,
260
265
  props: {
261
266
  terminal: 'end',
267
+ snap: 'none',
262
268
  normalizedAnchor: { x: 0.5, y: 0.5 },
263
269
  isPrecise: false,
264
270
  isExact: false,
@@ -275,6 +281,7 @@ export async function putExcalidrawContent(
275
281
  ...base,
276
282
  type: 'text',
277
283
  props: {
284
+ ...editor.getShapeUtil('text').getDefaultProps(),
278
285
  size,
279
286
  scale,
280
287
  font: fontFamilyToFontType[element.fontFamily] ?? 'draw',
@@ -310,6 +317,7 @@ export async function putExcalidrawContent(
310
317
  ...base,
311
318
  type: 'image',
312
319
  props: {
320
+ ...editor.getShapeUtil('image').getDefaultProps(),
313
321
  w: element.width,
314
322
  h: element.height,
315
323
  assetId,
@@ -1,11 +1,4 @@
1
- import {
2
- Editor,
3
- sanitizeId,
4
- TLExportType,
5
- TLFrameShape,
6
- TLImageExportOptions,
7
- TLShapeId,
8
- } from '@tldraw/editor'
1
+ import { Editor, sanitizeId, TLExportType, TLImageExportOptions, TLShapeId } from '@tldraw/editor'
9
2
 
10
3
  /** @public */
11
4
  export interface ExportAsOptions extends TLImageExportOptions {
@@ -35,7 +28,7 @@ export async function exportAs(
35
28
  name = `shapes at ${getTimestamp()}`
36
29
  if (ids.length === 1) {
37
30
  const first = editor.getShape(ids[0])!
38
- if (editor.isShapeOfType<TLFrameShape>(first, 'frame')) {
31
+ if (editor.isShapeOfType(first, 'frame')) {
39
32
  name = first.props.name || 'frame'
40
33
  } else {
41
34
  name = `${sanitizeId(first.id)} at ${getTimestamp()}`
@@ -22,7 +22,7 @@ export function removeFrame(editor: Editor, ids: TLShapeId[]) {
22
22
  const frames = compact(
23
23
  ids
24
24
  .map((id) => editor.getShape<TLFrameShape>(id))
25
- .filter((f) => f && editor.isShapeOfType<TLFrameShape>(f, 'frame'))
25
+ .filter((f) => f && editor.isShapeOfType(f, 'frame'))
26
26
  )
27
27
  if (!frames.length) return
28
28
 
@@ -6,10 +6,10 @@ import {
6
6
  generateText,
7
7
  JSONContent,
8
8
  } from '@tiptap/core'
9
- import Code from '@tiptap/extension-code'
10
- import Highlight from '@tiptap/extension-highlight'
9
+ import { Code } from '@tiptap/extension-code'
10
+ import { Highlight } from '@tiptap/extension-highlight'
11
11
  import { Node } from '@tiptap/pm/model'
12
- import StarterKit from '@tiptap/starter-kit'
12
+ import { StarterKit } from '@tiptap/starter-kit'
13
13
  import {
14
14
  Editor,
15
15
  getOwnProperty,
@@ -12,14 +12,9 @@ import {
12
12
  TLDefaultHorizontalAlignStyle,
13
13
  TLDefaultSizeStyle,
14
14
  TLDefaultTextAlignStyle,
15
- TLDrawShape,
16
15
  TLGeoShape,
17
- TLImageShape,
18
- TLNoteShape,
19
16
  TLPageId,
20
17
  TLShapeId,
21
- TLTextShape,
22
- TLVideoShape,
23
18
  Vec,
24
19
  VecModel,
25
20
  clamp,
@@ -187,7 +182,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
187
182
 
188
183
  switch (v1Shape.type) {
189
184
  case TLV1ShapeType.Sticky: {
190
- editor.createShapes<TLNoteShape>([
185
+ editor.createShapes([
191
186
  {
192
187
  ...inCommon,
193
188
  type: 'note',
@@ -203,7 +198,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
203
198
  break
204
199
  }
205
200
  case TLV1ShapeType.Rectangle: {
206
- editor.createShapes<TLGeoShape>([
201
+ editor.createShapes([
207
202
  {
208
203
  ...inCommon,
209
204
  type: 'geo',
@@ -225,7 +220,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
225
220
 
226
221
  const pageBoundsBeforeLabel = editor.getShapePageBounds(inCommon.id)!
227
222
 
228
- editor.updateShapes<TLGeoShape>([
223
+ editor.updateShapes([
229
224
  {
230
225
  id: inCommon.id,
231
226
  type: 'geo',
@@ -259,7 +254,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
259
254
  break
260
255
  }
261
256
  case TLV1ShapeType.Triangle: {
262
- editor.createShapes<TLGeoShape>([
257
+ editor.createShapes([
263
258
  {
264
259
  ...inCommon,
265
260
  type: 'geo',
@@ -280,7 +275,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
280
275
 
281
276
  const pageBoundsBeforeLabel = editor.getShapePageBounds(inCommon.id)!
282
277
 
283
- editor.updateShapes<TLGeoShape>([
278
+ editor.updateShapes([
284
279
  {
285
280
  id: inCommon.id,
286
281
  type: 'geo',
@@ -314,7 +309,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
314
309
  break
315
310
  }
316
311
  case TLV1ShapeType.Ellipse: {
317
- editor.createShapes<TLGeoShape>([
312
+ editor.createShapes([
318
313
  {
319
314
  ...inCommon,
320
315
  type: 'geo',
@@ -335,7 +330,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
335
330
 
336
331
  const pageBoundsBeforeLabel = editor.getShapePageBounds(inCommon.id)!
337
332
 
338
- editor.updateShapes<TLGeoShape>([
333
+ editor.updateShapes([
339
334
  {
340
335
  id: inCommon.id,
341
336
  type: 'geo',
@@ -375,7 +370,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
375
370
  break
376
371
  }
377
372
 
378
- editor.createShapes<TLDrawShape>([
373
+ editor.createShapes([
379
374
  {
380
375
  ...inCommon,
381
376
  type: 'draw',
@@ -400,7 +395,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
400
395
  const v2Bend = (dist * -v1Bend) / 2
401
396
 
402
397
  // Could also be a line... but we'll use it as an arrow anyway
403
- editor.createShapes<TLArrowShape>([
398
+ editor.createShapes([
404
399
  {
405
400
  ...inCommon,
406
401
  type: 'arrow',
@@ -429,7 +424,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
429
424
  break
430
425
  }
431
426
  case TLV1ShapeType.Text: {
432
- editor.createShapes<TLTextShape>([
427
+ editor.createShapes([
433
428
  {
434
429
  ...inCommon,
435
430
  type: 'text',
@@ -453,7 +448,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
453
448
  return
454
449
  }
455
450
 
456
- editor.createShapes<TLImageShape>([
451
+ editor.createShapes([
457
452
  {
458
453
  ...inCommon,
459
454
  type: 'image',
@@ -474,7 +469,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
474
469
  return
475
470
  }
476
471
 
477
- editor.createShapes<TLVideoShape>([
472
+ editor.createShapes([
478
473
  {
479
474
  ...inCommon,
480
475
  type: 'video',
@@ -472,12 +472,20 @@ describe('isFocused', () => {
472
472
  })
473
473
  })
474
474
 
475
+ const BLORG_TYPE = 'blorg'
476
+
477
+ declare module '@tldraw/tlschema' {
478
+ export interface TLGlobalShapePropsMap {
479
+ [BLORG_TYPE]: { w: number; h: number }
480
+ }
481
+ }
482
+
475
483
  describe('getShapeUtil', () => {
476
484
  let myUtil: any
477
485
 
478
486
  beforeEach(() => {
479
487
  class _MyFakeShapeUtil extends BaseBoxShapeUtil<any> {
480
- static override type = 'blorg'
488
+ static override type = BLORG_TYPE
481
489
 
482
490
  getDefaultProps() {
483
491
  return {
@@ -519,16 +527,22 @@ describe('getShapeUtil', () => {
519
527
  })
520
528
 
521
529
  it('throws if that shape type isnt registered', () => {
522
- const myMissingShape = { type: 'missing' } as TLShape
523
- expect(() => editor.getShapeUtil(myMissingShape)).toThrowErrorMatchingInlineSnapshot(
524
- `[Error: No shape util found for type "missing"]`
525
- )
530
+ const myMissingShape = { type: 'missing' }
531
+ expect(() =>
532
+ editor.getShapeUtil(
533
+ // @ts-expect-error
534
+ myMissingShape
535
+ )
536
+ ).toThrowErrorMatchingInlineSnapshot(`[Error: No shape util found for type "missing"]`)
526
537
  })
527
538
 
528
539
  it('throws if that type isnt registered', () => {
529
- expect(() => editor.getShapeUtil('missing')).toThrowErrorMatchingInlineSnapshot(
530
- `[Error: No shape util found for type "missing"]`
531
- )
540
+ expect(() =>
541
+ editor.getShapeUtil(
542
+ // @ts-expect-error
543
+ 'missing'
544
+ )
545
+ ).toThrowErrorMatchingInlineSnapshot(`[Error: No shape util found for type "missing"]`)
532
546
  })
533
547
  })
534
548
 
@@ -866,9 +880,19 @@ describe('instance.isReadonly', () => {
866
880
  })
867
881
  })
868
882
 
883
+ const MY_CUSTOM_SHAPE_TYPE = 'myCustomShape'
884
+
885
+ type MyCustomShape = TLShape<typeof MY_CUSTOM_SHAPE_TYPE>
886
+
887
+ declare module '@tldraw/tlschema' {
888
+ export interface TLGlobalShapePropsMap {
889
+ [MY_CUSTOM_SHAPE_TYPE]: { w: number; h: number }
890
+ }
891
+ }
892
+
869
893
  describe('the geometry cache', () => {
870
- class CustomShapeUtil extends BaseBoxShapeUtil<any> {
871
- static override type = 'custom'
894
+ class CustomShapeUtil extends BaseBoxShapeUtil<MyCustomShape> {
895
+ static override type = MY_CUSTOM_SHAPE_TYPE
872
896
 
873
897
  getDefaultProps() {
874
898
  return {
@@ -894,9 +918,11 @@ describe('the geometry cache', () => {
894
918
  editor = new TestEditor({
895
919
  shapeUtils: [CustomShapeUtil],
896
920
  })
897
- const { A } = editor.createShapesFromJsx([<TL.custom ref="A" x={0} y={0} w={100} h={100} />])
921
+ const { A } = editor.createShapesFromJsx([
922
+ <TL.myCustomShape ref="A" x={0} y={0} w={100} h={100} />,
923
+ ])
898
924
  expect(editor.getShapePageBounds(A)!.width).toBe(100)
899
- editor.updateShape({ id: A, type: 'custom', meta: { double: true } })
925
+ editor.updateShape({ id: A, type: 'myCustomShape', meta: { double: true } })
900
926
  expect(editor.getShapePageBounds(A)!.width).toBe(200)
901
927
  })
902
928
  })
@@ -1,12 +1,4 @@
1
- import {
2
- IndexKey,
3
- TLArrowShape,
4
- TLGeoShape,
5
- TLNoteShape,
6
- TLTextShape,
7
- createShapeId,
8
- toRichText,
9
- } from '@tldraw/editor'
1
+ import { IndexKey, createShapeId, toRichText } from '@tldraw/editor'
10
2
  import { vi } from 'vitest'
11
3
  import { TestEditor } from './TestEditor'
12
4
 
@@ -61,7 +53,7 @@ describe('TLSelectTool.Idle', () => {
61
53
  describe.skip('Edit on type', () => {
62
54
  it('Starts editing shape on key down if shape does auto-edit on key stroke', () => {
63
55
  const id = createShapeId()
64
- editor.createShapes<TLNoteShape>([
56
+ editor.createShapes([
65
57
  {
66
58
  id,
67
59
  type: 'note',
@@ -85,7 +77,7 @@ describe.skip('Edit on type', () => {
85
77
 
86
78
  it('Does not start editing on excluded keys', () => {
87
79
  const id = createShapeId()
88
- editor.createShapes<TLNoteShape>([
80
+ editor.createShapes([
89
81
  {
90
82
  id,
91
83
  type: 'note',
@@ -102,7 +94,7 @@ describe.skip('Edit on type', () => {
102
94
 
103
95
  it('Ignores key down if altKey or ctrlKey is pressed', () => {
104
96
  const id = createShapeId()
105
- editor.createShapes<TLNoteShape>([
97
+ editor.createShapes([
106
98
  {
107
99
  id,
108
100
  type: 'note',
@@ -270,7 +262,7 @@ describe('DraggingHandle', () => {
270
262
 
271
263
  describe('PointingLabel', () => {
272
264
  it('Enters from pointing_arrow_label and exits to idle', () => {
273
- editor.createShapes<TLArrowShape>([
265
+ editor.createShapes([
274
266
  {
275
267
  id: ids.arrow1,
276
268
  type: 'arrow',
@@ -302,7 +294,7 @@ describe('PointingLabel', () => {
302
294
  })
303
295
 
304
296
  it('Bails on escape', () => {
305
- editor.createShapes<TLArrowShape>([
297
+ editor.createShapes([
306
298
  {
307
299
  id: ids.arrow1,
308
300
  type: 'arrow',
@@ -329,7 +321,7 @@ describe('PointingLabel', () => {
329
321
  })
330
322
 
331
323
  it('Doesnt go into pointing_arrow_label mode if not selecting the arrow shape', () => {
332
- editor.createShapes<TLArrowShape>([
324
+ editor.createShapes([
333
325
  {
334
326
  id: ids.arrow1,
335
327
  type: 'arrow',
@@ -406,7 +398,7 @@ describe('When double clicking the selection edge', () => {
406
398
  .selectAll()
407
399
  .deleteShapes(editor.getSelectedShapeIds())
408
400
  .selectNone()
409
- .createShapes<TLTextShape>([
401
+ .createShapes([
410
402
  {
411
403
  id,
412
404
  type: 'text',
@@ -464,7 +456,7 @@ describe('When editing shapes', () => {
464
456
  text2: createShapeId(),
465
457
  }
466
458
 
467
- editor.createShapes<TLGeoShape | TLTextShape>([
459
+ editor.createShapes([
468
460
  {
469
461
  id: ids.geo1,
470
462
  type: 'geo',
@@ -702,7 +694,7 @@ describe('when passing a function to onInteractionEnd', () => {
702
694
  },
703
695
  }
704
696
 
705
- editor.createShapes<TLArrowShape>([arrow])
697
+ editor.createShapes([arrow])
706
698
 
707
699
  editor.setCurrentTool('select.pointing_arrow_label', {
708
700
  shape: arrow,
@@ -828,7 +820,7 @@ describe('when passing a string to onInteractionEnd', () => {
828
820
  },
829
821
  }
830
822
 
831
- editor.createShapes<TLArrowShape>([arrow])
823
+ editor.createShapes([arrow])
832
824
 
833
825
  editor.setCurrentTool('select.pointing_arrow_label', {
834
826
  shape: arrow,
@@ -10,7 +10,6 @@ import {
10
10
  RequiredKeys,
11
11
  RotateCorner,
12
12
  SelectionHandle,
13
- TLArrowBinding,
14
13
  TLArrowShape,
15
14
  TLContent,
16
15
  TLEditorOptions,
@@ -790,9 +789,7 @@ export class TestEditor extends Editor {
790
789
  }
791
790
 
792
791
  getArrowsBoundTo(shapeId: TLShapeId) {
793
- const ids = new Set(
794
- this.getBindingsToShape<TLArrowBinding>(shapeId, 'arrow').map((b) => b.fromId)
795
- )
792
+ const ids = new Set(this.getBindingsToShape(shapeId, 'arrow').map((b) => b.fromId))
796
793
  return compact(Array.from(ids, (id) => this.getShape<TLArrowShape>(id)))
797
794
  }
798
795
  }