From 45913e41f1cae1fcd19e00e774ac02e98392af41 Mon Sep 17 00:00:00 2001
From: James Mikrut <james@payloadcms.com>
Date: Wed, 5 Feb 2025 14:03:41 -0500
Subject: [PATCH] fix(richtext-lexical): removes css from jsx converter
 (#10997)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Our new Lexical -> JSX converter is great, but right now it can only be
used in environments that support CSS importing / bundling.

It was only that way because of a single import file which can be
removed and inlined, therefore, improving the versatility of the JSX
converter and making it more usable in a wider variety of runtimes.

---------

Co-authored-by: Germán Jabloñski <43938777+GermanJablo@users.noreply.github.com>
---
 .../components/RichText/converter/converters/list.tsx      | 7 ++++++-
 .../src/exports/react/components/RichText/index.css        | 4 ----
 .../src/exports/react/components/RichText/index.tsx        | 1 -
 3 files changed, 6 insertions(+), 6 deletions(-)
 delete mode 100644 packages/richtext-lexical/src/exports/react/components/RichText/index.css

diff --git a/packages/richtext-lexical/src/exports/react/components/RichText/converter/converters/list.tsx b/packages/richtext-lexical/src/exports/react/components/RichText/converter/converters/list.tsx
index dbc8ee521..ad3a8115c 100644
--- a/packages/richtext-lexical/src/exports/react/components/RichText/converter/converters/list.tsx
+++ b/packages/richtext-lexical/src/exports/react/components/RichText/converter/converters/list.tsx
@@ -29,6 +29,7 @@ export const ListJSXConverter: JSXConverters<SerializedListItemNode | Serialized
           className={`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={{ listStyleType: 'none' }}
           tabIndex={-1}
           value={node?.value}
         >
@@ -45,7 +46,11 @@ export const ListJSXConverter: JSXConverters<SerializedListItemNode | Serialized
       )
     } else {
       return (
-        <li className={hasSubLists ? 'nestedListItem' : ''} value={node?.value}>
+        <li
+          className={`${hasSubLists ? 'nestedListItem' : ''}`}
+          style={hasSubLists ? { listStyleType: 'none' } : undefined}
+          value={node?.value}
+        >
           {children}
         </li>
       )
diff --git a/packages/richtext-lexical/src/exports/react/components/RichText/index.css b/packages/richtext-lexical/src/exports/react/components/RichText/index.css
deleted file mode 100644
index 4cc490557..000000000
--- a/packages/richtext-lexical/src/exports/react/components/RichText/index.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.payload-richtext .nestedListItem,
-.payload-richtext .list-check {
-  list-style-type: none;
-}
diff --git a/packages/richtext-lexical/src/exports/react/components/RichText/index.tsx b/packages/richtext-lexical/src/exports/react/components/RichText/index.tsx
index ec001b432..8267773c4 100644
--- a/packages/richtext-lexical/src/exports/react/components/RichText/index.tsx
+++ b/packages/richtext-lexical/src/exports/react/components/RichText/index.tsx
@@ -11,7 +11,6 @@ import type { JSXConverters } from './converter/types.js'
 
 import { defaultJSXConverters } from './converter/defaultConverters.js'
 import { convertLexicalToJSX } from './converter/index.js'
-import './index.css'
 
 export type JSXConvertersFunction<
   T extends { [key: string]: any; type?: string } =