rich text display fix list display

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe 2024-07-07 11:22:44 +07:00
parent cc2c79764d
commit 915403b6c4
No known key found for this signature in database
GPG Key ID: CFD53CE570D42DF5

View File

@ -1,3 +1,5 @@
import clsx from 'clsx';
type Text = { type Text = {
type: 'text'; type: 'text';
value: string; value: string;
@ -9,7 +11,7 @@ type Content =
| Text | Text
| { | {
type: 'list'; type: 'list';
listType: 'bullet' | 'ordered'; listType: 'bullet' | 'ordered' | 'unordered';
children: Array<{ type: 'listItem'; children: Text[] }>; children: Array<{ type: 'listItem'; children: Text[] }>;
} }
| { type: 'listItem'; children: Text[] }; | { type: 'listItem'; children: Text[] };
@ -27,9 +29,14 @@ const RichTextBlock = ({ block }: { block: Content }) => {
return block.children.map((child, index) => <RichTextBlock key={index} block={child} />); return block.children.map((child, index) => <RichTextBlock key={index} block={child} />);
} }
if (block.type === 'list' && block.listType === 'ordered') { if (block.type === 'list') {
return ( return (
<ol className="ml-10 list-decimal"> <ol
className={clsx('spacy-y-0.5 ml-7', {
'list-decimal': block.listType === 'ordered',
'list-disc': block.listType === 'unordered'
})}
>
{block.children.map((child, index) => ( {block.children.map((child, index) => (
<li key={index}> <li key={index}>
<RichTextBlock block={child} /> <RichTextBlock block={child} />