Disable some menu buttons when no item selected (#393)

* feat(menu): disable buttons when items not selected

* cut and copy options not shown when item isn't selected
* added cut option on ContextMenu

* Show buttons but disabled

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

packages/tldraw/src/components/ContextMenu/ContextMenu.tsx

@@ -93,6 +93,10 @@ export const ContextMenu = ({ onBlur, children }: ContextMenuProps): JSX.Element
     app.copyJson()
   }, [app])
 
+  const handleCut = React.useCallback(() => {
+    app.cut()
+  }, [app])
+
   const handleCopy = React.useCallback(() => {
     app.copy()
   }, [app])
@@ -177,6 +181,9 @@ export const ContextMenu = ({ onBlur, children }: ContextMenuProps): JSX.Element
                 />
               )}
               <Divider />
+              <CMRowButton onClick={handleCut} kbd="#X">
+                Cut
+              </CMRowButton>
               <CMRowButton onClick={handleCopy} kbd="#C">
                 Copy
               </CMRowButton>

packages/tldraw/src/components/TopPanel/Menu/Menu.tsx

@@ -15,14 +15,20 @@ import { useFileSystemHandlers } from '~hooks'
 import { HeartIcon } from '~components/Primitives/icons/HeartIcon'
 import { preventEvent } from '~components/preventEvent'
 import { DiscordIcon } from '~components/Primitives/icons'
+import type { TDSnapshot } from '~types'
 
 interface MenuProps {
   showSponsorLink: boolean
   readOnly: boolean
 }
 
+const numberOfSelectedIdsSelector = (s: TDSnapshot) => {
+  return s.document.pageStates[s.appState.currentPageId].selectedIds.length
+}
+
 export const Menu = React.memo(function Menu({ showSponsorLink, readOnly }: MenuProps) {
   const app = useTldrawApp()
+  const numberOfSelectedIds = app.useStore(numberOfSelectedIdsSelector)
 
   const { onNewProject, onOpenProject, onSaveProject, onSaveProjectAs } = useFileSystemHandlers()
 
@@ -70,6 +76,8 @@ export const Menu = React.memo(function Menu({ showSponsorLink, readOnly }: Menu
 
   const showSignInOutMenu = app.callbacks.onSignIn || app.callbacks.onSignOut || showSponsorLink
 
+  const hasSelection = numberOfSelectedIds > 0
+
   return (
     <DropdownMenu.Root dir="ltr">
       <DMTriggerIcon isSponsor={showSponsorLink}>
@@ -110,20 +118,30 @@ export const Menu = React.memo(function Menu({ showSponsorLink, readOnly }: Menu
                 Redo
               </DMItem>
               <DMDivider dir="ltr" />
-              <DMItem onSelect={preventEvent} onClick={handleCut} kbd="#X">
+              <DMItem onSelect={preventEvent} disabled={!hasSelection} onClick={handleCut} kbd="#X">
                 Cut
               </DMItem>
-              <DMItem onSelect={preventEvent} onClick={handleCopy} kbd="#C">
+              <DMItem
+                onSelect={preventEvent}
+                disabled={!hasSelection}
+                onClick={handleCopy}
+                kbd="#C"
+              >
                 Copy
               </DMItem>
               <DMItem onSelect={preventEvent} onClick={handlePaste} kbd="#V">
                 Paste
               </DMItem>
               <DMDivider dir="ltr" />
-              <DMItem onSelect={preventEvent} onClick={handleCopySvg} kbd="#⇧C">
+              <DMItem
+                onSelect={preventEvent}
+                disabled={!hasSelection}
+                onClick={handleCopySvg}
+                kbd="#⇧C"
+              >
                 Copy as SVG
               </DMItem>
-              <DMItem onSelect={preventEvent} onClick={handleCopyJson}>
+              <DMItem onSelect={preventEvent} disabled={!hasSelection} onClick={handleCopyJson}>
                 Copy as JSON
               </DMItem>
               <DMDivider dir="ltr" />