Skip to main content

​
Overview

YooptaContentValue is the primary data structure that represents the complete content of a Yoopta Editor instance. It’s a record where each key is a unique block ID and each value is a YooptaBlockData object.

​
Type Definition

type YooptaContentValue = Record<string, YooptaBlockData>;

​
Structure

The content value is organized as a flat object structure, where:
  • Keys: Unique block identifiers (typically UUIDs)
  • Values: Block data objects containing the block’s content and metadata

​
Properties

​
[blockId]
YooptaBlockData
required
Each key represents a unique block ID, with its corresponding block data as the value. See YooptaBlockData for the complete structure.

​
Example

const editorValue: YooptaContentValue = {
  "block-uuid-1": {
    id: "block-uuid-1",
    type: "Paragraph",
    meta: {
      order: 0,
      depth: 0,
      align: "left"
    },
    value: [
      {
        id: "element-uuid-1",
        type: "paragraph",
        children: [
          { text: "Hello, world!" }
        ],
        props: {
          nodeType: "block"
        }
      }
    ]
  },
  "block-uuid-2": {
    id: "block-uuid-2",
    type: "HeadingOne",
    meta: {
      order: 1,
      depth: 0,
      align: "left"
    },
    value: [
      {
        id: "element-uuid-2",
        type: "heading-one",
        children: [
          { text: "Getting Started", bold: true }
        ],
        props: {
          nodeType: "block"
        }
      }
    ]
  }
};

​
Usage

​
Getting Editor Content

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

const editor = createYooptaEditor({ plugins });

// Get the current editor value
const content: YooptaContentValue = editor.getEditorValue();

​
Setting Editor Content

// Set new content
editor.setEditorValue(newContent);

// Or pass it to YooptaEditor component
<YooptaEditor
  editor={editor}
  value={initialContent}
  onChange={(value) => {
    console.log('Content updated:', value);
  }}
/>

​
Iterating Over Blocks

const content = editor.getEditorValue();

// Get all block IDs
const blockIds = Object.keys(content);

// Iterate over blocks
Object.entries(content).forEach(([blockId, blockData]) => {
  console.log(`Block ${blockId}:`, blockData.type);
});

// Filter blocks by type
const paragraphs = Object.entries(content)
  .filter(([_, block]) => block.type === 'Paragraph')
  .map(([id, block]) => ({ id, block }));

​
Serialization

The content value can be serialized to various formats: 
// Convert to HTML
const html = editor.getHTML(content);

// Convert to Markdown
const markdown = editor.getMarkdown(content);

// Convert to plain text
const plainText = editor.getPlainText(content);

// Convert to JSON (for storage)
const json = JSON.stringify(content);

​
Working with onChange

<YooptaEditor
  editor={editor}
  onChange={(value, { operations }) => {
    // value is YooptaContentValue
    console.log('New content:', value);
    console.log('Operations applied:', operations);
    
    // Save to database, update state, etc.
    saveContent(value);
  }}
/>

​
Block Order

While YooptaContentValue is a flat object structure, block ordering is maintained through the meta.order property of each block: 
// Get blocks sorted by order
const sortedBlocks = Object.values(content)
  .sort((a, b) => a.meta.order - b.meta.order);

// Get the first block
const firstBlock = sortedBlocks[0];

// Get the last block
const lastBlock = sortedBlocks[sortedBlocks.length - 1];

​
Type Safety

import type { YooptaContentValue } from '@yoopta/editor';

function processContent(content: YooptaContentValue) {
  // TypeScript will provide autocomplete and type checking
  Object.entries(content).forEach(([blockId, block]) => {
    console.log(block.type); // ✓ Type-safe
    console.log(block.meta.order); // ✓ Type-safe
  });
}

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us