提及列表和表情符号排名靠前(Draft.js) [英] Mention list and emoji top position (Draft.js)
本文介绍了提及列表和表情符号排名靠前(Draft.js)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
您能帮我把它的位置从下到上改一下吗? 我想要在文本的顶部而不是底部显示提及列表。 表情符号列表也有同样的问题。
推荐答案
可以通过positionSuggestions
配置选项实现。此选项可用于mention
和emoji
插件。
文档摘录:
职位建议
该函数可用于操作包含建议的弹出窗口的位置。它会收到一个 对象作为参数,该参数包含 修饰的搜索字符串,包括@。此外,该对象 包含PrevProps、PrevState、State&;道具。对象应该是 返回的,可以包含各种样式的。定义的属性 将作为内联样式应用。
在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)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文