feat: add custom latex Macros (#180)

* fix: remove \refs from katex processes

* feat: add own latex macros

1 files changed, 47 insertions, 37 deletions

diff --git a/util/processOrg.tsx b/util/processOrg.tsx
index 26d9377..189e980 100644
--- a/util/processOrg.tsx
+++ b/util/processOrg.tsx
@@ -44,6 +44,7 @@ export interface ProcessedOrgProps {
   outline: boolean
   collapse: boolean
   linksByNodeId: LinksByNodeId
+  macros?: { [key: string]: string }
 }
 
 export const ProcessedOrg = (props: ProcessedOrgProps) => {
@@ -58,9 +59,8 @@ export const ProcessedOrg = (props: ProcessedOrgProps) => {
     outline,
     collapse,
     linksByNodeId,
+    macros,
   } = props
-  console.log(linksByNodeId)
-  console.log(previewNode)
   if (!previewNode || !linksByNodeId) {
     return null
   }
@@ -85,8 +85,6 @@ export const ProcessedOrg = (props: ProcessedOrgProps) => {
   const linkEntries = Object.entries(nodesInNote)
   const wikiLinkResolver = (wikiLink: string): string[] => {
     const entry = linkEntries.find((idNodeArray) => {
-      console.log(idNodeArray)
-      console.log(wikiLink)
       return idNodeArray?.[1]?.title === wikiLink
     })
     const id = entry?.[0] ?? ''
@@ -117,43 +115,55 @@ export const ProcessedOrg = (props: ProcessedOrgProps) => {
   const isMarkdown = previewNode?.file?.slice(-3) === '.md'
   const baseProcessor = isMarkdown ? mdProcessor : orgProcessor
 
+  console.log(macros)
   const processor = useMemo(
     () =>
-      baseProcessor.use(katex).use(rehype2react, {
-        createElement: React.createElement,
-        // eslint-disable-next-line react/display-name
-        components: {
-          a: ({ children, href }) => {
-            return (
-              <PreviewLink
-                nodeByCite={nodeByCite}
-                setSidebarHighlightedNode={setSidebarHighlightedNode}
-                href={`${href as string}`}
-                nodeById={nodeById}
-                linksByNodeId={linksByNodeId}
-                setPreviewNode={setPreviewNode}
-                openContextMenu={openContextMenu}
-                outline={outline}
-                previewNode={previewNode}
-                isWiki={isMarkdown}
-              >
-                {children}
-              </PreviewLink>
-            )
-          },
-          img: ({ src }) => {
-            return <OrgImage src={src as string} file={previewNode?.file} />
+      baseProcessor
+        .use(katex, {
+          trust: (context) => ['\\htmlId', '\\href'].includes(context.command),
+          macros: {
+            '\\eqref': '\\href{###1}{(\\text{#1})}',
+            '\\ref': '\\href{###1}{\\text{#1}}',
+            '\\label': '\\htmlId{#1}{}',
+            // '\\weird': '\\textbf{#1}',
+            ...macros,
           },
-          section: ({ children, className }) => (
-            <Section {...{ outline, collapse }} className={className as string}>
-              {children}
-            </Section>
-          ),
-          p: ({ children }) => {
-            return <p lang="en">{children as ReactNode}</p>
+        })
+        .use(rehype2react, {
+          createElement: React.createElement,
+          // eslint-disable-next-line react/display-name
+          components: {
+            a: ({ children, href }) => {
+              return (
+                <PreviewLink
+                  nodeByCite={nodeByCite}
+                  setSidebarHighlightedNode={setSidebarHighlightedNode}
+                  href={`${href as string}`}
+                  nodeById={nodeById}
+                  linksByNodeId={linksByNodeId}
+                  setPreviewNode={setPreviewNode}
+                  openContextMenu={openContextMenu}
+                  outline={outline}
+                  previewNode={previewNode}
+                  isWiki={isMarkdown}
+                >
+                  {children}
+                </PreviewLink>
+              )
+            },
+            img: ({ src }) => {
+              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>
+            },
           },
-        },
-      }),
+        }),
     [previewNode?.id],
   )