summaryrefslogtreecommitdiff
path: root/components
diff options
context:
space:
mode:
Diffstat (limited to 'components')
-rw-r--r--components/Sidebar/Backlinks.tsx3
-rw-r--r--components/Sidebar/Link.tsx20
-rw-r--r--components/Sidebar/Note.tsx4
-rw-r--r--components/Sidebar/Toolbar.tsx102
-rw-r--r--components/Sidebar/index.tsx109
-rw-r--r--components/Tweaks/BehaviorPanel.tsx1
-rw-r--r--components/Tweaks/SliderWithInfo.tsx2
-rw-r--r--components/Tweaks/index.tsx27
-rw-r--r--components/config.ts5
-rw-r--r--components/contextmenu.tsx146
10 files changed, 258 insertions, 161 deletions
diff --git a/components/Sidebar/Backlinks.tsx b/components/Sidebar/Backlinks.tsx
index 8c1e9bc..68ab551 100644
--- a/components/Sidebar/Backlinks.tsx
+++ b/components/Sidebar/Backlinks.tsx
@@ -14,6 +14,7 @@ export interface BacklinksProps {
linksByNodeId: LinksByNodeId
nodeByCite: NodeByCite
setSidebarHighlightedNode: OrgRoamNode
+ openContextMenu: any
}
import { PreviewLink } from './Link'
@@ -27,6 +28,7 @@ export const Backlinks = (props: BacklinksProps) => {
nodeById,
linksByNodeId,
nodeByCite,
+ openContextMenu,
} = props
const links = linksByNodeId[previewNode?.id] ?? []
@@ -59,6 +61,7 @@ export const Backlinks = (props: BacklinksProps) => {
href={`id:${link as string}`}
nodeById={nodeById}
setPreviewNode={setPreviewNode}
+ openContextMenu={openContextMenu}
>
{nodeById[link as string]?.title}
</PreviewLink>
diff --git a/components/Sidebar/Link.tsx b/components/Sidebar/Link.tsx
index 16fc2ac..49fe9cf 100644
--- a/components/Sidebar/Link.tsx
+++ b/components/Sidebar/Link.tsx
@@ -35,6 +35,7 @@ export interface LinkProps {
setSidebarHighlightedNode: any
nodeByCite: NodeByCite
nodeById: NodeById
+ openContextMenu: any
}
export interface NormalLinkProps {
@@ -44,6 +45,7 @@ export interface NormalLinkProps {
href: any
children: any
setSidebarHighlightedNode: any
+ openContextMenu: any
}
import { hexToRGBA, getThemeColor } from '../../pages/index'
@@ -51,7 +53,8 @@ import noteStyle from './noteStyle'
import { OrgImage } from './OrgImage'
export const NormalLink = (props: NormalLinkProps) => {
- const { setSidebarHighlightedNode, setPreviewNode, nodeById, href, children } = props
+ const { setSidebarHighlightedNode, setPreviewNode, nodeById, openContextMenu, href, children } =
+ props
const { highlightColor } = useContext(ThemeContext)
const theme = useTheme()
@@ -67,12 +70,16 @@ export const NormalLink = (props: NormalLinkProps) => {
fontWeight={500}
color={highlightColor}
textDecoration="underline"
+ onContextMenu={(e) => {
+ e.preventDefault()
+ openContextMenu(nodeById[uri], e)
+ }}
onClick={() => setPreviewNode(nodeById[uri])}
// TODO don't hardcode the opacitycolor
_hover={{ textDecoration: 'none', cursor: 'pointer', bgColor: coolHighlightColor + '22' }}
_focus={{ outlineColor: highlightColor }}
>
- {nodeById[uri]?.title}
+ {children}
</Text>
)
}
@@ -86,6 +93,7 @@ export const PreviewLink = (props: LinkProps) => {
previewNode,
setPreviewNode,
nodeByCite,
+ openContextMenu,
} = props
// TODO figure out how to properly type this
// see https://github.com/rehypejs/rehype-react/issues/25
@@ -129,8 +137,9 @@ export const PreviewLink = (props: LinkProps) => {
href={href}
nodeById={nodeById}
setPreviewNode={setPreviewNode}
+ openContextMenu={openContextMenu}
>
- {nodeById[id as string]?.title}
+ {children}
</PreviewLink>
),
img: ({ src }) => {
@@ -186,6 +195,7 @@ export const PreviewLink = (props: LinkProps) => {
href,
children,
nodeByCite,
+ openContextMenu,
}}
/>
</Box>
@@ -213,7 +223,9 @@ export const PreviewLink = (props: LinkProps) => {
maxHeight={300}
overflow="scroll"
>
- <Box sx={noteStyle}>{orgText}</Box>
+ <Box color="black" sx={noteStyle}>
+ {orgText}
+ </Box>
</PopoverBody>
</PopoverContent>
</Portal>
diff --git a/components/Sidebar/Note.tsx b/components/Sidebar/Note.tsx
index ef2e2b2..e425559 100644
--- a/components/Sidebar/Note.tsx
+++ b/components/Sidebar/Note.tsx
@@ -16,6 +16,7 @@ export interface NoteProps {
justification: number
justificationList: string[]
linksByNodeId: LinksByNodeId
+ openContextMenu: any
}
export const Note = (props: NoteProps) => {
@@ -28,6 +29,7 @@ export const Note = (props: NoteProps) => {
nodeByCite,
setSidebarHighlightedNode,
linksByNodeId,
+ openContextMenu,
} = props
return (
<Box
@@ -50,6 +52,7 @@ export const Note = (props: NoteProps) => {
nodeById,
nodeByCite,
setSidebarHighlightedNode,
+ openContextMenu,
}}
/>
<Backlinks
@@ -60,6 +63,7 @@ export const Note = (props: NoteProps) => {
linksByNodeId,
nodeByCite,
setSidebarHighlightedNode,
+ openContextMenu,
}}
/>
</Flex>
diff --git a/components/Sidebar/Toolbar.tsx b/components/Sidebar/Toolbar.tsx
index f6f1e39..8741da5 100644
--- a/components/Sidebar/Toolbar.tsx
+++ b/components/Sidebar/Toolbar.tsx
@@ -1,5 +1,5 @@
import React from 'react'
-import { Text, Flex, IconButton } from '@chakra-ui/react'
+import { Text, Flex, IconButton, ButtonGroup, Tooltip } from '@chakra-ui/react'
import {
BiAlignJustify,
BiAlignLeft,
@@ -38,53 +38,65 @@ export const Toolbar = (props: ToolbarProps) => {
nextPreviewNode,
} = props
return (
- <Flex py={3} alignItems="center" justifyContent="space-between" pr={4}>
+ <Flex pb={3} alignItems="center" justifyContent="space-between" pl={1} pr={1}>
<Flex>
- <IconButton
- variant="ghost"
- icon={<ChevronLeftIcon />}
- aria-label="Previous node"
- disabled={!canUndo}
- onClick={() => previousPreviewNode()}
- />
- <IconButton
- variant="ghost"
- icon={<ChevronRightIcon />}
- aria-label="Next node"
- disabled={!canRedo}
- onClick={() => nextPreviewNode()}
- />
+ <ButtonGroup isAttached>
+ <Tooltip label="Go backward">
+ <IconButton
+ variant="subtle"
+ icon={<ChevronLeftIcon />}
+ aria-label="Previous node"
+ disabled={!canUndo}
+ onClick={() => previousPreviewNode()}
+ />
+ </Tooltip>
+ <Tooltip label="Go forward">
+ <IconButton
+ variant="subtle"
+ icon={<ChevronRightIcon />}
+ aria-label="Next node"
+ disabled={!canRedo}
+ onClick={() => nextPreviewNode()}
+ />
+ </Tooltip>
+ </ButtonGroup>
</Flex>
<Flex>
- <IconButton
- variant="ghost"
- aria-label="Justify content"
- icon={
- [
- <BiAlignJustify key="justify" />,
- <BiAlignLeft key="left" />,
- <BiAlignRight key="right" />,
- <BiAlignMiddle key="center" />,
- ][justification]
- }
- onClick={() => setJustification((curr: number) => (curr + 1) % 4)}
- />
- <IconButton
- variant="ghost"
- aria-label="Indent Text"
- icon={<BiRightIndent />}
- onClick={() => {
- setIndent((curr: number) => (curr ? 0 : 1))
- }}
- />
- <IconButton
- variant="ghost"
- aria-label="Change font"
- icon={<BiFont />}
- onClick={() => {
- setFont((curr: string) => (curr === 'sans serif' ? 'serif' : 'sans serif'))
- }}
- />
+ <Tooltip label="Justify content">
+ <IconButton
+ variant="subtle"
+ aria-label="Justify content"
+ icon={
+ [
+ <BiAlignJustify key="justify" />,
+ <BiAlignLeft key="left" />,
+ <BiAlignRight key="right" />,
+ <BiAlignMiddle key="center" />,
+ ][justification]
+ }
+ onClick={() => setJustification((curr: number) => (curr + 1) % 4)}
+ />
+ </Tooltip>
+ {/* <Tooltip label="Indent trees">
+ <IconButton
+ variant="subtle"
+ aria-label="Indent Text"
+ icon={<BiRightIndent />}
+ onClick={() => {
+ setIndent((curr: number) => (curr ? 0 : 1))
+ }}
+ />
+ </Tooltip>
+ <Tooltip label="Switch betwwen sans and serif">
+ <IconButton
+ variant="subtle"
+ aria-label="Change font"
+ icon={<BiFont />}
+ onClick={() => {
+ setFont((curr: string) => (curr === 'sans serif' ? 'serif' : 'sans serif'))
+ }}
+ />
+ </Tooltip> */}
</Flex>
</Flex>
)
diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index 2e32f4f..cbc0cc9 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -3,15 +3,19 @@ import React, { useContext, useEffect, useRef, useState } from 'react'
import { Toolbar } from './Toolbar'
import { Note } from './Note'
-import { Button, Slide, VStack, Flex, Heading, Box, IconButton } from '@chakra-ui/react'
+import { Button, Slide, VStack, Flex, Heading, Box, IconButton, Tooltip } from '@chakra-ui/react'
+import { Collapse } from './Collapse'
import { Scrollbars } from 'react-custom-scrollbars-2'
-import { ChevronLeftIcon, ChevronRightIcon, HamburgerIcon } from '@chakra-ui/icons'
-import { BiFile } from 'react-icons/bi'
+import { ChevronLeftIcon, ChevronRightIcon, CloseIcon, HamburgerIcon } from '@chakra-ui/icons'
+import { BiDotsVerticalRounded, BiFile, BiNetworkChart } from 'react-icons/bi'
+import { BsReverseLayoutSidebarInsetReverse } from 'react-icons/bs'
import { GraphData, NodeObject, LinkObject } from 'force-graph'
import { OrgRoamNode } from '../../api'
import { ThemeContext } from '../../util/themecontext'
-import { LinksByNodeId, NodeByCite, NodeById } from '../../pages/index'
+import { LinksByNodeId, NodeByCite, NodeById, Scope } from '../../pages/index'
+import { Resizable } from 're-resizable'
+import { usePersistantState } from '../../util/persistant-state'
export interface SidebarProps {
isOpen: boolean
@@ -28,6 +32,10 @@ export interface SidebarProps {
resetPreviewNode: any
previousPreviewNode: any
nextPreviewNode: any
+ openContextMenu: any
+ scope: Scope
+ setScope: any
+ windowWidth: number
}
const Sidebar = (props: SidebarProps) => {
@@ -46,10 +54,15 @@ const Sidebar = (props: SidebarProps) => {
resetPreviewNode,
previousPreviewNode,
nextPreviewNode,
+ openContextMenu,
+ scope,
+ setScope,
+ windowWidth,
} = props
const { highlightColor } = useContext(ThemeContext)
const [previewRoamNode, setPreviewRoamNode] = useState<OrgRoamNode>()
+ const [sidebarWidth, setSidebarWidth] = usePersistantState<number>('sidebarWidth', 400)
useEffect(() => {
if (!previewNode?.id) {
@@ -67,25 +80,58 @@ const Sidebar = (props: SidebarProps) => {
//maybe want to close it when clicking outside, but not sure
//const outsideClickRef = useRef();
return (
- <Slide
- direction="right"
+ <Collapse
+ animateOpacity={false}
+ dimension="width"
in={isOpen}
- style={{ width: 'clamp(400px, 30%, 500px)' }}
+ //style={{ position: 'relative' }}
unmountOnExit
+ startingSize={0}
+ style={{ height: '100vh' }}
>
- <Flex flexDirection="row" height="100%">
- <Box pl={2} color="black" bg="alt.100" w="100%" paddingBottom={15}>
+ <Resizable
+ size={{ height: '100%', width: sidebarWidth }}
+ onResizeStop={(e, direction, ref, d) => {
+ setSidebarWidth((curr: number) => curr + d.width)
+ }}
+ enable={{
+ top: false,
+ right: false,
+ bottom: false,
+ left: true,
+ topRight: false,
+ bottomRight: false,
+ bottomLeft: false,
+ topLeft: false,
+ }}
+ minWidth="220px"
+ maxWidth={windowWidth - 200}
+ >
+ <Box pl={2} color="black" h="100%" bg="alt.100" width="100%">
<Flex
- justifyContent="space-between"
- paddingTop={4}
+ whiteSpace="nowrap"
+ overflow="hidden"
+ textOverflow="ellipsis"
pl={4}
- pb={5}
- pr={3}
- alignItems="top"
+ alignItems="center"
color="black"
+ width="100%"
>
- <Flex alignItems="center" whiteSpace="nowrap" textOverflow="ellipsis" overflow="hidden">
- <BiFile />
+ <BiFile
+ onContextMenu={(e) => {
+ e.preventDefault()
+ openContextMenu(previewNode, e)
+ }}
+ />
+ <Flex
+ whiteSpace="nowrap"
+ textOverflow="ellipsis"
+ overflow="hidden"
+ onContextMenu={(e) => {
+ e.preventDefault()
+ openContextMenu(previewNode, e)
+ }}
+ >
<Heading
pl={2}
whiteSpace="nowrap"
@@ -99,13 +145,23 @@ const Sidebar = (props: SidebarProps) => {
{previewRoamNode?.title}
</Heading>
</Flex>
- <IconButton
- // eslint-disable-next-line react/jsx-no-undef
- icon={<HamburgerIcon />}
- aria-label="Close file-viewer"
- variant="link"
- onClick={onClose}
- />
+ <Flex flexDir="row" ml="auto">
+ <IconButton
+ // eslint-disable-next-line react/jsx-no-undef
+ m={1}
+ icon={<BiDotsVerticalRounded />}
+ aria-label="Options"
+ variant="subtle"
+ onClick={(e) => {
+ openContextMenu(previewNode, e, {
+ left: undefined,
+ top: 12,
+ right: -windowWidth + 20,
+ bottom: undefined,
+ })
+ }}
+ />
+ </Flex>
</Flex>
<Toolbar
{...{
@@ -132,7 +188,7 @@ const Sidebar = (props: SidebarProps) => {
borderRadius: 10,
backgroundColor: highlightColor,
}}
- color="black"
+ color="alt.100"
{...props}
/>
)}
@@ -148,13 +204,14 @@ const Sidebar = (props: SidebarProps) => {
justification,
justificationList,
linksByNodeId,
+ openContextMenu,
}}
/>
</VStack>
</Scrollbars>
</Box>
- </Flex>
- </Slide>
+ </Resizable>
+ </Collapse>
)
}
diff --git a/components/Tweaks/BehaviorPanel.tsx b/components/Tweaks/BehaviorPanel.tsx
index 651396d..5d61730 100644
--- a/components/Tweaks/BehaviorPanel.tsx
+++ b/components/Tweaks/BehaviorPanel.tsx
@@ -11,6 +11,7 @@ import {
VStack,
Text,
Box,
+ Switch,
} from '@chakra-ui/react'
import React from 'react'
import { initialBehavior, initialMouse } from '../config'
diff --git a/components/Tweaks/SliderWithInfo.tsx b/components/Tweaks/SliderWithInfo.tsx
index f70faae..9d6903a 100644
--- a/components/Tweaks/SliderWithInfo.tsx
+++ b/components/Tweaks/SliderWithInfo.tsx
@@ -30,7 +30,7 @@ export const SliderWithInfo = ({
const { onChange, label, infoText } = rest
const { highlightColor } = useContext(ThemeContext)
return (
- <Box key={label}>
+ <Box key={label} pt={1} pb={2}>
<Box display="flex" alignItems="flex-end">
<Text>{label}</Text>
{infoText && <InfoTooltip infoText={infoText} />}
diff --git a/components/Tweaks/index.tsx b/components/Tweaks/index.tsx
index c60e670..33f11ee 100644
--- a/components/Tweaks/index.tsx
+++ b/components/Tweaks/index.tsx
@@ -68,6 +68,7 @@ export const Tweaks = (props: TweakProps) => {
tagColors,
setTagColors,
} = props
+
const [showTweaks, setShowTweaks] = usePersistantState('showTweaks', false)
const { highlightColor, setHighlightColor } = useContext(ThemeContext)
@@ -75,12 +76,12 @@ export const Tweaks = (props: TweakProps) => {
<Box
position="absolute"
zIndex="overlay"
- marginTop={10}
- marginLeft={10}
+ marginTop={0}
+ marginLeft={0}
display={showTweaks ? 'none' : 'block'}
>
<IconButton
- variant="ghost"
+ variant="subtle"
aria-label="Settings"
icon={<SettingsIcon />}
onClick={() => setShowTweaks(true)}
@@ -88,17 +89,17 @@ export const Tweaks = (props: TweakProps) => {
</Box>
) : (
<Box
+ position="absolute"
bg="alt.100"
w="xs"
- marginTop={10}
- marginLeft={10}
- borderRadius="xl"
+ marginTop={2}
+ marginLeft={2}
+ borderRadius="lg"
paddingBottom={5}
- zIndex={300}
- position="relative"
+ zIndex="overlay"
boxShadow="xl"
- maxH={0.92 * globalThis.innerHeight}
- marginBottom={10}
+ maxH={'95vh'}
+ fontSize="sm"
>
<Box
display="flex"
@@ -108,7 +109,7 @@ export const Tweaks = (props: TweakProps) => {
paddingTop={1}
>
<Tooltip label={'Switch to ' + threeDim ? '2D' : '3D' + ' view'}>
- <Button onClick={() => setThreeDim(!threeDim)} variant="ghost" zIndex="overlay">
+ <Button onClick={() => setThreeDim(!threeDim)} variant="subtle" zIndex="overlay">
{threeDim ? '3D' : '2D'}
</Button>
</Tooltip>
@@ -124,7 +125,7 @@ export const Tweaks = (props: TweakProps) => {
setPhysics(initialPhysics)
setBehavior(initialBehavior)
}}
- variant="none"
+ variant="subtle"
size="sm"
/>
</Tooltip>
@@ -132,7 +133,7 @@ export const Tweaks = (props: TweakProps) => {
size="sm"
icon={<CloseIcon />}
aria-label="Close Tweak Panel"
- variant="ghost"
+ variant="subtle"
onClick={() => setShowTweaks(false)}
/>
</Box>
diff --git a/components/config.ts b/components/config.ts
index e1923f2..fd77ba3 100644
--- a/components/config.ts
+++ b/components/config.ts
@@ -58,13 +58,13 @@ export const initialVisuals = {
nodeOpacity: 1,
nodeResolution: 12,
labels: 2,
- labelScale: 1.5,
+ labelScale: 1,
labelFontSize: 13,
labelLength: 40,
labelWordWrap: 25,
labelLineSpace: 1,
highlight: true,
- highlightNodeSize: 2,
+ highlightNodeSize: 1.2,
highlightLinkSize: 2,
highlightFade: 0.8,
highlightAnim: true,
@@ -123,6 +123,7 @@ export const initialMouse = {
follow: 'never',
context: 'right',
preview: 'click',
+ backgroundExitsLocal: false,
}
export const colorList = [
diff --git a/components/contextmenu.tsx b/components/contextmenu.tsx
index 73758a5..bff4861 100644
--- a/components/contextmenu.tsx
+++ b/components/contextmenu.tsx
@@ -48,20 +48,21 @@ import { BiNetworkChart } from 'react-icons/bi'
export default interface ContextMenuProps {
background: Boolean
- node?: OrgRoamNode
+ target: OrgRoamNode | null
nodeType?: string
- coordinates: number[]
+ coordinates: { [direction: string]: number }
handleLocal: (node: OrgRoamNode, add: string) => void
menuClose: () => void
scope: { nodeIds: string[] }
webSocket: any
setPreviewNode: any
+ contextMenuRef: any
}
export const ContextMenu = (props: ContextMenuProps) => {
const {
background,
- node,
+ target,
nodeType,
coordinates,
handleLocal,
@@ -69,59 +70,65 @@ export const ContextMenu = (props: ContextMenuProps) => {
scope,
webSocket,
setPreviewNode,
+ contextMenuRef,
} = props
const { isOpen, onOpen, onClose } = useDisclosure()
const copyRef = useRef<any>()
return (
<>
- <Box
- position="absolute"
- zIndex="overlay"
- left={coordinates[0] + 10}
- top={coordinates[1] - 10}
- padding={5}
- >
- <Menu closeOnBlur={false} defaultIsOpen onClose={() => menuClose()}>
- <MenuList zIndex="overlay" bgColor="alt.100" borderColor="gray.500" maxWidth="xs">
- {node && (
- <>
- <Heading size="sm" isTruncated px={3} py={1}>
- {node.title}
- </Heading>
- <MenuDivider borderColor="gray.500" />
- </>
- )}
- {scope.nodeIds.length !== 0 && (
- <>
- <MenuItem onClick={() => handleLocal(node!, 'add')} icon={<PlusSquareIcon />}>
- Expand local graph at node
- </MenuItem>
- <MenuItem onClick={() => handleLocal(node!, 'replace')} icon={<ViewIcon />}>
- Open local graph for this node
- </MenuItem>
- </>
- )}
- {!node?.properties.FILELESS ? (
- <MenuItem
- icon={<EditIcon />}
- onClick={() => openNodeInEmacs(node as OrgRoamNode, webSocket)}
- >
- Open in Emacs
+ <Menu defaultIsOpen closeOnBlur={false} onClose={() => menuClose()}>
+ <MenuList
+ zIndex="overlay"
+ bgColor="white"
+ color="black"
+ borderColor="gray.500"
+ maxWidth="xs"
+ position="absolute"
+ left={coordinates.left}
+ top={coordinates.top}
+ right={coordinates.right}
+ bottom={coordinates.bottom}
+ fontSize="xs"
+ >
+ {target && (
+ <>
+ <Heading size="xs" isTruncated px={3} py={1}>
+ {target.title}
+ </Heading>
+ <MenuDivider borderColor="gray.500" />
+ </>
+ )}
+ {scope.nodeIds.length !== 0 && (
+ <>
+ <MenuItem onClick={() => handleLocal(target!, 'add')} icon={<PlusSquareIcon />}>
+ Expand local graph at node
</MenuItem>
- ) : (
- <MenuItem icon={<AddIcon />} onClick={() => createNodeInEmacs(node, webSocket)}>
- Create node
+ <MenuItem onClick={() => handleLocal(target!, 'replace')} icon={<BiNetworkChart />}>
+ Open local graph for this node
</MenuItem>
- )}
- {node?.properties.ROAM_REFS && (
- <MenuItem icon={<ExternalLinkIcon />}>Open in Zotero</MenuItem>
- )}
- {scope.nodeIds.length === 0 && (
- <MenuItem icon={<BiNetworkChart />} onClick={() => handleLocal(node!, 'replace')}>
- Open local graph
- </MenuItem>
- )}
- {/* Doesn't work at the moment
+ </>
+ )}
+ {!target?.properties?.FILELESS ? (
+ <MenuItem
+ icon={<EditIcon />}
+ onClick={() => openNodeInEmacs(target as OrgRoamNode, webSocket)}
+ >
+ Open in Emacs
+ </MenuItem>
+ ) : (
+ <MenuItem icon={<AddIcon />} onClick={() => createNodeInEmacs(target, webSocket)}>
+ Create node
+ </MenuItem>
+ )}
+ {target?.properties?.ROAM_REFS && (
+ <MenuItem icon={<ExternalLinkIcon />}>Open in Zotero</MenuItem>
+ )}
+ {scope.nodeIds.length === 0 && (
+ <MenuItem icon={<BiNetworkChart />} onClick={() => handleLocal(target!, 'replace')}>
+ Open local graph
+ </MenuItem>
+ )}
+ {/* Doesn't work at the moment
<MenuItem closeOnSelect={false} closeOnBlur={false}>
<Box _hover={{ bg: 'gray.200' }} width="100%">
<Popover
@@ -151,27 +158,26 @@ export const ContextMenu = (props: ContextMenuProps) => {
</Box>
</MenuItem> */}
+ <MenuItem
+ icon={<ViewIcon />}
+ onClick={() => {
+ setPreviewNode(target)
+ }}
+ >
+ Preview
+ </MenuItem>
+ {target?.level === 0 && (
<MenuItem
- icon={<ViewIcon />}
- onClick={() => {
- setPreviewNode(node)
- }}
+ closeOnSelect={false}
+ icon={<DeleteIcon color="red.500" />}
+ color="red.500"
+ onClick={onOpen}
>
- Preview
+ Permenantly delete note
</MenuItem>
- {node?.level === 0 && (
- <MenuItem
- closeOnSelect={false}
- icon={<DeleteIcon color="red.500" />}
- color="red.500"
- onClick={onOpen}
- >
- Permenantly delete note
- </MenuItem>
- )}
- </MenuList>
- </Menu>
- </Box>
+ )}
+ </MenuList>
+ </Menu>
<Modal isCentered isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent zIndex="popover">
@@ -180,8 +186,8 @@ export const ContextMenu = (props: ContextMenuProps) => {
<ModalBody>
<VStack spacing={4} display="flex" alignItems="flex-start">
<Text>This will permanently delete your note:</Text>
- <Text fontWeight="bold">{node?.title}</Text>
- {node?.level !== 0 && (
+ <Text fontWeight="bold">{target?.title}</Text>
+ {target?.level !== 0 && (
<Text>
This will only delete the from this heading until but not including the next node.
Your parent file and all other nodes will not be deleted.
@@ -207,7 +213,7 @@ export const ContextMenu = (props: ContextMenuProps) => {
ml={3}
onClick={() => {
console.log('aaaaa')
- deleteNodeInEmacs(node!, webSocket)
+ deleteNodeInEmacs(target!, webSocket)
onClose()
menuClose()
}}
generated by cgit v1.2.3 (git 2.46.2) at 2024-12-23 10:58:16 +0000