@atelierdisko/ pailload- lexic- react- referser (英语)

一个将词典编辑器状态渲染为jsx的反应组件.

安装

通过运行安装最新版本 :

npm install @atelier-disko/payload-lexical-react-renderer

使用量

import {
  PayloadLexicalReactRenderer,
  PayloadLexicalReactRendererProps,
  PayloadLexicalReactRendererContent
} from "@atelier-disko/payload-lexical-react-renderer";

function MyBlog() {
  const content: PayloadLexicalReactRendererContent = await fetchLexicalEditorState();

  return (
    <div>
      <PayloadLexicalReactRenderer content={content} />
    </div>
  );
}

将您的 Lexical 丰富的文本数据传递到组件开始 。 它使用默认的渲染器,只应用最基本的造型.

元素渲染器

为了自定义结果,请使用 elementRenderers 覆盖默认渲染器的道具 :

import {
  PayloadLexicalReactRenderer,
  defaultElementRenderers,
} from "@atelier-disko/payload-lexical-react-renderer";

<PayloadLexicalReactRenderer
  content={content}
  elementRenderers={{
    ...defaultElementRenderers,
    heading: (props) => {
      const Component = props.tag;

      return (
        <Component style={{ color: "#0d26fc" }}>{props.children}</Component>
      );
    },
    paragraph: (props) => (
      <p className={/* Your style */}>{props.children}</p>
    );
  }}
/>;

说明: 确保为编辑器中使用的每个元素类型指定一个渲染器.

制作马克

要自定义文本标记的渲染, 如粗体、 斜体等, 请添加您自己的 renderMark 函数 :

import { PayloadLexicalReactRenderer } from "@atelier-disko/payload-lexical-react-renderer";

<PayloadLexicalReactRenderer
  content={content}
  renderMark={(mark) => {
    if (mark.bold) {
      return <strong>{mark.text}</strong>;
    }

    if (mark.italic) {
      return <em>{mark.text}</em>;
    }

    // implement all other mark types

    return <>{mark.text}</>;
  }}
/>;

块渲染器

有效载荷允许您在 Lexical 丰富的文本编辑器中重新使用自定义块 。 如果你的CMS没有使用 BlocksFeature 在编辑器,你不需要通过 在这里任何东西。 如果有,请确保通过一个渲染器 用于您整合到您的编辑器中的每一块.

import {
  BlockNode,
  PayloadLexicalReactRenderer,
} from "@atelier-disko/payload-lexical-react-renderer";

type Intro = {
  text: string;
  position: "left" | "right";
};

 <PayloadLexicalReactRenderer<{
    intro: Intro;
  }>
  content={content}
  blockRenderers={{
    intro: (props) => (
      <div
        style={{
          display: "flex",
          alignSelf:
            props.fields.data.position === "left"
              ? "flex-start"
              : "flex-end",
        }}
      >
        {props.fields.data.text}
      </div>
    ),
  }}
/>