Issue/implement mentions in gutenberg

Podfile

@@ -149,7 +149,7 @@ target 'WordPress' do
     ## Gutenberg (React Native)
     ## =====================
     ##
-    gutenberg :tag => 'v1.26.0'
+    gutenberg :commit => 'ce88a8ae7052c3fff3292ee2b6382750c90fe7ee'
 
     ## Third party libraries
     ## =====================

RELEASE-NOTES.txt

@@ -1,3 +1,7 @@
+14.8
+-----
+* Block Editor: Mentions insertion are now available for WP.com and Jetpack sites.
+
 14.7
 -----
 * Classic Editor: Fixed action sheet position for additional Media sources picker on iPad

WordPress/Classes/ViewRelated/Gutenberg/GutenbergMentionsViewController.swift

@@ -0,0 +1,170 @@
+import Foundation
+import UIKit
+
+public class GutenbergMentionsViewController: UIViewController {
+
+    static let mentionTriggerText = String("@")
+
+    public lazy var backgroundView: UIView = {
+        let view = UIView(frame: .zero)
+        view.backgroundColor = .basicBackground
+        view.translatesAutoresizingMaskIntoConstraints = false
+        return view
+    }()
+
+    public lazy var searchView: UITextField = {
+        let textField = UITextField(frame: CGRect.zero)
+        textField.placeholder = NSLocalizedString("Search users...", comment: "Placeholder message when showing mentions search field")
+        textField.text = Self.mentionTriggerText
+        textField.clearButtonMode = .whileEditing
+        textField.translatesAutoresizingMaskIntoConstraints = false
+        textField.delegate = self
+        return textField
+    }()
+
+    public lazy var suggestionsView: SuggestionsTableView = {
+        let suggestionsView = SuggestionsTableView()
+        suggestionsView.enabled = true
+        suggestionsView.showSuggestions(forWord: Self.mentionTriggerText)
+        suggestionsView.suggestionsDelegate = self
+        suggestionsView.translatesAutoresizingMaskIntoConstraints = false
+        suggestionsView.siteID = siteID
+        suggestionsView.useTransparentHeader = true
+        return suggestionsView
+    }()
+
+    private let siteID: NSNumber
+    public var onCompletion: ((Result<String, NSError>) -> Void)?
+
+    public init(siteID: NSNumber) {
+        self.siteID = siteID
+        super.init(nibName: nil, bundle: nil)
+    }
+
+    public override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?) {
+        self.siteID = 0
+        super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    override public func viewDidLoad() {
+        view.translatesAutoresizingMaskIntoConstraints = false
+        view.backgroundColor = .clear
+
+        view.addSubview(backgroundView)
+        NSLayoutConstraint.activate([
+            backgroundView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+            backgroundView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+            backgroundView.bottomAnchor.constraint(equalTo: view.safeBottomAnchor),
+            backgroundView.heightAnchor.constraint(equalToConstant: 50.0)
+        ])
+
+        let margin = CGFloat(10)
+        view.addSubview(searchView)
+        searchView.becomeFirstResponder()
+        NSLayoutConstraint.activate([
+            searchView.leadingAnchor.constraint(equalTo: view.safeLeadingAnchor, constant: margin),
+            searchView.trailingAnchor.constraint(equalTo: view.safeTrailingAnchor, constant: -margin),
+            searchView.bottomAnchor.constraint(equalTo: view.safeBottomAnchor),
+            searchView.heightAnchor.constraint(equalToConstant: 50.0)
+        ])
+
+        view.addSubview(suggestionsView)
+        NSLayoutConstraint.activate([
+            suggestionsView.leadingAnchor.constraint(equalTo: view.safeLeadingAnchor, constant: margin),
+            suggestionsView.trailingAnchor.constraint(equalTo: view.safeTrailingAnchor, constant: -margin),
+            suggestionsView.bottomAnchor.constraint(equalTo: searchView.topAnchor),
+            suggestionsView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
+        ])
+
+        view.setNeedsUpdateConstraints()
+    }
+
+    override public func viewDidAppear(_ animated: Bool) {
+        suggestionsView.showSuggestions(forWord: Self.mentionTriggerText)
+    }
+}
+
+extension GutenbergMentionsViewController: UITextFieldDelegate {
+
+    public func textFieldDidEndEditing(_ textField: UITextField) {
+        guard let text = textField.text else {
+            return
+        }
+        suggestionsView.showSuggestions(forWord: text)
+    }
+
+    public func textFieldShouldClear(_ textField: UITextField) -> Bool {
+        onCompletion?(.failure(buildErrorForCancelation()))
+        return true
+    }
+
+    public func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
+        guard let nsString = textField.text as NSString? else {
+            return true
+        }
+        let searchWord = nsString.replacingCharacters(in: range, with: string)
+        if searchWord.hasPrefix(Self.mentionTriggerText) {
+            suggestionsView.showSuggestions(forWord: searchWord)
+        } else {
+            onCompletion?(.failure(buildErrorForCancelation()))
+        }
+        return true
+    }
+
+    public func textFieldShouldReturn(_ textField: UITextField) -> Bool {
+        if suggestionsView.numberOfSuggestions() == 1 {
+            suggestionsView.selectSuggestion(atPosition: 0)
+        }
+        return true
+    }
+}
+
+extension GutenbergMentionsViewController: SuggestionsTableViewDelegate {
+
+    public func suggestionsTableView(_ suggestionsTableView: SuggestionsTableView, didSelectSuggestion suggestion: String?, forSearchText text: String) {
+        suggestionsTableView.showSuggestions(forWord: String())
+        if let suggestion = suggestion {
+            onCompletion?(.success(suggestion))
+        }
+    }
+
+    public func suggestionsTableView(_ suggestionsTableView: SuggestionsTableView, didChangeTableBounds bounds: CGRect) {
+
+    }
+
+    public func suggestionsTableViewMaxDisplayedRows(_ suggestionsTableView: SuggestionsTableView) -> Int {
+        return 3
+    }
+
+}
+
+extension GutenbergMentionsViewController {
+
+    enum MentionError: CustomNSError {
+        case canceled
+        case notAvailable
+
+        static var errorDomain: String = "MentionErrorDomain"
+
+        var errorCode: Int {
+            switch self {
+            case .canceled:
+                return 1
+            case .notAvailable:
+                return 2
+            }
+        }
+
+        var errorUserInfo: [String: Any] {
+            return [:]
+        }
+    }
+
+    private func buildErrorForCancelation() -> NSError {
+        return MentionError.canceled as NSError
+    }
+}

