Payload CMS Rich Text Demo

Overview

This page demonstrates the rich text capabilities that Payload CMS can support when properly configured.

Code

Inline

This is some code inline baby! There was a variable named meme and it was supreme!

Code block

Plaintext:

Some plain code

TITLE APPROACH:
	Mo Beigi
	Resume – Mo Beigi
	About – Mo Beigi
	Projects – Mo Beigi
	Networks – Mo Beigi
	Blog – Mo Beigi
	{blog_name} - Mo Beigi

Typescript:

type Props = CodeBlockProps & {
  className?: string;
};

C++:

// Your First C++ Program

#include <iostream>

int main() {
    std::cout << "Hello World!";
    return 0;
}

Kolin:

import kotlinx.serialization.Serializable
import kotlin.random.Random

interface Building

@Serializable
class House(
    private val rooms: Int? = 3,
    val name: String = "Palace"
) : Building {
    var residents: Int = 4
        get() {
            println("Current residents: $field")
            return field
        }

    fun burn(evacuation: (people: Int) -> Boolean) {
        rooms ?: return
        if (evacuation((0..residents).random()))

Headings

Note: H1 tag has been disabled for the blog posts type to maintain semantic heading levels.

H2

H3

H4

H5

H6

Heading Underline strikethrough

Text

This is a paragraph of text.

Bold text

Italics

Underlined

Strikethrough

All the styles

10^{to the power of 10!}

10_{looks like you dropped something}

External link to Example.com and Example.com (new tab)

Internal link to Failed to resolve url for collection: posts

Emoji: ✅ 📛 🙉 🚟 😖 🗻

Lists

Unordered list:

• You can dance
• You can jive
• Having the time of your life
• • Ooh, see that girl
  • • Watch that scene
    • • Digging the dancing queen

Ordered list:

1. Step 1
2. Step 2
3. Step 3
4. Step 4
5. 1. Nested
   2. 1. Nested
      2. 1. Nested
         2. 1. Nested

Checkbox

• Tick!
• Not ticked

Quote

A quote by a wise man "boogoo pls"

Tables

Text Alignment

Left H2

Left paragraph

• Left ul

1. Left ol

Left quote

Centered H2

Centered paragraph

• Centered ul

1. Centered ol

Centered quote

Right H2

Right paragraph

• Right ul

1. Right ol

Right quote

Upload

Relationship

User

Category

File

Blocks

MediaBlock (Image)

MediaBlock (Image with Dark / Light variants)

Try changing the theme mode to see the theme appropriate variant!

MediaBlock (Video)

MediaBlock (Video with Dark / Light variants)

Try changing the theme mode to see the theme appropriate variant!

Embeds

Youtube

Vimeo

Twitch

Inline blocks

Blocks that have been inlined! (using inlineBlock)

• Code:
• • Here is a full code block that is inlined:
    

    const hi = 1;
    let bye = 0;

• MediaBlock:
• • Image:
  • Video:
• Embeds:
• • Youtube:
  • Vimeo:
  • Twitch:
• File: Test Text File