Blockquote

PreviousNext
Blockquote Element
Loading...

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.

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.

引用块提示框