From 78f15c54c2e0d1f61abc9eec4d88ee020b191e95 Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <hello@tefkah.com>
Date: Tue, 2 Nov 2021 23:24:07 +0100
Subject: Feat/collapse: add collapsible/toggleable headers and outline layout
 in the preview panel (#139)

* feat(preview): collapsible headings

* feat(preview): collapsible headings

* feat(collapse): change icons for headings

* feat(collapse):

* feat(collapse): use new uniorg and better looks

* feat(collapse): fix typescript errors

* fix(ci): better filter

* feat(collapse): more small adjustments

* feat(collapse): collapse all button

* fix(collapse): fix global css

* fix(cd): remove yarn and add export

* fix(collapse): type-errors

* fix(cd): fix format-all fucking up yml
---
 components/Sidebar/Link.tsx | 92 +++++++++++++++++++++++++++++----------------
 1 file changed, 60 insertions(+), 32 deletions(-)

(limited to 'components/Sidebar/Link.tsx')

diff --git a/components/Sidebar/Link.tsx b/components/Sidebar/Link.tsx
index 7e966a4..644078d 100644
--- a/components/Sidebar/Link.tsx
+++ b/components/Sidebar/Link.tsx
@@ -16,6 +16,7 @@ import {
 } from '@chakra-ui/react'
 import React, { ReactElement, useContext, useEffect, useMemo, useState } from 'react'
 
+import { ProcessedOrg } from '../../util/processOrg'
 import unified from 'unified'
 //import createStream from 'unified-stream'
 import uniorgParse from 'uniorg-parse'
@@ -36,6 +37,8 @@ export interface LinkProps {
   nodeByCite: NodeByCite
   nodeById: NodeById
   openContextMenu: any
+  outline: boolean
+  noUnderline?: boolean
 }
 
 export interface NodeLinkProps {
@@ -46,6 +49,7 @@ export interface NodeLinkProps {
   children: any
   setSidebarHighlightedNode: any
   openContextMenu: any
+  noUnderline?: boolean
   id?: string
 }
 export interface NormalLinkProps {
@@ -54,13 +58,15 @@ export interface NormalLinkProps {
 }
 
 import { hexToRGBA, getThemeColor } from '../../pages/index'
-import noteStyle from './noteStyle'
+import { defaultNoteStyle, viewerNoteStyle, outlineNoteStyle } from './noteStyle'
 import { OrgImage } from './OrgImage'
 import { Scrollbars } from 'react-custom-scrollbars-2'
 import { ExternalLinkIcon } from '@chakra-ui/icons'
+import { Section } from './Section'
 
 export const NodeLink = (props: NodeLinkProps) => {
   const {
+    noUnderline,
     id,
     setSidebarHighlightedNode,
     setPreviewNode,
@@ -85,7 +91,7 @@ export const NodeLink = (props: NodeLinkProps) => {
       overflow="hidden"
       fontWeight={500}
       color={highlightColor}
-      textDecoration="underline"
+      textDecoration={noUnderline ? undefined : 'underline'}
       onContextMenu={(e) => {
         e.preventDefault()
         openContextMenu(nodeById[uri], e)
@@ -121,6 +127,8 @@ export const PreviewLink = (props: LinkProps) => {
     setPreviewNode,
     nodeByCite,
     openContextMenu,
+    outline,
+    noUnderline,
   } = props
   // TODO figure out how to properly type this
   // see https://github.com/rehypejs/rehype-react/issues/25
@@ -128,6 +136,7 @@ export const PreviewLink = (props: LinkProps) => {
   const [hover, setHover] = useState(false)
   const type = href.replaceAll(/(.*?)\:.*/g, '$1')
 
+  const extraNoteStyle = outline ? outlineNoteStyle : viewerNoteStyle
   const getText = () => {
     fetch(`http://localhost:35901/file/${file}`)
       .then((res) => {
@@ -135,8 +144,7 @@ export const PreviewLink = (props: LinkProps) => {
       })
       .then((res) => {
         if (res !== 'error') {
-          const text = processor.processSync(res).result
-          setOrgText(text)
+          setOrgText(res)
           return
         }
       })
@@ -187,32 +195,39 @@ 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
-            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} />
-        },
-      },
-    })
-
+  /* 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 (
       <>
@@ -234,6 +249,7 @@ export const PreviewLink = (props: LinkProps) => {
                   children,
                   nodeByCite,
                   openContextMenu,
+                  noUnderline,
                 }}
               />
             </Box>
@@ -281,10 +297,22 @@ export const PreviewLink = (props: LinkProps) => {
                     w="100%"
                     color="black"
                     px={3}
-                    sx={noteStyle}
+                    sx={{ ...defaultNoteStyle, ...extraNoteStyle }}
                     //overflowY="scroll"
                   >
-                    {orgText}
+                    <ProcessedOrg
+                      previewText={orgText}
+                      {...{
+                        nodeById,
+                        setSidebarHighlightedNode,
+                        setPreviewNode,
+                        nodeByCite,
+                        previewNode,
+                        openContextMenu,
+                        outline,
+                      }}
+                      collapse={false}
+                    />
                   </Box>
                 </Scrollbars>
               </PopoverBody>
-- 
cgit v1.2.3