acid-info/logos-press-engine
1
0
Fork 0
mirror of https://github.com/acid-info/logos-press-engine.git synced 2025-02-23 06:38:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: respect ol tags' start attribute

Browse Source
This commit is contained in:
Hossein Mehrabi 2023-08-31 00:58:08 +03:30
parent 771db4abbc
commit 543f75863d
No known key found for this signature in database
GPG Key ID: 45C04964191AFAA1
1 changed files with 50 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/Article/Article.Block.tsx
View File

@ -1,12 +1,17 @@
/** @jsxImportSource @emotion/react */
import { ArticleHeading } from '@/components/Article/Article.Heading'
import {
extractAttributeFromHTML,
extractClassFromFirstTag,
extractIdFromFirstTag,
extractInnerHtml,
} from '@/utils/html.utils'
import { HeadingElementsRef } from '@/utils/ui.utils'
import { Typography } from '@acid-info/lsd-react'
import { css } from '@emotion/react'
import styled from '@emotion/styled'
import clsx from 'clsx'
import React from 'react'
import ReactPlayer from 'react-player'
import { LPE } from '../../types/lpe.types'
import { ArticleImageBlockWrapper } from './Article.ImageBlockWrapper'
@ -59,23 +64,61 @@ export const RenderArticleBlock = ({
variant="body1"
component={block.tagName as any}
genericFontFamily="sans-serif"
className={`${extractClassFromFirstTag(
block.html,
)} ${block.classNames.join(' ')}`}
className={clsx(
extractClassFromFirstTag(block.html),
block.classNames,
)}
id={extractIdFromFirstTag(block.html) || `p-${block.order}`}
css={css`
${extractAttributeFromHTML(block.html, 'style', '')}
`}
dangerouslySetInnerHTML={{ __html: extractInnerHtml(block.html) }}
/>
)
}
case 'ul':
case 'ol': {
const Component = block.tagName as any as React.ComponentType<
React.HTMLProps<HTMLUListElement>
>
return (
<Typography
variant="body1"
component="div"
genericFontFamily="sans-serif"
id={extractIdFromFirstTag(block.html) || `p-${block.order}`}
>
<Component
start={Number.parseInt(
extractAttributeFromHTML(block.html, 'start', '1'),
10,
)}
css={css`
${extractAttributeFromHTML(block.html, 'style', '')}
`}
className={clsx(
extractClassFromFirstTag(block.html),
block.classNames,
)}
dangerouslySetInnerHTML={{
__html: extractInnerHtml(block.html),
}}
/>
</Typography>
)
}
default:
return (
<Paragraph
variant="body1"
component={block.tagName as any}
genericFontFamily="sans-serif"
className={`${extractClassFromFirstTag(
block.html,
)} ${block.classNames.join(' ')}`}
css={css`
${extractAttributeFromHTML(block.html, 'style', '')}
`}
className={clsx(
extractClassFromFirstTag(block.html),
block.classNames,
)}
id={extractIdFromFirstTag(block.html) || `p-${block.order}`}
dangerouslySetInnerHTML={{ __html: extractInnerHtml(block.html) }}
/>