style: make floating gutter button more dynamic and beautiful
Some checks failed
Deploy to Production / Build and Deploy (push) Failing after 33s
Some checks failed
Deploy to Production / Build and Deploy (push) Failing after 33s
This commit is contained in:
@@ -161,14 +161,14 @@ export const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorPro
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{editor && (
|
{editor && (
|
||||||
<FloatingMenu editor={editor} className="flex items-center -ml-8" tippyOptions={{ placement: 'left' }}>
|
<FloatingMenu editor={editor} className="flex items-center" tippyOptions={{ placement: 'left', offset: [0, 16] }}>
|
||||||
<button
|
<button
|
||||||
onClick={() => editor.chain().focus().insertContent('/').run()}
|
onClick={() => editor.chain().focus().insertContent('/').run()}
|
||||||
className="w-6 h-6 flex items-center justify-center rounded-md text-muted-foreground hover:bg-muted transition-colors"
|
className="flex items-center justify-center w-7 h-7 rounded-full text-muted-foreground/50 bg-transparent hover:bg-background hover:text-foreground hover:shadow-md hover:scale-110 active:scale-95 transition-all duration-300 group ring-1 ring-transparent hover:ring-border/50"
|
||||||
title={t('richTextEditor.addBlock') || 'Add block'}
|
title={t('richTextEditor.addBlock') || 'Add block'}
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<Plus className="w-4 h-4" />
|
<Plus className="w-4 h-4 group-hover:rotate-90 transition-transform duration-300" />
|
||||||
</button>
|
</button>
|
||||||
</FloatingMenu>
|
</FloatingMenu>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user