║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Blockquote docs:

• route: /docs/components/blockquote-node title: Blockquote Element

---

<ComponentPreview name="basic-blocks-demo" /> <PackageInfo>

Features

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

</PackageInfo>

Kit Usage

<Steps>

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.

<ComponentSource name="basic-blocks-kit" />

• BlockquoteElement: Renders blockquote elements.

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,
  ],
});

</Steps>

Manual Usage

<Steps>

Installation

npm install @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,
}

</Steps>

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.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║