Merge pull request #304 from AppQuality/fix-chat-shortcut

fixed behaviour when editor is empty

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<EditorOptions> {
   placeholderOptions?: Partial<PlaceholderOptions>;

src/stories/chat/context/chatContext.tsx

@@ -6,7 +6,7 @@ export type ChatContextType = {
   triggerSave: () => void;
   editor?: Editor;
   setEditor: React.Dispatch<React.SetStateAction<Editor | undefined>>;
-  mentionableUsers: (props: { query: string }) => Promise<SuggestedUser[]>;
+  mentionableUsers: (props: { query: string }) => SuggestedUser[];
 };
 
 export const ChatContext = createContext<ChatContextType | null>(null);
@@ -18,7 +18,7 @@ export const ChatContextProvider = ({
 }: {
   onSave?: (editor: Editor, mentions: SuggestedUser[]) => void;
   children: React.ReactNode;
-  setMentionableUsers: (props: { query: string }) => Promise<SuggestedUser[]>;
+  setMentionableUsers: (props: { query: string }) => SuggestedUser[];
 }) => {
   const [editor, setEditor] = useState<Editor | undefined>();
 
@@ -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();
         }

src/stories/chat/index.stories.tsx

@@ -58,52 +58,61 @@ const ChatPanel = ({ background, ...args }: EditorStoryArgs) => {
 };
 
 const Template: StoryFn<EditorStoryArgs> = ({ 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:"[email protected]"
       },
       {
         id: 2,
         name: "Jane Doe",
         avatar: "https://i.pravatar.cc/150?img=2",
+        email:"[email protected]"
       },
       {
         id: 3,
         name: "John Smith",
         avatar: "https://i.pravatar.cc/150?img=3",
+        email:"[email protected]"
       },
       {
         id: 4,
         name: "Jane Smith",
         avatar: "https://i.pravatar.cc/150?img=4",
+        email:"[email protected]"
       },
       {
         id: 5,
         name: "Pippo Baudo",
         avatar: "https://i.pravatar.cc/150?img=5",
+        email:"[email protected]"
       },
       {
         id: 6,
         name: "Pippo Franco",
         avatar: "https://i.pravatar.cc/150?img=6",
+        email:"[email protected]"
       },
       {
         id: 7,
         name: "Pippo Inzaghi",
         avatar: "https://i.pravatar.cc/150?img=7",
+        email:"[email protected]"
       },
       {
         id: 8,
         name: "Pippo Civati",
         avatar: "https://i.pravatar.cc/150?img=8",
+        email:"[email protected]"
       },
       {
         id: 9,
         name: "Pippo Delbono",
         avatar: "https://i.pravatar.cc/150?img=9",
+        email:"[email protected]"
       },
     ].filter((item) => {
       if (!query) return item;

src/stories/chat/parts/commentBox.tsx

@@ -58,8 +58,8 @@ export const CommentBox = ({
     ...props,
   });
 
-  const onKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
-    if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
+  const onKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => { 
+    if ((event.ctrlKey || event.metaKey) && event.key === "Enter" ) {
       triggerSave();
       editor?.commands.clearContent();
     }

src/stories/chat/parts/extensions.tsx

@@ -37,7 +37,7 @@ export const editorExtensions = ({
   placeholderOptions,
   mentionableUsers,
 }: {
-  mentionableUsers: (props: { query: string }) => Promise<SuggestedUser[]>;
+  mentionableUsers: (props: { query: string }) => SuggestedUser[];
   placeholderOptions?: Partial<PlaceholderOptions>;
 }) => {
   return [