fix: images in preview

4 files changed, 58 insertions, 14 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
diff --git a/next.config.js b/next.config.js
index d6d2e0e..ef3578f 100644
--- a/next.config.js
+++ b/next.config.js
@@ -7,4 +7,7 @@ const withTM = require('next-transpile-modules')(d3packages)
 
 module.exports = withPlugins([withTM], {
   distDir: 'build',
+  images: {
+    domains: ['localhost'],
+  },
 })
diff --git a/org-roam-ui.el b/org-roam-ui.el
index e018b09..8726a76 100644
--- a/org-roam-ui.el
+++ b/org-roam-ui.el
@@ -236,10 +236,16 @@ This serves the web-build and API over HTTP."
         (websocket-send-text ws
                              (json-encode `((type . "orgText") (data . ,text))))))
 
-(defservlet* note/:id text/plain ()
+(defservlet* file/:file text/plain ()
       (progn
         (insert-file-contents-literally (org-link-decode file))
 (httpd-send-header t "text/plain" 200 :Access-Control-Allow-Origin "*")))
+
+
+(defservlet* img/:file text/plain ()
+      (progn
+        (httpd-send-file t (org-link-decode file))
+(httpd-send-header t "text/plain" 200 :Access-Control-Allow-Origin "*")))
         ;(insert "error")
         ;(httpd-send-header t "text/plain" 200 :Access-Control-Allow-Origin "*")
 
diff --git a/util/processOrg.tsx b/util/processOrg.tsx
index a025645..3f32d30 100644
--- a/util/processOrg.tsx
+++ b/util/processOrg.tsx
@@ -15,6 +15,7 @@ import rehype2react from 'rehype-react'
 import { PreviewLink } from '../components/Sidebar/Link'
 import { NodeByCite, NodeById } from '../pages'
 import React, { useMemo } from 'react'
+import { OrgImage } from '../components/Sidebar/OrgImage'
 
 export interface ProcessedOrgProps {
   nodeById: NodeById
@@ -26,7 +27,14 @@ export interface ProcessedOrgProps {
 }
 
 export const ProcessedOrg = (props: ProcessedOrgProps) => {
-  const { nodeById, setSidebarHighlightedNode, setPreviewNode, previewText, nodeByCite } = props
+  const {
+    nodeById,
+    setSidebarHighlightedNode,
+    setPreviewNode,
+    previewText,
+    nodeByCite,
+    previewNode,
+  } = props
 
   const processor = unified()
     .use(uniorgParse)
@@ -48,10 +56,13 @@ export const ProcessedOrg = (props: ProcessedOrgProps) => {
               nodeById={nodeById}
               setPreviewNode={setPreviewNode}
             >
-              {typeof children === 'string' ? children : null}
+              {children}
             </PreviewLink>
           )
         },
+        img: ({ src }) => {
+          return <OrgImage src={src as string} file={previewNode.file} />
+        },
       },
     })