Skip to main content

​
Overview

The buildBlockData method is a utility function that creates a YooptaBlockData structure with default or custom values.

​
Signature

Blocks.buildBlockData(
  block?: BuildBlockDataOptions
): YooptaBlockData

​
Parameters

​
block
BuildBlockDataOptions
Optional configuration object

​
Return Value

Returns a complete YooptaBlockData object.

​
Examples

​
Basic Usage

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

// Create block with defaults
const blockData = Blocks.buildBlockData();
// Returns: { id: '...', type: 'Paragraph', value: [...], meta: { order: 0, depth: 0 } }

// Create block with custom type
const headingBlock = Blocks.buildBlockData({
  type: 'Heading',
});

// Create block with custom ID and meta
const customBlock = Blocks.buildBlockData({
  id: 'my-custom-id',
  type: 'Paragraph',
  meta: {
    order: 5,
    depth: 2,
    align: 'center',
  },
});

​
Create Block with Custom Content

const createCustomBlock = (editor: YooEditor) => {
  return Blocks.buildBlockData({
    type: 'Paragraph',
    value: [
      editor.y('paragraph', {
        children: [editor.y.text('Custom content')]
      })
    ],
    meta: {
      order: 0,
      depth: 0,
    },
  });
};

​
Use Cases

​
Create Block Data for Testing

const createTestBlock = () => {
  return Blocks.buildBlockData({
    type: 'Paragraph',
    value: [
      {
        type: 'paragraph',
        children: [{ text: 'Test content' }],
      },
    ],
  });
};

​
Build Block Data Structure

const buildBlockStructure = (editor: YooEditor, type: string, content: string) => {
  return Blocks.buildBlockData({
    type,
    value: [
      editor.y('paragraph', {
        children: [editor.y.text(content)]
      })
    ],
  });
};

​
Notes

This is a utility function for creating block data structures. It doesn’t insert the block into the editor - use insertBlock for that.
If id is not provided, a unique ID is automatically generated using generateId().
The default block type is 'Paragraph' if not specified.
This method is useful when you need to create block data structures programmatically, for example, when importing content or creating blocks in bulk.

​
Type Definition

type BuildBlockDataOptions = Partial<Omit<YooptaBlockData, 'meta'>> & {
  value?: SlateElement[];
  meta?: Partial<YooptaBlockBaseMeta>;
};

type YooptaBlockData = {
  id: string;
  type: string;
  value: SlateElement[];
  meta: {
    order: number;
    depth: number;
    align?: 'left' | 'center' | 'right';
  };
};

insertBlock

Insert block into editor

getBlock

Get existing block data