### Add Typography Features to Lexical Editor Config (TypeScript/Bash)

Source: https://github.com/adrianmaj/payload-lexical-typography/blob/main/README.md

Install the package and enable typography features in the Payload Lexical editor. Configure features like TextColorFeature, TextSizeFeature, TextLetterSpacingFeature, TextLineHeightFeature, and TextFontFamilyFeature. Pass color/size presets and options as needed.

```bash
pnpm add payload-lexical-typography
# OR
npm install payload-lexical-typography
```

```ts
import { lexicalEditor } from "@payloadcms/richtext-lexical";
import {
  TextColorFeature,
  TextSizeFeature,
  TextLetterSpacingFeature,
  TextLineHeightFeature,
  TextFontFamilyFeature,
} from "payload-lexical-typography";

lexicalEditor({
  features: () => {
    return [
      TextColorFeature({
        colors: ["#FFFFFF", "#000000", "#FF0000", "#00FF00", "#0000FF"],
      }),
      TextSizeFeature(),
      TextLetterSpacingFeature(),
      TextLineHeightFeature(),
      TextFontFamilyFeature(),
    ];
  },
});
```

--------------------------------

### Configure PayloadCMS Collection with Typography Features in TypeScript

Source: https://context7.com/adrianmaj/payload-lexical-typography/llms.txt

This code sets up a PayloadCMS collection configuration integrating all typography features such as text color, size, letter spacing, line height, and font family for rich text editing. It relies on the @payloadcms/richtext-lexical and payload-lexical-typography packages, with no external inputs beyond the dependency installations. Outputs include a structured collection configuration object that can be used in PayloadCMS, supporting custom options and features while ensuring compatibility with existing Lexical editors.

```typescript
import { lexicalEditor } from "@payloadcms/richtext-lexical";
import {
  TextColorFeature,
  TextSizeFeature,
  TextLetterSpacingFeature,
  TextLineHeightFeature,
  TextFontFamilyFeature,
} from "payload-lexical-typography";
import type { CollectionConfig } from "payload";

// Collection configuration with all typography features
export const Posts: CollectionConfig = {
  slug: "posts",
  fields: [
    {
      name: "title",
      type: "text",
      required: true,
    },
    {
      name: "content",
      type: "richText",
      editor: lexicalEditor({
        features: () => [
          // Add all typography features
          TextColorFeature({
            colors: [
              { value: "#000000", label: "Black" },
              { value: "#FF0000", label: "Red" },
              { value: "#0000FF", label: "Blue" },
            ],
            colorPicker: true,
          }),
          TextSizeFeature({
            sizes: [
              { value: "14px", label: "Small" },
              { value: "16px", label: "Normal" },
              { value: "20px", label: "Large" },
            ],
            customSize: true,
          }),
          TextLetterSpacingFeature({
            spacings: [
              { value: "0", label: "Normal" },
              { value: "0.05em", label: "Wide" },
            ],
          }),
          TextLineHeightFeature({
            lineHeights: [
              { value: "1.5", label: "Normal" },
              { value: "2", label: "Double" },
            ],
          }),
          TextFontFamilyFeature({
            fontFamilies: [
              { value: "Arial, sans-serif", label: "Arial" },
              { value: "Georgia, serif", label: "Georgia" },
            ],
          }),
        ],
      }),
    },
  ],
};
```

--------------------------------

### Configure Line Height in Payload CMS (TypeScript)

Source: https://context7.com/adrianmaj/payload-lexical-typography/llms.txt

Offers line height configuration with predefined values and optional custom input. Supports standard presets, combined defaults, and fixed value configurations with UI controls.

