diff options
Diffstat (limited to 'components/Sidebar/Link.tsx')
-rw-r--r-- | components/Sidebar/Link.tsx | 77 |
1 files changed, 72 insertions, 5 deletions
diff --git a/components/Sidebar/Link.tsx b/components/Sidebar/Link.tsx index 789873a..ff812ef 100644 --- a/components/Sidebar/Link.tsx +++ b/components/Sidebar/Link.tsx @@ -1,11 +1,78 @@ -import { Text } from '@chakra-ui/react' +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 { - id: string + href: string + children: any + testProp: string + getText: any + previewNode?: any + setPreviewNode: any } -export const Link = (props: LinkProps) => { - const { id } = props +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 <Text>{id}</Text> + 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> + </> + ) } |