diff --git a/src/stories/chat/_types.tsx b/src/stories/chat/_types.tsx index 0b8e9356..294b315b 100644 --- a/src/stories/chat/_types.tsx +++ b/src/stories/chat/_types.tsx @@ -3,7 +3,7 @@ import { BubbleMenuProps, EditorOptions } from "@tiptap/react"; type validationStatus = "success" | "warning" | "error"; -export type SuggestedUser = { id: number; name: string; }; +export type SuggestedUser = { id: number; name: string; email:string }; export interface ChatEditorArgs extends Partial { placeholderOptions?: Partial; diff --git a/src/stories/chat/context/chatContext.tsx b/src/stories/chat/context/chatContext.tsx index 257f6552..08673fc9 100644 --- a/src/stories/chat/context/chatContext.tsx +++ b/src/stories/chat/context/chatContext.tsx @@ -6,7 +6,7 @@ export type ChatContextType = { triggerSave: () => void; editor?: Editor; setEditor: React.Dispatch>; - mentionableUsers: (props: { query: string }) => Promise; + mentionableUsers: (props: { query: string }) => SuggestedUser[]; }; export const ChatContext = createContext(null); @@ -18,7 +18,7 @@ export const ChatContextProvider = ({ }: { onSave?: (editor: Editor, mentions: SuggestedUser[]) => void; children: React.ReactNode; - setMentionableUsers: (props: { query: string }) => Promise; + setMentionableUsers: (props: { query: string }) => SuggestedUser[]; }) => { const [editor, setEditor] = useState(); @@ -31,7 +31,8 @@ export const ChatContextProvider = ({ if (!result.some((r) => r.id === node.attrs.id)) result.push({ id: node.attrs.id, - name: node.attrs.name + name: node.attrs.name, + email: node.attrs.email }); } }); @@ -44,7 +45,7 @@ export const ChatContextProvider = ({ editor, setEditor, triggerSave: () => { - if (editor && onSave) { + if (editor && onSave && !editor.isEmpty) { onSave(editor, getMentions(editor)); editor.commands.clearContent(); } diff --git a/src/stories/chat/index.stories.tsx b/src/stories/chat/index.stories.tsx index 3d9cad93..78dd7787 100644 --- a/src/stories/chat/index.stories.tsx +++ b/src/stories/chat/index.stories.tsx @@ -58,52 +58,61 @@ const ChatPanel = ({ background, ...args }: EditorStoryArgs) => { }; const Template: StoryFn = ({ children, ...args }) => { - const getUsers = async ({ query }: { query: string }) => { + const getUsers = ({ query }: { query: string }) => { return [ { id: 1, name: "John Doe", avatar: "https://i.pravatar.cc/150?img=1", + email:"test@gmail.com" }, { id: 2, name: "Jane Doe", avatar: "https://i.pravatar.cc/150?img=2", + email:"test@gmail.com" }, { id: 3, name: "John Smith", avatar: "https://i.pravatar.cc/150?img=3", + email:"test@gmail.com" }, { id: 4, name: "Jane Smith", avatar: "https://i.pravatar.cc/150?img=4", + email:"test@gmail.com" }, { id: 5, name: "Pippo Baudo", avatar: "https://i.pravatar.cc/150?img=5", + email:"test@gmail.com" }, { id: 6, name: "Pippo Franco", avatar: "https://i.pravatar.cc/150?img=6", + email:"test@gmail.com" }, { id: 7, name: "Pippo Inzaghi", avatar: "https://i.pravatar.cc/150?img=7", + email:"test@gmail.com" }, { id: 8, name: "Pippo Civati", avatar: "https://i.pravatar.cc/150?img=8", + email:"test@gmail.com" }, { id: 9, name: "Pippo Delbono", avatar: "https://i.pravatar.cc/150?img=9", + email:"test@gmail.com" }, ].filter((item) => { if (!query) return item; diff --git a/src/stories/chat/parts/commentBox.tsx b/src/stories/chat/parts/commentBox.tsx index 7117b2e4..608606a0 100644 --- a/src/stories/chat/parts/commentBox.tsx +++ b/src/stories/chat/parts/commentBox.tsx @@ -58,8 +58,8 @@ export const CommentBox = ({ ...props, }); - const onKeyDown = (event: ReactKeyboardEvent) => { - if ((event.ctrlKey || event.metaKey) && event.key === "Enter") { + const onKeyDown = (event: ReactKeyboardEvent) => { + if ((event.ctrlKey || event.metaKey) && event.key === "Enter" ) { triggerSave(); editor?.commands.clearContent(); } diff --git a/src/stories/chat/parts/extensions.tsx b/src/stories/chat/parts/extensions.tsx index 16a131ca..b2b0d58e 100644 --- a/src/stories/chat/parts/extensions.tsx +++ b/src/stories/chat/parts/extensions.tsx @@ -37,7 +37,7 @@ export const editorExtensions = ({ placeholderOptions, mentionableUsers, }: { - mentionableUsers: (props: { query: string }) => Promise; + mentionableUsers: (props: { query: string }) => SuggestedUser[]; placeholderOptions?: Partial; }) => { return [