Comprehensive Lexical Feature Demo

This post demonstrates every available Lexical rich text feature. Use it as a reference for content creation and testing.

Section 1: Text Formatting

Here are all text formatting options and their combinations:

Normal text | Bold (1) | Italic (2) | Bold+Italic (3) | ~~Strikethrough (4)~~

~~Bold+Strikethrough (5)~~ | ~~Italic+Strikethrough (6)~~ | ~~Bold+Italic+Strikethrough (7)~~

Underline (8) | Bold+Underline (9) | Italic+Underline (10) | Bold+Italic+Underline (11)

Inline Code (16) | Bold+Code (17) | Italic+Code (18)

H₂O (subscript 32) | x² (superscript 64) | E=mc² (bold+superscript 65)

Section 2: All Heading Levels

Heading 1 - Bold

Heading 2 - Italic

Heading 3 - `Code`

Heading 4 - Underline

Heading 5 - Strikethrough

Heading 6 - Bold+Italic

Section 3: List Types

Bullet List

First bullet item
Second bullet item with bold text
Third bullet item with inline code

Numbered List

First numbered item
Second numbered item
Third numbered item

Check List

☑ Completed task
☐ Pending task
☑ Another completed task

Nested Bullet List (3 levels)

Level 1 - First
Level 2 - Nested
Level 3 - Deeply nested
Level 3 - Another item
Level 2 - Back up
Level 1 - Second

Nested Numbered List

First main item
Sub-item 1.1
Sub-item 1.2
Second main item
Sub-item 2.1

Section 4: Block Elements

Block Quote

This is a simple block quote. It can contain plain text and is useful for highlighting important statements or citations.

Block Quote with Formatting

This quote contains bold, italic, and inline code formatting.

Consecutive Horizontal Rules

Three horizontal rules in a row:

Section 5: Links

External link (new tab): GitHub

External link (same tab): TypeScript Documentation

Link with bold text and link with italic text

Section 6: Media / Images

Here is an uploaded image with caption:

Modern web development hero image showing code and design elements

Caption: This is the featured image for the post

Section 7: Code Blocks

TypeScript Example

interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

function greetUser(user: User): string {
  return `Hello, ${user.name}!`;
}

const user: User = {
  id: 1,
  name: "John Doe",
  email: "john@example.com",
  isActive: true
};

console.log(greetUser(user));

JavaScript ES6 Example

// Destructuring and spread operator
const { name, ...rest } = user;
const newArray = [...oldArray, newItem];

// Arrow functions and async/await
const fetchData = async (url) => {
  const response = await fetch(url);
  return response.json();
};

// Template literals
const message = `Welcome, ${name}!`;

Python Example

from dataclasses import dataclass
from typing import List, Optional

@dataclass
class Article:
    title: str
    content: str
    author: str
    tags: List[str]
    published: bool = False

    def publish(self) -> None:
        self.published = True
        print(f"Published: {self.title}")

article = Article(
    title="Hello World",
    content="This is my first post.",
    author="Jane",
    tags=["python", "tutorial"]
)
article.publish()

Bash Example

#!/bin/bash

# Install dependencies
npm install

# Build the project
npm run build

# Run tests
npm test

# Deploy to production
if [ "$1" = "--prod" ]; then
  echo "Deploying to production..."
  npm run deploy
fi

JSON Example

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
  "dependencies": {
    "astro": "^4.0.0",
    "react": "^18.2.0"
  }
}

SQL Example

-- Create users table
CREATE TABLE users (
  id SERIAL PRIMARY KEY,
  name VARCHAR(100) NOT NULL,
  email VARCHAR(255) UNIQUE NOT NULL,
  created_at TIMESTAMP DEFAULT NOW()
);

-- Insert sample data
INSERT INTO users (name, email) VALUES
  ('Alice', 'alice@example.com'),
  ('Bob', 'bob@example.com');

-- Query with join
SELECT u.name, p.title
FROM users u
JOIN posts p ON u.id = p.author_id
WHERE p.published = true;

HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>
  <main>
    <h1>Welcome</h1>
    <p>Hello, world!</p>
  </main>
</body>
</html>

CSS Example

:root {
  --primary: #3b82f6;
  --background: #ffffff;
  --text: #1f2937;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.card {
  background: var(--background);
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .container {
    padding: 1rem;
  }
}

Section 8: Edge Cases

Special Characters

Quote with Link

The best documentation is at Payload CMS Docs.

Long Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Conclusion

This post demonstrates all available Lexical features. Use it as a reference when creating content or testing the rendering of various elements.