/
Style.tsx
37 lines (34 loc) · 1.1 KB
/
Style.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import {Text} from '@sanity/ui'
import {BlockStyleRenderProps} from '@sanity/portable-text-editor'
import React, {useCallback, useMemo} from 'react'
import {TEXT_STYLES} from './textStyles'
export const Style = (props: BlockStyleRenderProps) => {
const {block, focused, children, selected, type, value} = props
const DefaultComponent = useMemo(
() => (block.style && TEXT_STYLES[block.style] ? TEXT_STYLES[block.style] : TEXT_STYLES[0]),
[block.style]
)
const defaultRendered = useMemo(
() => <DefaultComponent>{children}</DefaultComponent>,
[DefaultComponent, children]
)
const _renderDefault = useCallback(() => defaultRendered, [defaultRendered])
const CustomComponent = type.component
if (CustomComponent) {
return (
<Text data-testid={`text-style--${value}`}>
<CustomComponent
block={block}
title={type.title}
value={type.value}
selected={selected}
focused={focused}
renderDefault={_renderDefault}
>
{children}
</CustomComponent>
</Text>
)
}
return defaultRendered
}