UIKit Demo Issues

[doubleo2]

I am trying to get the UIKit demo working because I am building a keyboard that uses an SDK that needs to be configured in AppDelegate. The demo runs but it is broken in unexpected ways

1. The "Enter" key is blank
2. Tapping the 123 key to switch to the numeric layout doesn't do anything
3. Replacing the third auto-complete suggestion with StandardAutocompleteSuggestion(text: "abc", title: "WILD") causes the word "WILD" to be inserted when tapped. I would expect it to insert "abc"
4. How do I access the custom layouts - i.e. the emoji and image keyboards - in the demo?

The first issue I was able to resolve by replacing .newLine in DemoButton.swift with .return

The second seems to be caused by the guard at StandardKeyboardActionHandler.swift#L95 which prevents a tap on the keyboardType action from reaching the tryChangeKeyboardType() call.

The third, I don't know. As far as I can tell, the replacement action takes the text from the suggestion, not the title, but it's clearly not working.

I suspect the fourth issue may be related to the fact that I'm unable to access the numeric layout.

Screenshot

[danielsaidi]

Hi @doubleo2

I have been focusing on the SwiftUI parts since launching v4, but chose to keep the UIKit utils around for a while for people who use that approach.

However, I have no time to improve these parts of the library, nor the UIKit demo, so I should probably remove the demo, since it gives the wrong impression of the library. Still, if you or anyone else who use this library with UIKit feel like fixing the demo, I'd be super happy to merge any improvements you may have.

The UIKit-exclusive parts of the library will be removed in v5, though.

[doubleo2]

What do you mean by UIKit exclusive parts? Are you talking about internal implementation details or will it no longer be possible to create a UIKit keyboard extension with KeyboardKit starting in v5?

[danielsaidi]

You will always be able to use UIKit to create keyboards with KeyboardKit, since KK mostly contains view-agnostic utilities, but the library will not contain UIKit-specific utilities after v5...that is, utilities, views etc. that are only used in the UIKit demo.

I will remove the UIKit demo and UIKit-specific views and extensions in v5, since I won’t be able to keep them up to date as the library evolves, like the UIKit demo shows. But you can still build keyboards with UIKit the way you do today, you will just have to setup your own views for the keyboard.

[shweta-poonia]

hey, daniel,

I was trying to build a custom keyboard with the help of UIKIT[uikit demo keyboard], it's providing the layout fine but none of the keys are working in that when we press certain keys actions are triggered but the keyboard is not typing anything in the text box, i am not able to find the reason for that. could you just point me where the problem could be in uikit keyboard demo bcz its using the same standard keyboard action handler file so should work fine.

[danielsaidi]

Hmmm, if the standard action handler is triggered (have you debugged to verify that it is?) and the text document proxy is set, then the typing should just work.

[shweta-poonia]

I have debugged the code standard action handler is triggered and all the corresponding actions also working fine text document proxy is set but nothing typed in the text box

[shweta-poonia]

override func viewDidLoad() {
super.viewDidLoad()
keyboardActionHandler = DemoKeyboardActionHandler(
inputViewController: self)
keyboardLayoutProvider = StandardKeyboardLayoutProvider(
inputSetProvider: keyboardInputSetProvider)
setupStateObservation()
let view = MainKeyboardView.init(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 60))
stackView.addSubview(view)
setup(with: stackView)
}

[shweta-poonia]

this is my code where I am calling the keyboard action handler

[danielsaidi]

Are you trying to type into the main app or a custom text field in the extension?

[shweta-poonia]

for now in the main app but i will also have to do it in custom text field also in future

[shweta-poonia]

import KeyboardKit
import UIKit

