feat: colonnes multi-colonnes (layout côte à côte style Notion)
Some checks failed
CI / Lint, Unit Tests & Build (push) Failing after 1m26s
CI / Deploy production (on server) (push) Has been skipped

- 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
This commit is contained in:
Antigravity
2026-06-14 18:49:15 +00:00
parent d5b409c1ac
commit 7fedfa8f50
6 changed files with 223 additions and 3 deletions

View File

@@ -32,6 +32,7 @@ import { OutlineExtension, insertOutlineBlock } from './tiptap-outline-extension
import { FindReplaceBar, FindReplaceExtension } from './editor-find-replace-bar'
import { LinkPreviewExtension, insertLinkPreview, isUrl } from './tiptap-link-preview-extension'
import { MathEquationExtension, InlineMathExtension, insertMathEquation } from './tiptap-math-extension'
import { ColumnsExtension, ColumnNode, insertColumnsBlock } from './tiptap-columns-extension'
import { RtlPreserveExtension } from './tiptap-rtl-preserve-extension'
import { ClipArticleExtension } from './tiptap-clip-article-extension'
import { BlockPicker, type BlockSuggestion } from './block-picker'
@@ -68,7 +69,7 @@ import {
FileText, Pilcrow, MessageSquare, AlignLeft, AlignCenter, AlignRight,
Superscript as SuperscriptIcon, Subscript as SubscriptIcon, Expand, Plus,
SpellCheck, Languages, BookOpen, Presentation, BarChart3, Database,
ChevronsRightLeft, MessageSquareWarning, ListTree, FunctionSquare
ChevronsRightLeft, MessageSquareWarning, ListTree, FunctionSquare, Columns3
} from 'lucide-react'
import { cn } from '@/lib/utils'
import { toast } from 'sonner'
@@ -231,6 +232,10 @@ const slashCommands: SlashItem[] = [
title: 'Math', description: 'LaTeX equation block', icon: FunctionSquare, category: 'Basic blocks', shortcut: '$$',
command: (e) => { insertMathEquation(e) },
},
{
title: 'Columns', description: 'Side-by-side layout', icon: Columns3, category: 'Basic blocks', shortcut: '/cols',
command: (e) => { insertColumnsBlock(e, 2) },
},
]
async function aiReformulate(text: string, option: string, t: any, language?: string): Promise<string> {
@@ -480,6 +485,8 @@ export const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorPro
LinkPreviewExtension,
MathEquationExtension,
InlineMathExtension,
ColumnsExtension,
ColumnNode,
ClipArticleExtension,
RtlPreserveExtension,
Placeholder.configure({
@@ -1703,6 +1710,7 @@ function SlashCommandMenu({ editor, onInsertImage, onSuggestCharts }: { editor:
{ ...slashCommands[33], title: t('richTextEditor.slashOutline'), description: t('richTextEditor.slashOutlineDesc'), categoryId: 'text', slashKeywords: ['outline', 'sommaire', 'toc', 'table', 'matieres', 'matières', 'plan'] },
{ ...slashCommands[34], title: t('richTextEditor.slashLinkPreview'), description: t('richTextEditor.slashLinkPreviewDesc'), categoryId: 'embed', slashKeywords: ['link', 'lien', 'url', 'preview', 'apercu', 'aperçu', 'embed', 'card', 'carte'] },
{ ...slashCommands[35], title: t('richTextEditor.slashMath'), description: t('richTextEditor.slashMathDesc'), categoryId: 'text', slashKeywords: ['math', 'maths', 'equation', 'équation', 'formula', 'formule', 'latex', 'katex'] },
{ ...slashCommands[36], title: t('richTextEditor.slashColumns'), description: t('richTextEditor.slashColumnsDesc'), categoryId: 'text', slashKeywords: ['columns', 'colonnes', 'cols', 'layout', 'mise', 'page', 'cote', 'côte'] },
{
title: t('richTextEditor.slashNoteLink'),
description: t('richTextEditor.slashNoteLinkDesc'),