Change step back shortcut in command palette to Shift+Backspace (#5604)

* Change cmdbar step back shortcut to Shift+Backspace

* Add visual button for step back

* Make the shortcut apply no matter what's in the input

e2e/playwright/command-bar-tests.spec.ts

@@ -291,7 +291,7 @@ test.describe('Command bar tests', { tag: ['@skipWin'] }, () => {
     // Review step and argument hotkeys
     await expect(submitButton).toBeEnabled()
     await expect(submitButton).toBeFocused()
-    await submitButton.press('Backspace')
+    await submitButton.press('Shift+Backspace')
 
     // Assert we're back on the distance step
     await expect(

e2e/playwright/point-click.spec.ts

@@ -2900,7 +2900,7 @@ extrude001 = extrude(profile001, length = 100)
       await enterAppearanceFlow(`Open Set Appearance flow`)
 
       await test.step(`Validate hidden argument "nodeToEdit" can't be reached with Backspace`, async () => {
-        await page.keyboard.press('Backspace')
+        await page.keyboard.press('Shift+Backspace')
         await cmdBar.expectState({
           stage: 'pickCommand',
         })

src/components/CommandBar/CommandArgOptionInput.tsx

@@ -144,7 +144,7 @@ function CommandArgOptionInput({
             onKeyDown={(event) => {
               if (event.metaKey && event.key === 'k')
                 commandBarActor.send({ type: 'Close' })
-              if (event.key === 'Backspace' && !event.currentTarget.value) {
+              if (event.key === 'Backspace' && event.shiftKey) {
                 stepBack()
               }
 

src/components/CommandBar/CommandBar.tsx

@@ -127,19 +127,35 @@ export const CommandBar = () => {
                 <CommandBarReview stepBack={stepBack} />
               )
             )}
-            <button
+            <div className="flex flex-col gap-2 !absolute left-auto right-full top-[-3px] m-2.5 p-0 border-none bg-transparent hover:bg-transparent">
-              onClick={() => commandBarActor.send({ type: 'Close' })}
+              <button
-              className="group block !absolute left-auto right-full top-[-3px] m-2.5 p-0 border-none bg-transparent hover:bg-transparent"
+                onClick={() => commandBarActor.send({ type: 'Close' })}
-            >
+                className="group m-0 p-0 border-none bg-transparent hover:bg-transparent"
-              <CustomIcon
+              >
-                name="close"
+                <CustomIcon
-                className="w-5 h-5 rounded-sm bg-destroy-10 text-destroy-80 dark:bg-destroy-80 dark:text-destroy-10 group-hover:brightness-110"
+                  name="close"
-              />
+                  className="w-5 h-5 rounded-sm bg-destroy-10 text-destroy-80 dark:bg-destroy-80 dark:text-destroy-10 group-hover:brightness-110"
-              <Tooltip position="bottom" delay={500}>
+                />
-                Cancel{' '}
+                <Tooltip position="bottom" delay={500}>
-                <kbd className="hotkey ml-4 dark:!bg-chalkboard-80">esc</kbd>
+                  Cancel{' '}
-              </Tooltip>
+                  <kbd className="hotkey ml-4 dark:!bg-chalkboard-80">esc</kbd>
-            </button>
+                </Tooltip>
+              </button>
+              {!commandBarState.matches('Selecting command') && (
+                <button onClick={stepBack} className="m-0 p-0 border-none">
+                  <CustomIcon name="arrowLeft" className="w-5 h-5 rounded-sm" />
+                  <Tooltip position="bottom" delay={500}>
+                    Step back{' '}
+                    <kbd className="hotkey ml-4 dark:!bg-chalkboard-80">
+                      Shift
+                    </kbd>
+                    <kbd className="hotkey ml-4 dark:!bg-chalkboard-80">
+                      Bksp
+                    </kbd>
+                  </Tooltip>
+                </button>
+              )}
+            </div>
           </WrapperComponent.Panel>
         </Transition.Child>
       </WrapperComponent>

src/components/CommandBar/CommandBarBasicInput.tsx

@@ -55,7 +55,7 @@ function CommandBarBasicInput({
               | undefined) || (arg.defaultValue as string)
           }
           onKeyDown={(event) => {
-            if (event.key === 'Backspace' && !event.currentTarget.value) {
+            if (event.key === 'Backspace' && event.shiftKey) {
               stepBack()
             }
           }}

src/components/CommandBar/CommandBarKclInput.tsx

@@ -146,14 +146,10 @@ function CommandBarKclInput({
           },
         },
         {
-          key: 'Backspace',
+          key: 'Shift-Backspace',
-          run: (editor) => {
+          run: () => {
-            // Only step back if the editor is empty
+            stepBack()
-            if (editor.state.doc.toString() === '') {
+            return true
-              stepBack()
-              return true
-            }
-            return false
           },
         },
       ]),

src/components/CommandBar/CommandBarReview.tsx

@@ -8,7 +8,7 @@ function CommandBarReview({ stepBack }: { stepBack: () => void }) {
     context: { argumentsToSubmit, selectedCommand },
   } = commandBarState
 
-  useHotkeys('backspace', stepBack, {
+  useHotkeys('backspace+shift', stepBack, {
     enableOnFormTags: true,
     enableOnContentEditable: true,
   })

src/components/CommandBar/CommandBarSelectionInput.tsx

@@ -142,7 +142,7 @@ function CommandBarSelectionInput({
           placeholder="Select an entity with your mouse"
           className="absolute inset-0 w-full h-full opacity-0 cursor-default"
           onKeyDown={(event) => {
-            if (event.key === 'Backspace') {
+            if (event.key === 'Backspace' && event.shiftKey) {
               stepBack()
             } else if (event.key === 'Escape') {
               commandBarActor.send({ type: 'Close' })

src/components/CommandBar/CommandBarSelectionMixedInput.tsx

@@ -120,7 +120,7 @@ export default function CommandBarSelectionMixedInput({
           placeholder="Select an entity with your mouse"
           className="absolute inset-0 w-full h-full opacity-0 cursor-default"
           onKeyDown={(event) => {
-            if (event.key === 'Backspace') {
+            if (event.key === 'Backspace' && event.shiftKey) {
               stepBack()
             } else if (event.key === 'Escape') {
               commandBarActor.send({ type: 'Close' })

src/components/CommandBar/CommandBarTextareaInput.tsx

@@ -56,7 +56,7 @@ function CommandBarTextareaInput({
               | undefined) || (arg.defaultValue as string)
           }
           onKeyDown={(event) => {
-            if (event.key === 'Backspace' && !event.currentTarget.value) {
+            if (event.key === 'Backspace' && event.shiftKey) {
               stepBack()
             } else if (
               event.key === 'Enter' &&