Blockquote

PreviousNext
Blockquote Element
Loading...
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

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

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

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

Features

  • Create blockquotes to emphasize important information or highlight quotes from external sources.
  • Renders as <blockquote> HTML element by default.

Kit Usage

Installation

The fastest way to add the blockquote plugin is with the BasicBlocksKit, which includes pre-configured BlockquotePlugin along with other basic block elements and their Plate UI components.

'use client';
 
import {
  BlockquotePlugin,
  H1Plugin,
  H2Plugin,
  H3Plugin,
  H4Plugin,
  H5Plugin,
  H6Plugin,
  HorizontalRulePlugin,
} from '@platejs/basic-nodes/react';
import { ParagraphPlugin } from 'platejs/react';
 
import { BlockquoteElement } from '@/components/ui/blockquote-node';
import {
  H1Element,
  H2Element,
  H3Element,
  H4Element,
  H5Element,
  H6Element,
} from '@/components/ui/heading-node';
import { HrElement } from '@/components/ui/hr-node';
import { ParagraphElement } from '@/components/ui/paragraph-node';
 
export const BasicBlocksKit = [
  ParagraphPlugin.withComponent(ParagraphElement),
  H1Plugin.configure({
    node: {
      component: H1Element,
    },
    rules: {
      break: { empty: 'reset' },
    },
    shortcuts: { toggle: { keys: 'mod+alt+1' } },
  }),
  H2Plugin.configure({
    node: {
      component: H2Element,
    },
    rules: {
      break: { empty: 'reset' },
    },
    shortcuts: { toggle: { keys: 'mod+alt+2' } },
  }),
  H3Plugin.configure({
    node: {
      component: H3Element,
    },
    rules: {
      break: { empty: 'reset' },
    },
    shortcuts: { toggle: { keys: 'mod+alt+3' } },
  }),
  H4Plugin.configure({
    node: {
      component: H4Element,
    },
    rules: {
      break: { empty: 'reset' },
    },
    shortcuts: { toggle: { keys: 'mod+alt+4' } },
  }),
  H5Plugin.configure({
    node: {
      component: H5Element,
    },
    rules: {
      break: { empty: 'reset' },
    },
    shortcuts: { toggle: { keys: 'mod+alt+5' } },
  }),
  H6Plugin.configure({
    node: {
      component: H6Element,
    },
    rules: {
      break: { empty: 'reset' },
    },
    shortcuts: { toggle: { keys: 'mod+alt+6' } },
  }),
  BlockquotePlugin.configure({
    node: { component: BlockquoteElement },
    shortcuts: { toggle: { keys: 'mod+shift+period' } },
  }),
  HorizontalRulePlugin.withComponent(HrElement),
];

Add Kit

Add the kit to your plugins:

import { createPlateEditor } from 'platejs/react';
import { BasicBlocksKit } from '@/components/editor/plugins/basic-blocks-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...BasicBlocksKit,
  ],
});

Manual Usage

Installation

pnpm add @platejs/basic-nodes

Add Plugin

Include BlockquotePlugin in your Plate plugins array when creating the editor.

import { BlockquotePlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    BlockquotePlugin,
  ],
});

Configure Plugin

You can configure the BlockquotePlugin with options such as a specific rendering component or custom keyboard shortcuts.

import { BlockquotePlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
import { BlockquoteElement } from '@/components/ui/blockquote-node';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    BlockquotePlugin.configure({
      node: { component: BlockquoteElement },
      shortcuts: { toggle: 'mod+shift+.' },
    }),
  ],
});
  • node.component: Assigns BlockquoteElement to render blockquote elements.
  • shortcuts.toggle: Defines a keyboard shortcut to toggle blockquote formatting.

Turn Into Toolbar Button

You can add blockquote to the Turn Into Toolbar Button to toggle blockquotes:

{
  icon: <QuoteIcon />,
  label: 'Quote',
  value: KEYS.blockquote,
}

Insert Toolbar Button

You can add blockquote to the Insert Toolbar Button to insert blockquotes:

{
  icon: <QuoteIcon />,
  label: 'Quote',
  value: KEYS.blockquote,
}

Plugins

BlockquotePlugin

Plugin for blockquote elements. Renders as <blockquote> HTML element by default.

Transforms

tf.blockquote.toggle

Toggles the current block between blockquote and paragraph. If the block is already a blockquote, it reverts to a paragraph. If it's a paragraph or another block type, it converts to a blockquote.

SuggestionHeading
Blockquote - Plate