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

3 files changed, 38 insertions, 7 deletions

diff --git a/util/NoteContext.tsx b/util/NoteContext.tsx
new file mode 100644
index 0000000..4578ca2
--- /dev/null
+++ b/util/NoteContext.tsx
@@ -0,0 +1,11 @@
+import { createContext } from 'react'
+
+export interface NoteContextProps {
+  outline: boolean
+  collapse: boolean
+}
+
+export const NoteContext = createContext<NoteContextProps>({
+  outline: false,
+  collapse: true,
+})
diff --git a/util/processOrg.tsx b/util/processOrg.tsx
index 6d3a380..84eb280 100644
--- a/util/processOrg.tsx
+++ b/util/processOrg.tsx
@@ -8,15 +8,16 @@ import attachments from 'uniorg-attach'
 // rehypeHighlight does not have any types
 // add error thing here
 // import highlight from 'rehype-highlight'
-//import sectionParent from '@agentofuser/rehype-section'
 import katex from 'rehype-katex'
 import 'katex/dist/katex.css'
 import rehype2react from 'rehype-react'
 
 import { PreviewLink } from '../components/Sidebar/Link'
 import { NodeByCite, NodeById } from '../pages'
-import React, { useMemo } from 'react'
+import React, { createContext, ReactNode, useMemo } from 'react'
 import { OrgImage } from '../components/Sidebar/OrgImage'
+import { Section } from '../components/Sidebar/Section'
+import { NoteContext } from './NoteContext'
 
 export interface ProcessedOrgProps {
   nodeById: NodeById
@@ -26,6 +27,8 @@ export interface ProcessedOrgProps {
   nodeByCite: NodeByCite
   setSidebarHighlightedNode: any
   openContextMenu: any
+  outline: boolean
+  collapse: boolean
 }
 
 export const ProcessedOrg = (props: ProcessedOrgProps) => {
@@ -37,17 +40,17 @@ export const ProcessedOrg = (props: ProcessedOrgProps) => {
     nodeByCite,
     previewNode,
     openContextMenu,
+    outline,
+    collapse,
   } = props
 
-  //const section = sectionParent.default
   const processor = unified()
     .use(uniorgParse)
     .use(extractKeywords)
     .use(attachments)
     .use(uniorgSlug)
-    .use(uniorg2rehype)
+    .use(uniorg2rehype, { useSections: true })
     //.data('settings', { fragment: true })
-    //.use(section)
     // .use(highlight)
     .use(katex)
     .use(rehype2react, {
@@ -63,17 +66,28 @@ export const ProcessedOrg = (props: ProcessedOrgProps) => {
               nodeById={nodeById}
               setPreviewNode={setPreviewNode}
               openContextMenu={openContextMenu}
+              outline={outline}
             >
               {children}
             </PreviewLink>
           )
         },
         img: ({ src }) => {
-          return <OrgImage src={src as string} file={previewNode.file} />
+          return <OrgImage src={src as string} file={previewNode?.file} />
+        },
+        section: ({ children, className }) => (
+          <Section {...{ outline, collapse }} className={className as string}>
+            {children}
+          </Section>
+        ),
+        p: ({ children }) => {
+          return <p lang="en">{children as ReactNode}</p>
         },
       },
     })
 
   const text = useMemo(() => processor.processSync(previewText).result, [previewText])
-  return <>{text}</>
+  return (
+    <NoteContext.Provider value={{ collapse, outline }}>{text as ReactNode}</NoteContext.Provider>
+  )
 }
diff --git a/util/uniorg.tsx b/util/uniorg.tsx
index 98aa878..d0251c0 100644
--- a/util/uniorg.tsx
+++ b/util/uniorg.tsx
@@ -10,6 +10,8 @@ export interface UniOrgProps {
   nodeByCite: NodeByCite
   setSidebarHighlightedNode: any
   openContextMenu: any
+  outline: boolean
+  collapse: boolean
 }
 
 export const UniOrg = (props: UniOrgProps) => {
@@ -20,6 +22,8 @@ export const UniOrg = (props: UniOrgProps) => {
     nodeByCite,
     previewNode,
     setPreviewNode,
+    outline,
+    collapse,
   } = props
 
   const [previewText, setPreviewText] = useState('')
@@ -58,6 +62,8 @@ export const UniOrg = (props: UniOrgProps) => {
             nodeByCite,
             setSidebarHighlightedNode,
             openContextMenu,
+            outline,
+            collapse,
           }}
         />
       )}