```typescript
import { lexicalEditor } from "@payloadcms/richtext-lexical";
import { TextLineHeightFeature } from "payload-lexical-typography";

// Basic usage with standard line heights
const editor1 = lexicalEditor({
  features: () => [
    TextLineHeightFeature({
      lineHeights: [
        { value: "1", label: "Compact" },
        { value: "1.5", label: "Normal" },
        { value: "2", label: "Loose" },
      ],
    }),
  ],
});

// Advanced configuration with combined presets
const editor2 = lexicalEditor({
  features: () => [
    TextLineHeightFeature({
      lineHeights: [
        { value: "1.2", label: "Tight" },
        { value: "1.6", label: "Comfortable" },
        { value: "1.8", label: "Relaxed" },
        { value: "2.4", label: "Very Loose" },
      ],
      method: "combine", // Add to defaults
      scroll: true, // Enable scrolling UI
      customLineHeight: true, // Allow custom values
      hideAttribution: false,
    }),
  ],
});

// Fixed presets without custom input
const editor3 = lexicalEditor({
  features: () => [
    TextLineHeightFeature({
      lineHeights: [
        { value: "1.5", label: "Default" },
        { value: "2", label: "Double" },
      ],
      method: "replace",
      customLineHeight: false, // Disable custom field
      scroll: false,
    }),
  ],
});
```

--------------------------------

### TextLineHeightFeature Configuration

Source: https://github.com/adrianmaj/payload-lexical-typography/blob/main/README.md

Configure line height options in the Payload CMS Lexical editor. Provides customization for line height presets, combination method, scroll behavior, and custom input visibility.

```APIDOC
## TextLineHeightFeature

### Description
Configure line height options in the Payload CMS Lexical editor with customizable presets and display behavior.

### Method
CONFIGURATION

### Endpoint
TextLineHeightFeature

### Parameters
#### Configuration Options
- **lineHeights** (Array<{value: string, label: string}>) - Optional - Specifies the line height presets available in the picker. Each line height needs both a display label and CSS value. Default: []
- **method** ("replace" | "combine") - Optional - Determines whether custom sizes replace or combine with defaults. Default: "replace"
- **scroll** (boolean) - Optional - Controls scrollable container for line heights over 4 items. Default: true
- **customLineHeight** (boolean) - Optional - Shows/hides custom line height input field. Default: true

### Request Example
{
  "lineHeights": [
    { "value": "1.2", "label": "Compact" },
    { "value": "1.5", "label": "Normal" },
    { "value": "2.0", "label": "Loose" }
  ],
  "method": "combine",
  "scroll": true,
  "customLineHeight": true
}

### Response
#### Configuration Response
- **lineHeights** (Array<{value: string, label: string}>) - The configured line height options
- **method** (string) - The method used for handling custom line heights
- **scroll** (boolean) - Whether scrolling is enabled for overflow items
- **customLineHeight** (boolean) - Whether custom line height input is visible

#### Response Example
{
  "lineHeights": [
    { "value": "1.2", "label": "Compact" },
    { "value": "1.5", "label": "Normal" }
  ],
  "method": "combine",
  "scroll": true,
  "customLineHeight": true
}
```

--------------------------------

### Configure Letter Spacing in Payload CMS (TypeScript)

Source: https://context7.com/adrianmaj/payload-lexical-typography/llms.txt

Provides letter spacing controls with predefined values and optional custom spacing input. Supports three configuration methods: basic presets, combined defaults, and restricted values only.

```typescript
import { lexicalEditor } from "@payloadcms/richtext-lexical";
import { TextLetterSpacingFeature } from "payload-lexical-typography";

// Basic usage with common spacing values
const editor1 = lexicalEditor({
  features: () => [
    TextLetterSpacingFeature({
      spacings: [
        { value: "-0.05em", label: "Tight" },
        { value: "0", label: "Normal" },
        { value: "0.05em", label: "Wide" },
        { value: "0.1em", label: "Extra Wide" },
      ],
    }),
  ],
});

// Advanced configuration with combined defaults
const editor2 = lexicalEditor({
  features: () => [
    TextLetterSpacingFeature({
      spacings: [
        { value: "0.02em", label: "Slightly Wide" },
        { value: "0.08em", label: "Very Wide" },
      ],
      method: "combine", // Combine with plugin defaults
      scroll: true, // Enable scrolling for many options
      customSpacing: true, // Allow custom value input
      hideAttribution: false,
    }),
  ],
});

// Restricted preset values only
const editor3 = lexicalEditor({
  features: () => [
    TextLetterSpacingFeature({
      spacings: [
        { value: "0", label: "Normal" },
        { value: "0.05em", label: "Wide" },
      ],
      method: "replace",
      customSpacing: false, // Disable custom input
    }),
  ],
});
```

