Mention listbox doesn't open on right position based on the view available

[vivinkrishna-ni]

🐛 Bug Report

The mention listbox in nimbl-rich-text-editor does not open in the right position where the view is visible. For example, if there is no space at the bottom of the webpage, still the popup opens below.

💻 Repro or Code Sample

1. In the storybook, position the rich text editor in such a way that a part of the editor is not visible
2. Add @ character
3. The popup opens

🤔 Expected Behavior

Based on the available view, the popup should open there, similar to how the combobox or select works. For example, if the bottom view is hidden, the popup should open at the top.

😯 Current Behavior

In the below case, it is expected to open the popup at the top as the bottom view is hidden.

💁 Possible Solution

Maybe, similar to the implementation of combobox or select in the anchored region template.

🔦 Context

🌍 Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• Version [e.g. 1.8.0]