diff --git a/src/ts/core/features/vim-mode/commands/panel-commands.ts b/src/ts/core/features/vim-mode/commands/panel-commands.ts index eaeebee9..fe265341 100644 --- a/src/ts/core/features/vim-mode/commands/panel-commands.ts +++ b/src/ts/core/features/vim-mode/commands/panel-commands.ts @@ -15,7 +15,9 @@ const closeSidebarPage = () => { export const PanelCommands = [ // Need to wrap in function to preserve the `this` reference inside of RoamPanel - nmap('h', 'Select Panel Left', () => RoamPanel.previousPanel().select()), - nmap('l', 'Select Panel Right', () => RoamPanel.nextPanel().select()), + nmap('h', 'Select Main Panel', () => RoamPanel.mainPanel().select()), + nmap('l', 'Select Prior Sidebar Panel', () => RoamPanel.previousSidebarPanel().select()), + nmap('ctrl+k', 'Select Previous Panel', () => RoamPanel.previousPanel().select()), + nmap('ctrl+j', 'Select Next Panel', () => RoamPanel.nextPanel().select()), map('ctrl+w', 'Close Page in Side Bar', closeSidebarPage), ] diff --git a/src/ts/core/features/vim-mode/roam/roam-event.ts b/src/ts/core/features/vim-mode/roam/roam-event.ts index 6a59a68b..9d9eb1e0 100644 --- a/src/ts/core/features/vim-mode/roam/roam-event.ts +++ b/src/ts/core/features/vim-mode/roam/roam-event.ts @@ -23,7 +23,7 @@ export const RoamEvent = { // Triggers when the sidebar is shown or hidden onSidebarToggle(handler: (isSideBarShowing: boolean) => void): DisconnectFn { return onSelectorChange(Selectors.sidebar, () => { - const isSidebarShowing = !!document.querySelector(Selectors.sidebarContent) + const isSidebarShowing = !!document.querySelector(Selectors.sidebar) handler(isSidebarShowing) }) }, diff --git a/src/ts/core/features/vim-mode/roam/roam-panel.ts b/src/ts/core/features/vim-mode/roam/roam-panel.ts index 17b3905e..48a9bbb9 100644 --- a/src/ts/core/features/vim-mode/roam/roam-panel.ts +++ b/src/ts/core/features/vim-mode/roam/roam-panel.ts @@ -9,12 +9,16 @@ type BlockNavigationState = { panelOrder: PanelId[] panels: Map focusedPanel: PanelIndex + lastFocusedSidebarPanel: PanelIndex + previouslySelectedBlocks: Set } const state: BlockNavigationState = { panelOrder: [], panels: new Map(), focusedPanel: 0, + lastFocusedSidebarPanel: 1, + previouslySelectedBlocks: new Set(), } /** @@ -26,7 +30,7 @@ type PanelIndex = number type PanelElement = HTMLElement const PANEL_CSS_CLASS = 'roam-toolkit--panel' -const PANEL_SELECTOR = `.${PANEL_CSS_CLASS}, ${Selectors.sidebarContent}` +const PANEL_SELECTOR = `.${PANEL_CSS_CLASS}, ${Selectors.sidebarPage}` /** * A "Panel" is a viewport that contains blocks. For now, there is just @@ -121,8 +125,13 @@ export class RoamPanel { } select() { + if (state.focusedPanel > 0) { + state.lastFocusedSidebarPanel = state.focusedPanel + } state.focusedPanel = state.panelOrder.indexOf(this.element) - this.element.scrollIntoView({behavior: 'smooth'}) + this.element.scrollIntoView({ + inline: 'end', + }) } static selected(): RoamPanel { @@ -144,6 +153,10 @@ export class RoamPanel { return RoamPanel.at(0) } + static previousSidebarPanel(): RoamPanel { + return RoamPanel.at(state.lastFocusedSidebarPanel) + } + static previousPanel(): RoamPanel { return RoamPanel.at(state.focusedPanel - 1) } @@ -161,7 +174,8 @@ export class RoamPanel { private static get(panelId: PanelId): RoamPanel { // lazily create one if doesn't already exist if (!state.panels.has(panelId)) { - state.panels.set(panelId, new RoamPanel(panelId)) + const panel = new RoamPanel(panelId) + state.panels.set(panelId, panel) } return assumeExists(state.panels.get(panelId)) } diff --git a/src/ts/core/roam/selectors.ts b/src/ts/core/roam/selectors.ts index 209b6137..176662b1 100644 --- a/src/ts/core/roam/selectors.ts +++ b/src/ts/core/roam/selectors.ts @@ -9,8 +9,8 @@ export const Selectors = { mainContent: '.roam-article', mainPanel: '.roam-body-main', - sidebarContent: '#roam-right-sidebar-content', - sidebarPage: '#right-sidebar > div', + sidebarContent: '.sidebar-content', + sidebarPage: '.sidebar-content > div', sidebar: '#right-sidebar', leftPanel: '.roam-sidebar-container',