@withl5e/richtext-payload 0.1.0-alpha.0

package/src/richtext-render/converters/list.tsx

@@ -0,0 +1,60 @@
+import { v4 as uuidv4 } from 'uuid';
+import { Fragment } from '@withl5e/l5e/jsx-runtime';
+
+import type { SerializedListItemNode, SerializedListNode } from '@payloadcms/richtext-lexical';
+import type { JSXConverters } from '../types.js';
+
+export const ListJSXConverter: JSXConverters<SerializedListItemNode | SerializedListNode> = {
+  list: ({ node, nodesToJSX }) => {
+    const children = nodesToJSX({
+      nodes: node.children,
+    });
+
+    const NodeTag = node.tag;
+
+    return <NodeTag class={`list-${node?.listType}`}>{children}</NodeTag>;
+  },
+  listitem: ({ node, nodesToJSX, parent }) => {
+    const hasSubLists = node.children.some((child) => child.type === 'list');
+
+    const children = nodesToJSX({
+      nodes: node.children,
+    });
+
+    if ('listType' in parent && parent?.listType === 'check') {
+      const uuid = uuidv4();
+
+      return (
+        <li
+          aria-checked={node.checked ? 'true' : 'false'}
+          class={`list-item-checkbox${node.checked ? ' list-item-checkbox-checked' : ' list-item-checkbox-unchecked'}${hasSubLists ? ' nestedListItem' : ''}`}
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+          role="checkbox"
+          style="list-style-type: none;"
+          tabindex={'-1'}
+          value={node?.value}
+        >
+          {hasSubLists ? (
+            children
+          ) : (
+            <>
+              <input checked={node.checked} id={uuid} readonly={true} type="checkbox" />
+              <label for={uuid}>{children}</label>
+              <br />
+            </>
+          )}
+        </li>
+      );
+    } else {
+      return (
+        <li
+          class={`${hasSubLists ? 'nestedListItem' : ''}`}
+          style={hasSubLists ? 'list-style-type: none;' : ''}
+          value={node?.value}
+        >
+          {children}
+        </li>
+      );
+    }
+  },
+};

package/src/richtext-render/converters/paragraph.tsx

@@ -0,0 +1,24 @@
+import type { SerializedParagraphNode } from 'lexical';
+import type { JSXConverter, JSXConverters } from '../types.js';
+
+type ParagraphConverterArgs = Parameters<
+  Extract<JSXConverter<SerializedParagraphNode>, (...args: any[]) => JSX.Element>
+>[0];
+
+export const ParagraphJSXConverter: JSXConverters<SerializedParagraphNode> = {
+  paragraph: ({ node, nodesToJSX }: ParagraphConverterArgs) => {
+    const children = nodesToJSX({
+      nodes: node.children,
+    });
+
+    if (!children?.length) {
+      return (
+        <p>
+          <br />
+        </p>
+      );
+    }
+
+    return <p>{children}</p>;
+  },
+};

package/src/richtext-render/converters/tab.tsx

@@ -0,0 +1,6 @@
+import type { SerializedTabNode } from 'lexical';
+import type { JSXConverters } from '../types.js';
+
+export const TabJSXConverter: JSXConverters<SerializedTabNode> = {
+  tab: '\t',
+};

package/src/richtext-render/converters/table.tsx

