feat: support mention

packages/client/package.json

@@ -35,6 +35,7 @@
     "@tiptap/extension-italic": "^2.0.0-beta.25",
     "@tiptap/extension-link": "^2.0.0-beta.36",
     "@tiptap/extension-list-item": "^2.0.0-beta.20",
+    "@tiptap/extension-mention": "^2.0.0-beta.95",
     "@tiptap/extension-ordered-list": "^2.0.0-beta.27",
     "@tiptap/extension-paragraph": "^2.0.0-beta.23",
     "@tiptap/extension-placeholder": "^2.0.0-beta.47",

packages/client/src/components/document/editor/editor.tsx

@@ -1,4 +1,5 @@
-import React, { useMemo, useEffect, useState } from 'react';
+import Router from 'next/router';
+import React, { useMemo, useEffect, useState, useRef } from 'react';
 import cls from 'classnames';
 import { useEditor, EditorContent } from '@tiptap/react';
 import { BackTop } from '@douyinfe/semi-ui';
@@ -17,10 +18,13 @@ import {
   getIndexdbProvider,
   destoryIndexdbProvider,
 } from 'tiptap';
+import { findMentions } from 'tiptap/utils/find-mention';
+import { useCollaborationDocument } from 'data/document';
 import { DataRender } from 'components/data-render';
 import { Banner } from 'components/banner';
 import { debounce } from 'helpers/debounce';
 import { event, triggerChangeDocumentTitle, triggerJoinUser, USE_DOCUMENT_VERSION } from 'event';
