@tldraw/editor 3.15.0-next.f1dfcef63951 → 3.16.0-next.c30b1b5e551a

package/src/lib/components/SVGContainer.tsx

@@ -7,7 +7,7 @@ export type SVGContainerProps = React.ComponentProps<'svg'>
 /** @public @react */
 export function SVGContainer({ children, className = '', ...rest }: SVGContainerProps) {
 	return (
-		<svg {...rest} className={classNames('tl-svg-container', className)}>
+		<svg {...rest} className={classNames('tl-svg-container', className)} aria-hidden="true">
 			{children}
 		</svg>
 	)

package/src/lib/components/Shape.tsx

@@ -40,7 +40,7 @@ export const Shape = memo(function Shape({
 }) {
 	const editor = useEditor()
 
-	const { ShapeErrorFallback } = useEditorComponents()
+	const { ShapeErrorFallback, ShapeWrapper } = useEditorComponents()
 
 	const containerRef = useRef<HTMLDivElement>(null)
 	const bgContainerRef = useRef<HTMLDivElement>(null)
@@ -145,37 +145,22 @@ export const Shape = memo(function Shape({
 		[editor]
 	)
 
-	if (!shape) return null
-
-	const isFilledShape = 'fill' in shape.props && shape.props.fill !== 'none'
+	if (!shape || !ShapeWrapper) return null
 
 	return (
 		<>
 			{util.backgroundComponent && (
-				<div
-					ref={bgContainerRef}
-					className="tl-shape tl-shape-background"
-					data-shape-type={shape.type}
-					data-shape-id={shape.id}
-					draggable={false}
-				>
+				<ShapeWrapper ref={bgContainerRef} shape={shape} isBackground={true}>
 					<OptionalErrorBoundary fallback={ShapeErrorFallback} onError={annotateError}>
 						<InnerShapeBackground shape={shape} util={util} />
 					</OptionalErrorBoundary>
-				</div>
+				</ShapeWrapper>
 			)}
-			<div
-				ref={containerRef}
-				className="tl-shape"
-				data-shape-type={shape.type}
-				data-shape-is-filled={isFilledShape}
-				data-shape-id={shape.id}
-				draggable={false}
-			>
+			<ShapeWrapper ref={containerRef} shape={shape} isBackground={false}>
 				<OptionalErrorBoundary fallback={ShapeErrorFallback as any} onError={annotateError}>
 					<InnerShape shape={shape} util={util} />
 				</OptionalErrorBoundary>
-			</div>
+			</ShapeWrapper>
 		</>
 	)
 })

package/src/lib/components/default-components/DefaultBrush.tsx

@@ -21,7 +21,7 @@ export const DefaultBrush = ({ brush, color, opacity, className }: TLBrushProps)
 	const h = toDomPrecision(Math.max(1, brush.h))
 
 	return (
-		<svg className="tl-overlays__item" ref={rSvg}>
+		<svg className="tl-overlays__item" ref={rSvg} aria-hidden="true">
 			{color ? (
 				<g className="tl-brush" opacity={opacity}>
 					<rect width={w} height={h} fill={color} opacity={0.75} />

package/src/lib/components/default-components/DefaultCanvas.tsx

@@ -139,7 +139,7 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 				data-testid="canvas"
 				{...events}
 			>
-				<svg className="tl-svg-context">
+				<svg className="tl-svg-context" aria-hidden="true">
 					<defs>
 						{shapeSvgDefs}
 						<CursorDef />

package/src/lib/components/default-components/DefaultCollaboratorHint.tsx

@@ -39,7 +39,7 @@ export function DefaultCollaboratorHint({
 	const cursorHintId = useSharedSafeId('cursor_hint')
 
 	return (
-		<svg ref={rSvg} className={classNames('tl-overlays__item', className)}>
+		<svg ref={rSvg} className={classNames('tl-overlays__item', className)} aria-hidden="true">
 			<use
 				href={`#${cursorHintId}`}
 				color={color}

package/src/lib/components/default-components/DefaultCursor.tsx

@@ -33,7 +33,7 @@ export const DefaultCursor = memo(function DefaultCursor({
 
 	return (
 		<div ref={rCursor} className={classNames('tl-overlays__item', className)}>
-			<svg className="tl-cursor">
+			<svg className="tl-cursor" aria-hidden="true">
 				<use href={`#${cursorId}`} color={color} />
 			</svg>
 			{chatMessage ? (

package/src/lib/components/default-components/DefaultGrid.tsx

@@ -16,7 +16,7 @@ export function DefaultGrid({ x, y, z, size }: TLGridProps) {
 	const editor = useEditor()
 	const { gridSteps } = editor.options
 	return (
-		<svg className="tl-grid" version="1.1" xmlns="http://www.w3.org/2000/svg">
+		<svg className="tl-grid" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
 			<defs>
 				{gridSteps.map(({ min, mid, step }, i) => {
 					const s = step * size * z

package/src/lib/components/default-components/DefaultHandles.tsx

@@ -7,5 +7,9 @@ export interface TLHandlesProps {
 
 /** @public @react */
 export const DefaultHandles = ({ children }: TLHandlesProps) => {
-	return <svg className="tl-user-handles tl-overlays__item">{children}</svg>
+	return (
+		<svg className="tl-user-handles tl-overlays__item" aria-hidden="true">
+			{children}
+		</svg>
+	)
 }

package/src/lib/components/default-components/DefaultShapeIndicator.tsx

@@ -86,7 +86,7 @@ export const DefaultShapeIndicator = memo(function DefaultShapeIndicator({
 	}, [hidden])
 
 	return (
-		<svg ref={rIndicator} className={classNames('tl-overlays__item', className)}>
+		<svg ref={rIndicator} className={classNames('tl-overlays__item', className)} aria-hidden="true">
 			<g className="tl-shape-indicator" stroke={color ?? 'var(--color-selected)'} opacity={opacity}>
 				<InnerIndicator editor={editor} id={shapeId} />
 			</g>

package/src/lib/components/default-components/DefaultShapeWrapper.tsx

@@ -0,0 +1,35 @@
+import { TLShape } from '@tldraw/tlschema'
+import classNames from 'classnames'
+import { forwardRef, ReactNode } from 'react'
+
+/** @public */
+export interface TLShapeWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+	/** The shape being rendered. */
+	shape: TLShape
+	/** Whether this is the shapes regular, or background component. */
+	isBackground: boolean
+	/** The shape's rendered component. */
+	children: ReactNode
+}
+
+/** @public @react */
+export const DefaultShapeWrapper = forwardRef(function DefaultShapeWrapper(
+	{ children, shape, isBackground, ...props }: TLShapeWrapperProps,
+	ref: React.Ref<HTMLDivElement>
+) {
+	const isFilledShape = 'fill' in shape.props && shape.props.fill !== 'none'
+
+	return (
+		<div
+			ref={ref}
+			data-shape-type={shape.type}
+			data-shape-is-filled={isBackground ? undefined : isFilledShape}
+			data-shape-id={shape.id}
+			draggable={false}
+			{...props}
+			className={classNames('tl-shape', isBackground && 'tl-shape-background', props.className)}
+		>
+			{children}
+		</div>
+	)
+})

package/src/lib/components/default-components/DefaultSnapIndictor.tsx

@@ -163,7 +163,7 @@ export interface TLSnapIndicatorProps {
 /** @public @react */
 export function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps) {
 	return (
-		<svg className={classNames('tl-overlays__item', className)}>
+		<svg className={classNames('tl-overlays__item', className)} aria-hidden="true">
 			{line.type === 'points' ? (
 				<PointsSnapIndicator {...line} zoom={zoom} />
 			) : line.type === 'gaps' ? (

package/src/lib/components/default-components/DefaultSpinner.tsx

@@ -1,19 +1,19 @@
+import classNames from 'classnames'
+
 /** @public @react */
-export function DefaultSpinner() {
+export function DefaultSpinner(props: React.SVGProps<SVGSVGElement>) {
 	return (
-		<svg width={16} height={16} viewBox="0 0 16 16" aria-hidden="false">
+		<svg
+			width={16}
+			height={16}
+			viewBox="0 0 16 16"
+			aria-hidden="false"
+			{...props}
+			className={classNames('tl-spinner', props.className)}
+		>
 			<g strokeWidth={2} fill="none" fillRule="evenodd">
 				<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke="currentColor" />
-				<path strokeLinecap="round" d="M15 8c0-4.5-4.5-7-7-7" stroke="currentColor">
-					<animateTransform
-						attributeName="transform"
-						type="rotate"
-						from="0 8 8"
-						to="360 8 8"
-						dur="1s"
-						repeatCount="indefinite"
-					/>
-				</path>
+				<path strokeLinecap="round" d="M15 8c0-4.5-4.5-7-7-7" stroke="currentColor" />
 			</g>
 		</svg>
 	)

package/src/lib/config/TLUserPreferences.ts

@@ -17,6 +17,7 @@ export interface TLUserPreferences {
 	// N.B. These are duplicated in TLdrawAppUser.
 	locale?: string | null
 	animationSpeed?: number | null
+	areKeyboardShortcutsEnabled?: boolean | null
 	edgeScrollSpeed?: number | null
 	colorScheme?: 'light' | 'dark' | 'system'
 	isSnapMode?: boolean | null
@@ -44,6 +45,7 @@ export const userTypeValidator: T.Validator<TLUserPreferences> = T.object<TLUser
 	// N.B. These are duplicated in TLdrawAppUser.
 	locale: T.string.nullable().optional(),
 	animationSpeed: T.number.nullable().optional(),
+	areKeyboardShortcutsEnabled: T.boolean.nullable().optional(),
 	edgeScrollSpeed: T.number.nullable().optional(),
 	colorScheme: T.literalEnum('light', 'dark', 'system').optional(),
 	isSnapMode: T.boolean.nullable().optional(),
@@ -61,6 +63,7 @@ const Versions = {
 	AddDynamicSizeMode: 6,
 	AllowSystemColorScheme: 7,
 	AddPasteAtCursor: 8,
+	AddKeyboardShortcuts: 9,
 } as const
 
 const CURRENT_VERSION = Math.max(...Object.values(Versions))
@@ -96,6 +99,9 @@ function migrateSnapshot(data: { version: number; user: any }) {
 	if (data.version < Versions.AddPasteAtCursor) {
 		data.user.isPasteAtCursorMode = false
 	}
+	if (data.version < Versions.AddKeyboardShortcuts) {
+		data.user.areKeyboardShortcutsEnabled = true
+	}
 
 	// finally
 	data.version = CURRENT_VERSION
@@ -139,6 +145,7 @@ export const defaultUserPreferences = Object.freeze({
 	// N.B. These are duplicated in TLdrawAppUser.
 	edgeScrollSpeed: 1,
 	animationSpeed: userPrefersReducedMotion() ? 0 : 1,
+	areKeyboardShortcutsEnabled: true,
 	isSnapMode: false,
 	isWrapMode: false,
 	isDynamicSizeMode: false,

package/src/lib/editor/Editor.test.ts

@@ -425,3 +425,410 @@ describe('getShapesAtPoint', () => {
 		expect(hollowShapesWithHitInside[0].id).toBe(ids.hollowShape)
 	})
 })
+
+describe('selectAll', () => {
+	const selectAllIds = {
+		pageShape1: createShapeId('pageShape1'),
+		pageShape2: createShapeId('pageShape2'),
+		pageShape3: createShapeId('pageShape3'),
+		container1: createShapeId('container1'),
+		containerChild1: createShapeId('containerChild1'),
+		containerChild2: createShapeId('containerChild2'),
+		containerChild3: createShapeId('containerChild3'),
+		containerGrandchild1: createShapeId('containerGrandchild1'),
+		container2: createShapeId('container2'),
+		container2Child1: createShapeId('container2Child1'),
+		container2Child2: createShapeId('container2Child2'),
+		container2Grandchild1: createShapeId('container2Grandchild1'),
+		lockedShape: createShapeId('lockedShape'),
+	}
+
+	beforeEach(() => {
+		// Clear any existing shapes
+		editor.selectAll().deleteShapes(editor.getSelectedShapeIds())
+
+		// Create shapes directly on the page (no parentId means they're children of the page)
+		editor.createShapes([
+			{
+				id: selectAllIds.pageShape1,
+				type: 'my-custom-shape',
+				x: 100,
+				y: 100,
+				props: { w: 100, h: 100 },
+			},
+			{
+				id: selectAllIds.pageShape2,
+				type: 'my-custom-shape',
+				x: 300,
+				y: 100,
+				props: { w: 100, h: 100 },
+			},
+			{
+				id: selectAllIds.pageShape3,
+				type: 'my-custom-shape',
+				x: 500,
+				y: 100,
+				props: { w: 100, h: 100 },
+			},
+			{
+				id: selectAllIds.lockedShape,
+				type: 'my-custom-shape',
+				x: 700,
+				y: 100,
+				props: { w: 100, h: 100 },
+				isLocked: true,
+			},
+		])
+
+		// Create a container shape (simulating a frame or group)
+		editor.createShape({
+			id: selectAllIds.container1,
+			type: 'my-custom-shape',
+			x: 100,
+			y: 300,
+			props: { w: 400, h: 200 },
+		})
+
+		// Create children inside the container (parentId set to container1)
+		editor.createShapes([
+			{
+				id: selectAllIds.containerChild1,
+				type: 'my-custom-shape',
+				parentId: selectAllIds.container1,
+				x: 120,
+				y: 320,
+				props: { w: 50, h: 50 },
+			},
+			{
+				id: selectAllIds.containerChild2,
+				type: 'my-custom-shape',
+				parentId: selectAllIds.container1,
+				x: 200,
+				y: 320,
+				props: { w: 50, h: 50 },
+			},
+			{
+				id: selectAllIds.containerChild3,
+				type: 'my-custom-shape',
+				parentId: selectAllIds.container1,
+				x: 280,
+				y: 320,
+				props: { w: 50, h: 50 },
+			},
+		])
+
+		// Create a grandchild inside one of the container children
+		editor.createShape({
+			id: selectAllIds.containerGrandchild1,
+			type: 'my-custom-shape',
+			parentId: selectAllIds.containerChild3,
+			x: 290,
+			y: 330,
+			props: { w: 30, h: 30 },
+		})
+
+		// Create a second container (simulating a group)
+		editor.createShape({
+			id: selectAllIds.container2,
+			type: 'my-custom-shape',
+			x: 600,
+			y: 300,
+			props: { w: 200, h: 200 },
+		})
+
+		// Create children inside the second container
+		editor.createShapes([
+			{
+				id: selectAllIds.container2Child1,
+				type: 'my-custom-shape',
+				parentId: selectAllIds.container2,
+				x: 620,
+				y: 320,
+				props: { w: 50, h: 50 },
+			},
+			{
+				id: selectAllIds.container2Child2,
+				type: 'my-custom-shape',
+				parentId: selectAllIds.container2,
+				x: 680,
+				y: 320,
+				props: { w: 50, h: 50 },
+			},
+		])
+
+		// Create a grandchild in the second container
+		editor.createShape({
+			id: selectAllIds.container2Grandchild1,
+			type: 'my-custom-shape',
+			parentId: selectAllIds.container2Child1,
+			x: 630,
+			y: 330,
+			props: { w: 30, h: 30 },
+		})
+
+		// Clear selection
+		editor.selectNone()
+	})
+
+	it('when no shapes are selected, selects all page-level shapes (excluding locked ones)', () => {
+		// Initially no shapes selected
+		expect(editor.getSelectedShapeIds()).toEqual([])
+
+		// Call selectAll
+		editor.selectAll()
+
+		// Should select all page-level shapes (excluding locked ones)
+		const selectedIds = editor.getSelectedShapeIds()
+		expect(Array.from(selectedIds).sort()).toEqual(
+			[
+				selectAllIds.pageShape1,
+				selectAllIds.pageShape2,
+				selectAllIds.pageShape3,
+				selectAllIds.container1,
+				selectAllIds.container2,
+			].sort()
+		)
+
+		// Should NOT include locked shape or children/grandchildren
+		expect(selectedIds).not.toContain(selectAllIds.lockedShape)
+		expect(selectedIds).not.toContain(selectAllIds.containerChild1)
+		expect(selectedIds).not.toContain(selectAllIds.containerChild2)
+		expect(selectedIds).not.toContain(selectAllIds.containerChild3)
+		expect(selectedIds).not.toContain(selectAllIds.containerGrandchild1)
+		expect(selectedIds).not.toContain(selectAllIds.container2Child1)
+		expect(selectedIds).not.toContain(selectAllIds.container2Child2)
+		expect(selectedIds).not.toContain(selectAllIds.container2Grandchild1)
+	})
+
+	it('when shapes are selected only on the page, all children of the page should be selected (but not their descendants)', () => {
+		// Select some page-level shapes
+		editor.select(selectAllIds.pageShape1, selectAllIds.pageShape2)
+
+		// Call selectAll
+		editor.selectAll()
+
+		// Should select all page-level shapes (excluding locked ones), but not descendants
+		const selectedIds = editor.getSelectedShapeIds()
+		expect(Array.from(selectedIds).sort()).toEqual(
+			[
+				selectAllIds.pageShape1,
+				selectAllIds.pageShape2,
+				selectAllIds.pageShape3,
+				selectAllIds.container1,
+				selectAllIds.container2,
+			].sort()
+		)
+
+		// Should NOT include children or grandchildren or locked shapes
+		expect(selectedIds).not.toContain(selectAllIds.containerChild1)
+		expect(selectedIds).not.toContain(selectAllIds.containerChild2)
+		expect(selectedIds).not.toContain(selectAllIds.containerChild3)
+		expect(selectedIds).not.toContain(selectAllIds.containerGrandchild1)
+		expect(selectedIds).not.toContain(selectAllIds.container2Child1)
+		expect(selectedIds).not.toContain(selectAllIds.container2Child2)
+		expect(selectedIds).not.toContain(selectAllIds.container2Grandchild1)
+		expect(selectedIds).not.toContain(selectAllIds.lockedShape)
+	})
+
+	it('when shapes are selected within a container, only children of the container should be selected (not their descendants)', () => {
+		// Select some container children
+		editor.select(selectAllIds.containerChild1, selectAllIds.containerChild2)
+
+		// Call selectAll
+		editor.selectAll()
+
+		// Should select all container children (but not their descendants)
+		const selectedIds = editor.getSelectedShapeIds()
+		expect(Array.from(selectedIds).sort()).toEqual(
+			[
+				selectAllIds.containerChild1,
+				selectAllIds.containerChild2,
+				selectAllIds.containerChild3,
+			].sort()
+		)
+
+		// Should NOT include page-level shapes or grandchildren
+		expect(selectedIds).not.toContain(selectAllIds.pageShape1)
+		expect(selectedIds).not.toContain(selectAllIds.pageShape2)
+		expect(selectedIds).not.toContain(selectAllIds.pageShape3)
+		expect(selectedIds).not.toContain(selectAllIds.container1)
+		expect(selectedIds).not.toContain(selectAllIds.container2)
+		expect(selectedIds).not.toContain(selectAllIds.containerGrandchild1)
+		expect(selectedIds).not.toContain(selectAllIds.container2Child1)
+		expect(selectedIds).not.toContain(selectAllIds.container2Child2)
+		expect(selectedIds).not.toContain(selectAllIds.container2Grandchild1)
+	})
+
+	it('when shapes are selected within a second container, only children of that container should be selected', () => {
+		// Select some second container children
+		editor.select(selectAllIds.container2Child1)
+
+		// Call selectAll
+		editor.selectAll()
+
+		// Should select all second container children (but not their descendants)
+		const selectedIds = editor.getSelectedShapeIds()
+		expect(Array.from(selectedIds).sort()).toEqual(
+			[selectAllIds.container2Child1, selectAllIds.container2Child2].sort()
+		)
+
+		// Should NOT include page-level shapes or other container's children or grandchildren
+		expect(selectedIds).not.toContain(selectAllIds.pageShape1)
+		expect(selectedIds).not.toContain(selectAllIds.pageShape2)
+		expect(selectedIds).not.toContain(selectAllIds.pageShape3)
+		expect(selectedIds).not.toContain(selectAllIds.container1)
+		expect(selectedIds).not.toContain(selectAllIds.container2)
+		expect(selectedIds).not.toContain(selectAllIds.containerChild1)
+		expect(selectedIds).not.toContain(selectAllIds.containerChild2)
+		expect(selectedIds).not.toContain(selectAllIds.containerChild3)
+		expect(selectedIds).not.toContain(selectAllIds.containerGrandchild1)
+		expect(selectedIds).not.toContain(selectAllIds.container2Grandchild1)
+	})
+
+	it('when shapes are selected that belong to different parents, no change/history entry should be made', () => {
+		// Select shapes from different parents (page and container)
+		editor.select(selectAllIds.pageShape1, selectAllIds.containerChild1)
+
+		const initialSelectedIds = editor.getSelectedShapeIds()
+
+		// Spy on setSelectedShapes to verify it's not called
+		const setSelectedShapesSpy = jest.spyOn(editor, 'setSelectedShapes')
+
+		// Call selectAll
+		editor.selectAll()
+
+		// Selection should remain unchanged
+		expect(editor.getSelectedShapeIds()).toEqual(initialSelectedIds)
+
+		// setSelectedShapes should not have been called (the method returns early)
+		expect(setSelectedShapesSpy).not.toHaveBeenCalled()
+
+		setSelectedShapesSpy.mockRestore()
+	})
+
+	it('when shapes are selected that belong to different containers, no change/history entry should be made', () => {
+		// Select shapes from different containers
+		editor.select(selectAllIds.containerChild1, selectAllIds.container2Child1)
+
+		const initialSelectedIds = editor.getSelectedShapeIds()
+
+		// Spy on setSelectedShapes to verify it's not called
+		const setSelectedShapesSpy = jest.spyOn(editor, 'setSelectedShapes')
+
+		// Call selectAll
+		editor.selectAll()
+
+		// Selection should remain unchanged
+		expect(editor.getSelectedShapeIds()).toEqual(initialSelectedIds)
+
+		// setSelectedShapes should not have been called
+		expect(setSelectedShapesSpy).not.toHaveBeenCalled()
+
+		setSelectedShapesSpy.mockRestore()
+	})
+
+	it('should not select locked shapes', () => {
+		// Select a page-level shape
+		editor.select(selectAllIds.pageShape1)
+
+		// Call selectAll
+		editor.selectAll()
+
+		// Should select all page-level shapes except locked ones
+		const selectedIds = editor.getSelectedShapeIds()
+		expect(selectedIds).not.toContain(selectAllIds.lockedShape)
+		expect(selectedIds).toContain(selectAllIds.pageShape1)
+		expect(selectedIds).toContain(selectAllIds.pageShape2)
+		expect(selectedIds).toContain(selectAllIds.pageShape3)
+		expect(selectedIds).toContain(selectAllIds.container1)
+		expect(selectedIds).toContain(selectAllIds.container2)
+	})
+
+	it('should handle empty container by selecting all siblings at the same level', () => {
+		// Create an empty container
+		const emptyContainerId = createShapeId('emptyContainer')
+		editor.createShape({
+			id: emptyContainerId,
+			type: 'my-custom-shape',
+			x: 800,
+			y: 400,
+			props: { w: 100, h: 100 },
+		})
+
+		// Clear selection first
+		editor.selectNone()
+
+		// Select the empty container
+		editor.select(emptyContainerId)
+
+		// Call selectAll - since the empty container has no children, it should select all siblings (page-level shapes)
+		editor.selectAll()
+
+		// Should select all page-level shapes (including the empty container itself)
+		const selectedIds = editor.getSelectedShapeIds()
+		expect(Array.from(selectedIds).sort()).toEqual(
+			[
+				selectAllIds.pageShape1,
+				selectAllIds.pageShape2,
+				selectAllIds.pageShape3,
+				selectAllIds.container1,
+				selectAllIds.container2,
+				emptyContainerId,
+			].sort()
+		)
+
+		// Should NOT include locked shapes or children/grandchildren
+		expect(selectedIds).not.toContain(selectAllIds.lockedShape)
+		expect(selectedIds).not.toContain(selectAllIds.containerChild1)
+		expect(selectedIds).not.toContain(selectAllIds.containerChild2)
+		expect(selectedIds).not.toContain(selectAllIds.containerChild3)
+		expect(selectedIds).not.toContain(selectAllIds.containerGrandchild1)
+		expect(selectedIds).not.toContain(selectAllIds.container2Child1)
+		expect(selectedIds).not.toContain(selectAllIds.container2Child2)
+		expect(selectedIds).not.toContain(selectAllIds.container2Grandchild1)
+	})
+
+	it('should work correctly when selecting all shapes of same parent type', () => {
+		// Select all container children
+		editor.select(
+			selectAllIds.containerChild1,
+			selectAllIds.containerChild2,
+			selectAllIds.containerChild3
+		)
+
+		// Call selectAll - should maintain the same selection since all children are already selected
+		editor.selectAll()
+
+		// Should still have all container children selected
+		const selectedIds = editor.getSelectedShapeIds()
+		expect(Array.from(selectedIds).sort()).toEqual(
+			[
+				selectAllIds.containerChild1,
+				selectAllIds.containerChild2,
+				selectAllIds.containerChild3,
+			].sort()
+		)
+	})
+
+	it('should handle mixed selection levels gracefully by doing nothing', () => {
+		// Select a mix: page shape (parent=page), container (parent=page), and container child (parent=container1)
+		// These all have different parent IDs so selectAll should do nothing
+		editor.select(selectAllIds.pageShape1, selectAllIds.containerChild1)
+
+		const initialSelectedIds = Array.from(editor.getSelectedShapeIds())
+
+		// Spy on setSelectedShapes to verify it's not called
+		const setSelectedShapesSpy = jest.spyOn(editor, 'setSelectedShapes')
+
+		// Call selectAll
+		editor.selectAll()
+
+		// Selection should remain unchanged since shapes have different parents
+		expect(Array.from(editor.getSelectedShapeIds())).toEqual(initialSelectedIds)
+
+		// setSelectedShapes should not have been called
+		expect(setSelectedShapesSpy).not.toHaveBeenCalled()
+
+		setSelectedShapesSpy.mockRestore()
+	})
+})