tldraw 4.3.0-next.f4772c19540d → 4.4.0-canary.1e3b436e33e4

package/src/lib/utils/test-helpers.ts

@@ -0,0 +1,62 @@
+import type { TLDrawShapeSegment, VecModel } from '@tldraw/editor'
+import { b64Vecs, compressLegacySegments } from '@tldraw/editor'
+
+/**
+ * Helper function to convert draw shape points from VecModel[] to base64 string.
+ * Uses delta encoding for improved Float16 precision.
+ * This is useful for tests that create draw shapes with the legacy array format.
+ *
+ * @example
+ * ```ts
+ * const segments = [{ type: 'free', path: pointsToBase64([{x: 0, y: 0, z: 0.5}]) }]
+ * ```
+ *
+ * @public
+ */
+export function pointsToBase64(points: VecModel[]): string {
+	return b64Vecs.encodePoints(points)
+}
+
+/**
+ * Helper function to convert base64 string back to VecModel[] points.
+ * Decodes delta-encoded points to absolute coordinates.
+ * This is useful for tests that need to inspect draw shape points.
+ *
+ * @example
+ * ```ts
+ * const points = base64ToPoints(shape.props.segments[0].path)
+ * expect(points[0].x).toBe(0)
+ * ```
+ *
+ * @public
+ */
+export function base64ToPoints(base64: string): VecModel[] {
+	return b64Vecs.decodePoints(base64)
+}
+
+/**
+ * Helper function to create draw shape segments from legacy array format.
+ * This allows tests to use the old format while the shape uses the new base64 format.
+ *
+ * @example
+ * ```ts
+ * editor.createShapes([{
+ *   type: 'draw',
+ *   props: {
+ *     segments: createDrawSegments([[{x: 0, y: 0}, {x: 10, y: 10}]])
+ *   }
+ * }])
+ * ```
+ * @public
+ */
+export function createDrawSegments(
+	pointArrays: VecModel[][],
+	type: 'free' | 'straight' = 'free'
+): TLDrawShapeSegment[] {
+	return compressLegacySegments(
+		pointArrays.map((points) => ({
+			type,
+			points,
+		}))
+	)
+}

package/src/lib/utils/text/richText.ts

@@ -1,15 +1,16 @@
 import {
 	Extension,
 	Extensions,
+	extensions,
 	generateHTML,
 	generateJSON,
 	generateText,
 	JSONContent,
 } from '@tiptap/core'
-import Code from '@tiptap/extension-code'
-import Highlight from '@tiptap/extension-highlight'
+import { Code } from '@tiptap/extension-code'
+import { Highlight } from '@tiptap/extension-highlight'
 import { Node } from '@tiptap/pm/model'
-import StarterKit from '@tiptap/starter-kit'
+import { StarterKit } from '@tiptap/starter-kit'
 import {
 	Editor,
 	getOwnProperty,
@@ -19,7 +20,6 @@ import {
 	WeakCache,
 } from '@tldraw/editor'
 import { DefaultFontFaces } from '../../shapes/shared/defaultFonts'
-import { TextDirection } from './textDirection'
 
 /** @public */
 export const KeyboardShiftEnterTweakExtension = Extension.create({
@@ -56,10 +56,18 @@ export const tipTapDefaultExtensions: Extensions = [
 			openOnClick: false,
 			autolink: true,
 		},
+		// Prevent trailing paragraph insertion after lists (fixes #7641)
+		trailingNode: {
+			notAfter: ['paragraph', 'bulletList', 'orderedList', 'listItem'],
+		},
 	}),
 	Highlight,
 	KeyboardShiftEnterTweakExtension,
-	TextDirection,
+
+	// N.B. We disable the text direction core extension in RichTextArea,
+	// but we add it back in again here in our own extensions list so that
+	// people can omit/override it if they want to.
+	extensions.TextDirection.configure({ direction: 'auto' }),
 ]
 
 // todo: bust this if the editor changes, too
