Document Structure Builder

Build a utility that creates Slate editor document structures with various element types and text formatting properties using JSX syntax.

Requirements

Implement a function createDocument(config) that accepts a configuration object and returns a Slate editor structure. The configuration object specifies the document structure with different element types and text formatting.

The configuration object has the following shape:

interface Config {
  elements: Array<{
    type: string;
    properties?: Record<string, any>;
    content: Array<string | {
      text: string;
      formatting?: Record<string, boolean>;
    }>;
  }>;
}

Behavior

1. Each element in the config should be created with its specified type attribute
2. If an element has properties, those should be applied as attributes to the element
3. Content can be either plain strings or objects with text and formatting properties
4. When formatting is specified (e.g., { bold: true, italic: true }), apply those as attributes to text nodes
5. The function should return a complete editor structure with all elements as children

Test Cases

• Given a config with one element of type "paragraph" containing plain text "Hello", it creates an editor with a paragraph element @test
• Given a config with an element of type "heading" with property level: 1 and text "Title", it creates an editor with a heading element that has the level property @test
• Given a config with an element containing text with formatting { bold: true }, it creates an editor with a text node that has the bold property @test
• Given a config with multiple elements of different types and mixed plain/formatted text, it creates an editor with all elements in order @test

Implementation

@generates

API

/**
 * Creates a Slate editor document structure from a configuration object.
 *
 * @param {Config} config - Configuration object specifying document structure
 * @returns {Editor} A Slate editor object with the specified structure
 */
function createDocument(config) {
  // IMPLEMENTATION HERE
}

module.exports = { createDocument };

Dependencies { .dependencies }

slate-hyperscript { .dependency }

Provides JSX-based document creation utilities for Slate editors.

@satisfied-by