@@ -0,0 +1,60 @@
+import type {
+  SerializedTableCellNode,
+  SerializedTableNode,
+  SerializedTableRowNode,
+} from '@payloadcms/richtext-lexical';
+import type { JSXConverters } from '../types.js';
+
+export const TableJSXConverter: JSXConverters<
+  SerializedTableCellNode | SerializedTableNode | SerializedTableRowNode
+> = {
+  table: ({ node, nodesToJSX }) => {
+    const children = nodesToJSX({
+      nodes: node.children,
+    });
+    return (
+      <div class="lexical-table-container">
+        <table class="lexical-table" style="border-collapse: collapse;">
+          <tbody>{children}</tbody>
+        </table>
+      </div>
+    );
+  },
+  tablecell: ({ node, nodesToJSX }) => {
+    const children = nodesToJSX({
+      nodes: node.children,
+    });
+
+    const TagName = node.headerState > 0 ? 'th' : 'td'; // Use capital letter to denote a component
+    const headerStateClass = `lexical-table-cell-header-${node.headerState}`;
+    let style = '';
+    if (node.backgroundColor) {
+      style += `background-color: ${node.backgroundColor};`;
+    }
+
+    style += `border: 1px solid #ccc;`;
+
+    style += `padding: 8px;`;
+
+    // Note: JSX does not support setting attributes directly as strings, so you must convert the colSpan and rowSpan to numbers
+    const colSpan = node.colSpan && node.colSpan > 1 ? node.colSpan : undefined;
+    const rowSpan = node.rowSpan && node.rowSpan > 1 ? node.rowSpan : undefined;
+
+    return (
+      <TagName
+        class={`lexical-table-cell ${headerStateClass}`}
+        colspan={colSpan} // colSpan and rowSpan will only be added if they are not null
+        rowspan={rowSpan}
+        style={style}
+      >
+        {children}
+      </TagName>
+    );
+  },
+  tablerow: ({ node, nodesToJSX }) => {
+    const children = nodesToJSX({
+      nodes: node.children,
+    });
+    return <tr class="lexical-table-row">{children}</tr>;
+  },
+};

package/src/richtext-render/converters/text.tsx

@@ -0,0 +1,37 @@
+import { NodeFormat } from '@payloadcms/richtext-lexical';
+import type { SerializedTextNode } from 'lexical';
+import type { JSXConverter, JSXConverters } from '../types.js';
+
+type TextConverterArgs = Parameters<
+  Extract<JSXConverter<SerializedTextNode>, (...args: any[]) => JSX.Element>
+>[0];
+
+export const TextJSXConverter: JSXConverters<SerializedTextNode> = {
+  text: ({ node }: TextConverterArgs) => {
+    let text: JSX.Element = node.text;
+
+    if (node.format & NodeFormat.IS_BOLD) {
+      text = <strong>{text}</strong>;
+    }
+    if (node.format & NodeFormat.IS_ITALIC) {
+      text = <em>{text}</em>;
+    }
+    if (node.format & NodeFormat.IS_STRIKETHROUGH) {
+      text = <span style="text-decoration: line-through;">{text}</span>;
+    }
+    if (node.format & NodeFormat.IS_UNDERLINE) {
+      text = <span style="text-decoration: underline;">{text}</span>;
+    }
+    if (node.format & NodeFormat.IS_CODE) {
+      text = <code>{text}</code>;
+    }
+    if (node.format & NodeFormat.IS_SUBSCRIPT) {
+      text = <sub>{text}</sub>;
+    }
+    if (node.format & NodeFormat.IS_SUPERSCRIPT) {
+      text = <sup>{text}</sup>;
+    }
+
+    return text;
+  },
+};

package/src/richtext-render/converters/upload.tsx

@@ -0,0 +1,83 @@
+import type { FileData, FileSizeImproved, TypeWithID } from 'payload';
+
+import type { SerializedUploadNode } from '@payloadcms/richtext-lexical';
+import type { JSXConverters } from '../types.js';
+
+export const UploadJSXConverter: JSXConverters<SerializedUploadNode> = {
+  upload: ({ node }) => {
+    // TO-DO (v4): SerializedUploadNode should use UploadData_P4
+    const uploadNode = node as any;
+    if (typeof uploadNode.value !== 'object') {
+      return null;
+    }
+
+    const uploadDoc = uploadNode.value as FileData & TypeWithID;
+
+    const url = uploadDoc.url;
+
+    /**
+     * If the upload is not an image, return a link to the upload
+     */
+    if (!uploadDoc.mimeType.startsWith('image')) {
+      return (
+        <a href={url} rel="noopener noreferrer">
+          {uploadDoc.filename}
+        </a>
+      );
+    }
+
+    /**
+     * If the upload is a simple image with no different sizes, return a simple img tag
+     */
+    if (!uploadDoc.sizes || !Object.keys(uploadDoc.sizes).length) {
+      return (
+        <img alt={uploadDoc.filename} height={uploadDoc.height} src={url} width={uploadDoc.width} />
+      );
+    }
+
+    /**
+     * If the upload is an image with different sizes, return a picture element
+     */
+    const pictureJSX: JSX.Element[] = [];
+
+    // Iterate through each size in the data.sizes object
+    for (const size in uploadDoc.sizes) {
+      const imageSize = uploadDoc.sizes[size] as FileSizeImproved;
+
+      // Skip if any property of the size object is null
+      if (
+        !imageSize ||
+        !imageSize.width ||
+        !imageSize.height ||
+        !imageSize.mimeType ||
+        !imageSize.filesize ||
+        !imageSize.filename ||
+        !imageSize.url
+      ) {
+        continue;
+      }
+      const imageSizeURL = imageSize?.url;
+
+      pictureJSX.push(
+        <source
+          key={size}
+          media={`(max-width: ${imageSize.width}px)`}
+          srcset={imageSizeURL}
+          type={imageSize.mimeType}
+        />,
+      );
+    }
+
+    // Add the default img tag
+    pictureJSX.push(
+      <img
+        alt={uploadDoc?.filename}
+        height={uploadDoc?.height}
+        key={'image'}
+        src={url}
+        width={uploadDoc?.width}
+      />,
+    );
+    return <picture>{pictureJSX}</picture>;
+  },
+};

