apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-06-28 21:49:40 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: implement platform-aware keyboard shortcuts for sidebar and toolbar actions, enhancing user experience

Browse source
This commit is contained in:
Anish Sarkar 2026-02-18 00:26:18 +05:30
parent baa02c50e4
commit 7b44dd58f5
6 changed files with 113 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

29
surfsense_web/components/ui/fixed-toolbar-buttons.tsx
View file

@ -17,6 +17,7 @@ import { KEYS } from "platejs";
import { useEditorReadOnly, useEditorRef } from "platejs/react";
import { useEditorSave } from "@/components/editor/editor-save-context";
import { usePlatformShortcut } from "@/hooks/use-platform-shortcut";
import { Spinner } from "@/components/ui/spinner";
import { InsertToolbarButton } from "./insert-toolbar-button";
@ -30,6 +31,7 @@ export function FixedToolbarButtons() {
const readOnly = useEditorReadOnly();
const editor = useEditorRef();
const { onSave, hasUnsavedChanges, isSaving, canToggleMode } = useEditorSave();
const { shortcut } = usePlatformShortcut();
return (
<div className="flex w-full items-center">
@ -39,7 +41,7 @@ export function FixedToolbarButtons() {
<>
<ToolbarGroup>
<ToolbarButton
tooltip="Undo (⌘+Z)"
tooltip={`Undo ${shortcut("Mod", "Z")}`}
onClick={() => {
editor.undo();
editor.tf.focus();
@ -49,7 +51,7 @@ export function FixedToolbarButtons() {
</ToolbarButton>
<ToolbarButton
tooltip="Redo (⌘+⇧+Z)"
tooltip={`Redo ${shortcut("Mod", "Shift", "Z")}`}
onClick={() => {
editor.redo();
editor.tf.focus();
@ -65,27 +67,36 @@ export function FixedToolbarButtons() {
</ToolbarGroup>
<ToolbarGroup>
<MarkToolbarButton nodeType={KEYS.bold} tooltip="Bold (⌘+B)">
<MarkToolbarButton nodeType={KEYS.bold} tooltip={`Bold ${shortcut("Mod", "B")}`}>
<BoldIcon />
</MarkToolbarButton>
<MarkToolbarButton nodeType={KEYS.italic} tooltip="Italic (⌘+I)">
<MarkToolbarButton nodeType={KEYS.italic} tooltip={`Italic ${shortcut("Mod", "I")}`}>
<ItalicIcon />
</MarkToolbarButton>
<MarkToolbarButton nodeType={KEYS.underline} tooltip="Underline (⌘+U)">
<MarkToolbarButton
nodeType={KEYS.underline}
tooltip={`Underline ${shortcut("Mod", "U")}`}
>
<UnderlineIcon />
</MarkToolbarButton>
<MarkToolbarButton nodeType={KEYS.strikethrough} tooltip="Strikethrough (⌘+⇧+M)">
<MarkToolbarButton
nodeType={KEYS.strikethrough}
tooltip={`Strikethrough ${shortcut("Mod", "Shift", "X")}`}
>
<StrikethroughIcon />
</MarkToolbarButton>
<MarkToolbarButton nodeType={KEYS.code} tooltip="Code (⌘+E)">
<MarkToolbarButton nodeType={KEYS.code} tooltip={`Code ${shortcut("Mod", "E")}`}>
<Code2Icon />
</MarkToolbarButton>
<MarkToolbarButton nodeType={KEYS.highlight} tooltip="Highlight (⌘+⇧+H)">
<MarkToolbarButton
nodeType={KEYS.highlight}
tooltip={`Highlight ${shortcut("Mod", "Shift", "H")}`}
>
<HighlighterIcon />
</MarkToolbarButton>
</ToolbarGroup>
@ -103,7 +114,7 @@ export function FixedToolbarButtons() {
{!readOnly && onSave && hasUnsavedChanges && (
<ToolbarGroup>
<ToolbarButton
tooltip={isSaving ? "Saving..." : "Save (⌘+S)"}
tooltip={isSaving ? "Saving..." : `Save ${shortcut("Mod", "S")}`}
onClick={onSave}
disabled={isSaving}
className="bg-primary text-primary-foreground hover:bg-primary/90"

2
surfsense_web/components/ui/sidebar.tsx
View file

@ -24,7 +24,7 @@ const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
const SIDEBAR_WIDTH = "16rem";
const SIDEBAR_WIDTH_MOBILE = "18rem";
const SIDEBAR_WIDTH_ICON = "3rem";
const SIDEBAR_KEYBOARD_SHORTCUT = "b";
const SIDEBAR_KEYBOARD_SHORTCUT = "\\";
type SidebarContext = {
state: "expanded" | "collapsed";