Merge pull request #308 from AppQuality/fix-chat-floating-menu-crash

Fix-chat-floating-menu-crash
AppQuality · Jan 26, 2024 · a3a07a9 · a3a07a9
2 parents 5dda7b5 + 41691b6
commit a3a07a9
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 7 deletions.
diff --git a/src/stories/chat/_types.tsx b/src/stories/chat/_types.tsx
@@ -7,7 +7,7 @@ export type SuggestedUser = { id: number; name: string; email:string };
 
 export interface ChatEditorArgs extends Partial<EditorOptions> {
   placeholderOptions?: Partial<PlaceholderOptions>;
-  hasInlineMenu?: boolean;
+  hasFloatingMenu?: boolean;
   hasButtonsMenu?: boolean;
   bubbleOptions?: any;
   author: Author;

diff --git a/src/stories/chat/index.stories.tsx b/src/stories/chat/index.stories.tsx
@@ -205,7 +205,7 @@ Placeholder.args = {
 export const Menus = Template.bind({});
 Menus.args = {
   ...defaultArgs,
-  hasInlineMenu: true,
+  hasFloatingMenu: true,
   hasButtonsMenu: true,
   i18n: {
     menu: {

diff --git a/src/stories/chat/parts/bar.tsx b/src/stories/chat/parts/bar.tsx
@@ -55,7 +55,7 @@ const CommentBar = ({
       case "mention":
         const { from } = editor.state.selection;
         const char = from > 1 ? " @" : "@";
-        return editor.commands.insertContent(char);
+        return editor.chain().focus().insertContent(char).run();
       default:
         return;
     }

diff --git a/src/stories/chat/parts/commentBox.tsx b/src/stories/chat/parts/commentBox.tsx
@@ -37,7 +37,7 @@ export const CommentBox = ({
   placeholderOptions,
   ...props
 }: PropsWithChildren<ChatEditorArgs>) => {
-  const { children, hasInlineMenu, hasButtonsMenu, bubbleOptions, i18n } =
+  const { children, hasFloatingMenu, hasButtonsMenu, bubbleOptions, i18n } =
     props;
   const { editor, setEditor, mentionableUsers, triggerSave } = useChatContext();
 
@@ -67,15 +67,16 @@ export const CommentBox = ({
 
   if (!ed) return null;
 
+  ed.on("create", ({ editor }) => setEditor(editor as TipTapEditor));
   ed.on("update", ({ editor }) => setEditor(editor as TipTapEditor));
 
   return (
     <>
-      {hasInlineMenu && (
-        <FloatingMenu editor={ed} tippyOptions={{ ...bubbleOptions }} />
-      )}
       <ChatBoxContainer>
         <EditorContainer editable style={{ marginLeft: 0 }}>
+          {hasFloatingMenu && (
+            <FloatingMenu editor={ed} tippyOptions={{ ...bubbleOptions }} />
+          )}
           <EditorContent editor={ed} onKeyDown={onKeyDown} />
         </EditorContainer>
       </ChatBoxContainer>