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

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
-              onClick={() => commandBarActor.send({ type: 'Close' })}
-              className="group block !absolute left-auto right-full top-[-3px] m-2.5 p-0 border-none bg-transparent hover:bg-transparent"
-            >
-              <CustomIcon
-                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{' '}
-                <kbd className="hotkey ml-4 dark:!bg-chalkboard-80">esc</kbd>
-              </Tooltip>
-            </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">
+              <button
+                onClick={() => commandBarActor.send({ type: 'Close' })}
+                className="group m-0 p-0 border-none bg-transparent hover:bg-transparent"
+              >
+                <CustomIcon
+                  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{' '}
+                  <kbd className="hotkey ml-4 dark:!bg-chalkboard-80">esc</kbd>
+                </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',
-          run: (editor) => {
-            // Only step back if the editor is empty
-            if (editor.state.doc.toString() === '') {
-              stepBack()
-              return true
-            }
-            return false
+          key: 'Shift-Backspace',
+          run: () => {
+            stepBack()
+            return true
           },
         },
       ]),

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' &&