[experiment] paste: show little puff when pasting to denote something happened (#2787)

@steveruizok go ahead and take a look at the animation css and tweak as
you like.
@SomeHats and @steveruizok this is an experiment in that this is prbly
the wrong way to approach it? But I'd be curious to learn if there was a
more proper route here


https://github.com/tldraw/tldraw/assets/469604/40a7029c-f4e8-4f2a-914e-8e6f264be4c7

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- UI: add a little 'puff' when something is pasted to tell that
something has happened.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

packages/editor/src/lib/components/default-components/DefaultCanvas.tsx

@@ -356,11 +356,9 @@ function ShapesToDisplay() {
 
 function SelectedIdIndicators() {
 	const editor = useEditor()
-	const selectedShapeIds = useValue(
-		'selectedShapeIds',
-		() => editor.getCurrentPageState().selectedShapeIds,
-		[editor]
-	)
+	const selectedShapeIds = useValue('selectedShapeIds', () => editor.getSelectedShapeIds(), [
+		editor,
+	])
 	const shouldDisplay = useValue(
 		'should display selected ids',
 		() => {

packages/tldraw/src/lib/ui/hooks/clipboard/pasteTldrawContent.ts

@@ -11,9 +11,22 @@ import { Editor, TLContent, VecLike } from '@tldraw/editor'
 export function pasteTldrawContent(editor: Editor, clipboard: TLContent, point?: VecLike) {
 	const p = point ?? (editor.inputs.shiftKey ? editor.inputs.currentPagePoint : undefined)
 
+	const seletionBoundsBefore = editor.getSelectionPageBounds()
 	editor.mark('paste')
 	editor.putContentOntoCurrentPage(clipboard, {
 		point: p,
 		select: true,
 	})
+	const selectedBoundsAfter = editor.getSelectionPageBounds()
+	if (
+		seletionBoundsBefore &&
+		selectedBoundsAfter &&
+		seletionBoundsBefore?.collides(selectedBoundsAfter)
+	) {
+		// Creates a 'puff' to show a paste has happened.
+		editor.updateInstanceState({ isChangingStyle: true })
+		setTimeout(() => {
+			editor.updateInstanceState({ isChangingStyle: false })
+		}, 150)
+	}
 }