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
|
import {
Box,
Button,
Popover,
PopoverArrow,
PopoverBody,
PopoverCloseButton,
PopoverContent,
PopoverHeader,
PopoverTrigger,
Portal,
Text,
} from '@chakra-ui/react'
import React, { useState } from 'react'
import UniOrg from '../../util/uniorg'
import unified from 'unified'
//import createStream from 'unified-stream'
import uniorgParse from 'uniorg-parse'
import uniorg2rehype from 'uniorg-rehype'
//import highlight from 'rehype-highlight'
import katex from 'rehype-katex'
import 'katex/dist/katex.css'
import rehype2react from 'rehype-react'
export interface LinkProps {
href: string
children: any
testProp: string
getText: any
previewNode?: any
setPreviewNode: any
}
export const PreviewLink = (props: any) => {
const { href, children, nodeById, getText, previewNode, setPreviewNode } = props
const [previewText, setPreviewText] = useState('')
const [whatever, type, uri] = [...href.matchAll(/(.*?)\:(.*)/g)][0]
const processor = unified().use(uniorgParse).use(uniorg2rehype).use(katex).use(rehype2react, {
createElement: React.createElement,
// eslint-disable-next-line react/display-name
})
type === 'id' && getText(uri, setPreviewText)
return (
<>
<Popover trigger="hover" isLazy position="relative" zIndex="tooltip">
<PopoverTrigger>
<Button size="sm" onClick={() => setPreviewNode(nodeById[uri])} variant="link">
{children}
</Button>
</PopoverTrigger>
<Portal zIndex={100000} position="relative">
<PopoverContent boxShadow="xl" position="relative" zIndex="tooltip">
<PopoverHeader pl={5} fontSize="sm" zIndex="tooltip" fontWeight="semibold">
{children}
</PopoverHeader>
<PopoverArrow zIndex={10000} />
<PopoverCloseButton zIndex={10000} />
<PopoverBody
pb={5}
fontSize="xs"
px={5}
position="relative"
zIndex="tooltip"
maxHeight={300}
overflow="scroll"
>
{uri && <Box>{processor.processSync(previewText).result}</Box>}
</PopoverBody>
</PopoverContent>
</Portal>
</Popover>
</>
)
}
|
