Fix mention atom dropdown click handling

Fixes #737
remirror · Oct 8, 2020 · 911cc6d · 911cc6d
1 parent 56349ca
commit 911cc6d
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 6 deletions.
diff --git a/.changeset/large-ligers-begin.md b/.changeset/large-ligers-begin.md
@@ -0,0 +1,5 @@
+---
+'@remirror/react-hooks': patch
+---
+
+Fix bug in `useMentionAtom` where asynchronous exits, like clicking, would not trigger an exit. Now the state is manually reset when the command is run.
diff --git a/packages/@remirror/react-hooks/src/__tests__/use-mention-atom.spec.tsx b/packages/@remirror/react-hooks/src/__tests__/use-mention-atom.spec.tsx
@@ -45,6 +45,11 @@ describe('useMentionAtom', () => {
       () => {
         result.state?.command({ ...result.items[0], appendText: NON_BREAKING_SPACE_CHAR });
       },
+    ]);
+
+    expect(result.state?.command).toBeUndefined();
+
+    acts([
       () => {
         editor.insertText('more to come');
       },
@@ -66,6 +71,43 @@ describe('useMentionAtom', () => {
     `);
   });
 
+  it('should correctly add the mention when the command is called in a controlled editor', () => {
+    const { editor, Wrapper, result } = createEditor(true);
+
+    strictRender(<Wrapper />);
+
+    for (const char of '@a') {
+      act(() => {
+        editor.insertText(char);
+      });
+    }
+
+    act(() => {
+      result.state?.command({ ...result.items[0], appendText: NON_BREAKING_SPACE_CHAR });
+    });
+
+    for (const char of 'more to come') {
+      act(() => {
+        editor.insertText(char);
+      });
+    }
+
+    expect(editor.innerHTML).toMatchInlineSnapshot(`
+      <p>
+        Initial content
+        <span role="presentation"
+              href="//test.com/aa"
+              class="mention-atom mention-atom-at"
+              data-mention-atom-id="aa"
+              data-mention-atom-name="at"
+        >
+          @aa
+        </span>
+        &nbsp;more to come
+      </p>
+    `);
+  });
+
   it('should not trap the cursor in the mention', () => {
     const { editor, Wrapper } = createEditor();
 
@@ -227,7 +269,7 @@ describe('useMentionAtom', () => {
 /**
  * This function is used as a helper when testing the mention hooks.
  */
-function createEditor() {
+function createEditor(controlled = false) {
   const manager = createReactManager(() => [
     new MentionAtomExtension({
       extraAttributes: { role: 'presentation', href: { default: null } },
@@ -310,7 +352,25 @@ function createEditor() {
     );
   };
 
-  return { editor, Wrapper, result };
+  const ControlledWrapper: FC<Props> = (props) => {
+    const [state, setState] = useState(() =>
+      manager.createState({ content: doc(p('Initial content ')), selection: 'end' }),
+    );
+    return (
+      <RemirrorProvider
+        manager={manager}
+        value={state}
+        autoRender={true}
+        onChange={(parameter) => {
+          setState(parameter.state);
+        }}
+      >
+        <Component {...props} />
+      </RemirrorProvider>
+    );
+  };
+
+  return { editor, Wrapper: controlled ? ControlledWrapper : Wrapper, result };
 }
 
 function acts(methods: Array<() => void | undefined>) {

diff --git a/packages/@remirror/react-hooks/src/use-mention-atom.ts b/packages/@remirror/react-hooks/src/use-mention-atom.ts
@@ -67,7 +67,18 @@ function useMentionHandlers<Data extends MentionAtomNodeAttributes = MentionAtom
       const index = changeReason === ChangeReason.Move ? currentIndex : 0;
 
       // Reset the active index so that the dropdown is back to the top.
-      setState({ query, range, name, reason: changeReason, text, command, index });
+      setState({
+        query,
+        range,
+        name,
+        reason: changeReason,
+        text,
+        command: (attrs) => {
+          command(attrs);
+          setState(null);
+        },
+        index,
+      });
     },
     [currentIndex, setState],
   );
@@ -99,7 +110,6 @@ function useMentionAtomKeyBindings<
       }
 
       const { index } = state;
-
       const direction = arrowKey === 'down' ? 'next' : 'previous';
 
       const activeIndex = indexFromArrowPress({

diff --git a/support/website/src/pages/playground.tsx b/support/website/src/pages/playground.tsx
@@ -30,8 +30,8 @@ const PlaygroundPage = (props: any) => {
             {/* TODO: Do not assume that it is in english language site */}
             <html lang='en' />
             <script src='https://unpkg.com/@babel/standalone/babel.min.js'></script>
-            <script src='https://unpkg.com/prettier@2.0.5/standalone.js'></script>
-            <script src='https://unpkg.com/prettier@2.0.5/parser-typescript.js'></script>
+            <script src='https://unpkg.com/prettier@2.1.2/standalone.js'></script>
+            <script src='https://unpkg.com/prettier@2.1.2/parser-typescript.js'></script>
             <title>Remirror Playground</title>
             <meta property='og:title' content='Remirror Playground' />
             {favicon ?? <link rel='shortcut icon' href={faviconUrl} />}