dwindown/meet-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Tiptap editor visual formatting and improve badge contrast

Browse Source 
Tiptap Editor Improvements:
- Active toolbar buttons now use primary background (black) instead of accent (gray) for better visibility
- Added visual formatting for headings (h1: 2xl bold, h2: xl bold with proper spacing)
- Added visual styling for blockquotes (left border, italic, muted foreground)

Badge Contrast Fixes:
- Product detail page badges now use primary background (black with white text) instead of secondary/accent (gray)
- Fixed product type badge and "Anda memiliki akses" badge
- Fixed "Rekaman segera tersedia" badge

API Query Fix:
- Fixed consulting_slots 400 error by removing unsupported nested relationship filter
- Changed to filter in JavaScript after fetching data from Supabase

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
dwindown
2025-12-25 11:51:46 +07:00
parent 5ae1632684
commit 52190ff26d
3 changed files with 24 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/RichTextEditor.tsx
View File

@@ -449,7 +449,7 @@ export function RichTextEditor({ content, onChange, placeholder = 'Tulis konten.
variant="ghost"
size="sm"
onClick={() => editor.chain().focus().toggleBold().run()}
className={editor.isActive('bold') ? 'bg-accent' : ''}
className={editor.isActive('bold') ? 'bg-primary text-primary-foreground' : ''}
>
<Bold className="w-4 h-4" />
</Button>
@@ -458,7 +458,7 @@ export function RichTextEditor({ content, onChange, placeholder = 'Tulis konten.
variant="ghost"
size="sm"
onClick={() => editor.chain().focus().toggleItalic().run()}
className={editor.isActive('italic') ? 'bg-accent' : ''}
className={editor.isActive('italic') ? 'bg-primary text-primary-foreground' : ''}
>
<Italic className="w-4 h-4" />
</Button>
@@ -467,7 +467,7 @@ export function RichTextEditor({ content, onChange, placeholder = 'Tulis konten.
variant="ghost"
size="sm"
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
className={editor.isActive('heading', { level: 1 }) ? 'bg-accent' : ''}
className={editor.isActive('heading', { level: 1 }) ? 'bg-primary text-primary-foreground' : ''}
>
<Heading1 className="w-4 h-4" />
</Button>
@@ -476,7 +476,7 @@ export function RichTextEditor({ content, onChange, placeholder = 'Tulis konten.
variant="ghost"
size="sm"
onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
className={editor.isActive('heading', { level: 2 }) ? 'bg-accent' : ''}
className={editor.isActive('heading', { level: 2 }) ? 'bg-primary text-primary-foreground' : ''}
>
<Heading2 className="w-4 h-4" />
</Button>
@@ -485,7 +485,7 @@ export function RichTextEditor({ content, onChange, placeholder = 'Tulis konten.
variant="ghost"
size="sm"
onClick={() => editor.chain().focus().toggleBulletList().run()}
className={editor.isActive('bulletList') ? 'bg-accent' : ''}
className={editor.isActive('bulletList') ? 'bg-primary text-primary-foreground' : ''}
>
<List className="w-4 h-4" />
</Button>
@@ -494,7 +494,7 @@ export function RichTextEditor({ content, onChange, placeholder = 'Tulis konten.
variant="ghost"
size="sm"
onClick={() => editor.chain().focus().toggleOrderedList().run()}
className={editor.isActive('orderedList') ? 'bg-accent' : ''}
className={editor.isActive('orderedList') ? 'bg-primary text-primary-foreground' : ''}
>
<ListOrdered className="w-4 h-4" />
</Button>
@@ -503,7 +503,7 @@ export function RichTextEditor({ content, onChange, placeholder = 'Tulis konten.
variant="ghost"
size="sm"
onClick={() => editor.chain().focus().toggleBlockquote().run()}
className={editor.isActive('blockquote') ? 'bg-accent' : ''}
className={editor.isActive('blockquote') ? 'bg-primary text-primary-foreground' : ''}
>
<Quote className="w-4 h-4" />
</Button>
@@ -512,7 +512,7 @@ export function RichTextEditor({ content, onChange, placeholder = 'Tulis konten.
variant="ghost"
size="sm"
onClick={addLink}
className={editor.isActive('link') ? 'bg-accent' : ''}
className={editor.isActive('link') ? 'bg-primary text-primary-foreground' : ''}
>
<LinkIcon className="w-4 h-4" />
</Button>
@@ -626,9 +626,9 @@ export function RichTextEditor({ content, onChange, placeholder = 'Tulis konten.
</Button>
</div>
<div onPaste={handlePaste}>
<EditorContent
editor={editor}
className="prose prose-sm max-w-none p-4 min-h-[200px] focus:outline-none [&_.ProseMirror]:outline-none [&_.ProseMirror]:min-h-[180px] [&_img]:cursor-pointer [&_img.ProseMirror-selectednode]:ring-2 [&_img.ProseMirror-selectednode]:ring-primary"
<EditorContent
editor={editor}
className="prose prose-sm max-w-none p-4 min-h-[200px] focus:outline-none [&_.ProseMirror]:outline-none [&_.ProseMirror]:min-h-[180px] [&_img]:cursor-pointer [&_img.ProseMirror-selectednode]:ring-2 [&_img.ProseMirror-selectednode]:ring-primary [&_h1]:font-bold [&_h1]:text-2xl [&_h1]:mb-4 [&_h1]:mt-6 [&_h2]:font-bold [&_h2]:text-xl [&_h2]:mb-3 [&_h2]:mt-5 [&_blockquote]:border-l-4 [&_blockquote]:border-primary [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-muted-foreground [&_blockquote]:my-4"
/>
</div>
{uploading && (