提及列表和表情符号顶部位置 (Draft.js)

Question

你能帮我把它的位置从下往上改变吗？我想在文本顶部而不是底部显示提及列表。关于表情符号列表的相同问题。

Answer 1

您可以使用 positionSuggestions 配置选项来实现它。此选项适用于 mention 和 emoji 插件。

文档摘录：

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.

在 constructor 中你应该这样创建插件：

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)'
      };
    }
  });
}

和render方法：

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>
  );
}

在此处检查工作示例 - https://codesandbox.io/s/w62x3472k7

提及列表和表情符号顶部位置 (Draft.js)

Mention list and emoji top position (Draft.js)

emoji

reactjs

mention

draftjs

draft-js-plugins