title: Implement Autocomplete in Draft JS but without a "trigger" like "@"
body: <p>I want to implement something like a tag editor. However, it's meant just for those tags so I want the user to see the autocomplete suggestions popup without having to type something like <em>@</em> or <em>#</em>, just the text itself.</p>
  
  <p>I have something that <em>kinda</em> works, but the popup displays in strange positions on the screen:</p>
  
  <ul>
  <li>when I first type something and the popup appears, it appears somewhere near the top-left corner of the screen</li>
  <li>after the first entity is created, when press <kbd>SPACE</kbd> and start typing again, the popup appears a couple of pixels to the right from it's intuitive position (i.e. under the first letter of the word)</li>
  </ul>
  
  <p>Here is an example of a well-known editor of this kind (although not implemented with Draft), so you can get a better understanding of what I want to implement.</p>
  
  <p><a href="https://i.stack.imgur.com/AW0Od.png" rel="noreferrer"><img src="https://i.stack.imgur.com/AW0Od.png" alt="Gmail email composer"></a></p>
  
  <p>First things first, here is the function that triggers the suggestions popup:</p>
  
  <pre><code>private onChange(editorState: EditorState) {
    const content = editorState.getCurrentContent();
    const selection = editorState.getSelection();
    const currentBlock = content.getBlockForKey(selection.getAnchorKey());
  
    if (selection.isCollapsed()) {
      const blockText = currentBlock.getText();
      const wordMeta = getWordAt(blockText, selection.getAnchorOffset());
      const categoryRegex = /([\w]*)/;
      const matches = wordMeta.word.match(categoryRegex);
      const existingEntity = currentBlock.getEntityAt(wordMeta.begin);
  
      if (!existingEntity &amp;&amp; matches) {
        const categorySearch = matches[1];
        const selection = window.getSelection();
        if (this.state.autoComplete.search !== categorySearch &amp;&amp; selection.rangeCount &gt; 0) {
          const range = selection.getRangeAt(0);
          const boundingRect = getRangeBoundingClientRect(range);
  
          this.setState((prevState: StateType) =&gt; {
            let state = {
              autoComplete: {
                active: true,
                search: categorySearch,
                searchMeta: {
                  begin: wordMeta.begin,
                  end: wordMeta.end,
                },
              },
              selectionRect: prevState.selectionRect,
            };
  
            if (prevState.autoComplete.active === false) {
              state.selectionRect = boundingRect;
            }
  
            return state;
          });
        }
      }
    }
  
    this.props.onChange(editorState);
  }
  </code></pre>
  
  <p>Here is the <code>getWordAt</code> function:</p>
  
  <pre><code>function getWordAt(text: string, pos: number): WordMeta
  {
    const left = text.slice(0, pos + 1).search(/\S+$/);
    const right = text.slice(pos).search(/\s/);
  
    if (right &lt; 0) {
      return {
        word: text.slice(left),
        begin: left,
        end: text.length,
      };
    }
  
    return {
      word: text.slice(left, right + pos),
      begin: left,
      end: right + pos,
    };
  }
  </code></pre>
  
  <p>What would be a better way of handling the position of the popup and maybe even the strategy for autocompletion of this kind as well? Thank you!</p>