https://github.com/zapal-tech/payload-lexical-react

Payload CMS rich text Lexical editor to React JSX renderer
https://github.com/zapal-tech/payload-lexical-react

Last synced: about 2 months ago
JSON representation

Payload CMS rich text Lexical editor to React JSX renderer

• Host: GitHub
• URL: https://github.com/zapal-tech/payload-lexical-react
• Owner: zapal-tech
• License: mit
• Created: 2024-05-18T16:53:10.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-10-10T07:12:26.000Z (3 months ago)
• Last Synced: 2024-10-10T07:27:17.091Z (3 months ago)
• Language: TypeScript
• Size: 719 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Lexical to React JSX made easy

Designed for Payload CMS RichText Lexical editor. Rendering Lexical to React JSX.

## Install

```

npm i @zapal/payload-lexical-react

```

## Basic Usage

```jsx

import {

  PayloadLexicalReact,

  PayloadLexicalReactProps

} from "@zapal/payload-lexical-react";

const BlogPost = () => {

  const content = await fetchLexicalEditorState();

  return (

    

      

    

  );

}

```

Get started by passing your Lexical rich text serialized state to the component. Default setup renders the most basic

styles only. P.S.: You can use it with the `@tailwindcss/typography` package to instantly style your rich text.

## Properties

### elements

In order to customize the result, use the `elements` prop to override the default elements rendering behavior:

```jsx

import { defaultElements, PayloadLexicalReact } from '@zapal/payload-lexical-react';

 {

      const Component = props.tag;

      const style = { color: '#f84c0b', backgroundColor: '#000' };

      return {props.children};

    },

    paragraph: (props) => 
{props.children}
,

  }}

/>;

```


### mark

To customize rendering of text marks like bold, italic etc., add your own `mark` function:

```jsx

import { PayloadLexicalReact } from '@zapal/payload-lexical-react';

 {

    if (mark.bold) return {mark.text};

    if (mark.italic) return {mark.text};

    // Other marks go here if needed

    return <>{mark.text}>;

  }}

/>;

```

### blocks

Payload CMS Lexical RichText Editor comes with BlocksFeature included. You can render custom blocks like this:

```jsx

import {

  BlockNode,

  PayloadLexicalReact,

} from "@zapal/payload-lexical-react";

type HorizontalGutter = {

  text: string;

  large?: boolean;

};

 

  content={content}

  blocks={{

    horizontalGutter: (props) => (

      


        {props.fields.data.text}

      

    ),

  }}

/>

```