package/src/richtext-render/defaultConverters.ts

@@ -0,0 +1,28 @@
+import type { JSXConverters } from './types.js';
+
+import { DefaultNodeTypes } from '@payloadcms/richtext-lexical';
+import { BlockquoteJSXConverter } from './converters/blockquote.js';
+import { HeadingJSXConverter } from './converters/heading.js';
+import { HorizontalRuleJSXConverter } from './converters/horizontalRule.js';
+import { LinebreakJSXConverter } from './converters/linebreak.js';
+import { LinkJSXConverter } from './converters/link.js';
+import { ListJSXConverter } from './converters/list.js';
+import { ParagraphJSXConverter } from './converters/paragraph.js';
+import { TabJSXConverter } from './converters/tab.js';
+import { TableJSXConverter } from './converters/table.js';
+import { TextJSXConverter } from './converters/text.js';
+import { UploadJSXConverter } from './converters/upload.js';
+
+export const defaultJSXConverters: JSXConverters<DefaultNodeTypes> = {
+  ...ParagraphJSXConverter,
+  ...TextJSXConverter,
+  ...LinebreakJSXConverter,
+  ...BlockquoteJSXConverter,
+  ...TableJSXConverter,
+  ...HeadingJSXConverter,
+  ...HorizontalRuleJSXConverter,
+  ...ListJSXConverter,
+  ...LinkJSXConverter({}),
+  ...UploadJSXConverter,
+  ...TabJSXConverter,
+};

package/src/richtext-render/index.tsx

