docs: add a story about how to use mention with Chinese characters (r…

…emirror#1219)
sandzone · Sep 7, 2021 · 7cba6fb · 7cba6fb
1 parent 748f947
commit 7cba6fb
Showing 1 changed file with 46 additions and 12 deletions.
diff --git a/packages/storybook-react/stories/react-hooks/use-mention.stories.tsx b/packages/storybook-react/stories/react-hooks/use-mention.stories.tsx
@@ -12,15 +12,7 @@ import { FloatingWrapper, Remirror, ThemeProvider, useMention, useRemirror } fro
 
 export default { title: 'React Hooks / useMention' };
 
-const ALL_USERS = [
-  { id: 'joe', label: 'Joe' },
-  { id: 'sue', label: 'Sue' },
-  { id: 'pat', label: 'Pat' },
-  { id: 'tom', label: 'Tom' },
-  { id: 'jim', label: 'Jim' },
-];
-
-function UserSuggestor() {
+function UserSuggestor({ allUsers }: { allUsers: MentionExtensionAttributes[] }): JSX.Element {
   const [users, setUsers] = useState<MentionExtensionAttributes[]>([]);
   const { state, getMenuProps, getItemProps, indexIsHovered, indexIsSelected } = useMention({
     items: users,
@@ -32,11 +24,12 @@ function UserSuggestor() {
     }
 
     const searchTerm = state.query.full.toLowerCase();
-    const filteredUsers = ALL_USERS.filter((user) => user.label.toLowerCase().includes(searchTerm))
+    const filteredUsers = allUsers
+      .filter((user) => user.label.toLowerCase().includes(searchTerm))
       .sort()
       .slice(0, 5);
     setUsers(filteredUsers);
-  }, [state]);
+  }, [state, allUsers]);
 
   const enabled = !!state;
 
@@ -77,12 +70,53 @@ export const Basic = (): JSX.Element => {
     ],
     [],
   );
+
   const { manager } = useRemirror({ extensions });
 
+  const allUsers = [
+    { id: 'joe', label: 'Joe' },
+    { id: 'sue', label: 'Sue' },
+    { id: 'pat', label: 'Pat' },
+    { id: 'tom', label: 'Tom' },
+    { id: 'jim', label: 'Jim' },
+  ];
+
+  return (
+    <ThemeProvider>
+      <Remirror manager={manager} autoRender='end'>
+        <UserSuggestor allUsers={allUsers} />
+        <ProsemirrorDevTools />
+      </Remirror>
+    </ThemeProvider>
+  );
+};
+
+export const MoreSupportedCharacters = (): JSX.Element => {
+  const extensions = useCallback(
+    () => [
+      new MentionExtension({
+        extraAttributes: { type: 'user' },
+        matchers: [
+          { name: 'at', char: '@', appendText: ' ', matchOffset: 0, supportedCharacters: /\S+/ },
+        ],
+      }),
+      new PlaceholderExtension({ placeholder: `Mention @小` }),
+    ],
+    [],
+  );
+
+  const { manager } = useRemirror({ extensions, stringHandler: 'text' });
+
+  const allUsers = [
+    { id: 'chinese_xiaoming', label: '小明' },
+    { id: 'chinese_xiaohong', label: '小红' },
+    { id: 'chinese_xiaoqiang', label: '小强' },
+  ];
+
   return (
     <ThemeProvider>
       <Remirror manager={manager} autoRender='end'>
-        <UserSuggestor />
+        <UserSuggestor allUsers={allUsers} />
         <ProsemirrorDevTools />
       </Remirror>
     </ThemeProvider>