feat: add custom latex Macros (#180)

* fix: remove \refs from katex processes

* feat: add own latex macros

6 files changed, 74 insertions, 43 deletions

diff --git a/components/Sidebar/Note.tsx b/components/Sidebar/Note.tsx
index 62cc8ad..1f864f3 100644
--- a/components/Sidebar/Note.tsx
+++ b/components/Sidebar/Note.tsx
@@ -20,6 +20,7 @@ export interface NoteProps {
   openContextMenu: any
   outline: boolean
   collapse: boolean
+  macros?: { [key: string]: string }
 }
 
 export const Note = (props: NoteProps) => {
@@ -35,6 +36,7 @@ export const Note = (props: NoteProps) => {
     openContextMenu,
     outline,
     collapse,
+    macros,
   } = props
 
   const extraStyle = outline ? outlineNoteStyle : viewerNoteStyle
@@ -68,6 +70,7 @@ export const Note = (props: NoteProps) => {
               collapse,
               nodeById,
               linksByNodeId,
+              macros,
             }}
           />
           <Backlinks
diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index 141c26d..c23d938 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -49,6 +49,7 @@ export interface SidebarProps {
   setFilter: any
   tagColors: TagColors
   setTagColors: any
+  macros?: { [key: string]: string }
 }
 
 const Sidebar = (props: SidebarProps) => {
@@ -75,6 +76,7 @@ const Sidebar = (props: SidebarProps) => {
     setFilter,
     tagColors,
     setTagColors,
+    macros,
   } = props
 
   const { highlightColor } = useContext(ThemeContext)
@@ -225,6 +227,7 @@ const Sidebar = (props: SidebarProps) => {
                     outline,
                     setOutline,
                     collapse,
+                    macros,
                   }}
                 />
               </VStack>
diff --git a/org-roam-ui.el b/org-roam-ui.el
index 61b8ea6..17059fe 100644
--- a/org-roam-ui.el
+++ b/org-roam-ui.el
@@ -145,6 +145,13 @@ Take ID as string as sole argument."
   :group 'org-roam-ui
   :type 'hook)
 
+(defcustom org-roam-ui-latex-macros nil
+  "Alist of LaTeX macros to be passed to org-roam-ui.
+Format as, i.e. with double backslashes for a single backslash:
+'((\"\\macro\".\"\\something{#1}\"))"
+  :group 'org-roam-ui
+  :type 'alist)
+
 ;; Internal vars
 
 (defvar org-roam-ui--ws-current-node nil
@@ -577,7 +584,8 @@ from all other links."
                               (data .
                                     (("dailyDir" .
                                       ,daily-dir)
-                                     ("roamDir" . ,org-roam-directory)))))))))
+                                     ("roamDir" . ,org-roam-directory)
+                                     ("katexMacros" . ,org-roam-ui-latex-macros)))))))))
 
 (defun org-roam-ui-sql-to-alist (column-names rows)
   "Convert sql result to alist for json encoding.
diff --git a/pages/index.tsx b/pages/index.tsx
index 15d6f2f..5900b9b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -73,6 +73,11 @@ export type NodeById = { [nodeId: string]: OrgRoamNode | undefined }
 export type LinksByNodeId = { [nodeId: string]: OrgRoamLink[] | undefined }
 export type NodesByFile = { [file: string]: OrgRoamNode[] | undefined }
 export type NodeByCite = { [key: string]: OrgRoamNode | undefined }
+export interface EmacsVariables {
+  roamDir?: string
+  dailyDir?: string
+  katexMacros?: { [key: string]: string }
+}
 export type Tags = string[]
 export type Scope = {
   nodeIds: string[]
@@ -138,7 +143,7 @@ export function GraphPage() {
   const nodeByCiteRef = useRef<NodeByCite>({})
   const tagsRef = useRef<Tags>([])
   const graphRef = useRef<any>(null)
-  const variablesRef = useRef<{ [variable: string]: string }>({})
+  const variablesRef = useRef<EmacsVariables>({})
   const clusterRef = useRef<{ [id: string]: number }>({})
 
   const currentGraphDataRef = useRef<GraphData>({ nodes: [], links: [] })
@@ -426,8 +431,8 @@ export function GraphPage() {
         case 'graphdata':
           return updateGraphData(message.data)
         case 'variables':
-          console.log(message.data)
           variablesRef.current = message.data
+          console.log(message.data)
           return
         case 'theme':
           return setEmacsTheme(['custom', message.data])
@@ -665,6 +670,7 @@ export function GraphPage() {
             filter,
             setFilter,
           }}
+          macros={variablesRef.current.katexMacros}
           nodeById={nodeByIdRef.current!}
           linksByNodeId={linksByNodeIdRef.current!}
           nodeByCite={nodeByCiteRef.current!}
@@ -719,7 +725,7 @@ export interface GraphProps {
   handleLocal: any
   mainWindowWidth: number
   setMainWindowWidth: any
-  variables: { [variable: string]: string }
+  variables: EmacsVariables
   graphRef: any
   clusterRef: any
   coloring: typeof initialColoring
@@ -1254,9 +1260,7 @@ export const Graph = function (props: GraphProps) {
     height: windowHeight,
     backgroundColor: getThemeColor(visuals.backgroundColor, theme),
     warmupTicks: scope.nodeIds.length === 1 ? 100 : scope.nodeIds.length > 1 ? 20 : 0,
-    //onZoom: ({ k, x, y }) => setZoom(k),
     onZoom: ({ k, x, y }) => (scaleRef.current = k),
-    //nodeLabel: (node) => ,
     nodeColor: (node) => {
       return getNodeColor(node as OrgRoamNode, theme)
     },
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],
   )
 
diff --git a/util/uniorg.tsx b/util/uniorg.tsx
index 7ffd3b8..68f0330 100644
--- a/util/uniorg.tsx
+++ b/util/uniorg.tsx
@@ -13,6 +13,7 @@ export interface UniOrgProps {
   outline: boolean
   collapse: boolean
   linksByNodeId: LinksByNodeId
+  macros?: { [key: string]: string }
 }
 
 export const UniOrg = (props: UniOrgProps) => {
@@ -26,6 +27,7 @@ export const UniOrg = (props: UniOrgProps) => {
     outline,
     collapse,
     linksByNodeId,
+    macros,
   } = props
 
   const [previewText, setPreviewText] = useState('')
@@ -67,6 +69,7 @@ export const UniOrg = (props: UniOrgProps) => {
             outline,
             collapse,
             linksByNodeId,
+            macros,
           }}
         />
       )}