Content Leaf (Text Nodes)

Content leaf nodes, also called Text nodes, are the leaf-level nodes in the Easy Email Pro document tree. They represent actual text content and formatting within elements.

Overview

To accommodate SlateJS requirements, all content blocks must have leaf nodes as children, even for empty elements like images or buttons. This design allows Slate to maintain proper selection ranges and cursor positions.

Empty Elements

For void elements (elements that don't contain text, like images), the children array still contains a text node with empty text:

{
  "type": "standard-image",
  "data": {},
  "attributes": {
    "src": "https://example.com/image.jpg"
  },
  "children": [
    {
      "text": ""
    }
  ]
}

Why? This empty text node allows the parent element to be selectable in the editor and maintains compatibility with Slate's selection model.

Text Nodes with Content

The most common use case is storing text content with formatting:

{
  "text": "Hello, World!",
  "bold": true,
  "color": "#000000",
  "link": {
    "href": "https://example.com",
    "blank": true
  }
}

TextNode Interface

type TextNode = {
  text: string;              // Required: the actual text content
  bold?: boolean;            // Bold formatting
  italic?: boolean;          // Italic formatting
  underline?: boolean;       // Underline formatting
  strikethrough?: boolean;   // Strikethrough formatting
  color?: string;            // Text color (hex, rgb, etc.)
  bgColor?: string;          // Background color
  fontSize?: string;         // Font size (e.g., "16px")
  fontFamily?: string;       // Font family
  link?: {                   // Link configuration
    href?: string;
    blank?: boolean;         // Open in new tab
  } | null;
};

Formatting Examples

Bold and colored text:

{
  "text": "Important Notice",
  "bold": true,
  "color": "#ff0000"
}

Text with link:

{
  "text": "Click here",
  "link": {
    "href": "https://example.com",
    "blank": true
  },
  "underline": true,
  "color": "#0066cc"
}

Multiple formatting:

{
  "text": "Special Offer",
  "bold": true,
  "italic": true,
  "color": "#ffffff",
  "bgColor": "#ff6600"
}

Key Concepts

• All elements must have children: Even void elements need children: [{ text: "" }]
• Text nodes are leaves: They cannot have children themselves
• Formatting is optional: All formatting properties are optional
• Links are applied per text node: Different parts of text can have different links
• Selection support: Text nodes enable Slate's selection and cursor functionality