Mention list and emoji top position (Draft.js)

Question

Will you please help me how I can change its position from bottom to top? I want to show mention list on top of the text instead of the bottom. The same question about emoji list.

Example link.

Answer 1

You can achieve it with positionSuggestions configuration option. This option available for both mention and emoji plugins.

Excerpt from documentation:

positionSuggestions

The function can be used to manipulate the position of the popover containing the suggestions. It receives one object as arguments containing the visible rectangle surrounding the decorated search string including the @. In addition the object contains prevProps, prevState, state & props. An object should be returned which can contain all sorts of styles. The defined properties will be applied as inline-styles.

In constructor you should create plugin this way:

constructor(props) {
  super(props);

  this.mentionPlugin = createMentionPlugin({
    positionSuggestions: (settings) => {
      return {
        left: settings.decoratorRect.left + 'px',
        top: settings.decoratorRect.top - 40 + 'px', // change this value (40) for manage the distance between cursor and bottom edge of popover
        display: 'block',
        transform: 'scale(1) translateY(-100%)', // transition popover on the value of its height
        transformOrigin: '1em 0% 0px',
        transition: 'all 0.25s cubic-bezier(0.3, 1.2, 0.2, 1)'
      };
    }
  });
}

And render method:

render() {
  const { MentionSuggestions } = this.mentionPlugin;
  const plugins = [this.mentionPlugin];

  return (
    <div className={editorStyles.editor} onClick={this.focus}>
      <Editor
        editorState={this.state.editorState}
        onChange={this.onChange}
        plugins={plugins}
        ref={(element) => { this.editor = element; }}
      />
      <div style={{ visibility: this.state.suggestions.length ? 'visible' : 'hidden'}}>
        <MentionSuggestions
          onSearchChange={this.onSearchChange}
          suggestions={this.state.suggestions}
          onAddMention={this.onAddMention}
        />
      </div>
    </div>
  );
}

Check working example here - https://codesandbox.io/s/w62x3472k7