@webiny/react-rich-text-lexical-renderer v5.39.5

@webiny/react-rich-text-lexical-renderer

A React component to render lexical editor data coming from Webiny Headless CMS and Webiny Form Builder.

About

Webiny uses Lexical editor https://lexical.dev/ as a go to Rich Text Editor, with some additional plugins. To speed up the rendering of data for developers, we created this component.

Install

npm install --save @webiny/react-rich-text-lexical-renderer

Or if you prefer yarn:

yarn add @webiny/react-rich-text-lexical-renderer

Usage

Fetch your data from Headless CMS, then pass it to the component like this:

import { RichTextRenderer } from "@webiny/react-rich-text-renderer";

// Load content from Headless CMS (here we show what your content might look like).
const content = {
    root: {
        children: [
            {
                children: [
                    {
                        detail: 0,
                        format: 0,
                        mode: "normal",
                        style: "",
                        text: "A well written paragraph of text can bring so much joy!",
                        type: "text",
                        version: 1
                    }
                ],
                direction: "ltr",
                styles: [],
                format: "",
                indent: 0,
                tag: "p",
                type: "paragraph-element",
                version: 1
            }
        ],
            direction: "ltr",
            format: "",
            indent: 0,
            type: "root",
            version: 1
    }
}

// Mount the component
<RichTextLexicalRenderer value={content} />;

Adding your custom lexical nodes for rendering

You can add custom lexical nodes for rendering your content:

class MyCustomNode extends LexicalNode {
    ...
}

// Mount the component
<RichTextLexicalRenderer value={content} nodes={[MyCustomNode]} />;

Adding your custom typography theme.

You can override Webiny default typography theme that is used by lexical editor by providing your custom typography object.

Please read our docs and check our theme object on GitHub before add you custom theme.

const myTheme = {
    styles: {
        typography: {
            headings: [
                {
                    id: "custom_heading1",
                    name: "Custom Heading 1",
                    tag: "h1",
                    styles: { ...headings, fontWeight: "bold", fontSize: 48 }
                }]
        }
    }
}

// Mount the component
<RichTextLexicalRenderer value={content}  theme={myTheme} nodes={[MyCustomNode]} />;