AI LeafAI MenuAI Toolbar ButtonAlign Toolbar ButtonBlock Context MenuBlock DiscussionBlock DraggableBlock SelectionBlock SuggestionBlockquote ElementCallout NodeCaptionCode Block NodesCode LeafColumn NodesComment LeafComment Toolbar ButtonCursor OverlayDate ElementEditorEmoji Input ElementEmoji Toolbar ButtonEquation ElementEquation Toolbar ButtonExport Toolbar ButtonFixed ToolbarFixed Toolbar ButtonsFloating ToolbarFloating Toolbar ButtonsFont Color Toolbar ButtonFont Size Toolbar ButtonHeading ElementHighlight LeafHistory Toolbar ButtonHorizontal Rule ElementImage ElementImport Toolbar ButtonIndent Toolbar ButtonsInline ComboboxInsert Toolbar ButtonKeyboard Input LeafLine Height Toolbar ButtonLink ElementLink Floating ToolbarLink Toolbar ButtonListList Toolbar ButtonMark Toolbar ButtonMedia Audio ElementMedia Embed ElementMedia File ElementMedia Placeholder ElementMedia Preview DialogMedia ToolbarMedia Toolbar ButtonMedia Upload ToastMedia Video ElementMention NodesMode Toolbar ButtonMore Toolbar ButtonParagraph ElementResize HandleSlash Input ElementSuggestion LeafSuggestion Toolbar ButtonTable ElementTable Toolbar ButtonTOC ElementToggle ElementToggle Toolbar ButtonToolbarTurn Into Toolbar Button
Loading...
Files
components/single-block-demo.tsx
'use client';
import * as React from 'react';
import { SingleBlockPlugin, SingleLinePlugin } from 'platejs';
import { Plate, usePlateEditor } from 'platejs/react';
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';
export default function SingleBlockDemo() {
const [isSingleBlock, setIsSingleBlock] = React.useState(true);
const editor = usePlateEditor(
{
plugins: [
...EditorKit,
isSingleBlock ? SingleBlockPlugin : SingleLinePlugin,
],
value: [
{
children: [
{
text: `Try typing or pasting text with multiple lines. ${
isSingleBlock
? String.raw`With Single Block mode, line breaks become soft breaks (\n).`
: 'With Single Line mode, all line breaks are removed.'
}`,
},
],
type: 'p',
},
],
},
[isSingleBlock]
);
return (
<div className="space-y-4">
<Plate editor={editor}>
<div className="flex items-center space-x-2 p-2">
<Checkbox
id="single-block-mode"
checked={isSingleBlock}
onCheckedChange={(checked) =>
setIsSingleBlock(checked === 'indeterminate' ? false : checked)
}
/>
<Label htmlFor="single-block-mode">
{String.raw`Single Block Mode (allows line breaks as \n)`}
</Label>
</div>
<EditorContainer variant="demo">
<Editor />
</EditorContainer>
</Plate>
</div>
);
}