--------------------------------

### Generate Server-Side HTML with Typography Converters in TypeScript

Source: https://context7.com/adrianmaj/payload-lexical-typography/llms.txt

This function generates full HTML for a post using server-side rendering with typography converters. It requires @payloadcms/richtext-lexical and payload-lexical-typography/converters, accepting a post object as input. Produces a complete HTML string for the post, embedding serialized content with custom typography styles, suitable for static generation or SSR scenarios without JavaScript runtime limitations.

```typescript
import { serializeLexical } from "@payloadcms/richtext-lexical";
import { TypographyHTMLConverters } from "payload-lexical-typography/converters";

export async function generatePostHTML(post) {
  const html = await serializeLexical({
    data: post.content,
    converters: ({ defaultConverters }) => ({
      ...defaultConverters,
      ...TypographyHTMLConverters,
    }),
  });

  return `
    <!DOCTYPE html>
    <html>
      <head>
        <title>${post.title}</title>
        <link rel="stylesheet" href="/styles.css" />
      </head>
      <body>
        <article>
          <h1>${post.title}</h1>
          <div class="content">${html}</div>
        </article>
      </body>
    </html>
  `;
}
```

--------------------------------

### Convert Typography to HTML with Payload CMS Lexical

Source: https://context7.com/adrianmaj/payload-lexical-typography/llms.txt

Utilizes TypographyHTMLConverters to transform styled Lexical content into HTML strings. Supports both synchronous and asynchronous operations through serializeLexical. Handles inline styles including color, font properties, and text formatting like bold and italic when converting Lexical nodes to HTML span elements.

```typescript
import { serializeLexical } from "@payloadcms/richtext-lexical";
import {
  TypographyHTMLConverters,
  TypographyHTMLConvertersAsync,
} from "payload-lexical-typography/converters";

// Synchronous HTML conversion
async function convertToHTML(lexicalContent) {
  const html = await serializeLexical({
    data: lexicalContent,
    converters: ({ defaultConverters }) => ({
      ...defaultConverters,
      ...TypographyHTMLConverters,
    }),
  });

  return html;
}

// Example usage
const content = {
  root: {
    children: [
      {
        type: "text",
        text: "Red bold text",
        style: "color: #FF0000; font-size: 20px",
        format: 1, // IS_BOLD
      },
    ],
  },
};

const htmlOutput = await convertToHTML(content);
// Result: <strong><span style="color: #FF0000; font-size: 20px;">Red bold text</span></strong>

// Asynchronous HTML conversion (for async processing)
async function convertToHTMLAsync(lexicalContent) {
  const html = await serializeLexical({
    data: lexicalContent,
    converters: ({ defaultConverters }) => ({
      ...defaultConverters,
      ...TypographyHTMLConvertersAsync,
    }),
  });

  return html;
}

// Example with multiple styles
const complexContent = {
  root: {
    children: [
      {
        type: "text",
        text: "Styled paragraph",
        style: "color: #0000FF; font-size: 16px; letter-spacing: 0.05em; line-height: 1.5; font-family: 'Arial', sans-serif",
        format: 2, // IS_ITALIC
      },
    ],
  },
};

const complexHTML = await convertToHTML(complexContent);
// Result: <em><span style="color: #0000FF; font-size: 16px; letter-spacing: 0.05em; line-height: 1.5; font-family: 'Arial', sans-serif;">Styled paragraph</span></em>
```

--------------------------------

### TextLetterSpacingFeature Configuration

Source: https://github.com/adrianmaj/payload-lexical-typography/blob/main/README.md

Configure letter spacing options in the Payload CMS Lexical editor. Allows customization of spacing presets, display method, scroll behavior, and custom input visibility.