WordPress/Classes/ViewRelated/Gutenberg/GutenbergViewController.swift

@@ -251,6 +251,7 @@ class GutenbergViewController: UIViewController, PostEditor {
     }
 
     deinit {
+        tearDownKeyboardObservers()
         removeObservers(fromPost: post)
         gutenberg.invalidate()
         attachmentDelegate.cancelAllPendingMediaRequests()
@@ -260,6 +261,7 @@ class GutenbergViewController: UIViewController, PostEditor {
 
     override func viewDidLoad() {
         super.viewDidLoad()
+        setupKeyboardObservers()
         WPFontManager.loadNotoFontFamily()
         createRevisionOfPost(loadAutosaveRevision: loadAutosaveRevision)
         setupGutenbergView()
@@ -277,6 +279,36 @@ class GutenbergViewController: UIViewController, PostEditor {
 
     // MARK: - Functions
 
+    private var keyboardShowObserver: Any?
+    private var keyboardHideObserver: Any?
+    private var keyboardFrame = CGRect.zero
+    private var mentionsBottomConstraint: NSLayoutConstraint?
+    private var previousFirstResponder: UIView?
+
+    private func setupKeyboardObservers() {
+        keyboardShowObserver = NotificationCenter.default.addObserver(forName: UIResponder.keyboardDidShowNotification, object: nil, queue: .main) { (notification) in
+            if let keyboardRect = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect {
+                self.keyboardFrame = keyboardRect
+                self.updateConstraintsToAvoidKeyboard(frame: keyboardRect)
+            }
+        }
+        keyboardHideObserver = NotificationCenter.default.addObserver(forName: UIResponder.keyboardDidShowNotification, object: nil, queue: .main) { (notification) in
+            if let keyboardRect = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect {
+                self.keyboardFrame = keyboardRect
+                self.updateConstraintsToAvoidKeyboard(frame: keyboardRect)
+            }
+        }
+    }
+
+    private func tearDownKeyboardObservers() {
+        if let keyboardShowObserver = keyboardShowObserver {
+            NotificationCenter.default.removeObserver(keyboardShowObserver)
+        }
+        if let keyboardHideObserver = keyboardHideObserver {
+            NotificationCenter.default.removeObserver(keyboardHideObserver)
+        }
+    }
+
     private func configureNavigationBar() {
         navigationController?.navigationBar.isTranslucent = false
         navigationController?.navigationBar.accessibilityIdentifier = "Gutenberg Editor Navigation Bar"
@@ -605,6 +637,63 @@ extension GutenbergViewController: GutenbergBridgeDelegate {
         controller.modalPresentationStyle = .overCurrentContext
         self.present(controller, animated: true)
     }
+
+    func updateConstraintsToAvoidKeyboard(frame: CGRect) {
+        keyboardFrame = frame
+        let minimumKeyboardHeight = CGFloat(50)
+        guard let mentionsBottomConstraint = mentionsBottomConstraint else {
+            return
+        }
+
+        if keyboardFrame.height < minimumKeyboardHeight {
+            mentionsBottomConstraint.constant = -self.view.safeAreaInsets.bottom
+        }
+        else {
+            mentionsBottomConstraint.constant = -self.keyboardFrame.height
+        }
+    }
+
+    func gutenbergDidRequestMention(callback: @escaping (Swift.Result<String, NSError>) -> Void) {
+        DispatchQueue.main.async(execute: { [weak self] in
+            self?.mentionShow(callback: callback)
+        })
+    }
+}
+
+// MARK: - Mention implementation
+
+extension GutenbergViewController {
+
+    private func mentionShow(callback: @escaping (Swift.Result<String, NSError>) -> Void) {
+        guard let siteID = post.blog.dotComID else {
+            callback(.failure(GutenbergMentionsViewController.MentionError.notAvailable as NSError))
+            return
+        }
+
+        previousFirstResponder = view.findFirstResponder()
+        let mentionsController = GutenbergMentionsViewController(siteID: siteID)
+        mentionsController.onCompletion = { (result) in
+            callback(result)
+            mentionsController.view.removeFromSuperview()
+            mentionsController.removeFromParent()
+            if let previousFirstResponder = self.previousFirstResponder {
+                previousFirstResponder.becomeFirstResponder()
+            }
+        }
+        addChild(mentionsController)
+        view.addSubview(mentionsController.view)
+        let mentionsBottomConstraint = mentionsController.view.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0)
+        NSLayoutConstraint.activate([
+            mentionsController.view.leadingAnchor.constraint(equalTo: view.safeLeadingAnchor, constant: 0),
+            mentionsController.view.trailingAnchor.constraint(equalTo: view.safeTrailingAnchor, constant: 0),
+            mentionsBottomConstraint,
+            mentionsController.view.topAnchor.constraint(equalTo: view.safeTopAnchor)
+        ])
+        self.mentionsBottomConstraint = mentionsBottomConstraint
+        updateConstraintsToAvoidKeyboard(frame: keyboardFrame)
+        mentionsController.didMove(toParent: self)
+    }
+
 }
 
 // MARK: - GutenbergBridgeDataSource

WordPress/Classes/ViewRelated/Suggestions/SuggestionsTableView.h

@@ -27,6 +27,11 @@
 - (BOOL)showSuggestionsForWord:(nonnull NSString *)word;
 
 - (void)hideSuggestions;
+
+- (NSInteger)numberOfSuggestions;
+
+- (void)selectSuggestionAtPosition:(NSInteger)position;
+
 @end
 
 @protocol SuggestionsTableViewDelegate <NSObject>

WordPress/Classes/ViewRelated/Suggestions/SuggestionsTableView.m

@@ -233,6 +233,18 @@ - (void)hideSuggestions
     [self showSuggestionsForWord:@""];
 }
 
+- (NSInteger)numberOfSuggestions {
+    return self.suggestions.count;
+}
+
+- (void)selectSuggestionAtPosition:(NSInteger)position {
+    if ([self.suggestions count] == 0) {
+        return;
+    }
+    [self tableView:self.tableView didSelectRowAtIndexPath:[NSIndexPath indexPathForRow:position inSection:0]];
+}
+
+
 #pragma mark - UITableViewDataSource methods
 
 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
@@ -302,7 +314,8 @@ - (void)suggestionListUpdated:(NSNotification *)notification
     // only reload if the suggestion list is updated for the current site
     if (self.siteID && [notification.object isEqualToNumber:self.siteID]) {
         self.suggestions = [[SuggestionService sharedInstance] suggestionsForSiteID:self.siteID];
-        [self showSuggestionsForWord:self.searchText];
+        NSString * text = [NSString stringWithFormat:@"@%@", self.searchText];        
+        [self showSuggestionsForWord:text];
     }
 }