/**
This action handler inherits StandardKeyboardActionHandler
and adds UIKit demo-specific functionality to it.
*/
class DemoKeyboardActionHandler: StandardKeyboardActionHandler {

public init(
    inputViewController: KeyboardViewController) {
    self.inputViewController = inputViewController
    super.init(inputViewController: inputViewController)
}

private weak var inputViewController: KeyboardViewController?

override func action(for gesture: KeyboardGesture, on action: KeyboardAction) -> GestureAction? {
    if let action = longPressAction(for: action) { return action }
    if let action = tapAction(for: action) { return action }
    return super.action(for: gesture, on: action)
}

func longPressAction(for action: KeyboardAction) -> GestureAction? {
    switch action {
    case .image(_, _, let imageName): return { [weak self] _ in self?.saveImage(UIImage(named: imageName)!) }
    default: return nil
    }
}



func tapAction(for action: KeyboardAction) -> GestureAction? {
    switch action {
    case .emojiCategory(let cat): return { [weak self] _ in self?.switchToEmojiKeyboardCategory(cat) }
    case .image(_, _, let imageName): return { [weak self] _ in self?.copyImage(UIImage(named: imageName)!) }
    default: return nil
    }
}


// MARK: - Functions

/**
 Override this function to implement a way to alert text
 messages in the keyboard extension. You can't use logic
 that you use in real apps, e.g. `UIAlertController`.
 */
func alert(_ message: String) {
    guard let input = inputViewController else { return }
    input.alerter.alert(message: message, in: input.view, withDuration: 4)
}

func copyImage(_ image: UIImage) {
    guard let input = inputViewController else { return }
    guard input.hasFullAccess else { return alert("You must enable full access to copy images.") }
    guard image.copyToPasteboard() else { return alert("The image could not be copied.") }
    alert("Copied to pasteboard!")
}

func saveImage(_ image: UIImage) {
    guard let input = inputViewController else { return }
    guard input.hasFullAccess else { return alert("You must enable full access to save images.") }
    image.saveToPhotos(completion: handleImageDidSave)
}

}

private extension DemoKeyboardActionHandler {

func handleImageDidSave(WithError error: Error?) {
    if error == nil { alert("Saved!") }
    else { alert("Failed!") }
}

func switchToEmojiKeyboardCategory(_ cat: EmojiCategory) {
    guard
        let vc = inputViewController,
        let view = vc.emojiCollectionView
        else { return }
    view.moveToSection(byCategory: cat.title)
}

}

[shweta-poonia]

demo action handler these both methods are called(if let action = longPressAction(for: action) { return action }
if let action = tapAction(for: action) { return action })

[shweta-poonia]

I haven't made any changes to the standard action handler so

[shweta-poonia]

hey Daniel,
sry for troubling you here but I could really use your help with this one.
I have tried all options, with each key corresponding actions are taking place(while. debugging) there is no output to that like not changing to numeric keyboard or upper case or lower case or typing in the main document. the toolbar is there for autocompletion that's also not displayed.

hope you could spare some time for this.

[shweta-poonia]

//
// KeyboardViewController.swift
// KeyboardKit
//
// Created by Daniel Saidi on 2018-03-04.
// Copyright © 2021 Daniel Saidi. All rights reserved.
//

import Combine
import UIKit
import KeyboardKit

