Components
Media Toolbar Button
Media Toolbar Button
Insert or manage media elements using a toolbar button.
Installation
npx @udecode/plate-ui@latest add media-toolbar-button
Examples
import React from 'react';
import {
BoldPlugin,
CodePlugin,
ItalicPlugin,
StrikethroughPlugin,
UnderlinePlugin,
} from '@udecode/plate-basic-marks/react';
import { useEditorReadOnly } from '@udecode/plate-common/react';
import {
FontBackgroundColorPlugin,
FontColorPlugin,
} from '@udecode/plate-font/react';
import { ListStyleType } from '@udecode/plate-indent-list';
import { ImagePlugin } from '@udecode/plate-media/react';
import { Icons, iconVariants } from '@/components/icons';
import { AlignDropdownMenu } from '@/components/plate-ui/align-dropdown-menu';
import { CommentToolbarButton } from '@/components/plate-ui/comment-toolbar-button';
import { EmojiDropdownMenu } from '@/components/plate-ui/emoji-dropdown-menu';
import { IndentListToolbarButton } from '@/components/plate-ui/indent-list-toolbar-button';
import { IndentToolbarButton } from '@/components/plate-ui/indent-toolbar-button';
import { LineHeightDropdownMenu } from '@/components/plate-ui/line-height-dropdown-menu';
import { LinkToolbarButton } from '@/components/plate-ui/link-toolbar-button';
import { MediaToolbarButton } from '@/components/plate-ui/media-toolbar-button';
import { MoreDropdownMenu } from '@/components/plate-ui/more-dropdown-menu';
import { OutdentToolbarButton } from '@/components/plate-ui/outdent-toolbar-button';
import { TableDropdownMenu } from '@/components/plate-ui/table-dropdown-menu';
import { ColorDropdownMenu } from './color-dropdown-menu';
import { IndentTodoToolbarButton } from './indent-todo-toolbar-button';
import { InsertDropdownMenu } from './insert-dropdown-menu';
import { MarkToolbarButton } from './mark-toolbar-button';
import { ModeDropdownMenu } from './mode-dropdown-menu';
import { ToolbarGroup } from './toolbar';
import { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';
export function FixedToolbarButtons() {
const readOnly = useEditorReadOnly();
return (
<div className="w-full overflow-hidden">
<div
className="flex flex-wrap"
style={{
transform: 'translateX(calc(-1px))',
}}
>
{!readOnly && (
<>
<ToolbarGroup noSeparator>
<InsertDropdownMenu />
<TurnIntoDropdownMenu />
</ToolbarGroup>
<ToolbarGroup>
<MarkToolbarButton nodeType={BoldPlugin.key} tooltip="Bold (⌘+B)">
<Icons.bold />
</MarkToolbarButton>
<MarkToolbarButton
nodeType={ItalicPlugin.key}
tooltip="Italic (⌘+I)"
>
<Icons.italic />
</MarkToolbarButton>
<MarkToolbarButton
nodeType={UnderlinePlugin.key}
tooltip="Underline (⌘+U)"
>
<Icons.underline />
</MarkToolbarButton>
<MarkToolbarButton
nodeType={StrikethroughPlugin.key}
tooltip="Strikethrough (⌘+⇧+M)"
>
<Icons.strikethrough />
</MarkToolbarButton>
<MarkToolbarButton nodeType={CodePlugin.key} tooltip="Code (⌘+E)">
<Icons.code />
</MarkToolbarButton>
</ToolbarGroup>
<ToolbarGroup>
<ColorDropdownMenu
nodeType={FontColorPlugin.key}
tooltip="Text Color"
>
<Icons.color className={iconVariants({ variant: 'toolbar' })} />
</ColorDropdownMenu>
<ColorDropdownMenu
nodeType={FontBackgroundColorPlugin.key}
tooltip="Highlight Color"
>
<Icons.bg className={iconVariants({ variant: 'toolbar' })} />
</ColorDropdownMenu>
</ToolbarGroup>
<ToolbarGroup>
<AlignDropdownMenu />
<LineHeightDropdownMenu />
<IndentListToolbarButton nodeType={ListStyleType.Disc} />
<IndentListToolbarButton nodeType={ListStyleType.Decimal} />
<IndentTodoToolbarButton />
<OutdentToolbarButton />
<IndentToolbarButton />
</ToolbarGroup>
<ToolbarGroup>
<LinkToolbarButton />
<MediaToolbarButton nodeType={ImagePlugin.key} />
<TableDropdownMenu />
<EmojiDropdownMenu />
<MoreDropdownMenu />
</ToolbarGroup>
</>
)}
<div className="grow" />
<ToolbarGroup noSeparator>
<CommentToolbarButton />
<ModeDropdownMenu />
</ToolbarGroup>
</div>
</div>
);
}