chore: add per-level indentation to super note table of contents list

packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx

@@ -50,6 +50,7 @@ import Popover from '@/Components/Popover/Popover'
 import LexicalTableOfContents from '@lexical/react/LexicalTableOfContents'
 import Menu from '@/Components/Menu/Menu'
 import MenuItem from '@/Components/Menu/MenuItem'
+import { remToPx } from '@/Utils'
 
 const TOGGLE_LINK_AND_EDIT_COMMAND = createCommand<string | null>('TOGGLE_LINK_AND_EDIT_COMMAND')
 
@@ -693,7 +694,12 @@ const ToolbarPlugin = () => {
 
             return (
               <Menu a11yLabel="Table of contents" isOpen className="!px-0">
-                {tableOfContents.map(([key, text, tag]) => (
+                {tableOfContents.map(([key, text, tag]) => {
+                  const level = parseInt(tag.slice(1)) || 1
+                  if (level > 3) {
+                    return null
+                  }
+                  return (
                     <MenuItem
                       key={key}
                       className="overflow-hidden md:py-2"
@@ -707,11 +713,15 @@ const ToolbarPlugin = () => {
                           setIsTOCOpen(false)
                         })
                       }}
+                      style={{
+                        paddingLeft: `${(level - 1) * remToPx(1) + remToPx(0.75)}px`,
+                      }}
                     >
                       <Icon type={tag} className="-mt-px mr-2.5 flex-shrink-0" />
                       <span className="overflow-hidden text-ellipsis whitespace-nowrap">{text}</span>
                     </MenuItem>
-                ))}
+                  )
+                })}
               </Menu>
             )
           }}

packages/web/src/javascripts/Utils/Utils.ts

@@ -255,3 +255,7 @@ export function getScrollParent(node: HTMLElement | null): HTMLElement | null {
     return getScrollParent(node.parentElement)
   }
 }
+
+export function remToPx(rem: number) {
+  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
+}