npm install @yoopta/blockquote

import Blockquote from '@yoopta/blockquote';
import { createYooptaEditor } from '@yoopta/editor';

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

{
  type: 'Blockquote',
  options: {
    display: {
      title: 'Blockquote',
      description: 'Capture quote',
    },
    shortcuts: ['>'],
  },
}

import type { BlockquoteElement } from '@yoopta/blockquote';

type BlockquoteElement = SlateElement<'blockquote'>;

import { BlockquoteCommands } from '@yoopta/blockquote';

// Access via editor.commands
editor.commands.Blockquote.insertBlockquote();

<blockquote 
  data-meta-align="left" 
  data-meta-depth="0" 
  style="
    margin-left: 0px; 
    text-align: left; 
    border-left: 3px solid; 
    color: #292929; 
    padding: 2px 14px; 
    margin-top: 8px;
  ">
  Quote text content
</blockquote>

> Quote text content

<table style="width:100%;">
  <tbody style="width:100%;">
    <tr>
      <td>
        <blockquote 
          data-meta-align="left" 
          data-meta-depth="0" 
          style="
            line-height: 1.75rem;
            margin: 8px 0 0; 
            border-color: #e5e7eb;
            border-left: 3px solid; 
            color: #292929; 
            padding: 2px 14px; 
            margin-top: 8px;
          ">
          Quote text content
        </blockquote>
      </td>
    </tr>
  </tbody>
</table>

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

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

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

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

// Insert a blockquote
Blocks.insertBlock(editor, {
  type: 'Blockquote',
  value: [
    {
      id: generateId(),
      type: 'blockquote',
      children: [
        { text: 'The only way to do great work is to love what you do.' },
      ],
    },
  ],
});

// Create blockquote with bold text
const blockquoteElement = editor.y('blockquote', {
  children: [
    editor.y.text('"'),
    editor.y.text('Innovation distinguishes between a leader and a follower.', 
      { bold: true }
    ),
    editor.y.text('" - Steve Jobs', { italic: true }),
  ],
});

Blocks.insertBlock(editor, {
  type: 'Blockquote',
  value: [blockquoteElement],
});

> [Space] → Converts to blockquote

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

// Toggle a paragraph to blockquote (preserves content)
Blocks.toggleBlock(editor, {
  blockId: 'existing-block-id',
  type: 'Blockquote',
});