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/basic-nodes';
import {
BlockquotePlugin,
HeadingPlugin,
HorizontalRulePlugin,
} from '@platejs/basic-nodes/react';
import { 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/basic-nodes';
import {
BlockquotePlugin,
HeadingPlugin,
HorizontalRulePlugin,
} from '@platejs/basic-nodes/react';
import { 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';
BlockquoteElement: Renders blockquote elements.Add the kit to your plugins:
import { createPlateEditor } from 'platejs/react';
import { BasicBlocksKit } from '@/components/editor/basic-blocks';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
...BasicBlocksKit,
],
});import { createPlateEditor } from 'platejs/react';
import { BasicBlocksKit } from '@/components/editor/basic-blocks';
const editor = createPlateEditor
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,
],
});import { BlockquotePlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
BlockquotePlugin,
],
});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/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
import { BlockquoteElement } from '@/components/editor/blockquote';
const editor = createPlateEditor({
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().You can add blockquote to the Turn Into Toolbar Button to toggle blockquotes:
import { PLUGINS } from 'platejs';
const turnIntoItem = {
icon: <QuoteIcon />,
label: 'Quote',
value: PLUGINS.blockquote,
};import { PLUGINS } from 'platejs';
const turnIntoItem = {
icon: <QuoteIcon />,
label: 'Quote',
value: PLUGINS.blockquote,
};You can add blockquote to the Insert Toolbar Button to insert blockquotes:
import { PLUGINS } from 'platejs';
const insertItem = {
icon: <QuoteIcon />,
label: 'Quote',
value: PLUGINS.blockquote,
};import { PLUGINS } from 'platejs';
const insertItem = {
icon: <QuoteIcon />,
label: 'Quote',
value: PLUGINS.blockquote,
};Plugin for blockquote container elements. Renders as <blockquote> HTML element by default.
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();