7

I'm trying to handle shift+enter for newline in a text box (that chat apps e.g. WhatsApp, Discord etc. implement). Currently, I'm using a SwiftUI TextEditor, but that doesn't have any way to handle raw keyboard events like you can do in AppKit. So, a hackish solution is to check if the last character of the message is a newline in .onchange, then send the message. This approach works for "enter to send", but I can't find a way to not send the message if the shift key is pressed (for multiline messages).

I was trying out an approach using NSViewRepresentable to use AppKit APIs as follows:

struct KeyEventHandling: NSViewRepresentable {
    class KeyView: NSView {
        override var acceptsFirstResponder: Bool { true }
        
        override func keyDown(with event: NSEvent) {
            print("keydown event")
        }

        override func flagsChanged(with event: NSEvent) {
            switch event.modifierFlags.intersection(.deviceIndependentFlagsMask) {
            case [.shift]:
                print("shift key pressed")
            default:
                print("no modifier keys are pressed")
            }
        }
    }

    func makeNSView(context: Context) -> NSView {
        let view = KeyView()
        DispatchQueue.main.async { // wait till next event cycle
            view.window?.makeFirstResponder(view)
        }
        return view
    }

    func updateNSView(_ nsView: NSView, context: Context) { }
}

I then set it as a overlay/background (tried both) of the TextEditor like so:

TextEditor(text: $message)
    .overlay(KeyEventHandling())
    ...more modifiers

However, it only seems to handle the events while the TextEditor isn't focused. When the TextEditor (or any other element, it seems) is focused, pressing shift doesn't call the flagsChanged override.

Is there a better approach, short of reimplementing the whole TextEditor as a NSViewRepresentable, to receive modifier key state changes? Thanks!

1
  • did you ever find a way?
    – aehlke
    Oct 22 at 3:11

1 Answer 1

2

The correct shortcut for new line is actually option+return and TextField supports it, e.g.

TextField("type something...", text: $text, onEditingChanged: { _ in     
    print("changed") 
}, onCommit: { 
    print("commit") 
})
6
  • Hi, thanks for answering this question, its appreciated. Is there any way to recreate TextEditor-like functionality using TextField, specifically multi-line input? May 15, 2022 at 11:15
  • Hi as I said TextField supports multi line input just press option-return to create a new line
    – malhal
    May 15, 2022 at 12:57
  • Ok, I'll give it a shot and see if it works! If it does I'll mark this as the answer :) May 15, 2022 at 13:47
  • Although this approach with a TextField appears to support adding newlines, it doesn't wrap text like TextEditor does. Is there any way to add text wrapping support? May 16, 2022 at 6:43
  • That depends on your layout, you could post another question with your code.
    – malhal
    May 16, 2022 at 8:31

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.