From 2635bb7dbd30968e34b0e8e6068d88efdf2151fb Mon Sep 17 00:00:00 2001
From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date: Thu, 9 Jan 2025 11:27:42 +1300
Subject: [PATCH] Customise boolean toggle key

---
 README.md          | 2 ++
 demo/src/App.tsx   | 1 +
 src/ValueNodes.tsx | 8 ++++++--
 src/helpers.ts     | 1 +
 src/types.ts       | 1 +
 5 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index e8439c44..7b755b69 100644
--- a/README.md
+++ b/README.md
@@ -105,6 +105,7 @@ It's pretty self explanatory (click the "edit" icon to edit, etc.), but there ar
 - When clicking the "clipboard" icon, holding down `Cmd/Ctrl` will copy the *path* to the selected node rather than its value
 - When opening/closing a node, hold down "Alt/Option" to open/close *all* child nodes at once
 - For Number inputs, arrow-up and down keys will increment/decrement the value
+- For Boolean inputs, space bar will toggle the value
 - Drag and drop items to change the structure or modify display order
 - JSON text input can accept "looser" input, if an additional JSON parsing method is provided (e.g. [JSON5](https://json5.org/)). See `jsonParse` prop.
 
@@ -697,6 +698,7 @@ The default keyboard controls are [outlined above](#usage), but it's possible to
   numberUp: 'ArrowUp',
   numberDown: 'ArrowDown',
   booleanConfirm: 'Enter',
+  booleanToggle: ' ', // Space bar
   clipboardModifier: ['Meta', 'Control'],
   collapseModifier: 'Alt',
 }
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
index eec440be..e9b072aa 100644
--- a/demo/src/App.tsx
+++ b/demo/src/App.tsx
@@ -411,6 +411,7 @@ function App() {
               //   clipboardModifier: ['Alt', 'Shift'],
               //   collapseModifier: 'Control',
               //   booleanConfirm: 'Enter',
+              //   booleanToggle: 'r',
               // }}
               // insertAtBeginning="object"
             />
diff --git a/src/ValueNodes.tsx b/src/ValueNodes.tsx
index c166a6bc..0392cfc4 100644
--- a/src/ValueNodes.tsx
+++ b/src/ValueNodes.tsx
@@ -141,12 +141,16 @@ export const BooleanValue: React.FC<InputProps & { value: boolean }> = ({
       name={toPathString(path)}
       checked={value}
       onChange={() => setValue(!value)}
-      onKeyDown={(e) =>
+      onKeyDown={(e) => {
+        // If we don't explicitly suppress normal checkbox keyboard behaviour,
+        // the default key (Space) will continue to work even if re-defined
+        if (e.key === ' ') e.preventDefault()
         handleKeyboard(e, {
           booleanConfirm: handleEdit,
           cancel: handleCancel,
+          booleanToggle: () => setValue(!value),
         })
-      }
+      }}
       autoFocus
     />
   ) : (
diff --git a/src/helpers.ts b/src/helpers.ts
index 47764b30..83b83f5e 100644
--- a/src/helpers.ts
+++ b/src/helpers.ts
@@ -203,6 +203,7 @@ const defaultKeyboardControls: KeyboardControlsFull = {
   numberUp: { key: 'ArrowUp' },
   numberDown: { key: 'ArrowDown' },
   booleanConfirm: ENTER,
+  booleanToggle: { key: ' ' },
   clipboardModifier: ['Meta', 'Control'],
   collapseModifier: ['Alt'],
 }
diff --git a/src/types.ts b/src/types.ts
index e31f0841..5669876c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -166,6 +166,7 @@ export interface KeyboardControls {
   stringConfirm?: KeyEvent | string
   stringLineBreak?: KeyEvent | string // for Value nodes
   booleanConfirm?: KeyEvent | string
+  booleanToggle?: KeyEvent | string
   numberConfirm?: KeyEvent | string
   numberUp?: KeyEvent | string
   numberDown?: KeyEvent | string