/**
This UIKit-based demo keyboard demonstrates how to create a
keyboard extension using KeyboardKit and UIKit.

The demo injects a custom, demo-specific action handler and
layout provider when the controller is created.

The demo then sends text and emoji inputs to the text proxy,
copies tapped images to the device's pasteboard, saves long
pressed images to photos etc. It also adds an auto complete
toolbar that provides fake suggestions for the current word.

NOTE That this class calls setupKeyboard for big events.
It should observe the keyboard context instead.

IMPORTANT To use this keyboard, you must enable it in the
system keyboard settings ("Settings/General/Keyboards"). It
needs full access for haptic and audio feedback, for access
to the user's photos etc.

If you want to use these features in your own app, you must
add RequestsOpenAccess to the extension's Info.plist to
make it possible to enable full access. To access the photo
album, you have to add a NSPhotoLibraryAddUsageDescription
key to the host application's Info.plist.
*/
class KeyboardViewController: KeyboardInputViewController {

// MARK: - Properties

let alerter = UIKeyboardToastAlert()
var emojiKeyboard: EnhancedEmojiKeyboard?
var emojiCategoryTitleLabel = UILabel()
var emojiCollectionView: HFloatingHeaderButtonCollectionView!
var emojiLabelUpdateAction = {}
static let sharedInstance = KeyboardViewController()

lazy var stackView = UIStackView()

private var cancellables = Set<AnyCancellable>()


// MARK: - Autocomplete

lazy var autocompleteProvider = DemoAutocompleteSuggestionProvider()

lazy var autocompleteToolbar: UIAutocompleteToolbar = {
    UIAutocompleteToolbar(textDocumentProxy: textDocumentProxy, height: 50)
}()

override func performAutocomplete() {
    guard let word = textDocumentProxy.currentWord else { return resetAutocomplete() }
    autocompleteProvider.autocompleteSuggestions(for: word) { [weak self] in
        switch $0 {
        case .failure(let error): print(error.localizedDescription)
        case .success(let result): self?.autocompleteToolbar.update(with: result)
        }
    }
}

override func resetAutocomplete() {
    autocompleteToolbar.reset()
}

// MARK: - View Controller Lifecycle

override func viewDidLoad() {
    super.viewDidLoad()
   keyboardActionHandler = DemoKeyboardActionHandler(
        inputViewController: self)
   keyboardLayoutProvider = StandardKeyboardLayoutProvider(
    inputSetProvider: keyboardInputSetProvider)
   setupStateObservation()
    let view = MainKeyboardView.init(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 60))
    stackView.addSubview(view)
    setup(with: stackView)
}
override func viewWillAppear(_ animated: Bool) {
    let desiredHeight: CGFloat =  500
    let heightConstraint = NSLayoutConstraint(item: view as Any, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: desiredHeight)

// view.addConstraint(heightConstraint)
view.addConstraint(heightConstraint)
}

override func textDidChange(_ textInput: UITextInput?) {
    super.textDidChange(textInput)
    keyboardContext.keyboardType = keyboardContext.preferredKeyboardType
    setupDemoKeyboard(status: true)

// keyboardActionHandler = DemoKeyboardActionHandler(
// inputViewController: self)
// keyboardLayoutProvider = StandardKeyboardLayoutProvider(
// inputSetProvider: keyboardInputSetProvider)
// setupStateObservation()
let view = MainKeyboardView.init(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 60))
stackView.addSubview(view)
setup(with: stackView)
// let view = MainKeyboardView.init(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 60))
// stackView.addSubview(view)
// setup(with: stackView)
}

/**
 This demo recreates the keyboard when view controller's
 trait collections change.
 */
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
 setupDemoKeyboard(status: true)
}

/**
 This demo recreates the keyboard when view controller's
 size changes.
 */
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)
  setupDemoKeyboard(status: true)
}

}

private extension KeyboardViewController {

func setupStateObservation(){
    setupKeyboardTypeObservation()
}

func setupKeyboardTypeObservation() {
    keyboardContext.$keyboardType.sink { [weak self] _ in
       DispatchQueue.main.async {
           self?.setupDemoKeyboard(status: true)
        }
    }.store(in: &cancellables)
}

}

[danielsaidi]

@shweta-poonia - the UIKit demo works when I try it from the main branch 🤔

See movie:
https://user-images.githubusercontent.com/429927/130358261-886c313d-4a58-492f-877b-113b3ae18f83.mov

[shweta-poonia]

but numeric keyboad is still not working in this one also

[danielsaidi]

Yeah, I noticed that now.

With 4.0, I explicitly stopped working on UIKit support, but left the demo and some other UIKit-specific parts around for the community to keep up to date if they needed to. I will remove these parts altogether in 5.0, which I'll release later in H2.

I unfortunately don't have the time nor resources to work on the UIKit parts, so if you want to go with that technology, I'm afraid I can't help as part of my spare time commitment to this project. I hope it's fairly easy to debug and see why the numeric switch doesn't toggle the keyboard.

If you solve it, I'd be happy to merge any PRs you may have 👍

[shweta-poonia]

sure @danielsaidi I will look into this will get back to you.
thanks for your help .😊