diff --git a/README.md b/README.md index f5a79798..865cefcd 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. @@ -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', } 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 = ({ 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 849466d3..54a8aa9d 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