Feat: Markdown file previewing (#152)

* feat(md): initial support for md-roam

* feat(md): link support and more for md

* fix(md): add missing remark math package

4 files changed, 54 insertions, 67 deletions

diff --git a/components/Sidebar/Backlinks.tsx b/components/Sidebar/Backlinks.tsx
index e115225..892af8c 100644
--- a/components/Sidebar/Backlinks.tsx
+++ b/components/Sidebar/Backlinks.tsx
@@ -59,6 +59,7 @@ export const Backlinks = (props: BacklinksProps) => {
             return (
               <Box overflow="hidden" py={1} borderRadius="sm" width="100%" key={link}>
                 <PreviewLink
+                  linksByNodeId={linksByNodeId}
                   nodeByCite={nodeByCite}
                   setSidebarHighlightedNode={setSidebarHighlightedNode}
                   href={`id:${link as string}`}
diff --git a/components/Sidebar/Link.tsx b/components/Sidebar/Link.tsx
index 644078d..c4eea2f 100644
--- a/components/Sidebar/Link.tsx
+++ b/components/Sidebar/Link.tsx
@@ -26,7 +26,7 @@ import katex from 'rehype-katex'
 import 'katex/dist/katex.css'
 import rehype2react from 'rehype-react'
 import { ThemeContext } from '../../util/themecontext'
-import { NodeByCite, NodeById } from '../../pages'
+import { LinksByNodeId, NodeByCite, NodeById } from '../../pages'
 
 export interface LinkProps {
   href: any
@@ -38,6 +38,8 @@ export interface LinkProps {
   nodeById: NodeById
   openContextMenu: any
   outline: boolean
+  linksByNodeId: LinksByNodeId
+  isWiki?: boolean
   noUnderline?: boolean
 }
 
@@ -49,6 +51,7 @@ export interface NodeLinkProps {
   children: any
   setSidebarHighlightedNode: any
   openContextMenu: any
+  isWiki?: boolean
   noUnderline?: boolean
   id?: string
 }
@@ -63,6 +66,7 @@ import { OrgImage } from './OrgImage'
 import { Scrollbars } from 'react-custom-scrollbars-2'
 import { ExternalLinkIcon } from '@chakra-ui/icons'
 import { Section } from './Section'
+import { OrgRoamLink } from '../../api'
 
 export const NodeLink = (props: NodeLinkProps) => {
   const {
@@ -74,6 +78,7 @@ export const NodeLink = (props: NodeLinkProps) => {
     openContextMenu,
     href,
     children,
+    isWiki,
   } = props
   const { highlightColor } = useContext(ThemeContext)
 
@@ -82,8 +87,10 @@ export const NodeLink = (props: NodeLinkProps) => {
   const type = href.replaceAll(/(.*?)\:?.*/g, '$1')
   const uri = href.replaceAll(/.*?\:(.*)/g, '$1')
   const ID = id ?? uri
+  const linkText = isWiki ? `[[${children}]]` : children
   return (
     <Text
+      as="a"
       onMouseEnter={() => setSidebarHighlightedNode(nodeById[ID])}
       onMouseLeave={() => setSidebarHighlightedNode({})}
       tabIndex={0}
@@ -101,7 +108,7 @@ export const NodeLink = (props: NodeLinkProps) => {
       _hover={{ textDecoration: 'none', cursor: 'pointer', bgColor: coolHighlightColor + '22' }}
       _focus={{ outlineColor: highlightColor }}
     >
-      {children}
+      {linkText}
     </Text>
   )
 }
@@ -129,6 +136,8 @@ export const PreviewLink = (props: LinkProps) => {
     openContextMenu,
     outline,
     noUnderline,
+    linksByNodeId,
+    isWiki,
   } = props
   // TODO figure out how to properly type this
   // see https://github.com/rehypejs/rehype-react/issues/25
@@ -137,6 +146,7 @@ export const PreviewLink = (props: LinkProps) => {
   const type = href.replaceAll(/(.*?)\:.*/g, '$1')
 
   const extraNoteStyle = outline ? outlineNoteStyle : viewerNoteStyle
+  console.log(previewNode)
   const getText = () => {
     fetch(`http://localhost:35901/file/${file}`)
       .then((res) => {
@@ -153,6 +163,7 @@ export const PreviewLink = (props: LinkProps) => {
         return 'Could not fetch the text for some reason, sorry!\n\n This can happen because you have an id with forward slashes (/) in it.'
       })
   }
+
   useEffect(() => {
     if (type.replaceAll(/(http)?.*/g, '$1')) {
       return
@@ -165,6 +176,7 @@ export const PreviewLink = (props: LinkProps) => {
     }
     getText()
   }, [hover, orgText])
+
   if (!type) {
     return <Text color="gray.700">{children}</Text>
   }
@@ -195,39 +207,6 @@ export const PreviewLink = (props: LinkProps) => {
   const id = getId(type, uri)
   const file = encodeURIComponent(encodeURIComponent(nodeById[id]?.file as string))
 
-  /* const processor = unified()
-   *   .use(uniorgParse)
-   *   .use(uniorg2rehype)
-   *   .use(katex)
-   *   .use(rehype2react, {
-   *     createElement: React.createElement,
-   *     components: {
-   *       // eslint-disable-next-line react/display-name
-   *       a: ({ children, href }) => (
-   *         <PreviewLink
-   *           outline={outline}
-   *           nodeByCite={nodeByCite}
-   *           setSidebarHighlightedNode={setSidebarHighlightedNode}
-   *           href={href}
-   *           nodeById={nodeById}
-   *           setPreviewNode={setPreviewNode}
-   *           openContextMenu={openContextMenu}
-   *         >
-   *           {children}
-   *         </PreviewLink>
-   *       ),
-   *       img: ({ src }) => {
-   *         return <OrgImage src={src as string} file={nodeById[id]?.file as string} />
-   *       },
-   *       section: ({ children, className }) => (
-   *         <Section {...{ outline, className }}>{children}</Section>
-   *       ),
-   *       p: ({ children }) => {
-   *         return <p lang="en">{children}</p>
-   *       },
-   *     },
-   *   })
-   */
   if (id) {
     return (
       <>
@@ -250,6 +229,7 @@ export const PreviewLink = (props: LinkProps) => {
                   nodeByCite,
                   openContextMenu,
                   noUnderline,
+                  isWiki,
                 }}
               />
             </Box>
@@ -307,10 +287,11 @@ export const PreviewLink = (props: LinkProps) => {
                         setSidebarHighlightedNode,
                         setPreviewNode,
                         nodeByCite,
-                        previewNode,
                         openContextMenu,
                         outline,
+                        linksByNodeId,
                       }}
+                      previewNode={nodeById[id]!}
                       collapse={false}
                     />
                   </Box>
@@ -323,7 +304,7 @@ export const PreviewLink = (props: LinkProps) => {
     )
   }
   return (
-    <Text display="inline" color="base.700" cursor="not-allowed">
+    <Text as="span" display="inline" className={href} color="base.700" cursor="not-allowed">
       {children}
     </Text>
   )
diff --git a/components/Sidebar/Note.tsx b/components/Sidebar/Note.tsx
index 197fa76..62cc8ad 100644
--- a/components/Sidebar/Note.tsx
+++ b/components/Sidebar/Note.tsx
@@ -1,11 +1,12 @@
 import React from 'react'
 import { NodeObject } from 'force-graph'
 
-import { NodeById, NodeByCite, LinksByNodeId } from '../../pages'
+import { NodeById, NodeByCite, LinksByNodeId, normalizeLinkEnds } from '../../pages'
 import { Box, Flex } from '@chakra-ui/react'
 import { UniOrg } from '../../util/uniorg'
 import { Backlinks } from '../../components/Sidebar/Backlinks'
 import { defaultNoteStyle, viewerNoteStyle, outlineNoteStyle } from './noteStyle'
+import { OrgRoamLink } from '../../api'
 
 export interface NoteProps {
   setPreviewNode: any
@@ -35,6 +36,7 @@ export const Note = (props: NoteProps) => {
     outline,
     collapse,
   } = props
+
   const extraStyle = outline ? outlineNoteStyle : viewerNoteStyle
   return (
     <Box
@@ -59,12 +61,13 @@ export const Note = (props: NoteProps) => {
             {...{
               setPreviewNode,
               previewNode,
-              nodeById,
               nodeByCite,
               setSidebarHighlightedNode,
               openContextMenu,
               outline,
               collapse,
+              nodeById,
+              linksByNodeId,
             }}
           />
           <Backlinks
diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index 21465c6..141c26d 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -199,34 +199,36 @@ const Sidebar = (props: SidebarProps) => {
               />
             )}
           >
-            <VStack
-              flexGrow={1}
-              // overflowY="scroll"
-              alignItems="left"
-              bg="alt.100"
-              paddingLeft={4}
-            >
-              <Title previewNode={previewRoamNode} />
-              <TagBar
-                {...{ filter, setFilter, tagColors, setTagColors, openContextMenu, previewNode }}
-              />
-              <Note
-                {...{
-                  setPreviewNode,
-                  previewNode,
-                  nodeById,
-                  nodeByCite,
-                  setSidebarHighlightedNode,
-                  justification,
-                  justificationList,
-                  linksByNodeId,
-                  openContextMenu,
-                  outline,
-                  setOutline,
-                  collapse,
-                }}
-              />
-            </VStack>
+            {previewRoamNode && (
+              <VStack
+                flexGrow={1}
+                // overflowY="scroll"
+                alignItems="left"
+                bg="alt.100"
+                paddingLeft={4}
+              >
+                <Title previewNode={previewRoamNode} />
+                <TagBar
+                  {...{ filter, setFilter, tagColors, setTagColors, openContextMenu, previewNode }}
+                />
+                <Note
+                  {...{
+                    setPreviewNode,
+                    previewNode,
+                    nodeById,
+                    nodeByCite,
+                    setSidebarHighlightedNode,
+                    justification,
+                    justificationList,
+                    linksByNodeId,
+                    openContextMenu,
+                    outline,
+                    setOutline,
+                    collapse,
+                  }}
+                />
+              </VStack>
+            )}
           </Scrollbars>
         </Flex>
       </Resizable>