```APIDOC
## TextLetterSpacingFeature

### Description
Configure letter spacing options in the Payload CMS Lexical editor with customizable presets and behavior.

### Method
CONFIGURATION

### Endpoint
TextLetterSpacingFeature

### Parameters
#### Configuration Options
- **spacings** (Array<{value: string, label: string}>) - Optional - Specifies the letter spacing presets available in the picker. Each spacing needs both a display label and CSS value. Default: []
- **method** ("replace" | "combine") - Optional - Determines whether custom spacings replace or combine with defaults. Default: "replace"
- **scroll** (boolean) - Optional - Controls scrollable container for spacings over 4 items. Default: true
- **customSpacing** (boolean) - Optional - Shows/hides custom letter spacing input field. Default: true

### Request Example
{
  "spacings": [
    { "value": "0.05em", "label": "Tight" },
    { "value": "0.1em", "label": "Normal" },
    { "value": "0.2em", "label": "Wide" }
  ],
  "method": "combine",
  "scroll": true,
  "customSpacing": true
}

### Response
#### Configuration Response
- **spacings** (Array<{value: string, label: string}>) - The configured letter spacing options
- **method** (string) - The method used for handling custom spacings
- **scroll** (boolean) - Whether scrolling is enabled for overflow items
- **customSpacing** (boolean) - Whether custom spacing input is visible

#### Response Example
{
  "spacings": [
    { "value": "0.05em", "label": "Tight" },
    { "value": "0.1em", "label": "Normal" }
  ],
  "method": "combine",
  "scroll": true,
  "customSpacing": true
}
```

--------------------------------

### Register Typography Converters for Rendering (JSX/TSX, HTML)

Source: https://github.com/adrianmaj/payload-lexical-typography/blob/main/README.md

Import converters from /converters and merge them with default converters in your RichText component. Use TypographyJSXConverters for JSX/TSX projects or TypographyHTMLConverters for HTML output.

```tsx
import { TypographyJSXConverters } from "payload-lexical-typography/converters";

const jsxConverters: JSXConvertersFunction<NodeTypes> = ({ defaultConverters }) => ({
  ...defaultConverters,
  ...TypographyJSXConverters,
});
```

```html
import { TypographyHTMLConverters } from "payload-lexical-typography/converters";
```

--------------------------------

### Configure Font Family in Payload CMS (TypeScript)

Source: https://context7.com/adrianmaj/payload-lexical-typography/llms.txt

Enables font family selection with predefined fonts and optional custom input. Requires font imports in the project. Supports system fonts, custom fonts with combined defaults, and locked brand fonts.

```typescript
import { lexicalEditor } from "@payloadcms/richtext-lexical";
import { TextFontFamilyFeature } from "payload-lexical-typography";

// Basic usage with system fonts
const editor1 = lexicalEditor({
  features: () => [
    TextFontFamilyFeature({
      fontFamilies: [
        { value: "Arial, sans-serif", label: "Arial" },
        { value: "Georgia, serif", label: "Georgia" },
        { value: "'Courier New', monospace", label: "Courier" },
      ],
    }),
  ],
});

// Advanced usage with custom fonts and combined defaults
const editor2 = lexicalEditor({
  features: () => [
    TextFontFamilyFeature({
      fontFamilies: [
        { value: "'Inter', sans-serif", label: "Inter" },
        { value: "'Roboto', sans-serif", label: "Roboto" },
        { value: "'Playfair Display', serif", label: "Playfair" },
        { value: "'Fira Code', monospace", label: "Fira Code" },
      ],
      method: "combine", // Combine with defaults
      scroll: true, // Enable scrolling
      customFontFamily: true, // Allow custom font input
      hideAttribution: false,
    }),
  ],
});

// Locked brand fonts only
const editor3 = lexicalEditor({
  features: () => [
    TextFontFamilyFeature({
      fontFamilies: [
        { value: "'Brand Sans', sans-serif", label: "Brand Sans" },
        { value: "'Brand Serif', serif", label: "Brand Serif" },
      ],
      method: "replace",
      customFontFamily: false, // Disable custom fonts
      scroll: false,
    }),
  ],
});
```

--------------------------------

### TextFontFamilyFeature Configuration

Source: https://github.com/adrianmaj/payload-lexical-typography/blob/main/README.md

Configure font family options in the Payload CMS Lexical editor. Enables customization of font family presets with warning about importing custom fonts to your project.

