@tldraw/commenting 5.4.0-next.ef99ab47e5ce → 5.5.0-canary.022e164c8709

package/src/ui/reaction-picker.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useId, type ComponentType } from 'react'
+import { useCallback, useId, type ComponentType, type KeyboardEvent, type MouseEvent } from 'react'
 import {
 	TldrawUiButton,
 	TldrawUiDropdownMenuContent,
@@ -40,6 +40,14 @@ export interface ReactionPickerProps {
 	className?: string
 }
 
+/**
+ * Whether a palette pick asked to keep the palette open (shift held) for multi-select.
+ * @internal
+ */
+export function isMultiSelectPick(event?: MouseEvent | KeyboardEvent): boolean {
+	return !!event?.shiftKey
+}
+
 /**
  * The add-reaction affordance: a smiley button that opens an emoji grid.
  *
@@ -47,7 +55,8 @@ export interface ReactionPickerProps {
  * reactions are added and the row reflows.
  *
  * Picking an emoji dismisses the grid — adding and removing alike, since either way the picker has
- * done its job — and hands focus back to the trigger.
+ * done its job — and hands focus back to the trigger. Shift-picking keeps the grid open, for
+ * choosing several reactions in a row.
  * @public @react
  */
 export function ReactionPicker({
@@ -69,9 +78,11 @@ export function ReactionPicker({
 	// what closes it. The palette's tokens are plain buttons — a swappable component, not radix
 	// menu items — so nothing dismisses the menu on its own.
 	const handleSelect = useCallback(
-		(value: string) => {
+		(value: string, event?: MouseEvent | KeyboardEvent) => {
 			onSelect?.(value)
-			tlmenus.deleteOpenMenu(id, editor?.contextId)
+			if (!isMultiSelectPick(event)) {
+				tlmenus.deleteOpenMenu(id, editor?.contextId)
+			}
 		},
 		[onSelect, id, editor]
 	)