Confirm with cmd+enter instead of enter key

[DameNianch]

As the title says, I want to confirm with cmd+enter instead of enter key. If there is a way to do this, please let me know. If not, I would like the feature to be added. I'm not confident about the code quality, but I can submit a PR.

The following are the reasons for this feature request.

Confirming with the enter key is problematic for many Japanese people. In Japanese, 3-7 types of characters are mainly used: hiragana, katakana, kanji, and alphabet (x2-4). After entering text on the keyboard, the user selects which type to use. Since the enter key is used to select, if the text is confirmed with the enter key, it is frustrating because you cannot continue entering text. I have expressed a specific example of the operation in text.

When typing
"CarlosNZは偉大なengineerです"
It need to type
"CarlosNZ" "は" "enter" "偉大な" "enter" "engineer" "です" "enter"

ref:

json-edit-react/src/ValueNodes.tsx

Line 23 in 10f5c9f

if (e.key === 'Enter' && !e.shiftKey) handleEdit()

[CarlosNZ]

Thanks for the suggestion. You currently use Cmd-Enter when editing the multiline/JSON blocks so that you can add line breaks in the text, but plain old Enter for simple inputs.

I should be able to make the "Confirm" key a customisable option fairly easily. I'll try and do that in the next week or so.

[DameNianch]

You currently use Cmd-Enter when editing the multiline/JSON blocks so that you can add line breaks in the text,

I feel like that's a bit misleading, so let me clarify. In this multi-line editing, you can confirm with Cmd-Enter. The Enter key is treated as adding a line.

json-edit-react/src/CollectionNode.tsx

Line 130 in 10f5c9f

if (e.key === 'Enter' && (e.metaKey || e.shiftKey || e.ctrlKey)) handleEdit()

On the other hand, when inputting strings only (is this simple inputs?), Cmd+Enter is treated as just Enter. Shift-Enter creates a new line.

json-edit-react/src/ValueNodes.tsx

Line 23 in 10f5c9f

if (e.key === 'Enter' && !e.shiftKey) handleEdit()

[CarlosNZ]

On the other hand, when inputting strings only (is this simple inputs?), Cmd+Enter is treated as just Enter. Shift-Enter creates a new line.

Yes, that is correct, I forgot 🙄

I'll make it so you can override as many or few of the keyboard controls as you wish, by passing in an object like this:

export interface KeyEvent {
  key: string
  modifier?: React.ModifierKey | React.ModifierKey[]
}
export interface KeyboardControls {
  confirm?: KeyEvent | string // buttons, and value node default
  cancel?: KeyEvent | string // all "Cancel" operations
  objectConfirm?: KeyEvent | string
  objectLineBreak?: KeyEvent | string
  stringConfirm?: KeyEvent | string
  stringLineBreak?: KeyEvent | string // for Value nodes
  numberConfirm?: KeyEvent | string
  booleanConfirm?: KeyEvent | string
  numberUp?: KeyEvent | string
  numberDown?: KeyEvent | string
  clipboardModifier?: React.ModifierKey | React.ModifierKey[]
  collapseModifier?: React.ModifierKey | React.ModifierKey[]
}

[DameNianch]

Thank you. That feels so good.
I'm looking forward to the fix!!

[CarlosNZ]

Hi @DameNianch, I've made a PR for this and published a beta to npm if you'd like to give it a try:

https://www.npmjs.com/package/json-edit-react/v/1.18.0-beta1

Documentation added to README here: https://github.com/CarlosNZ/json-edit-react/blob/133-keyboard-overrides/README.md#keyboard-customisation

[DameNianch]

@CarlosNZ

I'm very grateful for your quick response.
I just installed it and checked that it works.
The coding remains cool, and it's friendly to Japanese people, which I like even more.

[CarlosNZ]

I'm very grateful for your quick response. I just installed it and checked that it works. The coding remains cool, and it's friendly to Japanese people, which I like even more.

Glad to hear, it was a good suggestion.