```APIDOC
## TextFontFamilyFeature

### Description
Configure font family options in the Payload CMS Lexical editor. Note: Custom fonts must be imported to your project and @font-face rules added to custom.scss.

### Method
CONFIGURATION

### Endpoint
TextFontFamilyFeature

### Parameters
#### Configuration Options
- **fontFamilies** (Array<{value: string, label: string}>) - Optional - Specifies the font family presets available in the picker. Each font family needs both a display label and CSS value. Default: []
- **method** ("replace" | "combine") - Optional - Determines whether custom font families replace or combine with defaults. Default: "replace"
- **scroll** (boolean) - Optional - Controls scrollable container for font families over 4 items. Default: true
- **customFontFamily** (boolean) - Optional - Shows/hides custom font family input field. Default: true

### Request Example
{
  "fontFamilies": [
    { "value": "Arial, sans-serif", "label": "Arial" },
    { "value": "Georgia, serif", "label": "Georgia" },
    { "value": "'Custom Font', sans-serif", "label": "Custom Font" }
  ],
  "method": "combine",
  "scroll": true,
  "customFontFamily": true
}

### Response
#### Configuration Response
- **fontFamilies** (Array<{value: string, label: string}>) - The configured font family options
- **method** (string) - The method used for handling custom font families
- **scroll** (boolean) - Whether scrolling is enabled for overflow items
- **customFontFamily** (boolean) - Whether custom font family input is visible

#### Response Example
{
  "fontFamilies": [
    { "value": "Arial, sans-serif", "label": "Arial" },
    { "value": "Georgia, serif", "label": "Georgia" }
  ],
  "method": "combine",
  "scroll": true,
  "customFontFamily": true
}
```

--------------------------------

### Render Post Content with JSX Converters in TypeScript

Source: https://context7.com/adrianmaj/payload-lexical-typography/llms.txt

This component renders rich text content from a PayloadCMS post using JSX converters for typography features. It depends on @payloadcms/richtext-lexical/react and payload-lexical-typography/converters packages, taking a post object with title and content as input. Outputs a React component displaying the post title and styled content, integrating custom typography converters with default ones for accurate rendering in frontend applications.

```typescript
import { RichText } from "@payloadcms/richtext-lexical/react";
import { TypographyJSXConverters } from "payload-lexical-typography/converters";

export function PostContent({ post }) {
  const jsxConverters = ({ defaultConverters }) => ({
    ...defaultConverters,
    ...TypographyJSXConverters,
  });

  return (
    <article>
      <h1>{post.title}</h1>
      <RichText converters={jsxConverters} data={post.content} />
    </article>
  );
}
```

--------------------------------

### Render Typography in React JSX with Payload CMS Lexical

Source: https://context7.com/adrianmaj/payload-lexical-typography/llms.txt

Implements TypographyJSXConverters to render styled text content within React components using Payload CMS Lexical rich text. Supports combining with default and custom converters. Processes inline styles like color, font size, and letter spacing into JSX span elements with style attributes.

```tsx
import { RichText } from "@payloadcms/richtext-lexical/react";
import { TypographyJSXConverters } from "payload-lexical-typography/converters";
import type { JSXConvertersFunction } from "@payloadcms/richtext-lexical/react";

// Basic usage in a React component
const MyComponent = ({ content }) => {
  const jsxConverters: JSXConvertersFunction = ({ defaultConverters }) => ({
    ...defaultConverters,
    ...TypographyJSXConverters,
  });

  return <RichText converters={jsxConverters} data={content} />;
};

// Usage with additional custom converters
const AdvancedComponent = ({ content }) => {
  const jsxConverters: JSXConvertersFunction = ({ defaultConverters }) => ({
    ...defaultConverters,
    ...TypographyJSXConverters,
    // Add your custom converters here
    customNode: ({ node }) => {
      return <div className="custom">{node.children}</div>;
    },
  });

  return <RichText converters={jsxConverters} data={content} />;
};

// Example content structure that will be converted:
// Input (serialized Lexical node):
// {
//   type: "text",
//   text: "Styled text",
//   style: "color: #FF0000; font-size: 18px; letter-spacing: 0.05em",
//   format: 0
// }
//
// Output (JSX):
// <span style={{ color: "#FF0000", fontSize: "18px", letterSpacing: "0.05em" }}>
//   Styled text
// </span>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.