Skip to content

Commit aa5945a

Browse files
hunghg255hunghg255
committed
fix: style
1 parent c885c61 commit aa5945a

File tree

5 files changed

+52
-38
lines changed

5 files changed

+52
-38
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -852,7 +852,7 @@
852852
"deep-equal": "^2.2.3",
853853
"docx": "^8.6.0",
854854
"easydrawer": "^0.0.15",
855-
"frimousse": "^0.1.1",
855+
"frimousse": "^0.3.0",
856856
"katex": "^0.16.22",
857857
"lodash-es": "^4.17.21",
858858
"lucide-react": "^0.427.0",

‎pnpm-lock.yaml‎

Lines changed: 9 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/ui/emoji-picker.tsx‎

Lines changed: 30 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
'use client';
22

3+
import type * as React from 'react';
4+
35
import {
46
type EmojiPickerListCategoryHeaderProps,
57
type EmojiPickerListEmojiProps,
68
type EmojiPickerListRowProps,
79
EmojiPicker as EmojiPickerPrimitive,
810
} from 'frimousse';
911
import { LoaderIcon, SearchIcon } from 'lucide-react';
10-
import type * as React from 'react';
1112

1213
import { cn } from '@/lib/utils';
1314

@@ -17,11 +18,11 @@ function EmojiPicker({
1718
}: React.ComponentProps<typeof EmojiPickerPrimitive.Root>) {
1819
return (
1920
<EmojiPickerPrimitive.Root
21+
data-slot="emoji-picker"
2022
className={cn(
21-
'richtext-bg-popover richtext-text-popover-foreground richtext-isolate richtext-flex richtext-h-full richtext-w-fit richtext-flex-col richtext-overflow-hidden richtext-rounded-md',
23+
'!richtext-bg-popover !richtext-text-popover-foreground !richtext-isolate !richtext-flex richtext-h-full !richtext-w-fit !richtext-flex-col !richtext-overflow-hidden !richtext-rounded-md',
2224
className
2325
)}
24-
data-slot="emoji-picker"
2526
{...props}
2627
/>
2728
);
@@ -33,12 +34,13 @@ function EmojiPickerSearch({
3334
}: React.ComponentProps<typeof EmojiPickerPrimitive.Search>) {
3435
return (
3536
<div
36-
className={cn('richtext-flex richtext-h-9 richtext-items-center richtext-gap-2 richtext-border-b richtext-px-3', className)}
37+
className={cn('!richtext-flex !richtext-h-9 !richtext-items-center !richtext-gap-2 !richtext-border-b !richtext-px-3', className)}
3738
data-slot="emoji-picker-search-wrapper"
3839
>
39-
<SearchIcon className="richtext-size-4 richtext-shrink-0 richtext-opacity-50" />
40+
<SearchIcon className="!richtext-size-4 !richtext-shrink-0 !richtext-opacity-50" />
41+
4042
<EmojiPickerPrimitive.Search
41-
className="richtext-outline-hidden placeholder:richtext-text-muted-foreground richtext-flex richtext-h-10 richtext-w-full richtext-rounded-md richtext-bg-transparent richtext-py-3 richtext-text-sm disabled:richtext-cursor-not-allowed disabled:richtext-opacity-50"
43+
className="!richtext-outline-hidden !richtext-flex !richtext-h-10 !richtext-w-full !richtext-rounded-md !richtext-bg-transparent !richtext-py-3 !richtext-text-sm placeholder:!richtext-text-muted-foreground disabled:!richtext-cursor-not-allowed disabled:!richtext-opacity-50"
4244
data-slot="emoji-picker-search"
4345
{...props}
4446
/>
@@ -48,7 +50,10 @@ function EmojiPickerSearch({
4850

4951
function EmojiPickerRow({ children, ...props }: EmojiPickerListRowProps) {
5052
return (
51-
<div {...props} className="richtext-scroll-my-1 richtext-px-1" data-slot="emoji-picker-row">
53+
<div {...props}
54+
className="!richtext-scroll-my-1 !richtext-px-1"
55+
data-slot="emoji-picker-row"
56+
>
5257
{children}
5358
</div>
5459
);
@@ -62,11 +67,11 @@ function EmojiPickerEmoji({
6267
return (
6368
<button
6469
{...props}
70+
data-slot="emoji-picker-emoji"
6571
className={cn(
66-
'data-[active]:richtext-bg-accent richtext-flex richtext-size-7 richtext-items-center richtext-justify-center richtext-rounded-sm richtext-text-base',
72+
'data-[active]:!richtext-bg-accent !richtext-flex !richtext-size-7 !richtext-items-center !richtext-justify-center !richtext-rounded-sm !richtext-text-base',
6773
className
6874
)}
69-
data-slot="emoji-picker-emoji"
7075
>
7176
{emoji.emoji}
7277
</button>
@@ -80,7 +85,7 @@ function EmojiPickerCategoryHeader({
8085
return (
8186
<div
8287
{...props}
83-
className="richtext-bg-popover richtext-text-muted-foreground richtext-px-3 richtext-pb-2 richtext-pt-3.5 richtext-text-xs richtext-leading-none"
88+
className="!richtext-bg-popover !richtext-px-3 !richtext-pb-2 !richtext-pt-3.5 !richtext-text-xs !richtext-leading-none !richtext-text-muted-foreground"
8489
data-slot="emoji-picker-category-header"
8590
>
8691
{category.label}
@@ -94,30 +99,32 @@ function EmojiPickerContent({
9499
}: React.ComponentProps<typeof EmojiPickerPrimitive.Viewport>) {
95100
return (
96101
<EmojiPickerPrimitive.Viewport
97-
className={cn('richtext-outline-hidden richtext-relative richtext-flex-1', className)}
102+
className={cn('!richtext-outline-hidden !richtext-relative !richtext-flex-1', className)}
98103
data-slot="emoji-picker-viewport"
99104
{...props}
100105
>
101106
<EmojiPickerPrimitive.Loading
102-
className="richtext-absolute richtext-inset-0 richtext-flex richtext-items-center richtext-justify-center richtext-text-muted-foreground"
107+
className="!richtext-absolute !richtext-inset-0 !richtext-flex !richtext-items-center !richtext-justify-center !richtext-text-muted-foreground"
103108
data-slot="emoji-picker-loading"
104109
>
105-
<LoaderIcon className="richtext-size-4 richtext-animate-spin" />
110+
<LoaderIcon className="!richtext-size-4 !richtext-animate-spin" />
106111
</EmojiPickerPrimitive.Loading>
112+
107113
<EmojiPickerPrimitive.Empty
108-
className="richtext-absolute richtext-inset-0 richtext-flex richtext-items-center richtext-justify-center richtext-text-muted-foreground richtext-text-sm"
114+
className="!richtext-absolute !richtext-inset-0 !richtext-flex !richtext-items-center !richtext-justify-center !richtext-text-sm !richtext-text-muted-foreground"
109115
data-slot="emoji-picker-empty"
110116
>
111117
No emoji found.
112118
</EmojiPickerPrimitive.Empty>
119+
113120
<EmojiPickerPrimitive.List
114-
className="richtext-select-none richtext-pb-1"
121+
className="!richtext-select-none !richtext-pb-1"
122+
data-slot="emoji-picker-list"
115123
components={{
116124
Row: EmojiPickerRow,
117125
Emoji: EmojiPickerEmoji,
118126
CategoryHeader: EmojiPickerCategoryHeader,
119127
}}
120-
data-slot="emoji-picker-list"
121128
/>
122129
</EmojiPickerPrimitive.Viewport>
123130
);
@@ -129,26 +136,27 @@ function EmojiPickerFooter({
129136
}: React.ComponentProps<'div'>) {
130137
return (
131138
<div
139+
data-slot="emoji-picker-footer"
132140
className={cn(
133-
'richtext-max-w-(--frimousse-viewport-width) richtext-flex richtext-w-full richtext-min-w-0 richtext-items-center richtext-gap-1 richtext-border-t richtext-p-2',
141+
'!richtext-max-w-(--frimousse-viewport-width) !richtext-flex !richtext-w-full !richtext-min-w-0 !richtext-items-center !richtext-gap-1 !richtext-border-t !richtext-p-2',
134142
className
135143
)}
136-
data-slot="emoji-picker-footer"
137144
{...props}
138145
>
139146
<EmojiPickerPrimitive.ActiveEmoji>
140147
{({ emoji }) =>
141148
emoji ? (
142149
<>
143-
<div className="richtext-flex richtext-size-7 richtext-flex-none richtext-items-center richtext-justify-center richtext-text-lg">
150+
<div className="!richtext-flex !richtext-size-7 !richtext-flex-none !richtext-items-center !richtext-justify-center !richtext-text-lg">
144151
{emoji.emoji}
145152
</div>
146-
<span className="richtext-text-secondary-foreground richtext-truncate richtext-text-xs">
153+
154+
<span className="!richtext-truncate !richtext-text-xs !richtext-text-secondary-foreground">
147155
{emoji.label}
148156
</span>
149157
</>
150158
) : (
151-
<span className="richtext-text-muted-foreground richtext-ml-1.5 richtext-flex richtext-h-7 richtext-items-center richtext-truncate richtext-text-xs">
159+
<span className="!richtext-ml-1.5 !richtext-flex !richtext-h-7 !richtext-items-center !richtext-truncate !richtext-text-xs !richtext-text-muted-foreground">
152160
Select an emoji…
153161
</span>
154162
)
@@ -163,4 +171,4 @@ export {
163171
EmojiPickerSearch,
164172
EmojiPickerContent,
165173
EmojiPickerFooter,
166-
};
174+
};

‎src/constants/resetCSS.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
export const RESET_CSS = `
22
.reactjs-tiptap-editor,
33
.richtext-dialog-content {
4+
color: hsl(var(--richtext-foreground));
5+
46
button,
57
input:where([type=button]),
68
input:where([type=reset]),
@@ -43,7 +45,6 @@ export const RESET_CSS = `
4345
border-color: hsl(var(--richtext-border));
4446
}
4547
46-
color: hsl(var(--richtext-foreground));
4748
4849
hr {
4950
height: 0;
@@ -111,8 +112,10 @@ export const RESET_CSS = `
111112
}
112113
}
113114
114-
.reactjs-tiptap-editor div[data-radix-popper-content-wrapper],
115+
div[data-radix-popper-content-wrapper],
115116
div[data-tippy-root] {
117+
color: hsl(var(--richtext-foreground));
118+
116119
*,
117120
::before,
118121
::after {

‎src/extensions/Emoji/components/EmojiPicker/EmojiPicker.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type React from 'react';
2-
import { useCallback } from 'react';
2+
import { useCallback, useState } from 'react';
33

44
import { ActionButton, Popover, PopoverContent, PopoverTrigger } from '@/components';
55
import { EmojiPicker, EmojiPickerContent, EmojiPickerFooter, EmojiPickerSearch } from '@/components/ui/emoji-picker';
@@ -11,21 +11,20 @@ interface IProps {
1111
}
1212

1313
function EmojiPickerWrap({ onSelectEmoji, children }: IProps) {
14-
14+
const [isOpen, setIsOpen] = useState(false);
1515
return (
16-
<Popover modal>
16+
<Popover onOpenChange={setIsOpen}
17+
open={isOpen}
18+
>
1719
<PopoverTrigger asChild>
1820
{children}
1921
</PopoverTrigger>
2022

21-
<PopoverContent align="start"
22-
className="richtext-size-full richtext-p-2"
23-
hideWhenDetached
24-
side="bottom"
25-
>
23+
<PopoverContent className="!richtext-w-fit !richtext-p-0">
2624
<EmojiPicker
2725
className="!richtext-h-[342px]"
2826
onEmojiSelect={({ emoji }) => {
27+
setIsOpen(false);
2928
onSelectEmoji(emoji);
3029
}}
3130
>

0 commit comments

Comments
 (0)