Inserting spaces in middle of "mention" (hashtag) breaks oddly

[benjie]

Summary

Highlighting seems to go wrong in the mention extension when inserting spaces in the middle of a mention.

Steps to reproduce

Enter the following into playground, then click in the middle of the "oooo" and press spacebar once, and then again.

{
  "doc": {
    "type": "doc",
    "content": [
      {
        "type": "paragraph",
        "content": [
          {
            "type": "text",
            "text": "sdfsdfsdf #foooooo"
          }
        ]
      }
    ]
  },
  "playground": {
    "m": 1,
    "c": "import { useRemirrorPlayground } from \"@remirror/playground\";\nimport React, { FC } from \"react\";\nimport { MentionExtension } from \"remirror/extension/mention\";\nimport { RemirrorProvider, useManager, useRemirror } from \"remirror/react\";\n\nconst EXTENSIONS = () => [  new MentionExtension({\n    appendText: \" \",\n    matchers: [{ char: \"#\", name: \"tag\" }],\n  }),\n];\n\n/**\n * This component contains the editor and any toolbars/chrome it requires.\n */\nconst SmallEditor: FC = () => {\n  const { getRootProps } = useRemirror();\n\n  return (\n    <div>\n      <div {...getRootProps()} />\n    </div>\n  );\n};\n\nconst SmallEditorContainer = () => {\n  const extensionManager = useManager(EXTENSIONS);\n\n  const { value, onChange } = useRemirrorPlayground(extensionManager); // Delete this line\n\n  return (\n    <RemirrorProvider\n      manager={extensionManager}\n      value={value}\n      onChange={onChange}\n    >\n      <SmallEditor />\n    </RemirrorProvider>\n  );\n};\n\nexport default SmallEditorContainer;\n"
  }
}

Expected results

With square brackets [] representing highlighting (blue):

After one space:
sdfsdfsdf [#fooo] ooo

After two spaces:
sdfsdfsdf [#fooo] ooo

Actual results

After one space:
sdfsdfsdf [#fooo] [oo]o

After two spaces:
sdfsdfsdf #fooo ooo