Skip to content

Commit f608190

Browse files
mpsalungggmpsalunggg
committed
chore: adjust texteditor and mdx content
1 parent dd7647a commit f608190

File tree

8 files changed

+67
-42
lines changed

8 files changed

+67
-42
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"@radix-ui/react-avatar": "^1.1.1",
2626
"@radix-ui/react-dialog": "^1.1.14",
2727
"@radix-ui/react-dropdown-menu": "^2.1.15",
28-
"@radix-ui/react-label": "^2.1.6",
28+
"@radix-ui/react-label": "^2.1.7",
2929
"@radix-ui/react-popover": "^1.1.15",
3030
"@radix-ui/react-select": "^2.1.1",
3131
"@radix-ui/react-separator": "^1.1.7",
@@ -35,6 +35,7 @@
3535
"@radix-ui/react-tooltip": "^1.2.7",
3636
"@tanstack/react-query": "^5.85.5",
3737
"@tanstack/react-table": "^8.21.3",
38+
"@tiptap/extension-horizontal-rule": "^3.4.1",
3839
"@tiptap/extension-image": "^3.2.0",
3940
"@tiptap/extension-link": "^3.2.0",
4041
"@tiptap/extension-placeholder": "^3.2.0",

‎pnpm-lock.yaml‎

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

