The Ultimate Feature Test: Every Element in One Post

This is the definitive test post — every heading level, every list type, code blocks, links, blockquotes, tables, checklists, inline formatting, and the relationship widget, all in one place. If it renders correctly, everything is working.

Inline Formatting

Normal text. Bold. Italic. Bold + Italic. Underline. Strikethrough. Inline code. All inline marks in one paragraph.

Links: Payload CMS Docs, Next.js, and an internal link to Notes.

Heading Levels

This is H2

This is H3

This is H4

Normal paragraph following H4.

Lists

Unordered List

• First item — plain text
• Second item — bold inside list
• Third item — italic inside list
• Fourth item with inline code

Ordered List

1. Install dependencies with npm install
2. Copy .env.example to .env
3. Run npm run dev and open localhost:3000

Checklist

• Add all Lexical features to payload.config.ts
  
• Fix link node structure (fields.url)
  
• Fix code blocks (block/Code instead of type:code)
  
• Add relationship widget converter
  
• Add syntax highlighting with Prism or Shiki
  
• Add image upload widget test
  

Blockquote

The best way to predict the future is to build it. — Abraham Lincoln (probably misattributed, but still true)

A second blockquote. With bold, italic, and inline code inside.

Fenced Code Blocks

JavaScript — async fetch function:

async function fetchPost(slug) {
  const res = await fetch(`/api/posts?where[slug][equals]=${slug}&depth=1`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const data = await res.json();
  return data.docs?.[0] ?? null;
}

TypeScript — typed Payload query:

import type { Post } from "@/payload-types";

export async function getPost(slug: string): Promise<Post | null> {
  const payload = await getPayload({ config });
  const result = await payload.find({
    collection: "posts",
    where: { slug: { equals: slug }, status: { equals: "published" } },
    limit: 1,
    depth: 2,
  });
  return result.docs[0] ?? null;
}

Shell — deploy commands:

git add .
git commit -m "feat: add all editor features"
git push origin main

Table

All Lexical features and their status:

Relationship Widget

The card below is a relationship node pointing to another post. It should render as an indigo card with a clickable title:

And another one pointing to the original feature test post: