Fixed Toolbar Buttons

A set of commonly used formatting buttons.

AI Toolbar ButtonAlert DialogAlign Dropdown MenuButtonColor Dropdown MenuComment Toolbar ButtonDropdown MenuEmoji Dropdown MenuHistory 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 function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

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