diff --git a/client/web/decs.d.ts b/client/web/decs.d.ts new file mode 100644 index 00000000000..81e33cd7ef9 --- /dev/null +++ b/client/web/decs.d.ts @@ -0,0 +1 @@ +declare module 'react-mentions-fix'; diff --git a/client/web/package.json b/client/web/package.json index 5ac7526efc6..ebbe4c8375f 100644 --- a/client/web/package.json +++ b/client/web/package.json @@ -64,7 +64,7 @@ "react-helmet": "^6.1.0", "react-is": "^18.2.0", "react-markdown": "^8.0.5", - "react-mentions": "^4.4.7", + "react-mentions-fix": "4.4.11", "react-router": "^6.8.1", "react-router-dom": "^6.8.1", "react-split": "^2.0.14", @@ -104,7 +104,6 @@ "@types/react": "18.0.20", "@types/react-dom": "18.0.6", "@types/react-helmet": "^6.1.6", - "@types/react-mentions": "^4.1.8", "@types/react-router": "^5.1.20", "@types/react-router-dom": "^5.3.3", "@types/react-transition-group": "^4.4.5", diff --git a/client/web/src/components/ChatBox/ChatInputBox/input.tsx b/client/web/src/components/ChatBox/ChatInputBox/input.tsx index ee65d8faef6..3361820ef4c 100644 --- a/client/web/src/components/ChatBox/ChatInputBox/input.tsx +++ b/client/web/src/components/ChatBox/ChatInputBox/input.tsx @@ -2,7 +2,7 @@ import { UserListItem } from '@/components/UserListItem'; import { getMessageTextDecorators, useGroupIdContext } from '@/plugin/common'; import { stopPropagation } from '@/utils/dom-helper'; import React from 'react'; -import { Mention, MentionsInput } from 'react-mentions'; +import { Mention, MentionsInput } from 'react-mentions-fix'; import { getGroupConfigWithInfo, t, useGroupInfo } from 'tailchat-shared'; import { useChatInputMentionsContext } from './context'; import { MentionCommandItem } from './MentionCommandItem'; @@ -46,7 +46,7 @@ export const ChatInputBoxInput: React.FC = React.memo( style={defaultChatInputBoxInputStyle} maxLength={1000} value={props.value} - onChange={(e, newValue, _, mentions) => + onChange={(e: any, newValue: string, _: any, mentions: any[]) => props.onChange( newValue, mentions.filter((m) => m.display.startsWith('@')).map((m) => m.id) // 仅处理mention的数据进行记录 @@ -61,14 +61,14 @@ export const ChatInputBoxInput: React.FC = React.memo( + (query: any) => (users ?? []) .filter((u) => u.display?.includes(query)) .slice(0, 20) // max display 20 item at most } - displayTransform={(id, display) => `@${display}`} + displayTransform={(id: any, display: any) => `@${display}`} appendSpaceOnAdd={true} - renderSuggestion={(suggestion) => ( + renderSuggestion={(suggestion: { id: any }) => ( = React.memo( `#${display}`} + displayTransform={(id: any, display: any) => `#${display}`} appendSpaceOnAdd={true} - renderSuggestion={(suggestion) => ( + renderSuggestion={(suggestion: { display: any; id: any }) => ( =4.8.2'} peerDependencies: acorn: ^6 || ^7 || ^8 + peerDependenciesMeta: + acorn: + optional: true dependencies: acorn: 8.8.2 acorn-private-class-elements: 0.2.7(acorn@8.8.2) @@ -13371,6 +13365,9 @@ packages: deprecated: This is probably built in to whatever tool you're using. If you still need it... idk peerDependencies: acorn: ^6.0.0 + peerDependenciesMeta: + acorn: + optional: true dependencies: acorn: 8.8.2 dev: true @@ -13386,6 +13383,9 @@ packages: resolution: {integrity: sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==} peerDependencies: acorn: ^8 + peerDependenciesMeta: + acorn: + optional: true dependencies: acorn: 8.8.2 @@ -13393,6 +13393,9 @@ packages: resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} peerDependencies: acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 + peerDependenciesMeta: + acorn: + optional: true dependencies: acorn: 7.4.1 dev: true @@ -13401,6 +13404,9 @@ packages: resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} peerDependencies: acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 + peerDependenciesMeta: + acorn: + optional: true dependencies: acorn: 8.8.2 @@ -13417,6 +13423,9 @@ packages: engines: {node: '>=4.8.2'} peerDependencies: acorn: ^6.1.0 || ^7 || ^8 + peerDependenciesMeta: + acorn: + optional: true dependencies: acorn: 8.8.2 dev: true @@ -13426,6 +13435,9 @@ packages: engines: {node: '>=4.8.2'} peerDependencies: acorn: ^6 || ^7 || ^8 + peerDependenciesMeta: + acorn: + optional: true dependencies: acorn: 8.8.2 acorn-private-class-elements: 0.2.7(acorn@8.8.2) @@ -13436,6 +13448,9 @@ packages: engines: {node: '>=4.8.2'} peerDependencies: acorn: ^7.4 || ^8 + peerDependenciesMeta: + acorn: + optional: true dependencies: acorn: 8.8.2 acorn-class-fields: 0.3.7(acorn@8.8.2) @@ -13448,6 +13463,9 @@ packages: engines: {node: '>=4.8.2'} peerDependencies: acorn: ^6.1.0 || ^7 || ^8 + peerDependenciesMeta: + acorn: + optional: true dependencies: acorn: 8.8.2 acorn-private-class-elements: 0.2.7(acorn@8.8.2) @@ -24799,6 +24817,9 @@ packages: engines: {node: '>= 8.x.x'} peerDependencies: moleculer: ^0.12.0 || ^0.13.0 || ^0.14.0 + peerDependenciesMeta: + moleculer: + optional: true dependencies: '@seald-io/nedb': 3.1.0 bluebird: 3.7.2 @@ -29360,8 +29381,8 @@ packages: - supports-color dev: false - /react-mentions@4.4.7(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-VNriu2h/uOB+RS0mwZgPG2Vf+UtdDvRh5zbXa2TNc1WqacKuNDgTdhlbo9LEOZRBxRzIeTUYQmYJ7p9M9rDHqQ==} + /react-mentions-fix@4.4.11(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-RaPtSNIJYLOGyebeXaIV3RmYF+x86Y7SuUHv7J9G/nIxnDbE6MJEpOJLLgR0FR0JP972L748t/XUevRlVRHsMw==} peerDependencies: react: '>=16.8.3' react-dom: '>=16.8.3'