Customise boolean toggle key (#152)

Author: CarlosNZ

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.
 
@@ -699,6 +700,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',
 }

demo/src/App.tsx

@@ -411,6 +411,7 @@ function App() {
               //   clipboardModifier: ['Alt', 'Shift'],
               //   collapseModifier: 'Control',
               //   booleanConfirm: 'Enter',
+              //   booleanToggle: 'r',
               // }}
               // insertAtBeginning="object"
             />

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
     />
   ) : (

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'],
 }

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