gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-28 18:18:55 +01:00
Code Issues Actions 16 Packages Projects Releases Wiki Activity

feat(react/ribbon): bring back toggling tabs via keyboard shortcut

Browse Source
This commit is contained in:
Elian Doran 2025-08-24 22:14:42 +03:00
parent f2db7baeba
commit 6cab47fb55
No known key found for this signature in database
2 changed files with 36 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
apps/client/src/widgets/react/hooks.tsx
View File

@ -15,29 +15,31 @@ import { RefObject, VNode } from "preact";
import { Tooltip } from "bootstrap";
import { CSSProperties } from "preact/compat";
type TriliumEventHandler<T extends EventNames> = (data: EventData<T>) => void;
export function useTriliumEvent<T extends EventNames>(eventName: T, handler: (data: EventData<T>) => void) {
const parentComponent = useContext(ParentComponent)!;
parentComponent.registerHandler(eventName, handler);
return (() => parentComponent.removeHandler(eventName, handler));
}
export function useTriliumEvent<T extends EventNames>(eventName: T | T[], handler: TriliumEventHandler<T>) {
const parentComponent = useContext(ParentComponent);
export function useTriliumEvents<T extends EventNames>(eventNames: T[], handler: (data: EventData<T>, eventName: T) => void) {
const parentComponent = useContext(ParentComponent)!;
const handlers: ({ eventName: T, callback: (data: EventData<T>) => void })[] = [];
if (!parentComponent) {
console.error("React widget has no legacy parent component. Event handling will not work.", new Error().stack);
return;
for (const eventName of eventNames) {
handlers.push({ eventName, callback: (data) => {
handler(data, eventName);
}})
}
if (Array.isArray(eventName)) {
for (const eventSingleName of eventName) {
parentComponent.registerHandler(eventSingleName, handler);
for (const { eventName, callback } of handlers) {
parentComponent.registerHandler(eventName, callback);
}
return (() => {
for (const { eventName, callback } of handlers) {
parentComponent.removeHandler(eventName, callback);
}
return (() => {
for (const eventSingleName of eventName) {
parentComponent.removeHandler(eventSingleName, handler)
}
});
} else {
parentComponent.registerHandler(eventName, handler);
return (() => parentComponent.removeHandler(eventName, handler));
}
});
}
export function useSpacedUpdate(callback: () => void | Promise<void>, interval = 1000) {

19
apps/client/src/widgets/ribbon/Ribbon.tsx
View File

@ -1,6 +1,6 @@
import { useEffect, useMemo, useState } from "preact/hooks";
import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
import { t } from "../../services/i18n";
import { useNoteContext } from "../react/hooks";
import { useNoteContext, useTriliumEvent, useTriliumEvents } from "../react/hooks";
import "./style.css";
import { VNode } from "preact";
import BasicPropertiesTab from "./BasicPropertiesTab";
@ -8,7 +8,7 @@ import FormattingTab from "./FormattingTab";
import { numberObjectsInPlace } from "../../services/utils";
import { TabContext } from "./ribbon-interface";
import options from "../../services/options";
import { CommandNames } from "../../components/app_context";
import { CommandNames, EventNames } from "../../components/app_context";
import FNote from "../../entities/fnote";
import ScriptTab from "./ScriptTab";
import EditedNotesTab from "./EditedNotesTab";
@ -170,6 +170,19 @@ export default function Ribbon() {
}
}, [ note?.noteId ]);
// Register keyboard shortcuts.
const eventsToListenTo = useMemo(() => TAB_CONFIGURATION.filter(config => config.toggleCommand).map(config => config.toggleCommand) as EventNames[], []);
useTriliumEvents(eventsToListenTo, useCallback((e, toggleCommand) => {
const correspondingTab = filteredTabs.find(tab => tab.toggleCommand === toggleCommand);
if (correspondingTab) {
if (activeTabIndex !== correspondingTab.index) {
setActiveTabIndex(correspondingTab.index);
} else {
setActiveTabIndex(undefined);
}
}
}, [ filteredTabs, activeTabIndex ]));
return (
<div className="ribbon-container" style={{ contain: "none" }}>
<div className="ribbon-top-row">