146 lines
4.1 KiB
TypeScript
146 lines
4.1 KiB
TypeScript
"use client"
|
|
|
|
import type { ReactNode } from "react"
|
|
import {
|
|
ClipboardPaste,
|
|
ClipboardX,
|
|
Copy,
|
|
Redo2,
|
|
ScanSearch,
|
|
Scissors,
|
|
SquareDashed,
|
|
Trash2,
|
|
Undo2,
|
|
} from "lucide-react"
|
|
import {
|
|
MenubarContent,
|
|
MenubarItem,
|
|
MenubarMenu,
|
|
MenubarSeparator,
|
|
MenubarTrigger,
|
|
} from "@/components/ui/menubar"
|
|
import { DocsMenuShortcut } from "@/components/drive/richtext/docs-menu-shortcut"
|
|
import { DOCS_MENUBAR_CONTENT_PROPS } from "@/components/drive/richtext/docs-menubar-props"
|
|
|
|
export type DocsEditMenuActions = {
|
|
onUndo: () => void
|
|
onRedo: () => void
|
|
onCut: () => void
|
|
onCopy: () => void
|
|
onPaste: () => void
|
|
onPastePlain: () => void
|
|
onSelectAll: () => void
|
|
onDelete: () => void
|
|
onFindReplace: () => void
|
|
}
|
|
|
|
export type DocsEditMenuState = {
|
|
canUndo: boolean
|
|
canRedo: boolean
|
|
}
|
|
|
|
function MenuIcon({ children }: { children: ReactNode }) {
|
|
return <span className="docs-menu-item-icon">{children}</span>
|
|
}
|
|
|
|
export function DocsEditMenu({
|
|
actions,
|
|
state,
|
|
disabled,
|
|
}: {
|
|
actions: DocsEditMenuActions
|
|
state: DocsEditMenuState
|
|
disabled?: boolean
|
|
}) {
|
|
return (
|
|
<MenubarMenu>
|
|
<MenubarTrigger className="docs-menu-trigger">Édition</MenubarTrigger>
|
|
<MenubarContent
|
|
{...DOCS_MENUBAR_CONTENT_PROPS}
|
|
className="docs-menu-content min-w-[300px] overflow-visible"
|
|
data-docs-menu-surface
|
|
>
|
|
<MenubarItem
|
|
className="docs-menu-item"
|
|
disabled={disabled || !state.canUndo}
|
|
onClick={actions.onUndo}
|
|
>
|
|
<MenuIcon>
|
|
<Undo2 className="size-4" />
|
|
</MenuIcon>
|
|
Annuler
|
|
<DocsMenuShortcut shortcutId="edit.undo" />
|
|
</MenubarItem>
|
|
<MenubarItem
|
|
className="docs-menu-item"
|
|
disabled={disabled || !state.canRedo}
|
|
onClick={actions.onRedo}
|
|
>
|
|
<MenuIcon>
|
|
<Redo2 className="size-4" />
|
|
</MenuIcon>
|
|
Rétablir
|
|
<DocsMenuShortcut shortcutId="edit.redo" />
|
|
</MenubarItem>
|
|
|
|
<MenubarSeparator />
|
|
|
|
<MenubarItem className="docs-menu-item" disabled={disabled} onClick={actions.onCut}>
|
|
<MenuIcon>
|
|
<Scissors className="size-4" />
|
|
</MenuIcon>
|
|
Couper
|
|
<DocsMenuShortcut shortcutId="edit.cut" />
|
|
</MenubarItem>
|
|
<MenubarItem className="docs-menu-item" disabled={disabled} onClick={actions.onCopy}>
|
|
<MenuIcon>
|
|
<Copy className="size-4" />
|
|
</MenuIcon>
|
|
Copier
|
|
<DocsMenuShortcut shortcutId="edit.copy" />
|
|
</MenubarItem>
|
|
<MenubarItem className="docs-menu-item" disabled={disabled} onClick={actions.onPaste}>
|
|
<MenuIcon>
|
|
<ClipboardPaste className="size-4" />
|
|
</MenuIcon>
|
|
Coller
|
|
<DocsMenuShortcut shortcutId="edit.paste" />
|
|
</MenubarItem>
|
|
<MenubarItem className="docs-menu-item" disabled={disabled} onClick={actions.onPastePlain}>
|
|
<MenuIcon>
|
|
<ClipboardX className="size-4" />
|
|
</MenuIcon>
|
|
Coller sans la mise en forme
|
|
<DocsMenuShortcut shortcutId="edit.pastePlain" />
|
|
</MenubarItem>
|
|
|
|
<MenubarSeparator />
|
|
|
|
<MenubarItem className="docs-menu-item" disabled={disabled} onClick={actions.onSelectAll}>
|
|
<MenuIcon>
|
|
<SquareDashed className="size-4" />
|
|
</MenuIcon>
|
|
Tout sélectionner
|
|
<DocsMenuShortcut shortcutId="edit.selectAll" />
|
|
</MenubarItem>
|
|
<MenubarItem className="docs-menu-item" disabled={disabled} onClick={actions.onDelete}>
|
|
<MenuIcon>
|
|
<Trash2 className="size-4" />
|
|
</MenuIcon>
|
|
Supprimer
|
|
</MenubarItem>
|
|
|
|
<MenubarSeparator />
|
|
|
|
<MenubarItem className="docs-menu-item" disabled={disabled} onClick={actions.onFindReplace}>
|
|
<MenuIcon>
|
|
<ScanSearch className="size-4" />
|
|
</MenuIcon>
|
|
Rechercher et remplacer
|
|
<DocsMenuShortcut shortcutId="edit.findReplace" />
|
|
</MenubarItem>
|
|
</MenubarContent>
|
|
</MenubarMenu>
|
|
)
|
|
}
|