diff --git a/examples/07-collaboration/05-comments/src/style.css b/examples/07-collaboration/05-comments/src/style.css index 1172740d3d..eaf9d337e9 100644 --- a/examples/07-collaboration/05-comments/src/style.css +++ b/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; +} diff --git a/examples/07-collaboration/06-comments-with-sidebar/src/style.css b/examples/07-collaboration/06-comments-with-sidebar/src/style.css index 8ec1d5103e..f903d52e1b 100644 --- a/examples/07-collaboration/06-comments-with-sidebar/src/style.css +++ b/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; diff --git a/packages/ariakit/src/comments/Comment.tsx b/packages/ariakit/src/comments/Comment.tsx index 452cf49073..efc1746f20 100644 --- a/packages/ariakit/src/comments/Comment.tsx +++ b/packages/ariakit/src/comments/Comment.tsx @@ -58,6 +58,7 @@ export const Comment = forwardRef< actions, children, edited, + emojiPickerOpen, // Unused ...rest } = props; diff --git a/packages/ariakit/src/style.css b/packages/ariakit/src/style.css index 46917be46b..1fde174b11 100644 --- a/packages/ariakit/src/style.css +++ b/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; } diff --git a/packages/mantine/src/blocknoteStyles.css b/packages/mantine/src/blocknoteStyles.css index 4d1933979c..7f0e3b74cd 100644 --- a/packages/mantine/src/blocknoteStyles.css +++ b/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; } diff --git a/packages/mantine/src/comments/Comment.tsx b/packages/mantine/src/comments/Comment.tsx index a09626f867..e555d9df99 100644 --- a/packages/mantine/src/comments/Comment.tsx +++ b/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 ( {doShowActions ? ( + {children} ); diff --git a/packages/react/src/components/Comments/Comment.tsx b/packages/react/src/components/Comments/Comment.tsx index 0d29e7bc1f..26f940892e 100644 --- a/packages/react/src/components/Comments/Comment.tsx +++ b/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} > onReactionSelect(emoji.native) } + onOpenChange={setEmojiPickerOpen} > 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} - - setOpen(false)} - onEmojiSelect={(emoji: { native: string }) => { - props.onEmojiSelect(emoji); - setOpen(false); - }} - theme={blockNoteContext?.colorSchemePreference} - /> - + {createPortal( + + { + setOpen(false); + props.onOpenChange?.(false); + }} + onEmojiSelect={(emoji: { native: string }) => { + props.onEmojiSelect(emoji); + setOpen(false); + props.onOpenChange?.(false); + }} + theme={blockNoteContext?.colorSchemePreference} + /> + , + editor.domElement!.parentElement!, + )} ); }; diff --git a/packages/react/src/editor/ComponentsContext.tsx b/packages/react/src/editor/ComponentsContext.tsx index 2eb161d828..5bd29c3686 100644 --- a/packages/react/src/editor/ComponentsContext.tsx +++ b/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 diff --git a/packages/react/src/editor/styles.css b/packages/react/src/editor/styles.css index eb61a59fa2..1cd909599f 100644 --- a/packages/react/src/editor/styles.css +++ b/packages/react/src/editor/styles.css @@ -286,3 +286,9 @@ background-color: #20242a; border: 2px solid #23405b; } + +/* Emoji Picker styling */ +em-emoji-picker { + max-height: 100%; + z-index: 11000; +} diff --git a/packages/shadcn/src/comments/Comment.tsx b/packages/shadcn/src/comments/Comment.tsx index 75caab87bb..68dd782b56 100644 --- a/packages/shadcn/src/comments/Comment.tsx +++ b/packages/shadcn/src/comments/Comment.tsx @@ -70,6 +70,7 @@ export const Comment = forwardRef< timeString, actions, edited, + emojiPickerOpen, // Unused children, ...rest } = props; diff --git a/packages/shadcn/src/popover/popover.tsx b/packages/shadcn/src/popover/popover.tsx index ac14b34f13..3a6f91369f 100644 --- a/packages/shadcn/src/popover/popover.tsx +++ b/packages/shadcn/src/popover/popover.tsx @@ -57,7 +57,7 @@ export const PopoverContent = forwardRef< sideOffset={8} className={cn( className, - "flex flex-col gap-2", + "z-[10000] flex flex-col gap-2", variant === "panel-popover" ? "w-fit max-w-none border-none p-0 shadow-none" : "",