fix: Emoji picker issues (#2092)

* Emoji picker fixes

* Fixed Mantine focus handling

* Fixed build

* Implemented PR feedback

Author: matthewlipski

examples/07-collaboration/05-comments/src/style.css

@@ -40,3 +40,8 @@
   line-height: 12px;
   padding-left: 14px;
 }
+
+.bn-thread {
+  max-height: 200px;
+  overflow: auto !important;
+}

examples/07-collaboration/06-comments-with-sidebar/src/style.css

@@ -23,6 +23,7 @@
   flex-direction: column;
   gap: 10px;
   max-height: 100%;
+  min-width: 350px;
   width: 0;
 }
 
@@ -47,11 +48,6 @@
   max-width: 700px;
 }
 
-.sidebar-comments-main-container .threads-sidebar-section,
-.sidebar-comments-main-container .bn-threads-sidebar .bn-thread {
-  min-width: 0;
-}
-
 .sidebar-comments-main-container .settings {
   display: flex;
   flex-wrap: wrap;

packages/ariakit/src/comments/Comment.tsx

@@ -58,6 +58,7 @@ export const Comment = forwardRef<
     actions,
     children,
     edited,
+    emojiPickerOpen, // Unused
     ...rest
   } = props;
 

packages/ariakit/src/style.css

@@ -38,6 +38,10 @@
     inset 0 1px 1px 1px var(--shadow);
 }
 
+.bn-ak-popover {
+  z-index: 10000;
+}
+
 .bn-toolbar .bn-ak-popover {
   gap: 0.5rem;
 }

packages/mantine/src/blocknoteStyles.css

@@ -74,11 +74,13 @@
 }
 
 /* Mantine Popover component base styles */
-.bn-mantine .mantine-Popover-dropdown:not(.bn-menu-dropdown) {
+.bn-mantine .bn-panel-popover,
+.bn-mantine .bn-emoji-picker-popover {
   background-color: transparent;
   border: none;
   border-radius: 0;
   box-shadow: none;
+  display: flex;
   padding: 0;
 }
 

packages/mantine/src/comments/Comment.tsx

@@ -1,7 +1,7 @@
 import { assertEmpty } from "@blocknote/core";
 import { ComponentProps, mergeRefs, useDictionary } from "@blocknote/react";
 import { Avatar, Group, Skeleton, Text } from "@mantine/core";
-import { useFocusWithin, useHover } from "@mantine/hooks";
+import { useHover } from "@mantine/hooks";
 import { forwardRef } from "react";
 
 const AuthorInfo = forwardRef<
@@ -59,12 +59,12 @@ export const Comment = forwardRef<
     timeString,
     edited,
     actions,
+    emojiPickerOpen,
     children,
     ...rest
   } = props;
 
   const { hovered, ref: hoverRef } = useHover();
-  const { focused, ref: focusRef } = useFocusWithin();
   const mergedRef = mergeRefs([ref, hoverRef]);
   assertEmpty(rest, false);
 
@@ -73,13 +73,12 @@ export const Comment = forwardRef<
     (showActions === true ||
       showActions === undefined ||
       (showActions === "hover" && hovered) ||
-      focused);
+      emojiPickerOpen);
 
   return (
     <Group pos="relative" ref={mergedRef} className={className}>
       {doShowActions ? (
         <Group
-          ref={focusRef}
           style={{
             position: "absolute",
             right: 0,

packages/mantine/src/popover/Popover.tsx

@@ -16,7 +16,13 @@ export const Popover = (
   assertEmpty(rest);
 
   return (
-    <MantinePopover withinPortal={false} opened={opened} position={position}>
+    <MantinePopover
+      middlewares={{ size: { padding: 20 } }}
+      withinPortal={false}
+      opened={opened}
+      position={position}
+      zIndex={10000}
+    >
       {children}
     </MantinePopover>
   );

packages/react/src/components/Comments/Comment.tsx

@@ -69,6 +69,7 @@ export const Comment = ({
   const Components = useComponentsContext()!;
 
   const [isEditing, setEditing] = useState(false);
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
 
   if (!editor.comments) {
     throw new Error("Comments plugin not found");
@@ -166,6 +167,7 @@ export const Comment = ({
             onEmojiSelect={(emoji: { native: string }) =>
               onReactionSelect(emoji.native)
             }
+            onOpenChange={setEmojiPickerOpen}
           >
             <Components.Generic.Toolbar.Button
               key={"add-reaction"}
@@ -250,6 +252,7 @@ export const Comment = ({
       showActions={"hover"}
       actions={actions}
       className={"bn-thread-comment"}
+      emojiPickerOpen={emojiPickerOpen}
     >
       <CommentEditor
         autoFocus={isEditing}
@@ -279,6 +282,7 @@ export const Comment = ({
                           onEmojiSelect={(emoji: { native: string }) =>
                             onReactionSelect(emoji.native)
                           }
+                          onOpenChange={setEmojiPickerOpen}
                         >
                           <Components.Generic.Badge.Root
                             className={mergeCSSClasses(

packages/react/src/components/Comments/EmojiPicker.tsx

@@ -3,14 +3,18 @@ import { ReactNode, useState } from "react";
 import { useComponentsContext } from "../../editor/ComponentsContext.js";
 import { useBlockNoteContext } from "../../editor/BlockNoteContext.js";
 import Picker from "./EmojiMartPicker.js";
+import { createPortal } from "react-dom";
+import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
 
 export const EmojiPicker = (props: {
   onEmojiSelect: (emoji: { native: string }) => void;
+  onOpenChange?: (open: boolean) => void;
   children: ReactNode;
 }) => {
   const [open, setOpen] = useState(false);
 
   const Components = useComponentsContext()!;
+  const editor = useBlockNoteEditor();
   const blockNoteContext = useBlockNoteContext();
 
   return (
@@ -24,6 +28,7 @@ export const EmojiPicker = (props: {
             event.preventDefault();
             event.stopPropagation();
             setOpen(!open);
+            props.onOpenChange?.(!open);
           }}
           style={{
             display: "flex",
@@ -34,17 +39,27 @@ export const EmojiPicker = (props: {
           {props.children}
         </div>
       </Components.Generic.Popover.Trigger>
-      <Components.Generic.Popover.Content variant={"panel-popover"}>
-        <Picker
-          perLine={7}
-          onClickOutside={() => setOpen(false)}
-          onEmojiSelect={(emoji: { native: string }) => {
-            props.onEmojiSelect(emoji);
-            setOpen(false);
-          }}
-          theme={blockNoteContext?.colorSchemePreference}
-        />
-      </Components.Generic.Popover.Content>
+      {createPortal(
+        <Components.Generic.Popover.Content
+          className={"bn-emoji-picker-popover"}
+          variant={"panel-popover"}
+        >
+          <Picker
+            perLine={7}
+            onClickOutside={() => {
+              setOpen(false);
+              props.onOpenChange?.(false);
+            }}
+            onEmojiSelect={(emoji: { native: string }) => {
+              props.onEmojiSelect(emoji);
+              setOpen(false);
+              props.onOpenChange?.(false);
+            }}
+            theme={blockNoteContext?.colorSchemePreference}
+          />
+        </Components.Generic.Popover.Content>,
+        editor.domElement!.parentElement!,
+      )}
     </Components.Generic.Popover.Root>
   );
 };

packages/react/src/editor/ComponentsContext.tsx

@@ -233,6 +233,7 @@ export type ComponentProps = {
       edited: boolean;
       actions?: ReactNode;
       showActions?: boolean | "hover";
+      emojiPickerOpen?: boolean;
     };
   };
   // TODO: We should try to make everything as generic as we can