+import { DocumentUserSetting } from './users';
 import styles from './index.module.scss';
 
 interface IProps {
@@ -31,8 +35,10 @@ interface IProps {
   style: React.CSSProperties;
 }
 
-export const Editor: React.FC<IProps> = ({ user, documentId, authority, className, style }) => {
-  if (!user) return null;
+export const Editor: React.FC<IProps> = ({ user: currentUser, documentId, authority, className, style }) => {
+  if (!currentUser) return null;
+  const $hasShowUserSettingModal = useRef(false);
+  const { users, addUser, updateUser } = useCollaborationDocument(documentId);
   const [status, setStatus] = useState<ProviderStatus>('connecting');
   const { online } = useNetwork();
   const [loading, toggleLoading] = useToggle(true);
@@ -40,9 +46,9 @@ export const Editor: React.FC<IProps> = ({ user, documentId, authority, classNam
   const provider = useMemo(() => {
     return getProvider({
       targetId: documentId,
-      token: user.token,
+      token: currentUser.token,
       cacheType: 'EDITOR',
-      user,
+      user: currentUser,
       docType: 'document',
       events: {
         onAwarenessUpdate({ states }) {
@@ -57,15 +63,14 @@ export const Editor: React.FC<IProps> = ({ user, documentId, authority, classNam
         },
       },
     });
-  }, [documentId, user.token]);
-
+  }, [documentId, currentUser.token]);
   const editor = useEditor({
     editable: authority && authority.editable,
     extensions: [
       ...BaseKit,
       DocumentWithTitle,
       getCollaborationExtension(provider),
-      getCollaborationCursorExtension(provider, user),
+      getCollaborationCursorExtension(provider, currentUser),
     ],
     onTransaction: debounce(({ transaction }) => {
       try {
@@ -74,6 +79,8 @@ export const Editor: React.FC<IProps> = ({ user, documentId, authority, classNam
       } catch (e) {}
     }, 50),
   });
+  const [mentionUsersSettingVisible, toggleMentionUsersSettingVisible] = useToggle(false);
+  const [mentionUsers, setMentionUsers] = useState([]);
 
   useEffect(() => {
     const indexdbProvider = getIndexdbProvider(documentId, provider.document);
@@ -96,11 +103,61 @@ export const Editor: React.FC<IProps> = ({ user, documentId, authority, classNam
     if (!editor) return;
     const handler = (data) => editor.commands.setContent(data);
     event.on(USE_DOCUMENT_VERSION, handler);
+
     return () => {
       event.off(USE_DOCUMENT_VERSION, handler);
     };
   }, [editor]);
 
+  useEffect(() => {
+    if (!editor) return;
+
+    const handler = () => {
+      // 已经拦截过一次，不再拦截
+      if ($hasShowUserSettingModal.current) return;
+
+      const mentionUsers = findMentions(editor);
+      if (!mentionUsers || !mentionUsers.length) return;
+
+      const currentUserAuth = users.find((user) => {
+        return user.user.name === currentUser.name;
+      });
+      const isCurrentUserCreateUser = currentUserAuth.auth.createUserId === currentUser.id;
+
+      if (!isCurrentUserCreateUser) {
+        return;
+      }
+
+      const data = Array.from(new Set(mentionUsers))
+        .filter((userName) => {
+          const exist = users.find((user) => {
+            return user.user.name === userName;
+          });
+          if (!exist || !exist.auth.readable) return true;
+          return false;
+        })
+        .filter(Boolean);
+
+      if (!data.length) return;
+
+      setMentionUsers(data);
+      toggleMentionUsersSettingVisible(true);
+      $hasShowUserSettingModal.current = true;
+      // ignore-me
+      const newErr = new Error('请完成权限操作后关闭页面');
+      throw newErr;
+    };
+
+    Router.events.on('routeChangeStart', handler);
+    window.addEventListener('unload', handler);
+
+    return () => {
+      $hasShowUserSettingModal.current = false;
+      Router.events.off('routeChangeStart', handler);
+      window.removeEventListener('unload', handler);
+    };
+  }, [editor, users, currentUser]);
+
   return (
     <DataRender
       loading={loading}
@@ -125,6 +182,14 @@ export const Editor: React.FC<IProps> = ({ user, documentId, authority, classNam
               </div>
               <BackTop target={() => document.querySelector('#js-template-editor-container')} />
             </main>
+            <DocumentUserSetting
+              visible={mentionUsersSettingVisible}
+              toggleVisible={toggleMentionUsersSettingVisible}
+              mentionUsers={mentionUsers}
+              users={users}
+              addUser={addUser}
+              updateUser={updateUser}
+            />
           </div>
         );
       }}

packages/client/src/components/document/editor/users.tsx

@@ -0,0 +1,93 @@
+import React, { useMemo } from 'react';
+import { Modal, Typography, Table, Checkbox } from '@douyinfe/semi-ui';
+import { IAuthority, IUser } from '@think/domains';
+import { DocAuth } from 'data/document';
+
+interface IProps {
+  visible: boolean;
+  toggleVisible: (arg: boolean) => void;
+  mentionUsers: string[];
+  users: Array<{ user: IUser; auth: IAuthority }>;
+  addUser: (auth: DocAuth) => Promise<unknown>;
+  updateUser: (auth: DocAuth) => Promise<unknown>;
+}
+
+const { Text } = Typography;
+const { Column } = Table;
+
+const renderChecked = (onChange, authKey: 'readable' | 'editable') => (checked, data) => {
+  const handle = (evt) => {
+    const ret = {
+      ...data,
+    };
+    ret[authKey] = evt.target.checked;
+    onChange(ret);
+  };
+  return <Checkbox style={{ display: 'inline-block' }} checked={checked} onChange={handle} />;
+};
+
+export const DocumentUserSetting: React.FC<IProps> = ({
+  visible,
+  toggleVisible,
+  mentionUsers,
+  users,
+  addUser,
+  updateUser,
+}) => {
+  const renderUsers = useMemo(() => {
+    return mentionUsers
+      .map((mentionUser) => {
+        const exist = users.find((user) => {
+          return user.user.name === mentionUser;
+        });
+
+        if (!exist) return { userName: mentionUser, readable: false, editable: false, shouldAddToDocument: true };
+
+        return {
+          userName: mentionUser,
+          readable: exist.auth.readable,
+          editable: exist.auth.editable,
+          shouldAddToDocument: false,
+        };
+      })
+      .filter(Boolean);
+  }, [users, mentionUsers]);
+
+  const handler = async (data) => {
+    if (data.shouldAddToDocument) {
+      await addUser(data.userName);
+    }
+
+    await updateUser(data);
+  };
+
+  return (
+    <Modal
+      title={'权限操作'}
+      visible={visible}
+      onCancel={() => toggleVisible(false)}
+      maskClosable={false}
+      style={{ maxWidth: '96vw' }}
+      footer={null}
+    >
+      <Text>您在该文档中 @ 了以下用户，请为他们操作权限，否则他们无法阅读该文档。</Text>
+      <Table style={{ margin: '24px 0' }} dataSource={renderUsers} size="small" pagination>
+        <Column title="用户名" dataIndex="userName" key="name" />
+        <Column
+          title="是否可读"
+          dataIndex="readable"
+          key="readable"
+          render={renderChecked(handler, 'readable')}
+          align="center"
+        />
+        <Column
+          title="是否可编辑"
+          dataIndex="editable"
+          key="editable"
+          render={renderChecked(handler, 'editable')}
+          align="center"
+        />
+      </Table>
+    </Modal>
+  );
+};

packages/client/src/data/document.ts

@@ -1,18 +1,10 @@
-import type { IUser, IDocument, IWiki } from '@think/domains';
+import type { IUser, IDocument, IWiki, IAuthority } from '@think/domains';
 import useSWR from 'swr';
 import { useState, useCallback, useEffect } from 'react';
 import { useAsyncLoading } from 'hooks/use-async-loading';
 import { HttpClient } from 'services/http-client';
 import { getPublicDocumentDetail } from 'services/document';
 
-interface IAuthority {
-  id: string;
-  documentId: string;
-  userId: string;
-  readable: boolean;
-  editable: boolean;
-}
-
 type ICreateDocument = Partial<Pick<IDocument, 'wikiId' | 'parentDocumentId'>>;
 type IDocumentWithAuth = { document: IDocument; authority: IAuthority };
 type IUpdateDocument = Partial<Pick<IDocument, 'title' | 'content'>>;
@@ -171,13 +163,18 @@ export const usePublicDocument = (documentId: string) => {
   };
 };
 
+export type DocAuth = {
+  userName: string;
+  readable?: boolean;
+  editable?: boolean;
+};
 /**
  * 协作文档
  * @param documentId
  * @returns
  */
 export const useCollaborationDocument = (documentId) => {
-  const { data, error, mutate } = useSWR<Array<IAuthority & IUser>>(
+  const { data, error, mutate } = useSWR<Array<{ user: IUser; auth: IAuthority }>>(
     `/document/user/${documentId}`,
     (url) => HttpClient.get(url),
     { shouldRetryOnError: false }
@@ -195,7 +192,7 @@ export const useCollaborationDocument = (documentId) => {
     return ret;
   };
 
-  const updateUser = async (docAuth) => {
+  const updateUser = async (docAuth: DocAuth) => {
     const ret = await HttpClient.post(`/document/user/${documentId}/update`, {
       documentId,
       ...docAuth,
@@ -204,7 +201,7 @@ export const useCollaborationDocument = (documentId) => {
     return ret;
   };
 
-  const deleteUser = async (docAuth) => {
+  const deleteUser = async (docAuth: DocAuth) => {
     const ret = await HttpClient.post(`/document/user/${documentId}/delete`, {
       documentId,
       ...docAuth,

packages/client/src/data/user.tsx

@@ -7,7 +7,7 @@ import { getStorage, setStorage } from 'helpers/storage';
 
 export const useUser = () => {
   const router = useRouter();
-  const { data, error, mutate } = useSWR('user', getStorage);
+  const { data, error, mutate } = useSWR<ILoginUser>('user', getStorage);
 
   const logout = useCallback(() => {
     window.localStorage.removeItem('user');
@@ -29,7 +29,7 @@ export const useUser = () => {
 
   const updateUser = async (patch: Pick<IUser, 'email' | 'avatar'>) => {
     const res = await HttpClient.patch('/user/update', patch);
-    const ret = { ...data, ...res } as unknown as IUser;
+    const ret = { ...data, ...res } as unknown as ILoginUser;
     setStorage('user', JSON.stringify(ret));
     mutate(ret);
   };

packages/client/src/services/user.ts

@@ -1,6 +1,10 @@
-import type { IUser } from '@think/domains';
+import type { IPagination, IUser } from '@think/domains';
 import { HttpClient } from './http-client';
 
 export const register = (data: Partial<IUser>): Promise<IUser> => {
   return HttpClient.post('/user/register', data);
 };
+
+export const getUsers = (): Promise<IUser[]> => {
+  return HttpClient.get('/user');
+};

packages/client/src/tiptap/extensions/mention.ts

@@ -0,0 +1,95 @@
+import BulitInMention from '@tiptap/extension-mention';
+import { ReactRenderer } from '@tiptap/react';
+import tippy from 'tippy.js';
+import { getUsers } from 'services/user';
+import { MentionList } from '../wrappers/mention-list';
+
+const suggestion = {
+  items: async ({ query }) => {
+    const res = await getUsers();
+    const data = res.map((item) => item.name);
+    return data.filter((item) => item.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5);
+  },
+
+  render: () => {
+    let component;
+    let popup;
+
+    return {
+      onStart: (props) => {
+        component = new ReactRenderer(MentionList, {
+          props,
+          editor: props.editor,
+        });
+
+        popup = tippy('body', {
+          getReferenceClientRect: props.clientRect,
+          appendTo: () => document.body,
+          content: component.element,
+          showOnCreate: true,
+          interactive: true,
+          trigger: 'manual',
+          placement: 'bottom-start',
+        });
+      },
+
+      onUpdate(props) {
+        component.updateProps(props);
+
+        popup[0].setProps({
+          getReferenceClientRect: props.clientRect,
+        });
+      },
+
+      onKeyDown(props) {
+        if (props.event.key === 'Escape') {
+          popup[0].hide();
+
+          return true;
+        }
+
+        return component.ref?.onKeyDown(props);
+      },
+
+      onExit() {
+        popup[0].destroy();
+        component.destroy();
+      },
+    };
+  },
+
+  command: ({ editor, range, props }) => {
+    // increase range.to by one when the next node is of type "text"
+    // and starts with a space character
+    const nodeAfter = editor.view.state.selection.$to.nodeAfter;
+    const overrideSpace = nodeAfter?.text?.startsWith(' ');
+
+    if (overrideSpace) {
+      range.to += 1;
+    }
+
+    console.log('mention', props);
+
+    editor
+      .chain()
+      .focus()
+      .insertContentAt(range, [
+        {
+          type: BulitInMention.name,
+          attrs: props,
+        },
+        {
+          type: 'text',
+          text: ' ',
+        },
+      ])
+      .run();
+  },
+};
+
+export const Mention = BulitInMention.configure({
+  HTMLAttributes: {
+    class: 'mention',
+  },
+  suggestion,
+});

packages/client/src/tiptap/start-kit.tsx

@@ -28,6 +28,7 @@ import { Katex } from './extensions/katex';
 import { Link } from './extensions/link';
 import { ListItem } from './extensions/listItem';
 import { Loading } from './extensions/loading';
+import { Mention } from './extensions/mention';
 import { Mind } from './extensions/mind';
 import { OrderedList } from './extensions/ordered-list';
 import { Paragraph } from './extensions/paragraph';
@@ -84,6 +85,7 @@ export const BaseKit = [
   Link,
   ListItem,
   Loading,
+  Mention,
   Mind,
   OrderedList,
   Paragraph,
@@ -132,6 +134,7 @@ export const CommentKit = [
   Katex,
   Link,
   ListItem,
+  Mention,
   OrderedList,
   Paragraph,
   Placeholder,

packages/client/src/tiptap/styles/index.scss

@@ -5,6 +5,7 @@
 @import './heading.scss';
 @import './katex.scss';
 @import './list.scss';
+@import './mention.scss';
 @import './menu.scss';
 @import './mind.scss';
 @import './placeholder.scss';

packages/client/src/tiptap/styles/mention.scss

@@ -0,0 +1,7 @@
+.mention {
+  color: #fff;
+  padding: 2px 6px;
+  background-color: var(--semi-color-primary);
+  border: 1px solid var(--semi-color-border);
+  border-radius: 999em;
+}

packages/client/src/tiptap/utils/find-mention.ts

@@ -0,0 +1,22 @@
+import { Editor } from '@tiptap/core';
+import { Mention } from '../extensions/mention';
+
+export const findMentions = (editor: Editor) => {
+  const content = editor.getJSON();
+  const queue = [content];
+  const res = [];
+
+  while (queue.length) {
+    const node = queue.shift();
+
+    if (node.type === Mention.name) {
+      res.push(node.attrs.id);
+    }
+
+    if (node.content && node.content.length) {
+      queue.push(...node.content);
+    }
+  }
+
+  return res;
+};

packages/client/src/tiptap/wrappers/mention-list/index.module.scss

@@ -0,0 +1,42 @@
+.items {
+  width: 200px;
+  max-height: 380px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: var(--semi-color-bg-0);
+  border-radius: var(--border-radius);
+  box-shadow: rgb(9 30 66 / 31%) 0 0 1px, rgb(9 30 66 / 25%) 0 4px 8px -2px;
+}
+
+.item {
+  display: flex;
+  width: 100%;
+  padding: 12px 12px 11px;
+  color: rgb(9 30 66);
+  text-decoration: none;
+  cursor: pointer;
+  background-color: rgb(255 255 255);
+  border: 0;
+  border-radius: 0;
+  outline: 0;
+  flex: 0 0 auto;
+  align-items: center;
+  box-sizing: border-box;
+  fill: rgb(255 255 255);
+
+  &:hover {
+    background-color: #f4f5f7;
+  }
+
+  &.is-selected {
+    color: rgb(0 82 204);
+    text-decoration: none;
+    background-color: rgb(222 235 255);
+    fill: rgb(222 235 255);
+  }
+
+  img {
+    width: 1em;
+    height: 1em;
+  }
+}

packages/client/src/tiptap/wrappers/mention-list/index.tsx

@@ -0,0 +1,137 @@
+import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
+import { Modal, Typography } from '@douyinfe/semi-ui';
+import { useRouter } from 'next/router';
+import { Editor } from '@tiptap/core';
+import cls from 'classnames';
+import scrollIntoView from 'scroll-into-view-if-needed';
+import { useUser } from 'data/user';
+import { useCollaborationDocument } from 'data/document';
+import styles from './index.module.scss';
+
+interface IProps {
+  editor: Editor;
+  items: Array<string>;
+  command: any;
+}
+
+const { Title, Text } = Typography;
+
+export const MentionList: React.FC<IProps> = forwardRef((props, ref) => {
+  const $container = useRef<HTMLDivElement>();
+  const router = useRouter();
+  const { user: currentUser } = useUser();
+  const { users, addUser, updateUser } = useCollaborationDocument(router.query.documentId);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const selectItem = (index) => {
+    const userName = props.items[index];
+    if (!userName) return;
+    props.command({ id: userName });
+
+    // const currentUserAuth = users.find((user) => {
+    //   return user.user.name === currentUser.name;
+    // });
+    // const isCurrentUserCreateUser = currentUserAuth.auth.createUserId === currentUser.id;
+
+    // const target = users.find((user) => {
+    //   return user.user.name === userName;
+    // });
+
+    // if (isCurrentUserCreateUser) {
+    //   if (!target) {
+    //     Modal.confirm({
+    //       title: <Title heading={5}>权限操作</Title>,
+    //       content: <Text>当前用户尚未加入该文档，是否添加他？</Text>,
+    //       onCancel: () => {},
+    //       onOk: async () => {
+    //         addUser(userName).then((res) => {
+    //           console.log('用户已经添加', res);
+    //           props.command({ id: userName });
+    //         });
+    //       },
+    //     });
+    //   } else {
+    //     if (!target.auth.readable) {
+    //       Modal.confirm({
+    //         title: <Title heading={5}>权限操作</Title>,
+    //         content: <Text>当前用户无法阅读该文档，是否添加阅读权限？</Text>,
+    //         onCancel: () => {},
+    //         onOk: async () => {
+    //           updateUser({
+    //             userName,
+    //             readable: true,
+    //             editable: target.auth.editable,
+    //           }).then((res) => {
+    //             props.command({ id: userName });
+    //           });
+    //         },
+    //       });
+    //     } else {
+    //       props.command({ id: userName });
+    //     }
+    //   }
+    // } else {
+    // }
+  };
+
+  const upHandler = () => {
+    setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+  };
+
+  const downHandler = () => {
+    setSelectedIndex((selectedIndex + 1) % props.items.length);
+  };
+
+  const enterHandler = () => {
+    selectItem(selectedIndex);
+  };
+
+  useEffect(() => setSelectedIndex(0), [props.items]);
+
+  useEffect(() => {
+    if (Number.isNaN(selectedIndex + 1)) return;
+    const el = $container.current.querySelector(`button:nth-of-type(${selectedIndex + 1})`);
+    el && scrollIntoView(el, { behavior: 'smooth', scrollMode: 'if-needed' });
+  }, [selectedIndex]);
+
+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }) => {
+      if (event.key === 'ArrowUp') {
+        upHandler();
+        return true;
+      }
+
+      if (event.key === 'ArrowDown') {
+        downHandler();
+        return true;
+      }
+
+      if (event.key === 'Enter') {
+        enterHandler();
+        return true;
+      }
+
+      return false;
+    },
+  }));
+
+  return (
+    <div className={styles.items}>
+      <div ref={$container}>
+        {props.items.length ? (
+          props.items.map((item, index) => (
+            <button
+              className={cls(styles.item, index === selectedIndex ? styles['is-selected'] : '')}
+              key={index}
+              onClick={() => selectItem(index)}
+            >
+              {item}
+            </button>
+          ))
+        ) : (
+          <div className={styles.item}>没有找到结果</div>
+        )}
+      </div>
+    </div>
+  );
+});

packages/client/src/tiptap/wrappers/menu-list/index.tsx

@@ -12,7 +12,6 @@ interface IProps {
 
 export const MenuList: React.FC<IProps> = forwardRef((props, ref) => {
   const $container = useRef<HTMLDivElement>();
-  const $image = useRef<HTMLInputElement>();
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   const selectItem = (index) => {
@@ -35,10 +34,6 @@ export const MenuList: React.FC<IProps> = forwardRef((props, ref) => {
     selectItem(selectedIndex);
   };
 
-  const handleSelectImage = function () {
-    console.log('image', this.files);
-  };
-
   useEffect(() => setSelectedIndex(0), [props.items]);
 
   useEffect(() => {

packages/domains/lib/models/document.d.ts

@@ -27,4 +27,5 @@ export interface IAuthority {
     userId: IUser['id'];
     readable: boolean;
     editable: boolean;
+    createUserId: IUser['id'];
 }

packages/domains/src/models/document.ts

@@ -39,4 +39,5 @@ export interface IAuthority {
   userId: IUser['id'];
   readable: boolean;
   editable: boolean;
+  createUserId: IUser['id'];
 }

packages/server/src/controllers/user.controller.ts

@@ -7,6 +7,7 @@ import {
   Request,
   UseGuards,
   UseInterceptors,
+  Get,
   Patch,
   ClassSerializerInterceptor,
 } from '@nestjs/common';
@@ -42,4 +43,12 @@ export class UserController {
   async updateUser(@Request() req, @Body() dto: UpdateUserDto) {
     return await this.userService.updateUser(req.user, dto);
   }
+
+  @UseInterceptors(ClassSerializerInterceptor)
+  @Get('/')
+  @HttpCode(HttpStatus.OK)
+  @UseGuards(JwtGuard)
+  async getUsers() {
+    return this.userService.getUsers();
+  }
 }

packages/server/src/services/user.service.ts

@@ -149,4 +149,15 @@ export class UserService {
     const user = this.jwtService.decode(token) as UserEntity;
     return user;
   }
+
+  /**
+   * 获取用户列表
+   * @param pagination
+   * @returns
+   */
+  async getUsers() {
+    const query = this.userRepo.createQueryBuilder('user');
+    const [data] = await query.getManyAndCount();
+    return data;
+  }
 }

pnpm-lock.yaml

@@ -61,6 +61,7 @@ importers:
       '@tiptap/extension-italic': ^2.0.0-beta.25
       '@tiptap/extension-link': ^2.0.0-beta.36
       '@tiptap/extension-list-item': ^2.0.0-beta.20
+      '@tiptap/extension-mention': ^2.0.0-beta.95
       '@tiptap/extension-ordered-list': ^2.0.0-beta.27
       '@tiptap/extension-paragraph': ^2.0.0-beta.23
       '@tiptap/extension-placeholder': ^2.0.0-beta.47
@@ -143,6 +144,7 @@ importers:
       '@tiptap/extension-italic': 2.0.0-beta.25_@tiptap+core@2.0.0-beta.171
       '@tiptap/extension-link': 2.0.0-beta.36_@tiptap+core@2.0.0-beta.171
       '@tiptap/extension-list-item': 2.0.0-beta.20_@tiptap+core@2.0.0-beta.171
+      '@tiptap/extension-mention': 2.0.0-beta.95_@tiptap+core@2.0.0-beta.171
       '@tiptap/extension-ordered-list': 2.0.0-beta.27_@tiptap+core@2.0.0-beta.171
       '@tiptap/extension-paragraph': 2.0.0-beta.23_@tiptap+core@2.0.0-beta.171
       '@tiptap/extension-placeholder': 2.0.0-beta.47_@tiptap+core@2.0.0-beta.171
@@ -1740,6 +1742,17 @@ packages:
       '@tiptap/core': 2.0.0-beta.171
     dev: false
 
+  /@tiptap/extension-mention/2.0.0-beta.95_@tiptap+core@2.0.0-beta.171:
+    resolution: {integrity: sha512-AiikYJa33APtMI7c6a4EpPhqAYxHHnub5b9hd62zM1peBp2D2aO1dEIL7cB7O2P8EBZ2pu2QN2mFcCbVlSi0Xw==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.1
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.171
+      '@tiptap/suggestion': 2.0.0-beta.90_@tiptap+core@2.0.0-beta.171
+      prosemirror-model: 1.16.1
+      prosemirror-state: 1.3.4
+    dev: false
+
   /@tiptap/extension-ordered-list/2.0.0-beta.27_@tiptap+core@2.0.0-beta.171:
     resolution: {integrity: sha512-apFDeignxdZb3cA3p1HJu0zw1JgJdBYUBz1r7f99qdNybYuk3I/1MPUvlOuOgvIrBB/wydoyVDP+v9F7QN3tfQ==}
     peerDependencies: