0

我正在使用@draft-js-plugins/emoji，但在将表情符号弹出框定位在编辑器顶部时遇到问题。目前它像这样显示在底部我想在顶部而不是底部显示这个弹出窗口。

在此处输入图像描述

我在这里找到了答案，但它对我不起作用。

const {
    MentionSuggestions,
    EmojiSuggestions,
    EmojiSelect,
    plugins,
  } = useMemo(() => {
    const mentionPlugin = createMentionPlugin();
    // eslint-disable-next-line no-shadow
    const { MentionSuggestions } = mentionPlugin;

    const emojiPlugin = createEmojiPlugin({
      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)',
          position: 'fixed',
        };
      },
      useNativeArt: true,
    });
    // eslint-disable-next-line no-shadow
    const { EmojiSuggestions, EmojiSelect } = emojiPlugin;

    // eslint-disable-next-line no-shadow
    const plugins = [mentionPlugin, emojiPlugin];
    return {
      plugins,
      MentionSuggestions,
      EmojiSuggestions,
      EmojiSelect,
    };
  }, []);

<div className="flex w-100 items-center">
    <div
      className={`${editorStyles.editor} flex w-100 pa2`}
      onClick={() => {
        ref.current!.focus();
      }}
    >
      <Editor
        editorKey={'editor'}
        editorState={editorState}
        handleKeyCommand={(cmd) => handleKeyCommand(cmd)}
        keyBindingFn={myKeyBindingFn}
        onChange={onChange}
        plugins={plugins}
        ref={ref}
        placeholder="Type your message and hit ENTER to send"
      />
      <MentionSuggestions
        open={open}
        onOpenChange={onOpenChange}
        suggestions={suggestions}
        onSearchChange={onSearchChange}
        onAddMention={() => {
          // get the mention object selected
        }}
      />
      <EmojiSuggestions />
    </div>
    <div style={{ margin: '0 .5rem' }}>
      <EmojiSelect closeOnEmojiSelect />
    </div>
    <SendIcon
      className="pointer"
      style={{ color: '#3F61C5', margin: '0 .5rem' }}
      onClick={handleSend}
    />
  </div>

我还检查了元素，我在 positionSuggestions 中写的 css 不存在。有什么办法可以把这个弹出框放在上面吗？

4

1 回答 1

1

我有同样的问题，我已经使用 CSS 选项解决了它。

  1. 在您的项目中创建此文件的副本：https ://github.com/draft-js-plugins/draft-js-plugins/blob/master/packages/emoji/src/theme.ts
  2. 查找emojiSelectPopover类并将其替换为以下内容：
emojiSelectPopover: css`
    padding: 0 0.3em;
    position: absolute;
    z-index: 1000;
    box-sizing: content-box;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 30px 0 gainsboro;
    transform: scale(1) translateY(-100%);
    transform-origin: 1em 0% 0px;
    top: 65%;
    @media (min-width: 320px) and (max-width: 480px) {
      right: 0;
      top: 50%;
    }
  1. 在配置中使用您的自定义主题文件（您在 #1 中创建的）：
const emojiPlugin = createEmojiPlugin({
    selectButtonContent: '',
    theme: defaultTheme // This should be imported from your created theme file
  });

对于您的场景，您需要移动right: 0;到媒体查询之外，因为您的表情符号按钮靠近浏览器的右侧。

于 2021-06-20T20:16:31.700 回答