@@ -88,7 +96,6 @@ export function renderHtmlFromRichText(editor: Editor, richText: TLRichText) {
  * @param editor - The editor instance.
  * @param richText - The rich text content.
  *
- *
  * @public
  */
 export function renderHtmlFromRichTextForMeasurement(editor: Editor, richText: TLRichText) {
@@ -111,7 +118,6 @@ export function isEmptyRichText(richText: TLRichText) {
  * @param editor - The editor instance.
  * @param richText - The rich text content.
  *
- *
  * @public
  */
 export function renderPlaintextFromRichText(editor: Editor, richText: TLRichText) {
@@ -131,7 +137,6 @@ export function renderPlaintextFromRichText(editor: Editor, richText: TLRichText
  * @param editor - The editor instance.
  * @param richText - The rich text content.
  *
- *
  * @public
  */
 export function renderRichTextFromHTML(editor: Editor, html: string): TLRichText {

package/src/lib/utils/tldr/buildFromV1Document.ts

@@ -12,16 +12,12 @@ import {
 	TLDefaultHorizontalAlignStyle,
 	TLDefaultSizeStyle,
 	TLDefaultTextAlignStyle,
-	TLDrawShape,
 	TLGeoShape,
-	TLImageShape,
-	TLNoteShape,
 	TLPageId,
 	TLShapeId,
-	TLTextShape,
-	TLVideoShape,
 	Vec,
 	VecModel,
+	b64Vecs,
 	clamp,
 	createShapeId,
 	fetch,
@@ -187,7 +183,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 
 					switch (v1Shape.type) {
 						case TLV1ShapeType.Sticky: {
-							editor.createShapes<TLNoteShape>([
+							editor.createShapes([
 								{
 									...inCommon,
 									type: 'note',
@@ -203,7 +199,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 							break
 						}
 						case TLV1ShapeType.Rectangle: {
-							editor.createShapes<TLGeoShape>([
+							editor.createShapes([
 								{
 									...inCommon,
 									type: 'geo',
@@ -225,7 +221,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 
 							const pageBoundsBeforeLabel = editor.getShapePageBounds(inCommon.id)!
 
-							editor.updateShapes<TLGeoShape>([
+							editor.updateShapes([
 								{
 									id: inCommon.id,
 									type: 'geo',
@@ -259,7 +255,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 							break
 						}
 						case TLV1ShapeType.Triangle: {
-							editor.createShapes<TLGeoShape>([
+							editor.createShapes([
 								{
 									...inCommon,
 									type: 'geo',
@@ -280,7 +276,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 
 							const pageBoundsBeforeLabel = editor.getShapePageBounds(inCommon.id)!
 
-							editor.updateShapes<TLGeoShape>([
+							editor.updateShapes([
 								{
 									id: inCommon.id,
 									type: 'geo',
@@ -314,7 +310,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 							break
 						}
 						case TLV1ShapeType.Ellipse: {
-							editor.createShapes<TLGeoShape>([
+							editor.createShapes([
 								{
 									...inCommon,
 									type: 'geo',
@@ -335,7 +331,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 
 							const pageBoundsBeforeLabel = editor.getShapePageBounds(inCommon.id)!
 
-							editor.updateShapes<TLGeoShape>([
+							editor.updateShapes([
 								{
 									id: inCommon.id,
 									type: 'geo',
@@ -375,7 +371,10 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 								break
 							}
 
-							editor.createShapes<TLDrawShape>([
+							const points = v1Shape.points.map(getV2Point)
+							const base64Points = b64Vecs.encodePoints(points)
+
+							editor.createShapes([
 								{
 									...inCommon,
 									type: 'draw',
@@ -386,7 +385,10 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 										dash: getV2Dash(v1Shape.style.dash),
 										isPen: false,
 										isComplete: v1Shape.isComplete,
-										segments: [{ type: 'free', points: v1Shape.points.map(getV2Point) }],
+										segments: [{ type: 'free', path: base64Points }],
+										scale: 1,
+										scaleX: 1,
+										scaleY: 1,
 									},
 								},
 							])
@@ -400,7 +402,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 							const v2Bend = (dist * -v1Bend) / 2
 
 							// Could also be a line... but we'll use it as an arrow anyway
-							editor.createShapes<TLArrowShape>([
+							editor.createShapes([
 								{
 									...inCommon,
 									type: 'arrow',
@@ -429,7 +431,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 							break
 						}
 						case TLV1ShapeType.Text: {
-							editor.createShapes<TLTextShape>([
+							editor.createShapes([
 								{
 									...inCommon,
 									type: 'text',
@@ -453,7 +455,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 								return
 							}
 
-							editor.createShapes<TLImageShape>([
+							editor.createShapes([
 								{
 									...inCommon,
 									type: 'image',
@@ -474,7 +476,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 								return
 							}
 
-							editor.createShapes<TLVideoShape>([
+							editor.createShapes([
 								{
 									...inCommon,
 									type: 'video',
@@ -523,7 +525,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 					const util = editor.getShapeUtil<TLArrowShape>('arrow')
 
 					// dumb but necessary
-					editor.inputs.ctrlKey = false
+					editor.inputs.setCtrlKey(false)
 
 					for (const handleId of ['start', 'end'] as const) {
 						const bindingId = v1Shape.handles[handleId].bindingId

package/src/test/Editor.test.tsx

@@ -143,17 +143,17 @@ describe('shapes that are moved to another page', () => {
 it('Begins dragging from pointer move', () => {
 	editor.pointerDown(0, 0)
 	editor.pointerMove(2, 2)
-	expect(editor.inputs.isDragging).toBe(false)
+	expect(editor.inputs.getIsDragging()).toBe(false)
 	editor.pointerMove(10, 10)
-	expect(editor.inputs.isDragging).toBe(true)
+	expect(editor.inputs.getIsDragging()).toBe(true)
 })
 
 it('Begins dragging from wheel', () => {
 	editor.pointerDown(0, 0)
 	editor.wheel(2, 2)
-	expect(editor.inputs.isDragging).toBe(false)
+	expect(editor.inputs.getIsDragging()).toBe(false)
 	editor.wheel(10, 10)
-	expect(editor.inputs.isDragging).toBe(true)
+	expect(editor.inputs.getIsDragging()).toBe(true)
 })
 
 it('Does not create an undo stack item when first clicking on an empty canvas', () => {
@@ -266,36 +266,47 @@ describe('Editor.TickManager', () => {
 		// usually this is called by the app's tick manager, using the elapsed time
 		// between two animation frames, but we're calling it directly here.
 		const tick = (ms: number) => {
-			// @ts-ignore
-			editor._tickManager.updatePointerVelocity(ms)
+			editor.inputs.updatePointerVelocity(ms)
 		}
 
 		// 1. pointer velocity should be 0 when there is no movement
-		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0, y: 0 })
+		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({ x: 0, y: 0 })
 
 		editor.pointerMove(10, 10)
 
 		// 2. moving is not enough, we also need to wait a frame before the velocity is updated
-		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0, y: 0 })
+		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({ x: 0, y: 0 })
 
 		// 3. once time passes, the pointer velocity should be updated
 		tick(16)
-		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0.3125, y: 0.3125 })
+		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({
+			x: 0.3125,
+			y: 0.3125,
+		})
 
 		// 4. let's do it again, it should be updated again. move, tick, measure
 		editor.pointerMove(20, 20)
 		tick(16)
-		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0.46875, y: 0.46875 })
+		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({
+			x: 0.46875,
+			y: 0.46875,
+		})
 
 		// 5. if we tick again without movement, the velocity should decay
 		tick(16)
 
-		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0.23437, y: 0.23437 })
+		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({
+			x: 0.23437,
+			y: 0.23437,
+		})
 
 		// 6. if updatePointerVelocity is (for whatever reason) called with an elapsed time of zero milliseconds, it should be ignored
 		tick(0)
 
-		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0.23437, y: 0.23437 })
+		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({
+			x: 0.23437,
+			y: 0.23437,
+		})
 	})
 })
 
@@ -472,12 +483,20 @@ describe('isFocused', () => {
 	})
 })
 
+const BLORG_TYPE = 'blorg'
+
+declare module '@tldraw/tlschema' {
+	export interface TLGlobalShapePropsMap {
+		[BLORG_TYPE]: { w: number; h: number }
+	}
+}
+
 describe('getShapeUtil', () => {
 	let myUtil: any
 
 	beforeEach(() => {
 		class _MyFakeShapeUtil extends BaseBoxShapeUtil<any> {
-			static override type = 'blorg'
+			static override type = BLORG_TYPE
 
 			getDefaultProps() {
 				return {
@@ -519,16 +538,22 @@ describe('getShapeUtil', () => {
 	})
 
 	it('throws if that shape type isnt registered', () => {
-		const myMissingShape = { type: 'missing' } as TLShape
-		expect(() => editor.getShapeUtil(myMissingShape)).toThrowErrorMatchingInlineSnapshot(
-			`[Error: No shape util found for type "missing"]`
-		)
+		const myMissingShape = { type: 'missing' }
+		expect(() =>
+			editor.getShapeUtil(
+				// @ts-expect-error
+				myMissingShape
+			)
+		).toThrowErrorMatchingInlineSnapshot(`[Error: No shape util found for type "missing"]`)
 	})
 
 	it('throws if that type isnt registered', () => {
-		expect(() => editor.getShapeUtil('missing')).toThrowErrorMatchingInlineSnapshot(
-			`[Error: No shape util found for type "missing"]`
-		)
+		expect(() =>
+			editor.getShapeUtil(
+				// @ts-expect-error
+				'missing'
+			)
+		).toThrowErrorMatchingInlineSnapshot(`[Error: No shape util found for type "missing"]`)
 	})
 })
 
@@ -663,9 +688,9 @@ describe('middle-click panning', () => {
 			button: 1,
 		})
 		editor.pointerMove(100, 100)
-		expect(editor.inputs.isPanning).toBe(true)
+		expect(editor.inputs.getIsPanning()).toBe(true)
 		editor.pointerUp(100, 100)
-		expect(editor.inputs.isPanning).toBe(false)
+		expect(editor.inputs.getIsPanning()).toBe(false)
 	})
 
 	it('does not clear thee isPanning state if the space bar is down', () => {
@@ -674,51 +699,51 @@ describe('middle-click panning', () => {
 			button: 1,
 		})
 		editor.pointerMove(100, 100)
-		expect(editor.inputs.isPanning).toBe(true)
+		expect(editor.inputs.getIsPanning()).toBe(true)
 		editor.keyDown(' ')
 		editor.pointerUp(100, 100, {
 			button: 1,
 		})
-		expect(editor.inputs.isPanning).toBe(true)
+		expect(editor.inputs.getIsPanning()).toBe(true)
 
 		editor.keyUp(' ')
-		expect(editor.inputs.isPanning).toBe(false)
+		expect(editor.inputs.getIsPanning()).toBe(false)
 	})
 })
 
 describe('dragging', () => {
 	it('drags correctly at 100% zoom', () => {
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 0).pointerDown()
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 1)
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 5)
-		expect(editor.inputs.isDragging).toBe(true)
+		expect(editor.inputs.getIsDragging()).toBe(true)
 	})
 
 	it('drags correctly at 150% zoom', () => {
 		editor.setCamera({ x: 0, y: 0, z: 8 }).forceTick()
 
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 0).pointerDown()
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 2)
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 5)
-		expect(editor.inputs.isDragging).toBe(true)
+		expect(editor.inputs.getIsDragging()).toBe(true)
 	})
 
 	it('drags correctly at 50% zoom', () => {
 		editor.setCamera({ x: 0, y: 0, z: 0.1 }).forceTick()
 
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 0).pointerDown()
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 2)
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 5)
-		expect(editor.inputs.isDragging).toBe(true)
+		expect(editor.inputs.getIsDragging()).toBe(true)
 	})
 })
 
@@ -866,9 +891,19 @@ describe('instance.isReadonly', () => {
 	})
 })
 
+const MY_CUSTOM_SHAPE_TYPE = 'myCustomShape'
+
+type MyCustomShape = TLShape<typeof MY_CUSTOM_SHAPE_TYPE>
+
+declare module '@tldraw/tlschema' {
+	export interface TLGlobalShapePropsMap {
+		[MY_CUSTOM_SHAPE_TYPE]: { w: number; h: number }
+	}
+}
+
 describe('the geometry cache', () => {
-	class CustomShapeUtil extends BaseBoxShapeUtil<any> {
-		static override type = 'custom'
+	class CustomShapeUtil extends BaseBoxShapeUtil<MyCustomShape> {
+		static override type = MY_CUSTOM_SHAPE_TYPE
 
 		getDefaultProps() {
 			return {
@@ -894,9 +929,11 @@ describe('the geometry cache', () => {
 		editor = new TestEditor({
 			shapeUtils: [CustomShapeUtil],
 		})
-		const { A } = editor.createShapesFromJsx([<TL.custom ref="A" x={0} y={0} w={100} h={100} />])
+		const { A } = editor.createShapesFromJsx([
+			<TL.myCustomShape ref="A" x={0} y={0} w={100} h={100} />,
+		])
 		expect(editor.getShapePageBounds(A)!.width).toBe(100)
-		editor.updateShape({ id: A, type: 'custom', meta: { double: true } })
+		editor.updateShape({ id: A, type: 'myCustomShape', meta: { double: true } })
 		expect(editor.getShapePageBounds(A)!.width).toBe(200)
 	})
 })

package/src/test/EraserTool.test.ts

@@ -1,5 +1,6 @@
 import { createShapeId } from '@tldraw/editor'
 import { vi } from 'vitest'
+import { createDrawSegments } from './test-jsx'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -72,18 +73,15 @@ beforeEach(() => {
 			x: 0,
 			y: 300,
 			props: {
-				segments: [
-					{
-						type: 'free',
-						points: [
-							{ x: 0, y: 0 },
-							{ x: 2, y: 50 },
-							{ x: 10, y: 100 },
-							{ x: 48, y: 100 },
-							{ x: 100, y: 100 },
-						],
-					},
-				],
+				segments: createDrawSegments([
+					[
+						{ x: 0, y: 0 },
+						{ x: 2, y: 50 },
+						{ x: 10, y: 100 },
+						{ x: 48, y: 100 },
+						{ x: 100, y: 100 },
+					],
+				]),
 			},
 		},
 	])

package/src/test/SelectTool.test.ts

@@ -1,12 +1,4 @@
-import {
-	IndexKey,
-	TLArrowShape,
-	TLGeoShape,
-	TLNoteShape,
-	TLTextShape,
-	createShapeId,
-	toRichText,
-} from '@tldraw/editor'
+import { IndexKey, createShapeId, toRichText } from '@tldraw/editor'
 import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 
@@ -61,7 +53,7 @@ describe('TLSelectTool.Idle', () => {
 describe.skip('Edit on type', () => {
 	it('Starts editing shape on key down if shape does auto-edit on key stroke', () => {
 		const id = createShapeId()
-		editor.createShapes<TLNoteShape>([
+		editor.createShapes([
 			{
 				id,
 				type: 'note',
@@ -85,7 +77,7 @@ describe.skip('Edit on type', () => {
 
 	it('Does not start editing on excluded keys', () => {
 		const id = createShapeId()
-		editor.createShapes<TLNoteShape>([
+		editor.createShapes([
 			{
 				id,
 				type: 'note',
@@ -102,7 +94,7 @@ describe.skip('Edit on type', () => {
 
 	it('Ignores key down if altKey or ctrlKey is pressed', () => {
 		const id = createShapeId()
-		editor.createShapes<TLNoteShape>([
+		editor.createShapes([
 			{
 				id,
 				type: 'note',
@@ -270,7 +262,7 @@ describe('DraggingHandle', () => {
 
 describe('PointingLabel', () => {
 	it('Enters from pointing_arrow_label and exits to idle', () => {
-		editor.createShapes<TLArrowShape>([
+		editor.createShapes([
 			{
 				id: ids.arrow1,
 				type: 'arrow',
@@ -302,7 +294,7 @@ describe('PointingLabel', () => {
 	})
 
 	it('Bails on escape', () => {
-		editor.createShapes<TLArrowShape>([
+		editor.createShapes([
 			{
 				id: ids.arrow1,
 				type: 'arrow',
@@ -329,7 +321,7 @@ describe('PointingLabel', () => {
 	})
 
 	it('Doesnt go into pointing_arrow_label mode if not selecting the arrow shape', () => {
-		editor.createShapes<TLArrowShape>([
+		editor.createShapes([
 			{
 				id: ids.arrow1,
 				type: 'arrow',
@@ -406,7 +398,7 @@ describe('When double clicking the selection edge', () => {
 			.selectAll()
 			.deleteShapes(editor.getSelectedShapeIds())
 			.selectNone()
-			.createShapes<TLTextShape>([
+			.createShapes([
 				{
 					id,
 					type: 'text',
@@ -464,7 +456,7 @@ describe('When editing shapes', () => {
 			text2: createShapeId(),
 		}
 
-		editor.createShapes<TLGeoShape | TLTextShape>([
+		editor.createShapes([
 			{
 				id: ids.geo1,
 				type: 'geo',
@@ -702,7 +694,7 @@ describe('when passing a function to onInteractionEnd', () => {
 			},
 		}
 
-		editor.createShapes<TLArrowShape>([arrow])
+		editor.createShapes([arrow])
 
 		editor.setCurrentTool('select.pointing_arrow_label', {
 			shape: arrow,
@@ -828,7 +820,7 @@ describe('when passing a string to onInteractionEnd', () => {
 			},
 		}
 
-		editor.createShapes<TLArrowShape>([arrow])
+		editor.createShapes([arrow])
 
 		editor.setCurrentTool('select.pointing_arrow_label', {
 			shape: arrow,