feat: add support for quote blocks

This commit is contained in:
Hossein Mehrabi 2023-08-31 18:25:51 +03:30
parent cab92f4583
commit decf053005
No known key found for this signature in database
GPG Key ID: 45C04964191AFAA1
2 changed files with 29 additions and 6 deletions

View File

@ -7,7 +7,7 @@ import {
extractInnerHtml, extractInnerHtml,
} from '@/utils/html.utils' } from '@/utils/html.utils'
import { HeadingElementsRef } from '@/utils/ui.utils' import { HeadingElementsRef } from '@/utils/ui.utils'
import { Typography } from '@acid-info/lsd-react' import { Quote, Typography } from '@acid-info/lsd-react'
import { css } from '@emotion/react' import { css } from '@emotion/react'
import styled from '@emotion/styled' import styled from '@emotion/styled'
import clsx from 'clsx' import clsx from 'clsx'
@ -45,9 +45,8 @@ export const RenderArticleBlock = ({
} }
case 'p': { case 'p': {
const isIframe = block.embed && block.labels.includes('embed') const isIframe = block.embed && block.labels.includes('embed')
if (block.embed && isIframe) {
return block.embed && isIframe ? ( return block.labels.includes('youtube_embed') ? (
block.labels.includes('youtube_embed') ? (
<IframeContainer isSimplecast={false}> <IframeContainer isSimplecast={false}>
<ReactPlayer url={block.embed.src} /> <ReactPlayer url={block.embed.src} />
</IframeContainer> </IframeContainer>
@ -59,7 +58,29 @@ export const RenderArticleBlock = ({
}} }}
/> />
) )
) : ( }
if (
block.classNames.includes('subtitle') &&
block.classNames.includes('u-with-margin-left')
) {
return (
<Quote
mode="indented-line"
genericFontFamily="serif"
id={extractIdFromFirstTag(block.html) || `p-${block.order}`}
>
<Paragraph
variant="body1"
dangerouslySetInnerHTML={{
__html: extractInnerHtml(block.html),
}}
/>
</Quote>
)
}
return (
<Paragraph <Paragraph
variant="body1" variant="body1"
component={block.tagName as any} component={block.tagName as any}

View File

@ -17,7 +17,9 @@ const ArticleBlocks = ({ data }: Props) => {
data.content.filter( data.content.filter(
(b) => (b) =>
b.labels.length === 0 || b.labels.length === 0 ||
b.labels.includes(LPE.Post.ContentBlockLabels.Embed), b.labels.includes(LPE.Post.ContentBlockLabels.Embed) ||
(b.labels.includes(LPE.Post.ContentBlockLabels.Subtitle) &&
b.order > 5),
), ),
[data.content], [data.content],
) )