fix: context menu state

tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx

@@ -19,17 +19,18 @@ export const ContextMenu = observer(function ContextMenu({
   const app = useApp()
   const rContent = React.useRef<HTMLDivElement>(null)
 
+  const runAndTransition = (f: Function) => {
+    f()
+    app.transition('select')
+  }
+
   return (
-    <ReactContextMenu.Root
-      onOpenChange={state => {
-        if (!state) app.transition('select')
-      }}
-    >
+    <ReactContextMenu.Root>
       <ReactContextMenu.Trigger>{children}</ReactContextMenu.Trigger>
       <ReactContextMenu.Content
         className="tl-context-menu"
         ref={rContent}
-        onEscapeKeyDown={preventDefault}
+        onEscapeKeyDown={()=> app.transition('select')}
         collisionBoundary={collisionRef.current}
         asChild
         tabIndex={-1}
@@ -37,7 +38,7 @@ export const ContextMenu = observer(function ContextMenu({
         <div>
           {app.selectedShapes?.size > 0 && (
             <>
-              <ReactContextMenu.Item className="tl-context-menu-button" onClick={() => app.copy()}>
+              <ReactContextMenu.Item className="tl-context-menu-button" onClick={() => runAndTransition(app.copy)}>
                 Copy
                 <div className="tl-context-menu-right-slot">
                   <span className="keyboard-shortcut">
@@ -47,7 +48,7 @@ export const ContextMenu = observer(function ContextMenu({
               </ReactContextMenu.Item>
             </>
           )}
-          <ReactContextMenu.Item className="tl-context-menu-button" onClick={() => app.paste()}>
+          <ReactContextMenu.Item className="tl-context-menu-button" onClick={() => runAndTransition(app.paste)}>
             Paste
             <div className="tl-context-menu-right-slot">
               <span className="keyboard-shortcut">
@@ -58,7 +59,7 @@ export const ContextMenu = observer(function ContextMenu({
           <ReactContextMenu.Separator className="menu-separator" />
           <ReactContextMenu.Item
             className="tl-context-menu-button"
-            onClick={() => app.api.selectAll()}
+            onClick={() => runAndTransition(app.api.selectAll)}
           >
             Select all
             <div className="tl-context-menu-right-slot">
@@ -70,7 +71,7 @@ export const ContextMenu = observer(function ContextMenu({
           {app.selectedShapes?.size > 1 && (
             <ReactContextMenu.Item
               className="tl-context-menu-button"
-              onClick={() => app.api.deselectAll()}
+              onClick={() => runAndTransition(app.api.deselectAll)}
             >
               Deselect all
             </ReactContextMenu.Item>
@@ -79,7 +80,7 @@ export const ContextMenu = observer(function ContextMenu({
             <>
               <ReactContextMenu.Item
                 className="tl-context-menu-button"
-                onClick={() => app.api.deleteShapes()}
+                onClick={() => runAndTransition(app.api.deleteShapes)}
               >
                 Delete
                 <div className="tl-context-menu-right-slot">
@@ -93,13 +94,13 @@ export const ContextMenu = observer(function ContextMenu({
                   <ReactContextMenu.Separator className="menu-separator" />
                   <ReactContextMenu.Item
                     className="tl-context-menu-button"
-                    onClick={() => app.flipHorizontal()}
+                    onClick={() => runAndTransition(app.flipHorizontal)}
                   >
                     Flip horizontally
                   </ReactContextMenu.Item>
                   <ReactContextMenu.Item
                     className="tl-context-menu-button"
-                    onClick={() => app.flipVertical()}
+                    onClick={() => runAndTransition(app.flipVertical)}
                   >
                     Flip vertically
                   </ReactContextMenu.Item>
@@ -108,7 +109,7 @@ export const ContextMenu = observer(function ContextMenu({
               <ReactContextMenu.Separator className="menu-separator" />
               <ReactContextMenu.Item
                 className="tl-context-menu-button"
-                onClick={() => app.bringToFront()}
+                onClick={() => runAndTransition(app.bringToFront)}
               >
                 Move to front
                 <div className="tl-context-menu-right-slot">
@@ -119,7 +120,7 @@ export const ContextMenu = observer(function ContextMenu({
               </ReactContextMenu.Item>
               <ReactContextMenu.Item
                 className="tl-context-menu-button"
-                onClick={() => app.sendToBack()}
+                onClick={() => runAndTransition(app.sendToBack)}
               >
                 Move to back
                 <div className="tl-context-menu-right-slot">