feat: add floating gutter button (+) to trigger slash menu
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:
@@ -4,7 +4,7 @@ import { useEffect, useRef, useState, useCallback, forwardRef, useImperativeHand
|
|||||||
import { createPortal } from 'react-dom'
|
import { createPortal } from 'react-dom'
|
||||||
import { useLanguage } from '@/lib/i18n'
|
import { useLanguage } from '@/lib/i18n'
|
||||||
import { useEditor, EditorContent } from '@tiptap/react'
|
import { useEditor, EditorContent } from '@tiptap/react'
|
||||||
import { BubbleMenu } from '@tiptap/react/menus'
|
import { BubbleMenu, FloatingMenu } from '@tiptap/react/menus'
|
||||||
import StarterKit from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import Underline from '@tiptap/extension-underline'
|
import Underline from '@tiptap/extension-underline'
|
||||||
import Placeholder from '@tiptap/extension-placeholder'
|
import Placeholder from '@tiptap/extension-placeholder'
|
||||||
@@ -25,7 +25,7 @@ import {
|
|||||||
Quote, CodeXml, Minus, ImageIcon, Type, Highlighter, Link as LinkIcon,
|
Quote, CodeXml, Minus, ImageIcon, Type, Highlighter, Link as LinkIcon,
|
||||||
Sparkles, Wand2, Scissors, Lightbulb, X, Check, ExternalLink,
|
Sparkles, Wand2, Scissors, Lightbulb, X, Check, ExternalLink,
|
||||||
FileText, Pilcrow, MessageSquare, AlignLeft, AlignCenter, AlignRight,
|
FileText, Pilcrow, MessageSquare, AlignLeft, AlignCenter, AlignRight,
|
||||||
Superscript as SuperscriptIcon, Subscript as SubscriptIcon, Expand,
|
Superscript as SuperscriptIcon, Subscript as SubscriptIcon, Expand, Plus,
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
@@ -115,6 +115,7 @@ function useImageInsert() {
|
|||||||
|
|
||||||
export const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorProps>(
|
export const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorProps>(
|
||||||
function RichTextEditor({ content, onChange, className, placeholder }, ref) {
|
function RichTextEditor({ content, onChange, className, placeholder }, ref) {
|
||||||
|
const { t } = useLanguage()
|
||||||
const imageInsert = useImageInsert()
|
const imageInsert = useImageInsert()
|
||||||
|
|
||||||
const editor = useEditor({
|
const editor = useEditor({
|
||||||
@@ -159,6 +160,19 @@ export const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorPro
|
|||||||
</BubbleMenu>
|
</BubbleMenu>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{editor && (
|
||||||
|
<FloatingMenu editor={editor} className="flex items-center -ml-8" tippyOptions={{ placement: 'left' }}>
|
||||||
|
<button
|
||||||
|
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"
|
||||||
|
title={t('richTextEditor.addBlock') || 'Add block'}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<Plus className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</FloatingMenu>
|
||||||
|
)}
|
||||||
|
|
||||||
{editor && <SlashCommandMenu editor={editor} onInsertImage={imageInsert.requestInsert} />}
|
{editor && <SlashCommandMenu editor={editor} onInsertImage={imageInsert.requestInsert} />}
|
||||||
|
|
||||||
<EditorContent editor={editor} />
|
<EditorContent editor={editor} />
|
||||||
|
|||||||
@@ -459,6 +459,7 @@
|
|||||||
"highlight": "Surligner",
|
"highlight": "Surligner",
|
||||||
"superscript": "Exposant",
|
"superscript": "Exposant",
|
||||||
"subscript": "Indice",
|
"subscript": "Indice",
|
||||||
|
"addBlock": "Ajouter un bloc",
|
||||||
"slashHint": "↑↓ naviguer · Entrée insérer · Tab changer de section",
|
"slashHint": "↑↓ naviguer · Entrée insérer · Tab changer de section",
|
||||||
"slashLoading": "IA Note réfléchit...",
|
"slashLoading": "IA Note réfléchit...",
|
||||||
"slashTabAll": "Tout",
|
"slashTabAll": "Tout",
|
||||||
|
|||||||
Reference in New Issue
Block a user