@@ -0,0 +1,190 @@
+/* eslint-disable no-console */
+import type { SerializedEditorState, SerializedLexicalNode } from 'lexical';
+import { cloneElement, Fragment, isValidElement } from '@withl5e/l5e/jsx-runtime';
+
+import type { SerializedBlockNode, SerializedInlineBlockNode } from '@payloadcms/richtext-lexical';
+import { hasText } from '@payloadcms/richtext-lexical/shared';
+import type { JSXConverter, JSXConverters, SerializedLexicalNodeWithParent } from './types.js';
+
+export { defaultJSXConverters } from './defaultConverters.js';
+
+export { stringToLexical } from './utils/stringToLexical.js';
+export { genFragmentIdentifier } from './utils/genFragmentIdentifier.js';
+export {
+  buildTableOfContents,
+  getHeaders,
+  type TableOfContentsHeading,
+  type TableOfContentsHeadingWithChildren,
+} from './utils/getTableOfContents.js';
+export { getTextLexicalNode } from './utils/getTextOfLexical.js';
+export { getTimeRead } from './utils/getTimeRead.js';
+
+export type ConvertLexicalToJSXArgs = {
+  converters: JSXConverters;
+  data: SerializedEditorState;
+  disableIndent?: boolean | string[];
+  disableTextAlign?: boolean | string[];
+};
+
+export function convertLexicalToJSX({
+  converters,
+  data,
+  disableIndent,
+  disableTextAlign,
+}: ConvertLexicalToJSXArgs): JSX.Element {
+  if (hasText(data)) {
+    return (
+      <Fragment>
+        {convertLexicalNodesToJSX({
+          converters,
+          disableIndent,
+          disableTextAlign,
+          nodes: data?.root?.children,
+          parent: data?.root,
+        })}
+      </Fragment>
+    );
+  }
+  return <Fragment />;
+}
+
+export function convertLexicalNodesToJSX({
+  converters,
+  disableIndent,
+  disableTextAlign,
+  nodes,
+  parent,
+}: {
+  converters: JSXConverters;
+  disableIndent?: boolean | string[];
+  disableTextAlign?: boolean | string[];
+  nodes: SerializedLexicalNode[];
+  parent: SerializedLexicalNodeWithParent;
+}): JSX.Element[] {
+  const unknownConverter: JSXConverter<any> = converters.unknown as JSXConverter<any>;
+
+  const jsxArray: JSX.Element[] = nodes.map((node, i) => {
+    let converterForNode: JSXConverter<any> | undefined;
+    if (node.type === 'block') {
+      converterForNode = converters?.blocks?.[(node as SerializedBlockNode)?.fields?.blockType];
+      if (!converterForNode && !unknownConverter) {
+        console.error(
+          `Lexical => JSX converter: Blocks converter: found ${(node as SerializedBlockNode)?.fields?.blockType} block, but no converter is provided`,
+        );
+      }
+    } else if (node.type === 'inlineBlock') {
+      converterForNode =
+        converters?.inlineBlocks?.[(node as SerializedInlineBlockNode)?.fields?.blockType];
+      if (!converterForNode && !unknownConverter) {
+        console.error(
+          `Lexical => JSX converter: Inline Blocks converter: found ${(node as SerializedInlineBlockNode)?.fields?.blockType} inline block, but no converter is provided`,
+        );
+      }
+    } else {
+      converterForNode = converters[node.type] as JSXConverter<any>;
+    }
+
+    try {
+      if (!converterForNode && unknownConverter) {
+        converterForNode = unknownConverter;
+      }
+
+      let reactNode: JSX.Element;
+      if (converterForNode) {
+        const converted =
+          typeof converterForNode === 'function'
+            ? converterForNode({
+                childIndex: i,
+                converters,
+                node,
+                nodesToJSX: (args) => {
+                  return convertLexicalNodesToJSX({
+                    converters: args.converters ?? converters,
+                    disableIndent: args.disableIndent ?? disableIndent,
+                    disableTextAlign: args.disableTextAlign ?? disableTextAlign,
+                    nodes: args.nodes,
+                    parent: args.parent ?? {
+                      ...node,
+                      parent,
+                    },
+                  });
+                },
+                parent,
+              })
+            : converterForNode;
+        reactNode = converted;
+      } else {
+        reactNode = <span key={i}>unknown node</span>;
+      }
+
+      let style: string = '';
+
+      // Check if disableTextAlign is not true and does not include node type
+      if (
+        !disableTextAlign &&
+        (!Array.isArray(disableTextAlign) || !disableTextAlign?.includes(node.type))
+      ) {
+        if ('format' in node && node.format) {
+          switch (node.format) {
+            case 'center':
+              style += 'text-align: center;';
+              break;
+            case 'end':
+              style += 'text-align: right;';
+              break;
+            case 'justify':
+              style += 'text-align: justify;';
+              break;
+            case 'left':
+              //style.textAlign = 'left'
+              // Do nothing, as left is the default
+              break;
+            case 'right':
+              style += 'text-align: right;';
+              break;
+            case 'start':
+              style += 'text-align: left;';
+              break;
+          }
+        }
+      }
+
+      if (
+        !disableIndent &&
+        (!Array.isArray(disableIndent) || !disableIndent?.includes(node.type))
+      ) {
+        if ('indent' in node && node.indent && node.type !== 'listitem') {
+          // the unit should be px. Do not change it to rem, em, or something else.
+          // The quantity should be 40px. Do not change it either.
+          // See rationale in
+          // https://github.com/payloadcms/payload/issues/13130#issuecomment-3058348085
+          style += `padding-inline-start: ${Number(node.indent) * 40}px;`;
+        }
+      }
+
+      if (isValidElement(reactNode)) {
+        // Inject style into reactNode
+        if (style) {
+          const existingStyle =
+            typeof reactNode?.props?.style === 'string' ? reactNode.props.style : '';
+          const newStyle = `${style} ${existingStyle}`.trim();
+
+          return cloneElement(reactNode, {
+            key: i,
+            style: newStyle,
+          });
+        }
+        return cloneElement(reactNode, {
+          key: i,
+        });
+      }
+
+      return reactNode;
+    } catch (error) {
+      console.error('Error converting lexical node to JSX:', error, 'node:', node);
+      return null;
+    }
+  });
+
+  return jsxArray.filter(Boolean);
+}

