fix(richtext-lexical): removes css from jsx converter (#10997)
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>
This commit is contained in:
@@ -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' : ''}`}
|
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
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
|
||||||
role="checkbox"
|
role="checkbox"
|
||||||
|
style={{ listStyleType: 'none' }}
|
||||||
tabIndex={-1}
|
tabIndex={-1}
|
||||||
value={node?.value}
|
value={node?.value}
|
||||||
>
|
>
|
||||||
@@ -45,7 +46,11 @@ export const ListJSXConverter: JSXConverters<SerializedListItemNode | Serialized
|
|||||||
)
|
)
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
<li className={hasSubLists ? 'nestedListItem' : ''} value={node?.value}>
|
<li
|
||||||
|
className={`${hasSubLists ? 'nestedListItem' : ''}`}
|
||||||
|
style={hasSubLists ? { listStyleType: 'none' } : undefined}
|
||||||
|
value={node?.value}
|
||||||
|
>
|
||||||
{children}
|
{children}
|
||||||
</li>
|
</li>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,4 +0,0 @@
|
|||||||
.payload-richtext .nestedListItem,
|
|
||||||
.payload-richtext .list-check {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
@@ -11,7 +11,6 @@ import type { JSXConverters } from './converter/types.js'
|
|||||||
|
|
||||||
import { defaultJSXConverters } from './converter/defaultConverters.js'
|
import { defaultJSXConverters } from './converter/defaultConverters.js'
|
||||||
import { convertLexicalToJSX } from './converter/index.js'
|
import { convertLexicalToJSX } from './converter/index.js'
|
||||||
import './index.css'
|
|
||||||
|
|
||||||
export type JSXConvertersFunction<
|
export type JSXConvertersFunction<
|
||||||
T extends { [key: string]: any; type?: string } =
|
T extends { [key: string]: any; type?: string } =
|
||||||
|
|||||||
Reference in New Issue
Block a user