rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Aman Harwara
2023-10-19 13:39:15 +05:30
parent c3aa5cf9f9
commit 2d4cf6af92
2 changed files with 33 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx
View File

@@ -50,6 +50,7 @@ import Popover from '@/Components/Popover/Popover'
import LexicalTableOfContents from '@lexical/react/LexicalTableOfContents' import LexicalTableOfContents from '@lexical/react/LexicalTableOfContents'
import Menu from '@/Components/Menu/Menu' import Menu from '@/Components/Menu/Menu'
import MenuItem from '@/Components/Menu/MenuItem' import MenuItem from '@/Components/Menu/MenuItem'
import { remToPx } from '@/Utils'
const TOGGLE_LINK_AND_EDIT_COMMAND = createCommand<string | null>('TOGGLE_LINK_AND_EDIT_COMMAND') const TOGGLE_LINK_AND_EDIT_COMMAND = createCommand<string | null>('TOGGLE_LINK_AND_EDIT_COMMAND')
@@ -693,25 +694,34 @@ const ToolbarPlugin = () => {
return ( return (
<Menu a11yLabel="Table of contents" isOpen className="!px-0"> <Menu a11yLabel="Table of contents" isOpen className="!px-0">
{tableOfContents.map(([key, text, tag]) => ( {tableOfContents.map(([key, text, tag]) => {
<MenuItem const level = parseInt(tag.slice(1)) || 1
key={key} if (level > 3) {
className="overflow-hidden md:py-2" return null
onClick={() => { }
editor.getEditorState().read(() => { return (
const domElement = editor.getElementByKey(key) <MenuItem
if (!domElement) { key={key}
return className="overflow-hidden md:py-2"
} onClick={() => {
domElement.scrollIntoView({ block: 'start' }) editor.getEditorState().read(() => {
setIsTOCOpen(false) const domElement = editor.getElementByKey(key)
}) if (!domElement) {
}} return
> }
<Icon type={tag} className="-mt-px mr-2.5 flex-shrink-0" /> domElement.scrollIntoView({ block: 'start' })
<span className="overflow-hidden text-ellipsis whitespace-nowrap">{text}</span> setIsTOCOpen(false)
</MenuItem> })
))} }}
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> </Menu>
) )
}} }}

4
packages/web/src/javascripts/Utils/Utils.ts
View File

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