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 { BlockquoteRules, HeadingRules, HorizontalRuleRules } from 'platejs';
import {
BlockquotePlugin,
HeadingPlugin,
HorizontalRulePlugin,
ParagraphPlugin,
} from 'platejs/react';
import { BlockquoteElement } from '@/components/editor/blockquote';
import { HeadingElement } from '@/components/editor/heading';
import { HrElement } from '@/components/editor/horizontal-rule';
import { ParagraphElement } from '@/components/editor/paragraph';
export const BasicBlocksKit = [
ParagraphPlugin.configure({ component: ParagraphElement }),
HeadingPlugin.configure({
component: HeadingElement,
inputRules: [HeadingRules.markdown()],
rules: {
break: { empty: 'reset' },
},
shortcuts: {
toggleHeading1: {
handler: ({ editor }) => {
editor.plugin(HeadingPlugin).update.toggle({ level: 1 });
},
keys: 'mod+alt+1',
},
toggleHeading2: {
handler: ({ editor }) => {
editor.plugin(HeadingPlugin).update.toggle({ level: 2 });
},
keys: 'mod+alt+2',
},
toggleHeading3: {
handler: ({ editor }) => {
editor.plugin(HeadingPlugin).update.toggle({ level: 3 });
},
keys: 'mod+alt+3',
},
toggleHeading4: {
handler: ({ editor }) => {
editor.plugin(HeadingPlugin).update.toggle({ level: 4 });
},
keys: 'mod+alt+4',
},
toggleHeading5: {
handler: ({ editor }) => {
editor.plugin(HeadingPlugin).update.toggle({ level: 5 });
},
keys: 'mod+alt+5',
},
toggleHeading6: {
handler: ({ editor }) => {
editor.plugin(HeadingPlugin).update.toggle({ level: 6 });
},
keys: 'mod+alt+6',
},
},
}),
BlockquotePlugin.configure({
component: BlockquoteElement,
inputRules: [BlockquoteRules.markdown()],
shortcuts: { toggle: { keys: 'mod+shift+period' } },
}),
HorizontalRulePlugin.configure({
component: HrElement,
inputRules: [
HorizontalRuleRules.markdown({ variant: '-' }),
HorizontalRuleRules.markdown({ variant: '_' }),
],
}),
] as const;'use client';
import { BlockquoteRules, HeadingRules, HorizontalRuleRules } from 'platejs';
import {
BlockquotePlugin,
HeadingPlugin,
HorizontalRulePlugin,
ParagraphPlugin,
} from 'platejs/react';
import { BlockquoteElement } from '@/components/editor/blockquote';
import { HeadingElement } from '@/components/editor/heading';
import { HrElement } from '@/components/editor/horizontal-rule';
import { ParagraphElement } from '@/components/editor/paragraph';
export const BasicBlocksKit = [
ParagraphPlugin.configure({ component: ParagraphElement }),
HeadingPlugin.
BlockquoteElement: Renders blockquote elements.Add the kit to your plugins:
import { createEditor } from 'platejs/react';
import { BasicBlocksKit } from '@/components/editor/basic-blocks';
const editor = createEditor({
plugins: [
// ...otherPlugins,
...BasicBlocksKit,
],
});import { createEditor } from 'platejs/react';
import { BasicBlocksKit } from '@/components/editor/basic-blocks';
const editor =
Include BlockquotePlugin in your Plate plugins array when creating the editor.
import { BlockquotePlugin } from 'platejs/react';
import { createEditor } from 'platejs/react';
const editor = createEditor({
plugins: [
// ...otherPlugins,
BlockquotePlugin,
],
});import { BlockquotePlugin } from 'platejs/react';
import { createEditor } from 'platejs/react';
const editor = createEditor({
Configure BlockquotePlugin with the component and shortcut used by your app.
The toggle shortcut dispatches the plugin's structural toggle command.
import { BlockquotePlugin } from 'platejs/react';
import { createEditor } from 'platejs/react';
import { BlockquoteElement } from '@/components/editor/blockquote';
const editor = createEditor({
plugins: [
// ...otherPlugins,
BlockquotePlugin.configure({
component: BlockquoteElement,
shortcuts: { toggle: { keys: 'mod+shift+period' } },
}),
],
});
.configure({ component }): Assigns BlockquoteElement to render blockquote elements.shortcuts.toggle: Dispatches editor.plugin(BlockquotePlugin).update.toggle().Add a structural action that calls the blockquote feature directly:
import { BaseBlockquotePlugin, PLUGINS } from 'platejs';
const turnIntoItem = {
icon: <QuoteIcon />,
label: 'Quote',
value: PLUGINS.blockquote,
onSelect: () => {
const blockquote = editor.plugin(BaseBlockquotePlugin);
if (!blockquote.installed || editor.read.view.isReadOnly()) return;
blockquote.update.toggle();
},
};Add an insert action that calls the installed blockquote feature:
import { BaseBlockquotePlugin, PLUGINS } from 'platejs';
const insertItem = {
icon: <QuoteIcon />,
label: 'Quote',
value: PLUGINS.blockquote,
onSelect: () => {
const blockquote = editor.plugin(BaseBlockquotePlugin);
if (!blockquote.installed || editor.read.view.isReadOnly()) return;
blockquote.update.insert({}, { select: true });
},
};Plugin for blockquote container elements. Renders as <blockquote> HTML element by default.
Wrap each selected block in a blockquote, preserving unselected blocks and
leaving existing quotes intact. Pass at to target a location or node selection.
editor.plugin(BlockquotePlugin).update.wrap();editor.plugin(BlockquotePlugin).update.wrap();Wraps the current block or selection in a blockquote. If the selection is already inside a blockquote, it unwraps the quoted blocks.
editor.plugin(BlockquotePlugin).update.toggle();editor.plugin(BlockquotePlugin).update.toggle();import { BaseBlockquotePlugin, PLUGINS } from 'platejs';
const turnIntoItem = {
icon: <QuoteIcon />,
label: 'Quote',
value: PLUGINS.blockquote,
onSelect: () => {
const blockquote = editor.plugin(BaseBlockquotePlugin);
if (!blockquote.installed || editor.read.view.isReadOnly()) return;
blockquote.update.toggle();
},
};import { BaseBlockquotePlugin, PLUGINS } from 'platejs';
const insertItem = {
icon: <QuoteIcon />,
label: 'Quote',
value: PLUGINS.blockquote,
onSelect: () => {
const blockquote = editor.plugin(BaseBlockquotePlugin);
if (!blockquote.installed || editor.read.view.isReadOnly()) return;
blockquote.update.insert({}, { select: true });
},
};