/
Block.tsx
88 lines (79 loc) · 2.52 KB
/
Block.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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import {Box, Card, Stack, Text} from '@sanity/ui'
import {Path, PortableTextTextBlock} from '@sanity/types'
import React, {useCallback, useContext} from 'react'
import {DiffContext, DiffTooltip, useDiffAnnotationColor} from '../../../../diff'
import {isHeader} from '../helpers'
import {PortableTextDiff} from '../types'
import {ConnectorContext} from '../../../../../changeIndicators'
import Blockquote from './Blockquote'
import Header from './Header'
import Paragraph from './Paragraph'
const EMPTY_PATH: Path = []
export default function Block(props: {
diff: PortableTextDiff
block: PortableTextTextBlock
children: JSX.Element
}): JSX.Element {
const {diff, block, children} = props
const color = useDiffAnnotationColor(diff, EMPTY_PATH)
const {path: fullPath} = useContext(DiffContext)
const {onSetFocus} = useContext(ConnectorContext)
const isRemoved = diff.action === 'removed'
let returned = children
const handleClick = useCallback(
(event: any) => {
event.stopPropagation()
if (!isRemoved) {
onSetFocus(fullPath)
}
},
[fullPath, isRemoved, onSetFocus]
)
if (block.style === 'blockquote') {
returned = <Blockquote>{returned}</Blockquote>
} else if (block.style && isHeader(block)) {
returned = <Header style={block.style}>{returned}</Header>
} else {
returned = <Paragraph>{returned}</Paragraph>
}
let fromStyle: string | undefined
// If style was changed, indicate that
if (
diff.origin.action === 'changed' &&
diff.origin.fields.style &&
diff.origin.fields.style.action === 'changed' &&
diff.origin.fields.style.annotation
) {
fromStyle = diff?.origin?.fromValue?.style
const style = color ? {background: color.background, color: color.text} : {}
returned = (
<Card
padding={3}
border
radius={2}
style={{borderStyle: 'dotted'}}
diff-block-action={diff.action}
data-block-note={`changed_from_style_${fromStyle || 'undefined'}`}
>
<Stack space={2}>
<DiffTooltip
annotations={[diff.origin.fields.style?.annotation]}
diff={diff.origin.fields.style}
>
<Text size={0}>Changed block style from '{fromStyle}'</Text>
</DiffTooltip>
<Box style={style}>{returned}</Box>
</Stack>
</Card>
)
}
return (
<div
onClick={handleClick}
data-diff-block-action={diff.action}
data-block-note={`changed_from_style_${fromStyle || 'undefined'}`}
>
{returned}
</div>
)
}