Skip to main content

​
Paragraph Plugin

The Paragraph plugin provides the fundamental text block for your editor. It’s the default block type and supports all text formatting marks.

​
Installation

npm install @yoopta/paragraph

​
Usage

import Paragraph from '@yoopta/paragraph';
import { createYooptaEditor } from '@yoopta/editor';

const plugins = [Paragraph];
const editor = createYooptaEditor({ plugins });

​
Features

  • Plain text content with mark support (bold, italic, etc.)
  • Keyboard shortcuts: p, text
  • HTML, Markdown, and Email export
  • Supports alignment (left, center, right)
  • Supports nesting via depth

​
Options

The paragraph plugin is configured with these default options: 
{
  type: 'Paragraph',
  options: {
    display: {
      title: 'Text',
      description: 'Start writing plain text.',
    },
    shortcuts: ['p', 'text'],
  },
}

​
Element Type

import type { ParagraphElement } from '@yoopta/paragraph';

type ParagraphElement = SlateElement<'paragraph'>;

​
Commands

The Paragraph plugin exports ParagraphCommands for programmatic manipulation: 
import { ParagraphCommands } from '@yoopta/paragraph';

// Access via editor.commands
editor.commands.Paragraph.insertParagraph();
See the Commands API for available methods.

​
Parsers

​
HTML

Deserialize: Converts <p> tags to paragraph blocks Serialize: Outputs paragraph with alignment and depth metadata 
<p data-meta-align="left" data-meta-depth="0" 
   style="margin-left: 0px; text-align: left">
  Paragraph text content
</p>

​
Markdown

Paragraph text content

​
Email

Wraps content in a table structure for email client compatibility: 
<table style="width: 100%">
  <tbody>
    <tr>
      <td>
        <p style="font-size: 16px; line-height: 1.75rem; margin: .5rem 0 0;">
          Paragraph text content
        </p>
      </td>
    </tr>
  </tbody>
</table>

​
Examples

​
Basic Usage

import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
import Paragraph from '@yoopta/paragraph';

function Editor() {
  const editor = useMemo(() => 
    createYooptaEditor({ plugins: [Paragraph] }), 
    []
  );

  return <YooptaEditor editor={editor} />;
}

​
Programmatic Insertion

import { Blocks } from '@yoopta/editor';

// Insert a new paragraph block
Blocks.insertBlock(editor, {
  type: 'Paragraph',
  value: [
    {
      id: generateId(),
      type: 'paragraph',
      children: [{ text: 'New paragraph content' }],
    },
  ],
});

​
Using Element Builder

// Create paragraph element using editor.y builder
const paragraphElement = editor.y('paragraph', {
  children: [
    editor.y.text('Hello '),
    editor.y.text('World', { bold: true }),
  ],
});

Build docs developers (and LLMs) love

Get started for freeTalk to us