‎src/components/common/MDXContent/index.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,24 @@ const MDXContent: FC<MDXContentProps> = ({
3636

3737
if (!mdxSource) {
3838
return (
39-
<div className={cn("prose prose-sm dark:prose-invert max-w-none", className)}>
39+
<div
40+
className={cn(
41+
"prose prose-md dark:prose-invert prose-blockquote:border-primary prose-blockquote:bg-muted/50 prose-blockquote:pl-4 prose-blockquote:py-1 prose-blockquote:before:content-none prose-blockquote:not-italic prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-pre:border prose-pre:text-foreground prose-pre:p-3 prose-p:my-1 prose-h1:my-2 prose-h2:my-2 prose-h3:my-1 prose-ul:my-1 prose-ol:my-1 prose-li:my-0 prose-hr:my-6 mx-auto max-w-none p-3",
42+
className
43+
)}
44+
>
4045
<p>{fallbackText || content}</p>
4146
</div>
4247
);
4348
}
4449

4550
return (
46-
<div className={cn("prose prose-sm dark:prose-invert max-w-none", className)}>
51+
<div
52+
className={cn(
53+
"prose prose-md dark:prose-invert prose-blockquote:border-primary prose-blockquote:bg-muted/50 prose-blockquote:pl-4 prose-blockquote:py-1 prose-blockquote:before:content-none prose-blockquote:not-italic prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-pre:border prose-pre:text-foreground prose-pre:p-3 prose-p:my-1 prose-h1:my-2 prose-h2:my-2 prose-h3:my-1 prose-ul:my-1 prose-ol:my-1 prose-li:my-0 prose-hr:my-6 mx-auto max-w-none p-3",
54+
className
55+
)}
56+
>
4757
<MDXRemote {...mdxSource} />
4858
</div>
4959
);

‎src/components/common/TextEditor/TextEditor.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,14 @@ import Underline from "@tiptap/extension-underline";
77
import Typography from "@tiptap/extension-typography";
88
import Link from "@tiptap/extension-link";
99
import Placeholder from "@tiptap/extension-placeholder";
10+
import HorizontalRule from "@tiptap/extension-horizontal-rule";
1011
import { useState, useCallback, useMemo, useEffect } from "react";
1112
import { markdownToHtml, htmlToMarkdown } from "./utils";
1213

1314
import { Button } from "@/components/ui/Button";
1415
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
1516
import { Toolbar } from "@/components/common/TextEditor";
17+
import Loader from "../Loader";
1618

1719
interface TextEditorProps {
1820
markdownOutput?: boolean;
@@ -30,6 +32,7 @@ const TextEditor = ({ markdownOutput = false, value, onChange }: TextEditorProps
3032
StarterKit,
3133
Underline,
3234
Typography,
35+
HorizontalRule,
3336
Placeholder.configure({
3437
placeholder: "Start typing your content here... Use the toolbar above to format your text.",
3538
}),
@@ -61,7 +64,7 @@ const TextEditor = ({ markdownOutput = false, value, onChange }: TextEditorProps
6164
editorProps: {
6265
attributes: {
6366
class:
64-
"prose dark:prose-invert max-w-none mx-auto focus:outline-none max-h-[300px] p-3 prose-blockquote:border-primary prose-blockquote:bg-muted/50 prose-blockquote:pl-4 prose-blockquote:py-1 prose-blockquote:before:content-none prose-blockquote:not-italic prose-code:bg-muted prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-pre:bg-muted prose-pre:border prose-pre:text-foreground prose-pre:p-3",
67+
"prose prose-md dark:prose-invert max-w-none mx-auto focus:outline-none max-h-[300px] p-3 prose-blockquote:border-primary prose-blockquote:bg-muted/50 prose-blockquote:pl-4 prose-blockquote:py-1 prose-blockquote:before:content-none prose-blockquote:not-italic prose-code:bg-muted prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-pre:bg-muted prose-pre:border prose-pre:text-foreground prose-pre:p-3 prose-p:my-1 prose-h1:my-2 prose-h2:my-2 prose-h3:my-1 prose-ul:my-1 prose-ol:my-1 prose-li:my-0 prose-hr:my-3",
6568
},
6669
},
6770
});
@@ -132,11 +135,7 @@ const TextEditor = ({ markdownOutput = false, value, onChange }: TextEditorProps
132135
}, [editor, htmlContent]);
133136

134137
if (!editor) {
135-
return (
136-
<div className="flex h-64 items-center justify-center">
137-
<div className="border-primary h-8 w-8 animate-spin rounded-full border-b-2"></div>
138-
</div>
139-
);
138+
return <Loader />;
140139
}
141140

142141
return (

‎src/components/common/TextEditor/Toolbar.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
Redo,
1818
Download,
1919
ExternalLink,
20+
Minus,
2021
} from "lucide-react";
2122
import { Separator } from "@/components/ui/Separator";
2223
import { ToolbarButton } from "@/components/common/TextEditor";
@@ -161,6 +162,10 @@ const Toolbar = ({
161162
>
162163
<Code2 className="h-4 w-4" />
163164
</ToolbarButton>
165+
166+
<ToolbarButton onClick={() => editor.chain().focus().setHorizontalRule().run()} title="Horizontal Rule">
167+
<Minus className="h-4 w-4" />
168+
</ToolbarButton>
164169
</div>
165170

166171
<Separator orientation="vertical" className="h-6" />

‎src/components/ui/Form/index.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,12 @@ const FormLabel = React.forwardRef<
8080
>(({ className, ...props }, ref) => {
8181
const { error, formItemId } = useFormField();
8282

83-
return <Label ref={ref} className={cn(error && "text-destructive", className)} htmlFor={formItemId} {...props} />;
83+
return (
84+
<Label ref={ref} className={cn(error && "text-destructive", className)} htmlFor={formItemId} {...props}>
85+
{props.children}
86+
{props["aria-required"] && <span className="-ml-1 text-red-500">*</span>}
87+
</Label>
88+
);
8489
});
8590
FormLabel.displayName = "FormLabel";
8691

‎src/components/ui/Label/index.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,20 @@
22

33
import * as React from "react";
44
import * as LabelPrimitive from "@radix-ui/react-label";
5-
import { cva, type VariantProps } from "class-variance-authority";
65

76
import { cn } from "@/lib/utils";
87

9-
const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
10-
11-
const Label = React.forwardRef<
12-
React.ElementRef<typeof LabelPrimitive.Root>,
13-
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
14-
>(({ className, ...props }, ref) => (
15-
<LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
16-
));
17-
Label.displayName = LabelPrimitive.Root.displayName;
8+
function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
9+
return (
10+
<LabelPrimitive.Root
11+
data-slot="label"
12+
className={cn(
13+
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
14+
className
15+
)}
16+
{...props}
17+
/>
18+
);
19+
}
1820

1921
export { Label };

‎src/features/events/components/EventForm.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -123,8 +123,8 @@ const EventForm = ({ onSubmit, isLoading = false, initialData, mode = "create" }
123123
};
124124

125125
return (
126-
<Card className="py-4">
127-
<CardContent>
126+
<Card className="py-6">
127+
<CardContent className="py-0">
128128
<Form {...form}>
129129
<form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
130130
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -133,7 +133,7 @@ const EventForm = ({ onSubmit, isLoading = false, initialData, mode = "create" }
133133
name="title"
134134
render={({ field }) => (
135135
<FormItem>
136-
<FormLabel>Event Title *</FormLabel>
136+
<FormLabel>Event Title</FormLabel>
137137
<FormControl>
138138
<Input placeholder="Enter event title" {...field} />
139139
</FormControl>
@@ -147,7 +147,7 @@ const EventForm = ({ onSubmit, isLoading = false, initialData, mode = "create" }
147147
name="slug"
148148
render={({ field }) => (
149149
<FormItem>
150-
<FormLabel>Slug *</FormLabel>
150+
<FormLabel aria-required>Slug</FormLabel>
151151
<FormControl>
152152
<Input
153153
placeholder="Enter event slug"
@@ -169,7 +169,7 @@ const EventForm = ({ onSubmit, isLoading = false, initialData, mode = "create" }
169169
name="description"
170170
render={({ field }) => (
171171
<FormItem>
172-
<FormLabel>Description *</FormLabel>
172+
<FormLabel aria-required>Description</FormLabel>
173173
<FormControl>
174174
<TextEditor value={field.value} onChange={field.onChange} />
175175
</FormControl>
@@ -184,7 +184,7 @@ const EventForm = ({ onSubmit, isLoading = false, initialData, mode = "create" }
184184
name="type"
185185
render={({ field }) => (
186186
<FormItem>
187-
<FormLabel>Event Type *</FormLabel>
187+
<FormLabel aria-required>Event Type</FormLabel>
188188
<Select onValueChange={field.onChange} defaultValue={field.value}>
189189
<FormControl>
190190
<SelectTrigger>
@@ -209,7 +209,7 @@ const EventForm = ({ onSubmit, isLoading = false, initialData, mode = "create" }
209209
name="status"
210210
render={({ field }) => (
211211
<FormItem>
212-
<FormLabel>Status *</FormLabel>
212+
<FormLabel aria-required>Status</FormLabel>
213213
<Select onValueChange={field.onChange} defaultValue={field.value}>
214214
<FormControl>
215215
<SelectTrigger>
@@ -234,7 +234,7 @@ const EventForm = ({ onSubmit, isLoading = false, initialData, mode = "create" }
234234
name="location"
235235
render={({ field }) => (
236236
<FormItem>
237-
<FormLabel>Location *</FormLabel>
237+
<FormLabel aria-required>Location</FormLabel>
238238
<FormControl>
239239
<Input placeholder="Enter event location" {...field} />
240240
</FormControl>
@@ -248,7 +248,7 @@ const EventForm = ({ onSubmit, isLoading = false, initialData, mode = "create" }
248248
name="date"
249249
render={({ field }) => (
250250
<FormItem className="flex flex-col">
251-
<FormLabel>Event Date *</FormLabel>
251+
<FormLabel aria-required>Event Date</FormLabel>
252252
<Popover>
253253
<PopoverTrigger asChild>
254254
<FormControl>
@@ -281,7 +281,7 @@ const EventForm = ({ onSubmit, isLoading = false, initialData, mode = "create" }
281281
name="reservation_start_date"
282282
render={({ field }) => (
283283
<FormItem className="flex flex-col">
284-
<FormLabel>Reservation Start Date *</FormLabel>
284+
<FormLabel aria-required>Reservation Start Date</FormLabel>
285285
<Popover>
286286
<PopoverTrigger asChild>
287287
<FormControl>
@@ -313,7 +313,7 @@ const EventForm = ({ onSubmit, isLoading = false, initialData, mode = "create" }
313313
name="reservation_end_date"
314314
render={({ field }) => (
315315
<FormItem className="flex flex-col">
316-
<FormLabel>Reservation End Date *</FormLabel>
316+
<FormLabel aria-required>Reservation End Date</FormLabel>
317317
<Popover>
318318
<PopoverTrigger asChild>
319319
<FormControl>
@@ -347,7 +347,7 @@ const EventForm = ({ onSubmit, isLoading = false, initialData, mode = "create" }
347347
name="duration"
348348
render={({ field }) => (
349349
<FormItem>
350-
<FormLabel>Duration *</FormLabel>
350+
<FormLabel aria-required>Duration</FormLabel>
351351
<FormControl>
352352
<Input placeholder="e.g. 2 hours" {...field} />
353353
</FormControl>
@@ -361,7 +361,7 @@ const EventForm = ({ onSubmit, isLoading = false, initialData, mode = "create" }
361361
name="capacity"
362362
render={({ field }) => (
363363
<FormItem>
364-
<FormLabel>Capacity *</FormLabel>
364+
<FormLabel aria-required>Capacity</FormLabel>
365365
<FormControl>
366366
<Input
367367
type="number"
@@ -380,7 +380,7 @@ const EventForm = ({ onSubmit, isLoading = false, initialData, mode = "create" }
380380
name="price"
381381
render={({ field }) => (
382382
<FormItem>
383-
<FormLabel>Price *</FormLabel>
383+
<FormLabel aria-required>Price</FormLabel>
384384
<FormControl>
385385
<Input
386386
type="number"
@@ -400,7 +400,7 @@ const EventForm = ({ onSubmit, isLoading = false, initialData, mode = "create" }
400400
name="registration_link"
401401
render={({ field }) => (
402402
<FormItem>
403-
<FormLabel>Registration Link *</FormLabel>
403+
<FormLabel aria-required>Registration Link</FormLabel>
404404
<FormControl>
405405
<Input placeholder="https://example.com/register" {...field} />
406406
</FormControl>

0 commit comments

Comments
 (0)