summaryrefslogtreecommitdiff
path: root/components/Sidebar
diff options
context:
space:
mode:
authorThomas F. K. Jorna <[email protected]>2021-10-09 18:35:39 +0200
committerThomas F. K. Jorna <[email protected]>2021-10-09 18:35:39 +0200
commit6deb6247f63f5aaa25550dc0398d50221c5383c1 (patch)
treea04c90d9c26084a6a512308846b63903d4b60d57 /components/Sidebar
parent03641ca2868d5ef21ffe426fa547dd859ce1c474 (diff)
fix: images in preview
Diffstat (limited to 'components/Sidebar')
-rw-r--r--components/Sidebar/Link.tsx46
1 files changed, 35 insertions, 11 deletions
diff --git a/components/Sidebar/Link.tsx b/components/Sidebar/Link.tsx
index 1211cb4..57fb723 100644
--- a/components/Sidebar/Link.tsx
+++ b/components/Sidebar/Link.tsx
@@ -47,6 +47,7 @@ export interface NormalLinkProps {
import { hexToRGBA, getThemeColor } from '../../pages/index'
import noteStyle from './noteStyle'
+import { OrgImage } from './OrgImage'
export const NormalLink = (props: NormalLinkProps) => {
const { setSidebarHighlightedNode, setPreviewNode, nodeById, href, children } = props
@@ -66,6 +67,7 @@ export const NormalLink = (props: NormalLinkProps) => {
color={highlightColor}
textDecoration="underline"
onClick={() => setPreviewNode(nodeById[uri])}
+ // TODO don't hardcode the opacitycolor
_hover={{ textDecoration: 'none', cursor: 'pointer', bgColor: coolHighlightColor + '22' }}
_focus={{ outlineColor: highlightColor }}
>
@@ -86,8 +88,9 @@ export const PreviewLink = (props: LinkProps) => {
} = props
// TODO figure out how to properly type this
// see https://github.com/rehypejs/rehype-react/issues/25
- const [orgText, setOrgText] = useState<any>()
+ const [orgText, setOrgText] = useState<any>(null)
const [whatever, type, uri] = [...href.matchAll(/(.*?)\:(.*)/g)][0]
+ const [hover, setHover] = useState(false)
const getId = (type: string, uri: string) => {
if (type === 'id') {
@@ -108,6 +111,7 @@ export const PreviewLink = (props: LinkProps) => {
}
const id = getId(type, uri)
+ const file = encodeURIComponent(encodeURIComponent(nodeById[id]?.file as string))
const processor = unified()
.use(uniorgParse)
@@ -118,19 +122,24 @@ export const PreviewLink = (props: LinkProps) => {
components: {
// eslint-disable-next-line react/display-name
a: ({ children, href }) => (
- <NormalLink
+ <PreviewLink
+ nodeByCite={nodeByCite}
setSidebarHighlightedNode={setSidebarHighlightedNode}
+ href={href}
nodeById={nodeById}
- nodeByCite={nodeByCite}
setPreviewNode={setPreviewNode}
- {...{ children, href }}
- />
+ >
+ {nodeById[id as string]?.title}
+ </PreviewLink>
),
+ img: ({ src }) => {
+ return <OrgImage src={src as string} file={file} />
+ },
},
})
- const file = encodeURIComponent(encodeURIComponent(nodeById[id]?.file as string))
const getText = () => {
+ console.log('gettin text')
fetch(`http://localhost:35901/file/${file}`)
.then((res) => {
return res.text()
@@ -148,15 +157,26 @@ export const PreviewLink = (props: LinkProps) => {
})
}
- useMemo(() => {
+ useEffect(() => {
+ if (!!orgText) {
+ return
+ }
+ if (!hover) {
+ return
+ }
getText()
- }, [id])
+ }, [hover, orgText])
+
if (id) {
return (
<>
<Popover gutter={12} trigger="hover" placement="top-start">
<PopoverTrigger>
- <Box display="inline">
+ <Box
+ display="inline"
+ onMouseEnter={() => setHover(true)}
+ onMouseLeave={() => setHover(false)}
+ >
<NormalLink
key={nodeById[id]?.title ?? id}
{...{
@@ -176,8 +196,12 @@ export const PreviewLink = (props: LinkProps) => {
boxShadow="xl"
position="relative"
zIndex="tooltip"
- onMouseEnter={() => setSidebarHighlightedNode(nodeById[id] ?? {})}
- onMouseLeave={() => setSidebarHighlightedNode({})}
+ onMouseEnter={() => {
+ setSidebarHighlightedNode(nodeById[id] ?? {})
+ }}
+ onMouseLeave={() => {
+ setSidebarHighlightedNode({})
+ }}
>
<PopoverArrow />
<PopoverBody