Fixed Toolbar Buttons

A set of commonly used formatting buttons.

AI Toolbar ButtonAlert DialogAlign Dropdown MenuButtonColor Dropdown MenuComment Toolbar ButtonDropdown MenuEmoji Dropdown MenuExport Toolbar ButtonHistory Toolbar ButtonIndent List Toolbar ButtonIndent Todo Toolbar ButtonIndent Toolbar ButtonInputInsert Dropdown MenuLine Height Dropdown MenuLink Toolbar ButtonMark Toolbar ButtonMedia Toolbar ButtonMode Dropdown MenuMore Dropdown MenuOutdent Toolbar ButtonSeparatorTable Dropdown MenuToggle Toolbar ButtonToolbarTooltipTurn Into Dropdown Menu

Installation

npx shadcx@latest add plate/fixed-toolbar-buttons

Examples

Basic Nodes
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate-common/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}