diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index 458ea6b0c..a9ba89461 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -2203,6 +2203,7 @@ "right_pane": { "empty_message": "Nothing to show for this note", "empty_button": "Hide the panel", - "toggle": "Toggle right panel" + "toggle": "Toggle right panel", + "custom_widget_go_to_source": "Go to source code" } } diff --git a/apps/client/src/widgets/sidebar/RightPanelContainer.tsx b/apps/client/src/widgets/sidebar/RightPanelContainer.tsx index 498013c1e..c49dc15cf 100644 --- a/apps/client/src/widgets/sidebar/RightPanelContainer.tsx +++ b/apps/client/src/widgets/sidebar/RightPanelContainer.tsx @@ -4,6 +4,7 @@ import "./RightPanelContainer.css"; import Split from "@triliumnext/split.js"; import { useEffect, useRef } from "preact/hooks"; +import appContext from "../../components/app_context"; import { t } from "../../services/i18n"; import options from "../../services/options"; import { DEFAULT_GUTTER_SIZE } from "../../services/resizer"; @@ -77,6 +78,13 @@ function CustomWidget({ originalWidget }: { originalWidget: LegacyRightPanelWidg id={originalWidget._noteId} title={originalWidget.widgetTitle} containerRef={containerRef} + contextMenuItems={[ + { + title: t("right_pane.custom_widget_go_to_source"), + uiIcon: "bx bx-code-curly", + handler: () => appContext.tabManager.openInNewTab(originalWidget._noteId, null, true) + } + ]} > diff --git a/apps/client/src/widgets/sidebar/RightPanelWidget.tsx b/apps/client/src/widgets/sidebar/RightPanelWidget.tsx index a64b636d6..42d569d64 100644 --- a/apps/client/src/widgets/sidebar/RightPanelWidget.tsx +++ b/apps/client/src/widgets/sidebar/RightPanelWidget.tsx @@ -2,6 +2,8 @@ import clsx from "clsx"; import { ComponentChildren, RefObject } from "preact"; import { useContext, useState } from "preact/hooks"; +import contextMenu, { MenuItem } from "../../menus/context_menu"; +import ActionButton from "../react/ActionButton"; import { useSyncedRef, useTriliumOptionJson } from "../react/hooks"; import Icon from "../react/Icon"; import { ParentComponent } from "../react/react_utils"; @@ -12,9 +14,10 @@ interface RightPanelWidgetProps { children: ComponentChildren; buttons?: ComponentChildren; containerRef?: RefObject; + contextMenuItems?: MenuItem[]; } -export default function RightPanelWidget({ id, title, buttons, children, containerRef: externalContainerRef }: RightPanelWidgetProps) { +export default function RightPanelWidget({ id, title, buttons, children, containerRef: externalContainerRef, contextMenuItems }: RightPanelWidgetProps) { const [ rightPaneCollapsedItems, setRightPaneCollapsedItems ] = useTriliumOptionJson("rightPaneCollapsedItems"); const [ expanded, setExpanded ] = useState(!rightPaneCollapsedItems.includes(id)); const containerRef = useSyncedRef(externalContainerRef, null); @@ -49,7 +52,24 @@ export default function RightPanelWidget({ id, title, buttons, children, contain icon="bx bx-chevron-down" />
{title}
-
{buttons}
+
+ {buttons} + {contextMenuItems && ( + { + e.stopPropagation(); + contextMenu.show({ + x: e.pageX, + y: e.pageY, + items: contextMenuItems, + selectMenuItemHandler: () => {} + }); + }} + /> + )} +