package/src/richtext-render/types.ts

@@ -0,0 +1,70 @@
+import type { SerializedBlockNode, SerializedInlineBlockNode } from '@payloadcms/richtext-lexical';
+import type { DefaultNodeTypes } from '@payloadcms/richtext-lexical';
+import type { SerializedLexicalNode } from '@payloadcms/richtext-lexical/lexical';
+
+export type JSXConverter<T extends { [key: string]: any; type?: string } = SerializedLexicalNode> =
+  | ((args: {
+      childIndex: number;
+      converters: JSXConverters;
+      node: T;
+      nodesToJSX: (args: {
+        converters?: JSXConverters;
+        disableIndent?: boolean | string[];
+        disableTextAlign?: boolean | string[];
+        nodes: SerializedLexicalNode[];
+        parent?: SerializedLexicalNodeWithParent;
+      }) => JSX.Element[];
+      parent: SerializedLexicalNodeWithParent;
+    }) => JSX.Element)
+  | JSX.Element;
+
+export type JSXConverters<
+  T extends { [key: string]: any; type?: string } =
+    | DefaultNodeTypes
+    | SerializedBlockNode<{ blockName?: null | string; blockType: string }> // need these to ensure types for blocks and inlineBlocks work if no generics are provided
+    | SerializedInlineBlockNode<{ blockName?: null | string; blockType: string }>, // need these to ensure types for blocks and inlineBlocks work if no generics are provided
+> = {
+  [key: string]:
+    | {
+        [blockSlug: string]: JSXConverter<any>;
+      }
+    | JSXConverter<any>
+    | undefined;
+} & {
+  [nodeType in Exclude<NonNullable<T['type']>, 'block' | 'inlineBlock'>]?: JSXConverter<
+    Extract<T, { type: nodeType }>
+  >;
+} & {
+  blocks?: {
+    [K in Extract<
+      Extract<T, { type: 'block' }> extends SerializedBlockNode<infer B>
+        ? B extends { blockType: string }
+          ? B['blockType']
+          : never
+        : never,
+      string
+    >]?: JSXConverter<
+      Extract<T, { type: 'block' }> extends SerializedBlockNode<infer B>
+        ? SerializedBlockNode<Extract<B, { blockType: K }>>
+        : SerializedBlockNode
+    >;
+  };
+  inlineBlocks?: {
+    [K in Extract<
+      Extract<T, { type: 'inlineBlock' }> extends SerializedInlineBlockNode<infer B>
+        ? B extends { blockType: string }
+          ? B['blockType']
+          : never
+        : never,
+      string
+    >]?: JSXConverter<
+      Extract<T, { type: 'inlineBlock' }> extends SerializedInlineBlockNode<infer B>
+        ? SerializedInlineBlockNode<Extract<B, { blockType: K }>>
+        : SerializedInlineBlockNode
+    >;
+  };
+  unknown?: JSXConverter<SerializedLexicalNode>;
+};
+export type SerializedLexicalNodeWithParent = {
+  parent?: SerializedLexicalNode;
+} & SerializedLexicalNode;

package/src/richtext-render/utils/genFragmentIdentifier.ts

