Mention Plugin suggestion select should allow custom positioning

[gaelbonjour]

Hi,

We encounter a use case where the Slate editable is near the bottom right corner of the page.
Having the suggestion select position hardcoded to be bellow the typed @mention and having its width defined by the longest matching mentionable causes it to be not readable or causes layout / scroll issues.

It would be best to have its position relative to the target slate range (or relative to the whole slate editable) be user defined or computed based on available space bellow / above.

[gaelbonjour]

Hi,

I found a nice workarround, so i guess it may help others.

Instead of using the provided MentionSelect component, you may create your own based on MUI Popper to benefit from the placement figuring automatically if there is room for the Suggested mentionnee to be displayed within the view port.

const { onAddMention, onChangeMention, onKeyDownMention, search, index, target, values } = useMention(
    mentionables.current || [],
    {
      maxSuggestions: 10,
      trigger: '@',
    },
  );

  React.useEffect(() => {
    console.log('setting anchorEL', target);
    if (!target) {
      setAnchorEl(null);
      return;
    }
    const domRange = ReactEditor.toDOMRange(editor.current, target);
    setAnchorEl(domRange.startContainer.parentElement);
  }, [target]);

const addMentionAndClosePopper = React.useCallback(
    (editor: Editor, user: MentionNodeData) => {
      onAddMention(editor, user);
      setAnchorEl(null);
    },
    [setAnchorEl, onAddMention],
  );

  if (!mentionables) return null;

  return (
    <Styled>
      <Slate
        editor={editor.current}
        value={value}
        onChange={(newValue) => {
          setValue(newValue as SlateDocument);

          onChangeMention(editor.current);
        }}
      >
        <EditablePlugins
          className="input"
          plugins={plugins}
          placeholder={placeholder}
          contentEditable
          onKeyDown={[onKeyDownMention]}
          onKeyDownDeps={[index, search, target]}
        />
        <Popper
          placement="bottom-start"
          anchorEl={anchorEl}
          open={!!anchorEl}
          modifiers={{
            flip: {
              enabled: true,
            },
            preventOverflow: {
              enabled: true,
              boundariesElement: 'viewport',
            },
            arrow: {
              enabled: false,
            },
          }}
        >
          <Paper>
            {values.map((user, userIndex) => (
              <MenuItem
                key={user.value}
                value={user.value}
                onClick={getPreventDefaultHandler(addMentionAndClosePopper, editor.current, user)}
                selected={userIndex === index}
              >
                {renderLabel(user)}
              </MenuItem>
            ))}
          </Paper>
        </Popper>
      </Slate>
    </Styled>
  );