7fedfa8f50
- Architecture nested nodes: columns container → column children - CSS seamless (pas de bordures, fin séparateur vertical entre colonnes) - isolating: true sur les deux nœuds (curseur reste dans sa colonne) - Commands addColumnBefore/addColumnAfter/deleteColumn - Slash menu + drag handle + raccourci Mod+Shift+L - i18n FR/EN complet
437 lines
17 KiB
TypeScript
437 lines
17 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useRef, useState, useCallback } from 'react'
|
|
import { createPortal } from 'react-dom'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
import type { Editor } from '@tiptap/core'
|
|
import type { Node as PMNode } from '@tiptap/pm/model'
|
|
import { copyTextToClipboard } from '@/lib/editor/copy-text-to-clipboard'
|
|
import { ensureBlockReferenceId } from '@/lib/editor/block-reference-id'
|
|
import { rememberBlockReference } from '@/lib/editor/parse-block-reference'
|
|
import { toast } from 'sonner'
|
|
import {
|
|
Trash2, Copy, Repeat, Link, ChevronRight,
|
|
Heading1, Heading2, Heading3, List, ListOrdered,
|
|
CheckSquare, Quote, CodeXml, Database,
|
|
ArrowUp, ArrowDown, AlignLeft, ClipboardCopy, Sparkles,
|
|
ChevronsRightLeft, MessageSquareWarning, ListTree, Columns3,
|
|
Plus, Minus,
|
|
} from 'lucide-react'
|
|
import { replaceBlockWithStructuredView } from '@/components/tiptap-structured-view-block-extension'
|
|
import { insertToggleBlock, turnIntoToggleBlock } from '@/components/tiptap-toggle-extension'
|
|
import { turnIntoCalloutBlock } from '@/components/tiptap-callout-extension'
|
|
import { insertOutlineBlock } from '@/components/tiptap-outline-extension'
|
|
import { insertColumnsBlock } from '@/components/tiptap-columns-extension'
|
|
|
|
interface BlockActionMenuProps {
|
|
editor: Editor
|
|
onClose: () => void
|
|
anchorRect: DOMRect
|
|
blockPos: number
|
|
blockNode: PMNode | null
|
|
noteId?: string
|
|
sourceNoteTitle?: string
|
|
onBlockReferenceCopied?: (html: string) => void
|
|
}
|
|
|
|
type TurnIntoType =
|
|
| 'paragraph'
|
|
| 'heading1' | 'heading2' | 'heading3'
|
|
| 'bulletList' | 'orderedList' | 'taskList'
|
|
| 'blockquote' | 'codeBlock' | 'database'
|
|
|
|
interface TurnIntoOption {
|
|
id: TurnIntoType
|
|
icon: typeof Heading1
|
|
command?: (editor: Editor) => void
|
|
isDatabase?: boolean
|
|
}
|
|
|
|
/** Positionne le curseur dans le bloc avant d'appliquer une transformation */
|
|
function focusBlock(editor: Editor, blockPos: number) {
|
|
const docSize = editor.state.doc.content.size
|
|
const cursorPos = Math.min(blockPos + 1, docSize)
|
|
editor.chain().focus().setTextSelection(cursorPos).run()
|
|
}
|
|
|
|
/**
|
|
* Applique une transformation en passant d'abord par paragraphe.
|
|
* Ceci corrige le cas heading → liste / blockquote / codeBlock qui échoue
|
|
* avec un toggle direct.
|
|
*/
|
|
function makeTurnCommand(cmd: (e: Editor) => void): (e: Editor) => void {
|
|
return (editor: Editor) => {
|
|
// clearNodes remet en paragraphe sans perte de texte
|
|
editor.chain().focus().clearNodes().run()
|
|
cmd(editor)
|
|
}
|
|
}
|
|
|
|
const TURN_INTO_OPTIONS: TurnIntoOption[] = [
|
|
{ id: 'paragraph', icon: AlignLeft, command: (e) => e.chain().focus().clearNodes().run() },
|
|
{ id: 'heading1', icon: Heading1, command: (e) => e.chain().focus().clearNodes().toggleHeading({ level: 1 }).run() },
|
|
{ id: 'heading2', icon: Heading2, command: (e) => e.chain().focus().clearNodes().toggleHeading({ level: 2 }).run() },
|
|
{ id: 'heading3', icon: Heading3, command: (e) => e.chain().focus().clearNodes().toggleHeading({ level: 3 }).run() },
|
|
{ id: 'bulletList', icon: List, command: makeTurnCommand((e) => e.chain().focus().toggleBulletList().run()) },
|
|
{ id: 'orderedList', icon: ListOrdered, command: makeTurnCommand((e) => e.chain().focus().toggleOrderedList().run()) },
|
|
{ id: 'taskList', icon: CheckSquare, command: makeTurnCommand((e) => e.chain().focus().toggleTaskList().run()) },
|
|
{ id: 'blockquote', icon: Quote, command: makeTurnCommand((e) => e.chain().focus().toggleBlockquote().run()) },
|
|
{ id: 'codeBlock', icon: CodeXml, command: makeTurnCommand((e) => e.chain().focus().toggleCodeBlock().run()) },
|
|
{ id: 'database', icon: Database, isDatabase: true },
|
|
]
|
|
|
|
function getBlockPlainContent(editor: Editor, blockPos: number, blockNode: PMNode | null): string {
|
|
const node = blockNode ?? (blockPos >= 0 ? editor.state.doc.nodeAt(blockPos) : null)
|
|
if (!node || blockPos < 0) return ''
|
|
const from = blockPos + 1
|
|
const to = blockPos + node.nodeSize - 1
|
|
if (to > from) {
|
|
return editor.state.doc.textBetween(from, to, '\n', '').trim()
|
|
}
|
|
return node.textContent?.trim() ?? ''
|
|
}
|
|
|
|
/** Déplace un bloc vers le haut (échange avec le frère précédent) */
|
|
function moveBlockUp(editor: Editor, blockPos: number, blockNode: PMNode): boolean {
|
|
const { doc } = editor.state
|
|
let prevPos = -1
|
|
let prevNode: PMNode | null = null
|
|
doc.forEach((node, offset) => {
|
|
if (offset + node.nodeSize === blockPos) {
|
|
prevPos = offset
|
|
prevNode = node
|
|
}
|
|
})
|
|
if (prevPos < 0 || !prevNode) return false
|
|
const safePrev = prevNode as PMNode
|
|
const tr = editor.state.tr
|
|
const from = prevPos
|
|
const to = blockPos + blockNode.nodeSize
|
|
tr.replaceWith(from, to, [blockNode.copy(blockNode.content), safePrev.copy(safePrev.content)])
|
|
editor.view.dispatch(tr)
|
|
// Repositionne le curseur dans le bloc déplacé (maintenant à prevPos)
|
|
const docSize = editor.state.doc.content.size
|
|
editor.chain().focus().setTextSelection(Math.min(prevPos + 1, docSize)).run()
|
|
return true
|
|
}
|
|
|
|
/** Déplace un bloc vers le bas (échange avec le frère suivant) */
|
|
function moveBlockDown(editor: Editor, blockPos: number, blockNode: PMNode): boolean {
|
|
const { doc } = editor.state
|
|
const nextPos = blockPos + blockNode.nodeSize
|
|
const nextNode = doc.nodeAt(nextPos)
|
|
if (!nextNode) return false
|
|
const tr = editor.state.tr
|
|
const from = blockPos
|
|
const to = nextPos + nextNode.nodeSize
|
|
tr.replaceWith(from, to, [nextNode.copy(nextNode.content), blockNode.copy(blockNode.content)])
|
|
editor.view.dispatch(tr)
|
|
const newPos = blockPos + nextNode.nodeSize
|
|
const docSize = editor.state.doc.content.size
|
|
editor.chain().focus().setTextSelection(Math.min(newPos + 1, docSize)).run()
|
|
return true
|
|
}
|
|
|
|
export function BlockActionMenu({
|
|
editor,
|
|
onClose,
|
|
anchorRect,
|
|
blockPos,
|
|
blockNode,
|
|
noteId,
|
|
sourceNoteTitle,
|
|
onBlockReferenceCopied,
|
|
}: BlockActionMenuProps) {
|
|
const { t } = useLanguage()
|
|
const menuRef = useRef<HTMLDivElement>(null)
|
|
const [showTurnInto, setShowTurnInto] = useState(false)
|
|
const hoverTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
|
|
|
const handleDelete = useCallback(() => {
|
|
if (blockNode && blockPos >= 0) {
|
|
editor.chain().focus().deleteRange({ from: blockPos, to: blockPos + blockNode.nodeSize }).run()
|
|
}
|
|
onClose()
|
|
}, [editor, blockNode, blockPos, onClose])
|
|
|
|
const handleDuplicate = useCallback(() => {
|
|
if (blockNode && blockPos >= 0) {
|
|
const insertPos = blockPos + blockNode.nodeSize
|
|
editor.view.dispatch(editor.state.tr.insert(insertPos, blockNode.copy()))
|
|
editor.commands.focus()
|
|
}
|
|
onClose()
|
|
}, [editor, blockNode, blockPos, onClose])
|
|
|
|
const handleMoveUp = useCallback(() => {
|
|
if (blockNode && blockPos >= 0) {
|
|
const ok = moveBlockUp(editor, blockPos, blockNode)
|
|
if (!ok) toast(t('blockAction.moveUpFirst'))
|
|
}
|
|
onClose()
|
|
}, [editor, blockNode, blockPos, onClose, t])
|
|
|
|
const handleMoveDown = useCallback(() => {
|
|
if (blockNode && blockPos >= 0) {
|
|
const ok = moveBlockDown(editor, blockPos, blockNode)
|
|
if (!ok) toast(t('blockAction.moveDownLast'))
|
|
}
|
|
onClose()
|
|
}, [editor, blockNode, blockPos, onClose, t])
|
|
|
|
const handleCopyContent = useCallback(async () => {
|
|
const text = getBlockPlainContent(editor, blockPos, blockNode)
|
|
if (!text) { toast(t('blockAction.emptyBlock')); onClose(); return }
|
|
const ok = await copyTextToClipboard(text)
|
|
if (ok) toast.success(t('blockAction.contentCopied'))
|
|
else toast.error(t('blockAction.copyRefFailed'))
|
|
onClose()
|
|
}, [editor, blockPos, blockNode, onClose, t])
|
|
|
|
const handleCopyRef = useCallback(async () => {
|
|
if (!noteId?.trim()) {
|
|
toast.error(t('blockAction.copyRefNoNote'))
|
|
onClose()
|
|
return
|
|
}
|
|
const blockId = ensureBlockReferenceId(editor, blockPos, blockNode)
|
|
if (!blockId) {
|
|
toast.error(t('blockAction.copyRefUnsupported'))
|
|
onClose()
|
|
return
|
|
}
|
|
const html = editor.getHTML()
|
|
const blockContent = getBlockPlainContent(editor, blockPos, blockNode)
|
|
onBlockReferenceCopied?.(html)
|
|
const ref = `${window.location.origin}/home?openNote=${encodeURIComponent(noteId)}#block-${encodeURIComponent(blockId)}`
|
|
const copied = await copyTextToClipboard(ref)
|
|
if (copied) {
|
|
rememberBlockReference(ref, { blockContent, sourceNoteTitle })
|
|
toast.success(t('blockAction.copied'))
|
|
} else {
|
|
toast.error(t('blockAction.copyRefFailed'))
|
|
}
|
|
onClose()
|
|
}, [blockNode, blockPos, editor, noteId, onBlockReferenceCopied, onClose, sourceNoteTitle, t])
|
|
|
|
const handleCreateDiagram = useCallback(async () => {
|
|
const text = getBlockPlainContent(editor, blockPos, blockNode)
|
|
if (!text || text.trim().length < 5) {
|
|
toast.error(t('blockAction.createDiagramEmpty') || "Le texte est trop court pour générer un diagramme.")
|
|
onClose()
|
|
return
|
|
}
|
|
|
|
onClose()
|
|
const toastId = toast.loading(t('blockAction.createDiagramLoading') || "Génération du diagramme Excalidraw par l'IA...")
|
|
|
|
try {
|
|
const { generateDiagramFromText } = await import('@/app/actions/diagram')
|
|
const res = await generateDiagramFromText(text)
|
|
|
|
if (!res.success || !res.canvasId) {
|
|
throw new Error(res.error || "La génération du diagramme a échoué.")
|
|
}
|
|
|
|
const canvasId = res.canvasId
|
|
|
|
const canvasRes = await fetch(`/api/canvas?id=${encodeURIComponent(canvasId)}`)
|
|
const canvasData = await canvasRes.json()
|
|
if (!canvasRes.ok || !canvasData.canvas?.data) {
|
|
throw new Error("Impossible de charger les données du diagramme généré.")
|
|
}
|
|
|
|
const { exportExcalidrawSceneToPngBlob } = await import('@/lib/client/excalidraw-export-image')
|
|
const blob = await exportExcalidrawSceneToPngBlob(canvasData.canvas.data)
|
|
if (!blob) {
|
|
throw new Error("Échec du rendu du diagramme en image PNG.")
|
|
}
|
|
|
|
const fd = new FormData()
|
|
fd.append('file', blob, `diagram-${canvasId.slice(-8)}.png`)
|
|
const up = await fetch('/api/upload', { method: 'POST', body: fd })
|
|
const upJson = await up.json()
|
|
if (!up.ok || !upJson.url) {
|
|
throw new Error("Échec du téléversement du diagramme généré.")
|
|
}
|
|
|
|
const imageUrl = upJson.url
|
|
|
|
const insertPos = blockPos + (blockNode ? blockNode.nodeSize : 0)
|
|
const htmlToInsert = `<p><a href="/lab?id=${canvasId}" target="_blank"><img src="${imageUrl}" alt="Diagramme Excalidraw" style="max-width: 100%; border-radius: 8px; border: 1px solid rgba(0,0,0,0.1);" /></a></p><p>🎨 <a href="/lab?id=${canvasId}" target="_blank"><strong>${t('blockAction.createDiagramSuccess') || "Éditer le diagramme dans le Lab Excalidraw"}</strong></a></p>`.trim();
|
|
|
|
editor.chain().focus().insertContentAt(insertPos, htmlToInsert).run()
|
|
|
|
toast.success(t('blockAction.createDiagramSuccess') || "Diagramme généré et inséré avec succès !", { id: toastId })
|
|
|
|
} catch (err: any) {
|
|
console.error('[handleCreateDiagram] Error:', err)
|
|
toast.error(err.message || "Une erreur est survenue lors de la génération.", { id: toastId })
|
|
}
|
|
}, [editor, blockPos, blockNode, onClose, t])
|
|
|
|
|
|
const handleTurnInto = useCallback((option: TurnIntoOption) => {
|
|
if (blockPos >= 0 && blockNode) {
|
|
if (option.isDatabase) {
|
|
const notebookId = (editor.storage as any).structuredViewBlock?.notebookId as string | null
|
|
replaceBlockWithStructuredView(editor, blockPos, blockNode, notebookId)
|
|
} else if (option.command) {
|
|
focusBlock(editor, blockPos)
|
|
option.command(editor)
|
|
}
|
|
}
|
|
setShowTurnInto(false)
|
|
onClose()
|
|
}, [editor, blockNode, blockPos, onClose])
|
|
|
|
const handleTurnIntoEnter = useCallback(() => {
|
|
if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current)
|
|
setShowTurnInto(true)
|
|
}, [])
|
|
|
|
const handleTurnIntoLeave = useCallback(() => {
|
|
hoverTimerRef.current = setTimeout(() => setShowTurnInto(false), 200)
|
|
}, [])
|
|
|
|
const handleSubmenuEnter = useCallback(() => {
|
|
if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
function handleClickOutside(e: MouseEvent) {
|
|
if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
|
|
onClose()
|
|
}
|
|
}
|
|
function handleKeyDown(e: KeyboardEvent) {
|
|
if (e.key === 'Escape') onClose()
|
|
}
|
|
document.addEventListener('mousedown', handleClickOutside)
|
|
document.addEventListener('keydown', handleKeyDown)
|
|
return () => {
|
|
document.removeEventListener('mousedown', handleClickOutside)
|
|
document.removeEventListener('keydown', handleKeyDown)
|
|
if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current)
|
|
}
|
|
}, [onClose])
|
|
|
|
const menuLeft = anchorRect.right + 6
|
|
const menuTop = anchorRect.top - 4
|
|
|
|
const menuStyle: React.CSSProperties = {
|
|
position: 'fixed',
|
|
left: menuLeft > window.innerWidth - 230 ? anchorRect.left - 215 : menuLeft,
|
|
top: menuTop + 320 > window.innerHeight ? window.innerHeight - 330 : menuTop,
|
|
zIndex: 9999,
|
|
}
|
|
|
|
return createPortal(
|
|
<div ref={menuRef} style={menuStyle} className="block-action-menu">
|
|
{/* Actions de déplacement */}
|
|
<button type="button" className="block-action-item" onClick={handleMoveUp}>
|
|
<ArrowUp size={16} />
|
|
<span>{t('blockAction.moveUp')}</span>
|
|
</button>
|
|
<button type="button" className="block-action-item" onClick={handleMoveDown}>
|
|
<ArrowDown size={16} />
|
|
<span>{t('blockAction.moveDown')}</span>
|
|
</button>
|
|
|
|
<div className="block-action-separator" />
|
|
|
|
{/* Transformer en */}
|
|
<div
|
|
className="block-action-submenu-wrap"
|
|
onMouseLeave={handleTurnIntoLeave}
|
|
>
|
|
<button
|
|
type="button"
|
|
className="block-action-item block-action-submenu-trigger"
|
|
onClick={() => setShowTurnInto((v) => !v)}
|
|
onMouseEnter={handleTurnIntoEnter}
|
|
>
|
|
<Repeat size={16} />
|
|
<span>{t('blockAction.turnInto')}</span>
|
|
<ChevronRight size={14} className="ml-auto" />
|
|
</button>
|
|
|
|
{showTurnInto && (
|
|
<div className="block-action-submenu" onMouseEnter={handleSubmenuEnter}>
|
|
{TURN_INTO_OPTIONS.map((opt) => (
|
|
<button
|
|
key={opt.id}
|
|
type="button"
|
|
className="block-action-item"
|
|
onClick={() => handleTurnInto(opt)}
|
|
>
|
|
<opt.icon size={16} />
|
|
<span>{t(`blockAction.turnInto_${opt.id}`)}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="block-action-separator" />
|
|
|
|
{/* Section repliable */}
|
|
<button type="button" className="block-action-item" onClick={() => { turnIntoToggleBlock(editor, blockPos, blockNode); onClose() }}>
|
|
<ChevronsRightLeft size={16} />
|
|
<span>{t('richTextEditor.blockActionInsertToggle')}</span>
|
|
</button>
|
|
|
|
{/* Encadré */}
|
|
<button type="button" className="block-action-item" onClick={() => { turnIntoCalloutBlock(editor, blockPos, blockNode, 'info'); onClose() }}>
|
|
<MessageSquareWarning size={16} />
|
|
<span>{t('richTextEditor.blockActionInsertCallout')}</span>
|
|
</button>
|
|
|
|
{/* Sommaire */}
|
|
<button type="button" className="block-action-item" onClick={() => { insertOutlineBlock(editor); onClose() }}>
|
|
<ListTree size={16} />
|
|
<span>{t('richTextEditor.slashOutline')}</span>
|
|
</button>
|
|
|
|
{/* Colonnes */}
|
|
<button type="button" className="block-action-item" onClick={() => { insertColumnsBlock(editor, 2); onClose() }}>
|
|
<Columns3 size={16} />
|
|
<span>{t('richTextEditor.slashColumns')}</span>
|
|
</button>
|
|
|
|
<div className="block-action-separator" />
|
|
|
|
{/* Création de diagramme */}
|
|
<button type="button" className="block-action-item" onClick={() => { void handleCreateDiagram() }}>
|
|
<Sparkles size={16} className="text-amber-500 transition-all duration-200" />
|
|
<span className="font-medium text-amber-700 dark:text-amber-400">{t('blockAction.createDiagram')}</span>
|
|
</button>
|
|
|
|
<div className="block-action-separator" />
|
|
|
|
{/* Copier */}
|
|
<button type="button" className="block-action-item" onClick={() => { void handleCopyContent() }}>
|
|
<ClipboardCopy size={16} />
|
|
<span>{t('blockAction.copyContent')}</span>
|
|
</button>
|
|
<button type="button" className="block-action-item" onClick={() => { void handleCopyRef() }}>
|
|
<Link size={16} />
|
|
<span>{t('blockAction.copyRef')}</span>
|
|
</button>
|
|
|
|
<div className="block-action-separator" />
|
|
|
|
{/* Actions destructives */}
|
|
<button type="button" className="block-action-item" onClick={handleDuplicate}>
|
|
<Copy size={16} />
|
|
<span>{t('blockAction.duplicate')}</span>
|
|
</button>
|
|
<button type="button" className="block-action-item block-action-item--danger" onClick={handleDelete}>
|
|
<Trash2 size={16} />
|
|
<span>{t('blockAction.delete')}</span>
|
|
</button>
|
|
</div>,
|
|
document.body
|
|
)
|
|
}
|