@@ -0,0 +1,12 @@
+export function genFragmentIdentifier(text: string): string {
+  return text
+    .toLowerCase()
+    .normalize('NFD') // tách dấu ra khỏi ký tự
+    .replace(/[\u0300-\u036F]/g, '') // bỏ dấu VN
+    .replace(/đ/g, 'd')
+    .replace(/[\u2010-\u2015\u2212\uFE58\uFE63\uFF0D]/g, '-') // quy mọi dạng gạch ngang Unicode → '-'
+    .replace(/[\s\u00A0\/\\|_.,;:+=@&]+/g, '-') // khoảng trắng & dấu phân tách → '-'
+    .replace(/[^a-z0-9-]/g, '') // giữ lại a-z, số, dấu '-'
+    .replace(/-+/g, '-') // gộp nhiều dấu - liên tiếp bằng 1 dấu -
+    .replace(/^-|-$/g, ''); // bỏ - ở đầu/cuối (nếu có)
+}

package/src/richtext-render/utils/getTableOfContents.ts

@@ -0,0 +1,93 @@
+import type { SerializedHeadingNode } from '@payloadcms/richtext-lexical';
+import type { SerializedLexicalNode } from '@payloadcms/richtext-lexical/lexical';
+import type { SerializedEditorState } from 'lexical';
+import { getTextLexicalNode } from './getTextOfLexical.js';
+
+export interface TableOfContentsHeading {
+  text: string;
+  level: number;
+}
+
+export interface TableOfContentsHeadingWithChildren extends TableOfContentsHeading {
+  children: TableOfContentsHeadingWithChildren[];
+}
+
+// Hàm lấy tất cả các heading từ content
+export function getHeaders(
+  node: SerializedLexicalNode | SerializedEditorState,
+): TableOfContentsHeading[] {
+  const headers: TableOfContentsHeading[] = [];
+
+  // Handle SerializedEditorState
+  if ('root' in node && node.root) {
+    return getHeaders(node.root);
+  }
+
+  // At this point, node must be SerializedLexicalNode
+  const lexicalNode = node as SerializedLexicalNode;
+
+  // Handle heading node
+  if (lexicalNode.type === 'heading') {
+    const headingNode = lexicalNode as SerializedHeadingNode;
+    const tag = headingNode.tag || '';
+    const level =
+      tag === 'h2'
+        ? 2
+        : tag === 'h3'
+          ? 3
+          : tag === 'h4'
+            ? 4
+            : tag === 'h5'
+              ? 5
+              : tag === 'h6'
+                ? 6
+                : 0;
+    if (level > 0) {
+      const text = getTextLexicalNode(lexicalNode);
+      if (text) {
+        headers.push({
+          text,
+          level,
+        });
+      }
+    }
+  }
+
+  // Recursively process children
+  if ('children' in lexicalNode && Array.isArray(lexicalNode.children)) {
+    lexicalNode.children.forEach((child) => {
+      headers.push(...getHeaders(child));
+    });
+  }
+
+  return headers;
+}
+
+// Xây dựng cấu trúc mục lục
+export function buildTableOfContents(
+  headers: TableOfContentsHeading[],
+): TableOfContentsHeadingWithChildren[] {
+  const result: TableOfContentsHeadingWithChildren[] = [];
+  const stack: TableOfContentsHeadingWithChildren[] = [];
+
+  headers.forEach((header) => {
+    const headingWithChildren: TableOfContentsHeadingWithChildren = {
+      ...header,
+      children: [],
+    };
+
+    while (stack.length > 0 && stack[stack.length - 1].level >= header.level) {
+      stack.pop();
+    }
+
+    if (stack.length === 0) {
+      result.push(headingWithChildren);
+    } else {
+      stack[stack.length - 1].children.push(headingWithChildren);
+    }
+
+    stack.push(headingWithChildren);
+  });
+
+  return result;
+}

package/src/richtext-render/utils/getTextOfLexical.ts

@@ -0,0 +1,11 @@
+import type { SerializedLexicalNode } from '@payloadcms/richtext-lexical/lexical';
+import type { SerializedTextNode } from 'lexical';
+
+export function getTextLexicalNode(node: SerializedLexicalNode | null | undefined): string {
+  if (!node) return '';
+  if (node.type === 'text') {
+    return (node as SerializedTextNode).text || '';
+  }
+  if (!('children' in node) || !Array.isArray(node.children)) return '';
+  return node.children.map((child) => getTextLexicalNode(child)).join('');
+}